@eifi1/ui-kit 0.15.0 → 0.15.1

package/dist/chart.d.ts

@@ -1,13 +1,14 @@
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartSeriesConfig, ChartTooltip, ChartTooltipContent, useChart } from './components/chart.js';
 export { CHART_COLORS, HEATMAP_HEX, HeatStops, PALETTE_HEX, lerpHex, paletteFor, textOn } from './theme/chart-palette.js';
 export { Treemap, TreemapCell, TreemapCellProps, TreemapNode, TreemapProps, fitLabel } from './components/treemap.js';
-export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, SeriesChartAxis, SeriesChartHit, SeriesChartMarker, SeriesChartPoint, SeriesChartProps, SeriesChartReference, SeriesChartRow, SeriesChartSeries, SeriesChartSpan, SeriesChartTickValues, SeriesChartTone, SeriesChartTooltip, SeriesChartType, SeriesChartX, SeriesChartXTick, SeriesChartXValue, SeriesSource, StaticSeriesChart, anchoredBand, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, seriesKey, seriesLegendEntries, soleSeriesColor, visibleSeries } from './components/series-chart.js';
+export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, SeriesChartAxis, SeriesChartHit, SeriesChartMarker, SeriesChartPoint, SeriesChartProps, SeriesChartReference, SeriesChartRow, SeriesChartSeries, SeriesChartSpan, SeriesChartTickValues, SeriesChartTone, SeriesChartTooltip, SeriesChartType, SeriesChartX, SeriesChartXTick, SeriesChartXValue, SeriesLegendAxes, SeriesSource, StaticSeriesChart, anchoredBand, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, seriesKey, seriesLegendEntries, soleSeriesColor, visibleSeries } from './components/series-chart.js';
 export { DEFAULT_Y_AXIS, NO_ZOOM, SharedXZoom, ZOOM_MIN_DRAG, ZOOM_SQUARE_ENOUGH, ZoomAxes, ZoomAxesSetting, ZoomBinding, ZoomDrag, ZoomFitSeries, ZoomFitSource, ZoomRow, ZoomSelection, ZoomState, ZoomTarget, axisExtent, defaultZoomAxes, fitXToY, fitYToX, selectionFromDrag, withChartZoom, zoomAfter, zoomAxesFor, zoomDomains } from './components/chart-zoom.js';
 export { LegendColumn, LegendEntry, LegendGroup, STEP_DASH, STROKE_PATTERNS, StaticLegend, StaticLegendProps, ToggleLegend, ToggleLegendProps, strokeDash, toggleHidden } from './components/toggle-legend.js';
 export { FACING_SIDES, FacingSide, facingAxes, facingBand, facingHeadingPad } from './components/facing-pair.js';
 export { DEFAULT_SERIES_CHART_LABELS, SeriesChartLabels } from './components/series-chart-labels.js';
 export { PieChart, PieChartProps, PieChartSlice } from './components/pie-chart.js';
 export { DEFAULT_PIE_CHART_LABELS, PieChartLabels } from './components/pie-chart-labels.js';
+export { SeriesChartAxisBudget } from './components/series-chart-budget.js';
 export { TimeTickUnit } from './components/series-chart-ticks.js';
 import 'recharts';
 import 'react';

package/dist/components/facing-pair.d.ts

@@ -5,6 +5,7 @@ import 'recharts';
 import './series-chart-labels.js';
 import './toggle-legend.js';
 import './series-chart-ticks.js';
+import './series-chart-budget.js';
 
 /** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */
 type FacingSide = "left" | "right";

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

@@ -0,0 +1,60 @@
+/**
+ * How many y axes a chart draws. A number caps the TOTAL; `{ left, right }` caps each
+ * side (a side left out is not capped). Axes over the cap are hidden in declaration
+ * order — the first of each side is the last to go, see {@link budgetedAxes}.
+ */
+type SeriesChartAxisBudget = number | {
+    left?: number;
+    right?: number;
+};
+/** The part of an axis the budget reads. */
+interface BudgetAxis {
+    id: string;
+    orientation?: "left" | "right";
+    hide?: boolean;
+    title?: string;
+    width?: number;
+}
+/**
+ * The narrowest the plot may get before the automatic budget steps in, in px.
+ *
+ * About a phone's plot with one axis a side (390 px viewport, card padding, two bands
+ * of 48 + 16), where a curve's shape still reads. It is the point below which the chart
+ * is already broken today — a plot the width of a thumb between four columns of numbers
+ * — so the rule changes nothing that was working.
+ */
+declare const MIN_PLOT_WIDTH = 160;
+/** The budget the automatic rule applies: one axis a side. */
+declare const NARROW_AXIS_BUDGET: SeriesChartAxisBudget;
+/**
+ * The ids of the VISIBLE axes a budget hides — axes already `hide: true` are neither
+ * counted nor returned. Empty for no budget.
+ *
+ * Kept, in order of priority: the first visible axis of each side (in declaration order,
+ * so the axis a caller lists first — the one the grid hangs its rules off — always
+ * stays), then the rest in declaration order, until the cap. Per side, that is simply the
+ * first `left` left-hand axes and the first `right` right-hand ones.
+ */
+declare function budgetedAxes(axes: readonly BudgetAxis[], budget: SeriesChartAxisBudget | undefined): string[];
+/**
+ * The automatic budget for a chart `width` px wide: {@link NARROW_AXIS_BUDGET} when the
+ * visible axes' bands would leave the plot under {@link MIN_PLOT_WIDTH} AND some side
+ * draws more than one axis — the only case one-a-side gives anything back. `undefined`
+ * otherwise, and for a width that is not known (no layout, no `ResizeObserver`).
+ *
+ * Decided on the CHART's width and the axes as declared, never on the plot the budget
+ * produced, so hiding an axis cannot widen the plot back over the line and bring it
+ * back: the rule has no feedback to oscillate on.
+ */
+declare function autoAxisBudget(axes: readonly BudgetAxis[], width: number | undefined, bandWidth: (axis: BudgetAxis) => number): SeriesChartAxisBudget | undefined;
+/**
+ * The unit an axis' series say when the axis is not drawn: its `unit`, or else the
+ * parenthesised tail of its title — "Load (N)" says "N", which is how the apps write
+ * every axis title. `undefined` when neither says one.
+ */
+declare function axisUnit(axis: {
+    unit?: string;
+    title?: string;
+}): string | undefined;
+
+export { MIN_PLOT_WIDTH, NARROW_AXIS_BUDGET, type SeriesChartAxisBudget, autoAxisBudget, axisUnit, budgetedAxes };

package/dist/components/series-chart-budget.js

@@ -0,0 +1,56 @@
+"use client";
+const MIN_PLOT_WIDTH = 160;
+const NARROW_AXIS_BUDGET = { left: 1, right: 1 };
+const BARE_SIDE_MARGIN = 10;
+const sideOf = (axis) => axis.orientation ?? "left";
+function budgetedAxes(axes, budget) {
+  if (budget === void 0) return [];
+  const visible = axes.filter((axis) => !axis.hide);
+  if (typeof budget === "number") {
+    const cap = Math.max(0, Math.floor(budget));
+    const firsts = /* @__PURE__ */ new Set();
+    const seen = /* @__PURE__ */ new Set();
+    for (const axis of visible) {
+      if (!seen.has(sideOf(axis))) firsts.add(axis.id);
+      seen.add(sideOf(axis));
+    }
+    const priority = [
+      ...visible.filter((axis) => firsts.has(axis.id)),
+      ...visible.filter((axis) => !firsts.has(axis.id))
+    ];
+    const kept = new Set(priority.slice(0, cap).map((axis) => axis.id));
+    return visible.filter((axis) => !kept.has(axis.id)).map((axis) => axis.id);
+  }
+  const used = { left: 0, right: 0 };
+  const out = [];
+  for (const axis of visible) {
+    const side = sideOf(axis);
+    const cap = budget[side];
+    if (cap !== void 0 && used[side] >= Math.max(0, Math.floor(cap))) out.push(axis.id);
+    else used[side] += 1;
+  }
+  return out;
+}
+function autoAxisBudget(axes, width, bandWidth) {
+  if (width === void 0 || !(width > 0)) return void 0;
+  const visible = axes.filter((axis) => !axis.hide);
+  const left = visible.filter((axis) => sideOf(axis) === "left");
+  const right = visible.filter((axis) => sideOf(axis) === "right");
+  if (left.length <= 1 && right.length <= 1) return void 0;
+  const bands = visible.reduce((sum, axis) => sum + bandWidth(axis), 0);
+  const margins = (left.length ? 0 : BARE_SIDE_MARGIN) + (right.length ? 0 : BARE_SIDE_MARGIN);
+  return width - bands - margins < MIN_PLOT_WIDTH ? NARROW_AXIS_BUDGET : void 0;
+}
+function axisUnit(axis) {
+  if (axis.unit !== void 0) return axis.unit || void 0;
+  const tail = /\(([^()]+)\)\s*$/.exec(axis.title ?? "");
+  return tail?.[1].trim() || void 0;
+}
+export {
+  MIN_PLOT_WIDTH,
+  NARROW_AXIS_BUDGET,
+  autoAxisBudget,
+  axisUnit,
+  budgetedAxes
+};
+//# sourceMappingURL=series-chart-budget.js.map

package/dist/components/series-chart-budget.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/series-chart-budget.ts"],"sourcesContent":["// The axis budget of a series chart: which of its y axes are drawn, when there are more\n// than the width can carry. Pure, and apart from the chart, so the rule is tested on\n// numbers rather than on a jsdom that has no layout to measure.\n//\n// lenkbank's curve plot declares four visible axes — velocity, position and acceleration\n// on the left, loads on the right — and every one reserves its band of ticks and title.\n// At 1280 px that is a quarter of the card; at 390 px it is all of it, and the plot the\n// axes are for is ten pixels wide. An axis over budget is drawn the way a `hide: true`\n// one always was: it still scales its lines (and the zoom still refits it), but it draws\n// no ticks, no title, and reserves no width.\n\n/**\n * How many y axes a chart draws. A number caps the TOTAL; `{ left, right }` caps each\n * side (a side left out is not capped). Axes over the cap are hidden in declaration\n * order — the first of each side is the last to go, see {@link budgetedAxes}.\n */\nexport type SeriesChartAxisBudget = number | { left?: number; right?: number };\n\n/** The part of an axis the budget reads. */\ninterface BudgetAxis {\n  id: string;\n  orientation?: \"left\" | \"right\";\n  hide?: boolean;\n  title?: string;\n  width?: number;\n}\n\n/**\n * The narrowest the plot may get before the automatic budget steps in, in px.\n *\n * About a phone's plot with one axis a side (390 px viewport, card padding, two bands\n * of 48 + 16), where a curve's shape still reads. It is the point below which the chart\n * is already broken today — a plot the width of a thumb between four columns of numbers\n * — so the rule changes nothing that was working.\n */\nexport const MIN_PLOT_WIDTH = 160;\n\n/** The budget the automatic rule applies: one axis a side. */\nexport const NARROW_AXIS_BUDGET: SeriesChartAxisBudget = { left: 1, right: 1 };\n\n/** The plot's margin on a side no axis band covers — `SeriesPlot`'s own. */\nconst BARE_SIDE_MARGIN = 10;\n\nconst sideOf = (axis: BudgetAxis) => axis.orientation ?? \"left\";\n\n/**\n * The ids of the VISIBLE axes a budget hides — axes already `hide: true` are neither\n * counted nor returned. Empty for no budget.\n *\n * Kept, in order of priority: the first visible axis of each side (in declaration order,\n * so the axis a caller lists first — the one the grid hangs its rules off — always\n * stays), then the rest in declaration order, until the cap. Per side, that is simply the\n * first `left` left-hand axes and the first `right` right-hand ones.\n */\nexport function budgetedAxes(\n  axes: readonly BudgetAxis[],\n  budget: SeriesChartAxisBudget | undefined,\n): string[] {\n  if (budget === undefined) return [];\n  const visible = axes.filter((axis) => !axis.hide);\n  if (typeof budget === \"number\") {\n    const cap = Math.max(0, Math.floor(budget));\n    const firsts = new Set<string>();\n    const seen = new Set<string>();\n    for (const axis of visible) {\n      if (!seen.has(sideOf(axis))) firsts.add(axis.id);\n      seen.add(sideOf(axis));\n    }\n    const priority = [\n      ...visible.filter((axis) => firsts.has(axis.id)),\n      ...visible.filter((axis) => !firsts.has(axis.id)),\n    ];\n    const kept = new Set(priority.slice(0, cap).map((axis) => axis.id));\n    return visible.filter((axis) => !kept.has(axis.id)).map((axis) => axis.id);\n  }\n  const used = { left: 0, right: 0 };\n  const out: string[] = [];\n  for (const axis of visible) {\n    const side = sideOf(axis);\n    const cap = budget[side];\n    if (cap !== undefined && used[side] >= Math.max(0, Math.floor(cap))) out.push(axis.id);\n    else used[side] += 1;\n  }\n  return out;\n}\n\n/**\n * The automatic budget for a chart `width` px wide: {@link NARROW_AXIS_BUDGET} when the\n * visible axes' bands would leave the plot under {@link MIN_PLOT_WIDTH} AND some side\n * draws more than one axis — the only case one-a-side gives anything back. `undefined`\n * otherwise, and for a width that is not known (no layout, no `ResizeObserver`).\n *\n * Decided on the CHART's width and the axes as declared, never on the plot the budget\n * produced, so hiding an axis cannot widen the plot back over the line and bring it\n * back: the rule has no feedback to oscillate on.\n */\nexport function autoAxisBudget(\n  axes: readonly BudgetAxis[],\n  width: number | undefined,\n  bandWidth: (axis: BudgetAxis) => number,\n): SeriesChartAxisBudget | undefined {\n  if (width === undefined || !(width > 0)) return undefined;\n  const visible = axes.filter((axis) => !axis.hide);\n  const left = visible.filter((axis) => sideOf(axis) === \"left\");\n  const right = visible.filter((axis) => sideOf(axis) === \"right\");\n  if (left.length <= 1 && right.length <= 1) return undefined;\n  const bands = visible.reduce((sum, axis) => sum + bandWidth(axis), 0);\n  const margins = (left.length ? 0 : BARE_SIDE_MARGIN) + (right.length ? 0 : BARE_SIDE_MARGIN);\n  return width - bands - margins < MIN_PLOT_WIDTH ? NARROW_AXIS_BUDGET : undefined;\n}\n\n/**\n * The unit an axis' series say when the axis is not drawn: its `unit`, or else the\n * parenthesised tail of its title — \"Load (N)\" says \"N\", which is how the apps write\n * every axis title. `undefined` when neither says one.\n */\nexport function axisUnit(axis: { unit?: string; title?: string }): string | undefined {\n  if (axis.unit !== undefined) return axis.unit || undefined;\n  const tail = /\\(([^()]+)\\)\\s*$/.exec(axis.title ?? \"\");\n  return tail?.[1].trim() || undefined;\n}\n"],"mappings":";AAmCO,MAAM,iBAAiB;AAGvB,MAAM,qBAA4C,EAAE,MAAM,GAAG,OAAO,EAAE;AAG7E,MAAM,mBAAmB;AAEzB,MAAM,SAAS,CAAC,SAAqB,KAAK,eAAe;AAWlD,SAAS,aACd,MACA,QACU;AACV,MAAI,WAAW,OAAW,QAAO,CAAC;AAClC,QAAM,UAAU,KAAK,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI;AAChD,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,MAAM,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,CAAC;AAC1C,UAAM,SAAS,oBAAI,IAAY;AAC/B,UAAM,OAAO,oBAAI,IAAY;AAC7B,eAAW,QAAQ,SAAS;AAC1B,UAAI,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,EAAG,QAAO,IAAI,KAAK,EAAE;AAC/C,WAAK,IAAI,OAAO,IAAI,CAAC;AAAA,IACvB;AACA,UAAM,WAAW;AAAA,MACf,GAAG,QAAQ,OAAO,CAAC,SAAS,OAAO,IAAI,KAAK,EAAE,CAAC;AAAA,MAC/C,GAAG,QAAQ,OAAO,CAAC,SAAS,CAAC,OAAO,IAAI,KAAK,EAAE,CAAC;AAAA,IAClD;AACA,UAAM,OAAO,IAAI,IAAI,SAAS,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC;AAClE,WAAO,QAAQ,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,KAAK,EAAE;AAAA,EAC3E;AACA,QAAM,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE;AACjC,QAAM,MAAgB,CAAC;AACvB,aAAW,QAAQ,SAAS;AAC1B,UAAM,OAAO,OAAO,IAAI;AACxB,UAAM,MAAM,OAAO,IAAI;AACvB,QAAI,QAAQ,UAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,MAAM,GAAG,CAAC,EAAG,KAAI,KAAK,KAAK,EAAE;AAAA,QAChF,MAAK,IAAI,KAAK;AAAA,EACrB;AACA,SAAO;AACT;AAYO,SAAS,eACd,MACA,OACA,WACmC;AACnC,MAAI,UAAU,UAAa,EAAE,QAAQ,GAAI,QAAO;AAChD,QAAM,UAAU,KAAK,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI;AAChD,QAAM,OAAO,QAAQ,OAAO,CAAC,SAAS,OAAO,IAAI,MAAM,MAAM;AAC7D,QAAM,QAAQ,QAAQ,OAAO,CAAC,SAAS,OAAO,IAAI,MAAM,OAAO;AAC/D,MAAI,KAAK,UAAU,KAAK,MAAM,UAAU,EAAG,QAAO;AAClD,QAAM,QAAQ,QAAQ,OAAO,CAAC,KAAK,SAAS,MAAM,UAAU,IAAI,GAAG,CAAC;AACpE,QAAM,WAAW,KAAK,SAAS,IAAI,qBAAqB,MAAM,SAAS,IAAI;AAC3E,SAAO,QAAQ,QAAQ,UAAU,iBAAiB,qBAAqB;AACzE;AAOO,SAAS,SAAS,MAA6D;AACpF,MAAI,KAAK,SAAS,OAAW,QAAO,KAAK,QAAQ;AACjD,QAAM,OAAO,mBAAmB,KAAK,KAAK,SAAS,EAAE;AACrD,SAAO,OAAO,CAAC,EAAE,KAAK,KAAK;AAC7B;","names":[]}

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

@@ -4,6 +4,7 @@ import { ZoomAxesSetting, ZoomBinding } from './chart-zoom.js';
 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 'recharts';
 
 interface SeriesChartSeries {
@@ -131,6 +132,15 @@ interface SeriesChartAxisShape {
     color?: string;
     /** What the TICKS need, in px. The title's strip is added on top. Default 48. */
     width?: number;
+    /**
+     * The unit, bare — `"mm/s"`. The title says it while the axis is drawn; when it is not
+     * (`hide`, or over the chart's axis budget — see {@link SeriesChartProps.maxVisibleAxes})
+     * the series on it say it instead, as "Velocity (mm/s)": in the tooltip of a chart
+     * whose budget hid the axis, and in the legend {@link seriesLegendEntries} builds when
+     * handed the axes. Default: the parenthesised tail of `title` ("Load (N)" → "N").
+     * `""` for a quantity with no unit whose title merely ends in brackets.
+     */
+    unit?: string;
     /**
      * Pin the scale instead of fitting it to this chart's data. For a ROW of charts
      * read against each other: auto-fitted, a 200 N loop and a 2000 N one draw the
@@ -426,6 +436,37 @@ interface SeriesChartProps {
     /** Where the tooltip may go: for a chart inside a scroll wrapper. See
      *  {@link SeriesChartTooltip}. */
     tooltip?: SeriesChartTooltip;
+    /**
+     * The most y axes the chart DRAWS: a total, or `{ left, right }` per side. Axes over it
+     * are drawn as `hide: true` ones are — they still scale their lines and the zoom still
+     * refits them, but they draw no ticks or title and reserve no width — in declaration
+     * order, so the first axis of each side is the last to go (`series-chart-budget.ts`).
+     * The series on a hidden axis say its unit instead (see {@link SeriesChartAxis.unit}).
+     * Default: no cap — only the automatic one of `axisBudget`.
+     */
+    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`.
+     *
+     * 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.
+     */
+    axisBudget?: "auto" | "off";
+    /**
+     * The ids of the axes the budget hid (not those declared `hide`), every time that set
+     * changes — for a legend that says their units: pass it to {@link seriesLegendEntries}
+     * as `budgeted`. Called after the render that hid them; empty once the chart is wide
+     * again.
+     */
+    onAxisBudget?: (hidden: readonly string[]) => void;
     /** Supplied by `withChartZoom` and by nothing else. */
     zoom?: ZoomBinding;
     /** Per-chart strings over `<UiKitProvider labels={{ seriesChart }}>`. */
@@ -510,13 +551,24 @@ declare function anchoredBand(extent: readonly [number, number] | undefined): [n
  * and filtering after keeps each series in the colour its legend entry shows.
  */
 declare function visibleSeries(series: readonly SeriesChartSeries[], hidden: ReadonlySet<string>): SeriesChartSeries[];
+/** Where a legend learns which axes are not drawn — see {@link seriesLegendEntries}. */
+interface SeriesLegendAxes {
+    /** The chart's axes. A series on one that is `hide`, or `budgeted`, says its unit. */
+    axes?: readonly SeriesChartAxis[];
+    /** What the chart's `onAxisBudget` last said. */
+    budgeted?: readonly string[];
+}
 /**
  * The `ToggleLegend` entries for a chart's FULL series list — colours resolved the way
  * the chart resolves them, and a stroke mark for a line drawn in a pattern (dashed,
  * step) so the key promises the stroke the plot draws. A bar or an area is a swatch.
  * Pair with {@link visibleSeries} for the chart itself.
+ *
+ * Handed the chart's `axes` (and the `budgeted` ids its `onAxisBudget` reports), a
+ * series whose axis is not drawn says the unit that axis would have: "Velocity (mm/s)"
+ * — see {@link SeriesChartAxis.unit}. Without them, the labels are as given.
  */
-declare function seriesLegendEntries(series: readonly SeriesChartSeries[]): LegendEntry[];
+declare function seriesLegendEntries(series: readonly SeriesChartSeries[], { axes, budgeted }?: SeriesLegendAxes): LegendEntry[];
 /**
  * {@link SeriesChart} without the zoom: the same picture, no drag layer, no reset
  * button. For a thumbnail, a print view, or a chart the consumer wraps in its own
@@ -531,4 +583,4 @@ declare function StaticSeriesChart(props: SeriesChartProps): react.JSX.Element;
  */
 declare function SeriesChart(props: SeriesChartProps): react.JSX.Element;
 
-export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, type SeriesChartAxis, type SeriesChartHit, type SeriesChartMarker, type SeriesChartPoint, type SeriesChartProps, type SeriesChartReference, type SeriesChartRow, type SeriesChartSeries, type SeriesChartSpan, type SeriesChartTickValues, type SeriesChartTone, type SeriesChartTooltip, type SeriesChartType, type SeriesChartX, type SeriesChartXTick, type SeriesChartXValue, type SeriesSource, StaticSeriesChart, TimeTickUnit, anchoredBand, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, seriesKey, seriesLegendEntries, soleSeriesColor, visibleSeries };
+export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, type SeriesChartAxis, SeriesChartAxisBudget, type SeriesChartHit, type SeriesChartMarker, type SeriesChartPoint, type SeriesChartProps, type SeriesChartReference, type SeriesChartRow, type SeriesChartSeries, type SeriesChartSpan, type SeriesChartTickValues, type SeriesChartTone, type SeriesChartTooltip, type SeriesChartType, type SeriesChartX, type SeriesChartXTick, type SeriesChartXValue, type SeriesLegendAxes, type SeriesSource, StaticSeriesChart, TimeTickUnit, anchoredBand, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, seriesKey, seriesLegendEntries, soleSeriesColor, visibleSeries };

package/dist/components/series-chart.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
   Area,
   Bar,
@@ -25,6 +25,7 @@ import {
 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 { autoAxisBudget, axisUnit, budgetedAxes } from "./series-chart-budget.js";
 import { paletteFor } from "../theme/chart-palette.js";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { cn } from "../lib/cn.js";
@@ -104,14 +105,28 @@ function anchoredBand(extent) {
 function visibleSeries(series, hidden) {
   return series.map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) })).filter((entry) => !hidden.has(entry.key));
 }
-function seriesLegendEntries(series) {
+function withUnit(label, unit) {
+  if (!unit) return label;
+  if (typeof label === "string" || typeof label === "number") return `${label} (${unit})`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    " (",
+    unit,
+    ")"
+  ] });
+}
+function seriesLegendEntries(series, { axes, budgeted } = {}) {
+  const undrawn = /* @__PURE__ */ new Map();
+  for (const axis of axes ?? []) {
+    if (axis.hide || budgeted?.includes(axis.id)) undrawn.set(axis.id, axisUnit(axis));
+  }
   return series.map((entry, index) => {
     const own = entry.dash ?? (entry.dashed ? 1 : 0);
     const dash = entry.step ? STEP_DASH : own;
     const line = (entry.type ?? "line") === "line";
     return {
       key: entry.key,
-      label: entry.label,
+      label: withUnit(entry.label, undrawn.get(entry.axis ?? DEFAULT_Y_AXIS)),
       color: entry.color ?? paletteFor(index),
       ...line && dash !== 0 ? { marker: "stroke", dash } : {}
     };
@@ -323,13 +338,44 @@ function SeriesPlot({
   labels: labelsProp,
   locale: localeProp,
   className,
-  minBarLength
+  minBarLength,
+  maxVisibleAxes,
+  axisBudget = "auto",
+  onAxisBudget
 }) {
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const number = useDefaultFormat(localeProp);
   const [keyStop, setKeyStop] = useState(0);
   const [keyFocus, setKeyFocus] = useState(void 0);
+  const [box, setBox] = useState(null);
+  const [width, setWidth] = useState(void 0);
+  useLayoutEffect(() => {
+    if (!box || axisBudget === "off" || typeof ResizeObserver === "undefined") return;
+    const measure = () => setWidth(box.getBoundingClientRect().width || void 0);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, [box, axisBudget]);
+  const capped = budgetedAxes(axes, maxVisibleAxes);
+  const afterCap = capped.length ? axes.map((axis) => capped.includes(axis.id) ? { ...axis, hide: true } : axis) : axes;
+  const auto = axisBudget === "off" ? [] : budgetedAxes(
+    afterCap,
+    autoAxisBudget(
+      afterCap,
+      width,
+      (axis) => axisBandWidth(axis.width, Boolean(axis.title))
+    )
+  );
+  const budgeted = [...capped, ...auto];
+  const budgetKey = budgeted.join("\n");
+  const reported = useRef("");
+  useEffect(() => {
+    if (budgetKey === reported.current) return;
+    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;
   if (!model.source.length || !series.length) {
@@ -346,14 +392,21 @@ function SeriesPlot({
   const xKey = model.plotKey;
   const plotted = model.rows;
   const rows = model.source;
+  const drawnAxes = budgeted.length ? axes.map((axis) => budgeted.includes(axis.id) ? { ...axis, hide: true } : axis) : axes;
+  const lostUnit = new Map(
+    axes.filter((axis) => budgeted.includes(axis.id)).map((axis) => [axis.id, axisUnit(axis)])
+  );
   const config = Object.fromEntries(
     series.map((entry, index) => [
       entry.key,
-      { label: entry.label, color: entry.color ?? paletteFor(index) }
+      {
+        label: withUnit(entry.label, lostUnit.get(entry.axis ?? DEFAULT_Y_AXIS)),
+        color: entry.color ?? paletteFor(index)
+      }
     ])
   );
-  const visible = axes.filter((axis) => !axis.hide);
-  const gridAxis = (visible[0] ?? axes[0])?.id ?? DEFAULT_Y_AXIS;
+  const visible = drawnAxes.filter((axis) => !axis.hide);
+  const gridAxis = (visible[0] ?? drawnAxes[0])?.id ?? DEFAULT_Y_AXIS;
   const onLeft = visible.some((axis) => (axis.orientation ?? "left") === "left");
   const onRight = visible.some((axis) => axis.orientation === "right");
   const margin = {
@@ -511,6 +564,8 @@ function SeriesPlot({
   return /* @__PURE__ */ jsx(
     ChartContainer,
     {
+      ref: setBox,
+      "data-axis-budget": budgeted.length ? budgetKey.replace(/\n/g, " ") : void 0,
       config,
       className: cn("w-full", heightClass, className, onPointClick && "cursor-pointer"),
       style: heightStyle,
@@ -555,7 +610,7 @@ function SeriesPlot({
                 )
               }
             ),
-            axes.map((axis) => {
+            drawnAxes.map((axis) => {
               const domain = fittedY(axis);
               const zoomed = anchored(axis) ? zoom?.xDomain !== void 0 : zoom?.yDomains[axis.id] !== void 0;
               return /* @__PURE__ */ jsx(
@@ -567,7 +622,7 @@ function SeriesPlot({
                   ticks: resolveTicks(axis.tickValues, domain, finite) ?? (wholeOnly(axis) ? integerTicks(domain) ?? niceTicks(domain) : niceTicks(domain)),
                   allowDataOverflow: zoomed,
                   orientation: axis.orientation ?? "left",
-                  width: axisBandWidth(axis.width, Boolean(axis.title) && !axis.hide),
+                  width: axis.hide ? 0 : axisBandWidth(axis.width, Boolean(axis.title)),
                   tickLine: false,
                   axisLine: false,
                   tickFormatter: axis.format ?? number,
@@ -610,7 +665,7 @@ function SeriesPlot({
               const own = entry.dash ?? (entry.dashed ? 1 : 0);
               const dash = entry.step ? strokeDash(STEP_DASH) : typeof own === "string" ? own : strokeDash(own);
               const curve = entry.step ? "stepAfter" : entry.curve ?? "monotone";
-              const width = entry.strokeWidth ?? (entry.step ? STEP_WIDTH : LINE_WIDTH);
+              const width2 = entry.strokeWidth ?? (entry.step ? STEP_WIDTH : LINE_WIDTH);
               if (type === "bar") {
                 const stub = entry.minBarLength ?? minBarLength;
                 return /* @__PURE__ */ jsx(
@@ -643,7 +698,7 @@ function SeriesPlot({
                     dataKey: entry.key,
                     stackId: entry.stack,
                     stroke: color,
-                    strokeWidth: width,
+                    strokeWidth: width2,
                     strokeDasharray: dash,
                     fill: color,
                     fillOpacity: entry.fillOpacity ?? (entry.stack !== void 0 ? 0.55 : 0.2),
@@ -662,7 +717,7 @@ function SeriesPlot({
                   type: curve,
                   dataKey: entry.key,
                   stroke: color,
-                  strokeWidth: width,
+                  strokeWidth: width2,
                   strokeDasharray: dash,
                   dot: dotFor(entry),
                   ...entry.activeDot !== void 0 ? { activeDot: entry.activeDot } : {},