@micha.bigler/ui-core-micha 2.39.1 → 2.41.0

package/tests/ScatterChart.test.jsx

@@ -0,0 +1,234 @@
+// @vitest-environment jsdom
+import React from 'react';
+import i18next from 'i18next';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { ThemeProvider } from '@mui/material/styles';
+
+const scatterSpy = vi.hoisted(() => vi.fn(({ children }) => <div data-testid="mui-scatter">{children}</div>));
+vi.mock('@mui/x-charts/ScatterChart', () => ({ ScatterChart: scatterSpy }));
+vi.mock('@mui/x-charts/hooks', () => ({
+  useXScale: () => (v) => v * 10,
+  useYScale: () => (v) => 100 - v * 10,
+}));
+
+import {
+  ScatterChart,
+  ScatterReferenceCurve,
+  ScatterReferenceLine,
+  scaleBubbleRadius,
+} from '../src/components/charts/ScatterChart';
+import { createAppTheme } from '../src/theme/createAppTheme';
+
+const theme = createAppTheme({ palette: { primary: { main: '#3D5A99' } } });
+const i18n = i18next.createInstance();
+i18n.init({ lng: 'en', resources: { en: { translation: {} } }, interpolation: { escapeValue: false } });
+
+function withProviders(children) {
+  return React.createElement(
+    ThemeProvider,
+    { theme },
+    React.createElement(I18nextProvider, { i18n }, children),
+  );
+}
+
+function renderScatter(props = {}) {
+  return render(withProviders(
+    React.createElement(ScatterChart, {
+      series: [{ id: 's', data: [{ x: 1, y: 1 }] }],
+      ...props,
+    }),
+  ));
+}
+
+// THEME-10 -- the formula the access-gap panel already hand-rolls
+// (`max(3, 10*sqrt(pop/maxPop))`), pinned as a pure function.
+describe('scaleBubbleRadius', () => {
+  it('matches the access-panel formula across the domain', () => {
+    expect(scaleBubbleRadius(0, 100)).toBe(3);
+    expect(scaleBubbleRadius(100, 100)).toBe(10);
+    expect(scaleBubbleRadius(25, 100)).toBeCloseTo(5, 5);
+  });
+
+  it('floors at the minimum radius for a degenerate or non-finite input', () => {
+    expect(scaleBubbleRadius(5, 0)).toBe(3);
+    expect(scaleBubbleRadius(NaN, 100)).toBe(3);
+    expect(scaleBubbleRadius(5, NaN)).toBe(3);
+  });
+});
+
+describe('ScatterChart mark count and colour default (THEME-10)', () => {
+  afterEach(() => { cleanup(); vi.clearAllMocks(); });
+
+  // The failure mode nobody sees: a scatter that silently drops points.
+  it('renders every supplied point, none dropped', () => {
+    renderScatter({ series: [{ id: 's', data: [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 }] }] });
+    expect(scatterSpy.mock.calls.at(-1)[0].series[0].data).toHaveLength(3);
+  });
+
+  it('defaults a single undifferentiated series to the neutral role colour, not a series hue', () => {
+    renderScatter();
+    expect(scatterSpy.mock.calls.at(-1)[0].colors).toEqual([theme.palette.text.secondary]);
+  });
+
+  it('uses the categorical palette, not the neutral tone, once a caller supplies multiple series', () => {
+    renderScatter({
+      series: [
+        { id: 'a', data: [{ x: 1, y: 1 }] },
+        { id: 'b', data: [{ x: 2, y: 2 }] },
+      ],
+    });
+    const { colors } = scatterSpy.mock.calls.at(-1)[0];
+    expect(colors).not.toEqual([theme.palette.text.secondary]);
+    expect(colors.length).toBeGreaterThan(1);
+  });
+
+  it('lets a caller override the palette explicitly (e.g. a family/role register)', () => {
+    renderScatter({ palette: ['#ABCDEF'] });
+    expect(scatterSpy.mock.calls.at(-1)[0].colors).toEqual(['#ABCDEF']);
+  });
+
+  // reviewer/ui_reviewer U3: a single series that sets its OWN colour is not "undifferentiated"
+  // -- the neutral default only applies when nothing else specifies a colour. This pins that
+  // ScatterChart itself never strips or overrides a series' own `.color` (MUI's own resolution
+  // of series.color vs. the colors fallback array is MUI's own contract, out of scope here --
+  // same boundary BarChart.test.jsx already draws for the identical `colors={palette ||
+  // neutralPalette.categorical}` pattern).
+  it('leaves a single series\' own explicit colour untouched and does not treat it as neutral', () => {
+    renderScatter({ series: [{ id: 's', color: '#123456', data: [{ x: 1, y: 1 }] }] });
+    const props = scatterSpy.mock.calls.at(-1)[0];
+    expect(props.series[0].color).toBe('#123456');
+    expect(props.colors).not.toEqual([theme.palette.text.secondary]);
+  });
+});
+
+describe('ScatterChart bubble z-order (THEME-10)', () => {
+  afterEach(() => { cleanup(); vi.clearAllMocks(); });
+
+  it('sorts each series largest-first when sizeAccessor is set, so a small bubble is never hidden under a large one', () => {
+    renderScatter({
+      sizeAccessor: (p) => p.pop,
+      series: [{ id: 's', data: [{ x: 1, y: 1, pop: 10 }, { x: 2, y: 2, pop: 500 }, { x: 3, y: 3, pop: 100 }] }],
+    });
+    const data = scatterSpy.mock.calls.at(-1)[0].series[0].data;
+    expect(data.map((p) => p.pop)).toEqual([500, 100, 10]);
+  });
+
+  it('leaves point order untouched outside bubble mode', () => {
+    const original = [{ x: 1, y: 1 }, { x: 2, y: 2 }];
+    renderScatter({ series: [{ id: 's', data: original }] });
+    expect(scatterSpy.mock.calls.at(-1)[0].series[0].data).toEqual(original);
+  });
+});
+
+describe('ScatterChart per-point marker style (THEME-10)', () => {
+  afterEach(() => { cleanup(); vi.clearAllMocks(); });
+
+  it('renders a hollow marker (fill: none) only for the point getPointStyle marks hollow', () => {
+    renderScatter({
+      getPointStyle: (p) => (p.isStatusQuo ? { hollow: true } : {}),
+      series: [{ id: 's', data: [{ x: 1, y: 1, isStatusQuo: true }, { x: 2, y: 2, isStatusQuo: false }] }],
+    });
+    const Marker = scatterSpy.mock.calls.at(-1)[0].slots.marker;
+    const markerProps = { seriesId: 's', color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
+
+    const hollow = render(React.createElement(Marker, { ...markerProps, dataIndex: 0 }));
+    const filled = render(React.createElement(Marker, { ...markerProps, dataIndex: 1 }));
+
+    expect(hollow.container.querySelector('circle').getAttribute('fill')).toBe('none');
+    expect(filled.container.querySelector('circle').getAttribute('fill')).toBe('#111');
+  });
+
+  it('sizes a bubble marker from sizeAccessor via scaleBubbleRadius, resolved against the POST-sort index', () => {
+    renderScatter({
+      sizeAccessor: (p) => p.pop,
+      series: [{ id: 's', data: [{ x: 1, y: 1, pop: 0 }, { x: 2, y: 2, pop: 100 }] }],
+    });
+    const Marker = scatterSpy.mock.calls.at(-1)[0].slots.marker;
+    const markerProps = { seriesId: 's', color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
+
+    // Data was re-sorted largest-first: index 0 is now pop:100, index 1 is pop:0.
+    const big = render(React.createElement(Marker, { ...markerProps, dataIndex: 0 }));
+    const small = render(React.createElement(Marker, { ...markerProps, dataIndex: 1 }));
+
+    expect(Number(big.container.querySelector('circle').getAttribute('r'))).toBeCloseTo(10, 5);
+    expect(Number(small.container.querySelector('circle').getAttribute('r'))).toBe(3);
+  });
+
+  // Live-render caught regression: bubble sizing must share ONE max across every series (a
+  // single comparable scale, matching the access-gap panel's own
+  // `maxPop = Math.max(1, ...points.map(p => p.population))` over ALL points regardless of
+  // division/settlement) -- a per-series max would let each series' own largest point always
+  // render at full radius, making cross-series bubble size meaningless.
+  it('sizes bubbles against ONE chart-wide max across all series, not a max per series', () => {
+    renderScatter({
+      sizeAccessor: (p) => p.pop,
+      series: [
+        { id: 'small-series', data: [{ x: 1, y: 1, pop: 100 }] },
+        { id: 'big-series', data: [{ x: 2, y: 2, pop: 1000 }] },
+      ],
+    });
+    const props = scatterSpy.mock.calls.at(-1)[0];
+    const Marker = props.slots.marker;
+    const markerProps = { color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
+
+    // If sized per-series, "small-series"'s own only point (pop:100) would be its own series
+    // max and render at full radius (10) -- wrongly implying it's as large as big-series's point.
+    const smallSeriesPoint = render(React.createElement(Marker, { ...markerProps, seriesId: 'small-series', dataIndex: 0 }));
+    const bigSeriesPoint = render(React.createElement(Marker, { ...markerProps, seriesId: 'big-series', dataIndex: 0 }));
+
+    const smallR = Number(smallSeriesPoint.container.querySelector('circle').getAttribute('r'));
+    const bigR = Number(bigSeriesPoint.container.querySelector('circle').getAttribute('r'));
+    expect(bigR).toBeCloseTo(10, 5);
+    expect(smallR).toBeCloseTo(10 * Math.sqrt(100 / 1000), 5);
+    expect(smallR).toBeLessThan(bigR);
+  });
+
+  it('renders a square/diamond shape when getPointStyle requests one', () => {
+    renderScatter({
+      getPointStyle: (p) => ({ shape: p.shape }),
+      series: [{ id: 's', data: [{ x: 1, y: 1, shape: 'square' }, { x: 2, y: 2, shape: 'diamond' }] }],
+    });
+    const Marker = scatterSpy.mock.calls.at(-1)[0].slots.marker;
+    const markerProps = { seriesId: 's', color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
+
+    const square = render(React.createElement(Marker, { ...markerProps, dataIndex: 0 }));
+    const diamond = render(React.createElement(Marker, { ...markerProps, dataIndex: 1 }));
+
+    expect(square.container.querySelector('rect')).not.toBeNull();
+    expect(diamond.container.querySelector('polygon')).not.toBeNull();
+  });
+});
+
+describe('ScatterReferenceCurve / ScatterReferenceLine (THEME-10)', () => {
+  it('draws a path through the curve points using the chart\'s own live scale', () => {
+    const { container } = render(React.createElement(ScatterReferenceCurve, {
+      points: [{ x: 0, y: 0 }, { x: 1, y: 1 }],
+      color: '#222',
+    }));
+    expect(container.querySelector('path').getAttribute('d')).toBe('M0,100 L10,90');
+  });
+
+  it('draws a labelled reference line at the given label position', () => {
+    const { container } = render(React.createElement(ScatterReferenceLine, {
+      from: { x: 0, y: 0 },
+      to: { x: 1, y: 1 },
+      label: 'No gap',
+      labelAt: { x: 0.9, y: 0.9 },
+      color: '#222',
+    }));
+    expect(container.querySelector('line')).not.toBeNull();
+    expect(container.textContent).toBe('No gap');
+  });
+
+  it('draws an unlabelled reference line when no label is given', () => {
+    const { container } = render(React.createElement(ScatterReferenceLine, {
+      from: { x: 0, y: 0 },
+      to: { x: 1, y: 1 },
+      color: '#222',
+    }));
+    expect(container.querySelector('line')).not.toBeNull();
+    expect(container.querySelector('text')).toBeNull();
+  });
+});

package/tests/TimeSeriesChart.test.jsx

@@ -216,12 +216,17 @@ describe('TimeSeriesChart', () => {
     ],
   };
 
-  it('CHART-5: no custom yAxis when the shared single axis is not all-integer (today\'s real case)', () => {
+  it('CHART-5: no custom (integer-blanking) yAxis formatter when the shared single axis is not all-integer (today\'s real case)', () => {
     renderChart({ data: MIXED_DATA });
 
     const props = chartSpy.mock.calls.at(-1)[0];
     expect(props.yAxis).toHaveLength(1);
-    expect(props.yAxis[0].valueFormatter).toBeUndefined();
+    // THEME-9: BarChart now always supplies a default (locale-grouped, non-
+    // blanking) tick formatter, so this is no longer undefined -- but it
+    // must still be BarChart's generic default, not CHART-5's own
+    // integer-blanking one (which would wrongly blank the 4.5/5.2/6.1 ticks).
+    expect(typeof props.yAxis[0].valueFormatter).toBe('function');
+    expect(props.yAxis[0].valueFormatter(4.5, { location: 'tick' })).not.toBe('');
     expect(props.yAxis[0].label).toBe('Count');
   });
 
@@ -293,8 +298,13 @@ describe('TimeSeriesChart', () => {
     const props = chartSpy.mock.calls.at(-1)[0];
     const primaryAxis = props.yAxis.find((axis) => axis.id === 'primary');
     const secondaryAxis = props.yAxis.find((axis) => axis.id === 'secondary');
-    expect(typeof primaryAxis.valueFormatter).toBe('function');
-    expect(secondaryAxis.valueFormatter).toBeUndefined();
+    expect(primaryAxis.valueFormatter(2, { location: 'tick' })).toBe('2');
+    expect(primaryAxis.valueFormatter(2.5, { location: 'tick' })).toBe('');
+    // THEME-9: BarChart's own default formatter now covers the secondary
+    // axis too (a function, not undefined) -- distinguished from the
+    // integer-blanking one above by NOT blanking a non-integer tick.
+    expect(typeof secondaryAxis.valueFormatter).toBe('function');
+    expect(secondaryAxis.valueFormatter(4.5, { location: 'tick' })).not.toBe('');
   });
 
   it('CHART-5: throws when a series declares axis "secondary" without secondaryYAxisLabel', () => {
@@ -318,12 +328,15 @@ describe('TimeSeriesChart', () => {
 
   it('CHART-5: toggling the non-integer series off switches the shared axis to integer-formatted', () => {
     renderChart({ data: MIXED_DATA });
-    expect(chartSpy.mock.calls.at(-1)[0].yAxis[0].valueFormatter).toBeUndefined();
+    // THEME-9: BarChart's default formatter is present from the start now,
+    // so the CHART-5-specific signal is that a non-integer tick is NOT
+    // blanked yet -- the integer-blanking formatter isn't active.
+    expect(chartSpy.mock.calls.at(-1)[0].yAxis[0].valueFormatter(4.5, { location: 'tick' })).not.toBe('');
 
     fireEvent.click(screen.getByRole('checkbox', { name: 'Presence hours' }));
 
     const props = chartSpy.mock.calls.at(-1)[0];
-    expect(typeof props.yAxis[0].valueFormatter).toBe('function');
+    expect(props.yAxis[0].valueFormatter(4.5, { location: 'tick' })).toBe('');
   });
 
   it('CHART-5: x-axis tickLabelInterval guarantees some labels always show, evenly spread', () => {

package/tests/chartDefaults.test.js

@@ -14,6 +14,13 @@ vi.mock('@mui/x-charts/LineChart', () => ({ LineChart: lineSpy, MarkElement: 'pa
 import { BarChart } from '../src/components/charts/BarChart';
 import { LineChart } from '../src/components/charts/LineChart';
 import { TimeSeriesChart } from '../src/components/charts/TimeSeriesChart';
+import {
+  defaultNumericTickFormatter,
+  PACKAGE_DEFAULT_MARGIN,
+  sizeYAxisForContent,
+  withAxisDefaults,
+  withMarginDefaults,
+} from '../src/components/charts/chartDefaults';
 import { createAppTheme } from '../src/theme/createAppTheme';
 
 const theme = createAppTheme({ palette: { primary: { main: '#3D5A99' } } });
@@ -153,15 +160,64 @@ describe('chart chrome defaults', () => {
     expect(barSpy.mock.calls.at(-1)[0].xAxis[0].scaleType).toBe('band');
   });
 
-  it('adds a font-and-angle-derived bottom margin only for rotated tick labels', () => {
+  it('adds a font-and-angle-derived EXTRA bottom margin, on top of the package default, only for rotated tick labels', () => {
     renderBar({ xAxis: [{ data: ['Jan', 'Feb'], tickLabelStyle: { angle: -45 } }] });
     const rotatedProps = barSpy.mock.calls.at(-1)[0];
-    expect(rotatedProps.margin.bottom).toBeGreaterThan(20);
+    expect(rotatedProps.margin.bottom).toBeGreaterThan(PACKAGE_DEFAULT_MARGIN.bottom);
     expect(rotatedProps.xAxis[0].height).toBeGreaterThan(45);
 
     cleanup();
     renderBar({ xAxis: [{ data: ['Jan', 'Feb'], tickLabelStyle: { angle: 0 } }] });
-    expect(barSpy.mock.calls.at(-1)[0].margin).toBeUndefined();
+    expect(barSpy.mock.calls.at(-1)[0].margin).toEqual(PACKAGE_DEFAULT_MARGIN);
+  });
+
+  // THEME-11 -- the package now forms an opinion on chart margins (was: MUI's own flat 20px on
+  // every side, unconditionally, because this package never set one).
+  describe('withMarginDefaults / package margin default (THEME-11)', () => {
+    it('applies the package default on every side when the caller sets no margin', () => {
+      renderBar();
+      expect(barSpy.mock.calls.at(-1)[0].margin).toEqual(PACKAGE_DEFAULT_MARGIN);
+    });
+
+    // Trap 1 named in the WO: a package-level default injected BEFORE spaceForRotatedTicks'
+    // own `margin?.bottom != null` check would make every rotated-tick chart think the caller
+    // set bottom, and lose its extra rotation space entirely.
+    it('still gives a rotated-tick chart its enlarged bottom margin, not the flat package default', () => {
+      renderBar({ xAxis: [{ data: ['January', 'February'], tickLabelStyle: { angle: -90 } }] });
+      const props = barSpy.mock.calls.at(-1)[0];
+      expect(props.margin.bottom).toBeGreaterThan(PACKAGE_DEFAULT_MARGIN.bottom + 10);
+    });
+
+    // Scope 1's merge semantics: a caller-supplied PARTIAL margin keeps its own value on the
+    // side it set and gets the package default on the others -- never MUI's wider 20px, and
+    // never silently reset to the package default on the side the caller DID set.
+    it('merges a caller-supplied partial margin per side, not wholesale', () => {
+      renderBar({ margin: { left: 60 } });
+      const { margin } = barSpy.mock.calls.at(-1)[0];
+      expect(margin.left).toBe(60);
+      expect(margin.top).toBe(PACKAGE_DEFAULT_MARGIN.top);
+      expect(margin.bottom).toBe(PACKAGE_DEFAULT_MARGIN.bottom);
+      expect(margin.right).toBe(PACKAGE_DEFAULT_MARGIN.right);
+    });
+
+    it('keeps every side a caller sets when they supply a full margin object', () => {
+      renderBar({ margin: { top: 1, bottom: 2, left: 3, right: 4 } });
+      expect(barSpy.mock.calls.at(-1)[0].margin).toEqual({ top: 1, bottom: 2, left: 3, right: 4 });
+    });
+
+    // A LINEAR x-axis's last tick label sits AT the plot edge (unlike a band axis's centred
+    // ticks) and overhangs by about half its width -- the reason `right` is trimmed less than
+    // `left`/`bottom`. Pinned here as a value; the actual no-clip claim is verified by the
+    // rendered check (WO Part C), not derivable from a mocked MUI component.
+    it('keeps a wider default right margin than left/bottom, for a linear x-axis\'s edge-sitting last tick', () => {
+      expect(PACKAGE_DEFAULT_MARGIN.right).toBeGreaterThan(PACKAGE_DEFAULT_MARGIN.left);
+      expect(PACKAGE_DEFAULT_MARGIN.right).toBeGreaterThan(PACKAGE_DEFAULT_MARGIN.bottom);
+    });
+
+    it('applies the SAME package default to LineChart as BarChart', () => {
+      renderLine();
+      expect(lineSpy.mock.calls.at(-1)[0].margin).toEqual(PACKAGE_DEFAULT_MARGIN);
+    });
   });
 
   it('uses the series colour as the fill when a caller opts line markers back in', () => {
@@ -206,3 +262,174 @@ describe('chart chrome defaults', () => {
     });
   });
 });
+
+// THEME-9 #2 -- `withAxisDefaults` broadcast the caller's single xAxisLabel/
+// yAxisLabel string onto EVERY entry of a multi-axis array via `.map()`.
+// Measured live: hram's dual-axis chart carried the identical 43-character
+// label on both y-axes. This is the defect that actually shipped, pinned
+// directly against the exported function rather than only through a
+// rendered BarChart (which never happens to build a multi-axis array).
+describe('withAxisDefaults label broadcast (THEME-9)', () => {
+  it('applies the single label argument only to the first axis of a multi-entry array', () => {
+    const result = withAxisDefaults(
+      [{ id: 'primary' }, { id: 'secondary' }],
+      'Shared label',
+      { scaleType: 'linear' },
+      '12px',
+    );
+    expect(result[0].label).toBe('Shared label');
+    expect(result[1].label).toBeUndefined();
+    // The exact defect: never let one string land on two axes.
+    expect(result.filter((axis) => axis.label === 'Shared label')).toHaveLength(1);
+  });
+
+  it('leaves axes that set their own label untouched, whatever position they are in', () => {
+    const result = withAxisDefaults(
+      [{ label: 'Primary' }, { label: 'Secondary' }],
+      'Fallback',
+      { scaleType: 'linear' },
+      '12px',
+    );
+    expect(result[0].label).toBe('Primary');
+    expect(result[1].label).toBe('Secondary');
+  });
+
+  it('still labels the common single-axis case unchanged', () => {
+    const result = withAxisDefaults([{ id: 'only' }], 'Cases', { scaleType: 'linear' }, '12px');
+    expect(result[0].label).toBe('Cases');
+
+    const synthesized = withAxisDefaults(undefined, 'Cases', { scaleType: 'linear' }, '12px');
+    expect(synthesized[0].label).toBe('Cases');
+  });
+});
+
+// THEME-9 #4 -- BarChart set no default tick formatter at all (raw domain
+// numbers); a hand-rolled `Intl` compact-notation default was measured to be
+// actively wrong in two of the four locales this package's consumers use:
+// German does not compact thousands at all, and Swahili prepends a word
+// ("elfu") that is WIDER than the raw number. Plain grouped formatting (no
+// `notation: 'compact'`) is pinned here against a live `Intl.NumberFormat`
+// computation rather than hardcoded locale punctuation, so the assertion
+// survives ICU data updates.
+describe('defaultNumericTickFormatter (THEME-9)', () => {
+  it.each(['de-CH', 'en', 'fr', 'sw'])('formats %s ticks the same way Intl grouping would, with no compact notation', (locale) => {
+    const formatter = defaultNumericTickFormatter(locale);
+    for (const value of [12500, 998000, 1000000000]) {
+      const expected = new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value);
+      expect(formatter(value, { location: 'tick' })).toBe(expected);
+      // The exact failure mode measured live: compact notation prepending a
+      // wider word in Swahili, or a 'K'/'M'/'B' suffix elsewhere.
+      expect(formatter(value, { location: 'tick' })).not.toMatch(/[KMB]|elfu/i);
+    }
+  });
+
+  it('keeps full precision outside the tick context (tooltip/legend) rather than rounding away a meaningful difference', () => {
+    const formatter = defaultNumericTickFormatter('en');
+    expect(formatter(12500.456, { location: 'tooltip' })).toBe('12,500.456');
+    expect(formatter(12500.456, { location: 'tick' })).toBe('12,500.5');
+  });
+});
+
+// THEME-9 #1/#3 -- MUI's own y-axis width default is a flat 45px (ticks) +
+// 20px (label) regardless of what the ticks actually say (confirmed against
+// @mui/x-charts' own DEFAULT_AXIS_SIZE_WIDTH/AXIS_LABEL_DEFAULT_HEIGHT and
+// its useChartDimensions selector, where margin and axis size are additive).
+// That is both too generous for short ticks and too stingy for wide
+// unit-suffixed ones -- the measured Accessibility-panel overlap. Margins
+// and the exact rendered overlap are verified live, not by unit test (per
+// the WO); this pins the sizing FUNCTION's own contract.
+describe('sizeYAxisForContent (THEME-9)', () => {
+  it('sizes a linear axis from its own caller-supplied min/max', () => {
+    const [axis] = sizeYAxisForContent(
+      [{ scaleType: 'linear', min: 0, max: 1, label: 'Coverage (%)' }],
+      [],
+      '12px',
+    );
+    expect(axis.width).toBeGreaterThan(0);
+  });
+
+  it('reserves more width for a longer formatted tick, all else equal', () => {
+    const [shortTick] = sizeYAxisForContent(
+      [{ scaleType: 'linear', min: 0, max: 1 }], [], '12px',
+    );
+    const [wideTick] = sizeYAxisForContent(
+      [{ scaleType: 'linear', min: 0, max: 1, valueFormatter: (v) => `${v} minutes` }],
+      [], '12px',
+    );
+    expect(wideTick.width).toBeGreaterThan(shortTick.width);
+  });
+
+  it('falls back to the plotted series when the caller sets neither min nor max', () => {
+    const [axis] = sizeYAxisForContent(
+      [{ scaleType: 'linear' }],
+      [{ data: [1, 250000] }],
+      '12px',
+    );
+    expect(axis.width).toBeGreaterThan(0);
+  });
+
+  it('leaves the axis untouched when there is nothing to measure against', () => {
+    const [axis] = sizeYAxisForContent([{ scaleType: 'linear' }], [], '12px');
+    expect(axis.width).toBeUndefined();
+  });
+
+  it('never overrides a caller-supplied width', () => {
+    const [axis] = sizeYAxisForContent(
+      [{ scaleType: 'linear', min: 0, max: 1, width: 42 }], [], '12px',
+    );
+    expect(axis.width).toBe(42);
+  });
+
+  it('leaves a categorical (band/point) axis alone -- its ticks are names, not numbers', () => {
+    const [axis] = sizeYAxisForContent(
+      [{ scaleType: 'band', data: ['a', 'b'] }], [], '12px',
+    );
+    expect(axis.width).toBeUndefined();
+  });
+
+  // Reviewer-caught regression (THEME-9): a series with no explicit
+  // `yAxisId` is NOT "assigned to no axis" -- MUI defaults it to the FIRST
+  // axis in the array (`yAxisIds[0]`), whatever that axis' id is. Matching
+  // only `undefined === undefined` left the primary axis of a genuine
+  // dual-axis chart (id set, series unmarked) with zero matched series and
+  // therefore MUI's untouched flat default -- a silent no-op on exactly the
+  // dual-axis case this WO was measured against (TimeSeriesChart's own
+  // secondary-axis feature, CHART-5).
+  it('assigns an unmarked series to the FIRST axis in a dual-axis array, matching MUI\'s own default', () => {
+    const dualAxis = [{ scaleType: 'linear', id: 'primary' }, { scaleType: 'linear', id: 'secondary' }];
+    const series = [
+      { data: [1, 2, 3] }, // no yAxisId -- MUI assigns this to 'primary'
+      { data: [400000, 500000], yAxisId: 'secondary' },
+    ];
+
+    const [primary, secondary] = sizeYAxisForContent(dualAxis, series, '12px');
+    expect(primary.width).toBeGreaterThan(0);
+    expect(secondary.width).toBeGreaterThan(0);
+    // The secondary axis' series format much wider numbers -- it must
+    // reserve more width than the primary axis, not the same (which is what
+    // "both axes silently untouched" or "both matched the same series" would
+    // produce).
+    expect(secondary.width).toBeGreaterThan(primary.width);
+  });
+});
+
+// THEME-11 -- pure-function contract of the merge helper itself, independent of any chart
+// component wiring (that's covered above, in 'chart chrome defaults').
+describe('withMarginDefaults (THEME-11)', () => {
+  it('returns the package default untouched when the caller sets no margin', () => {
+    expect(withMarginDefaults(undefined)).toEqual(PACKAGE_DEFAULT_MARGIN);
+  });
+
+  it('merges a partial object per side', () => {
+    expect(withMarginDefaults({ top: 40 })).toEqual({ ...PACKAGE_DEFAULT_MARGIN, top: 40 });
+  });
+
+  it('expands a numeric shorthand margin to all four sides before merging', () => {
+    expect(withMarginDefaults(5)).toEqual({ top: 5, bottom: 5, left: 5, right: 5 });
+  });
+
+  it('leaves a fully-specified caller margin untouched', () => {
+    const full = { top: 1, bottom: 2, left: 3, right: 4 };
+    expect(withMarginDefaults(full)).toEqual(full);
+  });
+});

package/tests/chartsPalette.test.js

@@ -37,6 +37,26 @@ describe('chart palette and formatters', () => {
     expect(createChartFormatters('fr-FR').ratio(1.5)).toContain('1');
   });
 
+  // THEME-10: an undifferentiated scatter cloud (no colour dimension encoded) needs a single
+  // neutral tone, distinct from the categorical/sequential arrays above.
+  it('resolves a single neutral tone from theme.palette.text.secondary', () => {
+    const theme = {
+      palette: {
+        mode: 'light',
+        primary: { main: 'primary-main' },
+        secondary: { main: 'secondary-main' },
+        info: { main: 'info-main' },
+        success: { main: 'success-main' },
+        warning: { main: 'warning-main' },
+        action: { disabled: 'action-disabled' },
+        text: { secondary: 'text-secondary' },
+        divider: 'divider',
+      },
+    };
+
+    expect(getNeutralChartPalette(theme).neutral).toBe('text-secondary');
+  });
+
   it('uses the theme categorical ramp when one is present', () => {
     const ramp = ['series-1', 'series-2', 'series-3'];
     const theme = {