Merge pull request #14145 from grafana/fix-legend-show-false

fixed issue with new legend not checking if panel.legend.show

public/app/plugins/panel/graph/graph.ts

@@ -58,15 +58,7 @@ class GraphElement {
 
 
     // panel events
     // panel events
     this.ctrl.events.on('panel-teardown', this.onPanelTeardown.bind(this));
     this.ctrl.events.on('panel-teardown', this.onPanelTeardown.bind(this));
-
-    /**
-     * Split graph rendering into two parts.
-     * First, calculate series stats in buildFlotPairs() function. Then legend rendering started
-     * (see ctrl.events.on('render') in legend.ts).
-     * When legend is rendered it emits 'legend-rendering-complete' and graph rendered.
-     */
     this.ctrl.events.on('render', this.onRender.bind(this));
     this.ctrl.events.on('render', this.onRender.bind(this));
-    this.ctrl.events.on('legend-rendering-complete', this.onLegendRenderingComplete.bind(this));
 
 
     // global events
     // global events
     appEvents.on('graph-hover', this.onGraphHover.bind(this), scope);
     appEvents.on('graph-hover', this.onGraphHover.bind(this), scope);
@@ -85,11 +77,20 @@ class GraphElement {
     if (!this.data) {
     if (!this.data) {
       return;
       return;
     }
     }
+
     this.annotations = this.ctrl.annotations || [];
     this.annotations = this.ctrl.annotations || [];
     this.buildFlotPairs(this.data);
     this.buildFlotPairs(this.data);
     const graphHeight = this.elem.height();
     const graphHeight = this.elem.height();
     updateLegendValues(this.data, this.panel, graphHeight);
     updateLegendValues(this.data, this.panel, graphHeight);
 
 
+    if (!this.panel.legend.show) {
+      if (this.legendElem.hasChildNodes()) {
+        ReactDOM.unmountComponentAtNode(this.legendElem);
+      }
+      this.renderPanel();
+      return;
+    }
+
     const { values, min, max, avg, current, total } = this.panel.legend;
     const { values, min, max, avg, current, total } = this.panel.legend;
     const { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero } = this.panel.legend;
     const { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero } = this.panel.legend;
     const legendOptions = { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero };
     const legendOptions = { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero };
@@ -104,12 +105,9 @@ class GraphElement {
       onColorChange: this.ctrl.onColorChange,
       onColorChange: this.ctrl.onColorChange,
       onToggleAxis: this.ctrl.onToggleAxis,
       onToggleAxis: this.ctrl.onToggleAxis,
     };
     };
-    const legendReactElem = React.createElement(Legend, legendProps);
-    ReactDOM.render(legendReactElem, this.legendElem, () => this.onLegendRenderingComplete());
-  }
 
 
-  onLegendRenderingComplete() {
-    this.render_panel();
+    const legendReactElem = React.createElement(Legend, legendProps);
+    ReactDOM.render(legendReactElem, this.legendElem, () => this.renderPanel());
   }
   }
 
 
   onGraphHover(evt) {
   onGraphHover(evt) {
@@ -281,7 +279,7 @@ class GraphElement {
   }
   }
 
 
   // Function for rendering panel
   // Function for rendering panel
-  render_panel() {
+  renderPanel() {
     this.panelWidth = this.elem.width();
     this.panelWidth = this.elem.width();
     if (this.shouldAbortRender()) {
     if (this.shouldAbortRender()) {
       return;
       return;

public/app/plugins/panel/graph/specs/graph.test.ts

@@ -125,7 +125,7 @@ describe('grafanaGraph', () => {
 
 
     //Emulate functions called by event listeners
     //Emulate functions called by event listeners
     link.buildFlotPairs(link.data);
     link.buildFlotPairs(link.data);
-    link.render_panel();
+    link.renderPanel();
     ctx.plotData = ctrl.plot.mock.calls[0][1];
     ctx.plotData = ctrl.plot.mock.calls[0][1];
 
 
     ctx.plotOptions = ctrl.plot.mock.calls[0][2];
     ctx.plotOptions = ctrl.plot.mock.calls[0][2];