public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TimeSeries: Bring back axis label padding (#36281) (#36288)

Browse Source 
* TimeSeries: bring back some axis label padding

* Update snaps

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
(cherry picked from commit f9fb5ba637)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
This commit is contained in:
Grot (@grafanabot)
2021-06-30 11:32:14 +02:00
committed by GitHub
co-authored by Leon Sorokin
parent d15a70371f
commit e97c02ef12
4 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap
+2 -2
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,
packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts
+12 -4
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);
packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
+2 -1
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,
public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap
+16 -16
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,
@@ -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,