BarChart: fix stale bar values and x axis labels (#39188)

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { cloneDeep } from 'lodash';
 import { DataFrame, TimeRange } from '@grafana/data';
 import { GraphNG, GraphNGProps, PlotLegend, UPlotConfigBuilder, usePanelContext, useTheme2 } from '@grafana/ui';
@@ -27,6 +27,9 @@ export const BarChart: React.FC<BarChartProps> = (props) => {
   const theme = useTheme2();
   const { eventBus } = usePanelContext();
 
+  const frame0Ref = useRef<DataFrame>();
+  frame0Ref.current = props.frames[0];
+
   const renderLegend = (config: UPlotConfigBuilder) => {
     if (!config || props.legend.displayMode === LegendDisplayMode.Hidden) {
       return null;
@@ -35,6 +38,8 @@ export const BarChart: React.FC<BarChartProps> = (props) => {
     return <PlotLegend data={props.frames} config={config} maxHeight="35%" maxWidth="60%" {...props.legend} />;
   };
 
+  const rawValue = (seriesIdx: number, valueIdx: number) => frame0Ref.current!.fields[seriesIdx].values.get(valueIdx);
+
   const prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {
     const { timeZone, orientation, barWidth, showValue, groupWidth, stacking, legend, tooltip, text } = props;
 
@@ -52,6 +57,7 @@ export const BarChart: React.FC<BarChartProps> = (props) => {
       legend,
       tooltip,
       text,
+      rawValue,
       allFrames: props.frames,
     });
   };

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

@@ -19,6 +19,7 @@ export interface BarChartOptions extends OptionsWithLegend, OptionsWithTooltip,
   showValue: BarValueVisibility;
   barWidth: number;
   groupWidth: number;
+  rawValue: (seriesIdx: number, valueIdx: number) => number;
 }
 
 /**

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

@@ -94,6 +94,7 @@ describe('BarChart utils', () => {
       text: {
         valueSize: 10,
       },
+      rawValue: (seriesIdx: number, valueIdx: number) => frame.fields[seriesIdx].values.get(valueIdx),
     };
 
     it.each([VizOrientation.Auto, VizOrientation.Horizontal, VizOrientation.Vertical])('orientation', (v) => {

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

@@ -45,6 +45,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
   barWidth,
   stacking,
   text,
+  rawValue,
 }) => {
   const builder = new UPlotConfigBuilder();
   const defaultValueFormatter = (seriesIdx: number, value: any) =>
@@ -67,7 +68,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
     groupWidth,
     barWidth,
     stacking,
-    rawValue: (seriesIdx: number, valueIdx: number) => frame.fields[seriesIdx].values.get(valueIdx),
+    rawValue,
     formatValue,
     text,
     showValue,