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:
Leon Sorokin 2021-04-15 05:27:28 -05:00 committed by GitHub
parent 99b85d8af3
commit aeb64ecb16
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 9 deletions

View File

@ -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: {

View File

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