mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
GraphNG: use theme font family and size for axis labels (#33009)
* GraphNG: use theme font family and size for axis labels * fix test
This commit is contained in:
parent
99b85d8af3
commit
aeb64ecb16
@ -50,6 +50,10 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
|
|||||||
theme,
|
theme,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
|
let { typography } = theme;
|
||||||
|
|
||||||
|
let font = `${typography.size.sm} ${typography.fontFamily.sansSerif}`;
|
||||||
|
|
||||||
const gridColor = theme.isDark ? theme.palette.gray25 : theme.palette.gray90;
|
const gridColor = theme.isDark ? theme.palette.gray25 : theme.palette.gray90;
|
||||||
|
|
||||||
let config: Axis = {
|
let config: Axis = {
|
||||||
@ -57,8 +61,8 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
|
|||||||
show,
|
show,
|
||||||
stroke: theme.colors.text,
|
stroke: theme.colors.text,
|
||||||
side: getUPlotSideFromAxis(placement),
|
side: getUPlotSideFromAxis(placement),
|
||||||
font: `12px 'Roboto'`,
|
font,
|
||||||
labelFont: `12px 'Roboto'`,
|
labelFont: font,
|
||||||
size: this.props.size ?? calculateAxisSize,
|
size: this.props.size ?? calculateAxisSize,
|
||||||
gap,
|
gap,
|
||||||
grid: {
|
grid: {
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
// TODO: migrate tests below to the builder
|
// TODO: migrate tests below to the builder
|
||||||
|
|
||||||
import { UPlotConfigBuilder } from './UPlotConfigBuilder';
|
import { UPlotConfigBuilder } from './UPlotConfigBuilder';
|
||||||
import { GrafanaTheme } from '@grafana/data';
|
|
||||||
import {
|
import {
|
||||||
GraphGradientMode,
|
GraphGradientMode,
|
||||||
AxisPlacement,
|
AxisPlacement,
|
||||||
@ -292,7 +291,7 @@ describe('UPlotConfigBuilder', () => {
|
|||||||
formatValue: () => 'test value',
|
formatValue: () => 'test value',
|
||||||
grid: false,
|
grid: false,
|
||||||
show: true,
|
show: true,
|
||||||
theme: { isDark: true, palette: { gray25: '#ffffff' }, colors: { text: 'gray' } } as GrafanaTheme,
|
theme: darkTheme,
|
||||||
values: [],
|
values: [],
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -300,15 +299,15 @@ describe('UPlotConfigBuilder', () => {
|
|||||||
Object {
|
Object {
|
||||||
"axes": Array [
|
"axes": Array [
|
||||||
Object {
|
Object {
|
||||||
"font": "12px 'Roboto'",
|
"font": "12px 'Inter', 'Helvetica Neue', Arial, sans-serif",
|
||||||
"gap": 5,
|
"gap": 5,
|
||||||
"grid": Object {
|
"grid": Object {
|
||||||
"show": false,
|
"show": false,
|
||||||
"stroke": "#ffffff",
|
"stroke": "#2c3235",
|
||||||
"width": 1,
|
"width": 1,
|
||||||
},
|
},
|
||||||
"label": "test label",
|
"label": "test label",
|
||||||
"labelFont": "12px 'Roboto'",
|
"labelFont": "12px 'Inter', 'Helvetica Neue', Arial, sans-serif",
|
||||||
"labelSize": 18,
|
"labelSize": 18,
|
||||||
"scale": "scale-x",
|
"scale": "scale-x",
|
||||||
"show": true,
|
"show": true,
|
||||||
@ -316,10 +315,10 @@ describe('UPlotConfigBuilder', () => {
|
|||||||
"size": [Function],
|
"size": [Function],
|
||||||
"space": [Function],
|
"space": [Function],
|
||||||
"splits": undefined,
|
"splits": undefined,
|
||||||
"stroke": "gray",
|
"stroke": "rgba(255, 255, 255, 0.77)",
|
||||||
"ticks": Object {
|
"ticks": Object {
|
||||||
"show": true,
|
"show": true,
|
||||||
"stroke": "#ffffff",
|
"stroke": "#2c3235",
|
||||||
"width": 1,
|
"width": 1,
|
||||||
},
|
},
|
||||||
"timeZone": "browser",
|
"timeZone": "browser",
|
||||||
|
Loading…
Reference in New Issue
Block a user