IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

heatmap: initial ES histogram support

Browse Source
This commit is contained in:
Alexander Zobnin 2017-03-30 21:36:36 +03:00
parent 3170f0d84a
commit 9ddfeaa9c2
3 changed files with 74 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/plugins/panel/heatmap/axes_editor.ts
View File

@ -7,6 +7,7 @@ export class AxesEditorCtrl {
panelCtrl: any;
unitFormats: any;
logScales: any;
dataFormats: any;
/** @ngInject */
constructor($scope) {
@ -23,6 +24,11 @@ export class AxesEditorCtrl {
'log (base 32)': 32,
'log (base 1024)': 1024
};
this.dataFormats = {
'Timeseries': 'timeseries',
'ES histogram': 'es_histogram'
};
}
setUnitFormat(subItem) {

78
public/app/plugins/panel/heatmap/heatmap_ctrl.ts
View File

@ -7,7 +7,7 @@ import TimeSeries from 'app/core/time_series';
import {axesEditor} from './axes_editor';
import {heatmapDisplayEditor} from './display_editor';
import rendering from './rendering';
import {convertToHeatMap, getMinLog} from './heatmap_data_converter';
import { convertToHeatMap, elasticHistogramToHeatmap, getMinLog} from './heatmap_data_converter';
let X_BUCKET_NUMBER_DEFAULT = 30;
let Y_BUCKET_NUMBER_DEFAULT = 10;
@ -27,6 +27,7 @@ let panelDefaults = {
colorScheme: 'interpolateSpectral',
fillBackground: false
},
dataFormat: 'timeseries',
xBucketSize: null,
xBucketNumber: null,
yBucketSize: null,
@ -137,7 +138,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
onRender() {
if (!this.range) { return; }
let xBucketSize, yBucketSize;
let xBucketSize, yBucketSize, heatmapStats, bucketsData;
let logBase = this.panel.yAxis.logBase;
let xBucketNumber = this.panel.xBucketNumber || X_BUCKET_NUMBER_DEFAULT;
let xBucketSizeByNumber = Math.floor((this.range.to - this.range.from) / xBucketNumber);
@ -152,25 +153,49 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
xBucketSize = Number(this.panel.xBucketSize);
}
// Calculate Y bucket size
let heatmapStats = this.parseSeries(this.series);
let yBucketNumber = this.panel.yBucketNumber || Y_BUCKET_NUMBER_DEFAULT;
if (logBase !== 1) {
yBucketSize = this.panel.yAxis.splitFactor;
} else {
if (heatmapStats.max === heatmapStats.min) {
if (heatmapStats.max) {
yBucketSize = heatmapStats.max / Y_BUCKET_NUMBER_DEFAULT;
} else {
yBucketSize = 1;
}
} else {
yBucketSize = (heatmapStats.max - heatmapStats.min) / yBucketNumber;
}
yBucketSize = this.panel.yBucketSize || yBucketSize;
}
if (this.panel.dataFormat === 'es_histogram') {
heatmapStats = this.parseHistogramSeries(this.series);
let bucketsData = convertToHeatMap(this.series, yBucketSize, xBucketSize, logBase);
// Calculate Y bucket size
let yBucketNumber = this.panel.yBucketNumber || Y_BUCKET_NUMBER_DEFAULT;
if (logBase !== 1) {
yBucketSize = this.panel.yAxis.splitFactor;
} else {
if (heatmapStats.max === heatmapStats.min) {
if (heatmapStats.max) {
yBucketSize = heatmapStats.max / Y_BUCKET_NUMBER_DEFAULT;
} else {
yBucketSize = 1;
}
} else {
yBucketSize = (heatmapStats.max - heatmapStats.min) / yBucketNumber;
}
yBucketSize = this.panel.yBucketSize || yBucketSize;
}
bucketsData = elasticHistogramToHeatmap(this.series);
} else {
// Calculate Y bucket size
heatmapStats = this.parseSeries(this.series);
let yBucketNumber = this.panel.yBucketNumber || Y_BUCKET_NUMBER_DEFAULT;
if (logBase !== 1) {
yBucketSize = this.panel.yAxis.splitFactor;
} else {
if (heatmapStats.max === heatmapStats.min) {
if (heatmapStats.max) {
yBucketSize = heatmapStats.max / Y_BUCKET_NUMBER_DEFAULT;
} else {
yBucketSize = 1;
}
} else {
yBucketSize = (heatmapStats.max - heatmapStats.min) / yBucketNumber;
}
yBucketSize = this.panel.yBucketSize || yBucketSize;
}
bucketsData = convertToHeatMap(this.series, yBucketSize, xBucketSize, logBase);
}
// Set default Y range if no data
if (!heatmapStats.min && !heatmapStats.max) {
@ -252,6 +277,19 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
};
}
parseHistogramSeries(series) {
let bounds = _.map(series, s => Number(s.alias));
let min = _.min(bounds);
let minLog = _.min(bounds);
let max = _.max(bounds);
return {
max: max,
min: min,
minLog: minLog
};
}
link(scope, elem, attrs, ctrl) {
rendering(scope, elem, attrs, ctrl);
}

10
public/app/plugins/panel/heatmap/partials/axes_editor.html
View File

@ -82,4 +82,14 @@
ng-model="ctrl.panel.xBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Data format</h5>
<div class="gf-form">
<label class="gf-form-label width-5">Format</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="ctrl.panel.dataFormat" ng-options="v as k for (k, v) in editor.dataFormats" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
</div>