From 17305ccda3eff1667e81c0fe3494f8002b5be029 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Tue, 11 May 2021 20:57:52 +0200 Subject: [PATCH] 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 --- .../src/components/GraphNG/types.ts | 2 +- .../src/components/GraphNG/utils.ts | 19 +------------ .../src/components/TimeSeries/utils.ts | 14 ++++++---- packages/grafana-ui/src/components/index.ts | 7 ++--- .../grafana-ui/src/components/uPlot/config.ts | 9 +++++++ .../uPlot/config/UPlotConfigBuilder.ts | 26 +++++++++++++++--- .../app/plugins/panel/barchart}/BarChart.tsx | 6 +---- .../plugins/panel/barchart/BarChartPanel.tsx | 4 ++- .../__snapshots__/utils.test.ts.snap | 0 .../app/plugins/panel/barchart}/bars.ts | 4 +-- .../app/plugins/panel/barchart}/distribute.ts | 0 public/app/plugins/panel/barchart/module.tsx | 11 ++------ .../app/plugins/panel/barchart}/quadtree.ts | 0 .../app/plugins/panel/barchart}/types.ts | 20 +++++++------- .../app/plugins/panel/barchart}/utils.test.ts | 12 ++++++--- .../app/plugins/panel/barchart}/utils.ts | 21 ++++++++------- .../plugins/panel/timeline/TimelineChart.tsx | 11 ++++++-- public/app/plugins/panel/timeline/module.tsx | 4 +-- public/app/plugins/panel/timeline/timeline.ts | 6 ++--- public/app/plugins/panel/timeline/types.ts | 11 +------- public/app/plugins/panel/timeline/utils.ts | 27 ++++++++++--------- 21 files changed, 110 insertions(+), 104 deletions(-) rename {packages/grafana-ui/src/components/BarChart => public/app/plugins/panel/barchart}/BarChart.tsx (85%) rename {packages/grafana-ui/src/components/BarChart => public/app/plugins/panel/barchart}/__snapshots__/utils.test.ts.snap (100%) rename {packages/grafana-ui/src/components/BarChart => public/app/plugins/panel/barchart}/bars.ts (97%) rename {packages/grafana-ui/src/components/BarChart => public/app/plugins/panel/barchart}/distribute.ts (100%) rename {packages/grafana-ui/src/components/BarChart => public/app/plugins/panel/barchart}/quadtree.ts (100%) rename {packages/grafana-ui/src/components/BarChart => public/app/plugins/panel/barchart}/types.ts (69%) rename {packages/grafana-ui/src/components/BarChart => public/app/plugins/panel/barchart}/utils.test.ts (92%) rename {packages/grafana-ui/src/components/BarChart => public/app/plugins/panel/barchart}/utils.ts (89%) diff --git a/packages/grafana-ui/src/components/GraphNG/types.ts b/packages/grafana-ui/src/components/GraphNG/types.ts index a65aa037647..33553ec5d5c 100644 --- a/packages/grafana-ui/src/components/GraphNG/types.ts +++ b/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. diff --git a/packages/grafana-ui/src/components/GraphNG/utils.ts b/packages/grafana-ui/src/components/GraphNG/utils.ts index 5941ccfccba..c67e3d88b28 100644 --- a/packages/grafana-ui/src/components/GraphNG/utils.ts +++ b/packages/grafana-ui/src/components/GraphNG/utils.ts @@ -1,24 +1,7 @@ import { XYFieldMatchers } from './types'; -import { - ArrayVector, - DataFrame, - EventBus, - FieldType, - GrafanaTheme2, - outerJoinDataFrames, - TimeRange, - TimeZone, -} from '@grafana/data'; +import { ArrayVector, DataFrame, FieldType, outerJoinDataFrames } from '@grafana/data'; import { nullToUndefThreshold } from './nullToUndefThreshold'; -export type PrepConfigOpts = {}> = { - 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 diff --git a/packages/grafana-ui/src/components/TimeSeries/utils.ts b/packages/grafana-ui/src/components/TimeSeries/utils.ts index f8d5ddcfbcb..cb410cf8d68 100644 --- a/packages/grafana-ui/src/components/TimeSeries/utils.ts +++ b/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: PrepConfig = ({ frame, theme, timeZone, getTimeRange, eventBus, sync }) => { +export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursorSync }> = ({ + frame, + theme, + timeZone, + getTimeRange, + eventBus, + sync, +}) => { const builder = new UPlotConfigBuilder(timeZone); // X is the first field in the aligned frame diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index a9f05b23cd6..e8ace482167 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/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'; diff --git a/packages/grafana-ui/src/components/uPlot/config.ts b/packages/grafana-ui/src/components/uPlot/config.ts index f4c61d09740..045d6e79cbf 100644 --- a/packages/grafana-ui/src/components/uPlot/config.ts +++ b/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 */ diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts index 14897f0173c..b864a2b30b1 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts +++ b/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 { defaultsDeep } from 'lodash'; -import { DefaultTimeZone, getTimeZoneInfo, TimeZone } from '@grafana/data'; +import { + DataFrame, + 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 = {}> = { + frame: DataFrame; + theme: GrafanaTheme2; + timeZone: TimeZone; + getTimeRange: () => TimeRange; + eventBus: EventBus; +} & T; + +/** @alpha */ +export type UPlotConfigPrepFn = (opts: UPlotConfigPrepOpts) => UPlotConfigBuilder; diff --git a/packages/grafana-ui/src/components/BarChart/BarChart.tsx b/public/app/plugins/panel/barchart/BarChart.tsx similarity index 85% rename from packages/grafana-ui/src/components/BarChart/BarChart.tsx rename to public/app/plugins/panel/barchart/BarChart.tsx index ac216ef273b..cd65b1cab34 100644 --- a/packages/grafana-ui/src/components/BarChart/BarChart.tsx +++ b/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 diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx index 2b9c181c016..e6e0c3a24db 100755 --- a/public/app/plugins/panel/barchart/BarChartPanel.tsx +++ b/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 {} diff --git a/packages/grafana-ui/src/components/BarChart/__snapshots__/utils.test.ts.snap b/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap similarity index 100% rename from packages/grafana-ui/src/components/BarChart/__snapshots__/utils.test.ts.snap rename to public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap diff --git a/packages/grafana-ui/src/components/BarChart/bars.ts b/public/app/plugins/panel/barchart/bars.ts similarity index 97% rename from packages/grafana-ui/src/components/BarChart/bars.ts rename to public/app/plugins/panel/barchart/bars.ts index cbb790ece82..97576697964 100644 --- a/packages/grafana-ui/src/components/BarChart/bars.ts +++ b/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 { ScaleDirection, ScaleOrientation } from '../uPlot/config'; +import { TooltipInterpolator } from '@grafana/ui/src/components/uPlot/types'; +import { ScaleDirection, ScaleOrientation } from '@grafana/ui/src/components/uPlot/config'; const groupDistr = SPACE_BETWEEN; const barDistr = SPACE_BETWEEN; diff --git a/packages/grafana-ui/src/components/BarChart/distribute.ts b/public/app/plugins/panel/barchart/distribute.ts similarity index 100% rename from packages/grafana-ui/src/components/BarChart/distribute.ts rename to public/app/plugins/panel/barchart/distribute.ts diff --git a/public/app/plugins/panel/barchart/module.tsx b/public/app/plugins/panel/barchart/module.tsx index deccba21f30..445f0b2e70a 100755 --- a/public/app/plugins/panel/barchart/module.tsx +++ b/public/app/plugins/panel/barchart/module.tsx @@ -7,16 +7,9 @@ import { VizOrientation, } from '@grafana/data'; import { BarChartPanel } from './BarChartPanel'; -import { - BarChartFieldConfig, - BarChartOptions, - StackingMode, - BarValueVisibility, - graphFieldOptions, - commonOptionsBuilder, -} from '@grafana/ui'; +import { 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(BarChartPanel) .useFieldConfig({ diff --git a/packages/grafana-ui/src/components/BarChart/quadtree.ts b/public/app/plugins/panel/barchart/quadtree.ts similarity index 100% rename from packages/grafana-ui/src/components/BarChart/quadtree.ts rename to public/app/plugins/panel/barchart/quadtree.ts diff --git a/packages/grafana-ui/src/components/BarChart/types.ts b/public/app/plugins/panel/barchart/types.ts similarity index 69% rename from packages/grafana-ui/src/components/BarChart/types.ts rename to public/app/plugins/panel/barchart/types.ts index 60535e6bea0..7fbe4f5be8e 100644 --- a/packages/grafana-ui/src/components/BarChart/types.ts +++ b/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 { OptionsWithLegend, OptionsWithTooltip } from '../../options'; - -/** - * @alpha - */ -export enum BarValueVisibility { - Auto = 'auto', - Never = 'never', - Always = 'always', -} +import { + AxisConfig, + BarValueVisibility, + GraphGradientMode, + HideableFieldConfig, + OptionsWithLegend, + OptionsWithTooltip, + StackingMode, +} from '@grafana/ui'; /** * @alpha diff --git a/packages/grafana-ui/src/components/BarChart/utils.test.ts b/public/app/plugins/panel/barchart/utils.test.ts similarity index 92% rename from packages/grafana-ui/src/components/BarChart/utils.test.ts rename to public/app/plugins/panel/barchart/utils.test.ts index b1991cb6911..c1ed21c7781 100644 --- a/packages/grafana-ui/src/components/BarChart/utils.test.ts +++ b/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 { GraphGradientMode, StackingMode } from '../uPlot/config'; -import { LegendDisplayMode } from '../VizLegend/models.gen'; -import { TooltipDisplayMode } from '../VizTooltip'; +import { BarChartFieldConfig, BarChartOptions } from './types'; +import { + BarValueVisibility, + GraphGradientMode, + LegendDisplayMode, + StackingMode, + TooltipDisplayMode, +} from '@grafana/ui'; function mockDataFrame() { const df1 = new MutableDataFrame({ diff --git a/packages/grafana-ui/src/components/BarChart/utils.ts b/public/app/plugins/panel/barchart/utils.ts similarity index 89% rename from packages/grafana-ui/src/components/BarChart/utils.ts rename to public/app/plugins/panel/barchart/utils.ts index 1ea3eabea29..60c1ff6f907 100644 --- a/packages/grafana-ui/src/components/BarChart/utils.ts +++ b/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 { AxisPlacement, ScaleDirection, ScaleOrientation } from '../uPlot/config'; +import { BarChartFieldConfig, BarChartOptions, defaultBarChartFieldConfig } from './types'; import { BarsOptions, getConfig } from './bars'; -import { FIXED_UNIT } from '../GraphNG/GraphNG'; -import { ScaleDistribution } from '../uPlot/models.gen'; -import { PrepConfigOpts } from '../GraphNG/utils'; - -type PrepConfig = (opts: PrepConfigOpts) => UPlotConfigBuilder; +import { + AxisPlacement, + BarValueVisibility, + FIXED_UNIT, + 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 = ({ frame, theme, orientation, diff --git a/public/app/plugins/panel/timeline/TimelineChart.tsx b/public/app/plugins/panel/timeline/TimelineChart.tsx index 772f5bd74c1..6d8cca1fa9e 100755 --- a/public/app/plugins/panel/timeline/TimelineChart.tsx +++ b/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 diff --git a/public/app/plugins/panel/timeline/module.tsx b/public/app/plugins/panel/timeline/module.tsx index 00a88ca1319..39577c7c402 100755 --- a/public/app/plugins/panel/timeline/module.tsx +++ b/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(TimelinePanel) .useFieldConfig({ diff --git a/public/app/plugins/panel/timeline/timeline.ts b/public/app/plugins/panel/timeline/timeline.ts index 4343b712990..f9f30cda62f 100644 --- a/public/app/plugins/panel/timeline/timeline.ts +++ b/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 { distribute, SPACE_BETWEEN } from '@grafana/ui/src/components/BarChart/distribute'; +import { Quadtree, Rect, pointWithin } from 'app/plugins/panel/barchart/quadtree'; +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; diff --git a/public/app/plugins/panel/timeline/types.ts b/public/app/plugins/panel/timeline/types.ts index a5fd35a398f..aa557973e31 100644 --- a/public/app/plugins/panel/timeline/types.ts +++ b/public/app/plugins/panel/timeline/types.ts @@ -1,13 +1,4 @@ -import { VizLegendOptions, GraphGradientMode, HideableFieldConfig } from '@grafana/ui'; - -/** - * @alpha - */ -export enum BarValueVisibility { - Auto = 'auto', - Never = 'never', - Always = 'always', -} +import { VizLegendOptions, GraphGradientMode, HideableFieldConfig, BarValueVisibility } from '@grafana/ui'; /** * @alpha diff --git a/public/app/plugins/panel/timeline/utils.ts b/public/app/plugins/panel/timeline/utils.ts index 59a25f1c0b7..9bedd8e0690 100644 --- a/public/app/plugins/panel/timeline/utils.ts +++ b/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 = ( - opts: PrepConfigOpts<{ - mode: TimelineMode; - rowHeight: number; - colWidth?: number; - showValue: BarValueVisibility; - }> -) => UPlotConfigBuilder; - -export const preparePlotConfigBuilder: PrepConfig = ({ +export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ + mode: TimelineMode; + rowHeight: number; + colWidth?: number; + showValue: BarValueVisibility; +}> = ({ frame, theme, timeZone,