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

feat: use timestamp to put values in buckets

Browse Source 
- fix rendering for spreaded values
- fix legend for spectrum and opacity
This commit is contained in:
Ivan Mikheykin
2020-03-04 17:17:05 +03:00
parent a3f1495680
commit 9463913189
30 changed files with 1448 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/color_legend.js
Vendored
+31 -9
View File
@@ -21,7 +21,7 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
legend.selectAll(".status-heatmap-color-legend-rect").data(valuesRange).enter().append("rect") // translate from range space into pixels
// and shift all rectangles to the right by 10
.attr("x", function (d) {
return d * widthFactor + 10;
return (d - rangeFrom) * widthFactor + 10;
}).attr("y", 0) // rectangles are slightly overlaped to prevent gaps
.attr("width", LEGEND_STEP_WIDTH + 1).attr("height", legendHeight).attr("stroke-width", 0).attr("fill", function (d) {
return colorScale(d);
@@ -65,7 +65,7 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
var valuesNumber = thresholds.length; // graph width as a fallback
var $heatmap = $(elem).parent().parent().parent().find('.status-heatmap-panel');
var $heatmap = $(elem).parent().parent().parent().find('.statusmap-panel');
var graphWidthAttr = $heatmap.find('svg').attr("width");
var graphWidth = parseInt(graphWidthAttr); // calculate max width of tooltip and use it as width for each item
@@ -100,8 +100,8 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
return;
}
var legendValueScale = d3.scaleLinear().domain([0, rangeTo]).range([0, legendWidth]);
var ticks = buildLegendTicks(0, rangeTo, maxValue, minValue);
var legendValueScale = d3.scaleLinear().domain([rangeFrom, rangeTo]).range([0, legendWidth]);
var ticks = buildLegendTicks(rangeFrom, rangeTo, maxValue, minValue);
var xAxis = d3.axisBottom(legendValueScale).tickValues(ticks).tickSize(2);
var colorRect = legendElem.find(":first-child");
var posY = getSvgElemHeight(legendElem) + 2;
@@ -252,7 +252,7 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
var ticks = [];
for (var i = 0; i < ticksNum; i++) {
var current = tickStepSize * i; // Add user-defined min and max if it had been set
var current = tickStepSize * i + rangeFrom; // Add user-defined min and max if it had been set
if (isValueCloseTo(minValue, current, tickStepSize)) {
ticks.push(minValue);
@@ -268,7 +268,7 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
ticks.push(maxValue);
}
ticks.push(tickStepSize * i);
ticks.push(current);
}
if (!isValueCloseTo(maxValue, rangeTo, tickStepSize)) {
@@ -361,12 +361,34 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
return;
}
if (!_.isEmpty(ctrl.cardsData) && !_.isEmpty(ctrl.cardsData.cards)) {
var rangeFrom = ctrl.cardsData.minValue;
var rangeTo = ctrl.cardsData.maxValue;
if (ctrl.bucketMatrix) {
var rangeFrom = ctrl.bucketMatrix.minValue;
var rangeTo = ctrl.bucketMatrix.maxValue;
var maxValue = panel.color.max || rangeTo;
var minValue = panel.color.min || rangeFrom;
if (ctrl.bucketMatrix.noDatapoints) {
if (!panel.color.max) {
rangeTo = maxValue = 100;
} else {
rangeTo = 100;
}
if (!panel.color.min) {
rangeFrom = minValue = 0;
} else {
rangeFrom = 0;
}
}
console.log("legent state:", {
rangeFrom: rangeFrom,
rangeTo: rangeTo,
maxValue: maxValue,
minValue: minValue,
colorMode: panel.color.mode
});
if (panel.color.mode === 'spectrum') {
var colorScheme = _.find(ctrl.colorSchemes, {
value: panel.color.colorScheme
dist/color_legend.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/color_mode_discrete.js
Vendored
+30 -27
View File
@@ -174,48 +174,51 @@ System.register([], function (_export, _context) {
}, {
key: "updateCardsValuesHasColorInfoSingle",
value: function updateCardsValuesHasColorInfoSingle() {
if (!this.panelCtrl.cardsData) {
var _this = this;
if (!this.panelCtrl.bucketMatrix) {
return;
}
this.panelCtrl.cardsData.noColorDefined = false;
var cards = this.panelCtrl.cardsData.cards;
this.panelCtrl.bucketMatrix.noColorDefined = false;
this.panelCtrl.bucketMatrix.targets.map(function (target) {
_this.panelCtrl.bucketMatrix.buckets[target].map(function (bucket) {
bucket.noColorDefined = false;
for (var i = 0; i < cards.length; i++) {
cards[i].noColorDefined = false;
var values = cards[i].value;
var threshold = this.getMatchedThreshold(values);
var threshold = _this.getMatchedThreshold(bucket.value);
if (!threshold || !threshold.color || threshold.color == "") {
cards[i].noColorDefined = true;
this.panelCtrl.cardsData.noColorDefined = true;
}
}
if (!threshold || !threshold.color || threshold.color == "") {
bucket.noColorDefined = true;
_this.panelCtrl.bucketMatrix.noColorDefined = true;
}
});
});
}
}, {
key: "updateCardsValuesHasColorInfo",
value: function updateCardsValuesHasColorInfo() {
if (!this.panelCtrl.cardsData) {
var _this2 = this;
if (!this.panelCtrl.bucketMatrix) {
return;
}
this.panelCtrl.cardsData.noColorDefined = false;
var cards = this.panelCtrl.cardsData.cards;
this.panelCtrl.bucketMatrix.noColorDefined = false;
this.panelCtrl.bucketMatrix.targets.map(function (target) {
_this2.panelCtrl.bucketMatrix.buckets[target].map(function (bucket) {
bucket.noColorDefined = false;
for (var i = 0; i < cards.length; i++) {
cards[i].noColorDefined = false;
var values = cards[i].values;
for (var j = 0; j < bucket.values.length; j++) {
var threshold = _this2.getMatchedThreshold(bucket.values[j]);
for (var j = 0; j < values.length; j++) {
var threshold = this.getMatchedThreshold(values[j]);
if (!threshold || !threshold.color || threshold.color == "") {
cards[i].noColorDefined = true;
this.panelCtrl.cardsData.noColorDefined = true;
break;
if (!threshold || !threshold.color || threshold.color == "") {
bucket.noColorDefined = true;
_this2.panelCtrl.bucketMatrix.noColorDefined = true;
break;
}
}
}
}
});
});
}
}, {
key: "getMatchedThreshold",
dist/color_mode_discrete.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/css/statusmap.dark.css
Vendored
+5 -5
View File
@@ -7,18 +7,18 @@
color: #d8d9da;
padding: 1px; }
.status-heatmap-panel {
.statusmap-panel {
position: relative; }
.status-heatmap-panel .axis .tick text {
.statusmap-panel .axis .tick text {
fill: #d8d9da;
color: #d8d9da;
font-size: 11px; }
.status-heatmap-panel .axis .tick line {
.statusmap-panel .axis .tick line {
opacity: 0.4;
stroke: #8e8e8e; }
.status-heatmap-panel svg {
.statusmap-panel svg {
pointer-events: none; }
.status-heatmap-panel svg rect {
.statusmap-panel svg rect {
pointer-events: visiblePainted; }
.statusmap-tooltip {
dist/css/statusmap.dark.css.map
Vendored
+1 -1
View File
@@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAGjB,kDAAoB;IAClB,cAAc,EAAE,IAAI;EAGtB,uDAAyB;IACzB,gBAAgB,ECNL,OAAO;IDOlB,KAAK,ECVM,OAAO;IDWlB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,ECpBG,OAAO;IDqBd,KAAK,ECrBE,OAAO;IDsBd,SAAS,EEtBE,IAAI;EFyBjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC1BM,OAAO;ED+BvB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EE5CI,IAAI;EF6CjB,gBAAgB,EC1CC,OAAO;ED2CxB,KAAK,EC7CM,OAAO;ED+ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,uDAAuD;;AAIxE,8BAA+B;EAC7B,WAAW,EAAE,MAAM;EACnB,SAAS,EE1DI,IAAI;EF2DjB,gBAAgB,ECxDC,OAAO;EDyDxB,KAAK,EC3DM,OAAO;ED6DlB,6CAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,uDAAuD;;AAIxE,yBAA0B;EACxB,IAAI,ECtEY,OAAO;;AD0EvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAGlC,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AAEA,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxHG,OAAO;IDyHd,KAAK,ECzHE,OAAO;ID0Hd,SAAS,EE1HE,IAAI;EF6HjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9HM,OAAO;EDiIrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnIM,OAAO",
"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAGjB,kDAAoB;IAClB,cAAc,EAAE,IAAI;EAGtB,uDAAyB;IACzB,gBAAgB,ECNL,OAAO;IDOlB,KAAK,ECVM,OAAO;IDWlB,OAAO,EAAE,GAAG;;AAId,gBAAiB;EACf,QAAQ,EAAE,QAAQ;EAGhB,iCAAK;IACH,IAAI,ECpBG,OAAO;IDqBd,KAAK,ECrBE,OAAO;IDsBd,SAAS,EEtBE,IAAI;EFyBjB,iCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC1BM,OAAO;ED+BvB,oBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,yBAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EE5CI,IAAI;EF6CjB,gBAAgB,EC1CC,OAAO;ED2CxB,KAAK,EC7CM,OAAO;ED+ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,uDAAuD;;AAIxE,8BAA+B;EAC7B,WAAW,EAAE,MAAM;EACnB,SAAS,EE1DI,IAAI;EF2DjB,gBAAgB,ECxDC,OAAO;EDyDxB,KAAK,EC3DM,OAAO;ED6DlB,6CAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,uDAAuD;;AAIxE,yBAA0B;EACxB,IAAI,ECtEY,OAAO;;AD0EvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAGlC,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AAEA,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxHG,OAAO;IDyHd,KAAK,ECzHE,OAAO;ID0Hd,SAAS,EE1HE,IAAI;EF6HjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9HM,OAAO;EDiIrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnIM,OAAO",
"sources": ["../../src/css/_statusmap.scss","../../src/css/_variables.dark.scss","../../src/css/_variables.scss"],
"names": [],
"file": "statusmap.dark.css"
dist/css/statusmap.light.css
Vendored
+5 -5
View File
@@ -7,18 +7,18 @@
color: #52545c;
padding: 1px; }
.status-heatmap-panel {
.statusmap-panel {
position: relative; }
.status-heatmap-panel .axis .tick text {
.statusmap-panel .axis .tick text {
fill: #52545c;
color: #52545c;
font-size: 11px; }
.status-heatmap-panel .axis .tick line {
.statusmap-panel .axis .tick line {
opacity: 0.4;
stroke: #767980; }
.status-heatmap-panel svg {
.statusmap-panel svg {
pointer-events: none; }
.status-heatmap-panel svg rect {
.statusmap-panel svg rect {
pointer-events: visiblePainted; }
.statusmap-tooltip {
dist/css/statusmap.light.css.map
Vendored
+1 -1
View File
@@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAGjB,kDAAoB;IAClB,cAAc,EAAE,IAAI;EAGtB,uDAAyB;IACzB,gBAAgB,ECNL,OAAO;IDOlB,KAAK,ECVM,OAAO;IDWlB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,ECpBG,OAAO;IDqBd,KAAK,ECrBE,OAAO;IDsBd,SAAS,EEtBE,IAAI;EFyBjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC1BM,OAAO;ED+BvB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EE5CI,IAAI;EF6CjB,gBAAgB,EC1CC,OAAO;ED2CxB,KAAK,EC7CM,OAAO;ED+ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,uDAAuD;;AAIxE,8BAA+B;EAC7B,WAAW,EAAE,MAAM;EACnB,SAAS,EE1DI,IAAI;EF2DjB,gBAAgB,ECxDC,OAAO;EDyDxB,KAAK,EC3DM,OAAO;ED6DlB,6CAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,uDAAuD;;AAIxE,yBAA0B;EACxB,IAAI,ECtEY,OAAO;;AD0EvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAGlC,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AAEA,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxHG,OAAO;IDyHd,KAAK,ECzHE,OAAO;ID0Hd,SAAS,EE1HE,IAAI;EF6HjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9HM,OAAO;EDiIrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnIM,OAAO",
"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAGjB,kDAAoB;IAClB,cAAc,EAAE,IAAI;EAGtB,uDAAyB;IACzB,gBAAgB,ECNL,OAAO;IDOlB,KAAK,ECVM,OAAO;IDWlB,OAAO,EAAE,GAAG;;AAId,gBAAiB;EACf,QAAQ,EAAE,QAAQ;EAGhB,iCAAK;IACH,IAAI,ECpBG,OAAO;IDqBd,KAAK,ECrBE,OAAO;IDsBd,SAAS,EEtBE,IAAI;EFyBjB,iCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC1BM,OAAO;ED+BvB,oBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,yBAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EE5CI,IAAI;EF6CjB,gBAAgB,EC1CC,OAAO;ED2CxB,KAAK,EC7CM,OAAO;ED+ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,uDAAuD;;AAIxE,8BAA+B;EAC7B,WAAW,EAAE,MAAM;EACnB,SAAS,EE1DI,IAAI;EF2DjB,gBAAgB,ECxDC,OAAO;EDyDxB,KAAK,EC3DM,OAAO;ED6DlB,6CAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,uDAAuD;;AAIxE,yBAA0B;EACxB,IAAI,ECtEY,OAAO;;AD0EvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAGlC,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AACA,WAAY;EACV,KAAK,EAAE,gBACT;;AAEA,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxHG,OAAO;IDyHd,KAAK,ECzHE,OAAO;ID0Hd,SAAS,EE1HE,IAAI;EF6HjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9HM,OAAO;EDiIrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnIM,OAAO",
"sources": ["../../src/css/_statusmap.scss","../../src/css/_variables.light.scss","../../src/css/_variables.scss"],
"names": [],
"file": "statusmap.light.css"
dist/module.html
Vendored
+4 -2
View File
@@ -1,12 +1,14 @@
<div class="status-heatmap-wrapper">
<div class="status-heatmap-canvas-wrapper">
<div class="datapoints-warning" ng-if="ctrl.multipleValues || ctrl.noColorDefined">
<div class="datapoints-warning" ng-if="ctrl.multipleValues || ctrl.noColorDefined || ctrl.noDatapoints">
<span class="small" ng-if="ctrl.multipleValues" bs-tooltip="'{{ctrl.dataWarnings.multipleValues.tip}}'">{{ctrl.dataWarnings.multipleValues.title}}</span>
<span class="small" ng-if="ctrl.noColorDefined" bs-tooltip="'{{ctrl.dataWarnings.noColorDefined.tip}}'">{{ctrl.dataWarnings.noColorDefined.title}}</span>
<span class="small" ng-if="ctrl.noDatapoints" bs-tooltip="'{{ctrl.dataWarnings.noDatapoints.tip}}'">{{ctrl.dataWarnings.noDatapoints.title}}</span>
</div>
<div class="status-heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
<div class="statusmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
</div>
<div class="status-heatmap-legend-wrapper" ng-if="ctrl.panel.legend.show">
<status-heatmap-legend></status-heatmap-legend>
dist/module.js
Vendored
+381 -111
View File
@@ -3,7 +3,7 @@
System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/sdk", "./statusmap_data", "./rendering", "./options_editor", "./color_mode_discrete", "./extra_series_format"], function (_export, _context) {
"use strict";
var _, kbn, loadPluginCss, MetricsPanelCtrl, Card, rendering, statusHeatmapOptionsEditor, ColorModeDiscrete, ExtraSeriesFormat, ExtraSeriesFormatValue, CANVAS, SVG, VALUE_INDEX, TIME_INDEX, renderer, colorSchemes, colorModes, opacityScales, StatusHeatmapCtrl;
var _, kbn, loadPluginCss, MetricsPanelCtrl, Bucket, BucketMatrix, rendering, statusHeatmapOptionsEditor, ColorModeDiscrete, ExtraSeriesFormat, ExtraSeriesFormatValue, VALUE_INDEX, TIME_INDEX, colorSchemes, colorModes, opacityScales, StatusHeatmapCtrl;
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -38,7 +38,8 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
loadPluginCss = _appPluginsSdk.loadPluginCss;
MetricsPanelCtrl = _appPluginsSdk.MetricsPanelCtrl;
}, function (_statusmap_data) {
Card = _statusmap_data.Card;
Bucket = _statusmap_data.Bucket;
BucketMatrix = _statusmap_data.BucketMatrix;
}, function (_rendering) {
rendering = _rendering.default;
}, function (_options_editor) {
@@ -50,11 +51,8 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
ExtraSeriesFormatValue = _extra_series_format.ExtraSeriesFormatValue;
}],
execute: function () {
CANVAS = 'CANVAS';
SVG = 'SVG';
VALUE_INDEX = 0;
TIME_INDEX = 1;
renderer = CANVAS;
colorSchemes = [// Diverging
{
name: 'Spectral',
@@ -166,6 +164,14 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
_this = _possibleConstructorReturn(this, _getPrototypeOf(StatusHeatmapCtrl).call(this, $scope, $injector));
_this.annotationsSrv = annotationsSrv;
_defineProperty(_assertThisInitialized(_this), "data", void 0);
_defineProperty(_assertThisInitialized(_this), "bucketMatrix", void 0);
_defineProperty(_assertThisInitialized(_this), "graph", void 0);
_defineProperty(_assertThisInitialized(_this), "discreteHelper", void 0);
_defineProperty(_assertThisInitialized(_this), "opacityScales", []);
_defineProperty(_assertThisInitialized(_this), "colorModes", []);
@@ -174,19 +180,15 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
_defineProperty(_assertThisInitialized(_this), "unitFormats", void 0);
_defineProperty(_assertThisInitialized(_this), "data", void 0);
_defineProperty(_assertThisInitialized(_this), "cardsData", void 0);
_defineProperty(_assertThisInitialized(_this), "graph", void 0);
_defineProperty(_assertThisInitialized(_this), "dataWarnings", {});
_defineProperty(_assertThisInitialized(_this), "multipleValues", void 0);
_defineProperty(_assertThisInitialized(_this), "noColorDefined", void 0);
_defineProperty(_assertThisInitialized(_this), "discreteExtraSeries", void 0);
_defineProperty(_assertThisInitialized(_this), "noDatapoints", void 0);
_defineProperty(_assertThisInitialized(_this), "dataWarnings", void 0);
_defineProperty(_assertThisInitialized(_this), "discreteExtraSeries", void 0);
_defineProperty(_assertThisInitialized(_this), "extraSeriesFormats", []);
@@ -218,14 +220,12 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
},
xAxis: {
show: true,
showWeekends: true,
minBucketWidthToShowWeekends: 4,
showCrosshair: true,
labelFormat: '%a %m/%d'
},
yAxis: {
show: true,
showCrosshair: false
minWidth: -1,
maxWidth: -1
},
tooltip: {
show: true
@@ -318,13 +318,17 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
_this.noColorDefined = false;
_this.discreteExtraSeries = new ColorModeDiscrete($scope);
_this.dataWarnings = {
"noColorDefined": {
noColorDefined: {
title: 'Data has value with undefined color',
tip: 'Check metric values, color values or define a new color'
},
"multipleValues": {
multipleValues: {
title: 'Data has multiple values for one target',
tip: 'Change targets definitions or set "use max value"'
},
noDatapoints: {
title: 'No data points',
tip: 'No datapoints returned from data query'
}
};
_this.annotations = [];
@@ -354,6 +358,13 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
_createClass(StatusHeatmapCtrl, [{
key: "onRenderComplete",
value: function onRenderComplete(data) {
// console.log({
// data: this.data,
// bucketMatrix: this.bucketMatrix,
// chartWidth: data.chartWidth,
// from: this.range.from.valueOf(),
// to: this.range.to.valueOf()
// })
this.graph.chartWidth = data.chartWidth;
this.renderingCompleted();
}
@@ -373,19 +384,30 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
url.extraSeries.format = ExtraSeriesFormatValue.Raw;
break;
}
}
} // getChartWidth returns an approximation of chart canvas width or
// a saved value calculated during a render.
}, {
key: "getChartWidth",
value: function getChartWidth() {
if (this.graph.chartWidth > 0) {
return this.graph.chartWidth;
}
var wndWidth = $(window).width(); // gripPos.w is a width in grid's measurements. Grid size in Grafana is 24.
var panelWidthFactor = this.panel.gridPos.w / 24;
var panelWidth = Math.ceil(wndWidth * panelWidthFactor); // approximate chartWidth because y axis ticks not rendered yet on first data receive.
var panelWidth = Math.ceil(wndWidth * panelWidthFactor); // approximate width of the chart draw canvas:
// - y axis ticks are not rendered yet on first data receive,
// so choose 200 as a decent value for y legend width
// - chartWidth can not be lower than the half of the panel width.
var chartWidth = _.max([panelWidth - 200, panelWidth / 2]);
return chartWidth;
} // override calculateInterval for discrete color mode
} // calculateInterval is called on 'refresh' to calculate an interval
// for datasource.
// It is override of calculateInterval from MetricsPanelCtrl.
}, {
key: "calculateInterval",
@@ -423,7 +445,17 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
var interval = kbn.secondsToHms(intervalMs / 1000);
this.intervalMs = intervalMs;
this.interval = interval;
this.interval = interval; // Get final buckets count after interval is adjusted
//this.xBucketsCount = Math.floor(rangeMs / intervalMs);
// console.log("calculateInterval: ", {
// interval: this.interval,
// intervalMs: this.intervalMs,
// rangeMs: rangeMs,
// from: this.range.from.valueOf(),
// to: this.range.to.valueOf(),
// numIntervals: rangeMs/this.intervalMs,
// maxCardsCount: maxCardsCount,
// });
}
}, {
key: "issueQueries",
@@ -458,7 +490,7 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
key: "issueQueriesWithInterval",
value: function issueQueriesWithInterval(datasource, interval) {
var origInterval = this.panel.interval;
this.panel.interval = this.interval;
this.panel.interval = interval;
var res = _get(_getPrototypeOf(StatusHeatmapCtrl.prototype), "issueQueries", this).call(this, datasource);
@@ -471,7 +503,8 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
var _this3 = this;
this.data = dataList;
this.cardsData = this.convertToCards(this.data);
this.bucketMatrix = this.convertDataToBuckets(dataList, this.range.from.valueOf(), this.range.to.valueOf(), this.intervalMs, true);
this.noDatapoints = this.bucketMatrix.noDatapoints;
this.annotationsPromise.then(function (result) {
_this3.loading = false; //this.alertState = result.alertState;
@@ -487,26 +520,30 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
_this3.annotations = [];
_this3.render();
}); //this.render();
});
}
}, {
key: "onInitEditMode",
value: function onInitEditMode() {
this.addEditorTab('Options', statusHeatmapOptionsEditor, 2);
this.unitFormats = kbn.getUnitFormats();
}
} // onRender will be called before StatusmapRenderer.onRender.
// Decide if warning should be displayed over cards.
}, {
key: "onRender",
value: function onRender() {
//console.log('OnRender');
if (!this.range || !this.data) {
this.noDatapoints = true;
return;
}
this.multipleValues = false;
if (!this.panel.useMax) {
if (this.cardsData) {
this.multipleValues = this.cardsData.multipleValues;
if (this.bucketMatrix) {
this.multipleValues = this.bucketMatrix.multipleValues;
}
}
@@ -519,10 +556,17 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
this.discreteExtraSeries.updateCardsValuesHasColorInfoSingle();
}
if (this.cardsData) {
this.noColorDefined = this.cardsData.noColorDefined;
if (this.bucketMatrix) {
this.noColorDefined = this.bucketMatrix.noColorDefined;
}
}
this.noDatapoints = false;
if (this.bucketMatrix) {
this.noDatapoints = this.bucketMatrix.noDatapoints;
} //console.log(this);
}
}, {
key: "onCardColorChange",
@@ -640,94 +684,320 @@ System.register(["lodash", "./color_legend", "app/core/utils/kbn", "app/plugins/
var time = this.timeSrv.timeRangeForUrl();
var var_time = '&from=' + time.from + '&to=' + time.to;
return var_time;
} // group values into buckets by target
} // convertToBuckets groups values in data into buckets by target and timestamp.
//
// data is a result from datasource. It is an array of timeseries and tables:
/* [
// timeseries
{
target: "query alias",
refId: "A",
datapoints: [
[0, 1582681239911],
[3, 158....],
...
],
tags?:{key: value,...}
},
// table
{
name: "table name",
refId: "B",
columns: [
{text: "id"},
{text: "info"},
...
],
rows: [
[1, "123"],
[2, "44411"],
...
]
},
...
]
to and from — a time range of the panel.
intervalMs — a calculated interval. It is used to split a time range.
*/
}, {
key: "convertToCards",
value: function convertToCards(data) {
var cardsData = {
cards: [],
xBucketSize: 0,
yBucketSize: 0,
maxValue: 0,
minValue: 0,
multipleValues: false,
noColorDefined: false,
targets: [],
// array of available unique targets
targetIndex: {} // indices in data array for each of available unique targets
key: "convertDataToBuckets",
value: function convertDataToBuckets(data, from, to, intervalMs, mostRecentBucket) {
var _this4 = this;
};
var bucketMatrix = new BucketMatrix();
bucketMatrix.rangeMs = to - from;
bucketMatrix.intervalMs = intervalMs;
if (!data || data.length == 0) {
return cardsData;
} // Collect uniq timestamps from data and spread over targets and timestamps
// collect uniq targets and their indices
_.map(data, function (d, i) {
cardsData.targetIndex[d.target] = _.concat(_.toArray(cardsData.targetIndex[d.target]), i);
}); // TODO add some logic for targets heirarchy
cardsData.targets = _.keys(cardsData.targetIndex);
cardsData.yBucketSize = cardsData.targets.length; // Maximum number of buckets over x axis
cardsData.xBucketSize = _.max(_.map(data, function (d) {
return d.datapoints.length;
})); // Collect all values for each bucket from datapoints with similar target.
// TODO aggregate values into buckets over datapoint[TIME_INDEX] not over datapoint index (j).
for (var i = 0; i < cardsData.targets.length; i++) {
var target = cardsData.targets[i];
for (var j = 0; j < cardsData.xBucketSize; j++) {
var 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; // collect values from all timeseries with target
for (var si = 0; si < cardsData.targetIndex[target].length; si++) {
var s = data[cardsData.targetIndex[target][si]];
if (s.datapoints.length <= j) {
continue;
}
var datapoint = s.datapoints[j];
if (card.values.length === 0) {
card.x = datapoint[TIME_INDEX];
}
card.values.push(datapoint[VALUE_INDEX]);
}
card.minValue = _.min(card.values);
card.maxValue = _.max(card.values);
if (card.values.length > 1) {
cardsData.multipleValues = true;
card.multipleValues = true;
card.value = this.panel.seriesFilterIndex != -1 ? card.values[this.panel.seriesFilterIndex] : card.maxValue;
} else {
card.value = card.maxValue; // max value by default
}
if (cardsData.maxValue < card.maxValue) cardsData.maxValue = card.maxValue;
if (cardsData.minValue > card.minValue) cardsData.minValue = card.minValue;
if (card.x != -1) {
cardsData.cards.push(card);
}
}
// Mimic heatmap and graph 'no data' labels.
bucketMatrix.targets = ["1.0", "0.0", "-1.0"];
bucketMatrix.buckets["1.0"] = [];
bucketMatrix.buckets["0.0"] = [];
bucketMatrix.buckets["-1.0"] = [];
bucketMatrix.xBucketSize = 42;
bucketMatrix.noDatapoints = true;
return bucketMatrix;
}
return cardsData;
var targetIndex = {}; // Group indicies of elements in data by target (y label).
// lodash version:
//_.map(data, (d, i) => {
// targetIndex[d.target] = _.concat(_.toArray(targetIndex[d.target]), i);
//});
data.map(function (queryResult, i) {
var yLabel = queryResult.target;
if (!targetIndex.hasOwnProperty(yLabel)) {
targetIndex[yLabel] = [];
}
targetIndex[yLabel].push(i);
});
var targetKeys = _.keys(targetIndex); //console.log ("targetIndex: ", targetIndex, "targetKeys: ", targetKeys);
var targetTimestampRanges = {}; // Collect all timestamps for each target.
// Make map timestamp => [from, to]. from == previous ts, to == ts from datapoint.
targetKeys.map(function (target) {
var targetTimestamps = [];
for (var si = 0; si < targetIndex[target].length; si++) {
var s = data[targetIndex[target][si]];
_.map(s.datapoints, function (datapoint, idx) {
targetTimestamps.push(datapoint[TIME_INDEX] - from);
});
} //console.log("timestamps['"+target+"'] = ", targetTimestamps);
targetTimestamps = _.uniq(targetTimestamps); //console.log("uniq timestamps['"+target+"'] = ", targetTimestamps);
targetTimestampRanges[target] = [];
for (var i = targetTimestamps.length - 1; i >= 0; i--) {
var tsTo = targetTimestamps[i];
var tsFrom = 0;
if (tsTo < 0) {
tsFrom = tsTo - intervalMs;
} else {
if (i - 1 >= 0) {
// Set from to previous timestamp + 1ms;
tsFrom = targetTimestamps[i - 1] + 1; // tfTo - tfFrom should not be more than intervalMs
var minFrom = tsTo - intervalMs;
if (tsFrom < minFrom) {
tsFrom = minFrom;
}
}
}
targetTimestampRanges[target][tsTo] = [tsFrom, tsTo];
}
}); // console.log ("targetTimestampRanges: ", targetTimestampRanges);
// Create empty buckets using intervalMs to calculate ranges.
// If mostRecentBucket is set, create a bucket with a range "to":"to"
// to store most recent values.
targetKeys.map(function (target) {
var targetEmptyBuckets = [];
var lastTs = to - from;
if (mostRecentBucket) {
var topBucket = new Bucket();
topBucket.yLabel = target;
topBucket.relTo = lastTs;
topBucket.relFrom = lastTs;
topBucket.values = [];
topBucket.mostRecent = true;
if (targetTimestampRanges[target].hasOwnProperty(lastTs)) {
topBucket.relFrom = targetTimestampRanges[target][lastTs][0];
lastTs = topBucket.relFrom;
}
topBucket.to = topBucket.relTo + from;
topBucket.from = topBucket.relFrom + from;
targetEmptyBuckets.push(topBucket);
}
var idx = 0;
var bucketFrom = 0;
while (bucketFrom >= 0) {
var b = new Bucket();
b.yLabel = target;
b.relTo = lastTs - idx * intervalMs;
b.relFrom = lastTs - (idx + 1) * intervalMs;
b.to = b.relTo + from;
b.from = b.relFrom + from;
b.values = [];
bucketFrom = b.relFrom;
targetEmptyBuckets.push(b);
idx++;
}
targetEmptyBuckets.map(function (bucket, i) {
bucket.xid = i;
});
bucketMatrix.buckets[target] = targetEmptyBuckets;
}); //console.log ("bucketMatrix: ", bucketMatrix);
// Put values into buckets.
bucketMatrix.minValue = Number.MAX_VALUE;
bucketMatrix.maxValue = Number.MIN_SAFE_INTEGER;
targetKeys.map(function (target) {
targetIndex[target].map(function (dataIndex) {
var s = data[dataIndex];
s.datapoints.map(function (dp) {
for (var i = 0; i < bucketMatrix.buckets[target].length; i++) {
if (bucketMatrix.buckets[target][i].belong(dp[TIME_INDEX])) {
bucketMatrix.buckets[target][i].put(dp[VALUE_INDEX]);
}
}
});
});
bucketMatrix.buckets[target].map(function (bucket) {
bucket.minValue = _.min(bucket.values);
bucket.maxValue = _.max(bucket.values);
if (bucket.minValue < bucketMatrix.minValue) {
bucketMatrix.minValue = bucket.minValue;
}
if (bucket.maxValue > bucketMatrix.maxValue) {
bucketMatrix.maxValue = bucket.maxValue;
}
bucket.value = bucket.maxValue;
if (bucket.values.length > 1) {
bucketMatrix.multipleValues = true;
bucket.multipleValues = true;
bucket.value = _this4.panel.seriesFilterIndex != -1 ? bucket.values[_this4.panel.seriesFilterIndex] : bucket.maxValue;
}
});
});
bucketMatrix.xBucketSize = Number.MIN_SAFE_INTEGER;
targetKeys.map(function (target) {
var bucketsLen = bucketMatrix.buckets[target].length;
if (bucketsLen > bucketMatrix.xBucketSize) {
bucketMatrix.xBucketSize = bucketsLen;
}
}); //console.log ("bucketMatrix with values: ", bucketMatrix);
bucketMatrix.targets = targetKeys;
return bucketMatrix;
this.bucketMatrix = bucketMatrix; // Collect all values for each bucket from datapoints with similar target.
// TODO aggregate values into buckets over datapoint[TIME_INDEX] not over datapoint index (j).
// for(let i = 0; i < cardsData.targets.length; i++) {
// let target = cardsData.targets[i];
// for (let j = 0; j < cardsData.xBucketSize; j++) {
// let card = new Card();
// card.id = i*cardsData.xBucketSize + j;
// card.values = [];
// card.y = target;
// card.x = -1;
// // collect values from all timeseries with target
// for (let si = 0; si < cardsData.targetIndex[target].length; si++) {
// let s = data[cardsData.targetIndex[target][si]];
// if (s.datapoints.length <= j) {
// continue;
// }
// let datapoint = s.datapoints[j];
// if (card.values.length === 0) {
// card.x = datapoint[TIME_INDEX];
// }
// card.values.push(datapoint[VALUE_INDEX]);
// }
// card.minValue = _.min(card.values);
// card.maxValue = _.max(card.values);
// if (card.values.length > 1) {
// cardsData.multipleValues = true;
// card.multipleValues = true;
// card.value = card.maxValue; // max value by default
// } else {
// card.value = card.maxValue; // max value by default
// }
// if (cardsData.maxValue < card.maxValue)
// cardsData.maxValue = card.maxValue;
// if (cardsData.minValue > card.minValue)
// cardsData.minValue = card.minValue;
// if (card.x != -1) {
// cardsData.cards.push(card);
// }
// }
// }
// let cardsData = <CardsStorage> {
// cards: [],
// xBucketSize: 0,
// yBucketSize: 0,
// maxValue: 0,
// minValue: 0,
// multipleValues: false,
// noColorDefined: false,
// targets: [], // array of available unique targets
// targetIndex: {} // indices in data array for each of available unique targets
// };
// if (!data || data.length == 0) { return cardsData;}
// // Collect uniq timestamps from data and spread over targets and timestamps
// // collect uniq targets and their indices
// _.map(data, (d, i) => {
// cardsData.targetIndex[d.target] = _.concat(_.toArray(cardsData.targetIndex[d.target]), i)
// });
// // TODO add some logic for targets heirarchy
// cardsData.targets = _.keys(cardsData.targetIndex);
// cardsData.yBucketSize = cardsData.targets.length;
// // Maximum number of buckets over x axis
// cardsData.xBucketSize = _.max(_.map(data, d => d.datapoints.length));
// // Collect all values for each bucket from datapoints with similar target.
// // TODO aggregate values into buckets over datapoint[TIME_INDEX] not over datapoint index (j).
// for(let i = 0; i < cardsData.targets.length; i++) {
// let target = cardsData.targets[i];
// for (let j = 0; j < cardsData.xBucketSize; j++) {
// let card = new Card();
// card.id = i*cardsData.xBucketSize + j;
// card.values = [];
// card.y = target;
// card.x = -1;
// // collect values from all timeseries with target
// for (let si = 0; si < cardsData.targetIndex[target].length; si++) {
// let s = data[cardsData.targetIndex[target][si]];
// if (s.datapoints.length <= j) {
// continue;
// }
// let datapoint = s.datapoints[j];
// if (card.values.length === 0) {
// card.x = datapoint[TIME_INDEX];
// }
// card.values.push(datapoint[VALUE_INDEX]);
// }
// card.minValue = _.min(card.values);
// card.maxValue = _.max(card.values);
// if (card.values.length > 1) {
// cardsData.multipleValues = true;
// card.multipleValues = true;
// card.value = card.maxValue; // max value by default
// } else {
// card.value = card.maxValue; // max value by default
// }
// if (cardsData.maxValue < card.maxValue)
// cardsData.maxValue = card.maxValue;
// if (cardsData.minValue > card.minValue)
// cardsData.minValue = card.minValue;
// if (card.x != -1) {
// cardsData.cards.push(card);
// }
// }
// }
// return cardsData;
}
}]);
dist/module.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/partials/options_editor.html
Vendored
+30 -12
View File
@@ -148,8 +148,30 @@
label="Show tooltip"
checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-8">Y axis sort</label>
<gf-form-switch class="gf-form" label-class="width-8"
label="Show X axis"
checked="ctrl.panel.xAxis.show" on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-8"
label="Show Y axis"
checked="ctrl.panel.yAxis.show" on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form" ng-show="ctrl.panel.yAxis.show">
<label class="gf-form-label width-8">Min width</label>
<input type="number" ng-model="ctrl.panel.xAxis.minWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form" ng-show="ctrl.panel.yAxis.show">
<label class="gf-form-label width-8">Max width</label>
<input type="number" ng-model="ctrl.panel.xAxis.maxWidth" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Buckets</h5>
<div class="gf-form" ng-show="ctrl.panel.yAxis.show">
<label class="gf-form-label width-8">Rows sort</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input max-width-8"
ng-model="ctrl.panel.yAxisSort"
@@ -157,12 +179,8 @@
ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Bucket</h5>
<gf-form-switch class="gf-form" label-class="width-9"
<gf-form-switch class="gf-form" label-class="width-8"
label="Multiple values"
checked="ctrl.panel.useMax" on-change="ctrl.render()">
</gf-form-switch>
@@ -171,25 +189,25 @@
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Display nulls</label>
<label class="gf-form-label width-8">Display nulls</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input max-width-9" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['as empty', 'as zero']" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Min width for 1/1</label>
<label class="gf-form-label width-8">Min width</label>
<input type="number" class="gf-form-input width-5" placeholder="5" data-placement="right" bs-tooltip="'Minimal card width for 1/1 resolution in pixels'" ng-model="ctrl.panel.cards.cardMinWidth" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">V spacing</label>
<label class="gf-form-label width-8">V spacing</label>
<input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right" bs-tooltip="'Cards vertical spacing in pixels'" ng-model="ctrl.panel.cards.cardVSpacing" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">H spacing</label>
<label class="gf-form-label width-8">H spacing</label>
<input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right" bs-tooltip="'Cards horizontal spacing in pixels'" ng-model="ctrl.panel.cards.cardHSpacing" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Rounding</label>
<label class="gf-form-label width-8">Rounding</label>
<input type="number" class="gf-form-input width-5" placeholder="0" data-placement="right" bs-tooltip="'Cards rounding radius in pixels'" ng-model="ctrl.panel.cards.cardRound" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
</div>
dist/rendering.js
Vendored
+87 -58
View File
@@ -3,14 +3,14 @@
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, 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"); } }
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, Statusmap, StatusmapRenderer;
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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; }
function rendering(scope, elem, attrs, ctrl) {
@@ -83,6 +83,21 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
Y_AXIS_TICK_PADDING = 5;
MIN_SELECTION_WIDTH = 2;
Statusmap = function Statusmap() {
_classCallCheck(this, Statusmap);
_defineProperty(this, "$svg", void 0);
_defineProperty(this, "svg", void 0);
_defineProperty(this, "bucketMatrix", void 0);
_defineProperty(this, "timeRange", {
from: 0,
to: 0
});
};
_export("StatusmapRenderer", StatusmapRenderer =
/*#__PURE__*/
function () {
@@ -133,9 +148,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
_defineProperty(this, "yGridSize", 0);
_defineProperty(this, "data", void 0);
_defineProperty(this, "cardsData", void 0);
_defineProperty(this, "bucketMatrix", void 0);
_defineProperty(this, "panel", void 0);
@@ -162,7 +175,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
_defineProperty(this, "dataRangeWidingFactor", DATA_RANGE_WIDING_FACTOR);
// $heatmap is JQuery object, but heatmap is D3
this.$heatmap = this.elem.find('.status-heatmap-panel');
this.$heatmap = this.elem.find('.statusmap-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);
@@ -188,7 +201,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
this.ctrl.tickValueFormatter = this.tickValueFormatter.bind(this); /////////////////////////////
// Selection and crosshair //
/////////////////////////////
// Shared crosshair and tooltip
// Shared crosshair and tooltip this.empty = true;
appEvents.on('graph-hover', this.onGraphHover.bind(this), this.scope);
appEvents.on('graph-hover-clear', this.onGraphHoverClear.bind(this), this.scope); // Register selection listeners
@@ -264,6 +277,10 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
key: "addXAxis",
value: function addXAxis() {
// Scale timestamps to cards centers
//this.scope.xScale = this.xScale = d3.scaleTime()
// .domain([this.timeRange.from, this.timeRange.to])
// .range([this.xGridSize/2, this.chartWidth-this.xGridSize/2]);
// Buckets without the most recent
this.scope.xScale = this.xScale = d3.scaleTime().domain([this.timeRange.from, this.timeRange.to]).range([this.xGridSize / 2, this.chartWidth - this.xGridSize / 2]);
var ticks = this.chartWidth / DEFAULT_X_TICK_SIZE_PX;
var grafanaTimeFormatter = grafanaTimeFormat(ticks, this.timeRange.from, this.timeRange.to);
@@ -317,14 +334,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
}, {
key: "addYAxis",
value: function addYAxis() {
var ticks = _.uniq(_.map(this.data, function (d) {
return d.target;
})); // Set default Y min and max if no data
if (_.isEmpty(this.data)) {
ticks = [''];
}
var ticks = this.bucketMatrix.targets;
if (this.panel.yAxisSort == 'a → z') {
ticks.sort(function (a, b) {
@@ -392,8 +402,8 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
// calculate sizes for cards drawing
}, {
key: "addHeatmapCanvas",
value: function addHeatmapCanvas() {
key: "addStatusmapCanvas",
value: function addStatusmapCanvas() {
var heatmap_elem = this.$heatmap[0];
this.width = Math.floor(this.$heatmap.width()) - this.padding.right;
this.height = Math.floor(this.$heatmap.height()) - this.padding.bottom;
@@ -410,7 +420,12 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
this.cardVSpacing = this.panel.cards.cardVSpacing !== null ? this.panel.cards.cardVSpacing : CARD_V_SPACING;
this.cardRound = this.panel.cards.cardRound !== null ? this.panel.cards.cardRound : CARD_ROUND; // calculate yOffset for YAxis
this.yGridSize = Math.floor(this.chartHeight / this.cardsData.yBucketSize);
this.yGridSize = this.chartHeight;
if (this.bucketMatrix.targets.length > 0) {
this.yGridSize = Math.floor(this.chartHeight / this.bucketMatrix.targets.length);
}
this.cardHeight = this.yGridSize ? this.yGridSize - this.cardVSpacing : 0;
this.yOffset = this.cardHeight / 2;
this.addYAxis();
@@ -418,7 +433,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
this.chartWidth = this.width - this.yAxisWidth - this.margin.right; // TODO allow per-y cardWidth!
// we need to fill chartWidth with xBucketSize cards.
this.xGridSize = this.chartWidth / (this.cardsData.xBucketSize + 1);
this.xGridSize = this.chartWidth / (this.bucketMatrix.xBucketSize + 1);
this.cardWidth = this.xGridSize - this.cardHSpacing;
this.addXAxis();
this.xAxisHeight = this.getXAxisHeight(this.heatmap);
@@ -432,27 +447,34 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
}
}
}, {
key: "addHeatmap",
value: function addHeatmap() {
key: "addStatusmap",
value: function addStatusmap() {
var _this = this;
this.addHeatmapCanvas();
var maxValue = this.panel.color.max || this.cardsData.maxValue;
var minValue = this.panel.color.min || this.cardsData.minValue;
var maxValue = this.panel.color.max || this.bucketMatrix.maxValue;
var minValue = this.panel.color.min || this.bucketMatrix.minValue;
if (this.panel.color.mode !== 'discrete') {
this.colorScale = this.getColorScale(maxValue, minValue);
}
this.setOpacityScale(maxValue);
var cards = this.heatmap.selectAll(".status-heatmap-card").data(this.cardsData.cards);
cards.append("title");
cards = cards.enter().append("rect").attr("cardId", function (c) {
return c.id;
}).attr("x", this.getCardX.bind(this)).attr("width", this.getCardWidth.bind(this)).attr("y", this.getCardY.bind(this)).attr("height", this.getCardHeight.bind(this)).attr("rx", this.cardRound).attr("ry", this.cardRound).attr("class", "bordered status-heatmap-card").style("fill", this.getCardColor.bind(this)).style("stroke", this.getCardColor.bind(this)).style("stroke-width", 0) //.style("stroke-width", getCardStrokeWidth)
this.setOpacityScale(maxValue); // Draw cards from buckets.
this.heatmap.selectAll(".statusmap-cards-row").data(this.bucketMatrix.targets).enter().selectAll(".statustmap-card").data(function (target) {
return _this.bucketMatrix.buckets[target];
}).enter().append("rect").attr("cardId", function (b) {
return b.id;
}).attr("xid", function (b) {
return b.xid;
}).attr("yid", function (b) {
return b.yLabel;
}).attr("x", this.getCardX.bind(this)).attr("width", this.getCardWidth.bind(this)).attr("y", this.getCardY.bind(this)).attr("height", this.getCardHeight.bind(this)).attr("rx", this.cardRound).attr("ry", this.cardRound).attr("class", function (b) {
return b.isEmpty() ? "empty-card" : "bordered statusmap-card";
}).style("fill", this.getCardColor.bind(this)).style("stroke", this.getCardColor.bind(this)).style("stroke-width", 0) //.style("stroke-width", getCardStrokeWidth)
//.style("stroke-dasharray", "3,3")
.style("opacity", this.getCardOpacity.bind(this));
var $cards = this.$heatmap.find(".status-heatmap-card");
.style("opacity", this.getCardOpacity.bind(this)); // Set mouse events on cards.
var $cards = this.$heatmap.find(".statusmap-card + .bordered");
$cards.on("mouseenter", function (event) {
_this.tooltip.mouseOverBucket = true;
@@ -514,10 +536,12 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
}
}, {
key: "getCardX",
value: function getCardX(d) {
value: function getCardX(b) {
var x; // cx is the center of the card. Card should be placed to the left.
//let cx = this.xScale(d.x);
var cx = this.xScale(d.x);
var rightX = b.relTo / this.bucketMatrix.rangeMs * this.chartWidth;
var cx = rightX - this.cardWidth / 2;
if (cx - this.cardWidth / 2 < 0) {
x = this.yAxisWidth + this.cardHSpacing / 2;
@@ -530,9 +554,11 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
}, {
key: "getCardWidth",
value: function getCardWidth(d) {
value: function getCardWidth(b) {
//return 20;
var w;
var cx = this.xScale(d.x);
var rightX = b.relTo / this.bucketMatrix.rangeMs * this.chartWidth;
var cx = rightX - this.cardWidth / 2; //let cx = this.xScale(d.x);
if (cx < this.cardWidth / 2) {
// Center should not exceed half of card.
@@ -554,16 +580,20 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
}
return w;
}
} // Top y for card.
// yScale gives ???
//
}, {
key: "getCardY",
value: function getCardY(d) {
return this.yScale(d.y) + this.chartTop - this.cardHeight - this.cardVSpacing / 2;
value: function getCardY(b) {
return this.yScale(b.yLabel) + this.chartTop - this.cardHeight - this.cardVSpacing / 2;
}
}, {
key: "getCardHeight",
value: function getCardHeight(d) {
var ys = this.yScale(d.y);
value: function getCardHeight(b) {
//return 20;
var ys = this.yScale(b.yLabel);
var y = ys + this.chartTop - this.cardHeight - this.cardVSpacing / 2;
var h = this.cardHeight; // Cut card height to prevent overlay
@@ -588,35 +618,35 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
}
}, {
key: "getCardColor",
value: function getCardColor(d) {
value: function getCardColor(b) {
if (this.panel.color.mode === 'opacity') {
return this.panel.color.cardColor;
} else if (this.panel.color.mode === 'spectrum') {
return this.colorScale(d.value);
return this.colorScale(b.value);
} else if (this.panel.color.mode === 'discrete') {
if (this.panel.seriesFilterIndex != -1 || this.panel.seriesFilterIndex != null) {
return this.ctrl.discreteExtraSeries.getBucketColorSingle(d.values[this.panel.seriesFilterIndex]);
return this.ctrl.discreteExtraSeries.getBucketColorSingle(b.values[this.panel.seriesFilterIndex]);
} else {
return this.ctrl.discreteExtraSeries.getBucketColor(d.values);
return this.ctrl.discreteExtraSeries.getBucketColor(b.values);
}
}
}
}, {
key: "getCardOpacity",
value: function getCardOpacity(d) {
if (this.panel.nullPointMode === 'as empty' && d.value == null) {
value: function getCardOpacity(b) {
if (this.panel.nullPointMode === 'as empty' && b.value == null) {
return 0;
}
if (this.panel.color.mode === 'opacity') {
return this.opacityScale(d.value);
return this.opacityScale(b.value);
} else {
return 1;
}
}
}, {
key: "getCardStrokeWidth",
value: function getCardStrokeWidth(d) {
value: function getCardStrokeWidth(b) {
if (this.panel.color.mode === 'discrete') {
return '1';
}
@@ -705,8 +735,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
//const pos = this.getEventPos(event, offset);
this.emitGraphHoverEvent(event);
this.drawCrosshair(offset.x);
this.tooltip.show(event); //, data); // pos, this.data
this.tooltip.show(event);
this.annotationTooltip.show(event);
}
}
@@ -818,22 +847,22 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
}, {
key: "render",
value: function render() {
this.data = this.ctrl.data;
this.panel = this.ctrl.panel;
this.timeRange = this.ctrl.range;
this.cardsData = this.ctrl.cardsData;
this.bucketMatrix = this.ctrl.bucketMatrix;
if (!this.data || !this.cardsData || !this.setElementHeight()) {
if (!this.bucketMatrix || !this.setElementHeight()) {
return;
} // Draw default axes and return if no data
if (_.isEmpty(this.cardsData.cards)) {
this.addHeatmapCanvas();
this.addStatusmapCanvas();
if (this.bucketMatrix.noDatapoints) {
return;
}
this.addHeatmap();
this.addStatusmap();
this.scope.yAxisWidth = this.yAxisWidth;
this.scope.xAxisHeight = this.xAxisHeight;
this.scope.chartHeight = this.chartHeight;
dist/rendering.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/statusmap_data.js
Vendored
+123 -36
View File
@@ -3,71 +3,158 @@
System.register([], function (_export, _context) {
"use strict";
var Card, CardsStorage;
var Bucket, BucketMatrix;
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: [],
execute: function () {
// A holder of values
_export("Card", Card = // uniq
// Array of values in this bucket
// card has multiple values
// card has values that has no color
//
//
//
function Card() {
_classCallCheck(this, Card);
// A holder of a group of values
_export("Bucket", Bucket =
/*#__PURE__*/
function () {
// uniq id
// Array of values in this bucket
// From pr/86
// a bucket has multiple values
// a bucket has values that has no mapped color
// y label
// This value can be used to calculate a x coordinate on a graph
// a time range of this bucket
// to and from relative to real "from"
// Saved minimum and maximum of values in this bucket
// A value if multiple values is not allowed
function Bucket() {
_classCallCheck(this, Bucket);
_defineProperty(this, "id", 0);
_defineProperty(this, "id", 0);
_defineProperty(this, "values", []);
_defineProperty(this, "values", []);
_defineProperty(this, "columns", []);
_defineProperty(this, "columns", []);
_defineProperty(this, "multipleValues", false);
_defineProperty(this, "multipleValues", false);
_defineProperty(this, "noColorDefined", false);
_defineProperty(this, "noColorDefined", false);
_defineProperty(this, "y", "");
_defineProperty(this, "y", "");
_defineProperty(this, "x", 0);
_defineProperty(this, "yLabel", "");
_defineProperty(this, "minValue", 0);
_defineProperty(this, "x", 0);
_defineProperty(this, "maxValue", 0);
_defineProperty(this, "xid", 0);
_defineProperty(this, "value", 0);
});
_defineProperty(this, "from", 0);
_export("CardsStorage", CardsStorage = function CardsStorage() {
_classCallCheck(this, CardsStorage);
_defineProperty(this, "to", 0);
_defineProperty(this, "cards", []);
_defineProperty(this, "relFrom", 0);
_defineProperty(this, "xBucketSize", 0);
_defineProperty(this, "relTo", 0);
_defineProperty(this, "yBucketSize", 0);
_defineProperty(this, "mostRecent", false);
_defineProperty(this, "maxValue", void 0);
_defineProperty(this, "minValue", 0);
_defineProperty(this, "minValue", void 0);
_defineProperty(this, "maxValue", 0);
_defineProperty(this, "multipleValues", false);
_defineProperty(this, "value", 0);
}
_defineProperty(this, "noColorDefined", false);
_createClass(Bucket, [{
key: "belong",
value: function belong(ts) {
return ts >= this.from && ts <= this.to;
}
}, {
key: "put",
value: function put(value) {
this.values.push(value);
}
}, {
key: "done",
value: function done() {// calculate min, max, value
}
}, {
key: "isEmpty",
value: function isEmpty() {
return this.values.length == 0;
}
}]);
_defineProperty(this, "targets", []);
return Bucket;
}());
_defineProperty(this, "targetIndex", void 0);
_export("BucketMatrix", BucketMatrix =
/*#__PURE__*/
function () {
// buckets for each y label
// a flag that indicate that buckets has stub values
// TODO remove: a transition from CardsData
function BucketMatrix() {
_classCallCheck(this, BucketMatrix);
this.maxValue = 0;
this.minValue = 0;
});
_defineProperty(this, "buckets", {});
_defineProperty(this, "maxValue", 0);
_defineProperty(this, "minValue", 0);
_defineProperty(this, "multipleValues", false);
_defineProperty(this, "noColorDefined", false);
_defineProperty(this, "noDatapoints", false);
_defineProperty(this, "targets", []);
_defineProperty(this, "rangeMs", 0);
_defineProperty(this, "intervalMs", 0);
_defineProperty(this, "xBucketSize", 0);
}
_createClass(BucketMatrix, [{
key: "get",
value: function get(yid, xid) {
if (yid in this.buckets) {
if (xid in this.buckets[yid]) {
return this.buckets[yid][xid];
}
}
return new Bucket();
}
}, {
key: "hasData",
value: function hasData() {
var _this = this;
var hasData = false;
if (this.targets.length > 0) {
this.targets.map(function (target) {
if (_this.buckets[target].length > 0) {
hasData = true;
}
});
}
return hasData;
}
}]);
return BucketMatrix;
}());
}
};
});
dist/statusmap_data.js.map
Vendored
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["../src/statusmap_data.ts"],"names":["Card","CardsStorage","maxValue","minValue"],"mappings":";;;;;;;;;;;;;;AAEA;sBACMA,I,GACF;AAEA;AAGA;AAEA;AAEA;AAEA;AAEA;AAKA,sBAAc;AAAA;;AAAA,oCAjBD,CAiBC;;AAAA,wCAfE,EAeF;;AAAA,yCAdG,EAcH;;AAAA,gDAZY,KAYZ;;AAAA,gDAVY,KAUZ;;AAAA,mCARF,EAQE;;AAAA,mCANF,CAME;;AAAA,0CAJK,CAIL;;AAAA,0CAHK,CAGL;;AAAA,uCAFE,CAEF;AAEb,O;;8BAGCC,Y,GAWF,wBAAc;AAAA;;AAAA,uCAVE,EAUF;;AAAA,6CATQ,CASR;;AAAA,6CARQ,CAQR;;AAAA;;AAAA;;AAAA,gDALY,KAKZ;;AAAA,gDAJY,KAIZ;;AAAA,yCAHM,EAGN;;AAAA;;AACV,aAAKC,QAAL,GAAgB,CAAhB;AACA,aAAKC,QAAL,GAAgB,CAAhB;AAEH,O","sourcesContent":["\n\n// A holder of values\nclass Card {\n // uniq\n id: number = 0;\n // Array of values in this bucket\n values: any[] = [];\n columns: any[] = [];\n // card has multiple values\n multipleValues: boolean = false;\n // card has values that has no color\n noColorDefined: boolean = false;\n //\n y: string = \"\";\n //\n x: number = 0;\n //\n minValue: number = 0;\n maxValue: number = 0;\n value: number = 0;\n \n constructor() {\n\n }\n }\n \nclass CardsStorage {\n cards: Card[] = [];\n xBucketSize: number = 0;\n yBucketSize: number = 0;\n maxValue: number;\n minValue: number;\n multipleValues: boolean = false;\n noColorDefined: boolean = false;\n targets: string[] = [];\n targetIndex: any;\n\n constructor() {\n this.maxValue = 0;\n this.minValue = 0;\n\n }\n }\n\nexport {CardsStorage, Card};"],"file":"statusmap_data.js"}
{"version":3,"sources":["../src/statusmap_data.ts"],"names":["Bucket","ts","from","to","value","values","push","length","BucketMatrix","yid","xid","buckets","hasData","targets","map","target"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;wBACMA,M;;;AACJ;AAEA;AAEqB;AACrB;AAEA;AAEA;AAGA;AAGA;AAGA;AAMA;AAGA;AAGA,0BAAc;AAAA;;AAAA,sCA7BD,CA6BC;;AAAA,0CA3BE,EA2BF;;AAAA,2CA1BG,EA0BH;;AAAA,kDAxBY,KAwBZ;;AAAA,kDAtBY,KAsBZ;;AAAA,qCApBF,EAoBE;;AAAA,0CAnBG,EAmBH;;AAAA,qCAjBF,CAiBE;;AAAA,uCAhBA,CAgBA;;AAAA,wCAdC,CAcD;;AAAA,sCAbD,CAaC;;AAAA,2CAXI,CAWJ;;AAAA,yCAVE,CAUF;;AAAA,8CARQ,KAQR;;AAAA,4CALK,CAKL;;AAAA,4CAJK,CAIL;;AAAA,yCAFE,CAEF;AACb;;;;iCAEMC,E,EAAqB;AAC1B,mBAAOA,EAAE,IAAI,KAAKC,IAAX,IAAmBD,EAAE,IAAI,KAAKE,EAArC;AACD;;;8BAEGC,K,EAAY;AACd,iBAAKC,MAAL,CAAYC,IAAZ,CAAiBF,KAAjB;AACD;;;iCAEM,CACL;AACD;;;oCAEkB;AACjB,mBAAO,KAAKC,MAAL,CAAYE,MAAZ,IAAsB,CAA7B;AACD;;;;;;8BAKGC,Y;;;AACJ;AAMA;AAOyB;AAEzB,gCAAc;AAAA;;AAAA,2CAd0B,EAc1B;;AAAA,4CAbK,CAaL;;AAAA,4CAZK,CAYL;;AAAA,kDAXY,KAWZ;;AAAA,kDAVY,KAUZ;;AAAA,gDARU,KAQV;;AAAA,2CANM,EAMN;;AAAA,2CALI,CAKJ;;AAAA,8CAJO,CAIP;;AAAA,+CAFQ,CAER;AACb;;;;8BAEGC,G,EAAaC,G,EAAqB;AACpC,gBAAID,GAAG,IAAI,KAAKE,OAAhB,EAAyB;AACvB,kBAAID,GAAG,IAAI,KAAKC,OAAL,CAAaF,GAAb,CAAX,EAA8B;AAC5B,uBAAO,KAAKE,OAAL,CAAaF,GAAb,EAAkBC,GAAlB,CAAP;AACD;AACF;;AACD,mBAAO,IAAIV,MAAJ,EAAP;AACD;;;oCAEkB;AAAA;;AACjB,gBAAIY,OAAO,GAAG,KAAd;;AACA,gBAAI,KAAKC,OAAL,CAAaN,MAAb,GAAsB,CAA1B,EAA6B;AAC3B,mBAAKM,OAAL,CAAaC,GAAb,CAAiB,UAACC,MAAD,EAAmB;AAClC,oBAAI,KAAI,CAACJ,OAAL,CAAaI,MAAb,EAAqBR,MAArB,GAA8B,CAAlC,EAAqC;AACnCK,kBAAAA,OAAO,GAAG,IAAV;AACD;AACF,eAJD;AAKD;;AACD,mBAAOA,OAAP;AACD","sourcesContent":["// A holder of a group of values\nclass Bucket {\n // uniq id\n id: number = 0;\n // Array of values in this bucket\n values: any[] = [];\n columns: any[] = []; // From pr/86\n // a bucket has multiple values\n multipleValues: boolean = false;\n // a bucket has values that has no mapped color\n noColorDefined: boolean = false;\n // y label\n y: string = \"\";\n yLabel: string = \"\";\n // This value can be used to calculate a x coordinate on a graph\n x: number = 0;\n xid: number = 0;\n // a time range of this bucket\n from: number = 0;\n to: number = 0;\n // to and from relative to real \"from\"\n relFrom: number = 0;\n relTo: number = 0;\n\n mostRecent: boolean = false;\n\n // Saved minimum and maximum of values in this bucket\n minValue: number = 0;\n maxValue: number = 0;\n // A value if multiple values is not allowed\n value: number = 0;\n\n constructor() {\n }\n\n belong(ts: number): boolean {\n return ts >= this.from && ts <= this.to;\n }\n\n put(value: any) {\n this.values.push(value);\n }\n\n done() {\n // calculate min, max, value\n }\n\n isEmpty(): boolean {\n return this.values.length == 0;\n }\n\n}\n\n\nclass BucketMatrix {\n // buckets for each y label\n buckets: {[yLabel: string]: Bucket[]} = {};\n maxValue: number = 0;\n minValue: number = 0;\n multipleValues: boolean = false;\n noColorDefined: boolean = false;\n // a flag that indicate that buckets has stub values\n noDatapoints: boolean = false;\n\n targets: string[] = [];\n rangeMs: number = 0;\n intervalMs: number = 0;\n\n xBucketSize: number = 0; // TODO remove: a transition from CardsData\n\n constructor() {\n }\n\n get(yid: string, xid: number): Bucket {\n if (yid in this.buckets) {\n if (xid in this.buckets[yid]) {\n return this.buckets[yid][xid];\n }\n }\n return new Bucket();\n }\n\n hasData(): boolean {\n let hasData = false;\n if (this.targets.length > 0) {\n this.targets.map((target:string) => {\n if (this.buckets[target].length > 0) {\n hasData = true;\n }\n });\n }\n return hasData;\n }\n}\n\nexport {Bucket, BucketMatrix };"],"file":"statusmap_data.js"}
dist/tooltip.js
Vendored
+17 -21
View File
@@ -103,38 +103,34 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
value: function show(pos) {
if (!this.panel.tooltip.show || !this.tooltip) {
return;
} // shared tooltip mode
} // TODO support for shared tooltip mode
if (pos.panelRelY) {
return;
}
var cardId = d3.select(pos.target).attr('cardId');
var cardEl = d3.select(pos.target);
var yid = cardEl.attr('yid');
var xid = cardEl.attr('xid');
var bucket = this.panelCtrl.bucketMatrix.get(yid, xid); // TODO string-to-number conversion for xid
if (!cardId) {
if (!bucket || bucket.isEmpty()) {
this.destroy();
return;
}
var card = this.panelCtrl.cardsData.cards[cardId];
if (!card) {
this.destroy();
return;
}
var x = card.x;
var y = card.y;
var value = card.value;
var values = card.values;
var timestamp = bucket.to;
var name = bucket.yLabel;
var value = bucket.value;
var values = bucket.values;
var tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
var time = this.dashboard.formatDate(+x, tooltipTimeFormat);
var time = this.dashboard.formatDate(+timestamp, tooltipTimeFormat);
var tooltipHtml = "<div class=\"graph-tooltip-time\">".concat(time, "</div>\n <div class=\"statusmap-histogram\"></div>");
var 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);
@@ -148,27 +144,27 @@ System.register(["d3", "jquery", "lodash"], function (_export, _context) {
statusesHtml = "statuses:";
}
tooltipHtml += "\n <div>\n name: <b>".concat(y, "</b> <br>\n ").concat(statusesHtml, "\n <ul>\n ").concat(_.join(_.map(statuses, function (v) {
tooltipHtml += "\n <div>\n name: <b>".concat(name, "</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>".concat(y, "</b> <br>\n value: <b>").concat(value, "</b> <br>\n </div>");
tooltipHtml += "<div> \n name: <b>".concat(name, "</b> <br>\n value: <b>").concat(value, "</b> <br>\n </div>");
} else {
tooltipHtml += "<div>\n name: <b>".concat(y, "</b> <br>\n values:\n <ul>\n ").concat(_.join(_.map(values, function (v) {
tooltipHtml += "<div>\n name: <b>".concat(name, "}</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!";
if (!this.panel.useMax && card.multipleValues) {
if (!this.panel.useMax && bucket.multipleValues) {
tooltipHtml += "<div><b>Error:</b> ".concat(this.panelCtrl.dataWarnings.multipleValues.title, "</div>");
} // Discrete mode errors
if (this.panel.color.mode === 'discrete') {
if (card.noColorDefined) {
if (bucket.noColorDefined) {
var badValues = this.panelCtrl.discreteExtraSeries.getNotColoredValues(values);
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>");
dist/tooltip.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long