From 3609dbd0a2112438e5ebea31ec864c0e02f33850 Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Fri, 5 Jan 2024 09:58:47 -0700
Subject: [PATCH] Barchart: Fix percent stacking regression (#79903)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
---
 .../plugins/panel/barchart/BarChartPanel.tsx    |  2 +-
 public/app/plugins/panel/barchart/types.ts      |  6 ++++++
 public/app/plugins/panel/barchart/utils.test.ts | 17 +++++++++++++++--
 public/app/plugins/panel/barchart/utils.ts      | 15 +++++++++++----
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx
index 30e25731c1f..27d7a366e17 100644
--- a/public/app/plugins/panel/barchart/BarChartPanel.tsx
+++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx
@@ -213,7 +213,7 @@ export const BarChartPanel = ({ data, options, fieldConfig, width, height, timeZ
       }
     }
 
-    return <PlotLegend data={info.viz} config={config} maxHeight="35%" maxWidth="60%" {...options.legend} />;
+    return <PlotLegend data={[info.legend]} config={config} maxHeight="35%" maxWidth="60%" {...options.legend} />;
   };
 
   const rawValue = (seriesIdx: number, valueIdx: number) => {
diff --git a/public/app/plugins/panel/barchart/types.ts b/public/app/plugins/panel/barchart/types.ts
index f694f369a19..347ae56edc0 100644
--- a/public/app/plugins/panel/barchart/types.ts
+++ b/public/app/plugins/panel/barchart/types.ts
@@ -10,6 +10,12 @@ export interface BarChartDisplayValues {
    */
   viz: [DataFrame];
 
+  /**
+   * The fields we can display, first field is X axis.
+   * Contains same data as viz, but without config modifications (e.g: unit override)
+   */
+  legend: DataFrame;
+
   /** Potentialy color by a field value */
   colorByField?: Field;
 }
diff --git a/public/app/plugins/panel/barchart/utils.test.ts b/public/app/plugins/panel/barchart/utils.test.ts
index 210bb5a52a9..ae999840fb6 100644
--- a/public/app/plugins/panel/barchart/utils.test.ts
+++ b/public/app/plugins/panel/barchart/utils.test.ts
@@ -227,6 +227,19 @@ describe('BarChart utils', () => {
           null,
         ]
       `);
+
+      const displayLegendValuesAsc = assertIsDefined('legend' in result ? result : null).legend;
+      const legendField = displayLegendValuesAsc.fields[1];
+
+      expect(legendField.values).toMatchInlineSnapshot(`
+      [
+        -10,
+        null,
+        10,
+        null,
+        null,
+      ]
+    `);
     });
 
     it('should remove unit from legend values when stacking is percent', () => {
@@ -242,11 +255,11 @@ describe('BarChart utils', () => {
       const resultAsc = prepareBarChartDisplayValues([frame], createTheme(), {
         stacking: StackingMode.Percent,
       } as Options);
-      const displayLegendValuesAsc = assertIsDefined('viz' in resultAsc ? resultAsc : null).viz[0];
+      const displayLegendValuesAsc = assertIsDefined('legend' in resultAsc ? resultAsc : null).legend;
 
+      expect(displayLegendValuesAsc.fields[0].config.unit).toBeUndefined();
       expect(displayLegendValuesAsc.fields[1].config.unit).toBeUndefined();
       expect(displayLegendValuesAsc.fields[2].config.unit).toBeUndefined();
-      expect(displayLegendValuesAsc.fields[3].config.unit).toBeUndefined();
     });
   });
 });
diff --git a/public/app/plugins/panel/barchart/utils.ts b/public/app/plugins/panel/barchart/utils.ts
index dad84245c43..102ee0b6905 100644
--- a/public/app/plugins/panel/barchart/utils.ts
+++ b/public/app/plugins/panel/barchart/utils.ts
@@ -1,3 +1,4 @@
+import { cloneDeep } from 'lodash';
 import uPlot, { Padding } from 'uplot';
 
 import {
@@ -491,9 +492,10 @@ export function prepareBarChartDisplayValues(
     }
   }
 
-  // If stacking is percent, we need to correct the fields unit and display
+  // If stacking is percent, we need to correct the legend fields unit and display
+  let legendFields: Field[] = cloneDeep(fields);
   if (options.stacking === StackingMode.Percent) {
-    fields.map((field) => {
+    legendFields.map((field) => {
       const alignedFrameField = frame.fields.find(
         (f) => getFieldDisplayName(f, frame) === getFieldDisplayName(f, frame)
       );
@@ -503,18 +505,23 @@ export function prepareBarChartDisplayValues(
     });
   }
 
-  // String field is first
+  // String field is first, make sure fields / legend fields indexes match
   fields.unshift(firstField);
+  legendFields.unshift(firstField);
 
   return {
     aligned: frame,
     colorByField,
     viz: [
       {
-        length: firstField.values.length,
         fields: fields, // ideally: fields.filter((f) => !Boolean(f.config.custom?.hideFrom?.viz)),
+        length: firstField.values.length,
       },
     ],
+    legend: {
+      fields: legendFields,
+      length: firstField.values.length,
+    },
   };
 }