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

Histogram: auto-skip x tick labels to avoid overlap (#45996)

Browse Source
This commit is contained in:
Leon Sorokin 2022-03-01 01:55:53 -06:00 committed by GitHub
parent 1c4b20b268
commit b491d6b4dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/app/plugins/panel/histogram/Histogram.tsx
View File

@ -15,7 +15,15 @@ import {
getFieldSeriesColor,
GrafanaTheme2,
} from '@grafana/data';
import { Themeable2, UPlotConfigBuilder, UPlotChart, VizLayout, PlotLegend } from '@grafana/ui';
import {
Themeable2,
UPlotConfigBuilder,
UPlotChart,
VizLayout,
PlotLegend,
measureText,
UPLOT_AXIS_FONT_SIZE,
} from '@grafana/ui';
import {
histogramBucketSizes,
@ -119,7 +127,20 @@ const prepConfig = (frame: DataFrame, theme: GrafanaTheme2) => {
placement: AxisPlacement.Bottom,
incrs: histogramBucketSizes,
splits: xSplits,
values: (u: uPlot, vals: any[]) => vals.map(xAxisFormatter),
values: (u: uPlot, splits: any[]) => {
const tickLabels = splits.map(xAxisFormatter);
const maxWidth = tickLabels.reduce(
(curMax, label) => Math.max(measureText(label, UPLOT_AXIS_FONT_SIZE).width, curMax),
0
);
const labelSpacing = 10;
const maxCount = u.bbox.width / ((maxWidth + labelSpacing) * devicePixelRatio);
const keepMod = Math.ceil(tickLabels.length / maxCount);
return tickLabels.map((label, i) => (i % keepMod === 0 ? label : null));
},
//incrs: () => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((mult) => mult * bucketSize),
//splits: config.xSplits,
//values: config.xValues,