GraphNG: use theme font family and size for axis labels (#33009)

* GraphNG: use theme font family and size for axis labels * fix test
grafana · Apr 15, 2021 · aeb64ec · aeb64ec
1 parent 99b85d8
commit aeb64ec
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts
@@ -50,15 +50,19 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
       theme,
     } = this.props;
 
+    let { typography } = theme;
+
+    let font = `${typography.size.sm} ${typography.fontFamily.sansSerif}`;
+
     const gridColor = theme.isDark ? theme.palette.gray25 : theme.palette.gray90;
 
     let config: Axis = {
       scale: scaleKey,
       show,
       stroke: theme.colors.text,
       side: getUPlotSideFromAxis(placement),
-      font: `12px 'Roboto'`,
-      labelFont: `12px 'Roboto'`,
+      font,
+      labelFont: font,
       size: this.props.size ?? calculateAxisSize,
       gap,
       grid: {

diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
@@ -1,7 +1,6 @@
 // TODO: migrate tests below to the builder
 
 import { UPlotConfigBuilder } from './UPlotConfigBuilder';
-import { GrafanaTheme } from '@grafana/data';
 import {
   GraphGradientMode,
   AxisPlacement,
@@ -292,34 +291,34 @@ describe('UPlotConfigBuilder', () => {
       formatValue: () => 'test value',
       grid: false,
       show: true,
-      theme: { isDark: true, palette: { gray25: '#ffffff' }, colors: { text: 'gray' } } as GrafanaTheme,
+      theme: darkTheme,
       values: [],
     });
 
     expect(builder.getConfig()).toMatchInlineSnapshot(`
       Object {
         "axes": Array [
           Object {
-            "font": "12px 'Roboto'",
+            "font": "12px 'Inter', 'Helvetica Neue', Arial, sans-serif",
             "gap": 5,
             "grid": Object {
               "show": false,
-              "stroke": "#ffffff",
+              "stroke": "#2c3235",
               "width": 1,
             },
             "label": "test label",
-            "labelFont": "12px 'Roboto'",
+            "labelFont": "12px 'Inter', 'Helvetica Neue', Arial, sans-serif",
             "labelSize": 18,
             "scale": "scale-x",
             "show": true,
             "side": 2,
             "size": [Function],
             "space": [Function],
             "splits": undefined,
-            "stroke": "gray",
+            "stroke": "rgba(255, 255, 255, 0.77)",
             "ticks": Object {
               "show": true,
-              "stroke": "#ffffff",
+              "stroke": "#2c3235",
               "width": 1,
             },
             "timeZone": "browser",