mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
heatmp: removed series stats option, lacked tests
This commit is contained in:
@@ -46,7 +46,6 @@ let panelDefaults = {
|
|||||||
yBucketNumber: null,
|
yBucketNumber: null,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show: true,
|
show: true,
|
||||||
seriesStat: false,
|
|
||||||
showHistogram: false
|
showHistogram: false
|
||||||
},
|
},
|
||||||
highlightCards: true
|
highlightCards: true
|
||||||
|
|||||||
@@ -60,7 +60,6 @@ function convertToCards(buckets) {
|
|||||||
yBounds: yBucket.bounds,
|
yBounds: yBucket.bounds,
|
||||||
values: yBucket.values,
|
values: yBucket.values,
|
||||||
count: yBucket.count,
|
count: yBucket.count,
|
||||||
seriesStat: getSeriesStat(yBucket.points)
|
|
||||||
};
|
};
|
||||||
cards.push(card);
|
cards.push(card);
|
||||||
});
|
});
|
||||||
@@ -145,15 +144,6 @@ function removeZeroBuckets(buckets) {
|
|||||||
return buckets;
|
return buckets;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Count values number for each timeseries in given bucket
|
|
||||||
* @param {Array} points Bucket's datapoints with series name ([val, ts, series_name])
|
|
||||||
* @return {Object} seriesStat: {seriesName_1: val_1, seriesName_2: val_2}
|
|
||||||
*/
|
|
||||||
function getSeriesStat(points) {
|
|
||||||
return _.countBy(points, p => p[2]);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Convert set of time series into heatmap buckets
|
* Convert set of time series into heatmap buckets
|
||||||
* @return {Object} Heatmap object:
|
* @return {Object} Heatmap object:
|
||||||
|
|||||||
@@ -87,17 +87,18 @@ export class HeatmapTooltip {
|
|||||||
let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
|
let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
|
||||||
<div class="heatmap-histogram"></div>`;
|
<div class="heatmap-histogram"></div>`;
|
||||||
|
|
||||||
if (yData && yData.bounds) {
|
if (yData) {
|
||||||
boundBottom = valueFormatter(yData.bounds.bottom);
|
if (yData.bounds) {
|
||||||
boundTop = valueFormatter(yData.bounds.top);
|
boundBottom = valueFormatter(yData.bounds.bottom);
|
||||||
valuesNumber = yData.count;
|
boundTop = valueFormatter(yData.bounds.top);
|
||||||
tooltipHtml += `<div>
|
valuesNumber = yData.count;
|
||||||
bucket: <b>${boundBottom} - ${boundTop}</b> <br>
|
tooltipHtml += `<div>
|
||||||
count: <b>${valuesNumber}</b> <br>
|
bucket: <b>${boundBottom} - ${boundTop}</b> <br>
|
||||||
</div>`;
|
count: <b>${valuesNumber}</b> <br>
|
||||||
|
</div>`;
|
||||||
if (this.panel.tooltip.seriesStat && yData.seriesStat) {
|
} else {
|
||||||
tooltipHtml = this.addSeriesStat(tooltipHtml, yData.seriesStat);
|
// currently no bounds for pre bucketed data
|
||||||
|
tooltipHtml += `<div>count: <b>${yData.count}</b><br></div>`;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (!this.panel.tooltip.showHistogram) {
|
if (!this.panel.tooltip.showHistogram) {
|
||||||
@@ -159,15 +160,6 @@ export class HeatmapTooltip {
|
|||||||
return pos;
|
return pos;
|
||||||
}
|
}
|
||||||
|
|
||||||
addSeriesStat(tooltipHtml, seriesStat) {
|
|
||||||
tooltipHtml += "series: <br>";
|
|
||||||
_.forEach(seriesStat, (values, series) => {
|
|
||||||
tooltipHtml += ` - ${series}: <b>${values}</b><br>`;
|
|
||||||
});
|
|
||||||
|
|
||||||
return tooltipHtml;
|
|
||||||
}
|
|
||||||
|
|
||||||
addHistogram(data) {
|
addHistogram(data) {
|
||||||
let xBucket = this.scope.ctrl.data.buckets[data.x];
|
let xBucket = this.scope.ctrl.data.buckets[data.x];
|
||||||
let yBucketSize = this.scope.ctrl.data.yBucketSize;
|
let yBucketSize = this.scope.ctrl.data.yBucketSize;
|
||||||
@@ -181,8 +173,8 @@ export class HeatmapTooltip {
|
|||||||
|
|
||||||
let scale = this.scope.yScale.copy();
|
let scale = this.scope.yScale.copy();
|
||||||
let histXScale = scale
|
let histXScale = scale
|
||||||
.domain([min, max])
|
.domain([min, max])
|
||||||
.range([0, HISTOGRAM_WIDTH]);
|
.range([0, HISTOGRAM_WIDTH]);
|
||||||
|
|
||||||
let barWidth;
|
let barWidth;
|
||||||
if (this.panel.yAxis.logBase === 1) {
|
if (this.panel.yAxis.logBase === 1) {
|
||||||
@@ -193,21 +185,21 @@ export class HeatmapTooltip {
|
|||||||
barWidth = Math.max(barWidth, 1);
|
barWidth = Math.max(barWidth, 1);
|
||||||
|
|
||||||
let histYScale = d3.scaleLinear()
|
let histYScale = d3.scaleLinear()
|
||||||
.domain([0, _.max(_.map(histogramData, d => d[1]))])
|
.domain([0, _.max(_.map(histogramData, d => d[1]))])
|
||||||
.range([0, HISTOGRAM_HEIGHT]);
|
.range([0, HISTOGRAM_HEIGHT]);
|
||||||
|
|
||||||
let histogram = this.tooltip.select(".heatmap-histogram")
|
let histogram = this.tooltip.select(".heatmap-histogram")
|
||||||
.append("svg")
|
.append("svg")
|
||||||
.attr("width", HISTOGRAM_WIDTH)
|
.attr("width", HISTOGRAM_WIDTH)
|
||||||
.attr("height", HISTOGRAM_HEIGHT);
|
.attr("height", HISTOGRAM_HEIGHT);
|
||||||
|
|
||||||
histogram.selectAll(".bar").data(histogramData)
|
histogram.selectAll(".bar").data(histogramData)
|
||||||
.enter().append("rect")
|
.enter().append("rect")
|
||||||
.attr("x", d => {
|
.attr("x", d => {
|
||||||
return histXScale(d[0]);
|
return histXScale(d[0]);
|
||||||
})
|
})
|
||||||
.attr("width", barWidth)
|
.attr("width", barWidth)
|
||||||
.attr("y", d => {
|
.attr("y", d => {
|
||||||
return HISTOGRAM_HEIGHT - histYScale(d[1]);
|
return HISTOGRAM_HEIGHT - histYScale(d[1]);
|
||||||
})
|
})
|
||||||
.attr("height", d => {
|
.attr("height", d => {
|
||||||
|
|||||||
@@ -62,10 +62,6 @@
|
|||||||
checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
|
checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
|
||||||
</gf-form-switch>
|
</gf-form-switch>
|
||||||
<div ng-if="ctrl.panel.tooltip.show">
|
<div ng-if="ctrl.panel.tooltip.show">
|
||||||
<gf-form-switch class="gf-form" label-class="width-8"
|
|
||||||
label="Series stats"
|
|
||||||
checked="ctrl.panel.tooltip.seriesStat" on-change="ctrl.render()">
|
|
||||||
</gf-form-switch>
|
|
||||||
<gf-form-switch class="gf-form" label-class="width-8"
|
<gf-form-switch class="gf-form" label-class="width-8"
|
||||||
label="Histogram"
|
label="Histogram"
|
||||||
checked="ctrl.panel.tooltip.showHistogram" on-change="ctrl.render()">
|
checked="ctrl.panel.tooltip.showHistogram" on-change="ctrl.render()">
|
||||||
|
|||||||
Reference in New Issue
Block a user