jsteele/grafana-statusmap
2
0
Fork 0
mirror of https://github.com/timberjoegithub/grafana-statusmap.git synced 2026-07-22 15:53:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: migrate to typescript, support 6.3.0+

Browse Source 
- 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
This commit is contained in:
Ivan Mikheykin
2019-12-03 13:38:01 +03:00
parent 742e80d713
commit b06c5dffc0
102 changed files with 11679 additions and 2571 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/tooltip.js
Vendored
+64 -64
View File
@@ -1,15 +1,17 @@
'use strict';
"use strict";
System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_export, _context) {
System.register(["d3", "jquery", "lodash"], function (_export, _context) {
"use strict";
var d3, $, _, kbn, _createClass, TOOLTIP_PADDING_X, TOOLTIP_PADDING_Y, StatusHeatmapTooltip;
var d3, $, _, TOOLTIP_PADDING_X, TOOLTIP_PADDING_Y, StatusmapTooltip;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
return {
setters: [function (_d) {
@@ -18,34 +20,32 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
$ = _jquery.default;
}, function (_lodash) {
_ = _lodash.default;
}, function (_appCoreUtilsKbn) {
kbn = _appCoreUtilsKbn.default;
}],
execute: function () {
_createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
TOOLTIP_PADDING_X = 30;
TOOLTIP_PADDING_Y = 5;
_export('StatusHeatmapTooltip', StatusHeatmapTooltip = function () {
function StatusHeatmapTooltip(elem, scope) {
_classCallCheck(this, StatusHeatmapTooltip);
_export("StatusmapTooltip", StatusmapTooltip =
/*#__PURE__*/
function () {
function StatusmapTooltip(elem, scope) {
_classCallCheck(this, StatusmapTooltip);
_defineProperty(this, "tooltip", void 0);
_defineProperty(this, "scope", void 0);
_defineProperty(this, "dashboard", void 0);
_defineProperty(this, "panelCtrl", void 0);
_defineProperty(this, "panel", void 0);
_defineProperty(this, "heatmapPanel", void 0);
_defineProperty(this, "mouseOverBucket", void 0);
_defineProperty(this, "originalFillColor", void 0);
this.scope = scope;
this.dashboard = scope.ctrl.dashboard;
@@ -54,13 +54,12 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
this.heatmapPanel = elem;
this.mouseOverBucket = false;
this.originalFillColor = null;
elem.on("mouseover", this.onMouseOver.bind(this));
elem.on("mouseleave", this.onMouseLeave.bind(this));
}
_createClass(StatusHeatmapTooltip, [{
key: 'onMouseOver',
_createClass(StatusmapTooltip, [{
key: "onMouseOver",
value: function onMouseOver(e) {
if (!this.panel.tooltip.show || !this.scope.ctrl.data || _.isEmpty(this.scope.ctrl.data)) {
return;
@@ -72,12 +71,12 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
}
}
}, {
key: 'onMouseLeave',
key: "onMouseLeave",
value: function onMouseLeave() {
this.destroy();
}
}, {
key: 'onMouseMove',
key: "onMouseMove",
value: function onMouseMove(e) {
if (!this.panel.tooltip.show) {
return;
@@ -86,12 +85,12 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
this.move(e);
}
}, {
key: 'add',
key: "add",
value: function add() {
this.tooltip = d3.select("body").append("div").attr("class", "statusmap-tooltip graph-tooltip grafana-tooltip");
}
}, {
key: 'destroy',
key: "destroy",
value: function destroy() {
if (this.tooltip) {
this.tooltip.remove();
@@ -100,22 +99,26 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
this.tooltip = null;
}
}, {
key: 'show',
key: "show",
value: function show(pos) {
if (!this.panel.tooltip.show || !this.tooltip) {
return;
}
// shared tooltip mode
} // shared tooltip mode
if (pos.panelRelY) {
return;
}
var cardId = d3.select(pos.target).attr('cardId');
if (!cardId) {
this.destroy();
return;
}
var card = this.panelCtrl.cardsData.cards[cardId];
if (!card) {
this.destroy();
return;
@@ -127,51 +130,51 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
var values = card.values;
var tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
var time = this.dashboard.formatDate(+x, tooltipTimeFormat);
var tooltipHtml = '<div class="graph-tooltip-time">' + time + '</div>\n <div class="statusmap-histogram"></div>';
var tooltipHtml = "<div class=\"graph-tooltip-time\">".concat(time, "</div>\n <div class=\"statusmap-histogram\"></div>");
if (this.panel.color.mode === 'discrete') {
var statuses = this.panelCtrl.discreteHelper.convertValuesToTooltips(values);
var statusesHtml = '';
if (statuses.length === 1) {
statusesHtml = "status:";
} else if (statuses.length > 1) {
statusesHtml = "statuses:";
}
tooltipHtml += '\n <div>\n name: <b>' + y + '</b> <br>\n ' + statusesHtml + '\n <ul>\n ' + _.join(_.map(statuses, function (v) {
return '<li style="background-color: ' + v.color + '" class="discrete-item">' + v.tooltip + '</li>';
}), "") + '\n </ul>\n </div>';
tooltipHtml += "\n <div>\n name: <b>".concat(y, "</b> <br>\n ").concat(statusesHtml, "\n <ul>\n ").concat(_.join(_.map(statuses, function (v) {
return "<li style=\"background-color: ".concat(v.color, "\" class=\"discrete-item\">").concat(v.tooltip, "</li>");
}), ""), "\n </ul>\n </div>");
} else {
if (values.length === 1) {
tooltipHtml += '<div> \n name: <b>' + y + '</b> <br>\n value: <b>' + value + '</b> <br>\n </div>';
tooltipHtml += "<div> \n name: <b>".concat(y, "</b> <br>\n value: <b>").concat(value, "</b> <br>\n </div>");
} else {
tooltipHtml += '<div>\n name: <b>' + y + '</b> <br>\n values:\n <ul>\n ' + _.join(_.map(values, function (v) {
return '<li>' + v + '</li>';
}), "") + '\n </ul>\n </div>';
tooltipHtml += "<div>\n name: <b>".concat(y, "</b> <br>\n values:\n <ul>\n ").concat(_.join(_.map(values, function (v) {
return "<li>".concat(v, "</li>");
}), ""), "\n </ul>\n </div>");
}
}
} // "Ambiguous bucket state: Multiple values!";
// "Ambiguous bucket state: Multiple values!";
if (!this.panel.useMax && card.multipleValues) {
tooltipHtml += '<div><b>Error:</b> ' + this.panelCtrl.dataWarnings.multipleValues.title + '</div>';
}
tooltipHtml += "<div><b>Error:</b> ".concat(this.panelCtrl.dataWarnings.multipleValues.title, "</div>");
} // Discrete mode errors
// Discrete mode errors
if (this.panel.color.mode === 'discrete') {
if (card.noColorDefined) {
var badValues = this.panelCtrl.discreteHelper.getNotColoredValues(values);
tooltipHtml += '<div><b>Error:</b> ' + this.panelCtrl.dataWarnings.noColorDefined.title + '\n <br>not colored values:\n <ul>\n ' + _.join(_.map(badValues, function (v) {
return '<li>' + v + '</li>';
}), "") + '\n </ul>\n </div>';
tooltipHtml += "<div><b>Error:</b> ".concat(this.panelCtrl.dataWarnings.noColorDefined.title, "\n <br>not colored values:\n <ul>\n ").concat(_.join(_.map(badValues, function (v) {
return "<li>".concat(v, "</li>");
}), ""), "\n </ul>\n </div>");
}
}
this.tooltip.html(tooltipHtml);
this.move(pos);
}
}, {
key: 'move',
key: "move",
value: function move(pos) {
if (!this.tooltip) {
return;
@@ -180,7 +183,6 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
var elem = $(this.tooltip.node())[0];
var tooltipWidth = elem.clientWidth;
var tooltipHeight = elem.clientHeight;
var left = pos.pageX + TOOLTIP_PADDING_X;
var top = pos.pageY + TOOLTIP_PADDING_Y;
@@ -196,10 +198,8 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
}
}]);
return StatusHeatmapTooltip;
return StatusmapTooltip;
}());
_export('StatusHeatmapTooltip', StatusHeatmapTooltip);
}
};
});