From 36354856f9d6c6f317b2396f20dd96886fd0c885 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Mon, 22 Oct 2018 15:59:08 +0300
Subject: [PATCH] graph legend: minor refactor

---
 .../colorpicker/SeriesColorPicker.tsx         |  4 ++
 .../panel/graph/Legend/LegendSeriesItem.tsx   | 56 ++++++++++---------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/public/app/core/components/colorpicker/SeriesColorPicker.tsx b/public/app/core/components/colorpicker/SeriesColorPicker.tsx
index ae744da423d..4fa2cc3f2b9 100644
--- a/public/app/core/components/colorpicker/SeriesColorPicker.tsx
+++ b/public/app/core/components/colorpicker/SeriesColorPicker.tsx
@@ -26,6 +26,10 @@ export class SeriesColorPicker extends React.Component<SeriesColorPickerProps> {
     this.openColorPicker = this.openColorPicker.bind(this);
   }
 
+  componentWillUnmount() {
+    this.destroyDrop();
+  }
+
   openColorPicker() {
     if (this.colorPickerDrop) {
       this.destroyDrop();
diff --git a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
index 6c50e4f1c58..55a28fc10b0 100644
--- a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
+++ b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
@@ -61,10 +61,36 @@ export class LegendItem extends React.PureComponent<LegendItemProps, LegendItemS
     this.forceUpdate();
   };
 
+  getOptionSeriesCSSClasses() {
+    const { series, hidden } = this.props;
+    const classes = [];
+    if (series.yaxis === 2) {
+      classes.push('graph-legend-series--right-y');
+    }
+    if (hidden) {
+      classes.push('graph-legend-series-hidden');
+    }
+    return classes.join(' ');
+  }
+
+  renderLegendValues() {
+    const { series, asTable } = this.props;
+    const legendValueItems = [];
+    for (const valueName of LEGEND_STATS) {
+      if (this.props[valueName]) {
+        const valueFormatted = series.formatValue(series.stats[valueName]);
+        legendValueItems.push(
+          <LegendValue key={valueName} valueName={valueName} value={valueFormatted} asTable={asTable} />
+        );
+      }
+    }
+    return legendValueItems;
+  }
+
   render() {
-    const { series, hidden, asTable } = this.props;
-    const seriesOptionClasses = getOptionSeriesCSSClasses(series, hidden);
-    const valueItems = this.props.values ? renderLegendValues(this.props, series, asTable) : [];
+    const { series, values, asTable } = this.props;
+    const seriesOptionClasses = this.getOptionSeriesCSSClasses();
+    const valueItems = values ? this.renderLegendValues() : [];
     const seriesLabel = (
       <LegendSeriesLabel
         label={series.aliasEscaped}
@@ -188,27 +214,3 @@ function LegendValue(props: LegendValueProps) {
   }
   return <div className={`graph-legend-value ${valueName}`}>{value}</div>;
 }
-
-function renderLegendValues(props: LegendItemProps, series, asTable = false) {
-  const legendValueItems = [];
-  for (const valueName of LEGEND_STATS) {
-    if (props[valueName]) {
-      const valueFormatted = series.formatValue(series.stats[valueName]);
-      legendValueItems.push(
-        <LegendValue key={valueName} valueName={valueName} value={valueFormatted} asTable={asTable} />
-      );
-    }
-  }
-  return legendValueItems;
-}
-
-function getOptionSeriesCSSClasses(series, hidden) {
-  const classes = [];
-  if (series.yaxis === 2) {
-    classes.push('graph-legend-series--right-y');
-  }
-  if (hidden) {
-    classes.push('graph-legend-series-hidden');
-  }
-  return classes.join(' ');
-}