Candlestick: fix volume histogram height by using mapped field name (#41931)

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;

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
+        )
       );
     }
 

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<T extends Record<string, any> = {}> = {
   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 */

public/app/plugins/panel/candlestick/CandlestickPanel.tsx

@@ -43,8 +43,8 @@ export const MarketTrendPanel: React.FC<CandlestickPanelProps> = ({
   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<CandlestickPanelProps> = ({
             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<CandlestickPanelProps> = ({
             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];
             }