From 10aba4d7ed9c5fb98fd907eaa6107a57f805bafd Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 9 Aug 2022 08:53:18 -0400
Subject: [PATCH] Histogram: Send proper dataframe to PlotLegend (#53284)
 (#53462)

* Send proper dataframe to PlotLegend

* Update dataFrameFieldIndex for multiple frames

(cherry picked from commit 3893c46976b0f289026b4ebd78e552049f1f5a73)

Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com>
---
 public/app/plugins/panel/histogram/Histogram.tsx      | 9 +++++----
 public/app/plugins/panel/histogram/HistogramPanel.tsx | 1 +
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/panel/histogram/Histogram.tsx b/public/app/plugins/panel/histogram/Histogram.tsx
index f766351680f..16063c8f402 100644
--- a/public/app/plugins/panel/histogram/Histogram.tsx
+++ b/public/app/plugins/panel/histogram/Histogram.tsx
@@ -41,6 +41,7 @@ export interface HistogramProps extends Themeable2 {
   height: number;
   structureRev?: number; // a number that will change when the frames[] structure changes
   legend: VizLegendOptions;
+  rawSeries?: DataFrame[];
   children?: (builder: UPlotConfigBuilder, frame: DataFrame) => React.ReactNode;
 }
 
@@ -209,8 +210,8 @@ const prepConfig = (frame: DataFrame, theme: GrafanaTheme2) => {
 
       // The following properties are not used in the uPlot config, but are utilized as transport for legend config
       dataFrameFieldIndex: {
-        fieldIndex: i,
-        frameIndex: 0,
+        fieldIndex: 1,
+        frameIndex: i - 2,
       },
     });
   }
@@ -271,11 +272,11 @@ export class Histogram extends React.Component<HistogramProps, State> {
 
   renderLegend(config: UPlotConfigBuilder) {
     const { legend } = this.props;
-    if (!config || legend.showLegend === false) {
+    if (!config || legend.showLegend === false || !this.props.rawSeries) {
       return null;
     }
 
-    return <PlotLegend data={[this.props.alignedFrame]} config={config} maxHeight="35%" maxWidth="60%" {...legend} />;
+    return <PlotLegend data={this.props.rawSeries} config={config} maxHeight="35%" maxWidth="60%" {...legend} />;
   }
 
   componentDidUpdate(prevProps: HistogramProps) {
diff --git a/public/app/plugins/panel/histogram/HistogramPanel.tsx b/public/app/plugins/panel/histogram/HistogramPanel.tsx
index dc459235915..4f19272b53c 100644
--- a/public/app/plugins/panel/histogram/HistogramPanel.tsx
+++ b/public/app/plugins/panel/histogram/HistogramPanel.tsx
@@ -45,6 +45,7 @@ export const HistogramPanel: React.FC<Props> = ({ data, options, width, height }
       options={options}
       theme={theme}
       legend={options.legend}
+      rawSeries={data.series}
       structureRev={data.structureRev}
       width={width}
       height={height}