Fix dense y-axis labels in heatmap using tsbuckets (#24351)

* Fix dense y-axis labels in heatmap using tsbuckets

This change emulates the non-tsbuckets Y-axis tick count by making
the y-axis label formatter treat a dense set as a sparse set.

fixes #11342

* have d3 do the work

* Update public/app/plugins/panel/heatmap/rendering.ts

Co-authored-by: Alexander Zobnin <alexanderzobnin@gmail.com>

Co-authored-by: Alexander Zobnin <alexanderzobnin@gmail.com>
This commit is contained in:
Theo Schlossnagle 2020-06-10 03:44:50 -04:00 committed by GitHub
parent 72b8300571
commit b15a401efa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -340,6 +340,7 @@ export class HeatmapRenderer {
addYAxisFromBuckets() {
const tsBuckets = this.data.tsBuckets;
let ticks = Math.ceil(this.chartHeight / DEFAULT_Y_TICK_SIZE_PX);
this.scope.yScale = this.yScale = d3
.scaleLinear()
@ -366,11 +367,15 @@ export class HeatmapRenderer {
const yAxis = d3
.axisLeft(this.yScale)
.tickValues(tickValues)
.tickFormat(tickFormatter)
.tickSizeInner(0 - this.width)
.tickSizeOuter(0)
.tickPadding(Y_AXIS_TICK_PADDING);
if (tickValues && tickValues.length <= ticks) {
yAxis.tickValues(tickValues);
} else {
yAxis.ticks(ticks);
}
this.heatmap
.append('g')