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: pagination

Browse Source 
Continuation of PR #93.
This commit is contained in:
Joaquín Jiménez García
2020-07-13 14:16:37 +03:00
committed by Ivan Mikheykin
parent 4af775ee1f
commit 99ba3cbdd6
25 changed files with 1223 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/rendering.js
Vendored
+102 -10
View File
@@ -5,6 +5,14 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
var _, $, moment, kbn, appEvents, contextSrv, d3, d3ScaleChromatic, StatusmapTooltip, AnnotationTooltip, renderComplete, CoreEvents, PanelEvents, 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
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; }
@@ -238,7 +246,11 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
height = parseInt(height.replace('px', ''), 10);
}
height -= this.panel.legend.show ? 32 : 10; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
if (this.panel.usingPagination) {
height -= this.panel.legend.show ? 140 : 10; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
} else {
height -= this.panel.legend.show ? 50 : 10; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
}
this.$heatmap.css('height', height + 'px');
return true;
@@ -305,8 +317,10 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
}, {
key: "getYScale",
value: function getYScale(ticks) {
var range = [];
var step = this.chartHeight / ticks.length; // svg has y=0 on the top, so top card should have a minimal value in range
var range = []; //let step = this.chartHeight / ticks.length;
console.log('GETYSCALE - RENDERING', this.ctrl.getPaginationSize());
var step = this.chartHeight / this.ctrl.getPaginationSize(); // svg has y=0 on the top, so top card should have a minimal value in range
range.push(step);
@@ -320,8 +334,10 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
}, {
key: "getYAxisScale",
value: function getYAxisScale(ticks) {
var range = [];
var step = this.chartHeight / ticks.length; // svg has y=0 on the top, so top tick should have a minimal value in range
var range = []; //let step = this.chartHeight / ticks.length;
console.log('GETYAXISSCALE - RENDERING', this.ctrl.getPaginationSize());
var step = this.chartHeight / this.ctrl.getPaginationSize(); // svg has y=0 on the top, so top tick should have a minimal value in range
range.push(this.yOffset);
@@ -334,7 +350,21 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
}, {
key: "addYAxis",
value: function addYAxis() {
var ticks = this.bucketMatrix.targets;
var ticks;
if (this.ctrl.ticksWhenPaginating !== undefined && this.ctrl.panel.usingPagination) {
ticks = _.uniq(_.map(this.ctrl.ticksWhenPaginating));
} else {
ticks = this.bucketMatrix.targets; //ticks = _.uniq(_.map(this.data, d => d.target));
} // // Set default Y min and max if no data
// if (_.isEmpty(this.data)) {
// ticks = [''];
// }
//
// // TODO
// // New version!
// let ticks = this.bucketMatrix.targets;
if (this.panel.yAxisSort == 'a → z') {
ticks.sort(function (a, b) {
@@ -424,8 +454,15 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
this.yGridSize = this.chartHeight;
if (this.bucketMatrix.targets.length > 0) {
this.yGridSize = Math.floor(this.chartHeight / this.bucketMatrix.targets.length);
if (this.ctrl.panel.usingPagination) {
// Pagination mode overrides count of rows.
//this.yGridSize = Math.floor(this.chartHeight / this.ctrl.ticksWhenPaginating.length);
console.log('addHeatmapCanvas - rendering', this.ctrl.getPaginationSize());
this.yGridSize = Math.floor(this.chartHeight / this.ctrl.getPaginationSize());
} else {
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;
@@ -581,7 +618,6 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
return w;
} // Top y for card.
// yScale gives ???
//
}, {
key: "getCardY",
@@ -845,6 +881,61 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
if (!this.bucketMatrix || !this.setElementHeight()) {
return;
} else {
// TODO pagination!
this.ctrl.cardsDataComplete = this.ctrl.bucketMatrix.buckets;
if (this.ctrl.panel.usingPagination) {
if (!this.bucketMatrix.targets) {
return;
}
this.ctrl.setFirstPageElement(this.ctrl.getCurrentPage() * this.ctrl.getPaginationSize() + 1);
var elems = this.ctrl.getTotalElements();
console.log('total elems in add heatmap canvas', elems);
if (elems < this.ctrl.getFirstPageElement()) {
this.ctrl.setCurrentPage(0);
this.render();
}
if (this.ctrl.getPaginationSize() >= this.ctrl.getTotalElements()) {
this.ctrl.setLastPageElement(this.ctrl.getTotalElements());
} else {
if (this.ctrl.getCurrentPage() + 1 === this.ctrl.getNumberOfPages() && this.ctrl.getCurrentPage() > 0) {
this.ctrl.setLastPageElement(this.ctrl.getTotalElements());
} else {
this.ctrl.setLastPageElement(this.ctrl.getCurrentPage() * this.ctrl.getPaginationSize() + this.ctrl.getPaginationSize());
}
}
var cardsList = this.ctrl.bucketMatrix.targets.slice(this.ctrl.getPaginationSize() * this.ctrl.getCurrentPage(), this.ctrl.getPaginationSize() * this.ctrl.getCurrentPage() + this.ctrl.getPaginationSize());
var cardsToShow = [];
var labelsToShow = []; // Rewrite for bucket matrix.
for (var i = 0; i < this.cardsData.cards.length; i++) {
var card = this.cardsData.cards[i];
for (var j = 0; j < cardsList.length; j++) {
var value = cardsList[j];
if (card.y === value) {
cardsToShow.push(card);
labelsToShow.push(value);
}
}
}
var labelsToShowClean = _toConsumableArray(new Set(labelsToShow));
this.cardsData.cards = cardsToShow.slice();
this.ctrl.ticksWhenPaginating = labelsToShowClean;
cardsToShow = undefined;
} else {
var pageSize = this.ctrl.bucketMatrix.targets.length;
this.ctrl.getPaginationSize(pageSize);
this.ctrl.ticksWhenPaginating = undefined;
}
} // Draw default axes and return if no data
@@ -859,7 +950,8 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
this.scope.xAxisHeight = this.xAxisHeight;
this.scope.chartHeight = this.chartHeight;
this.scope.chartWidth = this.chartWidth;
this.scope.chartTop = this.chartTop;
this.scope.chartTop = this.chartTop; // TODO pagination. Why this needed?
//this.ctrl.cardsData.cards = this.ctrl.cardsDataComplete.slice();
}
}, {
key: "_renderAnnotations",