Merge pull request #55 from flant/revisit_data_handler

fix: calculate cardWidth over max datapoints for target

dist/color_legend.js

@@ -326,7 +326,7 @@ System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic
 
 
       /**
-       * Color legend for heatmap editor.
+       * Bigger color legend for opacity and spectrum modes editor.
        */
       mod.directive('optionsColorLegend', function () {
         return {
@@ -360,7 +360,7 @@ System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic
       });
 
       /**
-       * Heatmap legend with scale values.
+       * Graph legend with values.
        */
       mod.directive('statusHeatmapLegend', function () {
         return {

dist/rendering.js

@@ -243,6 +243,7 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
       yAxisWidth = getYAxisWidth(heatmap) + Y_AXIS_TICK_PADDING;
       chartWidth = width - yAxisWidth - margin.right;
 
+      // TODO allow per-y cardWidth!
       // we need to fill chartWidth with xBucketSize cards.
       xGridSize = chartWidth / (cardsData.xBucketSize + 1);
       cardWidth = xGridSize - cardHSpacing;

dist/status_heatmap_ctrl.js

@@ -262,46 +262,49 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
               maxValue: 0,
               minValue: 0,
               multipleValues: false,
-              noColorDefined: false
+              noColorDefined: false,
+              targets: [], // array of available unique targets
+              targetIndex: {} // indices in data array for each of available unique targets
             };
 
             if (!data || data.length == 0) {
               return cardsData;
             }
 
-            // collect uniq targets and their indexes in data array
+            // Collect uniq timestamps from data and spread over targets and timestamps
-            cardsData.targetIndex = {};
+
-            for (var i = 0; i < data.length; i++) {
+            // collect uniq targets and their indices
-              var ts = data[i];
+            _.map(data, function (d, i) {
-              var target = ts.target;
+              cardsData.targetIndex[d.target] = _.concat(_.toArray(cardsData.targetIndex[d.target]), i);
-              if (cardsData.targetIndex[target] == undefined) {
+            });
-                cardsData.targetIndex[target] = [];
-              }
-              cardsData.targetIndex[target].push(i);
-            }
 
             // TODO add some logic for targets heirarchy
             cardsData.targets = _.keys(cardsData.targetIndex);
             cardsData.yBucketSize = cardsData.targets.length;
-            cardsData.xBucketSize = _.min(_.map(data, function (d) {
+            // Maximum number of buckets over x axis
+            cardsData.xBucketSize = _.max(_.map(data, function (d) {
               return d.datapoints.length;
             }));
 
             // Collect all values for each bucket from datapoints with similar target.
-            for (var _i = 0; _i < cardsData.targets.length; _i++) {
+            // TODO aggregate values into buckets over datapoint[TIME_INDEX] not over datapoint index (j).
-              var _target = cardsData.targets[_i];
+            for (var i = 0; i < cardsData.targets.length; i++) {
+              var target = cardsData.targets[i];
 
               for (var j = 0; j < cardsData.xBucketSize; j++) {
                 var card = {
-                  id: _i * cardsData.xBucketSize + j,
+                  id: i * cardsData.xBucketSize + j,
                   values: [],
                   multipleValues: false,
                   noColorDefined: false
                 };
 
                 // collect values from all timeseries with target
-                for (var si = 0; si < cardsData.targetIndex[_target].length; si++) {
+                for (var si = 0; si < cardsData.targetIndex[target].length; si++) {
-                  var s = data[cardsData.targetIndex[_target][si]];
+                  var s = data[cardsData.targetIndex[target][si]];
+                  if (s.datapoints.length <= j) {
+                    continue;
+                  }
                   var datapoint = s.datapoints[j];
                   if (card.values.length === 0) {
                     card.x = datapoint[TIME_INDEX];

src/color_legend.js

@@ -11,7 +11,7 @@ let mod = angular.module('grafana.directives');
 const LEGEND_STEP_WIDTH = 2;
 
 /**
- * Color legend for heatmap editor.
+ * Bigger color legend for opacity and spectrum modes editor.
  */
 mod.directive('optionsColorLegend', function() {
   return {
@@ -45,7 +45,7 @@ mod.directive('optionsColorLegend', function() {
 });
 
 /**
- * Heatmap legend with scale values.
+ * Graph legend with values.
  */
 mod.directive('statusHeatmapLegend', function() {
   return {

src/rendering.js

@@ -254,6 +254,7 @@ export default function link(scope, elem, attrs, ctrl) {
     yAxisWidth = getYAxisWidth(heatmap) + Y_AXIS_TICK_PADDING;
     chartWidth = width - yAxisWidth - margin.right;
 
+    // TODO allow per-y cardWidth!
     // we need to fill chartWidth with xBucketSize cards.
     xGridSize = chartWidth / (cardsData.xBucketSize+1);
     cardWidth = xGridSize - cardHSpacing;

src/status_heatmap_ctrl.js

@@ -283,27 +283,27 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
       minValue: 0,
       multipleValues: false,
       noColorDefined: false,
+      targets: [], // array of available unique targets
+      targetIndex: {} // indices in data array for each of available unique targets
     };
 
     if (!data || data.length == 0) { return cardsData;}
 
-    // collect uniq targets and their indexes in data array
+    // Collect uniq timestamps from data and spread over targets and timestamps
-    cardsData.targetIndex = {};
+
-    for (let i = 0; i < data.length; i++) {
+    // collect uniq targets and their indices
-      let ts = data[i];
+    _.map(data, (d, i) => {
-      let target = ts.target;
+      cardsData.targetIndex[d.target] = _.concat(_.toArray(cardsData.targetIndex[d.target]), i)
-      if (cardsData.targetIndex[target] == undefined) {
+    });
-        cardsData.targetIndex[target] = []
-      }
-      cardsData.targetIndex[target].push(i);
-    }
 
     // TODO add some logic for targets heirarchy
     cardsData.targets = _.keys(cardsData.targetIndex);
     cardsData.yBucketSize = cardsData.targets.length;
-    cardsData.xBucketSize = _.min(_.map(data, d => d.datapoints.length));
+    // Maximum number of buckets over x axis
+    cardsData.xBucketSize = _.max(_.map(data, d => d.datapoints.length));
 
     // Collect all values for each bucket from datapoints with similar target.
+    // TODO aggregate values into buckets over datapoint[TIME_INDEX] not over datapoint index (j).
     for(let i = 0; i < cardsData.targets.length; i++) {
       let target = cardsData.targets[i];
 
@@ -318,6 +318,9 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
         // collect values from all timeseries with target
         for (let si = 0; si < cardsData.targetIndex[target].length; si++) {
           let s = data[cardsData.targetIndex[target][si]];
+          if (s.datapoints.length <= j) {
+            continue;
+          }
           let datapoint = s.datapoints[j];
           if (card.values.length === 0) {
             card.x = datapoint[TIME_INDEX];