graph: make legend scrollable

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

@@ -84,21 +84,44 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
       }, scope);
 
       function getLegendHeight(panelHeight) {
+        const LEGEND_TABLE_LINE_HEIGHT = 21;
+        const LEGEND_LINE_HEIGHT = 17;
+        const LEGEND_PADDING = 23;
+        const LEGEND_CHAR_WIDTH = 5;
+
         if (!panel.legend.show || panel.legend.rightSide) {
           return 0;
         }
 
+        let legendSeries = _.filter(data, function(series) {
+          return series.hideFromLegend(panel.legend) === false;
+        });
+
         if (panel.legend.alignAsTable) {
-          var legendSeries = _.filter(data, function(series) {
-            return series.hideFromLegend(panel.legend) === false;
-          });
-          var total = 23 + (21 * legendSeries.length);
+          let total = LEGEND_PADDING + (LEGEND_TABLE_LINE_HEIGHT * legendSeries.length);
           return Math.min(total, Math.floor(panelHeight/2));
         } else {
-          return 26;
+          let linesCount = getLegendBoxHeight(legendSeries, panelWidth, LEGEND_CHAR_WIDTH);
+          let total = LEGEND_PADDING + (LEGEND_LINE_HEIGHT * linesCount);
+          return Math.min(total, Math.floor(panelHeight/2));
         }
       }
 
+      function getLegendBoxHeight(legendSeries, legendWidth, charWidth) {
+        let linesCount = 1;
+        let currentLineLength = 0;
+        let legendWidthChars = Math.floor(legendWidth / charWidth);
+        _.each(legendSeries, (series) => {
+          let nextLength = series.aliasEscaped.length + 4;
+          currentLineLength += nextLength;
+          if (currentLineLength > legendWidthChars) {
+            linesCount++;
+            currentLineLength = nextLength;
+          }
+        });
+        return linesCount;
+      }
+
       function setElementHeight() {
         try {
           var height = ctrl.height - getLegendHeight(ctrl.height);

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

@@ -2,8 +2,9 @@ define([
   'angular',
   'lodash',
   'jquery',
+  'perfect-scrollbar'
 ],
-function (angular, _, $) {
+function (angular, _, $, PerfectScrollbar) {
   'use strict';
 
   var module = angular.module('grafana.directives');
@@ -19,6 +20,7 @@ function (angular, _, $) {
         var data;
         var seriesList;
         var i;
+        var legendScrollbar;
 
         ctrl.events.on('render', function() {
           data = ctrl.seriesList;
@@ -205,7 +207,13 @@ function (angular, _, $) {
             tbodyElem.append(seriesElements);
             $container.append(tbodyElem);
           } else {
+            var maxLegendHeight = ctrl.height / 2;
+            $container.css("max-height", maxLegendHeight - 6);
             $container.append(seriesElements);
+            if (!legendScrollbar) {
+              legendScrollbar = new PerfectScrollbar.default($container[0]);
+            }
+            legendScrollbar.update();
           }
         }
       }

public/sass/components/_panel_graph.scss

@@ -27,6 +27,7 @@
   text-align: center;
   width: calc(100% - $spacer);
   padding-top: 6px;
+  position: relative;
 
   .popover-content {
     padding: 0;