@micha.bigler/ui-core-micha 2.25.2 → 2.26.0

package/WORK_ORDERS.md

@@ -44,3 +44,4 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | MSG-6i | Attachment tile 120px, poll spacing "luftiger", poll % denominator = respondents not sum(votes), wider Composer emoji picker | `AttachmentList.jsx` tiles are 64px. `PollCard.jsx` reads cramped per an operator screenshot. Poll percentages currently divide by `sum(vote_count)`, which for multi-select can exceed respondent count. Composer reuses `ReactionBar`s 5-emoji `QUICK_EMOJIS` for free-form text composition. | 2026-08-03 | done | a6ef578 | Envelope + Part B as-built: [work-orders/MSG-6i.md](work-orders/MSG-6i.md). Operator requirements round after MSG-6h shipped. Scope C deliberately reverses an explicit MSG-6g non-goal ("denominator = votes cast, not participant count") -- operator-confirmed correction, not an oversight. No backend change needed for scope C (union of existing `voters` arrays, client-side). **Implemented directly by the Orchestrator** (Codex unavailable). Also fixed a companion bug found live while verifying jg-ferien's MSG-18: `Thread.jsx`'s root Stack/scroll Box had no flex participation and a hardcoded `maxHeight:560`, so it never shrank to fit a short mobile viewport regardless of host sizing — added `flex:1, minHeight:0` to both (kept `maxHeight:560` as a no-op fallback outside a flex context). **Independent `reviewer` + `ui_reviewer`, run in parallel, 7 findings total, 5 fixed + 2 disclosed-not-fixed** (full detail in the WO's own record): headline finding, confirmed independently by both reviewers — scope D's emoji grid broke `Menu`'s built-in arrow-key roving focus (IconButtons nested under an intervening `role="group"` Box aren't direct children of `MenuList`, so keyboard nav went dead); fixed by switching `Menu`→`Popover` (a grid of buttons was never really a linear menu). `reviewer` also found the optimistic vote projection could desync `vote_count` from `voters` when `userId` is momentarily unknown (the new respondent-count denominator reads only `voters`) — fixed with a sentinel voter id so both always move together; and that the `Thread.jsx` companion fix had zero regression coverage — added a `getComputedStyle`-based test. `ui_reviewer` P3s: the emoji grid's `aria-label` duplicated the trigger button's own label (fixed with a dedicated `EMOJI_PICKER` key); a hardcoded `fontSize` on the emoji buttons (no theme token exists for this, left as-is, disclosed). Full suite (single-forked, an unrelated worker-pool timeout under the default parallel pool made this necessary) 249 → 256 (7 new), `tsc` clean. Publishing as npm 2.25.0. |
 | NOTIF-14 | Push-preview toggle in NotificationSettings | Companion to `django-core-micha` MSG-13 (landed `39135e9`), which added a per-user `NotificationPreference.push_preview_opt_in` backend field (default on) that hides sender/text from a push body when off, already exposed on the `notifications/preferences/` endpoint — but nothing in ucm reads or writes it yet, so there is no UI path to reach it. | 2026-08-04 | done | 72e6697 | Envelope: [work-orders/NOTIF-14.md](work-orders/NOTIF-14.md). **Codex → Claude fallback**: Codex exited immediately on "workspace out of credits" (twice) before writing any code, so this session implemented directly — author-flip rule applied, independent `reviewer` ran before commit. Adds a third `Switch` to `NotificationSettings.jsx`, mirroring the existing `email_opt_in` toggle shape exactly (not the more involved device-subscription push toggle). **Load-bearing subtlety from the envelope, confirmed correct by `reviewer`:** `push_preview_opt_in` defaults `True` on the backend (opposite of `push_opt_in`'s `False` default) — checked as `!== false`, not `Boolean(...)`, with a non-vacuous test (field absent from the mocked API response) proving it. UX call from the Expertenchat, implemented as specified: the toggle is disabled unless `push_opt_in` is already on. Two new i18n keys across all four languages (de/fr/en/sw). While writing the new tests, surfaced and fixed two latent, pre-existing gaps in `tests/NotificationSettings.test.jsx` that had simply never been exercised before (the file had only ever rendered the component twice total): no `afterEach(cleanup)` between tests (added, matches the convention already used in ~33 other test files in this repo), and the file's mocked `useTranslation` returned a fresh `t` function reference on every call, unlike real react-i18next (which memoizes it) — this re-triggered the component's `useEffect(..., [t])` on every re-render in tests and clobbered a toggle's own state update with a stale refetch; fixed by hoisting `t` to a module-level stable reference in the test file only, production code untouched. `reviewer` independently confirmed both are legitimate test-infra fixes, not a production defect. Gate: `tests/NotificationSettings.test.jsx` 2→8 passed; full suite (measured baseline via `git stash -u`) 256 passed/0 failed → after 262 passed/0 failed, 0 regressions; `tsc -p tsconfig.build.json --noEmit` clean. Tier 2 (ui-core-micha is shared-core, forces Tier 2 regardless of size per AGENTS.md) — `sec_reviewer` not needed (the content-in-push security question was already ruled in dcm MSG-13; this WO only wires an already-shipped, already-reviewed backend preference into the settings UI). |
 | SHELL-1 | A shared user menu: avatar, profile, logout | Measured 2026-08-04: **seven render sites across two apps** for two adjacent actions — spesix has an account link (`:184`) plus a separate logout (`:224`), and the same pair again at `:269`/`:307` for mobile; survey_app has account nav (`:67`), logout desktop (`:152`) and logout mobile (`:90`); jg-ferien has an avatar linking to `/account` and **no header logout at all** (it sits at the bottom of `/more`). The duplication is worse *within* each app than between them. ucm exports nothing header-shaped today and has no avatar component, though it has owned `logout` in `auth/AuthContext.jsx:132` all along. | 2026-08-04 | done | 8ef8cbf (WO), bf4cdd1 (impl) | Envelope: [work-orders/SHELL-1.md](work-orders/SHELL-1.md). New `SHELL-*` prefix for shared application-shell surfaces, distinct from `MSG-*`/`NOTIF-*`. **Design settled with the operator against an interactive prototype — the boundary is not to be renegotiated:** ucm owns the avatar, the menu, Profil (`/account`, verified identical in all four apps) and Abmelden; the host passes only account-related entries, already permission-filtered and already translated; **the context/structure picker never enters the menu.** That last point is measured, not assumed — spesix's `activeSchoolId` is consumed by **13 files** (Approvals/Budgets/Claims/AppLayout) and jg's `selectedEventId` by **18**; it re-scopes the entire application's data, so it stays a permanently visible control of its own. Operator 2026-08-04: org/structure pickers are app-specific and already solved where they live; a second route to them here would be the very duplication this WO removes. **Expected integration for spesix and survey_app is `<UserMenu resolveLink={navigate} />` and nothing else** — only jg passes an entry. Two traps carried over from elsewhere in this estate: an earlier prototype had Benachrichtigungen as a ucm built-in, but **only jg** embeds `NotificationSettings` and `?tab=notifications` exists only there, so three apps would have got a menu entry pointing at a route they lack — verify every built-in against every app; and **labels arrive as finished strings, never i18n keys**, which is exactly why `django-core-micha` MSG-13 is currently broken. Stated cost: **Profil goes from one tap to two in every app** (paid consciously — the price of the consolidation). hram is **unverified** (no header file under `components/`) — do not claim four apps benefit until someone looks. Scope E (dcm MSG-13 preview `Switch`) had already landed separately as NOTIF-14 (`72e6697`) before this WO started, so A-D ship alongside it in the same release. Host header rewires (spesix/survey_app/jg/hram) are four separate small WOs, one per app, including removing jg's now-redundant local `UserAvatar` — not done here. **Codex → Claude fallback**: Codex exited immediately on "workspace out of credits" (same failure as NOTIF-14) before writing any code, so this session implemented directly — author-flip rule applied, independent `reviewer` **and** `ui_reviewer` both ran before commit (WO's TIER line makes both mandatory). **Decisions stated per WO's explicit requirement** (both reviewers flagged these as initially undocumented, now recorded here): scope D icons — **no entry carries a leading or trailing icon** (uniform with none, avoids an unstated icon contract for host items); Profil/Abmelden i18n — **new `UserMenu.PROFILE`/`UserMenu.LOGOUT` keys** in a fresh `src/i18n/userMenuTranslations.ts`, not a reuse of `Account.TAB_PROFILE` (different UI surface, keeps the component independently consumable). New component `src/auth/UserMenu.jsx` mirrors `NotificationBell({ resolveLink })`'s exact anchor/Menu/onClose shape — no custom keyboard/focus-trap code, relies entirely on MUI `Menu`'s native Escape/click-outside/focus-return. Gate: `tests/UserMenu.test.jsx` (new, 6/6 passed, all WO-required cases incl. non-vacuous ordering + logout-stub assertions) + affected-areas set `tests/AuthContext.test.jsx` + `tests/NotificationSettings.test.jsx` (untouched by this diff, included per WO's test-scope note since scope E is in the same release) → 18/18 passed, 0 regressions; `tsc -p tsconfig.build.json --noEmit` clean. Both reviewers' only findings were the now-resolved documentation gaps above — no code-correctness findings from either. |
+| CHART-2 | Time-series chart preset with range picker and series toggles | Extends CHART-1, whose `ChartFrame` already ships a **toolbar slot that no consumer uses yet**. Operator request 2026-08-04 from jg's activity chart, generalised: every app charting a time series wants a duration picker and per-series toggles, and `django-core-micha` ACT-1 will make activity data available to all of them. jg's `ActivitySection.jsx:9` currently imports `@mui/x-charts` directly and hand-rolls its own Paper/loading/error/empty. | 2026-08-04 | done | a277c82, abf11b0 | Envelope: [work-orders/CHART-2.md](work-orders/CHART-2.md). **Presentational only — the host fetches**; the component takes data plus callbacks and calls no endpoint. **The half most likely to be dropped: the range picker must emit a GRANULARITY alongside the window** — new `TimeSeriesChart` component emits `onRangeChange(rangeKey, granularity)` per the fixed table (1d→hour, 1w→4hour, 1m→day, 1y→month), test 1 asserts the exact emitted payload, non-vacuity confirmed by manually removing the granularity arg and observing the test fail. **Series toggles implemented as `Checkbox`+`FormControlLabel`** (this repo's established multi-choice pattern, matching `PollCard.jsx`); range picker as `RadioGroup`/`Radio`/`FormControlLabel` (same repo's deliberate single-choice convention, chosen over `ToggleButtonGroup` for which this repo has zero precedent). **Second y-axis: explicitly NOT added** — series toggles are the chosen fix (stated in the component's own JSDoc), not silently absent. **Color/identity stability**: each series' color is keyed to its original (unfiltered) index, not its position after toggling others off — verified independently by `reviewer`, prevents a toggle from shifting a *different* series' color. **Codex → Claude fallback**: Codex exited immediately on "workspace out of credits" before writing any code, so this session implemented directly — author-flip rule applied, independent `reviewer` **and** `ui_reviewer` both ran before commit (mandatory per WO tier), **both clean, no findings**. `ui_reviewer` confirmed accessible labels (series name text, not color alone), native MUI keyboard nav untouched, all 4 languages present for new i18n keys, host-supplied series labels never passed through `t()`. Gate: 9/9 new `TimeSeriesChart` tests + 25/25 across the full chart-component test set (`ChartFrame`/`BarChart`/`LineChart`/`chartsPalette`/`TimeSeriesChart`), `tsc --noEmit` clean. `ChartFrame`/`BarChart`/`LineChart`/`palette.js` confirmed untouched. |

package/dist/components/charts/TimeSeriesChart.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Box, Checkbox, FormControlLabel, FormGroup, Radio, RadioGroup, } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { ChartFrame } from './ChartFrame';
+import { BarChart } from './BarChart';
+import { useNeutralChartPalette } from './palette';
+// Fixed platform-wide range -> granularity mapping (operator decision, CHART-2 /
+// dcm ACT-1) — the resolution follows the window and is never an independent
+// caller-supplied control. Every preset lands between a dozen and fifty points.
+const RANGE_OPTIONS = [
+    { key: '1d', granularity: 'hour', labelKey: 'TimeSeriesChart.RANGE_1_DAY' },
+    { key: '1w', granularity: '4hour', labelKey: 'TimeSeriesChart.RANGE_1_WEEK' },
+    { key: '1m', granularity: 'day', labelKey: 'TimeSeriesChart.RANGE_1_MONTH' },
+    { key: '1y', granularity: 'month', labelKey: 'TimeSeriesChart.RANGE_1_YEAR' },
+];
+/**
+ * A time-series preset on ChartFrame + BarChart: a range picker (emits the
+ * selected range AND its mapped granularity to the host) and series toggle
+ * checkboxes, in the frame's toolbar slot.
+ *
+ * Presentational only — takes `data` and callbacks, never fetches. The host
+ * 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).
+ */
+export function TimeSeriesChart({ title, subtitle, xAxisLabel, yAxisLabel, 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) || [];
+    const [range, setRange] = useState(defaultRange);
+    // Series identity (keys) is assumed stable for a given chart instance — the
+    // toggle set is initialized once from the first data the chart receives.
+    const [visibleKeys, setVisibleKeys] = useState(() => new Set(seriesConfig.map((series) => series.key)));
+    const handleRangeChange = (event) => {
+        const nextRange = event.target.value;
+        setRange(nextRange);
+        const option = RANGE_OPTIONS.find((candidate) => candidate.key === nextRange);
+        onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(nextRange, option === null || option === void 0 ? void 0 : option.granularity);
+    };
+    const toggleSeries = (key) => {
+        setVisibleKeys((previous) => {
+            const next = new Set(previous);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    };
+    const visibleSeries = seriesConfig.filter((series) => visibleKeys.has(series.key));
+    // Preserve each series' color by its ORIGINAL index, not the filtered
+    // position — otherwise toggling one series off shifts every remaining
+    // 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 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, 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 })) }));
+}
+export default TimeSeriesChart;

package/dist/i18n/chartsTranslations.js

@@ -35,4 +35,40 @@ export const chartsTranslations = {
         en: 'The chart could not be exported.',
         sw: 'Chati haikuweza kuhamishwa.',
     },
+    'TimeSeriesChart.RANGE_LABEL': {
+        de: 'Zeitraum',
+        fr: 'Période',
+        en: 'Range',
+        sw: 'Kipindi',
+    },
+    'TimeSeriesChart.RANGE_1_DAY': {
+        de: '1 Tag',
+        fr: '1 jour',
+        en: '1 day',
+        sw: 'Siku 1',
+    },
+    'TimeSeriesChart.RANGE_1_WEEK': {
+        de: '1 Woche',
+        fr: '1 semaine',
+        en: '1 week',
+        sw: 'Wiki 1',
+    },
+    'TimeSeriesChart.RANGE_1_MONTH': {
+        de: '1 Monat',
+        fr: '1 mois',
+        en: '1 month',
+        sw: 'Mwezi 1',
+    },
+    'TimeSeriesChart.RANGE_1_YEAR': {
+        de: '1 Jahr',
+        fr: '1 an',
+        en: '1 year',
+        sw: 'Mwaka 1',
+    },
+    'TimeSeriesChart.SERIES_LABEL': {
+        de: 'Serien',
+        fr: 'Séries',
+        en: 'Series',
+        sw: 'Mfululizo',
+    },
 };

package/dist/index.js

@@ -32,6 +32,7 @@ export { QrSignupManager } from './components/QrSignupManager';
 export { ChartFrame } from './components/charts/ChartFrame';
 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 { formatPercentage, formatCompact, formatRatio, createChartFormatters, useChartFormatters, } from './components/charts/formatters';
 // --- 7. Translations ---

package/package.json

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

package/src/components/charts/TimeSeriesChart.jsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  Radio,
+  RadioGroup,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { ChartFrame } from './ChartFrame';
+import { BarChart } from './BarChart';
+import { useNeutralChartPalette } from './palette';
+
+// Fixed platform-wide range -> granularity mapping (operator decision, CHART-2 /
+// dcm ACT-1) — the resolution follows the window and is never an independent
+// caller-supplied control. Every preset lands between a dozen and fifty points.
+const RANGE_OPTIONS = [
+  { key: '1d', granularity: 'hour', labelKey: 'TimeSeriesChart.RANGE_1_DAY' },
+  { key: '1w', granularity: '4hour', labelKey: 'TimeSeriesChart.RANGE_1_WEEK' },
+  { key: '1m', granularity: 'day', labelKey: 'TimeSeriesChart.RANGE_1_MONTH' },
+  { key: '1y', granularity: 'month', labelKey: 'TimeSeriesChart.RANGE_1_YEAR' },
+];
+
+/**
+ * A time-series preset on ChartFrame + BarChart: a range picker (emits the
+ * selected range AND its mapped granularity to the host) and series toggle
+ * checkboxes, in the frame's toolbar slot.
+ *
+ * Presentational only — takes `data` and callbacks, never fetches. The host
+ * 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).
+ */
+export function TimeSeriesChart({
+  title,
+  subtitle,
+  xAxisLabel,
+  yAxisLabel,
+  data,
+  loading = false,
+  error = false,
+  onRangeChange,
+  defaultRange = '1w',
+}) {
+  const { t } = useTranslation();
+  const palette = useNeutralChartPalette().categorical;
+  const seriesConfig = data?.series || [];
+
+  const [range, setRange] = useState(defaultRange);
+  // Series identity (keys) is assumed stable for a given chart instance — the
+  // toggle set is initialized once from the first data the chart receives.
+  const [visibleKeys, setVisibleKeys] = useState(
+    () => new Set(seriesConfig.map((series) => series.key)),
+  );
+
+  const handleRangeChange = (event) => {
+    const nextRange = event.target.value;
+    setRange(nextRange);
+    const option = RANGE_OPTIONS.find((candidate) => candidate.key === nextRange);
+    onRangeChange?.(nextRange, option?.granularity);
+  };
+
+  const toggleSeries = (key) => {
+    setVisibleKeys((previous) => {
+      const next = new Set(previous);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  const visibleSeries = seriesConfig.filter((series) => visibleKeys.has(series.key));
+  // Preserve each series' color by its ORIGINAL index, not the filtered
+  // position — otherwise toggling one series off shifts every remaining
+  // 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 toolbar = (
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'center' }}>
+      <RadioGroup
+        row
+        value={range}
+        onChange={handleRangeChange}
+        aria-label={t('TimeSeriesChart.RANGE_LABEL')}
+      >
+        {RANGE_OPTIONS.map((option) => (
+          <FormControlLabel
+            key={option.key}
+            value={option.key}
+            control={<Radio size="small" />}
+            label={t(option.labelKey)}
+          />
+        ))}
+      </RadioGroup>
+      {seriesConfig.length > 0 && (
+        <FormGroup row aria-label={t('TimeSeriesChart.SERIES_LABEL')}>
+          {seriesConfig.map((series, index) => (
+            <FormControlLabel
+              key={series.key}
+              control={(
+                <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}
+            />
+          ))}
+        </FormGroup>
+      )}
+    </Box>
+  );
+
+  return (
+    <ChartFrame
+      title={title}
+      subtitle={subtitle}
+      toolbar={toolbar}
+      loading={loading}
+      error={error}
+      isEmpty={isDataEmpty}
+    >
+      {!isDataEmpty && (
+        <BarChart
+          xAxisLabel={xAxisLabel}
+          yAxisLabel={yAxisLabel}
+          xAxis={[{ data: data?.xLabels || [] }]}
+          series={visibleSeries.map((series) => ({ data: series.data, label: series.label }))}
+          palette={visiblePalette}
+        />
+      )}
+    </ChartFrame>
+  );
+}
+
+export default TimeSeriesChart;

package/src/i18n/chartsTranslations.ts

@@ -35,4 +35,40 @@ export const chartsTranslations = {
     en: 'The chart could not be exported.',
     sw: 'Chati haikuweza kuhamishwa.',
   },
+  'TimeSeriesChart.RANGE_LABEL': {
+    de: 'Zeitraum',
+    fr: 'Période',
+    en: 'Range',
+    sw: 'Kipindi',
+  },
+  'TimeSeriesChart.RANGE_1_DAY': {
+    de: '1 Tag',
+    fr: '1 jour',
+    en: '1 day',
+    sw: 'Siku 1',
+  },
+  'TimeSeriesChart.RANGE_1_WEEK': {
+    de: '1 Woche',
+    fr: '1 semaine',
+    en: '1 week',
+    sw: 'Wiki 1',
+  },
+  'TimeSeriesChart.RANGE_1_MONTH': {
+    de: '1 Monat',
+    fr: '1 mois',
+    en: '1 month',
+    sw: 'Mwezi 1',
+  },
+  'TimeSeriesChart.RANGE_1_YEAR': {
+    de: '1 Jahr',
+    fr: '1 an',
+    en: '1 year',
+    sw: 'Mwaka 1',
+  },
+  'TimeSeriesChart.SERIES_LABEL': {
+    de: 'Serien',
+    fr: 'Séries',
+    en: 'Series',
+    sw: 'Mfululizo',
+  },
 };

package/src/index.js

@@ -44,6 +44,7 @@ export { QrSignupManager } from './components/QrSignupManager';
 export { ChartFrame } from './components/charts/ChartFrame';
 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 {
   formatPercentage,

package/tests/TimeSeriesChart.test.jsx

@@ -0,0 +1,131 @@
+// @vitest-environment jsdom
+import React from 'react';
+import i18next from 'i18next';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const chartSpy = vi.hoisted(() => vi.fn((props) => <div data-testid="mui-bar-chart" data-props={JSON.stringify(props)} />));
+vi.mock('@mui/x-charts/BarChart', () => ({ BarChart: chartSpy }));
+
+import { TimeSeriesChart } from '../src/components/charts/TimeSeriesChart';
+
+const 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.',
+    },
+  },
+};
+
+const SAMPLE_DATA = {
+  xLabels: ['Mon', 'Tue', 'Wed'],
+  series: [
+    { key: 'users', label: 'Users', data: [1, 2, 3] },
+    { key: 'presence', label: 'Presence hours', data: [4, 5, 6] },
+  ],
+};
+
+function renderChart(props = {}) {
+  const i18n = i18next.createInstance();
+  i18n.init({ lng: 'en', resources, interpolation: { escapeValue: false } });
+  return render(
+    <ThemeProvider theme={createTheme()}>
+      <I18nextProvider i18n={i18n}>
+        <TimeSeriesChart
+          title="Activity"
+          xAxisLabel="Day"
+          yAxisLabel="Count"
+          data={SAMPLE_DATA}
+          {...props}
+        />
+      </I18nextProvider>
+    </ThemeProvider>,
+  );
+}
+
+describe('TimeSeriesChart', () => {
+  afterEach(cleanup);
+
+  // Required test 1: selecting a range emits both the range AND the mapped
+  // granularity — asserts the emitted payload, not merely that the callback fired.
+  it('emits both the range and its mapped granularity when a preset is selected', () => {
+    const onRangeChange = vi.fn();
+    renderChart({ onRangeChange });
+
+    fireEvent.click(screen.getByRole('radio', { name: '1 day' }));
+
+    expect(onRangeChange).toHaveBeenCalledWith('1d', 'hour');
+  });
+
+  it.each([
+    ['1 week', '1w', '4hour'],
+    ['1 month', '1m', 'day'],
+    ['1 year', '1y', 'month'],
+  ])('maps %s to range=%s granularity=%s', (label, rangeKey, granularity) => {
+    const onRangeChange = vi.fn();
+    // defaultRange is '1w' — start from a different preset so every clicked
+    // option (including '1 week' itself) represents a real selection change.
+    renderChart({ onRangeChange, defaultRange: '1d' });
+
+    fireEvent.click(screen.getByRole('radio', { name: label }));
+
+    expect(onRangeChange).toHaveBeenCalledWith(rangeKey, granularity);
+  });
+
+  // Required test 2: toggling a series off removes it, leaves the others.
+  it('toggling a series off removes it from the rendered chart and leaves the other', () => {
+    renderChart();
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Users' }));
+
+    const props = chartSpy.mock.calls.at(-1)[0];
+    expect(props.series).toHaveLength(1);
+    expect(props.series[0].label).toBe('Presence hours');
+  });
+
+  it('preserves the remaining series color when the other is toggled off', () => {
+    renderChart();
+    const initialProps = chartSpy.mock.calls.at(-1)[0];
+    const presenceColorBefore = initialProps.colors[1];
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Users' }));
+
+    const afterProps = chartSpy.mock.calls.at(-1)[0];
+    expect(afterProps.colors[0]).toBe(presenceColorBefore);
+  });
+
+  // Required test 3: toggling all series off renders a stable empty chart.
+  it('toggling all series off renders a stable empty chart, no crash, no spinner', () => {
+    renderChart();
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Users' }));
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Presence hours' }));
+
+    expect(screen.getByText('No data available.')).toBeTruthy();
+    expect(screen.queryByLabelText('Loading chart.')).toBeNull();
+    expect(screen.queryByTestId('mui-bar-chart')).toBeNull();
+  });
+
+  // Required test 4: renders ChartFrame's empty state for empty data, exactly once.
+  it("renders ChartFrame's empty state for empty data, exactly once", () => {
+    renderChart({ data: { xLabels: [], series: [] } });
+
+    expect(screen.getAllByText('No data available.')).toHaveLength(1);
+    expect(screen.queryByTestId('mui-bar-chart')).toBeNull();
+  });
+
+  it('range picker and series toggles pass through loading and error to ChartFrame', () => {
+    renderChart({ loading: true });
+    expect(screen.getByLabelText('Loading chart.')).toBeTruthy();
+  });
+});

package/work-orders/CHART-2.md

@@ -0,0 +1,222 @@
+# WORK ORDER CHART-2 (ui-core-micha) — a time-series chart preset with range picker and series toggles
+
+**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.
+
+Feature-level WO (Expertenchat envelope). Extends CHART-1. Operator request 2026-08-04 from jg's event
+activity chart; the same controls are wanted wherever a time series is charted, and `django-core-micha`
+ACT-1 makes activity data available to every app.
+
+## TIER
+Tier 2 — shared-core UI consumed by every app. Independent `reviewer` + `ui_reviewer` mandatory.
+
+## WHY
+
+CHART-1 already ships `ChartFrame` (Paper + title + **toolbar slot** + loading / error / empty +
+responsive container + SVG/PNG export + a11y), a themed `BarChart`, `getNeutralChartPalette` and
+`chartsTranslations`. The frame's toolbar slot exists for exactly this and is currently unused by any
+consumer.
+
+jg's `ActivitySection.jsx` bypasses the kit entirely (`import { BarChart } from '@mui/x-charts/BarChart'`
+at `:9`) and hand-rolls its own `Paper`, loading, error and empty states. Rather than jg building a
+range picker and series checkboxes locally, they belong in the kit — every app charting a time series
+wants both.
+
+## SCOPE
+
+**A. A range picker for the toolbar slot.** Presets **1 day / 1 week / 1 month / 1 year** (operator,
+2026-08-04), emitting the selected range to the host. The host owns fetching; the picker owns the choice.
+
+The range must also carry the **granularity** the consumer should request — dcm ACT-1's query endpoint
+aggregates server-side, and a year of 4-hour buckets is ~2190 points, which no chart can render
+usefully. A picker that changes the window but not the resolution reproduces exactly the
+unreadable-density problem this WO exists to fix.
+
+**The range-to-resolution mapping (operator, 2026-08-04) — implement exactly this:**
+
+| Range | Resolution | Points |
+|---|---|---|
+| 1 day | 1 hour | 24 |
+| 1 week | 4 hours | ~42 |
+| 1 month | 1 day | ~30 |
+| 1 year | 1 month | 12 |
+
+Every preset lands between a dozen and fifty points, which is what keeps the chart readable at any
+range. **The resolution follows the window; it is not an independent control** and must not be exposed
+as one.
+
+
+**B. Series toggles for the toolbar slot.** Check/uncheck each series independently.
+
+**These are not cosmetic.** In jg's chart two series share one y-axis with different units — user counts
+reach 28 while presence-hours sit near zero, so the second series is invisible. Toggling one off
+rescales the axis and makes the other readable. Whether to offer a second y-axis instead is a real
+alternative: **if you do not add one, say so deliberately** rather than leaving it unconsidered.
+
+Deselecting every series must leave a stable empty chart — not a crash, not a permanent spinner.
+
+**C. Compose them into a preset** on `ChartFrame` + the existing `BarChart`, so a consumer gets frame,
+chart, picker and toggles from one component and passes data plus callbacks.
+
+**Presentational only — the host fetches.** Take `data`, the current range and series selection, and
+callbacks; do not call any endpoint. If all four hosts later write the identical fetch against ACT-1's
+endpoint, *that* is the signal to add an adapter — and note the inverse trap from this estate's recent
+history: building the shared thing before two identical consumers exist is how you generalise against a
+single case and get it wrong.
+
+## 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.
+
+**New file: `src/components/charts/TimeSeriesChart.jsx`** (generic name — non-goal bars anything
+app-specific; this is not called `ActivityChart`). Export it in `src/index.js` right after the
+existing `LineChart` export (`:46`): `export { TimeSeriesChart } from './components/charts/TimeSeriesChart';`.
+
+**`ChartFrame`'s toolbar slot (`src/components/charts/ChartFrame.jsx`)** — the prop is named
+**`toolbar`** (not `toolbarSlot`), destructured `:20`, rendered `:74` inside a `Box` next to the
+title/subtitle, `justifyContent: 'space-between'`. Full prop list `:17-34`:
+`title, subtitle, toolbar, loading, error, isEmpty, emptyMessage, minHeight, aspect, exportOptions,
+onExportSvg, onExportPng, ariaLabel, children, variant, sx`. State precedence `:58-65`:
+`loading → error → isEmpty → children` — `TimeSeriesChart` passes its own `loading`/`error`/`isEmpty`
+straight through, it does not reimplement these.
+
+**`BarChart` (`src/components/charts/BarChart.jsx`, 44 lines)** — required props `xAxisLabel`/
+`yAxisLabel` (throws if absent, `:27-29`). `series` is a bare array of MUI X-Charts series objects,
+e.g. `{ data: [...], label, ... }` — no ucm wrapping. Colors: `palette || neutralPalette.categorical`
+(from `useNeutralChartPalette()`), assigned **positionally by index** — series `i` gets
+`categorical[i]`. `hideLegend={series.length <= 1}`.
+
+**Data contract for `TimeSeriesChart`** (design decision, state it): the host has already fetched
+and shaped the series (dcm ACT-1's query endpoint returns rolled-up buckets; this component knows
+nothing about that origin). Prop shape:
+```jsx
+<TimeSeriesChart
+  title
+  xAxisLabel
+  yAxisLabel
+  data={{ xLabels: [...], series: [{ key: 'users', label: 'Users', data: [...] }, { key: 'presence', label: 'Presence', data: [...] }] }}
+  loading
+  error
+  onRangeChange={(rangeKey, granularity) => {...}}   // rangeKey: '1d'|'1w'|'1m'|'1y'
+/>
+```
+Range selection is **self-managed internal state** (default a sensible preset, e.g. `'1w'`), emitting
+`onRangeChange(rangeKey, granularity)` on every change so the host can refetch `data` for the new
+window — the host owns fetching (non-goal), this component owns only which range is currently
+selected and telling the host what changed. Series-toggle visibility is **also self-managed internal
+state** (`Set` of visible series keys, all visible by default) — deselecting is a pure client-side
+filter over already-fetched `data`, no host round-trip needed, so no `onSeriesToggle` callback is
+required (optional to add if a reviewer disagrees, but the WO's own framing — "these are not
+cosmetic... toggling rescales the axis" — describes a display-only operation).
+
+**Range-to-granularity mapping — implement exactly, no per-app override:**
+`'1d' → 'hour'`, `'1w' → '4hour'`, `'1m' → 'day'`, `'1y' → 'month'` (match whatever granularity
+vocabulary dcm ACT-1's query endpoint expects once it publishes — since CHART-2 does not fetch, the
+exact string values are this component's own contract, name them clearly, e.g. `'hour' | '4hour' |
+'day' | 'month'`, and state the chosen vocabulary in the completion note so ACT-1/ACT-3 can align).
+
+**Range picker widget — decide and state (per WO's own "if you consider X, say so"):** this repo has
+**zero existing `ToggleButtonGroup` usage** (grepped, confirmed) but an established, deliberate
+`RadioGroup` + `FormControlLabel` convention for single-choice controls
+(`src/messaging/PollCard.jsx:1-140`, code comment there explains why: native arrow-key nav + grouped
+screen-reader announcement — "a bare ungrouped `Radio` per option... loses both"). Prefer
+`RadioGroup`/`FormControlLabel` to match this repo's convention unless a segmented-button visual is
+judged clearly better for a 4-preset picker — either is acceptable, but state which and why.
+
+**Series toggles — `Checkbox` + `FormControlLabel` per series**, matching this repo's established
+multi-choice pattern (`PollCard.jsx`'s multi-choice mode; also `Composer.jsx:181`,
+`ProfileComponent.jsx:232,244`). **Accessibility requirement, verified as a real gap**: colors from
+`getNeutralChartPalette` are assigned positionally with no name-to-color map and no shape
+differentiation (`src/components/charts/palette.js`, full file) — so each checkbox's `label` MUST be
+the series' text name (`FormControlLabel` gives this for free), not a bare colored swatch. Optionally
+also render a small colored swatch next to the label (matching the series' `BarChart` color at the
+same index) as a secondary, non-exclusive cue.
+
+**Second y-axis — decision required by the WO, make it explicitly:** `BarChart` already supports a
+dual-axis shape (`yAxisKey: 'secondary'` per series, paired with `yAxis={[{id:'primary'},
+{id:'secondary'}]}`), so it is technically available — but **do not use it here**. Scope B's series
+toggles are the WO's chosen, required fix for the shared-axis-different-units problem (jg's user
+counts vs. presence-hours); a second y-axis is the *alternative* the WO explicitly did not choose.
+State this decision plainly in the completion note — do not leave it to be inferred from absence.
+
+**Empty state — all series deselected:** `ChartFrame`'s `isEmpty` prop drives its own empty-state
+`Alert` (`:58-65`). When every series is toggled off, `TimeSeriesChart` must NOT pass an empty
+`series` array to `BarChart` (which would likely throw or render a blank axis) — instead set
+`isEmpty` truthy on `ChartFrame` and skip rendering `BarChart` entirely for that render, matching
+required test 3 ("stable empty chart: no crash, no spinner").
+
+**i18n — extend `src/i18n/chartsTranslations.ts` in place** (single `chartsTranslations` object,
+`<ComponentName>.<CONSTANT_KEY>` convention, all four `de/fr/en/sw`, `:1-38` for the existing shape
+to match). New keys needed: `TimeSeriesChart.RANGE_1_DAY`, `RANGE_1_WEEK`, `RANGE_1_MONTH`,
+`RANGE_1_YEAR`, and a label for the series-toggle group (e.g. `TimeSeriesChart.SERIES_LABEL`).
+
+**Tests — new `tests/TimeSeriesChart.test.jsx`**, matching `tests/ChartFrame.test.jsx`/
+`tests/BarChart.test.jsx` conventions (both fully precedent): `// @vitest-environment jsdom` header,
+vitest + `@testing-library/react`, `afterEach(cleanup)`, a minimal per-file `i18next.createInstance()`
++ `I18nextProvider` (not the app's real i18n config), wrapped in `ThemeProvider theme={createTheme()}`.
+For test 1 (range emits granularity) and the series-filter tests, mock `@mui/x-charts/BarChart` itself
+via `vi.hoisted` + `vi.mock` to inspect exact props passed through (`BarChart.test.jsx`'s own pattern,
+`chartSpy.mock.calls[0][0]`) — do not mock ucm's own `BarChart`/`ChartFrame`, the point is testing the
+real composition.
+
+## NON-GOALS / DO NOT TOUCH
+- Do not fetch data, and do not import anything app-specific.
+- Do not change `ChartFrame`, `BarChart`, `LineChart` or the palette beyond what composing requires. If
+  `ChartFrame` lacks something, **extend it deliberately and say so** — do not work around it in the
+  preset.
+- Do not add a charting dependency; MUI X-Charts is already the kit's basis.
+- No persistence of the picker or toggle state — that is the host's decision.
+
+## RISKS
+- The toolbar slot has no consumer today, so this is its first real use. Expect to find gaps in it;
+  fixing them is in scope, working around them is not.
+- Accessibility: the picker and checkboxes are controls, not decoration — labels, keyboard operation and
+  state must be right. Series colour alone must not be the only way to tell which toggle maps to which
+  series. `ui_reviewer` should check this specifically.
+- Every host inherits the preset; a visible behaviour change beyond jg.
+
+## REQUIRED TESTS TO WRITE
+Narrow and behavioural. Do NOT run the full suite.
+
+1. Selecting a range emits both the range **and** the mapped granularity to the callback — assert the
+   granularity, which is the half most likely to be dropped.
+2. Toggling a series off removes it from the rendered chart and leaves the others.
+3. Toggling **all** series off renders a stable empty chart: no crash, no spinner.
+4. The preset renders `ChartFrame`'s empty state for empty data, exactly once.
+
+**Non-vacuity:** test 1 must fail if only the range is emitted. Assert the emitted payload, not that a
+callback fired.
+
+## TEST SCOPE FOR THE GATE (orchestrator)
+The chart component tests. Not the full suite.
+
+## TARGET REPO
+`C:\Users\biglmi\Documents\webapps\ui-core-micha`. Branch `main` (or `develop` if present). Publish per
+the repo's release flow; consumer pin bumps are separate.
+
+## MINI-HANDOVER (pastable)
+
+> Repo: `C:\Users\biglmi\Documents\webapps\ui-core-micha` (branch `main`, or `develop` if present).
+> Work order: `work-orders/CHART-2.md` — read it fully, then follow the `orchestrate-codex` skill.
+>
+> Extends CHART-1, whose `ChartFrame` already has an unused **toolbar slot** — that is where the range
+> picker and series toggles go. **Presentational only: the host fetches, this component takes data and
+> callbacks.**
+>
+> The one thing most likely to be half-done: the range picker must emit a **granularity** alongside the
+> window. dcm ACT-1 aggregates server-side, and a 1-year range at 4-hour buckets is ~2190 points — a
+> picker that widens the window without coarsening the resolution reproduces the unreadable chart this
+> WO exists to fix. Test 1 asserts the granularity for that reason.
+>
+> The series toggles are a real fix, not a preference: jg's two series share one y-axis with different
+> units, which is why one of them is invisible today. If you consider a second y-axis instead, decide
+> deliberately and say so.
+
+## 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>`.