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

packages/grafana-ui/src/components/GraphNG/GraphNG.tsx

@@ -210,7 +210,7 @@ export class GraphNG extends React.Component<GraphNGProps, GraphNGState> {
 
   render() {
     const { width, height, children, timeRange, renderLegend } = this.props;
-    const { config, alignedFrame } = this.state;
+    const { config, alignedFrame, alignedData } = this.state;
 
     if (!config) {
       return null;
@@ -220,8 +220,8 @@ export class GraphNG extends React.Component<GraphNGProps, GraphNGState> {
       <VizLayout width={width} height={height} legend={renderLegend(config)}>
         {(vizWidth: number, vizHeight: number) => (
           <UPlotChart
-            config={this.state.config!}
+            config={config}
-            data={this.state.alignedData}
+            data={alignedData}
             width={vizWidth}
             height={vizHeight}
             timeRange={timeRange}

packages/grafana-ui/src/components/uPlot/Plot.tsx

@@ -101,6 +101,14 @@ export class UPlotChart extends React.Component<PlotProps, UPlotChartState> {
       this.reinitPlot();
     } else if (!sameData(prevProps, this.props)) {
       plot?.setData(this.props.data);
+
+      // this is a uPlot cache-busting hack for bar charts in case x axis labels changed
+      // since the x scale's "range" doesnt change, the axis size doesnt get recomputed, which is where the tick labels are regenerated & cached
+      // the more expensive, more proper/thorough way to do this is to force all axes to recalc: plot?.redraw(false, true);
+      if (plot && typeof this.props.data[0][0] === 'string') {
+        //@ts-ignore
+        plot.axes[0]._values = this.props.data[0];
+      }
     } else if (!sameTimeRange(prevProps, this.props)) {
       plot?.setScale('x', {
         min: this.props.timeRange.from.valueOf(),

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,