From f9fb5ba63724cd02d11c0e959119c9ac795e435f Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Wed, 30 Jun 2021 03:02:56 -0500 Subject: [PATCH] TimeSeries: Bring back axis label padding (#36281) * TimeSeries: bring back some axis label padding * Update snaps Co-authored-by: Dominik Prokop --- .../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 17919e55e52..5d69d0de21d 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, @@ -136,7 +136,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, @@ -161,7 +161,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, @@ -261,7 +261,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, @@ -286,7 +286,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, @@ -386,7 +386,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, @@ -411,7 +411,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, @@ -511,7 +511,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, @@ -536,7 +536,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, @@ -636,7 +636,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, @@ -661,7 +661,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, @@ -761,7 +761,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, @@ -786,7 +786,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, @@ -886,7 +886,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, @@ -911,7 +911,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,