@carto/ps-react-ui 6.4.0 → 6.5.0

package/src/widgets/scatterplot/options.ts

@@ -12,6 +12,7 @@ import {
 import { ZOOM_LAYOUT } from '../actions/zoom-toggle'
 import type { OptionFactory } from '../echart'
 import { mergeOptions, resolveThemeColor } from '../utils'
+import { spacingPx } from '../utils/spacing-px'
 import { createItemColorResolver } from '../utils/item-color'
 import { getScatterplotXY } from './points'
 import type {
@@ -45,9 +46,9 @@ export function scatterplotOptions({
 }: ScatterplotOptionsInput): ScatterplotEChartsOption {
   return {
     grid: {
-      left: parseInt(theme.spacing(1)),
-      top: parseInt(theme.spacing(3)),
-      right: parseInt(theme.spacing(1)),
+      left: spacingPx(theme, 1),
+      top: spacingPx(theme, 3),
+      right: spacingPx(theme, 1),
       // Default: no legend. Merger bumps `bottom` when there are >1 series.
       ...buildGridConfig(false, theme),
       containLabel: true,
@@ -58,7 +59,7 @@ export function scatterplotOptions({
       trigger: 'item',
       backgroundColor: theme.palette.grey[900],
       borderWidth: 0,
-      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],
+      padding: [spacingPx(theme, 1), spacingPx(theme, 1)],
       textStyle: {
         color: theme.palette.common.white,
         fontSize: 11,
@@ -86,7 +87,7 @@ export function scatterplotOptions({
       axisTick: { show: false },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        margin: parseInt(theme.spacing(1)),
+        margin: spacingPx(theme, 1),
         hideOverlap: true,
         showMinLabel: true,
         showMaxLabel: true,
@@ -103,7 +104,7 @@ export function scatterplotOptions({
       axisTick: { show: false },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        margin: parseInt(theme.spacing(1)),
+        margin: spacingPx(theme, 1),
         hideOverlap: true,
         showMinLabel: true,
         showMaxLabel: true,

package/src/widgets/timeseries/options.ts

@@ -12,6 +12,7 @@ import {
 import { ZOOM_LAYOUT } from '../actions/zoom-toggle'
 import type { OptionFactory } from '../echart'
 import { mergeOptions, resolveThemeColor } from '../utils'
+import { spacingPx } from '../utils/spacing-px'
 import { createItemColorResolver } from '../utils/item-color'
 import { positionDataZoomForLegend } from '../utils/data-zoom-layout'
 import type {
@@ -53,9 +54,9 @@ export function timeseriesOptions({
 
   return {
     grid: {
-      left: parseInt(theme.spacing(1)),
-      top: parseInt(theme.spacing(3)),
-      right: parseInt(theme.spacing(1)),
+      left: spacingPx(theme, 1),
+      top: spacingPx(theme, 3),
+      right: spacingPx(theme, 1),
       // Default: no legend. Merger bumps this when there are >1 series.
       ...buildGridConfig(false, theme),
       containLabel: true,
@@ -64,7 +65,7 @@ export function timeseriesOptions({
       trigger: 'axis',
       backgroundColor: theme.palette.grey[900],
       borderWidth: 0,
-      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],
+      padding: [spacingPx(theme, 1), spacingPx(theme, 1)],
       textStyle: {
         color: theme.palette.common.white,
         fontSize: 11,
@@ -93,7 +94,7 @@ export function timeseriesOptions({
       axisTick: { show: false },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
+        padding: [spacingPx(theme, 0.5), 0, 0, 0],
         margin: 0,
         hideOverlap: true,
         ...(labelFormatter && {
@@ -119,7 +120,7 @@ export function timeseriesOptions({
       },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        margin: parseInt(theme.spacing(1)),
+        margin: spacingPx(theme, 1),
         show: true,
         showMaxLabel: true,
         showMinLabel: true,

package/src/widgets/utils/css-variables-theme.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { createCartoTheme } from '../../theme/create-carto-theme'
+import { barOptions } from '../bar/options'
+import { histogramOptions } from '../histogram/options'
+import { pieOptions } from '../pie/options'
+import { scatterplotOptions } from '../scatterplot/options'
+import { timeseriesOptions } from '../timeseries/options'
+
+const theme = createCartoTheme()
+
+function nanPaths(value: unknown, path = '$'): string[] {
+  if (typeof value === 'number') return Number.isNaN(value) ? [path] : []
+  if (Array.isArray(value))
+    return value.flatMap((v, i) => nanPaths(v, `${path}[${i}]`))
+  if (value && typeof value === 'object')
+    return Object.entries(value).flatMap(([k, v]) =>
+      nanPaths(v, `${path}.${k}`),
+    )
+  return []
+}
+
+describe('ECharts options with a cssVariables theme', () => {
+  it.each([
+    ['bar', () => barOptions({ theme })],
+    ['histogram', () => histogramOptions({ theme })],
+    ['pie', () => pieOptions({ theme })],
+    ['scatterplot', () => scatterplotOptions({ theme })],
+    ['timeseries', () => timeseriesOptions({ theme })],
+  ])('%s has no NaN in its options', (_name, build) => {
+    expect(nanPaths(build())).toEqual([])
+  })
+})

package/src/widgets/utils/option-builders.ts

@@ -4,6 +4,7 @@ import type {
   CallbackDataParams,
   TopLevelFormatterParams,
 } from 'echarts/types/dist/shared'
+import { spacingPx } from './spacing-px'
 
 /**
  * Shared EChart configuration builders for chart widgets
@@ -61,8 +62,8 @@ export function buildLegendConfig({
  */
 export function buildGridConfig(hasLegend: boolean, theme: Theme) {
   return {
-    ...(!hasLegend && { bottom: parseInt(theme.spacing(3)) }),
-    ...(hasLegend && { bottom: parseInt(theme.spacing(7)) }),
+    ...(!hasLegend && { bottom: spacingPx(theme, 3) }),
+    ...(hasLegend && { bottom: spacingPx(theme, 7) }),
   }
 }
 
@@ -106,10 +107,7 @@ export function createTooltipPositioner(theme: Theme) {
     _rect: unknown,
     size: { contentSize: [number, number]; viewSize: [number, number] },
   ) {
-    const position = { top: parseInt(theme.spacing(0.5)) } as Record<
-      string,
-      number
-    >
+    const position = { top: spacingPx(theme, 0.5) } as Record<string, number>
 
     // Position tooltip left or right based on available space
     if (size.contentSize[0] < size.viewSize[0] - point[0]) {

package/src/widgets/utils/spacing-px.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { createTheme, responsiveFontSizes, type Theme } from '@mui/material'
+import {
+  cartoThemeOptions,
+  theme as cartoTheme,
+} from '@carto/meridian-ds/theme'
+import { createCartoTheme } from '../../theme/create-carto-theme'
+import { spacingPx } from './spacing-px'
+
+const FACTORS = [0.5, 1, 3, 4, 7]
+
+describe('spacingPx', () => {
+  it('matches the previous parseInt(theme.spacing(n)) for the current CARTO theme', () => {
+    const theme = createTheme(cartoTheme)
+    for (const factor of FACTORS) {
+      expect(spacingPx(theme, factor)).toBe(parseInt(theme.spacing(factor)))
+    }
+  })
+
+  it('resolves numbers for a CARTO theme with cssVariables', () => {
+    const theme = responsiveFontSizes(
+      createTheme({ ...cartoThemeOptions, cssVariables: true }),
+    )
+    expect(theme.spacing(1)).toContain('var(')
+    expect(FACTORS.map((f) => spacingPx(theme, f))).toEqual([4, 8, 24, 32, 56])
+  })
+
+  it('falls back to 8px per unit for a plain MUI theme with cssVariables', () => {
+    const theme = createTheme({ cssVariables: true }) as unknown as Theme
+    expect(FACTORS.map((f) => spacingPx(theme, f))).toEqual([4, 8, 24, 32, 56])
+  })
+
+  it('honours a numeric spacing override on createCartoTheme', () => {
+    const theme = createCartoTheme({ spacing: 4 })
+    expect(FACTORS.map((f) => spacingPx(theme, f))).toEqual([2, 4, 12, 16, 28])
+  })
+
+  it('honours a function spacing override under cssVariables', () => {
+    const theme = createCartoTheme({ spacing: (f: number) => f * 6 })
+    expect(spacingPx(theme, 1)).toBe(6)
+  })
+})

package/src/widgets/utils/spacing-px.ts

@@ -0,0 +1,24 @@
+import type { Theme } from '@mui/material'
+
+/**
+ * Theme spacing as a pixel number, for APIs that need numbers (ECharts).
+ *
+ * `theme.spacing(n)` returns `"8px"` for a regular theme but
+ * `"var(--mui-spacing, 8px)"` / `"calc(...)"` once the theme uses
+ * `cssVariables`, which does not parse. Resolution order:
+ * 1. `parseFloat` of `theme.spacing(factor)` (regular themes);
+ * 2. the px unit MUI writes into `theme.spacing(1)` (`var(--mui-spacing, Npx)`),
+ *    which honours a `spacing` override such as `createCartoTheme({ spacing: 4 })`;
+ * 3. meridian's numeric `spacingValue`, or MUI's default 8px.
+ */
+export function spacingPx(theme: Theme, factor: number): number {
+  const parsed = parseFloat(theme.spacing(factor))
+  if (Number.isFinite(parsed)) return parsed
+  // `spacing(1)` is `var(--mui-spacing, Npx)`; larger factors are
+  // `calc(f * var(--mui-spacing, Npx))`, so read the unit from the former.
+  const fallback = /,\s*(-?[\d.]+)px\)\s*$/.exec(theme.spacing(1))
+  const px = fallback ? Number(fallback[1]) : NaN
+  if (Number.isFinite(px)) return px * factor
+  const unit = (theme.spacingValue as number | undefined) ?? 8
+  return unit * factor
+}