From f447993bde0e2777e19eab0cde2712e2e241fbc1 Mon Sep 17 00:00:00 2001
From: Ivan Mikheykin <ivan.mikheykin@flant.com>
Date: Thu, 6 Sep 2018 19:23:49 +0300
Subject: [PATCH] card width bind to panelWidth

---
 src/status_heatmap_ctrl.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/status_heatmap_ctrl.js b/src/status_heatmap_ctrl.js
index 9672b81..6cf3811 100644
--- a/src/status_heatmap_ctrl.js
+++ b/src/status_heatmap_ctrl.js
@@ -142,17 +142,23 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
 
   // 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 panelWidth = Math.ceil($(window).width() * (this.panel.gridPos.w / 24));
+    // approximate chartWidth because y axis ticks not rendered yet on first data receive.
+    let chartWidth = _.max([
+        panelWidth - 200,
+        panelWidth/2
+      ]);
 
     let minCardWidth = this.panel.cards.cardMinWidth;
     let minSpacing = this.panel.cards.cardSpacing;
     let maxCardsCount = Math.ceil((chartWidth-minCardWidth) / (minCardWidth + minSpacing));
 
+    console.log("CALC INT", {
+      "chartWidth": chartWidth,
+      "panelWidth": panelWidth,
+      "maxCardsCount": maxCardsCount,
+    });
+
     let intervalMs;
     let rangeMs = this.range.to.valueOf() - this.range.from.valueOf();