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>
(cherry picked from commit b15a401efa)

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

@@ -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')