New legend display option 'Right side', will show legend to the right of the graph (Closes #556)

CHANGELOG.md

@@ -3,6 +3,7 @@ vNext
 **New features or improvements**
 - Allow [[..]] filter notation in all text panels (markdown/html/text) (Issue #511)
 - New legend display option "Align as table" (Issue #136)
+- New legend display option "Right side", will show legend to the right of the graph (Issue #556)
 - Enhanced InfluxDB series aliasing (legend names) with pattern replacements (Issue #525)
 
 **Changes**

src/app/directives/grafanaGraph.js

@@ -17,6 +17,7 @@ function (angular, $, kbn, moment, _) {
       link: function(scope, elem) {
         var data, plot, annotations;
         var hiddenData = {};
+        var legendSideLastValue = null;
 
         scope.$on('refresh',function() {
           if (scope.otherPanelInFullscreenMode()) { return; }
@@ -55,7 +56,7 @@ function (angular, $, kbn, moment, _) {
 
             height = height - 32; // subtract panel title bar
 
-            if (scope.panel.legend.show) {
+            if (scope.panel.legend.show && !scope.panel.legend.rightSide) {
               height = height - 21; // subtract one line legend
             }
 
@@ -135,6 +136,7 @@ function (angular, $, kbn, moment, _) {
             yaxes: [],
             xaxis: {},
             grid: {
+              minBorderMargin: 0,
               markings: [],
               backgroundColor: null,
               borderWidth: 0,
@@ -161,9 +163,30 @@ function (angular, $, kbn, moment, _) {
           addAnnotations(options);
           configureAxisOptions(data, options);
 
-          plot = $.plot(elem, data, options);
+          // if legend is to the right delay plot draw a few milliseconds
+          // so the legend width calculation can be done
+          if (shouldDelayDraw(panel)) {
+            console.log('delay');
+            legendSideLastValue = panel.legend.rightSide;
+            setTimeout(function() {
+              plot = $.plot(elem, data, options);
+              addAxisLabels();
+            }, 50);
+          }
+          else {
+            plot = $.plot(elem, data, options);
+            addAxisLabels();
+          }
+        }
 
-          addAxisLabels();
+        function shouldDelayDraw(panel) {
+          if (panel.legend.rightSide) {
+            return true;
+          }
+          if (legendSideLastValue !== null && panel.legend.rightSide !== legendSideLastValue) {
+            return true;
+          }
+          return false;
         }
 
         function addTimeAxis(options) {

src/app/panels/graph/axisEditor.html

@@ -33,10 +33,6 @@
         <label class="small">Max / <a ng-click="toggleGridMinMax('rightMax')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.rightMax)"></i></a></label>
         <input type="number" class="input-small" ng-model="panel.grid.rightMax" ng-change="render()" ng-model-onblur />
       </div>
-      <div class="editor-option">
-        <label class="small">Label</label>
-        <input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.rightYAxisLabel">
-      </div>
   </div>
 </div>
 
@@ -53,6 +49,9 @@
     <div class="editor-option">
       <label class="small">Align as table</label><input type="checkbox" ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable">
     </div>
+    <div class="editor-option">
+      <label class="small">Right side</label><input type="checkbox" ng-model="panel.legend.rightSide" ng-change="render();" ng-checked="panel.legend.rightSide">
+    </div>
   </div>
 
   <div class="section" ng-if="panel.legend.values">

src/app/panels/graph/legend.html

@@ -1,35 +1,3 @@
-<!-- <span ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
-      ng-repeat='series in legend'
-      class="histogram-legend">
-    <i  class='icon-minus pointer'
-        ng-style="{color: series.color}"
-        bs-popover="'colorPopup.html'"
-        >
-    </i>
-    <span class='small histogram-legend-item'>
-      <a ng-click="toggleSeries(series, $event)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
-        {{series.alias}}
-      </a>
-      <span ng-if="panel.legend.values">
-        <span ng-show="panel.legend.current">
-          &nbsp;&nbsp;Current:  {{series.current}}&nbsp;
-        </span>
-        <span ng-show="panel.legend.min">
-          &nbsp;&nbsp;Min: {{series.min}}&nbsp;
-        </span>
-        <span ng-show="panel.legend.max">
-          &nbsp;&nbsp;Max: {{series.max}}&nbsp;
-        </span>
-        <span ng-show="panel.legend.total">
-          &nbsp;&nbsp;Total: {{series.total}}&nbsp;
-        </span>
-        <span ng-show="panel.legend.avg">
-          &nbsp;&nbsp;Avg: {{series.avg}}&nbsp;
-        </span>
-      </span>
-    </span>
-</span> -->
-
 <section class="graph-legend" ng-class="{'graph-legend-table': panel.legend.alignAsTable}">
 
   <div class="graph-legend-series"

src/app/panels/graph/module.html

@@ -3,19 +3,45 @@
       style="min-height:{{panel.height || row.height}}"
       ng-class="{'panel-fullscreen': fullscreen}">
 
-  <div style="position: relative">
+<!--   <table style="width: 100%">
+    <tr>
+    <td style="width: 100%">
+      <div style="position: relative">
 
-    <div ng-if="datapointsWarning" class="datapoints-warning">
-      <span class="small" ng-show="!datapointsCount">No datapoints <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
-      <span class="small" ng-show="datapointsOutside">Datapoints outside time range <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
-    </div>
+        <div ng-if="datapointsWarning" class="datapoints-warning">
+          <span class="small" ng-show="!datapointsCount">No datapoints <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
+          <span class="small" ng-show="datapointsOutside">Datapoints outside time range <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
+        </div>
 
-    <div grafana-graph class="pointer histogram-chart">
-    </div>
+        <div grafana-graph class="pointer histogram-chart">
+        </div>
 
-  </div>
+      </div>
+    </td>
+    <td>
+      <div ng-if="panel.legend.show" ng-include="'app/panels/graph/legend.html'">
+      </div>
+    </td>
+    </tr>
+  </table> -->
+
+  <div class="graph-wrapper" ng-class="{'graph-legend-rightside': panel.legend.rightSide}">
+      <div class="graph-canvas-wrapper">
 
-  <div ng-if="panel.legend.show" ng-include="'app/panels/graph/legend.html'">
+        <div ng-if="datapointsWarning" class="datapoints-warning">
+          <span class="small" ng-show="!datapointsCount">No datapoints <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
+          <span class="small" ng-show="datapointsOutside">Datapoints outside time range <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span>
+        </div>
+
+        <div grafana-graph class="pointer histogram-chart">
+        </div>
+
+      </div>
+
+      <div class="graph-legend-wrapper"
+           ng-if="panel.legend.show"
+           ng-include="'app/panels/graph/legend.html'">
+      </div>
   </div>
 
   <div class="clearfix"></div>

src/app/partials/influxdb/editor.html

@@ -156,7 +156,7 @@
 
   <div class="pull-left metrics-editor-help" style="margin-top: 30px;">
     <div class="span6">
-      <span>
+      <span class="pointer">
         <i class="icon-question-sign"></i> alias patterns:
       </span>
       <ul class="hide">

src/css/less/grafana.less

@@ -1,5 +1,5 @@
 @import "submenu.less";
-@import "legend.less";
+@import "graph.less";
 @import "bootstrap-tagsinput.less";
 
 .hide-controls {

src/css/less/legend.less → src/css/less/graph.less

@@ -19,6 +19,7 @@
 .graph-legend-alias,
 .graph-legend-value {
   display: inline-block;
+  white-space: nowrap;
 }
 
 .graph-legend-series {
@@ -61,6 +62,41 @@
   }
 }
 
+
+.graph-legend-rightside {
+
+  &.graph-wrapper {
+    display: table;
+    width: 100%;
+  }
+
+  .graph-canvas-wrapper {
+    display: table-cell;
+    width: 100%;
+    position: relative;
+  }
+
+  .graph-legend-wrapper {
+    display: table-cell;
+    vertical-align: top;
+    position: relative;
+    left: -4px;
+  }
+
+  .graph-legend {
+    margin: 0;
+  }
+
+  .graph-legend-series {
+    display: block;
+    padding-left: 0px;
+  }
+
+  .graph-legend-table .graph-legend-series {
+    display: table-row;
+  }
+}
+
 .graph-legend-series-hidden {
   a {
     color: darken(@linkColor, 45%);
@@ -86,4 +122,4 @@
   .editor-row {
     padding: 5px;
   }
-}
+}