heatmap: add color scale options, issue #8539

public/app/plugins/panel/heatmap/partials/display_editor.html

@@ -44,6 +44,18 @@
   </div>
   </div>
 
 
   <div class="section gf-form-group">
   <div class="section gf-form-group">
+    <h5 class="section-heading">Color scale</h5>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Min</label>
+      <input type="number" ng-model="ctrl.panel.color.min" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.refresh()" ng-model-onblur>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Max</label>
+      <input type="number" ng-model="ctrl.panel.color.max" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.refresh()" ng-model-onblur>
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
     <h5 class="section-heading">Buckets</h5>
     <h5 class="section-heading">Buckets</h5>
     <div class="gf-form">
     <div class="gf-form">
       <label class="gf-form-label width-8">Space</label>
       <label class="gf-form-label width-8">Space</label>

public/app/plugins/panel/heatmap/rendering.ts

@@ -385,9 +385,11 @@ export default function link(scope, elem, attrs, ctrl) {
     }
     }
 
 
     let cardsData = convertToCards(data.buckets);
     let cardsData = convertToCards(data.buckets);
-    let maxValue = d3.max(cardsData, card => card.count);
+    let maxValueAuto = d3.max(cardsData, card => card.count);
+    let maxValue = panel.color.max || maxValueAuto;
+    let minValue = panel.color.min || 0;
 
 
-    colorScale = getColorScale(maxValue);
+    colorScale = getColorScale(maxValue, minValue);
     setOpacityScale(maxValue);
     setOpacityScale(maxValue);
     setCardSize();
     setCardSize();
 
 
@@ -434,14 +436,14 @@ export default function link(scope, elem, attrs, ctrl) {
     .style("stroke-width", 0);
     .style("stroke-width", 0);
   }
   }
 
 
-  function getColorScale(maxValue) {
+  function getColorScale(maxValue, minValue = 0) {
     let colorScheme = _.find(ctrl.colorSchemes, {value: panel.color.colorScheme});
     let colorScheme = _.find(ctrl.colorSchemes, {value: panel.color.colorScheme});
     let colorInterpolator = d3[colorScheme.value];
     let colorInterpolator = d3[colorScheme.value];
     let colorScaleInverted = colorScheme.invert === 'always' ||
     let colorScaleInverted = colorScheme.invert === 'always' ||
       (colorScheme.invert === 'dark' && !contextSrv.user.lightTheme);
       (colorScheme.invert === 'dark' && !contextSrv.user.lightTheme);
 
 
-    let start = colorScaleInverted ? maxValue : 0;
-    let end = colorScaleInverted ? 0 : maxValue;
+    let start = colorScaleInverted ? maxValue : minValue;
+    let end = colorScaleInverted ? minValue : maxValue;
 
 
     return d3.scaleSequential(colorInterpolator).domain([start, end]);
     return d3.scaleSequential(colorInterpolator).domain([start, end]);
   }
   }