diff --git a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx index a168ada1457..e33de639ef2 100755 --- a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx +++ b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx @@ -6,6 +6,7 @@ import { DataFrame, DataHoverClearEvent, DataHoverEvent, + Field, FieldMatcherID, fieldMatchers, LegacyGraphHoverEvent, @@ -44,8 +45,8 @@ export interface GraphNGProps extends Themeable2 { legend: VizLegendOptions; fields?: XYFieldMatchers; // default will assume timeseries data renderers?: Renderers; - tweakScale?: (opts: ScaleProps) => ScaleProps; - tweakAxis?: (opts: AxisProps) => AxisProps; + tweakScale?: (opts: ScaleProps, forField: Field) => ScaleProps; + tweakAxis?: (opts: AxisProps, forField: Field) => AxisProps; onLegendClick?: (event: GraphNGLegendEvent) => void; children?: (builder: UPlotConfigBuilder, alignedFrame: DataFrame) => React.ReactNode; prepConfig: (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => UPlotConfigBuilder; diff --git a/packages/grafana-ui/src/components/TimeSeries/utils.ts b/packages/grafana-ui/src/components/TimeSeries/utils.ts index aa7fba626af..ce069dfa4e1 100644 --- a/packages/grafana-ui/src/components/TimeSeries/utils.ts +++ b/packages/grafana-ui/src/components/TimeSeries/utils.ts @@ -146,17 +146,20 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor // The builder will manage unique scaleKeys and combine where appropriate builder.addScale( - tweakScale({ - scaleKey, - orientation: ScaleOrientation.Vertical, - direction: ScaleDirection.Up, - distribution: customConfig.scaleDistribution?.type, - log: customConfig.scaleDistribution?.log, - min: field.config.min, - max: field.config.max, - softMin: customConfig.axisSoftMin, - softMax: customConfig.axisSoftMax, - }) + tweakScale( + { + scaleKey, + orientation: ScaleOrientation.Vertical, + direction: ScaleDirection.Up, + distribution: customConfig.scaleDistribution?.type, + log: customConfig.scaleDistribution?.log, + min: field.config.min, + max: field.config.max, + softMin: customConfig.axisSoftMin, + softMax: customConfig.axisSoftMax, + }, + field + ) ); if (!yScaleKey) { @@ -165,15 +168,18 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor if (customConfig.axisPlacement !== AxisPlacement.Hidden) { builder.addAxis( - tweakAxis({ - scaleKey, - label: customConfig.axisLabel, - size: customConfig.axisWidth, - placement: customConfig.axisPlacement ?? AxisPlacement.Auto, - formatValue: (v) => formattedValueToString(fmt(v)), - theme, - grid: { show: customConfig.axisGridShow }, - }) + tweakAxis( + { + scaleKey, + label: customConfig.axisLabel, + size: customConfig.axisWidth, + placement: customConfig.axisPlacement ?? AxisPlacement.Auto, + formatValue: (v) => formattedValueToString(fmt(v)), + theme, + grid: { show: customConfig.axisGridShow }, + }, + field + ) ); } diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts index 00d11bebeff..f4b1d1432c6 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts @@ -4,6 +4,7 @@ import { DataFrame, DefaultTimeZone, EventBus, + Field, getTimeZoneInfo, GrafanaTheme2, TimeRange, @@ -287,8 +288,8 @@ type UPlotConfigPrepOpts = {}> = { eventBus: EventBus; allFrames: DataFrame[]; renderers?: Renderers; - tweakScale?: (opts: ScaleProps) => ScaleProps; - tweakAxis?: (opts: AxisProps) => AxisProps; + tweakScale?: (opts: ScaleProps, forField: Field) => ScaleProps; + tweakAxis?: (opts: AxisProps, forField: Field) => AxisProps; } & T; /** @alpha */ diff --git a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx index f3164f238c2..35ec51ba98c 100644 --- a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx +++ b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx @@ -43,8 +43,8 @@ export const MarketTrendPanel: React.FC = ({ const info = useMemo(() => prepareCandlestickFields(data?.series, options, theme), [data, options, theme]); const { renderers, tweakScale, tweakAxis } = useMemo(() => { - let tweakScale = (opts: ScaleProps) => opts; - let tweakAxis = (opts: AxisProps) => opts; + let tweakScale = (opts: ScaleProps, forField: Field) => opts; + let tweakAxis = (opts: AxisProps, forField: Field) => opts; let doNothing = { renderers: [], @@ -97,8 +97,9 @@ export const MarketTrendPanel: React.FC = ({ theme: config.theme2, }); - tweakAxis = (opts: AxisProps) => { - if (opts.scaleKey === 'short') { + tweakAxis = (opts: AxisProps, forField: Field) => { + // we can't do forField === info.volume because of copies :( + if (forField.name === info.volume?.name) { let filter = (u: uPlot, splits: number[]) => { let _splits = []; let max = u.series[volumeIdx].max as number; @@ -122,8 +123,9 @@ export const MarketTrendPanel: React.FC = ({ return opts; }; - tweakScale = (opts: ScaleProps) => { - if (opts.scaleKey === 'short') { + tweakScale = (opts: ScaleProps, forField: Field) => { + // we can't do forField === info.volume because of copies :( + if (forField.name === info.volume?.name) { opts.range = (u: uPlot, min: number, max: number) => [0, max * 7]; }