override interval to specify minimal card width

src/color_mode_discrete.js

@@ -87,4 +87,67 @@ export class ColorModeDiscrete {
     }
     return null;
   }
+
+  roundIntervalCeil(interval) {
+    switch (true) {
+      case interval <= 10:
+        return 10; // 0.01s
+      case interval <= 20:
+        return 20; // 0.02s
+      case interval <= 50:
+        return 50; // 0.05s
+      case interval <= 100:
+        return 100; // 0.1s
+      case interval <= 200:
+        return 200; // 0.2s
+      case interval <= 500:
+        return 500; // 0.5s
+      case interval <= 1000:
+        return 1000; // 1s
+      case interval <= 2000:
+        return 2000; // 2s
+      case interval <= 5000:
+        return 5000; // 5s
+      case interval <= 10000:
+        return 10000; // 10s
+      case interval <= 15000:
+        return 15000; // 15s
+      case interval <= 20000:
+        return 20000; // 20s
+      case interval <= 30000:
+        return 30000; // 30s
+      case interval <= 60000:
+        return 60000; // 1m
+      case interval <= 120000:
+        return 120000; // 2m
+      case interval <= 300000:
+        return 300000; // 5m
+      case interval <= 600000:
+        return 600000; // 10m
+      case interval <= 900000:
+        return 900000; // 15m
+      case interval <= 1200000:
+        return 1200000; // 20m
+      case interval <= 1800000:
+        return 1800000; // 30m
+      case interval <= 3600000:
+        return 3600000; // 1h
+      case interval <= 7200000:
+        return 7200000; // 2h
+      case interval <= 10800000:
+        return 10800000; // 3h
+      case interval <= 21600000:
+        return 21600000; // 6h
+      case interval <= 43200000:
+        return 43200000; // 12h
+      case interval <= 86400000:
+        return 86400000; // 1d
+      case interval <= 604800000:
+        return 604800000; // 1w
+      case interval <= 2592000000:
+        return 2592000000; // 30d
+      default:
+        return 31536000000; // 1y
+    }
+  }
 }

src/rendering.js

@@ -297,6 +297,10 @@ export default function link(scope, elem, attrs, ctrl) {
       tooltip.mouseOverBucket = false;
       resetCardHighLight(event);
     });
+
+    ctrl.events.emit('render-complete', {
+      "chartWidth": chartWidth
+    });
   }
 
   function highlightCard(event) {

src/status_heatmap_ctrl.js

@@ -105,6 +105,11 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.colorModes = colorModes;
     this.colorSchemes = colorSchemes;
 
+    // default graph width for discrete card width calculation
+    this.graph = {
+      "chartWidth" : -1
+    };
+
     this.multipleValues = false;
     this.noColorDefined = false;
 
@@ -127,8 +132,58 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.events.on('init-edit-mode', this.onInitEditMode);
     this.events.on('render', this.onRender);
     this.events.on('refresh', this.postRefresh);
+    this.events.on('render-complete', this.onRenderComplete);
   }
 
+  onRenderComplete = (data) => {
+    this.graph.chartWidth = data.chartWidth;
+  };
+
+  // override calculateInterval for discrete color mode
+  calculateInterval = () => {
+    let chartWidth = this.graph.chartWidth;
+
+    if (chartWidth == -1) {
+      // approximate panel width
+      chartWidth = Math.ceil($(window).width() * (this.panel.gridPos.w / 24));
+    }
+
+    let minCardWidth = 5;
+    let minSpacing = 2;
+    let maxCardsCount = Math.ceil(chartWidth / (minCardWidth + minSpacing));
+
+    let intervalMs;
+    let rangeMs = this.range.to.valueOf() - this.range.from.valueOf();
+
+    // this is minimal interval! kbn.round_interval will lower it.
+    intervalMs = this.discreteHelper.roundIntervalCeil(rangeMs / maxCardsCount);
+
+    // Calculate low limit of interval
+    let lowLimitMs = 1; // 1 millisecond default low limit
+    let intervalOverride = this.panel.interval;
+
+    // if no panel interval check datasource
+    if (intervalOverride) {
+      intervalOverride = this.templateSrv.replace(intervalOverride, this.panel.scopedVars);
+    } else if (this.datasource && this.datasource.interval) {
+      intervalOverride = this.datasource.interval;
+    }
+
+    if (intervalOverride) {
+      if (intervalOverride[0] === '>') {
+        intervalOverride = intervalOverride.slice(1);
+      }
+      lowLimitMs = kbn.interval_to_ms(intervalOverride);
+    }
+
+    if (lowLimitMs > intervalMs) {
+      intervalMs = lowLimitMs;
+    }
+
+    this.intervalMs = intervalMs;
+    this.interval = kbn.secondsToHms(intervalMs / 1000);
+  };
+
   onDataReceived = (dataList) => {
     this.data      = dataList;
     this.cardsData = this.convertToCards(this.data);
@@ -268,5 +323,4 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
 
     return cardsData;
   };
-
 }