IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

TimeSeries: Increase y-axis tick density for small-height panels (#93188)

Browse Source
This commit is contained in:
Leon Sorokin 2024-09-10 15:20:24 -05:00 committed by GitHub
parent afe457306a
commit e9901acfb4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts
View File

@ -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<AxisProps, Axis> {
@ -62,20 +71,18 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
// 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 */