admin/grafana-statusmap
1
0
Fork 0
mirror of https://github.com/timberjoegithub/grafana-statusmap.git synced 2026-07-21 23:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created a new tooltip when click in a value to have different external links. Which links can be created with values from the series.

Browse Source
This commit is contained in:
Joaquin Jimenez Garcia
2020-02-04 16:31:43 +01:00
parent 1e7ef33b67
commit 18574c3fa1
38 changed files with 1241 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/rendering.js
Vendored
+32 -5
View File
@@ -1,9 +1,9 @@
"use strict";
System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/core", "d3", "./libs/d3-scale-chromatic/index", "./tooltip", "./annotations"], function (_export, _context) {
System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/core", "d3", "./libs/d3-scale-chromatic/index", "./tooltip", "./tooltipextraseries", "./annotations"], function (_export, _context) {
"use strict";
var _, $, moment, kbn, appEvents, contextSrv, d3, d3ScaleChromatic, StatusmapTooltip, AnnotationTooltip, MIN_CARD_SIZE, CARD_H_SPACING, CARD_V_SPACING, CARD_ROUND, DATA_RANGE_WIDING_FACTOR, DEFAULT_X_TICK_SIZE_PX, DEFAULT_Y_TICK_SIZE_PX, X_AXIS_TICK_PADDING, Y_AXIS_TICK_PADDING, MIN_SELECTION_WIDTH, StatusmapRenderer;
var _, $, moment, kbn, appEvents, contextSrv, d3, d3ScaleChromatic, StatusmapTooltip, StatusHeatmapTooltipExtraSeries, AnnotationTooltip, MIN_CARD_SIZE, CARD_H_SPACING, CARD_V_SPACING, CARD_ROUND, DATA_RANGE_WIDING_FACTOR, DEFAULT_X_TICK_SIZE_PX, DEFAULT_Y_TICK_SIZE_PX, X_AXIS_TICK_PADDING, Y_AXIS_TICK_PADDING, MIN_SELECTION_WIDTH, StatusmapRenderer;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -66,6 +66,8 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
d3ScaleChromatic = _libsD3ScaleChromaticIndex;
}, function (_tooltip) {
StatusmapTooltip = _tooltip.StatusmapTooltip;
}, function (_tooltipextraseries) {
StatusHeatmapTooltipExtraSeries = _tooltipextraseries.StatusHeatmapTooltipExtraSeries;
}, function (_annotations) {
AnnotationTooltip = _annotations.AnnotationTooltip;
}],
@@ -141,6 +143,8 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
_defineProperty(this, "tooltip", void 0);
_defineProperty(this, "tooltipExtraSeries", void 0);
_defineProperty(this, "annotationTooltip", void 0);
_defineProperty(this, "heatmap", void 0);
@@ -160,6 +164,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
// $heatmap is JQuery object, but heatmap is D3
this.$heatmap = this.elem.find('.status-heatmap-panel');
this.tooltip = new StatusmapTooltip(this.$heatmap, this.scope);
this.tooltipExtraSeries = new StatusHeatmapTooltipExtraSeries(this.$heatmap, this.scope);
this.annotationTooltip = new AnnotationTooltip(this.$heatmap, this.scope);
this.yOffset = 0;
this.selection = {
@@ -191,6 +196,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
this.$heatmap.on('mousedown', this.onMouseDown.bind(this));
this.$heatmap.on('mousemove', this.onMouseMove.bind(this));
this.$heatmap.on('mouseleave', this.onMouseLeave.bind(this));
this.$heatmap.on('click', this.onMouseClick.bind(this));
}
_createClass(StatusmapRenderer, [{
@@ -588,7 +594,11 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
} else if (this.panel.color.mode === 'spectrum') {
return this.colorScale(d.value);
} else if (this.panel.color.mode === 'discrete') {
return this.ctrl.discreteHelper.getBucketColor(d.values);
if (this.panel.seriesFilterIndex != -1 || this.panel.seriesFilterIndex != null) {
return this.ctrl.discreteExtraSeries.getBucketColorSingle(d.values[this.panel.seriesFilterIndex]);
} else {
return this.ctrl.discreteExtraSeries.getBucketColor(d.values);
}
}
}
}, {
@@ -663,9 +673,17 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
}
}, {
key: "onMouseLeave",
value: function onMouseLeave() {
value: function onMouseLeave(e) {
appEvents.emit('graph-hover-clear');
this.clearCrosshair(); //annotationTooltip.destroy();
if (e.relatedTarget) {
if (e.relatedTarget.className == "statusmap-tooltip-extraseries graph-tooltip grafana-tooltip" || e.relatedTarget.className == "graph-tooltip-time") {} else {
this.tooltipExtraSeries.destroy();
}
}
this.annotationTooltip.destroy();
}
}, {
key: "onMouseMove",
@@ -692,6 +710,15 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
this.annotationTooltip.show(event);
}
}
}, {
key: "onMouseClick",
value: function onMouseClick(event) {
this.tooltipExtraSeries.show(event);
if (this.ctrl.panel.usingUrl) {
this.tooltip.destroy();
}
}
}, {
key: "getEventPos",
value: function getEventPos(event, offset) {
@@ -832,7 +859,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
"id": i,
"anno": d.source
};
}); //console.log({"ctrl_annotations": this.ctrl.annotations, "annoData": annoData});
}); //({"ctrl_annotations": this.ctrl.annotations, "annoData": annoData});
var anno = this.heatmap.append("g").attr("class", "statusmap-annotations").attr("transform", "translate(0.5,0)").selectAll(".statusmap-annotations").data(annoData).enter().append("g");