Merge pull request #11140 from grafana/11131_right_legend_responsive

added media breakpoint to legend-right

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

@@ -15,6 +15,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       var seriesList;
       var seriesList;
       var i;
       var i;
       var legendScrollbar;
       var legendScrollbar;
+      const legendRightDefaultWidth = 10;
 
 
       scope.$on('$destroy', function() {
       scope.$on('$destroy', function() {
         if (legendScrollbar) {
         if (legendScrollbar) {
@@ -111,6 +112,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       }
       }
 
 
       function render() {
       function render() {
+        let legendWidth = elem.width();
         if (!ctrl.panel.legend.show) {
         if (!ctrl.panel.legend.show) {
           elem.empty();
           elem.empty();
           firstRender = true;
           firstRender = true;
@@ -163,7 +165,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
         }
         }
 
 
         // render first time for getting proper legend height
         // render first time for getting proper legend height
-        if (!panel.legend.rightSide) {
+        if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
           renderLegendElement(tableHeaderElem);
           renderLegendElement(tableHeaderElem);
           elem.empty();
           elem.empty();
         }
         }
@@ -227,6 +229,8 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       }
       }
 
 
       function renderLegendElement(tableHeaderElem) {
       function renderLegendElement(tableHeaderElem) {
+        let legendWidth = elem.width();
+
         var seriesElements = renderSeriesLegendElements();
         var seriesElements = renderSeriesLegendElements();
 
 
         if (panel.legend.alignAsTable) {
         if (panel.legend.alignAsTable) {
@@ -238,7 +242,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
           elem.append(seriesElements);
           elem.append(seriesElements);
         }
         }
 
 
-        if (!panel.legend.rightSide) {
+        if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
           addScrollbar();
           addScrollbar();
         } else {
         } else {
           destroyScrollbar();
           destroyScrollbar();
@@ -263,6 +267,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       function destroyScrollbar() {
       function destroyScrollbar() {
         if (legendScrollbar) {
         if (legendScrollbar) {
           legendScrollbar.destroy();
           legendScrollbar.destroy();
+          legendScrollbar = undefined;
         }
         }
       }
       }
     },
     },

public/sass/components/_panel_graph.scss

@@ -4,24 +4,26 @@
   height: 100%;
   height: 100%;
 
 
   &--legend-right {
   &--legend-right {
-    flex-direction: row;
+    @include media-breakpoint-up(sm) {
+      flex-direction: row;
 
 
-    .graph-legend {
-      flex: 0 1 10px;
-      max-height: 100%;
-    }
+      .graph-legend {
+        flex: 0 1 10px;
+        max-height: 100%;
+      }
 
 
-    .graph-legend-series {
-      display: block;
-      padding-left: 0px;
-    }
+      .graph-legend-series {
+        display: block;
+        padding-left: 0px;
+      }
 
 
-    .graph-legend-table {
-      width: auto;
-    }
+      .graph-legend-table {
+        width: auto;
+      }
 
 
-    .graph-legend-table .graph-legend-series {
-      display: table-row;
+      .graph-legend-table .graph-legend-series {
+        display: table-row;
+      }
     }
     }
   }
   }
 }
 }