Graph: new legend table display style, #1030

src/app/panels/graph/axisEditor.html

@@ -43,6 +43,7 @@
 		<editor-opt-bool text="Show legend" model="panel.legend.show" change="get_data();"></editor-opt-bool>
 		<editor-opt-bool text="Show legend" model="panel.legend.show" change="get_data();"></editor-opt-bool>
 		<editor-opt-bool text="Include values" model="panel.legend.values" change="render()"></editor-opt-bool>
 		<editor-opt-bool text="Include values" model="panel.legend.values" change="render()"></editor-opt-bool>
 		<editor-opt-bool text="Align as table" model="panel.legend.alignAsTable" change="render()"></editor-opt-bool>
 		<editor-opt-bool text="Align as table" model="panel.legend.alignAsTable" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Big table mode" model="panel.legend.bigTableMode" change="render()"></editor-opt-bool>
 		<editor-opt-bool text="Right side" model="panel.legend.rightSide" change="render()"></editor-opt-bool>
 		<editor-opt-bool text="Right side" model="panel.legend.rightSide" change="render()"></editor-opt-bool>
   </div>
   </div>
 
 

src/app/panels/graph/legend.js

@@ -65,6 +65,20 @@ function (angular, app, _, kbn, $) {
 
 
           $container.toggleClass('graph-legend-table', panel.legend.alignAsTable);
           $container.toggleClass('graph-legend-table', panel.legend.alignAsTable);
 
 
+          if (panel.legend.bigTableMode) {
+            $container.toggleClass('graph-legend-big-table', true);
+            var header = '<tr>';
+            header += '<th></th>';
+            header += '<th></th>';
+            header += '<th>min</th>';
+            header += '<th>max</th>';
+            header += '<th>avg</th>';
+            header += '<th>current</th>';
+            header += '<th>total</th>';
+            header += '</tr>';
+            $container.append($(header));
+          }
+
           for (i = 0; i < data.length; i++) {
           for (i = 0; i < data.length; i++) {
             var series = data[i];
             var series = data[i];
             var html = '<div class="graph-legend-series';
             var html = '<div class="graph-legend-series';

src/css/less/graph.less

@@ -85,6 +85,52 @@
   }
   }
 }
 }
 
 
+.graph-legend-big-table {
+  width: 100%;
+  margin: 0;
+
+  td, .graph-legend-alias, .graph-legend-icon, .graph-legend-value {
+    padding: 2px 10px;
+    white-space: nowrap;
+    text-align: right;
+    border-bottom: 1px solid @grafanaListBorderBottom;
+
+    &:first-child {
+      text-align: left;
+    }
+    &:last-child td {
+      border: none;
+    }
+  }
+
+  .graph-legend-icon {
+    width: 5px;
+    padding-right: 0;
+  }
+
+  .graph-legend-alias {
+    text-align: left;
+    width: 95%;
+  }
+
+  th {
+    text-align: right;
+    padding: 5px 10px;
+    font-weight: bold;
+    color: @blue
+  }
+
+  .graph-legend-series:nth-child(odd) {
+    background-color: @grafanaListAccent;
+  }
+  .graph-legend-value {
+    &.current, &.max, &.min, &.total, &.avg {
+      &:before {
+        content: '';
+      }
+    }
+  }
+}
 
 
 .graph-legend-rightside {
 .graph-legend-rightside {