feat(sdk): font size scaling and adjustment for visualizations (#43264)

* support test utilities in sdk import

* add relative unit default chart font size in embedding defaults

* make font size follow sdk root

* feat(sdk): add font size settings to axis ticks

* feat(sdk): add font size settings to series labels

* re-add hasTimelineEvents from merge commits

* apply default font size at the theme level

* add table header cell font size

* calculate cell font size based on 12.5px

* rename theme.chart to theme.cartesian

* refactor visualization theme

* refactor default viz theme

* remove chart style config

* add goal line

* pass font size to chart measurements

* use px as reference unit

* support row chart viz

* add missing echarts font size

* add table cell font sizes

* use css variables for funnel color

* fix theme type in smart scalar story

* add bar chart to storybook for visual test

* add line chart to storybook for visual test

* add loki reference images

* add loki reference images for row chart

* add loki shared reference images to stories filter

* update loki reference image

* synchronize base font size

* add theme provider to funnel test setup

* add missing default visualization theme

* add unit test for get size in px

* update loki reference image

* fix static viz build error

enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx

@@ -52,7 +52,7 @@ const SdkContentWrapperInner = styled.div<
   --mb-color-text-medium: ${({ theme }) => theme.fn.themeColor("text-medium")};
   --mb-color-text-light: ${({ theme }) => theme.fn.themeColor("text-light")};
 
-  font-size: ${({ theme }) => theme.other.fontSize ?? "0.875em"};
+  font-size: ${({ theme }) => theme.other.fontSize};
 
   ${aceEditorStyles}
   ${saveDomImageStyles}

enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts

-import type { MantineThemeOverride } from "@mantine/core";
 import { merge } from "icepick";
 
 import type { MetabaseComponentTheme } from "embedding-sdk";
 import { EMBEDDING_SDK_ROOT_ELEMENT_ID } from "embedding-sdk/config";
+import type { MantineThemeOverride } from "metabase/ui";
+
+export const DEFAULT_SDK_FONT_SIZE = 14;
+
+// Use em units to scale font sizes relative to the base font size.
+// The em unit is used by default in the embedding SDK.
+const units = (px: number) => ({
+  px: `${px}px`,
+  em: `${px / DEFAULT_SDK_FONT_SIZE}em`,
+});
+
+export const FONT_SIZES = {
+  tableCell: units(12.5),
+  label: units(12),
+  goalLabel: units(14),
+};
 
 /**
  * Default theme options for Metabase components.
@@ -14,12 +29,13 @@ import { EMBEDDING_SDK_ROOT_ELEMENT_ID } from "embedding-sdk/config";
  */
 export const DEFAULT_METABASE_COMPONENT_THEME: MetabaseComponentTheme = {
   table: {
-    idColumn: {
-      textColor: "brand",
-    },
     cell: {
+      fontSize: FONT_SIZES.tableCell.px,
       textColor: "text-dark",
     },
+    idColumn: {
+      textColor: "brand",
+    },
   },
   pivotTable: {
     rowToggle: {
@@ -27,6 +43,12 @@ export const DEFAULT_METABASE_COMPONENT_THEME: MetabaseComponentTheme = {
       backgroundColor: "text-light",
     },
   },
+  cartesian: {
+    label: { fontSize: FONT_SIZES.label.px },
+    goalLine: {
+      label: { fontSize: FONT_SIZES.goalLabel.px },
+    },
+  },
 };
 
 /**
@@ -38,9 +60,16 @@ export const DEFAULT_EMBEDDED_COMPONENT_THEME: MetabaseComponentTheme = merge(
   {
     table: {
       cell: {
+        fontSize: FONT_SIZES.tableCell.em,
         backgroundColor: "bg-white",
       },
     },
+    cartesian: {
+      label: { fontSize: FONT_SIZES.label.em },
+      goalLine: {
+        label: { fontSize: FONT_SIZES.goalLabel.em },
+      },
+    },
   },
 );
 

enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.ts

@@ -12,6 +12,7 @@ import type {
 import { colorTuple } from "./color-tuple";
 import {
   DEFAULT_EMBEDDED_COMPONENT_THEME,
+  DEFAULT_SDK_FONT_SIZE,
   EMBEDDING_SDK_COMPONENTS_OVERRIDES,
 } from "./default-component-theme";
 import type { MappableSdkColor } from "./embedding-color-palette";
@@ -20,6 +21,8 @@ import { SDK_TO_MAIN_APP_COLORS_MAPPING } from "./embedding-color-palette";
 const getFontFamily = (theme: MetabaseTheme) =>
   theme.fontFamily ?? DEFAULT_FONT;
 
+const SDK_BASE_FONT_SIZE = `${DEFAULT_SDK_FONT_SIZE / 16}em`;
+
 /**
  * Transforms a public-facing Metabase theme configuration
  * into a Mantine theme override for internal use.
@@ -39,7 +42,7 @@ export function getEmbeddingThemeOverride(
 
     other: {
       ...components,
-      ...(theme.fontSize && { fontSize: theme.fontSize }),
+      fontSize: theme.fontSize ?? SDK_BASE_FONT_SIZE,
     },
 
     components: EMBEDDING_SDK_COMPONENTS_OVERRIDES,

enterprise/frontend/src/embedding-sdk/types/theme/index.ts

@@ -5,7 +5,11 @@ import type { DeepPartial } from "../utils";
  * Theme configuration for embedded Metabase components.
  */
 export interface MetabaseTheme {
-  /** Base font size */
+  /**
+   * Base font size.
+   * Supported units are px, em and rem.
+   * Defaults to ~14px (0.875em)
+   **/
   fontSize?: string;
 
   /**
@@ -83,6 +87,9 @@ export interface MetabaseComponentTheme {
 
       /** Default background color of cells, defaults to `background` */
       backgroundColor?: string;
+
+      /** Font size of cell values, defaults to ~12.5px */
+      fontSize: string;
     };
 
     idColumn?: {
@@ -111,6 +118,21 @@ export interface MetabaseComponentTheme {
       lineHeight?: string;
     };
   };
+
+  /** Cartesian charts */
+  cartesian: {
+    label: {
+      /** Labels used in cartesian charts, such as axis ticks and series. */
+      fontSize: string;
+    };
+
+    goalLine: {
+      label: {
+        /** Font size of goal line labels */
+        fontSize: string;
+      };
+    };
+  };
 }
 
 export type ChartColor =

enterprise/frontend/src/embedding-sdk/types/theme/private.ts

-import type { MetabaseComponentTheme } from ".";
+import type { MetabaseComponentTheme, MetabaseTheme } from ".";
 
 /**
  * Mantine theme options specific to React embedding.
  */
-export type EmbeddingThemeOptions = MetabaseComponentTheme & {
-  /** Base font size */
-  fontSize?: string;
-};
+export type EmbeddingThemeOptions = MetabaseComponentTheme &
+  Pick<MetabaseTheme, "fontSize">;

frontend/src/metabase/static-viz/components/ComboChart/ComboChart.stories.tsx

@@ -3,6 +3,7 @@ import type { ComponentStory } from "@storybook/react";
 import { color } from "metabase/lib/colors";
 import { formatStaticValue } from "metabase/static-viz/lib/format";
 import { measureTextWidth } from "metabase/static-viz/lib/text";
+import { DEFAULT_VISUALIZATION_THEME } from "metabase/visualizations/shared/utils/theme";
 import type { RenderingContext } from "metabase/visualizations/types";
 
 import { ComboChart } from "./ComboChart";
@@ -27,6 +28,7 @@ const renderingContext: RenderingContext = {
   measureText: (text, style) =>
     measureTextWidth(text, Number(style.size), Number(style.weight)),
   fontFamily: "Lato",
+  theme: DEFAULT_VISUALIZATION_THEME,
 };
 
 export const LineLinearXScale = Template.bind({});

frontend/src/metabase/static-viz/components/FunnelBarChart/FunnelBarChart.stories.tsx

@@ -3,6 +3,7 @@ import type { ComponentStory } from "@storybook/react";
 import { color } from "metabase/lib/colors";
 import { formatStaticValue } from "metabase/static-viz/lib/format";
 import { measureTextWidth } from "metabase/static-viz/lib/text";
+import { DEFAULT_VISUALIZATION_THEME } from "metabase/visualizations/shared/utils/theme";
 import type { RenderingContext } from "metabase/visualizations/types";
 
 import { FunnelBarChart } from "./FunnelBarChart";
@@ -27,6 +28,7 @@ const renderingContext: RenderingContext = {
   measureText: (text, style) =>
     measureTextWidth(text, Number(style.size), Number(style.weight)),
   fontFamily: "Lato",
+  theme: DEFAULT_VISUALIZATION_THEME,
 };
 
 export const Default = Template.bind({});

frontend/src/metabase/static-viz/components/ScalarChart/ScalarChart.stories.tsx

@@ -3,6 +3,7 @@ import type { ComponentStory } from "@storybook/react";
 import { color } from "metabase/lib/colors";
 import { formatStaticValue } from "metabase/static-viz/lib/format";
 import { measureTextWidth } from "metabase/static-viz/lib/text";
+import { DEFAULT_VISUALIZATION_THEME } from "metabase/visualizations/shared/utils/theme";
 import type { RenderingContext } from "metabase/visualizations/types";
 
 import { ScalarChart } from "./ScalarChart";
@@ -27,6 +28,7 @@ const renderingContext: RenderingContext = {
   measureText: (text, style) =>
     measureTextWidth(text, Number(style.size), Number(style.weight)),
   fontFamily: "Lato",
+  theme: DEFAULT_VISUALIZATION_THEME,
 };
 
 export const Default = Template.bind({});

frontend/src/metabase/static-viz/components/ScatterPlot/ScatterPlot.stories.tsx

@@ -3,6 +3,7 @@ import type { ComponentStory } from "@storybook/react";
 import { color } from "metabase/lib/colors";
 import { formatStaticValue } from "metabase/static-viz/lib/format";
 import { measureTextWidth } from "metabase/static-viz/lib/text";
+import { DEFAULT_VISUALIZATION_THEME } from "metabase/visualizations/shared/utils/theme";
 import type { RenderingContext } from "metabase/visualizations/types";
 
 import { ScatterPlot } from "./ScatterPlot";
@@ -27,6 +28,7 @@ const renderingContext: RenderingContext = {
   measureText: (text, style) =>
     measureTextWidth(text, Number(style.size), Number(style.weight)),
   fontFamily: "Lato",
+  theme: DEFAULT_VISUALIZATION_THEME,
 };
 
 export const Default = Template.bind({});

frontend/src/metabase/static-viz/components/SmartScalar/SmartScalar.stories.tsx

@@ -2,6 +2,7 @@ import { colors } from "metabase/lib/colors";
 import { createColorGetter } from "metabase/static-viz/lib/colors";
 import { formatStaticValue } from "metabase/static-viz/lib/format";
 import { measureTextWidth } from "metabase/static-viz/lib/text";
+import { DEFAULT_VISUALIZATION_THEME } from "metabase/visualizations/shared/utils/theme";
 import type { RowValues, VisualizationSettings } from "metabase-types/api";
 import {
   createMockColumn,
@@ -136,6 +137,7 @@ const createTemplate = ({ rows, vizSettings }: SmartScalarSeriesOpts) =>
           getColor: createColorGetter(colors),
           measureText: (text, style) =>
             measureTextWidth(text, Number(style.size), Number(style.weight)),
+          theme: DEFAULT_VISUALIZATION_THEME,
         }}
       />
     );

frontend/src/metabase/static-viz/components/WaterfallChart/WaterfallChart.stories.tsx

@@ -4,6 +4,7 @@ import { color } from "metabase/lib/colors";
 import { data } from "metabase/static-viz/components/WaterfallChart/stories-data";
 import { formatStaticValue } from "metabase/static-viz/lib/format";
 import { measureTextWidth } from "metabase/static-viz/lib/text";
+import { DEFAULT_VISUALIZATION_THEME } from "metabase/visualizations/shared/utils/theme";
 import type { RenderingContext } from "metabase/visualizations/types";
 
 import { WaterfallChart } from "./WaterfallChart";
@@ -27,6 +28,7 @@ const renderingContext: RenderingContext = {
   measureText: (text, style) =>
     measureTextWidth(text, Number(style.size), Number(style.weight)),
   fontFamily: "Lato",
+  theme: DEFAULT_VISUALIZATION_THEME,
 };
 
 export const YAxisCompactWithoutDataLabels = Template.bind({});

frontend/src/metabase/static-viz/index.js

@@ -11,6 +11,7 @@ import {
   measureTextWidth,
   measureTextEChartsAdapter,
 } from "metabase/static-viz/lib/text";
+import { DEFAULT_VISUALIZATION_THEME } from "metabase/visualizations/shared/utils/theme";
 
 import { LegacyStaticChart } from "./containers/LegacyStaticChart";
 
@@ -38,6 +39,7 @@ export function RenderChart(rawSeries, dashcardSettings, colors) {
     measureText: (text, style) =>
       measureTextWidth(text, style.size, style.weight),
     fontFamily: "Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    theme: DEFAULT_VISUALIZATION_THEME,
   };
 
   const props = {

frontend/src/metabase/ui/index.ts

@@ -3,6 +3,7 @@ export type {
   TabsValue,
   MantineTheme,
   MantineThemeOverride,
+  MantineThemeOther,
 } from "@mantine/core";
 export { useHover } from "@mantine/hooks";
 export * from "./components";

frontend/src/metabase/visualizations/components/FunnelNormal.styled.tsx

@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import { isDesktopSafari } from "metabase/lib/browser";
-import { color } from "metabase/lib/colors";
 
 interface SharedProps {
   isNarrow: boolean;
@@ -17,7 +16,7 @@ interface FunnelStepProps {
 export const FunnelStep = styled.div<FunnelStepProps>`
   width: 100%;
   min-width: 20px;
-  border-right: 1px solid ${color("border")};
+  border-right: 1px solid var(--mb-color-border);
   display: flex;
   flex-direction: column;
 
@@ -95,7 +94,7 @@ interface FunnelNormalRootProps {
 export const FunnelNormalRoot = styled.div<FunnelNormalRootProps>`
   display: flex;
   padding: ${props => (props.isSmall ? "0.5rem" : "1rem")};
-  color: ${color("text-medium")};
+  color: var(--mb-color-text-medium);
 
   ${isDesktopSafari()
     ? css`