BarChart: Fix field enumeration for bar value display and legend items (#39308)

devenv/dev-dashboards/panel-barchart/barchart-autosizing.json

@@ -76,6 +76,7 @@
         },
         "orientation": "auto",
         "showValue": "auto",
+        "stacking": "none",
         "text": {},
         "tooltip": {
           "mode": "single"
@@ -83,7 +84,7 @@
       },
       "targets": [
         {
-          "csvContent": "Name,Stat1,Stat2\nStockholm, 10, 15\nNew York, 19, 5\nLondon, 10, 1\nNegative, 15, -5\nLong value, 15,10",
+          "csvContent": "Time,Name,Stat1,Stat2\n2020-01-01T00:00:00Z,Stockholm, 10, 15\n2020-01-01T00:00:00Z,New York, 19, 5\n2020-01-01T00:00:00Z,London, 10, 1\n2020-01-01T00:00:00Z,Negative, 15, -5\n2020-01-01T00:00:00Z,Long value, 15,10",
           "refId": "A",
           "scenarioId": "csv_content"
         }
@@ -147,6 +148,7 @@
         },
         "orientation": "auto",
         "showValue": "auto",
+        "stacking": "none",
         "text": {},
         "tooltip": {
           "mode": "single"
@@ -216,6 +218,7 @@
         },
         "orientation": "auto",
         "showValue": "auto",
+        "stacking": "none",
         "text": {},
         "tooltip": {
           "mode": "single"
@@ -285,6 +288,7 @@
         },
         "orientation": "auto",
         "showValue": "always",
+        "stacking": "none",
         "text": {},
         "tooltip": {
           "mode": "single"
@@ -353,6 +357,7 @@
         },
         "orientation": "auto",
         "showValue": "auto",
+        "stacking": "none",
         "text": {
           "titleSize": 10,
           "valueSize": 25
@@ -425,6 +430,7 @@
         },
         "orientation": "horizontal",
         "showValue": "auto",
+        "stacking": "none",
         "text": {},
         "tooltip": {
           "mode": "single"
@@ -495,6 +501,7 @@
         },
         "orientation": "horizontal",
         "showValue": "auto",
+        "stacking": "none",
         "text": {},
         "tooltip": {
           "mode": "single"

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

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { cloneDeep } from 'lodash';
-import { DataFrame, TimeRange } from '@grafana/data';
+import { DataFrame, FieldType, TimeRange } from '@grafana/data';
 import { GraphNG, GraphNGProps, PlotLegend, UPlotConfigBuilder, usePanelContext, useTheme2 } from '@grafana/ui';
 import { LegendDisplayMode } from '@grafana/schema';
 import { BarChartOptions } from './types';
@@ -38,7 +38,12 @@ 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 rawValue = (seriesIdx: number, valueIdx: number) => {
+    let field = frame0Ref.current!.fields.find(
+      (f) => f.type === FieldType.number && f.state?.seriesIndex === seriesIdx - 1
+    );
+    return field!.values.get(valueIdx);
+  };
 
   const prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {
     const { timeZone, orientation, barWidth, showValue, groupWidth, stacking, legend, tooltip, text } = props;

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

@@ -46,6 +46,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
   stacking,
   text,
   rawValue,
+  allFrames,
 }) => {
   const builder = new UPlotConfigBuilder();
   const defaultValueFormatter = (seriesIdx: number, value: any) =>
@@ -141,8 +142,11 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
       softMax: customConfig.axisSoftMax,
 
       // The following properties are not used in the uPlot config, but are utilized as transport for legend config
+      // PlotLegend currently gets unfiltered DataFrame[], so index must be into that field array, not the prepped frame's which we're iterating here
       dataFrameFieldIndex: {
-        fieldIndex: i,
+        fieldIndex: allFrames[0].fields.findIndex(
+          (f) => f.type === FieldType.number && f.state?.seriesIndex === seriesIndex - 1
+        ),
         frameIndex: 0,
       },
     });