feat: use timestamp to put values in buckets

- fix rendering for spreaded values
- fix legend for spectrum and opacity

src/tooltip.ts

@@ -2,6 +2,8 @@ import d3 from 'd3';
 import $ from 'jquery';
 import _ from 'lodash';
 
+import { StatusHeatmapCtrl } from './module';
+
 let TOOLTIP_PADDING_X = 30;
 let TOOLTIP_PADDING_Y = 5;
 
@@ -9,7 +11,7 @@ export class StatusmapTooltip {
   tooltip: any;
   scope: any;
   dashboard: any;
-  panelCtrl: any;
+  panelCtrl: StatusHeatmapCtrl;
   panel: any;
   heatmapPanel: any;
   mouseOverBucket: any;
@@ -63,28 +65,26 @@ export class StatusmapTooltip {
 
   show(pos) {
     if (!this.panel.tooltip.show || !this.tooltip) { return; }
-    // shared tooltip mode
+    
+    // TODO support for shared tooltip mode
     if (pos.panelRelY) {
       return;
     }
-    let cardId = d3.select(pos.target).attr('cardId');
-    if (!cardId) {
+    let cardEl = d3.select(pos.target);
+    let yid = cardEl.attr('yid');
+    let xid = cardEl.attr('xid');
+    let bucket = this.panelCtrl.bucketMatrix.get(yid, xid); // TODO string-to-number conversion for xid
+    if (!bucket || bucket.isEmpty()) {
       this.destroy();
       return;
     }
 
-    let card = this.panelCtrl.cardsData.cards[cardId];
-    if (!card) {
-      this.destroy();
-      return;
-    }
-
-    let x = card.x;
-    let y = card.y;
-    let value = card.value;
-    let values = card.values;
+    let timestamp = bucket.to;
+    let name = bucket.yLabel;
+    let value = bucket.value;
+    let values = bucket.values;
     let tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
-    let time = this.dashboard.formatDate(+x, tooltipTimeFormat);
+    let time = this.dashboard.formatDate(+timestamp, tooltipTimeFormat);
 
     let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
       <div class="statusmap-histogram"></div>`;
@@ -92,7 +92,7 @@ export class StatusmapTooltip {
     let statuses;
 
     if (this.panel.color.mode === 'discrete') {
-      if (this.panel.seriesFilterIndex > 0) {
+      if (this.panel.seriesFilterIndex >= 0) {
         statuses = this.panelCtrl.discreteExtraSeries.convertValueToTooltips(value);
       } else {
         statuses = this.panelCtrl.discreteExtraSeries.convertValuesToTooltips(values);
@@ -106,7 +106,7 @@ export class StatusmapTooltip {
       }
       tooltipHtml += `
       <div>
-        name: <b>${y}</b> <br>
+        name: <b>${name}</b> <br>
         ${statusesHtml}
         <ul>
           ${_.join(_.map(statuses, v => `<li style="background-color: ${v.color}" class="discrete-item">${v.tooltip}</li>`), "")}
@@ -115,12 +115,12 @@ export class StatusmapTooltip {
     } else {
       if (values.length === 1) {
         tooltipHtml += `<div> 
-      name: <b>${y}</b> <br>
+      name: <b>${name}</b> <br>
       value: <b>${value}</b> <br>
       </div>`;
       } else {
         tooltipHtml += `<div>
-      name: <b>${y}</b> <br>
+      name: <b>${name}}</b> <br>
       values:
       <ul>
         ${_.join(_.map(values, v => `<li>${v}</li>`), "")}
@@ -130,13 +130,14 @@ export class StatusmapTooltip {
     }
 
     //   "Ambiguous bucket state: Multiple values!";
-    if (!this.panel.useMax && card.multipleValues) {
+    if (!this.panel.useMax && bucket.multipleValues) {
       tooltipHtml += `<div><b>Error:</b> ${this.panelCtrl.dataWarnings.multipleValues.title}</div>`;
     }
 
     // Discrete mode errors
     if (this.panel.color.mode === 'discrete') {
-      if (card.noColorDefined) {
+
+      if (bucket.noColorDefined) {
         let badValues = this.panelCtrl.discreteExtraSeries.getNotColoredValues(values);
         tooltipHtml += `<div><b>Error:</b> ${this.panelCtrl.dataWarnings.noColorDefined.title}
         <br>not colored values: