From fe9b529c25a52d95ea58f133fbfdba07c573d6e1 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 9 May 2023 17:45:16 +0100
Subject: [PATCH] [v10.0.x] Graph: Fix legend overlapping graph area (#68107)

Graph: Fix legend overlapping graph area (#67912)

use render callback instead of requestIdleTimeout

(cherry picked from commit 8e752439c69103f47bd8f5ae8fe5b2e52dac1ea3)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 public/app/plugins/panel/graph/Legend/Legend.tsx | 4 +++-
 public/app/plugins/panel/graph/graph.ts          | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/graph/Legend/Legend.tsx b/public/app/plugins/panel/graph/Legend/Legend.tsx
index 670b892725e..984d2af5b8b 100644
--- a/public/app/plugins/panel/graph/Legend/Legend.tsx
+++ b/public/app/plugins/panel/graph/Legend/Legend.tsx
@@ -32,6 +32,7 @@ interface LegendDisplayProps {
   alignAsTable?: boolean;
   rightSide?: boolean;
   sideWidth?: number;
+  renderCallback?: () => void;
 }
 
 interface LegendValuesProps {
@@ -176,6 +177,7 @@ export class GraphLegend extends PureComponent<GraphLegendProps, LegendState> {
       avg,
       current,
       total,
+      renderCallback,
     } = this.props;
     const seriesValuesProps = { values, min, max, avg, current, total };
     const hiddenSeries = this.state.hiddenSeries;
@@ -205,7 +207,7 @@ export class GraphLegend extends PureComponent<GraphLegendProps, LegendState> {
     };
 
     return (
-      <div className={`graph-legend-content ${legendClass}`} style={legendStyle}>
+      <div className={`graph-legend-content ${legendClass}`} ref={renderCallback} style={legendStyle}>
         {this.props.alignAsTable ? <LegendTable {...legendProps} /> : <LegendSeriesList {...legendProps} />}
       </div>
     );
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index 57f4f2a8760..819fa92e37d 100644
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -155,13 +155,13 @@ class GraphElement {
       onToggleSort: this.ctrl.onToggleSort,
       onColorChange: this.ctrl.onColorChange,
       onToggleAxis: this.ctrl.onToggleAxis,
+      renderCallback: this.renderPanel.bind(this),
     };
 
     const legendReactElem = React.createElement(LegendWithThemeProvider, legendProps);
 
     // render callback isn't supported in react 18+, see: https://github.com/reactwg/react-18/discussions/5
     this.legendElemRoot.render(legendReactElem);
-    requestIdleCallback(() => this.renderPanel());
   }
 
   onGraphHover(evt: LegacyGraphHoverEventPayload | DataHoverPayload) {