Barchart: move viz to core (#33947)

* Adds support for Tooltip in BarChartPanel

* Revert some formatting

* Remove BarChart story

* BarChart: move visualization to core

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

packages/grafana-ui/src/components/GraphNG/types.ts

@@ -1,5 +1,5 @@
 import { DataFrameFieldIndex, FieldMatcher } from '@grafana/data';
-import { SeriesVisibilityChangeMode } from '..';
+import { SeriesVisibilityChangeMode } from '../PanelChrome';
 
 /**
  * Event being triggered when the user interact with the Graph legend.

packages/grafana-ui/src/components/GraphNG/utils.ts

@@ -1,24 +1,7 @@
 import { XYFieldMatchers } from './types';
-import {
+import { ArrayVector, DataFrame, FieldType, outerJoinDataFrames } from '@grafana/data';
-  ArrayVector,
-  DataFrame,
-  EventBus,
-  FieldType,
-  GrafanaTheme2,
-  outerJoinDataFrames,
-  TimeRange,
-  TimeZone,
-} from '@grafana/data';
 import { nullToUndefThreshold } from './nullToUndefThreshold';
 
-export type PrepConfigOpts<T extends Record<string, any> = {}> = {
-  frame: DataFrame;
-  theme: GrafanaTheme2;
-  timeZone: TimeZone;
-  getTimeRange: () => TimeRange;
-  eventBus: EventBus;
-} & T;
-
 function applySpanNullsThresholds(frames: DataFrame[]) {
   for (const frame of frames) {
     let refField = frame.fields.find((field) => field.type === FieldType.time); // this doesnt need to be time, just any numeric/asc join field

packages/grafana-ui/src/components/TimeSeries/utils.ts

@@ -13,7 +13,7 @@ import {
   getFieldSeriesColor,
 } from '@grafana/data';
 
-import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
+import { UPlotConfigBuilder, UPlotConfigPrepFn } from '../uPlot/config/UPlotConfigBuilder';
 import { FIXED_UNIT } from '../GraphNG/GraphNG';
 import {
   AxisPlacement,
@@ -25,7 +25,6 @@ import {
   ScaleOrientation,
 } from '../uPlot/config';
 import { collectStackingGroups } from '../uPlot/utils';
-import { PrepConfigOpts } from '../GraphNG/utils';
 
 const defaultFormatter = (v: any) => (v == null ? '-' : v.toFixed(1));
 
@@ -35,9 +34,14 @@ const defaultConfig: GraphFieldConfig = {
   axisPlacement: AxisPlacement.Auto,
 };
 
-type PrepConfig = (opts: PrepConfigOpts<{ sync: DashboardCursorSync }>) => UPlotConfigBuilder;
+export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursorSync }> = ({
-
+  frame,
-export const preparePlotConfigBuilder: PrepConfig = ({ frame, theme, timeZone, getTimeRange, eventBus, sync }) => {
+  theme,
+  timeZone,
+  getTimeRange,
+  eventBus,
+  sync,
+}) => {
   const builder = new UPlotConfigBuilder(timeZone);
 
   // X is the first field in the aligned frame

packages/grafana-ui/src/components/index.ts

@@ -196,8 +196,6 @@ export { FormattedValueDisplay } from './FormattedValueDisplay/FormattedValueDis
 export { ButtonSelect } from './Dropdown/ButtonSelect';
 export { PluginSignatureBadge, PluginSignatureBadgeProps } from './PluginSignatureBadge/PluginSignatureBadge';
 
-// Legacy forms
-
 // Export this until we've figured out a good approach to inline form styles.
 export { InlineFormLabel } from './FormLabel/FormLabel';
 
@@ -228,8 +226,9 @@ export { LegacyForms, LegacyInputStatus };
 // WIP, need renames and exports cleanup
 export * from './uPlot/config';
 export { ScaleDistribution } from './uPlot/models.gen';
-export { UPlotConfigBuilder } from './uPlot/config/UPlotConfigBuilder';
+export { UPlotConfigBuilder, UPlotConfigPrepFn } from './uPlot/config/UPlotConfigBuilder';
 export { UPlotChart } from './uPlot/Plot';
+export { PlotLegend } from './uPlot/PlotLegend';
 export * from './uPlot/geometries';
 export * from './uPlot/plugins';
 export { usePlotContext } from './uPlot/context';
@@ -237,8 +236,6 @@ export { GraphNG, GraphNGProps, FIXED_UNIT } from './GraphNG/GraphNG';
 export { TimeSeries } from './TimeSeries/TimeSeries';
 export { useGraphNGContext } from './GraphNG/hooks';
 export { preparePlotFrame } from './GraphNG/utils';
-export { BarChart } from './BarChart/BarChart';
-export { BarChartOptions, BarValueVisibility, BarChartFieldConfig } from './BarChart/types';
 export { GraphNGLegendEvent } from './GraphNG/types';
 export * from './PanelChrome/types';
 export * from './NodeGraph';

packages/grafana-ui/src/components/uPlot/config.ts

@@ -50,6 +50,15 @@ export enum BarAlignment {
   After = 1,
 }
 
+/**
+ * @alpha
+ */
+export enum BarValueVisibility {
+  Auto = 'auto',
+  Never = 'never',
+  Always = 'always',
+}
+
 /**
  * @alpha
  */

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts

@@ -1,11 +1,19 @@
+import uPlot, { Cursor, Band, Hooks, Select } from 'uplot';
+import { defaultsDeep } from 'lodash';
 import { PlotConfig, TooltipInterpolator } from '../types';
 import { ScaleProps, UPlotScaleBuilder } from './UPlotScaleBuilder';
 import { SeriesProps, UPlotSeriesBuilder } from './UPlotSeriesBuilder';
 import { AxisProps, UPlotAxisBuilder } from './UPlotAxisBuilder';
 import { AxisPlacement } from '../config';
-import uPlot, { Cursor, Band, Hooks, Select } from 'uplot';
+import {
-import { defaultsDeep } from 'lodash';
+  DataFrame,
-import { DefaultTimeZone, getTimeZoneInfo, TimeZone } from '@grafana/data';
+  DefaultTimeZone,
+  EventBus,
+  getTimeZoneInfo,
+  GrafanaTheme2,
+  TimeRange,
+  TimeZone,
+} from '@grafana/data';
 import { pluginLog } from '../utils';
 import { getThresholdsDrawHook, UPlotThresholdOptions } from './UPlotThresholds';
 
@@ -205,3 +213,15 @@ export class UPlotConfigBuilder {
     return this.tz ? uPlot.tzDate(date, this.tz) : date;
   };
 }
+
+/** @alpha */
+type UPlotConfigPrepOpts<T extends Record<string, any> = {}> = {
+  frame: DataFrame;
+  theme: GrafanaTheme2;
+  timeZone: TimeZone;
+  getTimeRange: () => TimeRange;
+  eventBus: EventBus;
+} & T;
+
+/** @alpha */
+export type UPlotConfigPrepFn<T extends {} = {}> = (opts: UPlotConfigPrepOpts<T>) => UPlotConfigBuilder;

public/app/plugins/panel/barchart/BarChart.tsx

@@ -1,12 +1,8 @@
 import React from 'react';
 import { DataFrame, TimeRange } from '@grafana/data';
+import { GraphNG, GraphNGProps, LegendDisplayMode, PlotLegend, UPlotConfigBuilder, withTheme2 } from '@grafana/ui';
 import { BarChartOptions } from './types';
-import { withTheme2 } from '../../themes/ThemeContext';
 import { preparePlotConfigBuilder, preparePlotFrame } from './utils';
-import { LegendDisplayMode } from '../VizLegend/models.gen';
-import { PlotLegend } from '../uPlot/PlotLegend';
-import { GraphNG, GraphNGProps } from '../GraphNG/GraphNG';
-import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
 
 /**
  * @alpha

public/app/plugins/panel/barchart/BarChartPanel.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 import { FieldType, PanelProps, TimeRange, VizOrientation } from '@grafana/data';
-import { BarChart, BarChartOptions, GraphNGLegendEvent, TooltipPlugin } from '@grafana/ui';
+import { GraphNGLegendEvent, TooltipPlugin } from '@grafana/ui';
 import { hideSeriesConfigFactory } from '../timeseries/overrides/hideSeriesConfigFactory';
+import { BarChartOptions } from './types';
+import { BarChart } from './BarChart';
 
 interface Props extends PanelProps<BarChartOptions> {}
 

public/app/plugins/panel/barchart/bars.ts

@@ -1,8 +1,8 @@
 import uPlot, { Axis, Series } from 'uplot';
 import { Quadtree, Rect, pointWithin } from './quadtree';
 import { distribute, SPACE_BETWEEN } from './distribute';
-import { TooltipInterpolator } from '../uPlot/types';
+import { TooltipInterpolator } from '@grafana/ui/src/components/uPlot/types';
-import { ScaleDirection, ScaleOrientation } from '../uPlot/config';
+import { ScaleDirection, ScaleOrientation } from '@grafana/ui/src/components/uPlot/config';
 
 const groupDistr = SPACE_BETWEEN;
 const barDistr = SPACE_BETWEEN;

public/app/plugins/panel/barchart/module.tsx

@@ -7,16 +7,9 @@ import {
   VizOrientation,
 } from '@grafana/data';
 import { BarChartPanel } from './BarChartPanel';
-import {
+import { StackingMode, BarValueVisibility, graphFieldOptions, commonOptionsBuilder } from '@grafana/ui';
-  BarChartFieldConfig,
-  BarChartOptions,
-  StackingMode,
-  BarValueVisibility,
-  graphFieldOptions,
-  commonOptionsBuilder,
-} from '@grafana/ui';
 
-import { defaultBarChartFieldConfig } from '@grafana/ui/src/components/BarChart/types';
+import { BarChartFieldConfig, BarChartOptions, defaultBarChartFieldConfig } from 'app/plugins/panel/barchart/types';
 
 export const plugin = new PanelPlugin<BarChartOptions, BarChartFieldConfig>(BarChartPanel)
   .useFieldConfig({

public/app/plugins/panel/barchart/types.ts

@@ -1,15 +1,13 @@
 import { VizOrientation } from '@grafana/data';
-import { AxisConfig, GraphGradientMode, HideableFieldConfig, StackingMode } from '../uPlot/config';
+import {
-import { OptionsWithLegend, OptionsWithTooltip } from '../../options';
+  AxisConfig,
-
+  BarValueVisibility,
-/**
+  GraphGradientMode,
- * @alpha
+  HideableFieldConfig,
- */
+  OptionsWithLegend,
-export enum BarValueVisibility {
+  OptionsWithTooltip,
-  Auto = 'auto',
+  StackingMode,
-  Never = 'never',
+} from '@grafana/ui';
-  Always = 'always',
-}
 
 /**
  * @alpha

public/app/plugins/panel/barchart/utils.test.ts

@@ -9,10 +9,14 @@ import {
   MutableDataFrame,
   VizOrientation,
 } from '@grafana/data';
-import { BarChartFieldConfig, BarChartOptions, BarValueVisibility } from './types';
+import { BarChartFieldConfig, BarChartOptions } from './types';
-import { GraphGradientMode, StackingMode } from '../uPlot/config';
+import {
-import { LegendDisplayMode } from '../VizLegend/models.gen';
+  BarValueVisibility,
-import { TooltipDisplayMode } from '../VizTooltip';
+  GraphGradientMode,
+  LegendDisplayMode,
+  StackingMode,
+  TooltipDisplayMode,
+} from '@grafana/ui';
 
 function mockDataFrame() {
   const df1 = new MutableDataFrame({

public/app/plugins/panel/barchart/utils.ts

@@ -1,4 +1,3 @@
-import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
 import {
   DataFrame,
   FieldType,
@@ -9,14 +8,18 @@ import {
   MutableDataFrame,
   VizOrientation,
 } from '@grafana/data';
-import { BarChartFieldConfig, BarChartOptions, BarValueVisibility, defaultBarChartFieldConfig } from './types';
+import { BarChartFieldConfig, BarChartOptions, defaultBarChartFieldConfig } from './types';
-import { AxisPlacement, ScaleDirection, ScaleOrientation } from '../uPlot/config';
 import { BarsOptions, getConfig } from './bars';
-import { FIXED_UNIT } from '../GraphNG/GraphNG';
+import {
-import { ScaleDistribution } from '../uPlot/models.gen';
+  AxisPlacement,
-import { PrepConfigOpts } from '../GraphNG/utils';
+  BarValueVisibility,
-
+  FIXED_UNIT,
-type PrepConfig = (opts: PrepConfigOpts<BarChartOptions>) => UPlotConfigBuilder;
+  ScaleDirection,
+  ScaleDistribution,
+  ScaleOrientation,
+  UPlotConfigBuilder,
+} from '@grafana/ui';
+import { UPlotConfigPrepFn } from '@grafana/ui/src/components/uPlot/config/UPlotConfigBuilder';
 
 /** @alpha */
 function getBarCharScaleOrientation(orientation: VizOrientation) {
@@ -37,7 +40,7 @@ function getBarCharScaleOrientation(orientation: VizOrientation) {
   };
 }
 
-export const preparePlotConfigBuilder: PrepConfig = ({
+export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
   frame,
   theme,
   orientation,

public/app/plugins/panel/timeline/TimelineChart.tsx

@@ -1,8 +1,15 @@
 import React from 'react';
-import { PanelContext, PanelContextRoot, UPlotConfigBuilder, GraphNG, GraphNGProps } from '@grafana/ui';
+import {
+  PanelContext,
+  PanelContextRoot,
+  UPlotConfigBuilder,
+  GraphNG,
+  GraphNGProps,
+  BarValueVisibility,
+} from '@grafana/ui';
 import { DataFrame, FieldType, TimeRange } from '@grafana/data';
 import { preparePlotConfigBuilder } from './utils';
-import { BarValueVisibility, TimelineMode } from './types';
+import { TimelineMode } from './types';
 
 /**
  * @alpha

public/app/plugins/panel/timeline/module.tsx

@@ -1,9 +1,7 @@
 import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
 import { TimelinePanel } from './TimelinePanel';
-import { BarValueVisibility } from '@grafana/ui';
-//import { addHideFrom, addLegendOptions } from '../timeseries/config';
-//import { defaultBarChartFieldConfig } from '@grafana/ui/src/components/BarChart/types';
 import { TimelineOptions, TimelineFieldConfig, TimelineMode } from './types';
+import { BarValueVisibility } from '@grafana/ui';
 
 export const plugin = new PanelPlugin<TimelineOptions, TimelineFieldConfig>(TimelinePanel)
   .useFieldConfig({

public/app/plugins/panel/timeline/timeline.ts

@@ -1,10 +1,10 @@
 import uPlot, { Series, Cursor } from 'uplot';
 import { FIXED_UNIT } from '@grafana/ui/src/components/GraphNG/GraphNG';
-import { Quadtree, Rect, pointWithin } from '@grafana/ui/src/components/BarChart/quadtree';
+import { Quadtree, Rect, pointWithin } from 'app/plugins/panel/barchart/quadtree';
-import { distribute, SPACE_BETWEEN } from '@grafana/ui/src/components/BarChart/distribute';
+import { distribute, SPACE_BETWEEN } from 'app/plugins/panel/barchart/distribute';
 import { TimelineMode } from './types';
 import { TimeRange } from '@grafana/data';
-import { BarValueVisibility } from '@grafana/ui/src/components/BarChart/types';
+import { BarValueVisibility } from '@grafana/ui';
 
 const { round, min, ceil } = Math;
 

public/app/plugins/panel/timeline/types.ts

@@ -1,13 +1,4 @@
-import { VizLegendOptions, GraphGradientMode, HideableFieldConfig } from '@grafana/ui';
+import { VizLegendOptions, GraphGradientMode, HideableFieldConfig, BarValueVisibility } from '@grafana/ui';
-
-/**
- * @alpha
- */
-export enum BarValueVisibility {
-  Auto = 'auto',
-  Never = 'never',
-  Always = 'always',
-}
 
 /**
  * @alpha

public/app/plugins/panel/timeline/utils.ts

@@ -9,7 +9,13 @@ import {
   classicColors,
   Field,
 } from '@grafana/data';
-import { UPlotConfigBuilder, FIXED_UNIT, SeriesVisibilityChangeMode } from '@grafana/ui';
+import {
+  UPlotConfigBuilder,
+  FIXED_UNIT,
+  SeriesVisibilityChangeMode,
+  BarValueVisibility,
+  UPlotConfigPrepFn,
+} from '@grafana/ui';
 import { TimelineCoreOptions, getConfig } from './timeline';
 import {
   AxisPlacement,
@@ -18,9 +24,8 @@ import {
   ScaleOrientation,
 } from '@grafana/ui/src/components/uPlot/config';
 import { measureText } from '@grafana/ui/src/utils/measureText';
-import { PrepConfigOpts } from '@grafana/ui/src/components/GraphNG/utils';
 
-import { BarValueVisibility, TimelineFieldConfig, TimelineMode } from './types';
+import { TimelineFieldConfig, TimelineMode } from './types';
 
 const defaultConfig: TimelineFieldConfig = {
   lineWidth: 0,
@@ -44,16 +49,12 @@ export function preparePlotFrame(data: DataFrame[], dimFields: XYFieldMatchers)
   });
 }
 
-type PrepConfig = (
+export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
-  opts: PrepConfigOpts<{
+  mode: TimelineMode;
-    mode: TimelineMode;
+  rowHeight: number;
-    rowHeight: number;
+  colWidth?: number;
-    colWidth?: number;
+  showValue: BarValueVisibility;
-    showValue: BarValueVisibility;
+}> = ({
-  }>
-) => UPlotConfigBuilder;
-
-export const preparePlotConfigBuilder: PrepConfig = ({
   frame,
   theme,
   timeZone,