@micha.bigler/ui-core-micha 2.41.3 → 2.42.1

package/tests/ChartFrame.test.jsx

@@ -211,4 +211,71 @@ describe('ChartFrame', () => {
     renderFrame({ isEmpty: true }, 'fr');
     expect(screen.getByText('Aucune donnée disponible.')).toBeTruthy();
   });
+
+  // CHART-9: ChartFrame's content box is a whole CARD (title, toolbar, chart, legend, footnotes,
+  // export links), not a single chart -- unlike the four chart presets, which do apply
+  // resolveChartHeight's height/aspect resolution to their own box. ChartFrame's box must never
+  // take a fixed `height`; `minHeight` is always just a floor content can exceed.
+  describe('minHeight/height resolution (CHART-9)', () => {
+    function contentBoxStyle() {
+      return window.getComputedStyle(screen.getByTestId('chart-body').parentElement);
+    }
+
+    it('sizes the content box from minHeight alone as a floor, never a fixed height', () => {
+      renderFrame({ minHeight: 300 });
+      const style = contentBoxStyle();
+      expect(style.minHeight).toBe('300px');
+      expect(style.height).toBe('auto');
+    });
+
+    it('does not receive a fixed height when content exceeds minHeight -- the regression itself', () => {
+      const i18n = i18next.createInstance();
+      i18n.init({ lng: 'en', resources, interpolation: { escapeValue: false } });
+      render(
+        <ThemeProvider theme={createTheme()}>
+          <I18nextProvider i18n={i18n}>
+            <ChartFrame title="Chart title" minHeight={100}>
+              <svg data-testid="chart-body" style={{ height: 500 }} />
+            </ChartFrame>
+          </I18nextProvider>
+        </ThemeProvider>,
+      );
+      const style = contentBoxStyle();
+      expect(style.minHeight).toBe('100px');
+      expect(style.height).toBe('auto');
+    });
+
+    it('leaves minHeight as a floor and gives no fixed height when aspect is set (no height)', () => {
+      renderFrame({ minHeight: 320, aspect: 1.8 });
+      const style = contentBoxStyle();
+      expect(style.minHeight).toBe('320px');
+      expect(style.height).toBe('auto');
+      expect(style.aspectRatio).toBe('1.8 / 1');
+    });
+
+    it('does not apply height as a fixed box height even when passed explicitly, and does not throw', () => {
+      expect(() => renderFrame({ minHeight: 420, height: 380 })).not.toThrow();
+      const style = contentBoxStyle();
+      expect(style.minHeight).toBe('420px');
+      expect(style.height).toBe('auto');
+    });
+
+    it('ignores height when passed alone, with no minHeight floor either', () => {
+      renderFrame({ height: 280 });
+      const style = contentBoxStyle();
+      expect(style.minHeight).toBe('auto');
+      expect(style.height).toBe('auto');
+    });
+
+    it('warns with wording accurate to its own behaviour -- minHeight wins, not height', () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      renderFrame({ minHeight: 420, height: 380 });
+      expect(warnSpy).toHaveBeenCalledOnce();
+      const message = warnSpy.mock.calls[0][0];
+      expect(message).toContain('ChartFrame');
+      expect(message).toContain('height is ignored');
+      expect(message).not.toContain('height wins');
+      warnSpy.mockRestore();
+    });
+  });
 });

package/tests/LineChart.test.jsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import React from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 const chartSpy = vi.hoisted(() => vi.fn(() => <div data-testid="mui-line-chart" />));
@@ -33,4 +33,49 @@ describe('LineChart preset', () => {
       legend: { position: { vertical: 'bottom', horizontal: 'start' } },
     });
   });
+
+  // CHART-8: minHeight/height/aspect resolution, wired through the actual component.
+  describe('minHeight/height resolution (CHART-8)', () => {
+    function renderLine(props) {
+      return render(
+        <ThemeProvider theme={createTheme()}>
+          <LineChart series={[{ data: [1, 2] }]} {...props} />
+        </ThemeProvider>,
+      );
+    }
+
+    afterEach(cleanup);
+
+    it('sizes the chart from minHeight alone when neither height nor aspect is set', () => {
+      renderLine({ minHeight: 300 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(300);
+      expect(window.getComputedStyle(screen.getByTestId('line-chart-container')).minHeight).toBe('300px');
+    });
+
+    it('leaves minHeight as a floor and gives the chart no fixed height when aspect is set (no height)', () => {
+      renderLine({ minHeight: 320, aspect: 1.8 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBeUndefined();
+      const style = window.getComputedStyle(screen.getByTestId('line-chart-container'));
+      expect(style.minHeight).toBe('320px');
+      expect(style.aspectRatio).toBe('1.8 / 1');
+    });
+
+    it('caps the wrapper at height when minHeight is larger, closing the dead-space gap', () => {
+      renderLine({ minHeight: 420, height: 380 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(380);
+      expect(window.getComputedStyle(screen.getByTestId('line-chart-container')).minHeight).toBe('380px');
+    });
+
+    it('is byte-identical when minHeight equals height', () => {
+      renderLine({ minHeight: 320, height: 320 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(320);
+      expect(window.getComputedStyle(screen.getByTestId('line-chart-container')).minHeight).toBe('320px');
+    });
+
+    it('is unchanged when height is passed alone', () => {
+      renderLine({ height: 280 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(280);
+      expect(window.getComputedStyle(screen.getByTestId('line-chart-container')).minHeight).toBe('auto');
+    });
+  });
 });

package/tests/ScatterChart.test.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import i18next from 'i18next';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
 import { ThemeProvider } from '@mui/material/styles';
 
@@ -232,3 +232,40 @@ describe('ScatterReferenceCurve / ScatterReferenceLine (THEME-10)', () => {
     expect(container.querySelector('text')).toBeNull();
   });
 });
+
+// CHART-8: minHeight/height/aspect resolution, wired through the actual component.
+describe('ScatterChart minHeight/height resolution (CHART-8)', () => {
+  afterEach(() => { cleanup(); vi.clearAllMocks(); });
+
+  it('sizes the chart from minHeight alone when neither height nor aspect is set', () => {
+    renderScatter({ minHeight: 300 });
+    expect(scatterSpy.mock.calls.at(-1)[0].height).toBe(300);
+    expect(window.getComputedStyle(screen.getByTestId('scatter-chart-container')).minHeight).toBe('300px');
+  });
+
+  it('leaves minHeight as a floor and gives the chart no fixed height when aspect is set (no height)', () => {
+    renderScatter({ minHeight: 320, aspect: 1.8 });
+    expect(scatterSpy.mock.calls.at(-1)[0].height).toBeUndefined();
+    const style = window.getComputedStyle(screen.getByTestId('scatter-chart-container'));
+    expect(style.minHeight).toBe('320px');
+    expect(style.aspectRatio).toBe('1.8 / 1');
+  });
+
+  it('caps the wrapper at height when minHeight is larger, closing the dead-space gap', () => {
+    renderScatter({ minHeight: 420, height: 380 });
+    expect(scatterSpy.mock.calls.at(-1)[0].height).toBe(380);
+    expect(window.getComputedStyle(screen.getByTestId('scatter-chart-container')).minHeight).toBe('380px');
+  });
+
+  it('is byte-identical when minHeight equals height', () => {
+    renderScatter({ minHeight: 320, height: 320 });
+    expect(scatterSpy.mock.calls.at(-1)[0].height).toBe(320);
+    expect(window.getComputedStyle(screen.getByTestId('scatter-chart-container')).minHeight).toBe('320px');
+  });
+
+  it('is unchanged when height is passed alone', () => {
+    renderScatter({ height: 280 });
+    expect(scatterSpy.mock.calls.at(-1)[0].height).toBe(280);
+    expect(window.getComputedStyle(screen.getByTestId('scatter-chart-container')).minHeight).toBe('auto');
+  });
+});

package/tests/chartDefaults.test.js

@@ -17,7 +17,9 @@ import { TimeSeriesChart } from '../src/components/charts/TimeSeriesChart';
 import {
   defaultNumericTickFormatter,
   PACKAGE_DEFAULT_MARGIN,
+  resolveChartHeight,
   sizeYAxisForContent,
+  warnOnHeightMismatch,
   withAxisDefaults,
   withMarginDefaults,
 } from '../src/components/charts/chartDefaults';
@@ -433,3 +435,84 @@ describe('withMarginDefaults (THEME-11)', () => {
     expect(withMarginDefaults(full)).toEqual(full);
   });
 });
+
+// CHART-8 -- pure-function contract of the minHeight/height/aspect resolver, independent of any
+// chart component wiring (component-level wiring is covered per-preset in each own test file).
+describe('resolveChartHeight (CHART-8)', () => {
+  it('sizes the chart from minHeight alone when neither height nor aspect is set', () => {
+    expect(resolveChartHeight({ minHeight: 300 })).toEqual({ wrapperMinHeight: 300, chartHeight: 300 });
+  });
+
+  it('leaves minHeight as a floor and gives the chart no fixed height when aspect is set (no height)', () => {
+    expect(resolveChartHeight({ minHeight: 320, aspect: 1.8 })).toEqual({
+      wrapperMinHeight: 320,
+      chartHeight: undefined,
+    });
+  });
+
+  it('caps the wrapper at height when minHeight is larger, closing the dead-space gap', () => {
+    expect(resolveChartHeight({ minHeight: 420, height: 380 })).toEqual({
+      wrapperMinHeight: 380,
+      chartHeight: 380,
+    });
+  });
+
+  it('is byte-identical (both values unchanged) when minHeight equals height', () => {
+    expect(resolveChartHeight({ minHeight: 320, height: 320 })).toEqual({
+      wrapperMinHeight: 320,
+      chartHeight: 320,
+    });
+  });
+
+  it('leaves the wrapper unset when height is passed alone', () => {
+    expect(resolveChartHeight({ height: 280 })).toEqual({ wrapperMinHeight: undefined, chartHeight: 280 });
+  });
+
+  it('does not cap the wrapper when minHeight is smaller than height', () => {
+    expect(resolveChartHeight({ minHeight: 200, height: 380 })).toEqual({
+      wrapperMinHeight: 200,
+      chartHeight: 380,
+    });
+  });
+});
+
+describe('warnOnHeightMismatch (CHART-8)', () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it('warns, naming the component and both values, when minHeight and height disagree', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    warnOnHeightMismatch('BarChart', { minHeight: 420, height: 380 });
+    expect(warn).toHaveBeenCalledOnce();
+    expect(warn.mock.calls[0][0]).toContain('BarChart');
+    expect(warn.mock.calls[0][0]).toContain('420');
+    expect(warn.mock.calls[0][0]).toContain('380');
+  });
+
+  it('does not warn when minHeight equals height', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    warnOnHeightMismatch('BarChart', { minHeight: 320, height: 320 });
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it('does not warn on the legitimate minHeight + aspect (no height) combination', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    warnOnHeightMismatch('BarChart', { minHeight: 320, height: undefined });
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it('does not warn when only one of the pair is set', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    warnOnHeightMismatch('BarChart', { minHeight: undefined, height: 280 });
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it('gives ChartFrame-accurate wording when heightWins is false (CHART-9)', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    warnOnHeightMismatch('ChartFrame', { minHeight: 420, height: 380 }, { heightWins: false });
+    expect(warn).toHaveBeenCalledOnce();
+    const message = warn.mock.calls[0][0];
+    expect(message).toContain('ChartFrame');
+    expect(message).toContain('height is ignored');
+    expect(message).not.toContain('height wins');
+  });
+});

package/work-orders/UCM-CHART-8.md

@@ -0,0 +1,147 @@
+# UCM-CHART-8 — Make the chart presets stop producing dead space below the chart
+
+- **Repo:** `ui-core-micha`, branch `main` (shared-core; publishes from `main` without a staging step)
+- **Tier:** 3 — shared-core. Every consuming app inherits the behaviour change.
+- **Status:** planned
+- **Workstream:** `CHART-*` (chart presets)
+- **Files:** `src/components/charts/ScatterChart.jsx`, `BarChart.jsx`, `LineChart.jsx`,
+  `TimeSeriesChart.jsx`, **`ChartFrame.jsx`** — all five destructure `minHeight` **and** `aspect`
+  (verified 2026-08-21) — plus their tests. **Note for the implementer: only `ScatterChart` and
+  `TimeSeriesChart` reference `height` at all.** `BarChart`, `LineChart` and `ChartFrame` never
+  destructure it, so for them the incoherent "pair" exists only via the rest spread into the MUI
+  chart. Do not go looking for a declared `height` prop there.
+
+> **Why.** `minHeight` and `height` are two different things on these presets, and the API lets a
+> caller pass both. `minHeight` lands on the **wrapper `Box`** —
+> `sx={{ width: '100%', minHeight, aspectRatio: aspect }}` (`ScatterChart.jsx:260`, same
+> construction in `BarChart.jsx`) — while `height` sizes the **chart**. When `minHeight > height`,
+> the difference is dead space **below the chart**.
+>
+> Measured in `hram` on 2026-08-20:
+>
+> | panel | `minHeight` | `height` | dead space |
+> |---|---|---|---|
+> | `StructuralReachabilityPanel` | 420 | 380 | 40 px |
+> | `ExpertTimelinePanel` | 340 | 280 (×2) | 60 px |
+> | `ResultsTimelinePanel` | 320 | 280 | 40 px |
+> | `GroupMetricsPanel` | 300 | **none** | the whole chart is unsized |
+> | Cost, Ratio, Accessibility, Referral, Total | equal | equal | 0 |
+>
+> **The equal-value majority is why this survived.** Passing both looks like harmless
+> belt-and-braces and costs nothing when the numbers match, so the pattern spread by copy-paste and
+> nobody noticed the cases where they diverge. It has been diagnosed and fixed **pointwise twice**
+> in hram (`AllocationPerformancePanel.jsx:462-478`, `OptimizationResultsPanel.jsx:928-940`, both to
+> `height={420}`) — with the explanation written as a comment **inside those two files**, where no
+> new panel will ever read it.
+>
+> This is not N panel bugs. It is one shared API that permits an incoherent pair, and it will keep
+> recurring for as long as it does. Fixing it here fixes every consumer at once, including the ones
+> nobody sweeps.
+
+---
+
+## Part A — Envelope (authoritative WHAT/WHY)
+
+### Goal
+
+A caller can no longer produce dead space by passing `minHeight`. The presets resolve the pair
+themselves, and the incoherent combination becomes impossible rather than merely discouraged.
+
+### Definition of Done
+
+- [ ] **The resolution is three-way, not two-way — `aspect` is the third input and it changes the
+      answer.** Amended 2026-08-21; the original two-way rule would have broken four live call sites.
+      - **`height` present** → it sizes the chart, and the wrapper reserves no more than that.
+      - **No `height`, no `aspect`** → **`minHeight` sizes the chart**, not merely the wrapper.
+        This is what a caller in that shape meant (`GroupMetricsPanel`: `minHeight={300}`, no
+        `height`, no `aspect` — chart unsized today).
+      - **No `height`, but `aspect` present** → **today's behaviour is correct and must not change.**
+        The wrapper is `width: 100%` with `aspectRatio`, so its height derives from its width, and
+        `minHeight` is the floor that stops it collapsing on a narrow viewport. Here `minHeight`
+        means exactly what its name says.
+
+      **Same prop shape, opposite intent** — which is why the rule cannot be stated on
+      `minHeight`/`height` alone.
+- [ ] **`minHeight > height` produces no wrapper padding.** The chart is sized by `height` and the
+      wrapper does not reserve more than the chart occupies. The extra space was never intentional.
+- [ ] **Equal values behave exactly as today** — that is the majority of call sites and they must
+      not shift by a pixel.
+- [ ] **A dev-mode warning names the offending call site** when both are passed and they disagree.
+      Not a throw: a shared package that throws on a prop combination in production breaks a
+      consumer's page over a layout nit.
+- [ ] **JSDoc on every preset that takes it** states in one line what `minHeight` now does, so the
+      next caller does not have to infer it from a comment in a consumer app.
+
+### Deliberately NOT done
+
+- **`minHeight` is not removed from the API.** Removing it is a breaking change to a shared package,
+  which would make every consumer's pin bump a Tier-3 change with a real chance of unnoticed layout
+  regressions — a worse outcome than the defect. Deprecate in the docstring, coerce in the code.
+- No change to chart internals, palettes, axis defaults or `aspect`.
+- No consumer-side sweep in this WO. hram's call-site cleanup is its own follow-up, gated on the pin
+  bump — see below.
+
+### Preconditions and ordering
+
+The fix only reaches hram after **(a)** this lands and publishes and **(b)** hram bumps its
+`@micha.bigler/ui-core-micha` pin. Verify the published version is actually live before the consumer
+bump — this package publishes from `main` with no staging step, so a failed publish is silent until
+a consumer installs it.
+
+### Risks
+
+- **The consumer check is done, and it found something — 2026-08-21.** It was written here as a
+  hypothetical ("a consumer may be relying on the padding as spacing"); the real finding is
+  different and larger. **Four live call sites pass `aspect` together with `minHeight` and no
+  `height`:**
+
+  | call site | props |
+  |---|---|
+  | `hram/AccessGapScatterPanel.jsx:182` | `aspect={1.8}` + `minHeight={320}` |
+  | `fitness-monitor/BodyHistoryPage.jsx:~328` | `aspect="960 / 380"` + `minHeight={320}` |
+  | `fitness-monitor/BodyHistoryPage.jsx:~355` | `aspect="960 / 380"` + `minHeight={320}` |
+  | `fitness-monitor/BodyHistoryPage.jsx:~450` | `aspect="400 / 220"` + `minHeight={220}` |
+
+  These are not relying on padding-as-spacing. They are using `minHeight` **as a floor under an
+  aspect-derived height**, which is legitimate and is what the name promises. The original
+  Definition of Done would have turned all four into fixed-height charts and removed their
+  responsive behaviour. **That is the reason for the three-way rule above**, and it is the case to
+  hold onto when reading the rest of this order.
+
+  Scope note: `survey-renderer` is named above as a consumer to check. **The standalone repo is
+  retired** (2026-07-31); the widget now lives at `survey_app/frontend/packages/survey-renderer`,
+  and neither it nor `cockpit` or `jg-ferien` passes `aspect` to a chart preset. jg's one `aspect=`
+  hit is an `ImageCropDialog`, unrelated.
+- The dev warning must not fire on the equal-value majority, or it becomes noise that trains people
+  to ignore it.
+
+### Tests to WRITE — narrow
+
+- `minHeight` alone, **no `aspect`** → the chart receives that height.
+- **`minHeight` + `aspect`, no `height` → unchanged from today**: the wrapper keeps its
+  `aspectRatio` and `minHeight` stays a floor, and the chart is **not** given a fixed height. This is
+  the four-call-site case in Risks and the one a two-way rule would have broken — **it is the test
+  that has to fail if someone later re-simplifies the resolution.**
+- `minHeight > height` → the chart receives `height` and the wrapper reserves no more than that.
+- `minHeight === height` → byte-identical to the current output.
+- `height` alone → unchanged.
+- The dev warning fires only on the disagreeing pair, and names the values. It must **not** fire on
+  `minHeight` + `aspect` without `height`, which is a legitimate combination.
+
+No full suite.
+
+---
+
+## Part B — Implementation map
+
+> **TO BE FILLED BY THE ORCHESTRATOR** on `git pull`. Must carry the preset files with `path:line`
+> anchors (`ScatterChart.jsx:173-174, :260` and the equivalents), the absolute working directory,
+> the progress contract, and the preamble. **Do not dispatch while this placeholder stands.**
+
+---
+
+## Part C — Orchestrator-only
+
+> **TO BE FILLED BY THE ORCHESTRATOR.** Review routing (`reviewer` + `ui_reviewer`, full context —
+> Tier 3 shared-core), verification, register maintenance, commit, publish check, and the execution
+> directive with its self-address guard.