fix: calculate cardWidth over max datapoints for target

- correct render of inconsistent timestamps between targets

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
-    cardsData.targetIndex = {};
-    for (let i = 0; i < data.length; i++) {
-      let ts = data[i];
-      let target = ts.target;
-      if (cardsData.targetIndex[target] == undefined) {
-        cardsData.targetIndex[target] = []
-      }
-      cardsData.targetIndex[target].push(i);
-    }
+    // Collect uniq timestamps from data and spread over targets and timestamps
+
+    // collect uniq targets and their indices
+    _.map(data, (d, i) => {
+      cardsData.targetIndex[d.target] = _.concat(_.toArray(cardsData.targetIndex[d.target]), 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];