feat: migrate to typescript, support 6.3.0+

- use babel to 7, update dependencies, fix #72 - proper babel build to support ngInject, fix #78 - proper buckets display in 6.3.0+, fix #76 - rename js to ts, build d3 lib as js, build src as ts
2026-07-21 23:42:03 +00:00 · 2019-12-03 13:38:01 +03:00
parent 742e80d713
commit b06c5dffc0
102 changed files with 11679 additions and 2571 deletions
@@ -0,0 +1,172 @@
+import d3 from 'd3';
+import $ from 'jquery';
+import _ from 'lodash';
+import {StatusHeatmapCtrl} from "./status_heatmap_ctrl";
+
+let TOOLTIP_PADDING_X = 30;
+let TOOLTIP_PADDING_Y = 5;
+
+export class StatusmapTooltip {
+  tooltip: any;
+  scope: any;
+  dashboard: any;
+  panelCtrl: StatusHeatmapCtrl;
+  panel: any;
+  heatmapPanel: any;
+  mouseOverBucket: any;
+  originalFillColor: any;
+
+  constructor(elem, scope) {
+    this.scope = scope;
+    this.dashboard = scope.ctrl.dashboard;
+    this.panelCtrl = scope.ctrl;
+    this.panel = scope.ctrl.panel;
+    this.heatmapPanel = elem;
+    this.mouseOverBucket = false;
+    this.originalFillColor = null;
+
+    elem.on("mouseover", this.onMouseOver.bind(this));
+    elem.on("mouseleave", this.onMouseLeave.bind(this));
+  }
+
+  onMouseOver(e) {
+    if (!this.panel.tooltip.show || !this.scope.ctrl.data || _.isEmpty(this.scope.ctrl.data)) { return; }
+
+    if (!this.tooltip) {
+      this.add();
+      this.move(e);
+    }
+  }
+
+  onMouseLeave() {
+    this.destroy();
+  }
+
+  onMouseMove(e) {
+    if (!this.panel.tooltip.show) { return; }
+
+    this.move(e);
+  }
+
+  add() {
+    this.tooltip = d3.select("body")
+      .append("div")
+      .attr("class", "statusmap-tooltip graph-tooltip grafana-tooltip");
+  }
+
+  destroy() {
+    if (this.tooltip) {
+      this.tooltip.remove();
+    }
+
+    this.tooltip = null;
+  }
+
+  show(pos) {
+    if (!this.panel.tooltip.show || !this.tooltip) { return; }
+    // shared tooltip mode
+    if (pos.panelRelY) {
+      return;
+    }
+    let cardId = d3.select(pos.target).attr('cardId');
+    if (!cardId) {
+      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 tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
+    let time = this.dashboard.formatDate(+x, tooltipTimeFormat);
+
+    let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
+      <div class="statusmap-histogram"></div>`;
+
+    if (this.panel.color.mode === 'discrete') {
+      let statuses = this.panelCtrl.discreteHelper.convertValuesToTooltips(values);
+      let statusesHtml = '';
+      if (statuses.length === 1) {
+        statusesHtml = "status:";
+      } else if (statuses.length > 1) {
+        statusesHtml = "statuses:";
+      }
+      tooltipHtml += `
+      <div>
+        name: <b>${y}</b> <br>
+        ${statusesHtml}
+        <ul>
+          ${_.join(_.map(statuses, v => `<li style="background-color: ${v.color}" class="discrete-item">${v.tooltip}</li>`), "")}
+        </ul>
+      </div>`;
+    } else {
+      if (values.length === 1) {
+        tooltipHtml += `<div> 
+      name: <b>${y}</b> <br>
+      value: <b>${value}</b> <br>
+      </div>`;
+      } else {
+        tooltipHtml += `<div>
+      name: <b>${y}</b> <br>
+      values:
+      <ul>
+        ${_.join(_.map(values, v => `<li>${v}</li>`), "")}
+      </ul>
+      </div>`;
+      }
+    }
+
+    //   "Ambiguous bucket state: Multiple values!";
+    if (!this.panel.useMax && card.multipleValues) {
+      tooltipHtml += `<div><b>Error:</b> ${this.panelCtrl.dataWarnings.multipleValues.title}</div>`;
+    }
+
+    // Discrete mode errors
+    if (this.panel.color.mode === 'discrete') {
+      if (card.noColorDefined) {
+        let badValues = this.panelCtrl.discreteHelper.getNotColoredValues(values);
+        tooltipHtml += `<div><b>Error:</b> ${this.panelCtrl.dataWarnings.noColorDefined.title}
+        <br>not colored values:
+        <ul>
+          ${_.join(_.map(badValues, v => `<li>${v}</li>`), "")}
+        </ul>
+        </div>`;
+
+      }
+    }
+
+    this.tooltip.html(tooltipHtml);
+
+    this.move(pos);
+  }
+
+  move(pos) {
+    if (!this.tooltip) { return; }
+
+    let elem = $(this.tooltip.node())[0];
+    let tooltipWidth = elem.clientWidth;
+    let tooltipHeight = elem.clientHeight;
+
+    let left = pos.pageX + TOOLTIP_PADDING_X;
+    let top = pos.pageY + TOOLTIP_PADDING_Y;
+
+    if (pos.pageX + tooltipWidth + 40 > window.innerWidth) {
+      left = pos.pageX - tooltipWidth - TOOLTIP_PADDING_X;
+    }
+
+    if (pos.pageY - window.pageYOffset + tooltipHeight + 20 > window.innerHeight) {
+      top = pos.pageY - tooltipHeight - TOOLTIP_PADDING_Y;
+    }
+
+    return this.tooltip
+      .style("left", left + "px")
+      .style("top", top + "px");
+  }
+}