colored tooltip for discrete mode

- fix multiple values notes
- fix legend padding

src/color_mode_discrete.js

@@ -16,7 +16,10 @@ export class ColorModeDiscrete {
     for (let i = 0; i < thresholds.length; i++) {
       for (let j = 0; j < values.length; j++) {
         if (values[j] == thresholds[i].value) {
-          tooltips.push(thresholds[i].tooltip);
+          tooltips.push({
+            "tooltip": thresholds[i].tooltip,
+            "color": thresholds[i].color
+          });
         }
       }
     }

src/css/status-heatmap.scss

@@ -75,6 +75,10 @@ $font-size-sm: 12px !default;
     padding-left: 10px;
   }
 
+  .status-heatmap-color-legend {
+    margin-top: 4px;
+  }
+
   .status-heatmap-legend-values {
     display: inline-block;
   }

src/options_editor.html

@@ -17,6 +17,9 @@
     </div>
 
     <div ng-show="ctrl.panel.color.mode === 'opacity'">
+      <div class="gf-form" ng-show="ctrl.panel.useMax">
+        <strong>Note:</strong> Bucket color determined by maximum value in bucket<br/>
+      </div>
       <div class="gf-form">
         <label class="gf-form-label width-9">Color</label>
         <span class="gf-form-label">
@@ -36,6 +39,9 @@
     </div>
 
     <div ng-show="ctrl.panel.color.mode === 'spectrum'">
+      <div class="gf-form" ng-show="ctrl.panel.useMax">
+        <strong>Note:</strong> Bucket color determined by maximum value in bucket<br/>
+      </div>
       <div class="gf-form">
         <label class="gf-form-label width-9">Scheme</label>
         <div class="gf-form-select-wrapper width-8">
@@ -45,16 +51,15 @@
     </div>
 
     <div ng-show="ctrl.panel.color.mode === 'discrete'">
-        <!-- <gf-form-switch class="gf-form" label-class="width-9"
+        <div class="gf-form" ng-show="ctrl.panel.useMax">
-                        label="Invert order"
+          <strong>Note:</strong> Multiple values displayed using color with least index<br/>
-                        checked="ctrl.panel.color.invertedThresholds" on-change="ctrl.render()">
-        </gf-form-switch> -->
-        <div class="gf-form">
-          <strong>Note:</strong> Bucket color determined by maximum for multiple values<br/>
         </div>
 
         <div class="gf-form" ng-repeat="threshold in ctrl.panel.color.thresholds">
-          <label class="gf-form-label width-9">If bucket value ==</label><!-- {{ $index + 1 }} -->
+
+          <label class="gf-form-label width-2">{{ $index }}</label>
+          <label class="gf-form-label width-9" ng-if="ctrl.panel.useMax">If bucket has value</label>
+          <label class="gf-form-label width-9" ng-if="!ctrl.panel.useMax">If bucket value ==</label>
           <input type="text" class="input-small gf-form-input width-4" ng-model="threshold.value" ng-change="ctrl.render()"/>
           <label class="gf-form-label">
             fill
@@ -116,12 +121,15 @@
   </div>
 
   <div class="section gf-form-group">
-    <h5 class="section-heading">Graph</h5>
+    <h5 class="section-heading">Bucket</h5>
 
     <gf-form-switch class="gf-form" label-class="width-9"
-                    label="Use max value for color"
+                    label="Multiple values"
                     checked="ctrl.panel.useMax" on-change="ctrl.render()">
     </gf-form-switch>
+    <div class="gf-form" ng-show="ctrl.panel.useMax">
+      Color for bucket with multiple values is determined by color mode<br/>
+    </div>
 
     <div class="gf-form">
       <label class="gf-form-label width-9">Display nulls</label>
@@ -130,11 +138,11 @@
       </div>
     </div>
     <div class="gf-form">
-      <label class="gf-form-label width-9">Buckets spacing</label>
+      <label class="gf-form-label width-9">Spacing</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>
     </div>
     <div class="gf-form">
-      <label class="gf-form-label width-9">Bucket rounding</label>
+      <label class="gf-form-label width-9">Rounding</label>
       <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-model="ctrl.panel.cards.cardRound" ng-change="ctrl.refresh()" ng-model-onblur>
     </div>
   </div>

src/rendering.js

@@ -58,7 +58,7 @@ export default function link(scope, elem, attrs, ctrl) {
         height = parseInt(height.replace('px', ''), 10);
       }
 
-      height -= panel.legend.show ? 28 : 11; // bottom padding and space for legend
+      height -= panel.legend.show ? 32 : 10; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
 
       $heatmap.css('height', height + 'px');
 

src/tooltip.js

@@ -84,11 +84,14 @@ export class StatusHeatmapTooltip {
     if (this.panel.color.mode === 'discrete') {
       let statuses = this.panelCtrl.discreteHelper.convertValuesToTooltips(values);
       let statusesHtml = '';
-      if (statuses.length > 0) {
+      if (statuses.length === 1) {
+        statusesHtml = `
+          status: <b style="background-color: ${statuses[0].color}; padding: 1px;">${statuses[0].tooltip}</b>`;
+      } else if (statuses.length > 1) {
         statusesHtml = `
           statuses:
           <ul>
-            ${_.join(_.map(statuses, v => `<li>${v}</li>`), "")}
+            ${_.join(_.map(statuses, v => `<li style="background-color: ${v.color}; padding: 1px;">${v.tooltip}</li>`), "")}
           </ul>`;
       }
       tooltipHtml += `<div>