Implementation of legend values (min, max, current, total, avg), Closes grafana#60, Fixes grafana#14

Author: torkelo

src/app/directives/grafanaGraph.js

@@ -260,13 +260,13 @@ function (angular, $, kbn, moment, _) {
             return "%Y-%m";
           }
           if(_int >= 10000) {
-            return "%Y-%m-%d";
+            return "%m/%d";
           }
           if(_int >= 3600) {
-            return "%m/%d %H:%M" //"%H:%M<br>%m-%d";
+            return "%m/%d %H:%M";
           }
           if(_int >= 700) {
-            return "%a %H:%M" //"%H:%M<br>%m-%d";
+            return "%a %H:%M";
           }
 
           return "%H:%M";

src/app/panels/graphite/axisEditor.html

@@ -48,8 +48,35 @@ <h5>Grid</h5>
   <div class="section">
     <h5>Legend</h5>
     <div class="editor-option">
-      <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend" ng-change="render();">
+      <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>
+
+  <div class="section" ng-if="panel.legend.values">
+    <h5>Legend values</h5>
+    <div class="editor-option">
+      <label class="small">Min</label><input type="checkbox" ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="render();">
+    </div>
+
+    <div class="editor-option">
+      <label class="small">Max</label><input type="checkbox" ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="render();">
+    </div>
+
+    <div class="editor-option">
+      <label class="small">Current</label><input type="checkbox" ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="render();">
+    </div>
+
+    <div class="editor-option">
+      <label class="small">Total</label><input type="checkbox" ng-model="panel.legend.total" ng-checked="panel.legend.total" ng-change="render();">
+    </div>
+
+    <div class="editor-option">
+      <label class="small">Avg</label><input type="checkbox" ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="render();">
+    </div>
+
   </div>
 
 </div>

src/app/panels/graphite/legend.html

@@ -1,4 +1,4 @@
-<span ng-show="panel.legend"
+<span ng-show="panel.legend.show"
       ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
       ng-repeat='series in legend'
       class="histogram-legend">
@@ -9,8 +9,25 @@
     </i>
     <span class='small histogram-legend-item'>
       <a ng-click="toggleSeries(series)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
-        {{series.alias}} [max: {{series.max}}, min: {{series.min}}, total: {{series.total}}, avg: {{series.avg}}, current: {{series.current}}]
+        {{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>
 

src/app/panels/graphite/module.js

@@ -153,7 +153,15 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       /** @scratch /panels/histogram/3
        * legend:: Display the legond
        */
-      legend        : true,
+      legend: {
+        show: true, // disable/enable legend
+        values: false, // disable/enable legend values
+        min: false,
+        max: false,
+        current: false,
+        total: false,
+        avg: false
+      },
       /** @scratch /panels/histogram/3
        * ==== Transformations
       /** @scratch /panels/histogram/3
@@ -182,11 +190,16 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     };
 
     _.defaults($scope.panel,_d);
-    _.defaults($scope.panel.tooltip,_d.tooltip);
-    _.defaults($scope.panel.annotate,_d.annotate);
-    _.defaults($scope.panel.grid,_d.grid);
+    _.defaults($scope.panel.tooltip, _d.tooltip);
+    _.defaults($scope.panel.annotate, _d.annotate);
+    _.defaults($scope.panel.grid, _d.grid);
 
     // backward compatible stuff
+    if (_.isBoolean($scope.panel.legend)) {
+      $scope.panel.legend = { show: $scope.panel.legend };
+      _.defaults($scope.panel.legend, _d.legend);
+    }
+
     if ($scope.panel.y_format) {
       $scope.panel.y_formats[0] = $scope.panel.y_format;
       delete $scope.panel.y_format;

src/app/panels/graphite/timeSeries.js

@@ -48,8 +48,10 @@ function (_) {
       result.push([currentTime * 1000, currentValue]);
     }, this);
 
-    this.info.avg = this.info.total / result.length;
-    this.info.current = result[result.length-1][1];
+    if (result.length) {
+      this.info.avg = (this.info.total / result.length).toFixed(2);
+      this.info.current = result[result.length-1][1];
+    }
 
     return result;
   };