From e97c02ef125952c077e83f22dd4a968468889ea3 Mon Sep 17 00:00:00 2001 From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com> Date: Wed, 30 Jun 2021 11:32:14 +0200 Subject: [PATCH] TimeSeries: Bring back axis label padding (#36281) (#36288) * TimeSeries: bring back some axis label padding * Update snaps Co-authored-by: Dominik Prokop (cherry picked from commit f9fb5ba63724cd02d11c0e959119c9ac795e435f) Co-authored-by: Leon Sorokin --- .../GraphNG/__snapshots__/utils.test.ts.snap | 4 +-- .../uPlot/config/UPlotAxisBuilder.ts | 16 +++++++--- .../uPlot/config/UPlotConfigBuilder.test.ts | 3 +- .../barchart/__snapshots__/utils.test.ts.snap | 32 +++++++++---------- 4 files changed, 32 insertions(+), 23 deletions(-) diff --git a/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap b/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap index a41a2415cba..e9e66fb7b02 100644 --- a/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap +++ b/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap @@ -11,7 +11,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "x", "show": true, "side": 2, @@ -36,7 +36,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "__fixed", "show": true, "side": 3, diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts index 31fb578abf3..152fbdf4e78 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts @@ -24,6 +24,7 @@ export interface AxisProps { } const fontSize = 12; +const labelPad = 8; export class UPlotAxisBuilder extends PlotConfigBuilder { merge(props: AxisProps) { @@ -67,9 +68,12 @@ export class UPlotAxisBuilder extends PlotConfigBuilder { stroke: theme.colors.text.primary, side: getUPlotSideFromAxis(placement), font, - labelFont: font, size: this.props.size ?? calculateAxisSize, gap, + + // @ts-ignore (TODO: remove once uPlot adds this in 1.6.15) + labelGap: 0, + grid: { show: grid, stroke: gridColor, @@ -86,9 +90,12 @@ export class UPlotAxisBuilder extends PlotConfigBuilder { space: calculateSpace, }; - if (label !== undefined && label !== null && label.length > 0) { + if (label != null && label.length > 0) { config.label = label; - config.labelSize = 18; + config.labelSize = fontSize + labelPad; + config.labelFont = font; + // @ts-ignore (TODO: remove once uPlot adds this in 1.6.15) + config.labelGap = labelPad; } if (values) { @@ -139,7 +146,8 @@ function calculateAxisSize(self: uPlot, values: string[], axisIdx: number) { axisSize += axis!.gap! + fontSize; } else if (values?.length) { let longestValue = values.reduce((acc, value) => (value.length > acc.length ? value : acc), ''); - axisSize += axis!.gap! + measureText(longestValue, fontSize).width; + // @ts-ignore (TODO: remove axis!.labelGap! once uPlot adds this in 1.6.15) + axisSize += axis!.gap! + axis!.labelGap! + measureText(longestValue, fontSize).width; } return Math.ceil(axisSize); diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts index 40f4f7bf1ab..aa70917d939 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts @@ -338,7 +338,8 @@ describe('UPlotConfigBuilder', () => { }, "label": "test label", "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "labelSize": 18, + "labelGap": 8, + "labelSize": 20, "scale": "scale-x", "show": true, "side": 2, diff --git a/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap b/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap index 9cf07c2de24..a3eb87bb71b 100644 --- a/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap +++ b/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap @@ -11,7 +11,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "x", "show": true, "side": 3, @@ -36,7 +36,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "m/s", "show": true, "side": 2, @@ -134,7 +134,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "x", "show": true, "side": 3, @@ -159,7 +159,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "m/s", "show": true, "side": 2, @@ -257,7 +257,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "x", "show": true, "side": 2, @@ -282,7 +282,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "m/s", "show": true, "side": 3, @@ -380,7 +380,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "x", "show": true, "side": 3, @@ -405,7 +405,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "m/s", "show": true, "side": 2, @@ -503,7 +503,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "x", "show": true, "side": 3, @@ -528,7 +528,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "m/s", "show": true, "side": 2, @@ -626,7 +626,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "x", "show": true, "side": 3, @@ -651,7 +651,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "m/s", "show": true, "side": 2, @@ -749,7 +749,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "x", "show": true, "side": 3, @@ -774,7 +774,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "m/s", "show": true, "side": 2, @@ -872,7 +872,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "x", "show": true, "side": 3, @@ -897,7 +897,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, - "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "labelGap": 0, "scale": "m/s", "show": true, "side": 2,