\n ".concat(_.join(_.map(curl, function (v) {
+ return "
\n
").concat(v.label ? v.label : v.base_url != "" ? _.truncate(v.base_url) : "Empty URL", "\n \n
");
+ }), ""), "\n
");
+ } // "Ambiguous bucket state: Multiple values!";
+
+
+ if (!this.panel.useMax && card.multipleValues) {
+ tooltipHtml += "
Error: ".concat(this.panelCtrl.dataWarnings.multipleValues.title, "
");
+ } // Discrete mode errors
+
+
+ if (this.panel.color.mode === 'discrete') {
+ if (card.noColorDefined) {
+ var badValues = this.panelCtrl.discreteExtraSeries.getNotColoredValues(values);
+ tooltipHtml += "
Error: ".concat(this.panelCtrl.dataWarnings.noColorDefined.title, "\n
not colored values:\n
\n ").concat(_.join(_.map(badValues, function (v) {
+ return "- ".concat(v, "
");
+ }), ""), "\n
\n
");
+ }
+ }
+
+ this.tooltip.html(tooltipHtml);
+ this.move(pos);
+ }
+ }, {
+ key: "formatExtraSeries",
+ value: function formatExtraSeries(value, type) {
+ var extraSeries = '';
+
+ switch (type) {
+ case ExtraSeriesFormatValue.Date:
+ extraSeries = this.dashboard.formatDate(+value, type);
+ return extraSeries;
+
+ case ExtraSeriesFormatValue.Raw:
+ extraSeries = value;
+ return extraSeries;
+
+ default:
+ return extraSeries;
+ }
+ }
+ }, {
+ key: "move",
+ value: function move(pos) {
+ if (!this.tooltip) {
+ return;
+ }
+
+ 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;
+
+ 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");
+ }
+ }]);
+
+ return StatusHeatmapTooltipExtraSeries;
+ }());
+ }
+ };
+});
+//# sourceMappingURL=tooltipextraseries.js.map
diff --git a/dist/tooltipextraseries.js.map b/dist/tooltipextraseries.js.map
new file mode 100644
index 0000000..a5546c9
--- /dev/null
+++ b/dist/tooltipextraseries.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltipextraseries.ts"],"names":["d3","_","$","ExtraSeriesFormatValue","TOOLTIP_PADDING_X","TOOLTIP_PADDING_Y","StatusHeatmapTooltipExtraSeries","elem","scope","dashboard","ctrl","panelCtrl","panel","heatmapPanel","mouseOverBucket","originalFillColor","on","onMouseOver","bind","onMouseClick","e","usingUrl","data","isEmpty","destroy","add","tooltip","select","append","attr","remove","pos","panelRelY","cardId","target","card","cardsData","cards","value","x","y","values","tooltipTimeFormat","time","formatDate","tooltipHtml","color","mode","statuses","seriesFilterIndex","discreteExtraSeries","convertValuesToTooltips","convertValueToTooltips","join","map","v","urls","rtime","retrieveTimeVar","curl","JSON","parse","stringify","i","length","base_url","replace","useExtraSeries","tf","extraSeries","format","vh","index","series_extra","formatExtraSeries","renderLink","variableSrv","variables","forcelowercase","toLowerCase","label","truncate","icon_fa","useMax","multipleValues","dataWarnings","title","noColorDefined","badValues","getNotColoredValues","html","move","type","Date","Raw","node","tooltipWidth","clientWidth","tooltipHeight","clientHeight","left","pageX","top","pageY","window","innerWidth","pageYOffset","innerHeight","style"],"mappings":"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","sourcesContent":["import d3 from 'd3';\nimport _ from 'lodash';\nimport $ from 'jquery';\nimport { ExtraSeriesFormatValue } from './extra_series_format';\n\nconst TOOLTIP_PADDING_X = -50;\nconst TOOLTIP_PADDING_Y = 5;\n\nexport class StatusHeatmapTooltipExtraSeries {\n scope: any;\n dashboard: any;\n panelCtrl: any;\n panel: any;\n heatmapPanel: any;\n mouseOverBucket: any;\n originalFillColor: any;\n tooltip: any;\n\n constructor(elem: any, scope: any) {\n this.scope = scope;\n this.dashboard = scope.ctrl.dashboard;\n this.panelCtrl = scope.ctrl;\n this.panel = scope.ctrl.panel;\n this.heatmapPanel = elem;\n this.mouseOverBucket = false;\n this.originalFillColor = null;\n \n elem.on(\"mouseover\", this.onMouseOver.bind(this));\n elem.on(\"click\", this.onMouseClick.bind(this));\n }\n\n public onMouseOver(e: Event) {\n if (!this.panel.usingUrl || !this.scope.ctrl.data || _.isEmpty(this.scope.ctrl.data)) { \n return; \n }\n }\n\n public onMouseClick(e: Event) {\n if (!this.panel.usingUrl) { \n return; \n }\n\n this.destroy();\n this.add();\n }\n\n public add() {\n this.tooltip = d3.select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"statusmap-tooltip-extraseries graph-tooltip grafana-tooltip\");\n }\n\n public destroy() {\n if (this.tooltip) {\n this.tooltip.remove();\n }\n \n this.tooltip = null;\n }\n\n public show(pos: any) {\n if (!this.panel.usingUrl || !this.tooltip) { \n return; \n }\n\n // shared tooltip mode\n if (pos.panelRelY) {\n return;\n }\n\n let cardId: any = d3.select(pos.target).attr('cardId');\n \n if (!cardId) {\n this.destroy();\n \n return;\n }\n \n let card: any = this.panelCtrl.cardsData.cards[cardId];\n \n if (!card) {\n this.destroy();\n \n return;\n } \n \n if (card.value == null) {\n this.destroy();\n \n return;\n }\n \n let x: any = card.x;\n let y: any = card.y;\n let value: any = card.value;\n let values: any = card.values;\n let tooltipTimeFormat: string = 'YYYY-MM-DD HH:mm:ss';\n let time: Date = this.dashboard.formatDate(+x, tooltipTimeFormat);\n \n let tooltipHtml: string = `
${time}
` \n \n if (this.panel.color.mode === 'discrete') {\n let statuses: any = \"\";\n \n if (this.panelCtrl.panel.seriesFilterIndex == -1) {\n statuses = this.panelCtrl.discreteExtraSeries.convertValuesToTooltips(values);\n } else {\n statuses = this.panelCtrl.discreteExtraSeries.convertValueToTooltips(value);\n }\n \n tooltipHtml += `\n
\n name:
${y}\n
\n
\n
status:\n
\n ${_.join(_.map(statuses, v => `${v.tooltip}
`), \"\")}\n
\n
\n
`;\n }\n \n tooltipHtml += `
`;\n \n let urls: any = this.panelCtrl.panel.urls\n let rtime: any = this.panelCtrl.retrieveTimeVar(); \n\n let curl: any = JSON.parse(JSON.stringify(urls));\n\n for (let i = 0; i < curl.length; i++) {\n //Change name var\n curl[i].base_url = _.replace(curl[i].base_url, /\\$series_label/g, y)\n //Set up extra series\n if (curl[i].useExtraSeries == true) {\n let tf: any = curl[i].extraSeries.format\n let vh: any = card.values[curl[i].extraSeries.index]\n //let extraSeries: any = this.dashboard.formatDate(+vh, tf)\n let series_extra: any = this.formatExtraSeries(vh,tf);\n\n curl[i].base_url = _.replace(curl[i].base_url, /\\$series_extra/g, series_extra)\n }\n //Change time var\n curl[i].base_url = _.replace(curl[i].base_url, /\\$time/g, rtime)\n \n //Replace vars\n curl[i].base_url = this.panelCtrl.renderLink(curl[i].base_url, this.panelCtrl.variableSrv.variables)\n }\n \n if (this.panelCtrl.panel.usingUrl == true) {\n tooltipHtml += `\n
\n ${_.join(_.map(curl, v => `
\n
${v.label ? v.label : (v.base_url != \"\" ? _.truncate(v.base_url) : \"Empty URL\" )}\n \n
`), \"\")}\n
`;\n }\n\n // \"Ambiguous bucket state: Multiple values!\";\n if (!this.panel.useMax && card.multipleValues) {\n tooltipHtml += `
Error: ${this.panelCtrl.dataWarnings.multipleValues.title}
`;\n }\n\n // Discrete mode errors\n if (this.panel.color.mode === 'discrete') {\n if (card.noColorDefined) {\n let badValues: any = this.panelCtrl.discreteExtraSeries.getNotColoredValues(values);\n tooltipHtml += `
Error: ${this.panelCtrl.dataWarnings.noColorDefined.title}\n
not colored values:\n
\n ${_.join(_.map(badValues, v => `- ${v}
`), \"\")}\n
\n
`;\n }\n }\n\n this.tooltip.html(tooltipHtml);\n\n this.move(pos);\n }\n\n public formatExtraSeries (value: any, type: any) {\n let extraSeries: any = '';\n\n switch(type) {\n case ExtraSeriesFormatValue.Date:\n extraSeries = this.dashboard.formatDate(+value, type);\n return extraSeries;\n case ExtraSeriesFormatValue.Raw:\n extraSeries = value;\n return extraSeries;\n default:\n return extraSeries;\n }\n }\n\n public move(pos: any) {\n if (!this.tooltip) { \n return; \n }\n\n let elem: any = $(this.tooltip.node())[0];\n let tooltipWidth = elem.clientWidth;\n let tooltipHeight = elem.clientHeight;\n\n let left = pos.pageX + TOOLTIP_PADDING_X;\n let top = pos.pageY + TOOLTIP_PADDING_Y;\n\n if (pos.pageX + tooltipWidth + 40 > window.innerWidth) {\n left = pos.pageX - tooltipWidth - TOOLTIP_PADDING_X;\n }\n \n if (pos.pageY - window.pageYOffset + tooltipHeight + 20 > window.innerHeight) {\n top = pos.pageY - tooltipHeight - TOOLTIP_PADDING_Y;\n }\n\n return this.tooltip\n .style(\"left\", left + \"px\")\n .style(\"top\", top + \"px\");\n }\n}"],"file":"tooltipextraseries.js"}
\ No newline at end of file
diff --git a/src/color_legend.ts b/src/color_legend.ts
index 8e2ce93..a53556b 100644
--- a/src/color_legend.ts
+++ b/src/color_legend.ts
@@ -77,7 +77,7 @@ coreModule.directive('statusHeatmapLegend', function() {
drawOpacityLegend(elem, colorOptions, rangeFrom, rangeTo, maxValue, minValue);
} else if (panel.color.mode === 'discrete') {
let colorOptions = panel.color;
- drawDiscreteColorLegend(elem, colorOptions, ctrl.discreteHelper);
+ drawDiscreteColorLegend(elem, colorOptions, ctrl.discreteExtraSeries);
}
}
}
@@ -148,7 +148,7 @@ function drawOpacityLegend(elem, options, rangeFrom, rangeTo, maxValue, minValue
drawLegendValues(elem, opacityScale, rangeFrom, rangeTo, maxValue, minValue, legendWidth);
}
-function drawDiscreteColorLegend(elem, colorOptions, discreteHelper) {
+function drawDiscreteColorLegend(elem, colorOptions, discreteExtraSeries) {
let legendElem = $(elem).find('svg');
let legend = d3.select(legendElem.get(0));
clearLegend(elem);
@@ -196,7 +196,7 @@ function drawDiscreteColorLegend(elem, colorOptions, discreteHelper) {
.attr("width", itemWidth + 1) // Overlap rectangles to prevent gaps
.attr("height", legendHeight)
.attr("stroke-width", 0)
- .attr("fill", d => discreteHelper.getDiscreteColor(d));
+ .attr("fill", d => discreteExtraSeries.getDiscreteColor(d));
drawDiscreteLegendValues(elem, colorOptions, legendWidth);
}
diff --git a/src/color_mode_discrete.ts b/src/color_mode_discrete.ts
index a812560..d19c020 100644
--- a/src/color_mode_discrete.ts
+++ b/src/color_mode_discrete.ts
@@ -12,7 +12,7 @@ declare class DiscreteColorThreshold {
tooltip: string;
}
-// Helper methods to handle discrete color mode
+// Extra Series methods to handle discrete color mode
export class ColorModeDiscrete {
scope: any;
panelCtrl: StatusHeatmapCtrl;
@@ -42,6 +42,23 @@ export class ColorModeDiscrete {
return tooltips;
}
+ convertValueToTooltips(values) {
+ let thresholds = this.panel.color.thresholds;
+ let tooltips = [];
+
+ for (let i = 0; i < thresholds.length; i++) {
+ //for (let j = 0; j < values.length; j++) {
+ if (values == thresholds[i].value) {
+ tooltips.push({
+ "tooltip": thresholds[i].tooltip?thresholds[i].tooltip:values,
+ "color": thresholds[i].color
+ });
+ //}
+ }
+ }
+ return tooltips;
+ }
+
getNotMatchedValues(values:any[]) {
let notMatched:any[] = [];
for (let j = 0; j < values.length; j++) {
@@ -71,6 +88,22 @@ export class ColorModeDiscrete {
return color;
}
+ getBucketColorSingle(value) {
+ //let thresholds = this.panel.color.thresholds;
+ if (value == null) {
+ // treat as null value
+ return 'rgba(0,0,0,1)';
+ //return this.getMatchedThreshold(null).color;
+ }
+ let threshold = this.getMatchedThreshold(value);
+
+ if (!threshold || !threshold.color || threshold.color == "") {
+ return 'rgba(0,0,0,1)';
+ } else {
+ return threshold.color;
+ }
+ }
+
// returns color from first matched thresold in order from 0 to thresholds.length
getBucketColor(values) {
let thresholds = this.panel.color.thresholds;
@@ -109,6 +142,24 @@ export class ColorModeDiscrete {
return 'rgba(0,0,0,1)';
}
+
+ updateCardsValuesHasColorInfoSingle() {
+ if (!this.panelCtrl.cardsData) {
+ return;
+ }
+ this.panelCtrl.cardsData.noColorDefined = false;
+ var cards = this.panelCtrl.cardsData.cards;
+ for (var i = 0; i < cards.length; i++) {
+ cards[i].noColorDefined = false;
+ var values = cards[i].value;
+ var threshold = this.getMatchedThreshold(values);
+ if (!threshold || !threshold.color || threshold.color == "") {
+ cards[i].noColorDefined = true;
+ this.panelCtrl.cardsData.noColorDefined = true;
+ }
+ }
+ }
+
updateCardsValuesHasColorInfo() {
if (!this.panelCtrl.cardsData) {
return
diff --git a/src/css/_statusmap.scss b/src/css/_statusmap.scss
index 248b57d..96570d7 100644
--- a/src/css/_statusmap.scss
+++ b/src/css/_statusmap.scss
@@ -47,10 +47,25 @@
color: $text-color;
.discrete-item {
- color: #52545c;
+ color: #ffffff;
padding: 1px;
font-weight: bold;
- text-shadow: 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF;
+ text-shadow: 0 0 0.2em #212124, 0 0 0.2em #212124, 0 0 0.2em #212124;
+ }
+}
+
+.statusmap-tooltip-extraseries {
+ white-space: nowrap;
+ font-size: $font-size-sm;
+ background-color: $graph-tooltip-bg;
+ color: $text-color;
+
+ .discrete-item {
+ color: #ffffff;
+ padding: 1px;
+ font-weight: bold;
+ margin-bottom: 0;
+ text-shadow: 0 0 0.2em #212124, 0 0 0.2em #212124, 0 0 0.2em #212124;
}
}
@@ -71,6 +86,18 @@
stroke: rgba(102, 102, 102, 0.8);
}
+.width-c-40 {
+ width: 40.0rem!important
+}
+.width-c-50 {
+ width: 50.0rem!important
+}
+.width-c-60 {
+ width: 60.0rem!important
+}
+.width-c-70 {
+ width: 70.0rem!important
+}
.status-heatmap-legend-wrapper {
margin: 0 10px;
diff --git a/src/extra_series_format.ts b/src/extra_series_format.ts
new file mode 100644
index 0000000..4d6dea3
--- /dev/null
+++ b/src/extra_series_format.ts
@@ -0,0 +1,9 @@
+export enum ExtraSeriesFormat {
+ Date = 'Date',
+ Raw = 'Raw',
+}
+
+export enum ExtraSeriesFormatValue {
+ Date = 'YYYY/MM/DD/HH_mm_ss',
+ Raw = '',
+}
\ No newline at end of file
diff --git a/src/img/tooltip-editor.png b/src/img/tooltip-editor.png
new file mode 100644
index 0000000..97a26d8
Binary files /dev/null and b/src/img/tooltip-editor.png differ
diff --git a/src/img/tooltip-url.png b/src/img/tooltip-url.png
new file mode 100644
index 0000000..cb65c49
Binary files /dev/null and b/src/img/tooltip-url.png differ
diff --git a/src/module.ts b/src/module.ts
index 2b03526..c0a201d 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -19,6 +19,7 @@ import rendering from './rendering';
// import { labelFormats } from './xAxisLabelFormats';
import {statusHeatmapOptionsEditor} from './options_editor';
import {ColorModeDiscrete} from "./color_mode_discrete";
+import { ExtraSeriesFormat, ExtraSeriesFormatValue } from './extra_series_format';
const CANVAS = 'CANVAS';
const SVG = 'SVG';
@@ -93,8 +94,9 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
graph: any;
multipleValues: boolean;
noColorDefined: boolean;
- discreteHelper: ColorModeDiscrete;
+ discreteExtraSeries: ColorModeDiscrete;
dataWarnings: DataWarnings;
+ extraSeriesFormats: any = [];
annotations: object[] = [];
annotationsPromise: any;
@@ -145,11 +147,25 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
nullPointMode: 'as empty',
yAxisSort: 'metrics',
highlightCards: true,
- useMax: true
+ useMax: true,
+ urls: [{
+ tooltip: '',
+ label: '',
+ base_url: '',
+ useExtraSeries: false,
+ useseriesname: true,
+ forcelowercase: true,
+ icon_fa: 'external-link',
+ extraSeries: {
+ index: -1
+ }
+ }],
+ seriesFilterIndex: -1,
+ usingUrl: false
};
/** @ngInject */
- constructor($scope: any, $injector: auto.IInjectorService, private annotationsSrv: AnnotationsSrv) {
+ constructor($scope: any, $injector: auto.IInjectorService, timeSrv, private annotationsSrv: AnnotationsSrv, $window, datasourceSrv, variableSrv, templateSrv) {
super($scope, $injector);
_.defaultsDeep(this.panel, this.panelDefaults);
@@ -157,6 +173,20 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
this.opacityScales = opacityScales;
this.colorModes = colorModes;
this.colorSchemes = colorSchemes;
+ this.variableSrv = variableSrv;
+ this.extraSeriesFormats = ExtraSeriesFormat;
+
+ this.renderLink = (link, scopedVars, format) => {
+ var scoped = {}
+ for (var key in scopedVars) {
+ scoped[key] = { value: scopedVars[key] }
+ }
+ if (format) {
+ return this.templateSrv.replace(link, scoped, format)
+ } else {
+ return this.templateSrv.replace(link, scoped)
+ }
+ }
// default graph width for discrete card width calculation
this.graph = {
@@ -166,7 +196,7 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
this.multipleValues = false;
this.noColorDefined = false;
- this.discreteHelper = new ColorModeDiscrete($scope);
+ this.discreteExtraSeries = new ColorModeDiscrete($scope);
this.dataWarnings = {
"noColorDefined": {
@@ -180,6 +210,9 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
};
this.annotations = [];
+ this.annotationsSrv = annotationsSrv;
+
+ this.timeSrv = timeSrv;
this.events.on('render', this.onRender.bind(this));
this.events.on('data-received', this.onDataReceived.bind(this));
@@ -189,6 +222,7 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
this.events.on('refresh', this.postRefresh.bind(this));
// custom event from rendering.js
this.events.on('render-complete', this.onRenderComplete.bind(this));
+ this.events.on('onChangeType', this.onChangeType.bind(this));
}
onRenderComplete(data):void {
@@ -196,6 +230,20 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
this.renderingCompleted();
}
+ onChangeType(url): void {
+ switch (url.type) {
+ case ExtraSeriesFormat.Date:
+ url.extraSeries.format = ExtraSeriesFormatValue.Date;
+ break;
+ case ExtraSeriesFormat.Raw:
+ url.extraSeries.format = ExtraSeriesFormatValue.Raw;
+ break;
+ default:
+ url.extraSeries.format = ExtraSeriesFormatValue.Raw;
+ break;
+ }
+ }
+
getChartWidth():number {
const wndWidth = $(window).width();
// gripPos.w is a width in grid's measurements. Grid size in Grafana is 24.
@@ -222,7 +270,7 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
let rangeMs = this.range.to.valueOf() - this.range.from.valueOf();
// this is minimal interval! kbn.round_interval will lower it.
- intervalMs = this.discreteHelper.roundIntervalCeil(rangeMs / maxCardsCount);
+ intervalMs = this.discreteExtraSeries.roundIntervalCeil(rangeMs / maxCardsCount);
// Calculate low limit of interval
let lowLimitMs = 1; // 1 millisecond default low limit
@@ -292,8 +340,6 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
this.data = dataList;
this.cardsData = this.convertToCards(this.data);
- console.log("OnDataReceived");
-
this.annotationsPromise.then(
(result: { alertState: any; annotations: any }) => {
this.loading = false;
@@ -303,13 +349,11 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
} else {
this.annotations = [];
}
- console.log("annotationsPromise result " + this.annotations.length + " annotations");
this.render();
},
() => {
this.loading = false;
this.annotations = [];
- console.log("annotationsPromise onrejected");
this.render();
}
);
@@ -334,7 +378,11 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
this.noColorDefined = false;
if (this.panel.color.mode === 'discrete') {
- this.discreteHelper.updateCardsValuesHasColorInfo();
+ if (this.panel.seriesFilterIndex == -1) {
+ this.discreteExtraSeries.updateCardsValuesHasColorInfo();
+ } else {
+ this.discreteExtraSeries.updateCardsValuesHasColorInfoSingle();
+ }
if (this.cardsData) {
this.noColorDefined = this.cardsData.noColorDefined;
}
@@ -361,6 +409,26 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
this.render();
}
+ onEditorAddUrl = () => {
+ this.panel.urls.push({
+ label: '',
+ base_url: '',
+ useExtraSeries: false,
+ useseriesname: true,
+ forcelowercase: true,
+ icon_fa: 'external-link',
+ extraSeries: {
+ index: -1
+ }
+ });
+ this.render();
+ }
+
+ onEditorRemoveUrl = (index) => {
+ this.panel.urls.splice(index, 1);
+ this.render();
+ }
+
onEditorRemoveThreshold(index:number) {
this.panel.color.thresholds.splice(index, 1);
this.render();
@@ -371,6 +439,12 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
this.render();
}
+
+ onEditorRemoveUrls = () => {
+ this.panel.urls = [];
+ this.render();
+ }
+
onEditorAddThreeLights() {
this.panel.color.thresholds.push({color: "red", value: 2, tooltip: "error" });
this.panel.color.thresholds.push({color: "yellow", value: 1, tooltip: "warning" });
@@ -395,6 +469,12 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
rendering(scope, elem, attrs, ctrl);
}
+ retrieveTimeVar() {
+ var time = this.timeSrv.timeRangeForUrl();
+ var var_time = '&from=' + time.from + '&to=' + time.to;
+ return var_time;
+ }
+
// group values into buckets by target
convertToCards(data) {
let cardsData =
{
@@ -433,6 +513,9 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
let card = new Card();
card.id = i*cardsData.xBucketSize + j;
card.values = [];
+ card.columns = [];
+ card.multipleValues = false;
+ card.noColorDefined = false;
card.y = target;
card.x = -1;
@@ -453,7 +536,7 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
if (card.values.length > 1) {
cardsData.multipleValues = true;
card.multipleValues = true;
- card.value = card.maxValue; // max value by default
+ card.value = this.panel.seriesFilterIndex != -1 ? card.values[this.panel.seriesFilterIndex] : card.maxValue;
} else {
card.value = card.maxValue; // max value by default
}
diff --git a/src/partials/options_editor.html b/src/partials/options_editor.html
index 45563e6..ee06808 100644
--- a/src/partials/options_editor.html
+++ b/src/partials/options_editor.html
@@ -194,9 +194,105 @@
-
diff --git a/src/rendering.ts b/src/rendering.ts
index 03bf772..c7df204 100644
--- a/src/rendering.ts
+++ b/src/rendering.ts
@@ -7,6 +7,7 @@ import {tickStep, getScaledDecimals, getFlotTickSize} from 'app/core/utils/ticks
import * as d3 from 'd3';
import * as d3ScaleChromatic from './libs/d3-scale-chromatic/index';
import {StatusmapTooltip} from './tooltip';
+import {StatusHeatmapTooltipExtraSeries} from './tooltipextraseries';
import {AnnotationTooltip} from './annotations';
let MIN_CARD_SIZE = 5,
@@ -50,6 +51,7 @@ export class StatusmapRenderer {
panel: any;
$heatmap: any;
tooltip: StatusmapTooltip;
+ tooltipExtraSeries:StatusHeatmapTooltipExtraSeries;
annotationTooltip: AnnotationTooltip;
heatmap: any;
timeRange: any;
@@ -64,6 +66,7 @@ export class StatusmapRenderer {
// $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;
@@ -94,6 +97,7 @@ export class StatusmapRenderer {
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));
}
onGraphHoverClear() {
@@ -507,7 +511,11 @@ export class StatusmapRenderer {
} 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);
+ }
}
}
@@ -572,10 +580,17 @@ export class StatusmapRenderer {
this.clearSelection();
}
- onMouseLeave() {
+ 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();
}
onMouseMove(event) {
@@ -599,6 +614,13 @@ export class StatusmapRenderer {
}
}
+ public onMouseClick(event) {
+ this.tooltipExtraSeries.show(event)
+ if (this.ctrl.panel.usingUrl) {
+ this.tooltip.destroy();
+ }
+ }
+
getEventPos(event, offset) {
const x = this.xScale.invert(offset.x - this.yAxisWidth).valueOf();
const y = this.yScale.invert(offset.y - this.chartTop);
@@ -739,7 +761,7 @@ export class StatusmapRenderer {
let annoData = _.map(this.ctrl.annotations, (d,i) => ({"x": Math.floor(this.yAxisWidth + this.xScale(d.time)), "id":i, "anno": d.source}));
- //console.log({"ctrl_annotations": this.ctrl.annotations, "annoData": annoData});
+ //({"ctrl_annotations": this.ctrl.annotations, "annoData": annoData});
let anno = this.heatmap
.append("g")
diff --git a/src/statusmap_data.ts b/src/statusmap_data.ts
index 3560151..8f6116e 100644
--- a/src/statusmap_data.ts
+++ b/src/statusmap_data.ts
@@ -6,6 +6,7 @@ class Card {
id: number = 0;
// Array of values in this bucket
values: any[] = [];
+ columns: any[] = [];
// card has multiple values
multipleValues: boolean = false;
// card has values that has no color
diff --git a/src/tooltip.ts b/src/tooltip.ts
index 16940f4..b09de3d 100644
--- a/src/tooltip.ts
+++ b/src/tooltip.ts
@@ -89,8 +89,15 @@ export class StatusmapTooltip {
let tooltipHtml = `
${time}
`;
+ let statuses;
+
if (this.panel.color.mode === 'discrete') {
- let statuses = this.panelCtrl.discreteHelper.convertValuesToTooltips(values);
+ if (this.panel.seriesFilterIndex > 0) {
+ statuses = this.panelCtrl.discreteExtraSeries.convertValueToTooltips(value);
+ } else {
+ statuses = this.panelCtrl.discreteExtraSeries.convertValuesToTooltips(values);
+ }
+
let statusesHtml = '';
if (statuses.length === 1) {
statusesHtml = "status:";
@@ -130,7 +137,7 @@ export class StatusmapTooltip {
// Discrete mode errors
if (this.panel.color.mode === 'discrete') {
if (card.noColorDefined) {
- let badValues = this.panelCtrl.discreteHelper.getNotColoredValues(values);
+ let badValues = this.panelCtrl.discreteExtraSeries.getNotColoredValues(values);
tooltipHtml += `
Error: ${this.panelCtrl.dataWarnings.noColorDefined.title}
not colored values: