work in progress for legend values

e0a35a39 · Torkel Ödegaard · d9ec9ed1 · e0a35a39 · e0a35a39 · e0a35a39
Commit e0a35a39 authored Feb 06, 2014 by Torkel Ödegaard
6 changed files
--- a/src/app/dashboards/default.json
+++ b/src/app/dashboards/default.json
@@ -46,39 +46,12 @@
          "x-axis": true,
          "y-axis": true,
          "scale": 1,
-          "y_format": "none",
+          "y_formats": ["short", "short"],
-          "y2_format": "none",
          "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,

--- a/src/app/directives/grafanaGraph.js
+++ b/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);
+            var _d = data[i].getFlotPairs(scope.panel.nullPointMode);
-            data[i].yaxis = data[i].info.yaxis;
            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);

--- a/src/app/panels/graphite/axisEditor.html
+++ b/src/app/panels/graphite/axisEditor.html
 <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">

--- a/src/app/panels/graphite/legend.html
+++ b/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>

--- a/src/app/panels/graphite/module.js
+++ b/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',
+      y_formats    : ['short', 'short'],
-      y2_format   : '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);
+        var series = new timeSeries.ZeroFilled({
+          datapoints: targetData.datapoints,
-        data.push({
          info: seriesInfo,
-          time_series: time_series,
        });
+        $scope.legend.push(seriesInfo);
+        data.push(series);
      });
      $scope.render(data);

--- a/src/app/panels/graphite/timeSeries.js
+++ b/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;
  };