From 43c6f749047275c9c1db192e88e08701930366f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 5 May 2017 12:33:04 +0200
Subject: [PATCH] heatmap: removed fill background, and highlight card options

---
 .../app/plugins/panel/heatmap/heatmap_ctrl.ts |   1 -
 .../plugins/panel/heatmap/heatmap_tooltip.ts  |   2 +-
 .../heatmap/partials/display_editor.html      |  26 ++-
 public/app/plugins/panel/heatmap/rendering.ts | 169 ++++++++----------
 4 files changed, 86 insertions(+), 112 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
index 8e4b5bc1e54..5600a5ea2e4 100644
--- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
@@ -25,7 +25,6 @@ let panelDefaults = {
     colorScale: 'sqrt',
     exponent: 0.5,
     colorScheme: 'interpolateOranges',
-    fillBackground: false
   },
   dataFormat: 'timeseries',
   xAxis: {
diff --git a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts
index c78fb35cfba..fe36112b859 100644
--- a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts
@@ -87,7 +87,7 @@ export class HeatmapTooltip {
     let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
       <div class="heatmap-histogram"></div>`;
 
-    if (yData) {
+    if (yData && yData.bounds) {
       boundBottom = valueFormatter(yData.bounds.bottom);
       boundTop = valueFormatter(yData.bounds.top);
       valuesNumber = yData.values.length;
diff --git a/public/app/plugins/panel/heatmap/partials/display_editor.html b/public/app/plugins/panel/heatmap/partials/display_editor.html
index 92409b3ad5e..a6d1de1981c 100644
--- a/public/app/plugins/panel/heatmap/partials/display_editor.html
+++ b/public/app/plugins/panel/heatmap/partials/display_editor.html
@@ -2,51 +2,49 @@
   <div class="section gf-form-group">
     <h5 class="section-heading">Colors</h5>
     <div class="gf-form">
-      <label class="gf-form-label width-7">Mode</label>
-      <div class="gf-form-select-wrapper width-12">
+      <label class="gf-form-label width-9">Mode</label>
+      <div class="gf-form-select-wrapper width-8">
         <select class="input-small gf-form-input" ng-model="ctrl.panel.color.mode" ng-options="s for s in ctrl.colorModes" ng-change="ctrl.render()"></select>
       </div>
     </div>
 
     <div ng-show="ctrl.panel.color.mode === 'opacity'">
       <div class="gf-form">
-        <label class="gf-form-label width-7">Color</label>
+        <label class="gf-form-label width-9">Color</label>
         <span class="gf-form-label">
           <spectrum-picker ng-model="ctrl.panel.color.cardColor" ng-change="ctrl.render()" ></spectrum-picker>
         </span>
       </div>
       <div class="gf-form">
-        <label class="gf-form-label width-7">Scale</label>
+        <label class="gf-form-label width-9">Scale</label>
         <div class="gf-form-select-wrapper width-8">
           <select class="input-small gf-form-input" ng-model="ctrl.panel.color.colorScale" ng-options="s for s in ctrl.opacityScales" ng-change="ctrl.render()"></select>
         </div>
       </div>
       <div class="gf-form" ng-if="ctrl.panel.color.colorScale === 'sqrt'">
-        <label class="gf-form-label width-7">Exponent</label>
+        <label class="gf-form-label width-9">Exponent</label>
         <input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right" bs-tooltip="''" ng-model="ctrl.panel.color.exponent" ng-change="ctrl.refresh()" ng-model-onblur>
       </div>
       <div class="gf-form">
-        <svg id="heatmap-opacity-legend" width="22.7em" height="2em"></svg>
+        <svg id="heatmap-opacity-legend" width="19em" height="2em"></svg>
       </div>
     </div>
 
     <div ng-show="ctrl.panel.color.mode === 'spectrum'">
       <div class="gf-form">
-        <label class="gf-form-label width-7">Scheme</label>
-        <div class="gf-form-select-wrapper width-12">
+        <label class="gf-form-label width-9">Scheme</label>
+        <div class="gf-form-select-wrapper width-8">
           <select class="input-small gf-form-input" ng-model="ctrl.panel.color.colorScheme" ng-options="s.value as s.name for s in ctrl.colorSchemes" ng-change="ctrl.render()"></select>
         </div>
       </div>
       <div class="gf-form">
-        <svg id="heatmap-color-legend" width="22.7em" height="2em"></svg>
+        <svg id="heatmap-color-legend" width="19em" height="2em"></svg>
       </div>
-      <gf-form-switch class="gf-form" label-class="width-9" label="Fill background" checked="ctrl.panel.color.fillBackground" on-change="ctrl.render()">
-			</gf-form-switch>
     </div>
   </div>
 
   <div class="section gf-form-group">
-    <h5 class="section-heading">Cards</h5>
+    <h5 class="section-heading">Buckets</h5>
     <div class="gf-form">
       <label class="gf-form-label width-8">Space</label>
       <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-model="ctrl.panel.cards.cardPadding" ng-change="ctrl.refresh()" ng-model-onblur>
@@ -64,10 +62,6 @@
       checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
     </gf-form-switch>
     <div ng-if="ctrl.panel.tooltip.show">
-      <gf-form-switch class="gf-form" label-class="width-8"
-        label="Highlight cards"
-        checked="ctrl.panel.highlightCards" on-change="ctrl.render()">
-      </gf-form-switch>
       <gf-form-switch class="gf-form" label-class="width-8"
         label="Series stats"
         checked="ctrl.panel.tooltip.seriesStat" on-change="ctrl.render()">
diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts
index a0f6786baf1..b822de2b068 100644
--- a/public/app/plugins/panel/heatmap/rendering.ts
+++ b/public/app/plugins/panel/heatmap/rendering.ts
@@ -376,10 +376,6 @@ export default function link(scope, elem, attrs, ctrl) {
     setOpacityScale(max_value);
     setCardSize();
 
-    if (panel.color.fillBackground && panel.color.mode === 'spectrum') {
-      fillBackground(heatmap, colorScale(0));
-    }
-
     let cards = heatmap.selectAll(".heatmap-card").data(cardsData);
     cards.append("title");
     cards = cards.enter().append("rect")
@@ -407,24 +403,20 @@ export default function link(scope, elem, attrs, ctrl) {
   }
 
   function highlightCard(event) {
-    if (panel.highlightCards) {
-      let color = d3.select(event.target).style("fill");
-      let highlightColor = d3.color(color).darker(2);
-      let strokeColor = d3.color(color).brighter(4);
-      let current_card = d3.select(event.target);
-      tooltip.originalFillColor = color;
-      current_card.style("fill", highlightColor)
-        .style("stroke", strokeColor)
-        .style("stroke-width", 1);
-    }
+    let color = d3.select(event.target).style("fill");
+    let highlightColor = d3.color(color).darker(2);
+    let strokeColor = d3.color(color).brighter(4);
+    let current_card = d3.select(event.target);
+    tooltip.originalFillColor = color;
+    current_card.style("fill", highlightColor)
+    .style("stroke", strokeColor)
+    .style("stroke-width", 1);
   }
 
   function resetCardHighLight(event) {
-    if (panel.highlightCards) {
-      d3.select(event.target).style("fill", tooltip.originalFillColor)
-        .style("stroke", tooltip.originalFillColor)
-        .style("stroke-width", 0);
-    }
+    d3.select(event.target).style("fill", tooltip.originalFillColor)
+    .style("stroke", tooltip.originalFillColor)
+    .style("stroke-width", 0);
   }
 
   function getColorScale(maxValue) {
@@ -442,12 +434,12 @@ export default function link(scope, elem, attrs, ctrl) {
   function setOpacityScale(max_value) {
     if (panel.color.colorScale === 'linear') {
       opacityScale = d3.scaleLinear()
-        .domain([0, max_value])
-        .range([0, 1]);
+      .domain([0, max_value])
+      .range([0, 1]);
     } else if (panel.color.colorScale === 'sqrt') {
       opacityScale = d3.scalePow().exponent(panel.color.exponent)
-        .domain([0, max_value])
-        .range([0, 1]);
+      .domain([0, max_value])
+      .range([0, 1]);
     }
   }
 
@@ -549,15 +541,6 @@ export default function link(scope, elem, attrs, ctrl) {
     }
   }
 
-  function fillBackground(heatmap, color) {
-    heatmap.insert("rect", "g")
-      .attr("x", yAxisWidth)
-      .attr("y", margin.top)
-      .attr("width", chartWidth)
-      .attr("height", chartHeight)
-      .attr("fill", color);
-  }
-
   /////////////////////////////
   // Selection and crosshair //
   /////////////////////////////
@@ -570,12 +553,12 @@ export default function link(scope, elem, attrs, ctrl) {
     if (ctrl.dashboard.graphTooltip === 2) {
       tooltip.show(event.pos, data);
     }
-  });
+  }, scope);
 
   appEvents.on('graph-hover-clear', () => {
     clearCrosshair();
     tooltip.destroy();
-  });
+  }, scope);
 
   function onMouseDown(event) {
     selection.active = true;
@@ -584,6 +567,7 @@ export default function link(scope, elem, attrs, ctrl) {
     mouseUpHandler = function() {
       onMouseUp();
     };
+
     $(document).one("mouseup", mouseUpHandler);
   }
 
@@ -660,11 +644,11 @@ export default function link(scope, elem, attrs, ctrl) {
 
       if (selectionWidth > MIN_SELECTION_WIDTH) {
         heatmap.append("rect")
-          .attr("class", "heatmap-selection")
-          .attr("x", selectionX)
-          .attr("width", selectionWidth)
-          .attr("y", chartTop)
-          .attr("height", chartHeight);
+        .attr("class", "heatmap-selection")
+        .attr("x", selectionX)
+        .attr("width", selectionWidth)
+        .attr("y", chartTop)
+        .attr("height", chartHeight);
       }
     }
   }
@@ -687,14 +671,14 @@ export default function link(scope, elem, attrs, ctrl) {
       posX = Math.min(posX, chartWidth + yAxisWidth);
 
       heatmap.append("g")
-        .attr("class", "heatmap-crosshair")
-        .attr("transform", "translate(" + posX + ",0)")
-        .append("line")
-        .attr("x1", 1)
-        .attr("y1", chartTop)
-        .attr("x2", 1)
-        .attr("y2", chartBottom)
-        .attr("stroke-width", 1);
+      .attr("class", "heatmap-crosshair")
+      .attr("transform", "translate(" + posX + ",0)")
+      .append("line")
+      .attr("x1", 1)
+      .attr("y1", chartTop)
+      .attr("x2", 1)
+      .attr("y2", chartBottom)
+      .attr("stroke-width", 1);
     }
   }
 
@@ -725,14 +709,14 @@ export default function link(scope, elem, attrs, ctrl) {
     var legendRects = legend.selectAll(".heatmap-color-legend-rect").data(valuesRange);
 
     legendRects.enter().append("rect")
-      .attr("x", d => d)
-      .attr("y", 0)
-      .attr("width", rangeStep + 1) // Overlap rectangles to prevent gaps
-      .attr("height", legendHeight)
-      .attr("stroke-width", 0)
-      .attr("fill", d => {
-        return legendColorScale(d);
-      });
+    .attr("x", d => d)
+    .attr("y", 0)
+    .attr("width", rangeStep + 1) // Overlap rectangles to prevent gaps
+    .attr("height", legendHeight)
+    .attr("stroke-width", 0)
+    .attr("fill", d => {
+      return legendColorScale(d);
+    });
   }
 
   function drawOpacityLegend() {
@@ -745,12 +729,12 @@ export default function link(scope, elem, attrs, ctrl) {
     let legendOpacityScale;
     if (panel.color.colorScale === 'linear') {
       legendOpacityScale = d3.scaleLinear()
-        .domain([0, legendWidth])
-        .range([0, 1]);
+      .domain([0, legendWidth])
+      .range([0, 1]);
     } else if (panel.color.colorScale === 'sqrt') {
       legendOpacityScale = d3.scalePow().exponent(panel.color.exponent)
-        .domain([0, legendWidth])
-        .range([0, 1]);
+      .domain([0, legendWidth])
+      .range([0, 1]);
     }
 
     let rangeStep = 1;
@@ -758,15 +742,15 @@ export default function link(scope, elem, attrs, ctrl) {
     var legendRects = legend.selectAll(".heatmap-opacity-legend-rect").data(valuesRange);
 
     legendRects.enter().append("rect")
-      .attr("x", d => d)
-      .attr("y", 0)
-      .attr("width", rangeStep)
-      .attr("height", legendHeight)
-      .attr("stroke-width", 0)
-      .attr("fill", panel.color.cardColor)
-      .style("opacity", d => {
-        return legendOpacityScale(d);
-      });
+    .attr("x", d => d)
+    .attr("y", 0)
+    .attr("width", rangeStep)
+    .attr("height", legendHeight)
+    .attr("stroke-width", 0)
+    .attr("fill", panel.color.cardColor)
+    .style("opacity", d => {
+      return legendOpacityScale(d);
+    });
   }
 
   function render() {
@@ -774,34 +758,26 @@ export default function link(scope, elem, attrs, ctrl) {
     panel = ctrl.panel;
     timeRange = ctrl.range;
 
-    if (setElementHeight()) {
-
-      if (data) {
-        // Draw default axes and return if no data
-        if (_.isEmpty(data.buckets)) {
-          addHeatmapCanvas();
-          addAxes();
-          return;
-        }
-
-        addHeatmap();
-        scope.yScale = yScale;
-        scope.xScale = xScale;
-        scope.yAxisWidth = yAxisWidth;
-        scope.xAxisHeight = xAxisHeight;
-        scope.chartHeight = chartHeight;
-        scope.chartWidth = chartWidth;
-        scope.chartTop = chartTop;
-
-        // Register selection listeners
-        $heatmap.on("mousedown", onMouseDown);
-        $heatmap.on("mousemove", onMouseMove);
-        $heatmap.on("mouseleave", onMouseLeave);
-      } else {
-        return;
-      }
+    if (!setElementHeight() || !data) {
+      return;
     }
 
+    // Draw default axes and return if no data
+    if (_.isEmpty(data.buckets)) {
+      addHeatmapCanvas();
+      addAxes();
+      return;
+    }
+
+    addHeatmap();
+    scope.yScale = yScale;
+    scope.xScale = xScale;
+    scope.yAxisWidth = yAxisWidth;
+    scope.xAxisHeight = xAxisHeight;
+    scope.chartHeight = chartHeight;
+    scope.chartWidth = chartWidth;
+    scope.chartTop = chartTop;
+
     // Draw only if color editor is opened
     if (!d3.select("#heatmap-color-legend").empty()) {
       drawColorLegend();
@@ -810,6 +786,11 @@ export default function link(scope, elem, attrs, ctrl) {
       drawOpacityLegend();
     }
   }
+
+  // Register selection listeners
+  $heatmap.on("mousedown", onMouseDown);
+  $heatmap.on("mousemove", onMouseMove);
+  $heatmap.on("mouseleave", onMouseLeave);
 }
 
 function grafanaTimeFormat(ticks, min, max) {