New legend display option 'Align as table' (Issue #136)

CHANGELOG.md

@@ -2,6 +2,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)
 
 **Changes**
 - Use unix epoch for Graphite from/to for absolute time ranges (Closes #536)

src/app/panels/graph/axisEditor.html

@@ -42,38 +42,17 @@
 
 
 <div class="editor-row">
-
   <div class="section">
-    <h5>Grid thresholds</h5>
+    <h5>Legend styles</h5>
-    <div class="editor-option">
-      <label class="small">Level1</label>
-      <input type="number" class="input-small" ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur />
-    </div>
-    <div class="editor-option">
-      <label class="small">Color</label>
-      <spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
-    </div>
-    <div class="editor-option">
-      <label class="small">Level2</label>
-      <input type="number" class="input-small" ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur />
-    </div>
-    <div class="editor-option">
-      <label class="small">Color</label>
-      <spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
-    </div>
-    <div class="editor-option">
-      <label class="small">Line mode</label><input type="checkbox" ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render();">
-    </div>
-  </div>
-
-  <div class="section">
-    <h5>Legend</h5>
     <div class="editor-option">
       <label class="small">Show Legend</label><input type="checkbox" ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render();">
     </div>
     <div class="editor-option">
       <label class="small">Include Values</label><input type="checkbox" ng-model="panel.legend.values" ng-checked="panel.legend.values" ng-change="render();">
     </div>
+    <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>
 
   <div class="section" ng-if="panel.legend.values">
@@ -100,6 +79,29 @@
 
   </div>
 
+  <div class="section">
+    <h5>Grid thresholds</h5>
+    <div class="editor-option">
+      <label class="small">Level1</label>
+      <input type="number" class="input-small" ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur />
+    </div>
+    <div class="editor-option">
+      <label class="small">Color</label>
+      <spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
+    </div>
+    <div class="editor-option">
+      <label class="small">Level2</label>
+      <input type="number" class="input-small" ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur />
+    </div>
+    <div class="editor-option">
+      <label class="small">Color</label>
+      <spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
+    </div>
+    <div class="editor-option">
+      <label class="small">Line mode</label><input type="checkbox" ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render();">
+    </div>
+  </div>
+
   <div class="section">
     <h5>Show Axes</h5>
     <div class="editor-option">

src/app/panels/graph/legend.html

@@ -1,5 +1,4 @@
-<span ng-show="panel.legend.show"
+<!-- <span ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
-      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'
@@ -29,10 +28,45 @@
         </span>
       </span>
     </span>
-</span>
+</span> -->
+
+<section class="graph-legend" ng-class="{'graph-legend-table': panel.legend.alignAsTable}">
+
+  <div class="graph-legend-series"
+       ng-repeat='series in legend'
+       ng-class="{'pull-right': series.yaxis === 2, 'graph-legend-series-hidden': hiddenSeries[series.alias]}"
+       >
+    <div class="graph-legend-icon">
+      <i class='icon-minus pointer' ng-style="{color: series.color}" bs-popover="'colorPopup.html'">
+      </i>
+    </div>
+    <div class="graph-legend-alias small">
+      <a ng-click="toggleSeries(series, $event)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
+        {{series.alias}}
+      </a>
+    </div>
+    <div class="graph-legend-value small" ng-show="panel.legend.values && panel.legend.current">
+      Current: {{series.current}}
+    </div>
+    <div class="graph-legend-value small" ng-show="panel.legend.values && panel.legend.min">
+      Min: {{series.min}}
+    </div>
+    <div class="graph-legend-value small" ng-show="panel.legend.values && panel.legend.max">
+      Max: {{series.max}}
+    </div>
+    <div class="graph-legend-value small" ng-show="panel.legend.values && panel.legend.total">
+      Total: {{series.total}}
+    </div>
+    <div class="graph-legend-value small" ng-show="panel.legend.values && panel.legend.avg">
+      Avg: {{series.avg}}
+    </div>
+  </div>
+
+</section>
+
 
 <script type="text/ng-template" id="colorPopup.html">
-  <div class="histogram-legend-popover">
+  <div class="graph-legend-popover">
     <a class="close" ng-click="dismiss();" href="">×</a>
 
     <div class="editor-row small" style="padding-bottom: 0;">

src/app/panels/graph/module.html

@@ -15,9 +15,9 @@
 
   </div>
 
-  <div ng-if="panel.legend" class="grafana-legend-container">
+  <div ng-if="panel.legend.show" ng-include="'app/panels/graph/legend.html'">
-    <div ng-include="'app/panels/graph/legend.html'"></div>
   </div>
+
   <div class="clearfix"></div>
 
   <div class="panel-full-edit-tabs" ng-if="editMode">

src/css/less/grafana.less

@@ -1,4 +1,5 @@
 @import "submenu.less";
+@import "legend.less";
 @import "bootstrap-tagsinput.less";
 
 .hide-controls {
@@ -123,12 +124,6 @@
   font-size: 12px;
 }
 
-.hidden-series {
-  a {
-    color: darken(@linkColor, 45%);
-  }
-}
-
 .panel-fullscreen {
   z-index: 100;
   display: block !important;
@@ -154,57 +149,10 @@
   right: -10000px;
 }
 
-// Graphite Graph Legends
-
-.grafana-legend-container {
-  margin: 0 15px;
-  text-align: left;
-  position: relative;
-  top: 2px;
-}
-
-.grafana-legend-container .popover-content {
-  padding: 0;
-}
-
-.histogram-legend {
-  display:inline-block;
-  padding: 0 4px;
-  i {
-    position: relative;
-    top: 2px;
-  }
-}
-
-.histogram-legend-item {
-  display:inline-block;
-}
-
 .histogram-chart {
   position:relative;
 }
 
-.histogram-legend-popover {
-  width: 200px;
-  label {
-    display: inline-block;
-  }
-  .btn {
-    padding: 1px 3px;
-    margin-right: 0px;
-    line-height: initial;
-  }
-  .close {
-    margin-right: 5px;
-    color: @linkColor;
-    opacity: 0.7;
-    text-shadow: none;
-  }
-  .editor-row {
-    padding: 5px;
-  }
-}
-
 .panel-full-edit-tabs {
   margin-top: 10px;
   min-height: 250px;

src/css/less/legend.less

@@ -0,0 +1,86 @@
+.graph-legend {
+  margin: 0 20px;
+  text-align: left;
+  position: relative;
+  top: 2px;
+
+  .popover-content {
+    padding: 0;
+  }
+}
+
+.graph-legend-icon {
+  position: relative;
+  top: 2px;
+}
+
+.graph-legend-series,
+.graph-legend-icon,
+.graph-legend-alias,
+.graph-legend-value {
+  display: inline-block;
+}
+
+.graph-legend-series {
+  padding-left: 10px;
+}
+
+.graph-legend-value {
+  padding-left: 6px;
+}
+
+.graph-legend-table {
+  display: table;
+
+  .graph-legend-series {
+    display: table-row;
+    padding-left: 0;
+    &.pull-right {
+      float: none;
+    }
+  }
+
+  .graph-legend-alias {
+    display: table-cell;
+    white-space: nowrap;
+  }
+
+  .graph-legend-icon {
+    display: table-cell;
+    white-space: nowrap;
+    padding: 0 4px;
+  }
+
+  .graph-legend-value  {
+    display: table-cell;
+    white-space: nowrap;
+    padding-left: 15px;
+  }
+}
+
+.graph-legend-series-hidden {
+  a {
+    color: darken(@linkColor, 45%);
+  }
+}
+
+.graph-legend-popover {
+  width: 200px;
+  label {
+    display: inline-block;
+  }
+  .btn {
+    padding: 1px 3px;
+    margin-right: 0px;
+    line-height: initial;
+  }
+  .close {
+    margin-right: 5px;
+    color: @linkColor;
+    opacity: 0.7;
+    text-shadow: none;
+  }
+  .editor-row {
+    padding: 5px;
+  }
+}