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

fix: calculate cardWidth over max datapoints for target

Browse Source 
- correct render of inconsistent timestamps between targets
This commit is contained in:
Ivan Mikheykin
2019-03-05 15:47:43 +03:00
parent 27b674640b
commit 51623fdc72
9 changed files with 43 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/color_legend.js
Vendored
+2 -2
View File
@@ -326,7 +326,7 @@ System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic
/**
* Color legend for heatmap editor.
* Bigger color legend for opacity and spectrum modes editor.
*/
mod.directive('optionsColorLegend', function () {
return {
@@ -360,7 +360,7 @@ System.register(['angular', 'lodash', 'jquery', 'd3', './libs/d3-scale-chromatic
});
/**
* Heatmap legend with scale values.
* Graph legend with values.
*/
mod.directive('statusHeatmapLegend', function () {
return {
dist/color_legend.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/rendering.js
Vendored
+1
View File
@@ -243,6 +243,7 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
yAxisWidth = getYAxisWidth(heatmap) + Y_AXIS_TICK_PADDING;
chartWidth = width - yAxisWidth - margin.right;
// TODO allow per-y cardWidth!
// we need to fill chartWidth with xBucketSize cards.
xGridSize = chartWidth / (cardsData.xBucketSize + 1);
cardWidth = xGridSize - cardHSpacing;
dist/rendering.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/status_heatmap_ctrl.js
Vendored
+20 -17
View File
@@ -262,46 +262,49 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
maxValue: 0,
minValue: 0,
multipleValues: false,
noColorDefined: 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 targets and their indexes in data array
cardsData.targetIndex = {};
for (var i = 0; i < data.length; i++) {
var ts = data[i];
var target = ts.target;
if (cardsData.targetIndex[target] == undefined) {
cardsData.targetIndex[target] = [];
}
cardsData.targetIndex[target].push(i);
}
// 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;
cardsData.xBucketSize = _.min(_.map(data, function (d) {
// 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.
for (var _i = 0; _i < cardsData.targets.length; _i++) {
var _target = cardsData.targets[_i];
// 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 = {
id: _i * cardsData.xBucketSize + j,
id: i * cardsData.xBucketSize + j,
values: [],
multipleValues: false,
noColorDefined: false
};
// collect values from all timeseries with target
for (var si = 0; si < cardsData.targetIndex[_target].length; si++) {
var s = data[cardsData.targetIndex[_target][si]];
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];
dist/status_heatmap_ctrl.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/color_legend.js
+2 -2
View File
@@ -11,7 +11,7 @@ let mod = angular.module('grafana.directives');
const LEGEND_STEP_WIDTH = 2;
/**
* Color legend for heatmap editor.
* Bigger color legend for opacity and spectrum modes editor.
*/
mod.directive('optionsColorLegend', function() {
return {
@@ -45,7 +45,7 @@ mod.directive('optionsColorLegend', function() {
});
/**
* Heatmap legend with scale values.
* Graph legend with values.
*/
mod.directive('statusHeatmapLegend', function() {
return {
src/rendering.js
+1
View File
@@ -254,6 +254,7 @@ export default function link(scope, elem, attrs, ctrl) {
yAxisWidth = getYAxisWidth(heatmap) + Y_AXIS_TICK_PADDING;
chartWidth = width - yAxisWidth - margin.right;
// TODO allow per-y cardWidth!
// we need to fill chartWidth with xBucketSize cards.
xGridSize = chartWidth / (cardsData.xBucketSize+1);
cardWidth = xGridSize - cardHSpacing;
src/status_heatmap_ctrl.js
+14 -11
View File
@@ -283,27 +283,27 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
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 targets and their indexes in data array
cardsData.targetIndex = {};
for (let i = 0; i < data.length; i++) {
let ts = data[i];
let target = ts.target;
if (cardsData.targetIndex[target] == undefined) {
cardsData.targetIndex[target] = []
}
cardsData.targetIndex[target].push(i);
}
// 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;
cardsData.xBucketSize = _.min(_.map(data, d => d.datapoints.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];
@@ -318,6 +318,9 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
// 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];