@micha.bigler/ui-core-micha 2.28.2 → 2.29.0

package/DESIGN.md

@@ -19,7 +19,8 @@ These principles are the spec a **prototype** encodes and the implementation mat
 
 ## Charts (read by humans, executed by code)
 
-8. **Every chart earns:** axis labels (with units), a legend only when >1 series, a tooltip, theme-token colours, container-responsive sizing, and empty/loading states. **Single-hue for magnitude; diverging (blue/red around zero) ONLY for signed data. Never dual-axis.** The concrete data palette is per-app / the `ui-core-micha` chart kit — this states the rules, not a fixed palette.
+8. **Every chart earns:** axis labels (with units), a legend only when >1 series, a tooltip, theme-token colours, container-responsive sizing, and empty/loading states. **Single-hue for magnitude; diverging (blue/red around zero) ONLY for signed data.** The concrete data palette is per-app / the `ui-core-micha` chart kit — this states the rules, not a fixed palette.
+   **Dual-axis is a default-off exception, opt-in only** (CHART-5, operator decision): the shared `TimeSeriesChart` preset supports a second y-axis via a per-series `axis: 'secondary'` field specifically for two series sharing one axis at very different scales/units (e.g. a user count vs. hours) where series-toggles alone leave one series unreadable. Reach for it only under that same condition, not as a general layout choice — a single shared axis (or toggles) stays the default everywhere else.
 9. **Ground it in the real subject matter.** Faithful structures from the real panels (hram: Morris-tornado, Pareto/knee, CI-strip, allocation-scatter with shape-encoded sources) — no lorem, no generic charts. Hence: **scout the real subject before building.**
 
 ## Craft

package/WORK_ORDERS.md

@@ -23,6 +23,7 @@ prefixed ID; never reuse a bare flat number across workstreams.
 
 | ID | Titel | Beschreibung | Datum | Status | Commit(s) | Notiz |
 |---|---|---|---|---|---|---|
+| CHART-5 | Dual y-axis + always-visible x-axis ticks on `TimeSeriesChart` | Opt-in second y-axis via a new per-series `axis: 'secondary'` field (backward-compatible, off by default) with auto-detected integer-only tick labels per axis group; deterministic x-axis `tickLabelInterval` so bucket labels never all vanish under MUI's default collision-avoidance (the live symptom: zero x-axis labels with 24 hourly buckets). Reverses CHART-2's deliberate "no second y-axis" choice on fresh operator instruction; `DESIGN.md` #8 updated to record the scoped exception. Full spec: [work-orders/CHART-5.md](work-orders/CHART-5.md). | 2026-08-07 | done | 839e6c5, 84c37ac | Operator-requested after seeing the shipped chart live: y-axis showed decimal ticks (0.2, 0.4, ...) for an integer user-count series sharing an axis with fractional hours; x-axis showed no time labels at all. **Codex out of credits, known up front** — implemented directly (author-flip, independent review mandatory). Independent `reviewer` + `ui_reviewer` ran concurrently: **`reviewer` found R1 (P1, real bug)** — used `yAxisKey` (removed in MUI X-Charts v7, per the installed v8.29.2's own CHANGELOG and `useBarPlotData.mjs` source, which reads `series[i].yAxisId`) instead of `yAxisId`; the WO explicitly asked to verify this passthrough against real MUI behaviour rather than assume, and the first pass didn't — the dual-axis feature would have silently plotted every series on the primary axis in production despite all mocked tests passing (a mocked-prop test structurally cannot catch a wrong-field-name bug, since it only checks whatever the code itself sets). Fixed (`yAxisKey` → `yAxisId`, verified against `node_modules` source directly, not just the mock) and the pre-existing `tests/BarChart.test.jsx` "dual axis" case corrected too (R2 — it used the same wrong field name and was cited by the WO as precedent, giving false confidence). **`ui_reviewer` found U1 (P1, real bug)** — `tickLabelInterval`'s `index % step === 0` systematically dropped the LAST x-axis bucket unless it landed exactly on a step boundary (e.g. 24 labels/step 3 → indices 0..21, never 23), exactly the failure mode the WO's own SCOPE C explicitly warned to check for; fixed by force-including `index === lastIndex`, with a new `it.each([24,12,7,1])` regression test, confirmed non-vacuous by reverting the fix. **U2 (P2)**: `DESIGN.md` #8's "Never dual-axis" now contradicted the shipped code — updated to record dual-axis as a scoped, opt-in exception (CHART-5) rather than a general rule change. U3 (P3, fixed `MAX_X_TICKS` under-displays low-density ranges e.g. 12 monthly buckets showing only 6) and U4 (P3, no UI indication of which axis a toggle's series plots against) both accepted, not fixed — informational, no code change. Re-verified after fixes: 31/31 scoped vitest tests (`TimeSeriesChart.test.jsx` + `BarChart.test.jsx`) green, `tsc` build clean. Published: ucm 2.29.0 (minor — new optional per-series field + prop, additive, no breaking change). No app pin bumps in this WO. |
 | CHART-4 | Fix `TimeSeriesChart` chart canvas rendering at zero height | Neither `ChartFrame` nor `BarChart` ever receive a height from `TimeSeriesChart` — MUI X-Charts' responsive container measures a zero-height parent and draws no bars/axes, while the legend (sized by its own content) renders regardless, which is why the live symptom was "legend shows, chart canvas doesn't". Fix supplies a preset default height (`CHART_HEIGHT = 320`, `minHeight` on `ChartFrame` + `height` forwarded to the real `MuiBarChart`), matching the working `dev/entries.jsx` reference pattern. Full spec: [work-orders/CHART-4.md](work-orders/CHART-4.md). | 2026-08-07 | done | f0953a1, fcb289b | Second, independent bug found live in jg-ferien immediately after CHART-3 + the ucm pin bump landed — CHART-3's own fix is what let this one become visible for the first time (it was previously masked by the permanently-empty-chart bug). Root cause of it shipping twice undetected: every test in `tests/TimeSeriesChart.test.jsx`/`tests/BarChart.test.jsx` mocks the real `@mui/x-charts/BarChart`, so no test has ever mounted the real chart and observed its size. **Codex out of credits, known up front** — implemented directly (author-flip, independent review mandatory). **Test-writing pitfall found and self-corrected during implementation**: first wrote an *unmocked* render test asserting the real chart SVG's `viewBox` height was non-zero — verified vacuous (stays green even fully reverting the fix, since jsdom's `ResizeObserver`/layout handling doesn't reproduce the real zero-height-parent browser behavior this bug depends on). Deleted; replaced with a `chartSpy`-mocked prop assertion (`props.height` non-zero) matching the file's existing convention, confirmed non-vacuous (fails pre-fix with `props.height` undefined). Independent `reviewer` + `ui_reviewer` ran concurrently: `reviewer` verified the fix mechanism end-to-end (no prop-name collision between `BarChart`'s own `minHeight`/`aspect` and the forwarded `height`) and the test's non-vacuity claim, no findings. `ui_reviewer`: two P3 informational notes, neither blocking — (U1) the fixed 320px height is a deliberate, documented exception to `DESIGN.md` #14 ("responsive = container-sized, not fixed px"), needed specifically because MUI X-Charts' own `ResizeObserver`-based height measurement is what caused CHART-4 in the first place; a code comment was added warning future readers not to "fix" this back to a responsive height without re-verifying the underlying MUI bug is resolved. (U2) `CHART_HEIGHT` uses 320 for both `ChartFrame.minHeight` and `BarChart.height`, vs. `dev/entries.jsx`'s 360/320 split — functionally harmless (WO explicitly permits one fixed value), no change made. 13/13 scoped vitest tests green, `tsc` build clean. Published: ucm 2.28.2 (patch, no interface change). No app pin bumps in this WO — jg-ferien picks it up on its next ucm bump. |
 | CHART-3 | Fix `TimeSeriesChart` rendering nothing on async data load | `visibleKeys` was a lazy `useState` initialized once from `data` at first mount; any host that fetches asynchronously after mount (the normal case, e.g. jg-ferien's `ActivitySection`) ends up with a permanently-empty `visibleKeys`, so `isDataEmpty` stays `true` forever and the chart body never renders even once real data arrives. Fix syncs newly-seen series keys to visible-by-default while preserving a user's manual toggle-off across data updates. Full spec: [work-orders/CHART-3.md](work-orders/CHART-3.md). | 2026-08-06 | done | 9a1bd9d, 48cefa8 | Found live in jg-ferien's Aktivität screen (ACT-3 consumer) — toolbar rendered, chart body stayed on `ChartFrame`'s empty state permanently. **Codex was out of workspace credits** (genuine quota error on invocation, no partial work) — orchestrator implemented directly per the Codex→Claude fallback rule; independence flip applies (author = orchestrator, so independent review was mandatory, not self-check). Independent `reviewer` + `ui_reviewer` both ran (background, concurrent): `ui_reviewer` found no findings; `reviewer` found R1 (P2, real bug — the seen-keys tracker was a `useRef` mutated during the render body alongside a paired `setVisibleKeys` call; under React concurrent rendering an interrupted/discarded render leaves the ref mutation applied while the paired state update is discarded, permanently hiding a key without it ever reaching `visibleKeys` — a different-shaped recurrence of the exact bug this WO exists to fix) and R2 (P3, test-file duplication — a second near-duplicate render helper). Both fixed: seen-keys tracking moved from a ref to a second `useState` (both states updated together in the render body, so a discarded render rolls both back together — React's documented pattern for this), and the duplicate test helper collapsed into the existing `renderChart`'s `rerenderWith`. Re-verified: 12/12 scoped vitest tests green (3 new CHART-3 regression tests, 2 of which confirmed non-vacuous by failing against the pre-fix code), `tsc` build clean. Published: ucm 2.28.1 (patch, no interface change). No app pin bumps in this WO — jg-ferien picks it up on its next ucm bump. |
 | ONB-1 | Per-app configurable notifications onboarding step | New `browserPush` prop `{nagUntil, showOnce}` on `OnboardingProvider`; parameterizes the `browser_push` descriptor's condition (default changes from implicit "all-channels" to "any-channel", stopping the over-nag); `showOnce` via a persisted `onboarding_seen` set (frozen-at-mount ref, no mid-session flicker) | 2026-07-17 | done | 1ae7c20 | Default behavior change affects cockpit and all consumers on their next ucm bump. jg-ferien companion WO pins the new version with `browserPush={{nagUntil: 'any-channel'}}` explicit (matches new default, but pinned explicitly per the WO). |

package/dist/components/charts/TimeSeriesChart.js

@@ -24,6 +24,42 @@ import { useNeutralChartPalette } from './palette';
 // to a responsive/aspect-ratio height without re-verifying the underlying
 // MUI measurement bug is actually resolved.
 const CHART_HEIGHT = 320;
+// CHART-5: how many x-axis tick labels to show, evenly spread across
+// data.xLabels, regardless of container width or label length. Replaces
+// MUI's own collision-based tick filtering (which, given enough densely
+// packed categories, can end up hiding every single label — confirmed live
+// with 24 hourly buckets) with a deterministic guarantee that some labels
+// always render. See makeTickLabelInterval below.
+const MAX_X_TICKS = 8;
+function makeTickLabelInterval(labelCount) {
+    const step = Math.max(1, Math.ceil(labelCount / MAX_X_TICKS));
+    const lastIndex = labelCount - 1;
+    // `index % step === 0` alone systematically drops the final bucket unless
+    // it happens to land exactly on a step boundary (e.g. 24 labels / step 3
+    // covers indices 0..21, never 23) -- the most recent time bucket is
+    // usually the one that matters most, so it is always force-included.
+    return (_value, index) => index % step === 0 || index === lastIndex;
+}
+// CHART-5: a y-axis is "integer" when every value across its currently
+// visible series is a whole number — re-evaluated on every toggle (an axis
+// can flip from fractional to integer, or vice versa, as series are shown/
+// hidden). Empty (no visible series on this axis) is deliberately NOT
+// integer: there's nothing to format, and treating an empty list as
+// vacuously "all integer" would apply the formatter to an axis with no data.
+function isIntegerAxis(seriesList) {
+    return seriesList.length > 0 && seriesList.every((series) => (series.data || []).every((value) => Number.isInteger(value)));
+}
+// Blanks the tick label for a non-integer value on an axis whose visible
+// series are otherwise all whole numbers -- a deterministic backstop since
+// d3's own "nice tick" choice for a small integer domain can still land on
+// a fractional position (e.g. domain [0,3] ticking at 0, 1.5, 3). Tooltip/
+// legend formatting (a different `location`) is left untouched -- only the
+// on-axis tick text is ever blanked.
+function integerTickFormatter(value, context) {
+    if ((context === null || context === void 0 ? void 0 : context.location) !== 'tick')
+        return String(value);
+    return Number.isInteger(value) ? String(value) : '';
+}
 const RANGE_OPTIONS = [
     { key: '1d', granularity: 'hour', labelKey: 'TimeSeriesChart.RANGE_1_DAY' },
     { key: '1w', granularity: '4hour', labelKey: 'TimeSeriesChart.RANGE_1_WEEK' },
@@ -39,12 +75,13 @@ const RANGE_OPTIONS = [
  * owns fetching; this component owns which range is selected and which
  * series are visible, telling the host what changed via `onRangeChange`.
  *
- * No second y-axis: the series toggles (not a second axis) are the chosen
- * fix for two series sharing one y-axis at very different scales — toggling
- * one off rescales the axis and makes the other readable. This was a
- * deliberate choice, not an oversight (CHART-2 scope B).
+ * Second y-axis is opt-in per series (CHART-5, reversing CHART-2's original
+ * "toggles only" choice on operator instruction): a series with
+ * `axis: 'secondary'` plots against a second, independently-scaled y-axis
+ * (requires `secondaryYAxisLabel`). Omit `axis` (or set it to `'primary'`)
+ * on every series for today's single-shared-axis behaviour, unchanged.
  */
-export function TimeSeriesChart({ title, subtitle, xAxisLabel, yAxisLabel, data, loading = false, error = false, onRangeChange, defaultRange = '1w', }) {
+export function TimeSeriesChart({ title, subtitle, xAxisLabel, yAxisLabel, secondaryYAxisLabel, data, loading = false, error = false, onRangeChange, defaultRange = '1w', }) {
     const { t } = useTranslation();
     const palette = useNeutralChartPalette().categorical;
     const seriesConfig = (data === null || data === void 0 ? void 0 : data.series) || [];
@@ -98,10 +135,25 @@ export function TimeSeriesChart({ title, subtitle, xAxisLabel, yAxisLabel, data,
     // series' color, breaking the swatch-to-series identity the toggles rely on.
     const visiblePalette = visibleSeries.map((series) => palette[seriesConfig.indexOf(series) % palette.length]);
     const isDataEmpty = seriesConfig.length === 0 || visibleSeries.length === 0;
+    const hasSecondaryAxis = seriesConfig.some((series) => series.axis === 'secondary');
+    if (hasSecondaryAxis && !secondaryYAxisLabel) {
+        throw new Error('TimeSeriesChart requires secondaryYAxisLabel when a series uses axis: "secondary".');
+    }
+    const primaryVisibleSeries = visibleSeries.filter((series) => series.axis !== 'secondary');
+    const secondaryVisibleSeries = visibleSeries.filter((series) => series.axis === 'secondary');
+    const yAxis = hasSecondaryAxis
+        ? [
+            Object.assign({ id: 'primary', label: yAxisLabel }, (isIntegerAxis(primaryVisibleSeries) ? { valueFormatter: integerTickFormatter } : {})),
+            Object.assign({ id: 'secondary', label: secondaryYAxisLabel }, (isIntegerAxis(secondaryVisibleSeries) ? { valueFormatter: integerTickFormatter } : {})),
+        ]
+        : (isIntegerAxis(primaryVisibleSeries) ? [{ valueFormatter: integerTickFormatter }] : undefined);
     const toolbar = (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'center' }, children: [_jsx(RadioGroup, { row: true, value: range, onChange: handleRangeChange, "aria-label": t('TimeSeriesChart.RANGE_LABEL'), children: RANGE_OPTIONS.map((option) => (_jsx(FormControlLabel, { value: option.key, control: _jsx(Radio, { size: "small" }), label: t(option.labelKey) }, option.key))) }), seriesConfig.length > 0 && (_jsx(FormGroup, { row: true, "aria-label": t('TimeSeriesChart.SERIES_LABEL'), children: seriesConfig.map((series, index) => (_jsx(FormControlLabel, { control: (_jsx(Checkbox, { size: "small", checked: visibleKeys.has(series.key), onChange: () => toggleSeries(series.key), sx: {
                             color: palette[index % palette.length],
                             '&.Mui-checked': { color: palette[index % palette.length] },
                         } })), label: series.label }, series.key))) }))] }));
-    return (_jsx(ChartFrame, { title: title, subtitle: subtitle, toolbar: toolbar, loading: loading, error: error, isEmpty: isDataEmpty, minHeight: CHART_HEIGHT, children: !isDataEmpty && (_jsx(BarChart, { xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xAxis: [{ data: (data === null || data === void 0 ? void 0 : data.xLabels) || [] }], series: visibleSeries.map((series) => ({ data: series.data, label: series.label })), palette: visiblePalette, height: CHART_HEIGHT })) }));
+    return (_jsx(ChartFrame, { title: title, subtitle: subtitle, toolbar: toolbar, loading: loading, error: error, isEmpty: isDataEmpty, minHeight: CHART_HEIGHT, children: !isDataEmpty && (_jsx(BarChart, { xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xAxis: [{
+                    data: (data === null || data === void 0 ? void 0 : data.xLabels) || [],
+                    tickLabelInterval: makeTickLabelInterval(((data === null || data === void 0 ? void 0 : data.xLabels) || []).length),
+                }], yAxis: yAxis, series: visibleSeries.map((series) => (Object.assign({ data: series.data, label: series.label }, (hasSecondaryAxis && series.axis === 'secondary' ? { yAxisId: 'secondary' } : {})))), palette: visiblePalette, height: CHART_HEIGHT })) }));
 }
 export default TimeSeriesChart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.28.2",
+  "version": "2.29.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/components/charts/TimeSeriesChart.jsx

@@ -32,6 +32,47 @@ import { useNeutralChartPalette } from './palette';
 // MUI measurement bug is actually resolved.
 const CHART_HEIGHT = 320;
 
+// CHART-5: how many x-axis tick labels to show, evenly spread across
+// data.xLabels, regardless of container width or label length. Replaces
+// MUI's own collision-based tick filtering (which, given enough densely
+// packed categories, can end up hiding every single label — confirmed live
+// with 24 hourly buckets) with a deterministic guarantee that some labels
+// always render. See makeTickLabelInterval below.
+const MAX_X_TICKS = 8;
+
+function makeTickLabelInterval(labelCount) {
+  const step = Math.max(1, Math.ceil(labelCount / MAX_X_TICKS));
+  const lastIndex = labelCount - 1;
+  // `index % step === 0` alone systematically drops the final bucket unless
+  // it happens to land exactly on a step boundary (e.g. 24 labels / step 3
+  // covers indices 0..21, never 23) -- the most recent time bucket is
+  // usually the one that matters most, so it is always force-included.
+  return (_value, index) => index % step === 0 || index === lastIndex;
+}
+
+// CHART-5: a y-axis is "integer" when every value across its currently
+// visible series is a whole number — re-evaluated on every toggle (an axis
+// can flip from fractional to integer, or vice versa, as series are shown/
+// hidden). Empty (no visible series on this axis) is deliberately NOT
+// integer: there's nothing to format, and treating an empty list as
+// vacuously "all integer" would apply the formatter to an axis with no data.
+function isIntegerAxis(seriesList) {
+  return seriesList.length > 0 && seriesList.every(
+    (series) => (series.data || []).every((value) => Number.isInteger(value)),
+  );
+}
+
+// Blanks the tick label for a non-integer value on an axis whose visible
+// series are otherwise all whole numbers -- a deterministic backstop since
+// d3's own "nice tick" choice for a small integer domain can still land on
+// a fractional position (e.g. domain [0,3] ticking at 0, 1.5, 3). Tooltip/
+// legend formatting (a different `location`) is left untouched -- only the
+// on-axis tick text is ever blanked.
+function integerTickFormatter(value, context) {
+  if (context?.location !== 'tick') return String(value);
+  return Number.isInteger(value) ? String(value) : '';
+}
+
 const RANGE_OPTIONS = [
   { key: '1d', granularity: 'hour', labelKey: 'TimeSeriesChart.RANGE_1_DAY' },
   { key: '1w', granularity: '4hour', labelKey: 'TimeSeriesChart.RANGE_1_WEEK' },
@@ -48,16 +89,18 @@ const RANGE_OPTIONS = [
  * owns fetching; this component owns which range is selected and which
  * series are visible, telling the host what changed via `onRangeChange`.
  *
- * No second y-axis: the series toggles (not a second axis) are the chosen
- * fix for two series sharing one y-axis at very different scales — toggling
- * one off rescales the axis and makes the other readable. This was a
- * deliberate choice, not an oversight (CHART-2 scope B).
+ * Second y-axis is opt-in per series (CHART-5, reversing CHART-2's original
+ * "toggles only" choice on operator instruction): a series with
+ * `axis: 'secondary'` plots against a second, independently-scaled y-axis
+ * (requires `secondaryYAxisLabel`). Omit `axis` (or set it to `'primary'`)
+ * on every series for today's single-shared-axis behaviour, unchanged.
  */
 export function TimeSeriesChart({
   title,
   subtitle,
   xAxisLabel,
   yAxisLabel,
+  secondaryYAxisLabel,
   data,
   loading = false,
   error = false,
@@ -123,6 +166,27 @@ export function TimeSeriesChart({
   );
   const isDataEmpty = seriesConfig.length === 0 || visibleSeries.length === 0;
 
+  const hasSecondaryAxis = seriesConfig.some((series) => series.axis === 'secondary');
+  if (hasSecondaryAxis && !secondaryYAxisLabel) {
+    throw new Error('TimeSeriesChart requires secondaryYAxisLabel when a series uses axis: "secondary".');
+  }
+  const primaryVisibleSeries = visibleSeries.filter((series) => series.axis !== 'secondary');
+  const secondaryVisibleSeries = visibleSeries.filter((series) => series.axis === 'secondary');
+  const yAxis = hasSecondaryAxis
+    ? [
+      {
+        id: 'primary',
+        label: yAxisLabel,
+        ...(isIntegerAxis(primaryVisibleSeries) ? { valueFormatter: integerTickFormatter } : {}),
+      },
+      {
+        id: 'secondary',
+        label: secondaryYAxisLabel,
+        ...(isIntegerAxis(secondaryVisibleSeries) ? { valueFormatter: integerTickFormatter } : {}),
+      },
+    ]
+    : (isIntegerAxis(primaryVisibleSeries) ? [{ valueFormatter: integerTickFormatter }] : undefined);
+
   const toolbar = (
     <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'center' }}>
       <RadioGroup
@@ -178,8 +242,16 @@ export function TimeSeriesChart({
         <BarChart
           xAxisLabel={xAxisLabel}
           yAxisLabel={yAxisLabel}
-          xAxis={[{ data: data?.xLabels || [] }]}
-          series={visibleSeries.map((series) => ({ data: series.data, label: series.label }))}
+          xAxis={[{
+            data: data?.xLabels || [],
+            tickLabelInterval: makeTickLabelInterval((data?.xLabels || []).length),
+          }]}
+          yAxis={yAxis}
+          series={visibleSeries.map((series) => ({
+            data: series.data,
+            label: series.label,
+            ...(hasSecondaryAxis && series.axis === 'secondary' ? { yAxisId: 'secondary' } : {}),
+          }))}
           palette={visiblePalette}
           height={CHART_HEIGHT}
         />

package/tests/BarChart.test.jsx

@@ -34,7 +34,7 @@ describe('BarChart preset', () => {
   it.each([
     ['grouped', [{ data: [1] }, { data: [2] }], undefined],
     ['stacked', [{ data: [1], stack: 'total' }, { data: [2], stack: 'total' }], undefined],
-    ['dual axis', [{ data: [1], yAxisKey: 'secondary' }, { data: [2] }], [{ id: 'primary' }, { id: 'secondary' }]],
+    ['dual axis', [{ data: [1], yAxisId: 'secondary' }, { data: [2] }], [{ id: 'primary' }, { id: 'secondary' }]],
   ])('renders the %s variant with a legend for multiple series', (_name, series, yAxis) => {
     renderChart({ series, yAxis });
     const props = chartSpy.mock.calls.at(-1)[0];

package/tests/TimeSeriesChart.test.jsx

@@ -200,4 +200,129 @@ describe('TimeSeriesChart', () => {
     const props = chartSpy.mock.calls.at(-1)[0];
     expect(props.series.map((series) => series.label)).toEqual(['Presence hours']);
   });
+
+  // CHART-5: second y-axis (opt-in per series via `axis: 'secondary'`),
+  // auto-detected integer-only tick formatting per axis, and a deterministic
+  // x-axis tickLabelInterval. Learned from CHART-4's own history in this
+  // file: assertions here are on the captured functions/props passed to the
+  // mocked MuiBarChart, never on real jsdom-rendered tick visibility/position
+  // (proven vacuous for that in CHART-4 -- jsdom's layout/ResizeObserver
+  // handling doesn't reproduce real-browser collision behaviour).
+  const MIXED_DATA = {
+    xLabels: ['Mon', 'Tue', 'Wed'],
+    series: [
+      { key: 'users', label: 'Users', data: [1, 2, 3] },
+      { key: 'presence', label: 'Presence hours', data: [4.5, 5.2, 6.1] },
+    ],
+  };
+
+  it('CHART-5: no custom yAxis 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();
+    expect(props.yAxis[0].label).toBe('Count');
+  });
+
+  it('CHART-5: auto-applies an integer tick formatter to a single shared axis that is all-integer', () => {
+    renderChart(); // SAMPLE_DATA: both series are whole numbers
+
+    const props = chartSpy.mock.calls.at(-1)[0];
+    expect(props.yAxis).toHaveLength(1);
+    expect(typeof props.yAxis[0].valueFormatter).toBe('function');
+  });
+
+  it('CHART-5: dual axis activates with two labelled yAxis entries and correct yAxisId wiring', () => {
+    const data = {
+      xLabels: ['Mon', 'Tue', 'Wed'],
+      series: [
+        { key: 'users', label: 'Users', data: [1, 2, 3] },
+        { key: 'presence', label: 'Presence hours', data: [4.5, 5.2, 6.1], axis: 'secondary' },
+      ],
+    };
+    renderChart({ data, secondaryYAxisLabel: 'Hours' });
+
+    const props = chartSpy.mock.calls.at(-1)[0];
+    expect(props.yAxis).toEqual([
+      expect.objectContaining({ id: 'primary', label: 'Count' }),
+      expect.objectContaining({ id: 'secondary', label: 'Hours' }),
+    ]);
+    const usersSeries = props.series.find((series) => series.label === 'Users');
+    const presenceSeries = props.series.find((series) => series.label === 'Presence hours');
+    expect(usersSeries.yAxisId).toBeUndefined();
+    expect(presenceSeries.yAxisId).toBe('secondary');
+  });
+
+  it('CHART-5: dual axis applies the integer formatter only to the axis that is actually all-integer', () => {
+    const data = {
+      xLabels: ['Mon', 'Tue', 'Wed'],
+      series: [
+        { key: 'users', label: 'Users', data: [1, 2, 3], axis: 'primary' },
+        { key: 'presence', label: 'Presence hours', data: [4.5, 5.2, 6.1], axis: 'secondary' },
+      ],
+    };
+    renderChart({ data, secondaryYAxisLabel: 'Hours' });
+
+    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();
+  });
+
+  it('CHART-5: throws when a series declares axis "secondary" without secondaryYAxisLabel', () => {
+    const data = {
+      xLabels: ['Mon'],
+      series: [{ key: 'presence', label: 'Presence hours', data: [4.5], axis: 'secondary' }],
+    };
+    expect(() => renderChart({ data })).toThrow(
+      'TimeSeriesChart requires secondaryYAxisLabel when a series uses axis: "secondary".',
+    );
+  });
+
+  it('CHART-5: the integer tick formatter blanks non-integer tick labels but not tooltip/legend values', () => {
+    renderChart(); // SAMPLE_DATA, single all-integer axis
+
+    const { valueFormatter } = chartSpy.mock.calls.at(-1)[0].yAxis[0];
+    expect(valueFormatter(2, { location: 'tick' })).toBe('2');
+    expect(valueFormatter(2.5, { location: 'tick' })).toBe('');
+    expect(valueFormatter(2.5, { location: 'tooltip' })).toBe('2.5');
+  });
+
+  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();
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Presence hours' }));
+
+    const props = chartSpy.mock.calls.at(-1)[0];
+    expect(typeof props.yAxis[0].valueFormatter).toBe('function');
+  });
+
+  it('CHART-5: x-axis tickLabelInterval guarantees some labels always show, evenly spread', () => {
+    const manyLabels = Array.from({ length: 24 }, (_, i) => `Bucket ${i}`);
+    const data = { ...SAMPLE_DATA, xLabels: manyLabels, series: [SAMPLE_DATA.series[0]] };
+    renderChart({ data });
+
+    const { tickLabelInterval } = chartSpy.mock.calls.at(-1)[0].xAxis[0];
+    expect(typeof tickLabelInterval).toBe('function');
+
+    const visibleIndices = manyLabels.map((_, index) => index).filter((index) => tickLabelInterval(manyLabels[index], index));
+    expect(visibleIndices.length).toBeGreaterThanOrEqual(3);
+    expect(visibleIndices).toContain(0);
+  });
+
+  // CHART-5 (found by ui_reviewer): `index % step === 0` alone systematically
+  // drops the FINAL bucket unless it happens to land on a step boundary --
+  // e.g. 24 labels / step 3 covers 0..21, never 23. The most recent time
+  // bucket is usually the one that matters most on a time-series chart.
+  it.each([24, 12, 7, 1])('CHART-5: tickLabelInterval always includes the last bucket (labelCount=%i)', (labelCount) => {
+    const manyLabels = Array.from({ length: labelCount }, (_, i) => `Bucket ${i}`);
+    const data = { ...SAMPLE_DATA, xLabels: manyLabels, series: [SAMPLE_DATA.series[0]] };
+    renderChart({ data });
+
+    const { tickLabelInterval } = chartSpy.mock.calls.at(-1)[0].xAxis[0];
+    expect(tickLabelInterval(manyLabels.at(-1), labelCount - 1)).toBe(true);
+  });
 });

package/work-orders/CHART-5.md

@@ -0,0 +1,226 @@
+# WORK ORDER CHART-5 (ui-core-micha) — dual y-axis + always-visible x-axis ticks
+
+**EXECUTION DIRECTIVE.** If you are the implementer reading this as your own spec, this section is not
+addressed to you — it tells the Orchestrator how to invoke you; you ARE that invocation, do not shell
+out to `codex exec`. Orchestrator: implement through `codex exec` in the background, invoked **directly
+via Bash** (never the `debugger`/`*_coder` Agent wrappers) with **both** flags `--skip-git-repo-check`
+and `--dangerously-bypass-approvals-and-sandbox`, prompt passed as a positional argument from this
+file. Fall back to direct Claude implementation only on Codex quota / rate-limit / non-zero exit.
+**Known at WO authoring time: the Codex workspace is out of credits for this session — the fallback
+applies immediately, do not spend time retrying `codex exec` first.**
+
+Feature WO on `TimeSeriesChart` (CHART-2/3/4). Operator request, found live in jg-ferien's Aktivität
+screen: (a) the shared y-axis mixes an integer count series ("Eindeutige Nutzer") with a fractional
+hours series ("Anwesenheitszeit"), producing decimal ticks (0.2, 0.4, ...) that don't make sense for a
+user count; (b) the x-axis (time buckets) shows **zero** visible tick labels once there are enough
+buckets that MUI X-Charts' built-in collision-avoidance decides none of them fit — worse than showing
+a sparse subset, this shows nothing at all.
+
+## TIER
+Tier 2 — shared-core UI, new public surface (a new optional per-series field). Independent `reviewer`
++ `ui_reviewer` mandatory.
+
+## WHY
+
+**Y-axis.** CHART-2 deliberately rejected a second y-axis in favor of series toggles ("if you do not
+add one, say so deliberately" — CHART-2 said so, choosing toggles). The operator has now explicitly
+requested the second y-axis for this exact case, with full awareness of that prior decision (asked
+in-chat, chose it knowingly over forcing shared-axis integer ticks — which would make the fractional
+series nearly invisible — and over hiding the tick label only when one series is toggled off). This
+WO reverses CHART-2's choice on operator authority, it does not silently second-guess it.
+
+**X-axis.** `node_modules/@mui/x-charts/ChartsXAxis/getVisibleLabels.js`'s default behaviour drops a
+tick label the moment it would overlap the previous one (`tickLabelMinGap`) — with many narrow-band
+categories (e.g. 24 hourly buckets) and non-trivial label text (jg-ferien's `formatBucketLabel`
+produces e.g. `"08/06, 08:00"`), every label can end up colliding and the *entire* axis goes blank.
+MUI's own escape hatch is `tickLabelInterval` as a **function** — when provided, it fully replaces the
+collision-based filtering (`getVisibleLabels.js`: `if (typeof tickLabelInterval === 'function') return
+new Set(xTicks.filter((item, index) => tickLabelInterval(item.value, index)))`), so a deterministic,
+evenly-spaced selection can guarantee *some* labels always render regardless of container width or
+label length.
+
+## SCOPE
+
+**A. Per-series `axis` field, backward-compatible.** Each entry in `data.series[i]` gains an optional
+`axis: 'primary' | 'secondary'` field. Default (omitted, or every series `'primary'`): **byte-for-byte
+today's single-shared-axis behaviour** — no `yAxis` array change, no `yAxisKey` on series, nothing
+observably different for existing consumers (jg-ferien pre-adoption, or any future host that doesn't
+use the field). Only when **at least one** series declares `axis: 'secondary'` does dual-axis mode
+activate:
+  - Build `yAxis` as two entries: primary (`id: 'primary'`, label = existing `yAxisLabel` prop) and
+    secondary (`id: 'secondary'`, label = new prop `secondaryYAxisLabel`).
+  - Each series passed to `BarChart` gets `yAxisKey: 'secondary'` when its `axis` is `'secondary'`,
+    omitted (defaults to the first/primary axis) otherwise — `series` items already pass straight
+    through `BarChart`'s `...chartProps` to the real `MuiBarChart`, which natively supports
+    `yAxisKey` per series; no `BarChart.jsx` change needed for this part, verify that during
+    implementation rather than assuming.
+  - `secondaryYAxisLabel` is required (throw, matching `BarChart`'s own `xAxisLabel`/`yAxisLabel`
+    required-prop convention) **only when dual-axis mode is actually active** (i.e. when computing
+    it: if any series has `axis === 'secondary'` and `secondaryYAxisLabel` is falsy, throw with a
+    clear message) — do not require it unconditionally, that would break every existing single-axis
+    caller.
+
+**B. Auto-detected integer-only ticks per axis group, not a new prop.** For each y-axis actually in
+use (primary always; secondary only in dual-axis mode), if **every** data value across that axis's
+currently-**visible** series (respecting the existing series-toggle `visibleKeys` state — an axis
+whose only integer series just got toggled off should not keep forcing integer ticks on whatever
+remains) is a whole number (`Number.isInteger`), apply a `valueFormatter` to that axis's config that
+only emits a label for integer tick values and an empty string otherwise (mirrors the X-axis
+collision convention: `getVisibleLabels.js` already treats `formattedValue === ''` as "don't show
+this tick" for the X axis; verify the Y-axis tick renderer honours the same convention during
+implementation — if it does not, use whatever mechanism it actually supports to the same effect, and
+say so in the completion note). If not all-integer, leave the axis's default (no custom formatter) —
+this is what keeps `Anwesenheitszeit` (fractional hours) unaffected on its own axis, and correctly
+does nothing extra for a primary axis that legitimately has fractional data.
+
+**C. Deterministic x-axis tick visibility.** Replace MUI's default collision-based tick filtering with
+an explicit `tickLabelInterval` function on the x-axis config, evenly sampling up to `MAX_X_TICKS`
+(pick a sensible constant, e.g. 8) labels across `data.xLabels`, e.g. `index % Math.max(1,
+Math.ceil(xLabels.length / MAX_X_TICKS)) === 0` (adjust as needed so the *last* category is also
+reachable/considered, not just an artifact of the modulo — check this doesn't systematically drop the
+final bucket). This must apply regardless of dual-axis mode (independent scope).
+
+## NON-GOALS / DO NOT TOUCH
+- No third axis, no per-axis custom colors, no new axis-styling props beyond what SCOPE describes.
+- Do not touch the range picker, series-toggle checkboxes' own rendering, `chartsTranslations`, or the
+  CHART-3/CHART-4 fixes (`visibleKeys` sync, `CHART_HEIGHT`).
+- Do not change `BarChart.jsx`/`ChartFrame.jsx` unless SCOPE A's `yAxisKey` passthrough turns out to
+  need it (verify first, per SCOPE A's own note) — if it does, extend deliberately and say so, matching
+  CHART-2's own "do not work around a primitive gap in the preset" rule.
+- jg-ferien's own adoption (setting `axis: 'secondary'` on `presence_hours`, adding a
+  `secondaryYAxisLabel`, shortening `formatBucketLabel`) is **explicitly out of scope for this WO** —
+  a separate companion change in that repo, after this publishes.
+
+## RISKS
+- `tickLabelInterval` as a function fully bypasses MUI's built-in overlap detection (per SCOPE C's
+  quoted source) — a fixed `MAX_X_TICKS` could still produce overlapping text at extreme narrow
+  widths with very long labels. Accepted: "some labels, deterministically" is strictly better than
+  "zero labels, unpredictably" (today's bug), and host-side label shortening (jg-ferien's future
+  companion change) is the complementary fix for extreme cases, not this WO's job.
+- Every host that adopts `axis: 'secondary'` changes its chart's visual scale contract (two
+  independent y-domains can visually mislead if not clearly labelled) — mitigated by requiring
+  `secondaryYAxisLabel`, not by this WO deciding it's always fine.
+- The integer-tick auto-detection (SCOPE B) re-evaluates on every toggle (depends on `visibleKeys`) —
+  confirm this doesn't cause a visible axis-label flicker/jump on toggle beyond the intended "ticks
+  change because domain changed" behaviour the toggles already produce today.
+
+## REQUIRED TESTS TO WRITE
+Extend `tests/TimeSeriesChart.test.jsx`. Do NOT run the full suite.
+
+**Learn from CHART-4's own history in this file (read `WORK_ORDERS.md`'s CHART-4 row before writing
+these): an unmocked test asserting real rendered DOM/tick visibility was proven VACUOUS in this exact
+component (jsdom's layout/ResizeObserver handling doesn't reproduce real-browser collision behaviour).
+Do not repeat that mistake here.** For anything about tick *visibility* or *positions* (SCOPE C, and
+SCOPE B's empty-string-for-non-integer-ticks mechanism), assert on the **function/config actually
+passed** to the mocked `MuiBarChart` (`chartSpy.mock.calls`) — e.g. call the captured
+`tickLabelInterval` function directly with sample `(value, index)` pairs and assert its boolean
+results, or call the captured y-axis `valueFormatter` directly with sample tick values and assert its
+string output — never assert on rendered pixel positions or DOM overlap in jsdom.
+
+1. **Dual-axis backward compatibility**: with no series declaring `axis`, `chartSpy`'s `yAxis` prop
+   must be unchanged from today's single-entry shape (or however it's currently constructed — assert
+   equivalently to the existing tests, not a new shape).
+2. **Dual-axis activation**: with one series `axis: 'secondary'`, assert `chartSpy`'s `yAxis` has two
+   entries (primary/secondary ids, correct labels from `yAxisLabel`/`secondaryYAxisLabel`), and assert
+   the secondary series' entry in `chartSpy`'s `series` prop carries `yAxisKey` matching the secondary
+   axis id while the other series' entry does not (or carries the primary id — whichever the
+   implementation settles on, be explicit and consistent).
+3. **Missing `secondaryYAxisLabel` throws** when a series declares `axis: 'secondary'` but the prop is
+   absent — mirrors `BarChart`'s own required-prop throw test convention (check
+   `tests/BarChart.test.jsx` for that pattern).
+4. **Integer-tick auto-detection, both directions**: one case where a y-axis's visible series are all
+   whole numbers (assert the captured `valueFormatter` returns a non-empty string for an integer tick
+   value and `''` for a non-integer one), and one case where they are not all whole numbers (assert no
+   custom `valueFormatter` is applied, or that it returns the value formatted normally for every tick —
+   whichever the implementation does, assert it explicitly).
+5. **Toggle re-evaluation**: toggling off the one non-integer series on a shared/primary axis (single-
+   axis mode) changes that axis from "not all-integer" to "all-integer" — assert the formatter
+   behaviour changes accordingly after the toggle. (This is the SCOPE B "re-evaluates on toggle" case,
+   RISKS section.)
+6. **X-axis `tickLabelInterval` guarantees coverage**: call the captured function against a large
+   `xLabels` array (e.g. 24 entries) and assert it returns `true` for at least `N` evenly-spread
+   indices (pick a concrete, checkable lower bound, e.g. at least 3 for 24 items at `MAX_X_TICKS=8`)
+   and that it does not return `true` for literally zero indices (the non-vacuity check for the whole
+   WO — the very bug this section fixes).
+7. **Non-vacuity**: each new test must fail against the current (pre-fix) code — verify before
+   considering the fix complete. (SCOPE C's test 6 obviously fails today since there is no
+   `tickLabelInterval` at all; confirm the others similarly.)
+
+## TARGET REPO
+`C:\Users\biglmi\Documents\webapps\ui-core-micha`. Branch `main`. Publish per the repo's release flow
+(minor bump — new optional field/prop, additive, no breaking change to existing callers).
+
+## TEST SCOPE FOR THE GATE (orchestrator)
+`tests/TimeSeriesChart.test.jsx`. Not the full suite.
+
+## CONTEXT PACKAGE — verified current state (Orchestrator, Implementation map)
+
+Work from this package; do not explore broadly from scratch — open only the named files to verify.
+
+**File to change: `src/components/charts/TimeSeriesChart.jsx`** — current full return statement and
+surrounding derived-state variables (`:117-189`, verified current):
+```jsx
+const visibleSeries = seriesConfig.filter((series) => visibleKeys.has(series.key));
+const visiblePalette = visibleSeries.map((series) => palette[seriesConfig.indexOf(series) % palette.length]);
+const isDataEmpty = seriesConfig.length === 0 || visibleSeries.length === 0;
+...
+return (
+  <ChartFrame ... minHeight={CHART_HEIGHT}>
+    {!isDataEmpty && (
+      <BarChart
+        xAxisLabel={xAxisLabel}
+        yAxisLabel={yAxisLabel}
+        xAxis={[{ data: data?.xLabels || [] }]}
+        series={visibleSeries.map((series) => ({ data: series.data, label: series.label }))}
+        palette={visiblePalette}
+        height={CHART_HEIGHT}
+      />
+    )}
+  </ChartFrame>
+);
+```
+Component signature currently: `{ title, subtitle, xAxisLabel, yAxisLabel, data, loading, error,
+onRangeChange, defaultRange }` (`:56-66`) — add `secondaryYAxisLabel` here.
+
+**`BarChart.jsx`** (full file, unchanged by this WO unless SCOPE A's verification says otherwise):
+`series`/`xAxis`/`yAxis` are BarChart's own named props; `series` is passed straight through
+(`series={series}` onto `MuiBarChart`, `:35`) with NO per-item transformation — so a `yAxisKey` field
+already present on a series object the caller builds should reach `MuiBarChart` unmodified. `yAxis`
+goes through `labelledAxis(yAxis, yAxisLabel, {scaleType:'linear'})` (`:37`), which preserves any
+`label` already set on an axis entry (only fills in the default when absent) — so `TimeSeriesChart`
+passing two fully-labelled `yAxis` entries will not have `BarChart`'s own `yAxisLabel` prop override
+them; **`TimeSeriesChart` should stop passing a single top-level `yAxisLabel` to `BarChart` once it is
+building its own multi-entry `yAxis` array explicitly** (or `BarChart`'s `yAxisLabel` requirement
+throws — check `BarChart.jsx:27-29`'s `if (!xAxisLabel || !yAxisLabel) throw` and account for it:
+either keep passing `yAxisLabel` as before, since `labelledAxis` won't clobber pre-labelled entries
+anyway, or restructure — pick whichever keeps `BarChart`'s existing required-prop contract intact
+without a special case).
+
+**X-axis**: `xAxis={[{ data: data?.xLabels || [] }]}` (`:181` current) — add `tickLabelInterval` to
+this object; `labelledAxis` will preserve it (only fills `label`, spreads everything else through).
+
+**Existing tests to model conventions on**: `tests/TimeSeriesChart.test.jsx` (chartSpy mock pattern,
+already described above) and `tests/BarChart.test.jsx` (required-prop-throws test pattern for the
+`secondaryYAxisLabel` throw case).
+
+## MINI-HANDOVER (pastable)
+
+> Repo: `C:\Users\biglmi\Documents\webapps\ui-core-micha` (branch `main`).
+> Work order: `work-orders/CHART-5.md` — read it fully, then follow the `orchestrate-codex` skill.
+> **Codex workspace is out of credits this session — go straight to the direct-Claude fallback.**
+>
+> Two independent additions to `TimeSeriesChart`, both operator-requested after seeing the shipped
+> CHART-2/3/4 chart live: (1) an opt-in second y-axis via a new per-series `axis: 'secondary'` field,
+> fully backward-compatible when unused, with auto-detected integer-only tick labels per axis group
+> (not a new prop — derived from whether that axis's visible series data is all whole numbers); (2) a
+> deterministic x-axis `tickLabelInterval` so time-bucket labels never all vanish under MUI's default
+> collision-avoidance, which is exactly what happened live (zero labels shown with 24 hourly buckets).
+> **Test-writing pitfall already hit once in this file (CHART-4): do not write a test that asserts on
+> real jsdom-rendered tick visibility/position — it will be vacuous. Assert on the captured
+> `tickLabelInterval`/`valueFormatter` functions' own return values instead**, calling them directly
+> with sample inputs against the mocked `chartSpy` call's props.
+
+## PROGRESS CONTRACT
+Emit `PLAN: <steps>` up front, then a single-line `PROGRESS: [<n>/<total>] <action>` before every
+relevant action and `PROGRESS: [<n>/<total>] done` on completion, spaced so no gap exceeds ~2 min,
+stdout unbuffered, and exactly one final `RESULT: DONE|BLOCKED <reason>`.