IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 01:23:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

TimeSeries: Bring back axis label padding (#36281)

Browse Source 
* TimeSeries: bring back some axis label padding

* Update snaps

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
This commit is contained in:
Leon Sorokin 2021-06-30 03:02:56 -05:00 committed by GitHub
parent 9dc3c7cc69
commit f9fb5ba637
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap
View File

@ -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,

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

@ -24,6 +24,7 @@ export interface AxisProps {
}
const fontSize = 12;
const labelPad = 8;
export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
merge(props: AxisProps) {
@ -67,9 +68,12 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
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<AxisProps, Axis> {
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);

3
packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
View File

@ -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,

32
public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap
View File

@ -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,