Graph: changed style of legend table mode to full width table and with headers, #1030

src/app/panels/graph/axisEditor.html

@@ -43,7 +43,6 @@
 		<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,16 +65,17 @@ 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);
+          if (panel.legend.alignAsTable) {
             var header = '<tr>';
             var header = '<tr>';
             header += '<th></th>';
             header += '<th></th>';
             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>';
+            if (panel.legend.values) {
+              if (panel.legend.min) { header += '<th>min</div>'; }
+              if (panel.legend.max) { header += '<th>max</div>'; }
+              if (panel.legend.avg) { header += '<th>avg</div>'; }
+              if (panel.legend.current) { header += '<th>current</div>'; }
+              if (panel.legend.total) { header += '<th>total</div>'; }
+            }
             header += '</tr>';
             header += '</tr>';
             $container.append($(header));
             $container.append($(header));
           }
           }

src/css/less/graph.less

@@ -53,6 +53,8 @@
 
 
 .graph-legend-table {
 .graph-legend-table {
   display: table;
   display: table;
+  width: 100%;
+  margin: 0;
 
 
   .graph-legend-series {
   .graph-legend-series {
     display: table-row;
     display: table-row;
@@ -63,66 +65,39 @@
     }
     }
   }
   }
 
 
-  .graph-legend-alias {
+  td, .graph-legend-alias, .graph-legend-icon, .graph-legend-value {
     float: none;
     float: none;
     display: table-cell;
     display: table-cell;
     white-space: nowrap;
     white-space: nowrap;
+    padding: 2px 10px;
+    text-align: right;
+    border-bottom: 1px solid @grafanaListBorderBottom;
   }
   }
 
 
   .graph-legend-icon {
   .graph-legend-icon {
-    display: table-cell;
-    float: none;
-    white-space: nowrap;
-    padding: 0 4px;
+    width: 5px;
+    padding: 0;
+    top: 0;
+    .icon-minus {
+      position: relative;
       top: 2px;
       top: 2px;
     }
     }
+  }
 
 
  .graph-legend-value  {
  .graph-legend-value  {
-    float: none;
-    display: table-cell;
-    white-space: nowrap;
     padding-left: 15px;
     padding-left: 15px;
   }
   }
-}
-
-.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 {
   .graph-legend-alias {
+    padding-left: 7px;
     text-align: left;
     text-align: left;
     width: 95%;
     width: 95%;
   }
   }
 
 
-  th {
-    text-align: right;
-    padding: 5px 10px;
-    font-weight: bold;
-    color: @blue
-  }
-
   .graph-legend-series:nth-child(odd) {
   .graph-legend-series:nth-child(odd) {
     background-color: @grafanaListAccent;
     background-color: @grafanaListAccent;
   }
   }
+
   .graph-legend-value {
   .graph-legend-value {
     &.current, &.max, &.min, &.total, &.avg {
     &.current, &.max, &.min, &.total, &.avg {
       &:before {
       &:before {
@@ -130,6 +105,13 @@
       }
       }
     }
     }
   }
   }
+
+  th {
+    text-align: right;
+    padding: 5px 10px;
+    font-weight: bold;
+    color: @blue
+  }
 }
 }
 
 
 .graph-legend-rightside {
 .graph-legend-rightside {