Merge pull request #51 from flant/fix_grafana_hangs

Fix grafana hangs and h spacing = 0

dist/color_legend.js

@@ -3,7 +3,7 @@
 System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic/index', 'app/core/core', 'app/core/utils/ticks'], function (_export, _context) {
   "use strict";
 
-  var angular, _, $, d3, d3ScaleChromatic, contextSrv, tickStep, mod, MIN_LEGEND_STEPS;
+  var angular, _, $, d3, d3ScaleChromatic, contextSrv, tickStep, mod, LEGEND_STEP_WIDTH;
 
   function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minValue) {
     var legendElem = $(elem).find('svg');
@@ -13,24 +13,29 @@ System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic
     var legendWidth = Math.floor(legendElem.outerWidth()) - 30; // narrow legendWidth by 30px to get space for first and last tick values
     var legendHeight = legendElem.attr("height");
 
-    var rangeStep = 1;
-    if (rangeTo - rangeFrom > legendWidth) {
-      rangeStep = Math.floor((rangeTo - rangeFrom) / legendWidth);
-    }
-
-    if (rangeStep * MIN_LEGEND_STEPS > rangeTo) {
-      rangeStep = rangeTo / MIN_LEGEND_STEPS;
-    }
-
+    var rangeStep = (rangeTo - rangeFrom) / (legendWidth / LEGEND_STEP_WIDTH);
+    // width in pixels in legend space of unit segment in range space
+    // rangeStep * witdhFactor == width in pixels of one rangeStep
     var widthFactor = legendWidth / (rangeTo - rangeFrom);
     var valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
 
+    // console.debug({
+    //   "rangeStep": rangeStep,
+    //   "widthFactor": widthFactor,
+    //   "legendWidth": legendWidth,
+    //   "steps": (rangeTo - rangeFrom)/rangeStep,
+    // });
+    // console.debug(valuesRange);
+
     var colorScale = getColorScale(colorScheme, maxValue, minValue);
-    legend.selectAll(".status-heatmap-color-legend-rect").data(valuesRange).enter().append("rect").attr("x", function (d) {
+    legend.selectAll(".status-heatmap-color-legend-rect").data(valuesRange).enter().append("rect")
+    // translate from range space into pixels
+    // and shift all rectangles to the right by 10
+    .attr("x", function (d) {
       return d * widthFactor + 10;
-    }) // shift all color rectangles to the right
-    .attr("y", 0).attr("width", rangeStep * widthFactor + 1) // Overlap rectangles to prevent gaps
-    .attr("height", legendHeight).attr("stroke-width", 0).attr("fill", function (d) {
+    }).attr("y", 0)
+    // rectangles are slightly overlaped to prevent gaps
+    .attr("width", LEGEND_STEP_WIDTH + 1).attr("height", legendHeight).attr("stroke-width", 0).attr("fill", function (d) {
       return colorScale(d);
     });
 
@@ -45,20 +50,21 @@ System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic
     var legendWidth = Math.floor(legendElem.outerWidth()) - 30; // narrow legendWidth by 30px to get space for first and last tick values
     var legendHeight = legendElem.attr("height");
 
-    var rangeStep = 10;
+    var rangeStep = (rangeTo - rangeFrom) / (legendWidth / LEGEND_STEP_WIDTH);
+    // width in pixels in legend space of unit segment in range space
+    // rangeStep * witdhFactor == width in pixels of one rangeStep
     var widthFactor = legendWidth / (rangeTo - rangeFrom);
-
-    if (rangeStep * MIN_LEGEND_STEPS > rangeTo) {
-      rangeStep = rangeTo / MIN_LEGEND_STEPS;
-    }
-
     var valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
 
     var opacityScale = getOpacityScale(options, maxValue, minValue);
-    legend.selectAll(".status-heatmap-opacity-legend-rect").data(valuesRange).enter().append("rect").attr("x", function (d) {
+    legend.selectAll(".status-heatmap-opacity-legend-rect").data(valuesRange).enter().append("rect")
+    // translate from range space into pixels
+    // and shift all rectangles to the right by 10
+    .attr("x", function (d) {
       return d * widthFactor + 10;
-    }) // shift all opacity rectangles to the right
-    .attr("y", 0).attr("width", rangeStep * widthFactor).attr("height", legendHeight).attr("stroke-width", 0).attr("fill", options.cardColor).style("opacity", function (d) {
+    }).attr("y", 0)
+    // rectangles are slightly overlaped to prevent gaps
+    .attr("width", LEGEND_STEP_WIDTH + 1).attr("height", legendHeight).attr("stroke-width", 0).attr("fill", options.cardColor).style("opacity", function (d) {
       return opacityScale(d);
     });
 
@@ -180,22 +186,18 @@ System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic
 
   function drawSimpleColorLegend(elem, colorScale) {
     var legendElem = $(elem).find('svg');
+    var legend = d3.select(legendElem.get(0));
     clearLegend(elem);
 
     var legendWidth = Math.floor(legendElem.outerWidth());
     var legendHeight = legendElem.attr("height");
 
     if (legendWidth) {
-      var valuesNumber = Math.floor(legendWidth / 2);
-      var rangeStep = Math.floor(legendWidth / valuesNumber);
-      var valuesRange = d3.range(0, legendWidth, rangeStep);
+      var valuesRange = d3.range(0, legendWidth, LEGEND_STEP_WIDTH);
 
-      var legend = d3.select(legendElem.get(0));
-      var legendRects = legend.selectAll(".status-heatmap-color-legend-rect").data(valuesRange);
-
-      legendRects.enter().append("rect").attr("x", function (d) {
+      legend.selectAll(".status-heatmap-color-legend-rect").data(valuesRange).enter().append("rect").attr("x", function (d) {
         return d;
-      }).attr("y", 0).attr("width", rangeStep + 1) // Overlap rectangles to prevent gaps
+      }).attr("y", 0).attr("width", LEGEND_STEP_WIDTH + 1) // Overlap rectangles to prevent gaps
       .attr("height", legendHeight).attr("stroke-width", 0).attr("fill", function (d) {
         return colorScale(d);
       });
@@ -204,10 +206,9 @@ System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic
 
   function drawSimpleOpacityLegend(elem, options) {
     var legendElem = $(elem).find('svg');
-    var graphElem = $(elem);
+    var legend = d3.select(legendElem.get(0));
     clearLegend(elem);
 
-    var legend = d3.select(legendElem.get(0));
     var legendWidth = Math.floor(legendElem.outerWidth());
     var legendHeight = legendElem.attr("height");
 
@@ -219,13 +220,11 @@ System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic
         legendOpacityScale = d3.scalePow().exponent(options.exponent).domain([0, legendWidth]).range([0, 1]);
       }
 
-      var rangeStep = 10;
-      var valuesRange = d3.range(0, legendWidth, rangeStep);
-      var legendRects = legend.selectAll(".status-heatmap-opacity-legend-rect").data(valuesRange);
+      var valuesRange = d3.range(0, legendWidth, LEGEND_STEP_WIDTH);
 
-      legendRects.enter().append("rect").attr("x", function (d) {
+      legend.selectAll(".status-heatmap-opacity-legend-rect").data(valuesRange).enter().append("rect").attr("x", function (d) {
         return d;
-      }).attr("y", 0).attr("width", rangeStep).attr("height", legendHeight).attr("stroke-width", 0).attr("fill", options.cardColor).style("opacity", function (d) {
+      }).attr("y", 0).attr("width", LEGEND_STEP_WIDTH + 1).attr("height", legendHeight).attr("stroke-width", 0).attr("fill", options.cardColor).style("opacity", function (d) {
         return legendOpacityScale(d);
       });
     }
@@ -331,7 +330,7 @@ System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic
     }],
     execute: function () {
       mod = angular.module('grafana.directives');
-      MIN_LEGEND_STEPS = 10;
+      LEGEND_STEP_WIDTH = 2;
 
 
       /**
@@ -386,6 +385,9 @@ System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic
 
             function render() {
               clearLegend(elem);
+              if (!ctrl.panel.legend.show) {
+                return;
+              }
               if (!_.isEmpty(ctrl.cardsData) && !_.isEmpty(ctrl.cardsData.cards)) {
                 var rangeFrom = ctrl.cardsData.minValue;
                 var rangeTo = ctrl.cardsData.maxValue;

dist/css/statusmap.dark.css

@@ -1,5 +1,7 @@
 .status-heatmap-canvas-wrapper {
   cursor: crosshair; }
+  .status-heatmap-canvas-wrapper .datapoints-warning {
+    pointer-events: none; }
   .status-heatmap-canvas-wrapper .datapoints-warning span {
     background-color: #333333;
     color: #d8d9da;

dist/css/statusmap.dark.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAEjB,uDAAyB;IACzB,gBAAgB,ECDL,OAAO;IDElB,KAAK,ECLM,OAAO;IDMlB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,ECfG,OAAO;IDgBd,KAAK,EChBE,OAAO;IDiBd,SAAS,EEjBE,IAAI;EFoBjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECrBM,OAAO;ED0BvB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EEvCI,IAAI;EFwCjB,gBAAgB,ECrCC,OAAO;EDsCxB,KAAK,ECxCM,OAAO;ED0ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,8CAA8C;;AAI/D,yBAA0B;EACxB,IAAI,EClDY,OAAO;;ADsDvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAIlC,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxFG,OAAO;IDyFd,KAAK,ECzFE,OAAO;ID0Fd,SAAS,EE1FE,IAAI;EF6FjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9FM,OAAO;EDiGrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnGM,OAAO",
+"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAGjB,kDAAoB;IAClB,cAAc,EAAE,IAAI;EAGtB,uDAAyB;IACzB,gBAAgB,ECNL,OAAO;IDOlB,KAAK,ECVM,OAAO;IDWlB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,ECpBG,OAAO;IDqBd,KAAK,ECrBE,OAAO;IDsBd,SAAS,EEtBE,IAAI;EFyBjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC1BM,OAAO;ED+BvB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EE5CI,IAAI;EF6CjB,gBAAgB,EC1CC,OAAO;ED2CxB,KAAK,EC7CM,OAAO;ED+ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,8CAA8C;;AAI/D,yBAA0B;EACxB,IAAI,ECvDY,OAAO;;AD2DvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAIlC,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,EC7FG,OAAO;ID8Fd,KAAK,EC9FE,OAAO;ID+Fd,SAAS,EE/FE,IAAI;EFkGjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECnGM,OAAO;EDsGrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECxGM,OAAO",
 "sources": ["../../src/css/_statusmap.scss","../../src/css/_variables.dark.scss","../../src/css/_variables.scss"],
 "names": [],
 "file": "statusmap.dark.css"

dist/css/statusmap.light.css

@@ -1,5 +1,7 @@
 .status-heatmap-canvas-wrapper {
   cursor: crosshair; }
+  .status-heatmap-canvas-wrapper .datapoints-warning {
+    pointer-events: none; }
   .status-heatmap-canvas-wrapper .datapoints-warning span {
     background-color: #e9edf2;
     color: #52545c;

dist/css/statusmap.light.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAEjB,uDAAyB;IACzB,gBAAgB,ECDL,OAAO;IDElB,KAAK,ECLM,OAAO;IDMlB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,ECfG,OAAO;IDgBd,KAAK,EChBE,OAAO;IDiBd,SAAS,EEjBE,IAAI;EFoBjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECrBM,OAAO;ED0BvB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EEvCI,IAAI;EFwCjB,gBAAgB,ECrCC,OAAO;EDsCxB,KAAK,ECxCM,OAAO;ED0ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,8CAA8C;;AAI/D,yBAA0B;EACxB,IAAI,EClDY,OAAO;;ADsDvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAIlC,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxFG,OAAO;IDyFd,KAAK,ECzFE,OAAO;ID0Fd,SAAS,EE1FE,IAAI;EF6FjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9FM,OAAO;EDiGrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnGM,OAAO",
+"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAGjB,kDAAoB;IAClB,cAAc,EAAE,IAAI;EAGtB,uDAAyB;IACzB,gBAAgB,ECNL,OAAO;IDOlB,KAAK,ECVM,OAAO;IDWlB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,ECpBG,OAAO;IDqBd,KAAK,ECrBE,OAAO;IDsBd,SAAS,EEtBE,IAAI;EFyBjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC1BM,OAAO;ED+BvB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EE5CI,IAAI;EF6CjB,gBAAgB,EC1CC,OAAO;ED2CxB,KAAK,EC7CM,OAAO;ED+ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,8CAA8C;;AAI/D,yBAA0B;EACxB,IAAI,ECvDY,OAAO;;AD2DvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAIlC,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,EC7FG,OAAO;ID8Fd,KAAK,EC9FE,OAAO;ID+Fd,SAAS,EE/FE,IAAI;EFkGjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECnGM,OAAO;EDsGrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECxGM,OAAO",
 "sources": ["../../src/css/_statusmap.scss","../../src/css/_variables.light.scss","../../src/css/_variables.scss"],
 "names": [],
 "file": "statusmap.light.css"

dist/module.html

@@ -1,7 +1,7 @@
 <div class="status-heatmap-wrapper">
 	<div class="status-heatmap-canvas-wrapper">
 
-		<div class="datapoints-warning">
+		<div class="datapoints-warning"  ng-if="ctrl.multipleValues || ctrl.noColorDefined">
 			<span class="small" ng-if="ctrl.multipleValues" bs-tooltip="'{{ctrl.dataWarnings.multipleValues.tip}}'">{{ctrl.dataWarnings.multipleValues.title}}</span>
 			<span class="small" ng-if="ctrl.noColorDefined" bs-tooltip="'{{ctrl.dataWarnings.noColorDefined.tip}}'">{{ctrl.dataWarnings.noColorDefined.title}}</span>
 		</div>

dist/partials/options_editor.html

@@ -190,7 +190,7 @@
     </div>
     <div class="gf-form">
       <label class="gf-form-label width-9">Rounding</label>
-      <input type="number" class="gf-form-input width-5" placeholder="0" data-placement="right" bs-tooltip="'Angles rounding in percent'" ng-model="ctrl.panel.cards.cardRound" ng-change="ctrl.refresh()" ng-model-onblur>
+      <input type="number" class="gf-form-input width-5" placeholder="0" data-placement="right" bs-tooltip="'Cards rounding radius in pixels'" ng-model="ctrl.panel.cards.cardRound" ng-change="ctrl.refresh()" ng-model-onblur>
     </div>
   </div>
 

dist/rendering.js

@@ -363,6 +363,10 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
       // Card width should be MIN_CARD_SIZE at least
       w = Math.max(w, MIN_CARD_SIZE);
 
+      if (cardHSpacing == 0) {
+        w = w + 1;
+      }
+
       return w;
     }
 
@@ -389,6 +393,10 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
       // Card height should be MIN_CARD_SIZE at least
       h = Math.max(h, MIN_CARD_SIZE);
 
+      if (cardVSpacing == 0) {
+        h = h + 1;
+      }
+
       return h;
     }
 

src/color_legend.js

@@ -8,7 +8,7 @@ import {tickStep} from 'app/core/utils/ticks';
 
 let mod = angular.module('grafana.directives');
 
-const MIN_LEGEND_STEPS = 10;
+const LEGEND_STEP_WIDTH = 2;
 
 /**
  * Color legend for heatmap editor.
@@ -62,6 +62,9 @@ mod.directive('statusHeatmapLegend', function() {
 
       function render() {
         clearLegend(elem);
+        if (!ctrl.panel.legend.show) {
+          return 
+        }
         if (!_.isEmpty(ctrl.cardsData) && !_.isEmpty(ctrl.cardsData.cards)) {
           let rangeFrom = ctrl.cardsData.minValue;
           let rangeTo = ctrl.cardsData.maxValue;
@@ -92,25 +95,30 @@ function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minVal
   let legendWidth = Math.floor(legendElem.outerWidth()) - 30;  // narrow legendWidth by 30px to get space for first and last tick values
   let legendHeight = legendElem.attr("height");
 
-  let rangeStep = 1;
-  if (rangeTo - rangeFrom > legendWidth) {
-    rangeStep = Math.floor((rangeTo - rangeFrom) / legendWidth);
-  }
-
-  if (rangeStep * MIN_LEGEND_STEPS > rangeTo) {
-    rangeStep = rangeTo / MIN_LEGEND_STEPS;
-  }
-
+  let rangeStep = (rangeTo - rangeFrom) / (legendWidth/LEGEND_STEP_WIDTH);
+  // width in pixels in legend space of unit segment in range space
+  // rangeStep * witdhFactor == width in pixels of one rangeStep
   let widthFactor = legendWidth / (rangeTo - rangeFrom);
   let valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
 
+  // console.debug({
+  //   "rangeStep": rangeStep,
+  //   "widthFactor": widthFactor,
+  //   "legendWidth": legendWidth,
+  //   "steps": (rangeTo - rangeFrom)/rangeStep,
+  // });
+  // console.debug(valuesRange);
+
   let colorScale = getColorScale(colorScheme, maxValue, minValue);
   legend.selectAll(".status-heatmap-color-legend-rect")
     .data(valuesRange)
     .enter().append("rect")
-    .attr("x", d => d * widthFactor + 10) // shift all color rectangles to the right
+    // translate from range space into pixels
+    // and shift all rectangles to the right by 10
+    .attr("x", d => d * widthFactor+10)
     .attr("y", 0)
-    .attr("width", rangeStep * widthFactor + 1) // Overlap rectangles to prevent gaps
+    // rectangles are slightly overlaped to prevent gaps
+    .attr("width", LEGEND_STEP_WIDTH+1)
     .attr("height", legendHeight)
     .attr("stroke-width", 0)
     .attr("fill", d => colorScale(d));
@@ -126,22 +134,22 @@ function drawOpacityLegend(elem, options, rangeFrom, rangeTo, maxValue, minValue
   let legendWidth = Math.floor(legendElem.outerWidth()) - 30;  // narrow legendWidth by 30px to get space for first and last tick values
   let legendHeight = legendElem.attr("height");
 
-  let rangeStep = 10;
+  let rangeStep = (rangeTo - rangeFrom) / (legendWidth/LEGEND_STEP_WIDTH);
+  // width in pixels in legend space of unit segment in range space
+  // rangeStep * witdhFactor == width in pixels of one rangeStep
   let widthFactor = legendWidth / (rangeTo - rangeFrom);
-
-  if (rangeStep * MIN_LEGEND_STEPS > rangeTo) {
-    rangeStep = rangeTo / MIN_LEGEND_STEPS;
-  }
-
   let valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
 
   let opacityScale = getOpacityScale(options, maxValue, minValue);
   legend.selectAll(".status-heatmap-opacity-legend-rect")
     .data(valuesRange)
     .enter().append("rect")
-    .attr("x", d => d * widthFactor + 10) // shift all opacity rectangles to the right
+    // translate from range space into pixels
+    // and shift all rectangles to the right by 10
+    .attr("x", d => d * widthFactor+10)
     .attr("y", 0)
-    .attr("width", rangeStep * widthFactor)
+    // rectangles are slightly overlaped to prevent gaps
+    .attr("width", LEGEND_STEP_WIDTH+1)
     .attr("height", legendHeight)
     .attr("stroke-width", 0)
     .attr("fill", options.cardColor)
@@ -289,23 +297,21 @@ function drawDiscreteLegendValues(elem, colorOptions, legendWidth) {
 
 function drawSimpleColorLegend(elem, colorScale) {
   let legendElem = $(elem).find('svg');
+  let legend = d3.select(legendElem.get(0));
   clearLegend(elem);
 
   let legendWidth = Math.floor(legendElem.outerWidth());
   let legendHeight = legendElem.attr("height");
 
   if (legendWidth) {
-    let valuesNumber = Math.floor(legendWidth / 2);
-    let rangeStep  = Math.floor(legendWidth / valuesNumber);
-    let valuesRange = d3.range(0, legendWidth, rangeStep);
+    let valuesRange = d3.range(0, legendWidth, LEGEND_STEP_WIDTH);
 
-    let legend = d3.select(legendElem.get(0));
-    var legendRects = legend.selectAll(".status-heatmap-color-legend-rect").data(valuesRange);
-
-    legendRects.enter().append("rect")
+    legend.selectAll(".status-heatmap-color-legend-rect")
+      .data(valuesRange)
+      .enter().append("rect")
       .attr("x", d => d)
       .attr("y", 0)
-      .attr("width", rangeStep + 1) // Overlap rectangles to prevent gaps
+      .attr("width", LEGEND_STEP_WIDTH + 1) // Overlap rectangles to prevent gaps
       .attr("height", legendHeight)
       .attr("stroke-width", 0)
       .attr("fill", d => colorScale(d));
@@ -314,10 +320,9 @@ function drawSimpleColorLegend(elem, colorScale) {
 
 function drawSimpleOpacityLegend(elem, options) {
   let legendElem = $(elem).find('svg');
-  let graphElem = $(elem);
+  let legend = d3.select(legendElem.get(0));
   clearLegend(elem);
 
-  let legend = d3.select(legendElem.get(0));
   let legendWidth = Math.floor(legendElem.outerWidth());
   let legendHeight = legendElem.attr("height");
 
@@ -333,14 +338,14 @@ function drawSimpleOpacityLegend(elem, options) {
       .range([0, 1]);
     }
 
-    let rangeStep = 10;
-    let valuesRange = d3.range(0, legendWidth, rangeStep);
-    var legendRects = legend.selectAll(".status-heatmap-opacity-legend-rect").data(valuesRange);
+    let valuesRange = d3.range(0, legendWidth, LEGEND_STEP_WIDTH);
 
-    legendRects.enter().append("rect")
+    legend.selectAll(".status-heatmap-opacity-legend-rect")
+      .data(valuesRange)
+      .enter().append("rect")
       .attr("x", d => d)
       .attr("y", 0)
-      .attr("width", rangeStep)
+      .attr("width", LEGEND_STEP_WIDTH+1)
       .attr("height", legendHeight)
       .attr("stroke-width", 0)
       .attr("fill", options.cardColor)

src/css/_statusmap.scss

@@ -2,6 +2,11 @@
   // position: relative;
   cursor: crosshair;
 
+  // allow tooltips on hover of warning text
+  .datapoints-warning {
+    pointer-events: none;
+  }
+
   .datapoints-warning span {
   background-color: $warning-bg;
   color: $text-color;

src/module.html

@@ -1,7 +1,7 @@
 <div class="status-heatmap-wrapper">
 	<div class="status-heatmap-canvas-wrapper">
 
-		<div class="datapoints-warning">
+		<div class="datapoints-warning"  ng-if="ctrl.multipleValues || ctrl.noColorDefined">
 			<span class="small" ng-if="ctrl.multipleValues" bs-tooltip="'{{ctrl.dataWarnings.multipleValues.tip}}'">{{ctrl.dataWarnings.multipleValues.title}}</span>
 			<span class="small" ng-if="ctrl.noColorDefined" bs-tooltip="'{{ctrl.dataWarnings.noColorDefined.tip}}'">{{ctrl.dataWarnings.noColorDefined.title}}</span>
 		</div>

src/partials/options_editor.html

@@ -190,7 +190,7 @@
     </div>
     <div class="gf-form">
       <label class="gf-form-label width-9">Rounding</label>
-      <input type="number" class="gf-form-input width-5" placeholder="0" data-placement="right" bs-tooltip="'Angles rounding in percent'" ng-model="ctrl.panel.cards.cardRound" ng-change="ctrl.refresh()" ng-model-onblur>
+      <input type="number" class="gf-form-input width-5" placeholder="0" data-placement="right" bs-tooltip="'Cards rounding radius in pixels'" ng-model="ctrl.panel.cards.cardRound" ng-change="ctrl.refresh()" ng-model-onblur>
     </div>
   </div>
 

src/rendering.js

@@ -394,6 +394,10 @@ export default function link(scope, elem, attrs, ctrl) {
     // Card width should be MIN_CARD_SIZE at least
     w = Math.max(w, MIN_CARD_SIZE);
 
+    if (cardHSpacing == 0) {
+      w = w+1;
+    }
+
     return w;
   }
 
@@ -420,6 +424,10 @@ export default function link(scope, elem, attrs, ctrl) {
     // Card height should be MIN_CARD_SIZE at least
     h = Math.max(h, MIN_CARD_SIZE);
 
+    if (cardVSpacing == 0) {
+      h = h+1
+    }
+
     return h;
   }