work in progress for legend values

src/app/dashboards/default.json

@@ -46,39 +46,12 @@
           "x-axis": true,
           "y-axis": true,
           "scale": 1,
-          "y_format": "none",
-          "y2_format": "none",
+          "y_formats": ["short", "short"],
           "grid": {
             "max": null,
             "min": 0
           },
-          "annotate": {
-            "enable": false,
-            "query": "*",
-            "size": 20,
-            "field": "_type",
-            "sort": [
-              "_score",
-              "desc"
-            ]
-          },
-          "auto_int": true,
           "resolution": 100,
-          "interval": "5m",
-          "intervals": [
-            "auto",
-            "1s",
-            "1m",
-            "5m",
-            "10m",
-            "30m",
-            "1h",
-            "3h",
-            "12h",
-            "1d",
-            "1w",
-            "1y"
-          ],
           "lines": true,
           "fill": 1,
           "linewidth": 2,
@@ -87,7 +60,6 @@
           "bars": false,
           "stack": true,
           "spyable": true,
-          "zoomlinks": false,
           "options": false,
           "legend": true,
           "interactive": true,

src/app/directives/grafanaGraph.js

@@ -64,11 +64,6 @@ function (angular, $, kbn, moment, _) {
             return;
           }
 
-          _.each(data, function(series) {
-            series.label = series.info.alias;
-            series.color = series.info.color;
-          });
-
           _.each(_.keys(scope.hiddenSeries), function(seriesAlias) {
             var dataSeries = _.find(data, function(series) {
               return series.info.alias === seriesAlias;
@@ -138,10 +133,8 @@ function (angular, $, kbn, moment, _) {
           addAnnotations(options);
 
           for (var i = 0; i < data.length; i++) {
-            var _d = data[i].time_series.getFlotPairs(scope.panel.nullPointMode);
-            data[i].yaxis = data[i].info.yaxis;
+            var _d = data[i].getFlotPairs(scope.panel.nullPointMode);
             data[i].data = _d;
-            data[i].info.y_format = data[i].yaxis === 1 ? scope.panel.y_format : scope.panel.y2_format;
           }
 
           configureAxisOptions(data, options);
@@ -165,7 +158,7 @@ function (angular, $, kbn, moment, _) {
           url += scope.panel['x-axis'] ? '' : '&hideAxes=true';
           url += scope.panel['y-axis'] ? '' : '&hideYAxis=true';
 
-          switch(scope.panel.y_format) {
+          switch(scope.panel.y_formats[0]) {
           case 'bytes':
             url += '&yUnitSystem=binary';
             break;
@@ -241,10 +234,10 @@ function (angular, $, kbn, moment, _) {
             var secondY = _.clone(defaults);
             secondY.position = 'right';
             options.yaxes.push(secondY);
-            configureAxisMode(options.yaxes[1], scope.panel.y2_format);
+            configureAxisMode(options.yaxes[1], scope.panel.y_formats[1]);
           }
 
-          configureAxisMode(options.yaxes[0], scope.panel.y_format);
+          configureAxisMode(options.yaxes[0], scope.panel.y_formats[0]);
         }
 
         function configureAxisMode(axis, format) {
@@ -293,10 +286,10 @@ function (angular, $, kbn, moment, _) {
               item.datapoint[1] - item.datapoint[2] :
               item.datapoint[1];
             if(item.series.info.y_format === 'bytes') {
-              value = kbn.byteFormat(value,2);
+              value = kbn.byteFormat(value, 2);
             }
             if(item.series.info.y_format === 'short') {
-              value = kbn.shortFormat(value,2);
+              value = kbn.shortFormat(value, 2);
             }
             if(item.series.info.y_format === 'ms') {
               value = kbn.msFormat(value);

src/app/panels/graphite/axisEditor.html

@@ -1,7 +1,7 @@
 <div class="editor-row">
 
   <div class="section">
-    <h5>Axis</h5>
+    <h5>Axes</h5>
     <div class="editor-option">
       <label class="small">X-Axis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
     </div>
@@ -10,11 +10,11 @@
     </div>
     <div class="editor-option">
       <label class="small">Left Y Format <tip>Y-axis formatting</tip></label>
-      <select class="input-small" ng-model="panel.y_format" ng-options="f for f in ['none','short','bytes', 'ms']" ng-change="render()"></select>
+      <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'ms']" ng-change="render()"></select>
     </div>
     <div class="editor-option">
       <label class="small">Right Y Format <tip>Y-axis formatting</tip></label>
-      <select class="input-small" ng-model="panel.y2_format" ng-options="f for f in ['none','short','bytes', 'ms']" ng-change="render()"></select>
+      <select class="input-small" ng-model="panel.y_formats[2]" ng-options="f for f in ['none','short','bytes', 'ms']" ng-change="render()"></select>
     </div>
 
     <div class="editor-option">

src/app/panels/graphite/legend.html

@@ -9,7 +9,7 @@
     </i>
     <span class='small histogram-legend-item'>
       <a ng-click="toggleSeries(series)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
-        {{series.alias}}
+        {{series.alias}} [max: {{series.max}}, min: {{series.min}}, total: {{series.total}}, avg: {{series.avg}}, current: {{series.current}}]
       </a>
     </span>
 </span>

src/app/panels/graphite/module.js

@@ -99,36 +99,23 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
        */
       scale         : 1,
       /** @scratch /panels/histogram/3
-       * y_format:: 'none','bytes','short '
+       * y_formats :: 'none','bytes','short', 'ms'
        */
-      y_format    : 'short',
-      y2_format   : 'short',
+      y_formats    : ['short', 'short'],
       /** @scratch /panels/histogram/5
        * grid object:: Min and max y-axis values
        * grid.min::: Minimum y-axis value
-       * grid.max::: Maximum y-axis value
+       * grid.ma1::: Maximum y-axis value
        */
       grid          : {
         max: null,
         min: 0
       },
-      /** @scratch /panels/histogram/3
-       * ==== Annotations
-       * annotate object:: A query can be specified, the results of which will be displayed as markers on
-       * the chart. For example, for noting code deploys.
-       * annotate.enable::: Should annotations, aka markers, be shown?
-       * annotate.query::: Lucene query_string syntax query to use for markers.
-       * annotate.size::: Max number of markers to show
-       * annotate.field::: Field from documents to show
-       * annotate.sort::: Sort array in format [field,order], For example [`@timestamp',`desc']
-       */
+
       annotate      : {
         enable      : false,
-        query       : "*",
-        size        : 20,
-        field       : '_type',
-        sort        : ['_score','desc']
       },
+
       /** @scratch /panels/histogram/3
        * resolution:: If auto_int is true, shoot for this many bars.
        */
@@ -199,6 +186,15 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     _.defaults($scope.panel.annotate,_d.annotate);
     _.defaults($scope.panel.grid,_d.grid);
 
+    // backward compatible stuff
+    if ($scope.panel.y_format) {
+      $scope.panel.y_formats[0] = $scope.panel.y_format;
+      delete $scope.panel.y_format;
+    }
+    if ($scope.panel.y2_format) {
+      $scope.panel.y_formats[1] = $scope.panel.y2_format;
+      delete $scope.panel.y2_format;
+    }
 
     $scope.init = function() {
       // Hide view options by default
@@ -284,6 +280,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.panelMeta.loading = false;
       $scope.legend = [];
 
+      // png renderer returns just a url
       if (_.isString(results)) {
         $scope.render(results);
         return;
@@ -297,26 +294,21 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
         var color = $scope.panel.aliasColors[alias] || $scope.colors[data.length];
         var yaxis = $scope.panel.aliasYAxis[alias] || 1;
 
-        var time_series = new timeSeries.ZeroFilled({
-          start_date: $scope.range && $scope.range.from,
-          end_date: $scope.range && $scope.range.to,
-          datapoints: targetData.datapoints
-        });
-
         var seriesInfo = {
           alias: alias,
           color:  color,
           enable: true,
           yaxis: yaxis,
+          y_format: $scope.panel.y_formats[yaxis - 1]
         };
 
-        $scope.legend.push(seriesInfo);
-
-        data.push({
+        var series = new timeSeries.ZeroFilled({
+          datapoints: targetData.datapoints,
           info: seriesInfo,
-          time_series: time_series,
         });
 
+        $scope.legend.push(seriesInfo);
+        data.push(series);
       });
 
       $scope.render(data);

src/app/panels/graphite/timeSeries.js

@@ -6,41 +6,21 @@ function (_) {
 
   var ts = {};
 
-  // trim the ms off of a time, but return it with empty ms.
-  function getDatesTime(date) {
-    return Math.floor(date.getTime() / 1000)*1000;
-  }
-
-  /**
-   * Certain graphs require 0 entries to be specified for them to render
-   * properly (like the line graph). So with this we will caluclate all of
-   * the expected time measurements, and fill the missing ones in with 0
-   * @param {object} opts  An object specifying some/all of the options
-   *
-   * OPTIONS:
-   * @opt   {string}   interval    The interval notion describing the expected spacing between
-   *                                each data point.
-   * @opt   {date}     start_date  (optional) The start point for the time series, setting this and the
-   *                                end_date will ensure that the series streches to resemble the entire
-   *                                expected result
-   * @opt   {date}     end_date    (optional) The end point for the time series, see start_date
-   */
   ts.ZeroFilled = function (opts) {
-    opts = _.defaults(opts, {
-      start_date: null,
-      end_date: null,
-      datapoints: []
-    });
-
-    this.start_time = opts.start_date && getDatesTime(opts.start_date);
-    this.end_time = opts.end_date && getDatesTime(opts.end_date);
-    this.opts = opts;
     this.datapoints = opts.datapoints;
+    this.info = opts.info;
+    this.label = opts.info.alias;
+    this.color = opts.info.color;
+    this.yaxis = opts.info.yaxis;
   };
 
   ts.ZeroFilled.prototype.getFlotPairs = function (fillStyle) {
     var result = [];
 
+    this.info.total = 0;
+    this.info.max = null;
+    this.info.min = 212312321312;
+
     _.each(this.datapoints, function(valueArray) {
       var currentTime = valueArray[1];
       var currentValue = valueArray[0];
@@ -53,8 +33,23 @@ function (_) {
         }
       }
 
+      if (_.isNumber(currentValue)) {
+        this.info.total += currentValue;
+      }
+
+      if (currentValue > this.info.max) {
+        this.info.max = currentValue;
+      }
+
+      if (currentValue < this.info.min) {
+        this.info.min = currentValue;
+      }
+
       result.push([currentTime * 1000, currentValue]);
-    });
+    }, this);
+
+    this.info.avg = this.info.total / result.length;
+    this.info.current = result[result.length-1][1];
 
     return result;
   };