@micha.bigler/ui-core-micha 2.30.0 → 2.31.1

package/src/components/charts/LineChart.jsx

@@ -1,11 +1,31 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import { LineChart as MuiLineChart } from '@mui/x-charts/LineChart';
+import { useTheme } from '@mui/material/styles';
+import {
+  LineChart as MuiLineChart,
+  MarkElement as MuiMarkElement,
+} from '@mui/x-charts/LineChart';
 import { useNeutralChartPalette } from './palette';
+import {
+  DEFAULT_LEGEND_POSITION,
+  spaceForRotatedTicks,
+  withAxisDefaults,
+  withChartSlotDefaults,
+  withGridDefaults,
+} from './chartDefaults';
 
-function labelledAxis(axes, label, defaults) {
-  const values = axes?.length ? axes : [defaults];
-  return values.map((axis) => ({ ...axis, label: axis.label || label }));
+// Fixes MUI's hollow `background.paper`-filled marker (MarkElement.js's own
+// `styled()` default). CHART-6's WO named a `MuiMarkElement` theme-token
+// override in src/theme/tokens.js as the preferred mechanism, with a
+// per-wrapper slots/sx override as the documented fallback. This uses the
+// fallback deliberately, not because the theme route was infeasible: a
+// wrapper-level fix applies to every consumer immediately on this version
+// bump, including the 14 apps that haven't adopted `createAppTheme` yet
+// (THEME-1 is a separate, optional pin bump) -- a theme-token override would
+// only take effect for apps on the new baseline theme. Composes correctly
+// with a caller's own `slots.mark` (spread after this default, so it wins).
+function FilledMarkElement({ color, style, ...props }) {
+  return <MuiMarkElement {...props} color={color} style={{ fill: color, ...style }} />;
 }
 
 /**
@@ -21,23 +41,56 @@ export function LineChart({
   palette,
   minHeight,
   aspect,
+  grid,
+  hideLegend = series.length <= 1,
+  legendPosition = DEFAULT_LEGEND_POSITION,
+  margin,
+  slots,
+  slotProps,
   ...chartProps
 }) {
+  const theme = useTheme();
   const neutralPalette = useNeutralChartPalette();
   if (!xAxisLabel || !yAxisLabel) {
     throw new Error('LineChart requires xAxisLabel and yAxisLabel.');
   }
 
+  const labelledXAxis = withAxisDefaults(
+    xAxis,
+    xAxisLabel,
+    { scaleType: 'point', data: [] },
+    theme.typography.caption.fontSize,
+  );
+  const labelledYAxis = withAxisDefaults(
+    yAxis,
+    yAxisLabel,
+    { scaleType: 'linear' },
+    theme.typography.caption.fontSize,
+  );
+  const rotatedTickSpace = spaceForRotatedTicks(
+    labelledXAxis,
+    margin,
+    theme.typography.caption.lineHeight,
+  );
+  const defaultedSeries = series.map((item) => ({
+    showMark: false,
+    labelMarkType: 'square',
+    ...item,
+  }));
+
   return (
     <Box data-testid="line-chart-container" sx={{ width: '100%', minHeight, aspectRatio: aspect }}>
       <MuiLineChart
         {...chartProps}
-        series={series}
-        xAxis={labelledAxis(xAxis, xAxisLabel, { scaleType: 'point', data: [] })}
-        yAxis={labelledAxis(yAxis, yAxisLabel, { scaleType: 'linear' })}
+        series={defaultedSeries}
+        xAxis={rotatedTickSpace.xAxis}
+        yAxis={labelledYAxis}
         colors={palette || neutralPalette.categorical}
-        hideLegend={series.length <= 1}
-        slotProps={{ tooltip: { trigger: 'axis' } }}
+        grid={withGridDefaults(grid)}
+        hideLegend={hideLegend}
+        margin={rotatedTickSpace.margin}
+        slots={{ mark: FilledMarkElement, ...slots }}
+        slotProps={withChartSlotDefaults(slotProps, legendPosition)}
       />
     </Box>
   );

package/src/components/charts/TimeSeriesChart.jsx

@@ -80,6 +80,22 @@ const RANGE_OPTIONS = [
   { key: '1y', granularity: 'month', labelKey: 'TimeSeriesChart.RANGE_1_YEAR' },
 ];
 
+function SeriesToggleDot({ color, active }) {
+  return (
+    <Box
+      component="span"
+      data-testid="series-colour-dot"
+      sx={{
+        width: (theme) => theme.spacing(1.5),
+        height: (theme) => theme.spacing(1.5),
+        borderRadius: '50%',
+        bgcolor: color,
+        opacity: active ? 1 : 0.35,
+      }}
+    />
+  );
+}
+
 /**
  * A time-series preset on ChartFrame + BarChart: a range picker (emits the
  * selected range AND its mapped granularity to the host) and series toggle
@@ -106,6 +122,7 @@ export function TimeSeriesChart({
   error = false,
   onRangeChange,
   defaultRange = '1w',
+  skipAnimation,
 }) {
   const { t } = useTranslation();
   const palette = useNeutralChartPalette().categorical;
@@ -221,6 +238,8 @@ export function TimeSeriesChart({
                   size="small"
                   checked={visibleKeys.has(series.key)}
                   onChange={() => toggleSeries(series.key)}
+                  icon={<SeriesToggleDot color={palette[index % palette.length]} active={false} />}
+                  checkedIcon={<SeriesToggleDot color={palette[index % palette.length]} active />}
                   sx={{
                     color: palette[index % palette.length],
                     '&.Mui-checked': { color: palette[index % palette.length] },
@@ -261,6 +280,8 @@ export function TimeSeriesChart({
           }))}
           palette={visiblePalette}
           height={CHART_HEIGHT}
+          hideLegend={seriesConfig.length > 0}
+          skipAnimation={skipAnimation}
         />
       )}
     </ChartFrame>

package/src/components/charts/chartDefaults.js

@@ -0,0 +1,120 @@
+export const DEFAULT_LEGEND_POSITION = {
+  vertical: 'bottom',
+  horizontal: 'start',
+};
+
+export function withGridDefaults(grid) {
+  return { horizontal: true, ...grid };
+}
+
+export function withAxisDefaults(axes, label, defaults, tickFontSize) {
+  const values = axes?.length ? axes : [defaults];
+  return values.map((axis) => ({
+    // `defaults.scaleType` (and any other scale-defining default) must
+    // survive even when the caller passes their OWN xAxis/yAxis array --
+    // confirmed live in the dev harness: a caller-supplied axis with `data`
+    // but no `scaleType` previously lost 'point'/'band' entirely (only
+    // applied when the whole array was absent), leaving MUI's scale
+    // undefined and every point position NaN (`<path> attribute d:
+    // Expected number, "MNaN,..."` in the real rendered SVG -- a mocked
+    // prop-assertion test cannot catch this, it only reproduces on an
+    // actual MUI scale computation).
+    ...defaults,
+    ...axis,
+    tickLabelStyle: {
+      fontSize: tickFontSize,
+      ...axis.tickLabelStyle,
+    },
+    label: axis.label || label,
+  }));
+}
+
+function cssLengthToPixels(value) {
+  if (typeof value === 'number') return value;
+  if (typeof value !== 'string') return 0;
+
+  const parsed = Number.parseFloat(value);
+  if (!Number.isFinite(parsed)) return 0;
+  if (value.endsWith('rem') || value.endsWith('em')) return parsed * 16;
+  return parsed;
+}
+
+const MUI_LABELLED_X_AXIS_HEIGHT = 45;
+const MUI_CHART_MARGIN_BOTTOM = 20;
+const AVERAGE_GLYPH_WIDTH_EM = 0.6;
+
+function formattedTickText(axis, value) {
+  if (!axis.valueFormatter) return String(value);
+  try {
+    return String(axis.valueFormatter(value, { location: 'tick' }));
+  } catch {
+    // Some formatters require MUI's complete scale context. Falling back to
+    // the raw value is conservative: it reserves at least as much space.
+    return String(value);
+  }
+}
+
+function rotatedTickMetrics(axis, defaultLineHeight) {
+  const angle = Number(axis.tickLabelStyle?.angle) || 0;
+  if (angle === 0) return null;
+
+  const fontSize = cssLengthToPixels(axis.tickLabelStyle?.fontSize);
+  if (fontSize === 0) return null;
+
+  const lineHeight = Number(axis.tickLabelStyle?.lineHeight) || defaultLineHeight;
+  const longestLabel = (axis.data || []).reduce((longest, value) => {
+    const text = formattedTickText(axis, value);
+    return text.length > longest.length ? text : longest;
+  }, '');
+  const textWidth = Math.max(fontSize, longestLabel.length * fontSize * AVERAGE_GLYPH_WIDTH_EM);
+  const radians = (angle * Math.PI) / 180;
+  const projectedHeight = Math.abs(Math.cos(radians)) * fontSize * lineHeight
+    + Math.abs(Math.sin(radians)) * textWidth;
+  const extraHeight = Math.max(1, Math.ceil(projectedHeight - fontSize));
+
+  return { extraHeight };
+}
+
+/**
+ * Rotated labels project both their line box and text width vertically.
+ * X-Charts uses xAxis.height when deciding whether a label fits, while margin
+ * only separates the axis from the SVG edge, so both surfaces must grow.
+ * Explicit caller height and bottom-margin values always remain untouched.
+ */
+export function spaceForRotatedTicks(xAxis, margin, defaultLineHeight = 1) {
+  let largestExtraHeight = 0;
+  const spacedXAxis = xAxis.map((axis) => {
+    const metrics = rotatedTickMetrics(axis, defaultLineHeight);
+    if (!metrics) return axis;
+
+    largestExtraHeight = Math.max(largestExtraHeight, metrics.extraHeight);
+    if (axis.height != null) return axis;
+    return { ...axis, height: MUI_LABELLED_X_AXIS_HEIGHT + metrics.extraHeight };
+  });
+
+  const callerSetBottom = typeof margin === 'number' || margin?.bottom != null;
+  const spacedMargin = largestExtraHeight > 0 && !callerSetBottom
+    ? { ...margin, bottom: MUI_CHART_MARGIN_BOTTOM + largestExtraHeight }
+    : margin;
+
+  return { xAxis: spacedXAxis, margin: spacedMargin };
+}
+
+export function withChartSlotDefaults(slotProps, legendPosition) {
+  const position = {
+    ...DEFAULT_LEGEND_POSITION,
+    ...legendPosition,
+    ...slotProps?.legend?.position,
+  };
+  return {
+    ...slotProps,
+    tooltip: {
+      trigger: 'axis',
+      ...slotProps?.tooltip,
+    },
+    legend: {
+      ...slotProps?.legend,
+      position,
+    },
+  };
+}

package/src/components/charts/chartLabels.js

@@ -0,0 +1,36 @@
+// Short, granularity-aware x-axis tick labels.
+//
+// Not a style choice -- MUI X-Charts has a known, unfixed bug (mui-x#18768,
+// duplicate of #18399): when the measured space for a tick label gets
+// tight, its ellipsize() logic doesn't truncate the text, it collapses it
+// to an empty string (the <tspan> stays in the DOM with no content). It
+// only reproduces with long label text ("08/05, 10:00 AM"-style, ~16
+// characters) combined with this app's actual font metrics (DM Sans) --
+// short labels like "05.08." or "10:00" leave enough margin that the bug
+// never triggers. Same fix already proven in jg-ferien's ActivitySection.
+
+// `locale` defaults to "de-CH" only as a fallback for callers that don't
+// pass the app's active i18n language (found in review: an earlier version
+// hardcoded "de-CH" always, showing German month names to en/fr users).
+
+export function formatShortTime(date, locale = 'de-CH') {
+  // hour12 forced false regardless of locale -- an English 12-hour label
+  // ("10:00 AM") is exactly the longer style that triggered the original
+  // collapse bug; staying short is the point, not locale fidelity here.
+  return date.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: false });
+}
+
+export function formatShortDate(date, locale = 'de-CH') {
+  return date.toLocaleDateString(locale, { day: '2-digit', month: '2-digit' });
+}
+
+export function formatShortMonth(date, locale = 'de-CH') {
+  return date.toLocaleDateString(locale, { month: 'short', year: '2-digit' });
+}
+
+// "All" spans years -- day/month labels repeat (e.g. every "01.04." shows up
+// once per year) and read as meaningless noise; a bare year number is the
+// only granularity dense multi-year history can show cleanly.
+export function formatShortYear(date, locale = 'de-CH') {
+  return date.toLocaleDateString(locale, { year: 'numeric' });
+}

package/src/components/charts/yearTickInterval.js

@@ -0,0 +1,7 @@
+/** Return one January tick for every calendar year represented in dates. */
+export function yearTickInterval(dates) {
+  const years = new Set(dates.map((date) => date.getFullYear()));
+  return [...years]
+    .sort((first, second) => first - second)
+    .map((year) => new Date(year, 0, 1));
+}

package/src/index.js

@@ -55,6 +55,13 @@ export { BarChart } from './components/charts/BarChart';
 export { LineChart } from './components/charts/LineChart';
 export { TimeSeriesChart } from './components/charts/TimeSeriesChart';
 export { getNeutralChartPalette, useNeutralChartPalette } from './components/charts/palette';
+export {
+  formatShortTime,
+  formatShortDate,
+  formatShortMonth,
+  formatShortYear,
+} from './components/charts/chartLabels';
+export { yearTickInterval } from './components/charts/yearTickInterval';
 export {
   formatPercentage,
   formatCompact,

package/src/theme/index.js

@@ -5,3 +5,10 @@ export {
   reportThemeAdoption,
   THEME_COMPLETENESS_SURFACES,
 } from './themeCompleteness';
+export {
+  formatShortTime,
+  formatShortDate,
+  formatShortMonth,
+  formatShortYear,
+} from '../components/charts/chartLabels';
+export { yearTickInterval } from '../components/charts/yearTickInterval';

package/src/theme/themeCompleteness.js

@@ -275,6 +275,22 @@ function contrastFindings(theme) {
     white: '#FFFFFF',
     page: theme.palette?.background?.default,
   };
+  for (const status of STATUS_KEYS) {
+    const main = theme.palette?.[status]?.main;
+    if (!main) continue;
+    for (const [surface, background] of Object.entries(backgrounds)) {
+      const ratio = calculateContrastRatio(main, background);
+      if (!Number.isFinite(ratio) || ratio < 4.5) {
+        findings.push({
+          surface: `contrast.${status}.main-on-${surface}`,
+          reason: Number.isFinite(ratio)
+            ? `Expected at least 4.5:1; received ${ratio.toFixed(2)}:1.`
+            : 'Contrast could not be calculated from the declared colours.',
+        });
+      }
+    }
+  }
+
   for (const state of ['main', 'hover', 'focus', 'error']) {
     const colour = theme.palette?.controlBorder?.[state];
     if (!colour) continue;

package/src/theme/tokens.js

@@ -79,7 +79,7 @@ export const BASELINE_PALETTE = {
     bg: '#E5F4E9',
   },
   warning: {
-    ...withMainShades('#C08A2C', '#212529'),
+    ...withMainShades('#976100', '#FFFFFF'),
     text: '#976100',
     fill: '#C08A2C',
     fillText: '#212529',

package/tests/BarChart.test.jsx

@@ -26,7 +26,10 @@ describe('BarChart preset', () => {
 
     expect(props.xAxis[0].label).toBe('Year');
     expect(props.yAxis[0].label).toBe('Value (kg)');
-    expect(props.slotProps).toEqual({ tooltip: { trigger: 'axis' } });
+    expect(props.slotProps).toEqual({
+      tooltip: { trigger: 'axis' },
+      legend: { position: { vertical: 'bottom', horizontal: 'start' } },
+    });
     expect(props.hideLegend).toBe(true);
     expect(screen.getByTestId('bar-chart-container').getAttribute('style') || '').not.toContain('px');
   });

package/tests/LineChart.test.jsx

@@ -5,7 +5,7 @@ import { cleanup, render } from '@testing-library/react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 const chartSpy = vi.hoisted(() => vi.fn(() => <div data-testid="mui-line-chart" />));
-vi.mock('@mui/x-charts/LineChart', () => ({ LineChart: chartSpy }));
+vi.mock('@mui/x-charts/LineChart', () => ({ LineChart: chartSpy, MarkElement: 'path' }));
 
 import { LineChart } from '../src/components/charts/LineChart';
 
@@ -28,6 +28,9 @@ describe('LineChart preset', () => {
     expect(props.xAxis[0].label).toBe('Date');
     expect(props.yAxis[0].label).toBe('Rate (%)');
     expect(props.hideLegend).toBe(false);
-    expect(props.slotProps).toEqual({ tooltip: { trigger: 'axis' } });
+    expect(props.slotProps).toEqual({
+      tooltip: { trigger: 'axis' },
+      legend: { position: { vertical: 'bottom', horizontal: 'start' } },
+    });
   });
 });

package/tests/chartDefaults.test.js

@@ -0,0 +1,208 @@
+// @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 barSpy = vi.hoisted(() => vi.fn(() => null));
+const lineSpy = vi.hoisted(() => vi.fn(() => null));
+vi.mock('@mui/x-charts/BarChart', () => ({ BarChart: barSpy }));
+vi.mock('@mui/x-charts/LineChart', () => ({ LineChart: lineSpy, MarkElement: 'path' }));
+
+import { BarChart } from '../src/components/charts/BarChart';
+import { LineChart } from '../src/components/charts/LineChart';
+import { TimeSeriesChart } from '../src/components/charts/TimeSeriesChart';
+import { createAppTheme } from '../src/theme/createAppTheme';
+
+const theme = createAppTheme({ palette: { primary: { main: '#3D5A99' } } });
+const i18n = i18next.createInstance();
+i18n.init({
+  lng: 'en',
+  resources: {
+    en: {
+      translation: {
+        'TimeSeriesChart.RANGE_LABEL': 'Range',
+        'TimeSeriesChart.RANGE_1_DAY': '1 day',
+        'TimeSeriesChart.RANGE_1_WEEK': '1 week',
+        'TimeSeriesChart.RANGE_1_MONTH': '1 month',
+        'TimeSeriesChart.RANGE_1_YEAR': '1 year',
+        'TimeSeriesChart.SERIES_LABEL': 'Series',
+        'ChartFrame.EMPTY_DEFAULT': 'No data available.',
+        'ChartFrame.LOADING': 'Loading chart.',
+        'ChartFrame.ERROR_DEFAULT': 'The chart could not be loaded.',
+      },
+    },
+  },
+  interpolation: { escapeValue: false },
+});
+
+function withProviders(children) {
+  return React.createElement(
+    ThemeProvider,
+    { theme },
+    React.createElement(I18nextProvider, { i18n }, children),
+  );
+}
+
+function renderBar(props = {}) {
+  return render(withProviders(
+    React.createElement(BarChart, {
+      xAxisLabel: 'Month',
+      yAxisLabel: 'Cases',
+      series: [{ label: 'Cases', data: [1, 2] }],
+      ...props,
+    }),
+  ));
+}
+
+function renderLine(props = {}) {
+  return render(withProviders(
+    React.createElement(LineChart, {
+      xAxisLabel: 'Month',
+      yAxisLabel: 'Cases',
+      series: [{ label: 'Cases', data: [1, 2] }],
+      ...props,
+    }),
+  ));
+}
+
+describe('chart chrome defaults', () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('gives minimal BarChart, LineChart, and TimeSeriesChart calls the baseline ticks and horizontal grid, with line marks off', () => {
+    renderBar();
+    const barProps = barSpy.mock.calls.at(-1)[0];
+    expect(barProps.xAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(barProps.yAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(barProps.grid).toEqual({ horizontal: true });
+
+    renderLine();
+    const lineProps = lineSpy.mock.calls.at(-1)[0];
+    expect(lineProps.xAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(lineProps.yAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(lineProps.grid).toEqual({ horizontal: true });
+    expect(lineProps.series[0].showMark).toBe(false);
+
+    render(withProviders(React.createElement(TimeSeriesChart, {
+      title: 'Activity',
+      xAxisLabel: 'Day',
+      yAxisLabel: 'Cases',
+      data: {
+          xLabels: ['Mon', 'Tue'],
+          series: [{ key: 'cases', label: 'Cases', data: [1, 2] }],
+      },
+      skipAnimation: true,
+    })));
+    const timeSeriesProps = barSpy.mock.calls.at(-1)[0];
+    expect(timeSeriesProps.xAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(timeSeriesProps.yAxis[0].tickLabelStyle.fontSize).toBe(theme.typography.caption.fontSize);
+    expect(timeSeriesProps.grid).toEqual({ horizontal: true });
+    expect(timeSeriesProps.skipAnimation).toBe(true);
+  });
+
+  it('keeps caller tick font, grid, showMark, and legendPosition values instead of the defaults', () => {
+    const legendPosition = { vertical: 'top', horizontal: 'end' };
+    renderLine({
+      xAxis: [{ data: ['Jan', 'Feb'], tickLabelStyle: { fontSize: 17 } }],
+      grid: { horizontal: false, vertical: true },
+      series: [{ label: 'Cases', data: [1, 2], showMark: true }],
+      legendPosition,
+    });
+
+    const props = lineSpy.mock.calls.at(-1)[0];
+    expect(props.xAxis[0].tickLabelStyle.fontSize).toBe(17);
+    expect(props.grid).toEqual({ horizontal: false, vertical: true });
+    expect(props.series[0].showMark).toBe(true);
+    expect(props.slotProps.legend.position).toEqual(legendPosition);
+  });
+
+  it('adds a caller-requested vertical grid to the default horizontal grid', () => {
+    renderLine({ grid: { vertical: true } });
+
+    expect(lineSpy.mock.calls.at(-1)[0].grid).toEqual({
+      horizontal: true,
+      vertical: true,
+    });
+  });
+
+  it('lets a caller switch off both grid directions explicitly', () => {
+    renderBar({ grid: { horizontal: false, vertical: false } });
+
+    expect(barSpy.mock.calls.at(-1)[0].grid).toEqual({
+      horizontal: false,
+      vertical: false,
+    });
+  });
+
+  // Found live in the dev harness (not by this mocked test, which cannot
+  // reproduce a real MUI scale computation): a caller-supplied xAxis with
+  // `data` but no `scaleType` lost the wrapper's default scaleType entirely,
+  // leaving MUI's point/band scale undefined and every rendered path NaN.
+  // This asserts the prop-level contract; the harness's "Chart defaults" /
+  // "Caller overrides" LineChart specimens are the real-render proof.
+  it('keeps the default scaleType on a caller-supplied axis that does not set one', () => {
+    renderLine({ xAxis: [{ data: ['Jan', 'Feb'] }] });
+    expect(lineSpy.mock.calls.at(-1)[0].xAxis[0].scaleType).toBe('point');
+
+    renderBar({ xAxis: [{ data: ['Jan', 'Feb'] }] });
+    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', () => {
+    renderBar({ xAxis: [{ data: ['Jan', 'Feb'], tickLabelStyle: { angle: -45 } }] });
+    const rotatedProps = barSpy.mock.calls.at(-1)[0];
+    expect(rotatedProps.margin.bottom).toBeGreaterThan(20);
+    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();
+  });
+
+  it('uses the series colour as the fill when a caller opts line markers back in', () => {
+    renderLine({ series: [{ label: 'Cases', data: [1, 2], showMark: true }] });
+    const props = lineSpy.mock.calls.at(-1)[0];
+    const mark = props.slots.mark({
+      color: '#3D5A99',
+      id: 'cases',
+      dataIndex: 0,
+      shape: 'circle',
+      x: 10,
+      y: 10,
+    });
+
+    expect(mark.props.style.fill).toBe('#3D5A99');
+    expect(mark.props.style.fill).not.toBe(theme.palette.background.paper);
+  });
+
+  it('defaults legendPosition to bottom-start and lets a caller choose another MUI position', () => {
+    renderBar({ series: [{ data: [1] }, { data: [2] }] });
+    expect(barSpy.mock.calls.at(-1)[0].slotProps.legend.position).toEqual({
+      vertical: 'bottom',
+      horizontal: 'start',
+    });
+
+    cleanup();
+    const requested = { vertical: 'middle' };
+    renderBar({ series: [{ data: [1] }, { data: [2] }], legendPosition: requested });
+    expect(barSpy.mock.calls.at(-1)[0].slotProps.legend.position).toEqual({
+      vertical: 'middle',
+      horizontal: 'start',
+    });
+
+    cleanup();
+    renderBar({
+      series: [{ data: [1] }, { data: [2] }],
+      slotProps: { legend: { position: { horizontal: 'end' } } },
+    });
+    expect(barSpy.mock.calls.at(-1)[0].slotProps.legend.position).toEqual({
+      vertical: 'bottom',
+      horizontal: 'end',
+    });
+  });
+});

package/tests/chartLabels.test.js

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  formatShortDate,
+  formatShortMonth,
+  formatShortTime,
+  formatShortYear,
+} from '../src/components/charts/chartLabels';
+import { yearTickInterval } from '../src/components/charts/yearTickInterval';
+
+// 2026-08-05 14:07, a fixed instant so assertions aren't flaky around
+// midnight/year boundaries.
+const FIXED = new Date(2026, 7, 5, 14, 7, 0);
+
+describe('chart label helpers', () => {
+  it('ports fitness-monitor short-label behaviour, including locale fallback and forced 24-hour time', () => {
+    expect(formatShortDate(FIXED, 'de-CH')).toBe('05.08.');
+    expect(formatShortDate(FIXED, 'de-CH').length).toBeLessThan(10);
+    expect(formatShortTime(FIXED, 'de-CH')).toBe('14:07');
+    expect(formatShortTime(FIXED, 'en-US')).toBe('14:07');
+    expect(formatShortMonth(FIXED, 'de-CH')).toMatch(/26$/);
+    expect(formatShortMonth(FIXED, 'de-CH').length).toBeLessThan(10);
+    expect(formatShortYear(FIXED, 'de-CH')).toBe('2026');
+    expect(formatShortYear(FIXED, 'en-US')).toBe('2026');
+    expect(formatShortDate(FIXED, 'en-US')).toBe('08/05');
+    expect(formatShortDate(FIXED)).toBe(formatShortDate(FIXED, 'de-CH'));
+  });
+
+  it('returns one tick per year and proves dense unfiltered dates produce duplicate year labels', () => {
+    const denseDates = [];
+    for (let year = 2022; year <= 2025; year += 1) {
+      for (let month = 0; month < 12; month += 1) {
+        denseDates.push(new Date(year, month, 1));
+      }
+    }
+
+    const unfilteredLabels = denseDates.map((date) => formatShortYear(date, 'de-CH'));
+    expect(new Set(unfilteredLabels).size).toBeLessThan(unfilteredLabels.length);
+
+    const ticks = yearTickInterval(denseDates);
+    expect(ticks).toHaveLength(4);
+    expect(ticks.every((date) => date.getMonth() === 0 && date.getDate() === 1)).toBe(true);
+    expect(ticks.map((date) => formatShortYear(date, 'de-CH'))).toEqual([
+      '2022',
+      '2023',
+      '2024',
+      '2025',
+    ]);
+  });
+});