@eifi1/ui-kit 0.31.0 → 0.32.0

package/dist/components/series-chart.d.ts

@@ -5,19 +5,22 @@ import { LegendEntry } from './toggle-legend.js';
 import { SeriesChartLabels } from './series-chart-labels.js';
 import { TimeTickUnit } from './series-chart-ticks.js';
 import { SeriesChartAxisBudget } from './series-chart-budget.js';
-import { b$ as ChartTooltipPlacement } from '../delete-account-setting-DCFS5Vof.js';
+import { c6 as ChartTooltipPlacement } from '../delete-account-setting-BvdQdbv3.js';
+import { ChartHeight } from './chart-height.js';
 import 'recharts';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
+import '../hooks/use-breakpoint.js';
 import './chip.js';
 import 'lucide-react';
+import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -85,6 +88,9 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import './appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -98,7 +104,7 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import './field-parts.js';
+import './focus-ring.js';
 
 interface SeriesChartSeries {
     /** The row key this line reads — and the `--color-<key>` it is painted with, so it
@@ -362,7 +368,7 @@ interface SeriesChartX {
      * instead of being centred across it; the anchor is physical, like the plot (see
      * `ChartContainer`), so it is the same in RTL. The band under the axis grows to the
      * rotated height of the longest label on show, estimated from its length (at most
-     * 120 px, past which a label is clipped). Default 0.
+     * 120 px × the text size's scale, past which a label is clipped). Default 0.
      */
     tickAngle?: number;
     /**
@@ -517,13 +523,22 @@ interface SeriesChartProps {
     /** A value in the tooltip, where a number stands on its own and needs its unit.
      *  Default: `Intl.NumberFormat` in the kit's locale. */
     valueFormat?: (value: number) => string;
-    /** Tailwind height class, or a height in pixels. Default `h-72`. The empty state
-     *  takes it too, so a chart losing its last line does not relayout the page under it.
-     *  A number is for a height the caller holds as a number — keksdose's report charts
-     *  take `height = 260` as a prop and wrap the chart in a `SizedSeriesChart` div
-     *  (reports/charts/networth-line.tsx) only to turn it into a style, since a class
-     *  cannot be built from a number Tailwind never saw. */
-    height?: string | number;
+    /**
+     * The chart's height: a CSS length, a Tailwind height class, or px. Default `h-72`
+     * (18rem). The empty state takes it too, so a chart losing its last line does not
+     * relayout the page under it.
+     *
+     * - **A CSS length** (0.32) — `"20rem"`, `"min(20rem, 60dvh)"` — set inline. The form
+     *   for a height that should grow with the text size and still stop at the screen
+     *   (docs/text-size-harmonization.md §10.10): `min(30rem, 60dvh)` is 480 px at Normal
+     *   on a desktop and never more than 60 % of a phone at Extra large, where a scaled
+     *   480 px would be 720.
+     * - **A Tailwind class** — `"h-72"`, `"h-64 md:h-80"` — as before.
+     * - **A number** is px, set inline, and does NOT follow the text size: kept for a
+     *   height the caller holds as a number (keksdose's report charts take
+     *   `height = 260` as a prop). Prefer `"16.25rem"`, or a `min()` with a viewport cap.
+     */
+    height?: ChartHeight;
     /** Bridge holes left by sources sampled on different grids. See {@link mergeSeries}. */
     connectNulls?: boolean;
     /** Shown, centred at the chart's height, instead of an empty chart. Default: the
@@ -567,17 +582,23 @@ interface SeriesChartProps {
     maxVisibleAxes?: SeriesChartAxisBudget;
     /**
      * `"auto"` (the default): a chart so narrow that its axes' bands would leave the plot
-     * under 160 px (`MIN_PLOT_WIDTH`) draws ONE axis a side — lenkbank's four-axis curve
-     * plot on a phone, whose plot was 10 px wide. Measured on the chart's own box
-     * (`ResizeObserver`), and applied on top of `maxVisibleAxes`.
+     * under 160 px (`MIN_PLOT_WIDTH`, × the text size's scale) draws ONE axis a side —
+     * lenkbank's four-axis curve plot on a phone, whose plot was 10 px wide. And a chart
+     * with an axis on EACH side that one a side still leaves too narrow (0.32: at 150 % a
+     * 390 px phone's plot kept about 80 px between its two bands) drops the right-hand,
+     * secondary axis too. Measured on the chart's own box (`ResizeObserver`), and applied
+     * on top of `maxVisibleAxes`. Either way the series on an axis it hid say the axis'
+     * unit in the tooltip and the readout ("Rack load (N)"), and in a legend built by
+     * {@link seriesLegendEntries} with `onAxisBudget`'s ids.
      *
-     * On by default because it cannot touch a layout that works: it needs a side with two
-     * or more axes AND a plot that would otherwise be under 160 px — a four-axis chart
-     * below about 440 px, a two-left-axis one below about 300. A chart with at most one
-     * axis a side (every facing pair, every single-axis chart) is never budgeted, at any
-     * width. `"off"` keeps every declared axis whatever the width: for a stack of
-     * multi-axis charts that must keep identical bands, or a caller budgeting itself.
-     * Without layout (jsdom, SSR) nothing is measured and nothing is hidden.
+     * On by default because it cannot touch a layout that works: it needs a plot that
+     * would otherwise be under 160 px — a four-axis chart below about 440 px at Normal, a
+     * two-left-axis one below about 300, a one-a-side one below about 290 — and the
+     * left-hand axis always stays. A chart with one axis (each chart of a facing pair,
+     * every single-axis chart) is never budgeted, at any width. `"off"` keeps every
+     * declared axis whatever the width: for a stack of multi-axis charts that must keep
+     * identical bands, or a caller budgeting itself. Without layout (jsdom, SSR) nothing is
+     * measured and nothing is hidden.
      */
     axisBudget?: "auto" | "off";
     /**
@@ -600,11 +621,12 @@ interface SeriesChartProps {
      *  keep the real value. Default: none — a zero draws nothing. */
     minBarLength?: number;
 }
-/** How much of an axis band the rotated title takes, in px. Reserved rather than
- *  shared with the ticks: a title merely offset inside the band prints on top of a
- *  five-figure tick, and which gives way depends on the data. */
+/** How much of an axis band the rotated title takes, in px at Normal — × the text size's
+ *  scale on the chart (§3.2), since the title is text. Reserved rather than shared with
+ *  the ticks: a title merely offset inside the band prints on top of a five-figure tick,
+ *  and which gives way depends on the data. */
 declare const AXIS_TITLE_STRIP = 16;
-/** The width the ticks of a y axis get when a caller does not say. */
+/** The width the ticks of a y axis get when a caller does not say, in px at Normal. */
 declare const AXIS_TICK_WIDTH = 48;
 /** The band a fitted axis draws, padded — and a real band for constant data, which is
  *  a zero-height domain recharts cannot scale into. `undefined` when nothing finite. */
@@ -615,9 +637,17 @@ declare function paddedDomain(values: Iterable<number>): [number, number] | unde
  * without a second padding rule. `low > high` means "nothing was seen": `undefined`.
  */
 declare function padBand(low: number, high: number): [number, number] | undefined;
-/** The whole band a y axis occupies: its ticks, and its title when it draws one. For
- *  lining a heading up over a PLOT rather than over its column. */
-declare function axisBandWidth(tickWidth: number | undefined, titled: boolean): number;
+/**
+ * The whole band a y axis occupies: its ticks, and its title when it draws one. For
+ * lining a heading up over a PLOT rather than over its column.
+ *
+ * `scale` is the text size's (`useTextSize().scale`, §3.2, §10.10): the chart draws every
+ * band — the default 48 px and a caller's own `width` alike (keksdose's
+ * `MONEY_AXIS_WIDTH`) — this many times wider, because the ticks in it are `text-xs`
+ * and grow with the text. A heading lined up over the plot has to pass the same scale.
+ * One factor for both sides of a facing pair, so the mirrored bands stay equal.
+ */
+declare function axisBandWidth(tickWidth: number | undefined, titled: boolean, scale?: number): number;
 /**
  * The colour an axis TITLE takes, or `undefined` for the neutral one.
  *

package/dist/components/series-chart.js

@@ -24,7 +24,7 @@ import {
 } from "./chart-zoom.js";
 import { STEP_DASH, strokeDash } from "./toggle-legend.js";
 import { DEFAULT_SERIES_CHART_LABELS } from "./series-chart-labels.js";
-import { categoryTicks, integerTicks, niceTicks, timeTicksWithUnit } from "./series-chart-ticks.js";
+import { categoryTicks, integerTicks, niceTicks, tickTarget, timeTicksWithUnit } from "./series-chart-ticks.js";
 import { autoAxisBudget, axisUnit, budgetedAxes } from "./series-chart-budget.js";
 import { paletteFor } from "../theme/chart-palette.js";
 import {
@@ -32,9 +32,10 @@ import {
   useKitLabels,
   useKitLocale
 } from "../i18n/kit-labels.js";
-import { useMediaQuery } from "../hooks/use-media-query.js";
+import { useBreakpoint } from "../hooks/use-breakpoint.js";
+import { useTextSize } from "../theme/text-size.js";
+import { chartHeightProps } from "./chart-height.js";
 import { cn } from "../lib/cn.js";
-const TOOLTIP_READOUT_QUERY = "(max-width: 639px)";
 function resolveTooltipPlacement(own, fromProvider, phone) {
   const wanted = own ?? fromProvider ?? "cursor";
   return wanted === "auto" ? phone ? "above" : "cursor" : wanted;
@@ -56,12 +57,14 @@ const MAX_TILTED_TICK_BAND = 120;
 const TICK_CHAR_WIDTH = 7;
 const TICK_LINE_HEIGHT = 12;
 const TICK_GAP = 8;
-function tiltedTickBand(labels, angle) {
-  if (!angle) return void 0;
+const LEVEL_TICK_BAND = 30;
+const MIN_TICK_GAP = 32;
+function tiltedTickBand(labels, angle, scale = 1) {
+  if (!angle) return scale === 1 ? void 0 : Math.ceil(LEVEL_TICK_BAND * scale);
   const rad = Math.abs(angle) * Math.PI / 180;
-  const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH;
-  const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT + TICK_GAP;
-  return Math.min(MAX_TILTED_TICK_BAND, Math.max(30, Math.ceil(band)));
+  const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH * scale;
+  const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT * scale + TICK_GAP;
+  return Math.min(Math.round(MAX_TILTED_TICK_BAND * scale), Math.max(Math.ceil(LEVEL_TICK_BAND * scale), Math.ceil(band)));
 }
 const AXIS_TICK_WIDTH = 48;
 const AUTO_PAD = 0.04;
@@ -80,8 +83,9 @@ function padBand(low, high) {
   const pad = (high - low) * AUTO_PAD || Math.abs(high) * AUTO_PAD || 1;
   return [low - pad, high + pad];
 }
-function axisBandWidth(tickWidth, titled) {
-  return (tickWidth ?? AXIS_TICK_WIDTH) + (titled ? AXIS_TITLE_STRIP : 0);
+function axisBandWidth(tickWidth, titled, scale = 1) {
+  const band = (tickWidth ?? AXIS_TICK_WIDTH) + (titled ? AXIS_TITLE_STRIP : 0);
+  return scale === 1 ? band : Math.round(band * scale);
 }
 function soleSeriesColor(axis, series) {
   const mine = series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id);
@@ -234,6 +238,7 @@ function focusedBarShape(index) {
   };
 }
 const MARKER_LABEL_SIZE = 11;
+const REFERENCE_LABEL_SIZE = 10;
 function MarkerLabel({
   viewBox,
   value
@@ -241,16 +246,17 @@ function MarkerLabel({
   const plot = usePlotArea();
   const ref = useRef(null);
   const [measured, setMeasured] = useState();
+  const fontSize = MARKER_LABEL_SIZE * useTextSize().scale;
   const text = value == null ? "" : String(value);
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el || typeof el.getComputedTextLength !== "function") return;
     const w = el.getComputedTextLength();
     if (w > 0 && w !== measured) setMeasured(w);
-  }, [text, measured]);
+  }, [text, measured, fontSize]);
   if (!viewBox || viewBox.x == null || viewBox.y == null || text === "") return null;
   const cx = viewBox.x + (viewBox.width ?? 0) / 2;
-  const half = (measured ?? text.length * MARKER_LABEL_SIZE * 0.6) / 2;
+  const half = (measured ?? text.length * fontSize * 0.6) / 2;
   const x = plot ? Math.max(plot.x + half, Math.min(cx, plot.x + plot.width - half)) : cx;
   return /* @__PURE__ */ jsx(
     "text",
@@ -259,7 +265,7 @@ function MarkerLabel({
       x,
       y: viewBox.y - 5,
       textAnchor: "middle",
-      fontSize: MARKER_LABEL_SIZE,
+      fontSize,
       fontWeight: 600,
       fill: "var(--text-primary)",
       className: "recharts-label",
@@ -359,9 +365,12 @@ function SeriesPlot({
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const number = useDefaultFormat(localeProp);
+  const { scale } = useTextSize();
+  const ticksAim = tickTarget(scale);
+  const grow = (px) => scale === 1 ? px : Math.round(px * scale);
   const [keyStop, setKeyStop] = useState(0);
   const [keyFocus, setKeyFocus] = useState(void 0);
-  const phone = useMediaQuery(TOOLTIP_READOUT_QUERY, false);
+  const phone = useBreakpoint("max-sm", false);
   const placement = resolveTooltipPlacement(tooltip?.placement, useKitChartTooltipPlacement(), phone);
   const [readout, setReadout] = useState(null);
   const [box, setBox] = useState(null);
@@ -381,7 +390,8 @@ function SeriesPlot({
     autoAxisBudget(
       afterCap,
       width,
-      (axis) => axisBandWidth(axis.width, Boolean(axis.title))
+      (axis) => axisBandWidth(axis.width, Boolean(axis.title), scale),
+      scale
     )
   );
   const budgeted = [...capped, ...auto];
@@ -392,8 +402,7 @@ function SeriesPlot({
     reported.current = budgetKey;
     onAxisBudget?.(budgetKey ? budgetKey.split("\n") : []);
   }, [budgetKey, onAxisBudget]);
-  const heightClass = typeof height === "string" ? height : void 0;
-  const heightStyle = typeof height === "number" ? { height } : void 0;
+  const { className: heightClass, style: heightStyle } = chartHeightProps(height);
   if (!model.source.length || !series.length) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -427,11 +436,12 @@ function SeriesPlot({
   const onRight = visible.some((axis) => axis.orientation === "right");
   const margin = {
     // Room for a marker's label over a point at the top of the band.
-    top: markers?.some((marker) => marker.label) ? 22 : 8,
-    right: onRight ? 0 : 10,
-    left: onLeft ? 0 : 10,
+    top: markers?.some((marker) => marker.label) ? grow(22) : 8,
+    // The first and last x tick's overhang: text, so it grows with it.
+    right: onRight ? 0 : grow(10),
+    left: onLeft ? 0 : grow(10),
     // Under the ticks, not under the whole axis: whatever comes next owns the gap.
-    bottom: x.title ? 18 : 2
+    bottom: x.title ? grow(18) : 2
   };
   const refs = references ?? [];
   const xRefs = refs.filter((ref) => ref.axis === "x");
@@ -447,12 +457,12 @@ function SeriesPlot({
       ]
     ) ?? [Infinity, -Infinity]
   ));
-  const timeUnit = model.kind === "time" ? timeTicksWithUnit(fittedX) : void 0;
+  const timeUnit = model.kind === "time" ? timeTicksWithUnit(fittedX, ticksAim) : void 0;
   const integerX = model.kind === "number" && (x.integerTicks ?? plotted.every((row2) => {
     const value = finite(row2[xKey]);
     return value === void 0 || Number.isInteger(value);
   }));
-  const xTicks = resolveTicks(x.tickValues, fittedX, xPos) ?? (model.kind === "category" ? categoryTicks(fittedX, rows.length) : model.kind === "time" ? timeUnit?.ticks : integerX ? integerTicks(fittedX) ?? niceTicks(fittedX) : niceTicks(fittedX));
+  const xTicks = resolveTicks(x.tickValues, fittedX, xPos) ?? (model.kind === "category" ? categoryTicks(fittedX, rows.length) : model.kind === "time" ? timeUnit?.ticks : integerX ? integerTicks(fittedX, ticksAim) ?? niceTicks(fittedX, ticksAim) : niceTicks(fittedX, ticksAim));
   const timeFormat = new Intl.DateTimeFormat(locale, TIME_TICK_FORMAT[timeUnit?.unit ?? "day"]);
   const dateFormat = new Intl.DateTimeFormat(locale, {
     dateStyle: "medium",
@@ -470,7 +480,7 @@ function SeriesPlot({
   const label = x.label ?? (model.kind === "time" ? (position) => dateFormat.format(position) : format);
   const xLabel = (position) => label(position, tickAt(position));
   const tickAngle = x.ticks === false ? 0 : x.tickAngle ?? 0;
-  const tickBand = tiltedTickBand((xTicks ?? []).map((tick) => xFormat(tick)), tickAngle);
+  const tickBand = tiltedTickBand((xTicks ?? []).map((tick) => xFormat(tick)), tickAngle, scale);
   const source = {
     rows: plotted,
     series,
@@ -617,7 +627,7 @@ function SeriesPlot({
                 allowDataOverflow: zoom?.xDomain !== void 0 || model.kind === "category",
                 tickLine: false,
                 axisLine: false,
-                minTickGap: 32,
+                minTickGap: grow(MIN_TICK_GAP),
                 interval: "equidistantPreserveEnd",
                 tick: x.ticks === false ? false : void 0,
                 ...tickAngle ? { angle: tickAngle, textAnchor: tickAngle < 0 ? "end" : "start" } : {},
@@ -628,8 +638,8 @@ function SeriesPlot({
                   {
                     value: x.title,
                     position: "insideBottom",
-                    offset: -12,
-                    className: "fill-[var(--text-muted)] text-[11px]"
+                    offset: -grow(12),
+                    className: "fill-[var(--text-muted)] text-caption"
                   }
                 )
               }
@@ -643,10 +653,10 @@ function SeriesPlot({
                   yAxisId: axis.id,
                   hide: axis.hide,
                   domain,
-                  ticks: resolveTicks(axis.tickValues, domain, finite) ?? (wholeOnly(axis) ? integerTicks(domain) ?? niceTicks(domain) : niceTicks(domain)),
+                  ticks: resolveTicks(axis.tickValues, domain, finite) ?? (wholeOnly(axis) ? integerTicks(domain, ticksAim) ?? niceTicks(domain, ticksAim) : niceTicks(domain, ticksAim)),
                   allowDataOverflow: zoomed,
                   orientation: axis.orientation ?? "left",
-                  width: axis.hide ? 0 : axisBandWidth(axis.width, Boolean(axis.title)),
+                  width: axis.hide ? 0 : axisBandWidth(axis.width, Boolean(axis.title), scale),
                   tickLine: false,
                   axisLine: false,
                   tickFormatter: axis.format ?? number,
@@ -658,8 +668,8 @@ function SeriesPlot({
                       angle: axis.orientation === "right" ? 90 : -90,
                       position: axis.orientation === "right" ? "insideRight" : "insideLeft",
                       style: { textAnchor: "middle", fill: soleSeriesColor(axis, series) },
-                      offset: AXIS_TITLE_OFFSET,
-                      className: "fill-[var(--text-muted)] text-[11px]"
+                      offset: grow(AXIS_TITLE_OFFSET),
+                      className: "fill-[var(--text-muted)] text-caption"
                     }
                   )
                 },
@@ -803,7 +813,7 @@ function SeriesPlot({
                   label: ref.label ? {
                     value: ref.label,
                     position: "insideTopLeft",
-                    fontSize: 10,
+                    fontSize: REFERENCE_LABEL_SIZE * scale,
                     fill: color
                   } : void 0
                 },