graph legend: remove unused code

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

@@ -85,7 +85,6 @@ class GraphElement {
     const graphHeight = this.elem.height();
     updateLegendValues(this.data, this.panel, graphHeight);
 
-    // this.ctrl.events.emit('render-legend');
     const { values, min, max, avg, current, total } = this.panel.legend;
     const { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero } = this.panel.legend;
     const legendOptions = { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero };
@@ -106,6 +105,10 @@ class GraphElement {
     this.onLegendRenderingComplete();
   }
 
+  onLegendRenderingComplete() {
+    this.render_panel();
+  }
+
   onGraphHover(evt) {
     // ignore other graph hover events if shared tooltip is disabled
     if (!this.dashboard.sharedTooltipModeEnabled()) {
@@ -129,10 +132,6 @@ class GraphElement {
     }
   }
 
-  onLegendRenderingComplete() {
-    this.render_panel();
-  }
-
   onGraphHoverClear(event, info) {
     if (this.plot) {
       this.tooltip.clear(this.plot);

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

@@ -1,305 +0,0 @@
-import angular from 'angular';
-import _ from 'lodash';
-import $ from 'jquery';
-import baron from 'baron';
-
-const module = angular.module('grafana.directives');
-
-module.directive('graphLegend', (popoverSrv, $timeout) => {
-  return {
-    link: (scope, elem) => {
-      let firstRender = true;
-      const ctrl = scope.ctrl;
-      const panel = ctrl.panel;
-      let data;
-      let seriesList;
-      let i;
-      let legendScrollbar;
-      const legendRightDefaultWidth = 10;
-      const legendElem = elem.parent();
-
-      scope.$on('$destroy', () => {
-        destroyScrollbar();
-      });
-
-      ctrl.events.on('render-legend', () => {
-        data = ctrl.seriesList;
-        if (data) {
-          render();
-        }
-        ctrl.events.emit('legend-rendering-complete');
-      });
-
-      function getSeriesIndexForElement(el) {
-        return el.parents('[data-series-index]').data('series-index');
-      }
-
-      function openColorSelector(e) {
-        // if we clicked inside poup container ignore click
-        if ($(e.target).parents('.popover').length) {
-          return;
-        }
-
-        const el = $(e.currentTarget).find('.fa-minus');
-        const index = getSeriesIndexForElement(el);
-        const series = seriesList[index];
-
-        $timeout(() => {
-          popoverSrv.show({
-            element: el[0],
-            position: 'bottom left',
-            targetAttachment: 'top left',
-            template:
-              '<series-color-picker series="series" onToggleAxis="toggleAxis" onColorChange="colorSelected">' +
-              '</series-color-picker>',
-            openOn: 'hover',
-            model: {
-              series: series,
-              toggleAxis: () => {
-                ctrl.toggleAxis(series);
-              },
-              colorSelected: color => {
-                ctrl.changeSeriesColor(series, color);
-              },
-            },
-          });
-        });
-      }
-
-      function toggleSeries(e) {
-        const el = $(e.currentTarget);
-        const index = getSeriesIndexForElement(el);
-        const seriesInfo = seriesList[index];
-        const scrollPosition = legendScrollbar.scroller.scrollTop;
-        ctrl.toggleSeries(seriesInfo, e);
-        legendScrollbar.scroller.scrollTop = scrollPosition;
-      }
-
-      function sortLegend(e) {
-        const el = $(e.currentTarget);
-        const stat = el.data('stat');
-
-        if (stat !== panel.legend.sort) {
-          panel.legend.sortDesc = null;
-        }
-
-        // if already sort ascending, disable sorting
-        if (panel.legend.sortDesc === false) {
-          panel.legend.sort = null;
-          panel.legend.sortDesc = null;
-          ctrl.render();
-          return;
-        }
-
-        panel.legend.sortDesc = !panel.legend.sortDesc;
-        panel.legend.sort = stat;
-        ctrl.render();
-      }
-
-      function getTableHeaderHtml(statName) {
-        if (!panel.legend[statName]) {
-          return '';
-        }
-        let html = '<th class="pointer" data-stat="' + statName + '">' + statName;
-
-        if (panel.legend.sort === statName) {
-          const cssClass = panel.legend.sortDesc ? 'fa fa-caret-down' : 'fa fa-caret-up';
-          html += ' <span class="' + cssClass + '"></span>';
-        }
-
-        return html + '</th>';
-      }
-
-      function render() {
-        const legendWidth = legendElem.width();
-        if (!ctrl.panel.legend.show) {
-          elem.empty();
-          firstRender = true;
-          return;
-        }
-
-        if (firstRender) {
-          elem.on('click', '.graph-legend-icon', openColorSelector);
-          elem.on('click', '.graph-legend-alias', toggleSeries);
-          elem.on('click', 'th', sortLegend);
-          firstRender = false;
-        }
-
-        seriesList = data;
-
-        elem.empty();
-
-        // Set min-width if side style and there is a value, otherwise remove the CSS property
-        // Set width so it works with IE11
-        const width: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + 'px' : '';
-        const ieWidth: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth - 1 + 'px' : '';
-        legendElem.css('min-width', width);
-        legendElem.css('width', ieWidth);
-
-        elem.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
-
-        let tableHeaderElem;
-        if (panel.legend.alignAsTable) {
-          let header = '<tr>';
-          header += '<th colspan="2" style="text-align:left"></th>';
-          if (panel.legend.values) {
-            header += getTableHeaderHtml('min');
-            header += getTableHeaderHtml('max');
-            header += getTableHeaderHtml('avg');
-            header += getTableHeaderHtml('current');
-            header += getTableHeaderHtml('total');
-          }
-          header += '</tr>';
-          tableHeaderElem = $(header);
-        }
-
-        if (panel.legend.sort) {
-          seriesList = _.sortBy(seriesList, series => {
-            let sort = series.stats[panel.legend.sort];
-            if (sort === null) {
-              sort = -Infinity;
-            }
-            return sort;
-          });
-          if (panel.legend.sortDesc) {
-            seriesList = seriesList.reverse();
-          }
-        }
-
-        // render first time for getting proper legend height
-        if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
-          renderLegendElement(tableHeaderElem);
-          elem.empty();
-        }
-
-        renderLegendElement(tableHeaderElem);
-      }
-
-      function renderSeriesLegendElements() {
-        const seriesElements = [];
-        for (i = 0; i < seriesList.length; i++) {
-          const series = seriesList[i];
-
-          if (series.hideFromLegend(panel.legend)) {
-            continue;
-          }
-
-          let html = '<div class="graph-legend-series';
-
-          if (series.yaxis === 2) {
-            html += ' graph-legend-series--right-y';
-          }
-          if (ctrl.hiddenSeries[series.alias]) {
-            html += ' graph-legend-series-hidden';
-          }
-          html += '" data-series-index="' + i + '">';
-          html += '<div class="graph-legend-icon">';
-          html += '<i class="fa fa-minus pointer" style="color:' + series.color + '"></i>';
-          html += '</div>';
-
-          html +=
-            '<a class="graph-legend-alias pointer" title="' + series.aliasEscaped + '">' + series.aliasEscaped + '</a>';
-
-          if (panel.legend.values) {
-            const avg = series.formatValue(series.stats.avg);
-            const current = series.formatValue(series.stats.current);
-            const min = series.formatValue(series.stats.min);
-            const max = series.formatValue(series.stats.max);
-            const total = series.formatValue(series.stats.total);
-
-            if (panel.legend.min) {
-              html += '<div class="graph-legend-value min">' + min + '</div>';
-            }
-            if (panel.legend.max) {
-              html += '<div class="graph-legend-value max">' + max + '</div>';
-            }
-            if (panel.legend.avg) {
-              html += '<div class="graph-legend-value avg">' + avg + '</div>';
-            }
-            if (panel.legend.current) {
-              html += '<div class="graph-legend-value current">' + current + '</div>';
-            }
-            if (panel.legend.total) {
-              html += '<div class="graph-legend-value total">' + total + '</div>';
-            }
-          }
-
-          html += '</div>';
-          seriesElements.push($(html));
-        }
-        return seriesElements;
-      }
-
-      function renderLegendElement(tableHeaderElem) {
-        const legendWidth = elem.width();
-
-        const seriesElements = renderSeriesLegendElements();
-
-        if (panel.legend.alignAsTable) {
-          const tbodyElem = $('<tbody></tbody>');
-          tbodyElem.append(tableHeaderElem);
-          tbodyElem.append(seriesElements);
-          elem.append(tbodyElem);
-          tbodyElem.wrap('<div class="graph-legend-scroll"></div>');
-        } else {
-          elem.append('<div class="graph-legend-scroll"></div>');
-          elem.find('.graph-legend-scroll').append(seriesElements);
-        }
-
-        if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
-          addScrollbar();
-        } else {
-          destroyScrollbar();
-        }
-      }
-
-      function addScrollbar() {
-        const scrollRootClass = 'baron baron__root';
-        const scrollerClass = 'baron__scroller';
-        const scrollBarHTML = `
-          <div class="baron__track">
-            <div class="baron__bar"></div>
-          </div>
-        `;
-
-        const scrollRoot = elem;
-        const scroller = elem.find('.graph-legend-scroll');
-
-        // clear existing scroll bar track to prevent duplication
-        scrollRoot.find('.baron__track').remove();
-
-        scrollRoot.addClass(scrollRootClass);
-        $(scrollBarHTML).appendTo(scrollRoot);
-        scroller.addClass(scrollerClass);
-
-        const scrollbarParams = {
-          root: scrollRoot[0],
-          scroller: scroller[0],
-          bar: '.baron__bar',
-          track: '.baron__track',
-          barOnCls: '_scrollbar',
-          scrollingCls: '_scrolling',
-        };
-
-        if (!legendScrollbar) {
-          legendScrollbar = baron(scrollbarParams);
-        } else {
-          destroyScrollbar();
-          legendScrollbar = baron(scrollbarParams);
-        }
-
-        // #11830 - compensates for Firefox scrollbar calculation error in the baron framework
-        scroller[0].style.marginRight = '-' + (scroller[0].offsetWidth - scroller[0].clientWidth) + 'px';
-
-        legendScrollbar.scroll();
-      }
-
-      function destroyScrollbar() {
-        if (legendScrollbar) {
-          legendScrollbar.dispose();
-          legendScrollbar = undefined;
-        }
-      }
-    },
-  };
-});

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

@@ -1,5 +1,4 @@
 import './graph';
-import './legend';
 import './series_overrides_ctrl';
 import './thresholds_form';