From e9901acfb4eda73e35c10aa8a295fe1ea39a6b53 Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Tue, 10 Sep 2024 15:20:24 -0500 Subject: [PATCH] TimeSeries: Increase y-axis tick density for small-height panels (#93188) --- .../uPlot/config/UPlotAxisBuilder.ts | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts index 61887d32b62..5625e60920f 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts @@ -43,6 +43,15 @@ export interface AxisProps { } export const UPLOT_AXIS_FONT_SIZE = 12; + +// for panels with small heights, we increase tick density by reducing the minumum tick spacing +// all values in CSS pixels +const Y_TICK_SPACING_PANEL_HEIGHT = 150; +const Y_TICK_SPACING_NORMAL = 30; +const Y_TICK_SPACING_SMALL = 15; + +const X_TICK_SPACING_NORMAL = 40; + const labelPad = 8; export class UPlotAxisBuilder extends PlotConfigBuilder { @@ -62,20 +71,18 @@ export class UPlotAxisBuilder extends PlotConfigBuilder { // for axis left & right if (axis.side !== 2 || !scale) { - return 30; + return plotDim <= Y_TICK_SPACING_PANEL_HEIGHT ? Y_TICK_SPACING_SMALL : Y_TICK_SPACING_NORMAL; } - const defaultSpacing = 40; - if (scale.time) { - const maxTicks = plotDim / defaultSpacing; + const maxTicks = plotDim / X_TICK_SPACING_NORMAL; const increment = (scaleMax - scaleMin) / maxTicks; - const sample = formatTime(self, [scaleMin], axisIdx, defaultSpacing, increment); + const sample = formatTime(self, [scaleMin], axisIdx, X_TICK_SPACING_NORMAL, increment); const width = measureText(sample[0], UPLOT_AXIS_FONT_SIZE).width + 18; return width; } - return defaultSpacing; + return X_TICK_SPACING_NORMAL; } /** height of x axis or width of y axis in CSS pixels alloted for values, gap & ticks, but excluding axis label */