@eifi1/ui-kit 0.33.1 → 0.35.0

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

@@ -0,0 +1,120 @@
+import type { TimeTickUnit } from "./series-chart-ticks.js";
+import type { SeriesChartAxis, SeriesChartRow, SeriesChartSeries, SeriesChartTickValues, SeriesChartX, SeriesChartXValue } from "./series-chart.js";
+/** 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. */
+export declare const AXIS_TITLE_STRIP = 16;
+/** Where inside its strip the rotated title sits. */
+export declare const AXIS_TITLE_OFFSET = 10;
+/** The least room recharts' x ticks keep between labels, in px at Normal. */
+export declare const MIN_TICK_GAP = 32;
+/**
+ * The height the x axis reserves for its ticks at a text `scale`: tilted by `angle`
+ * degrees, the rotated box of the longest label, from its length; level, recharts' own
+ * 30 px grown with the labels. `undefined` for level ticks at Normal, where recharts'
+ * default is exactly that.
+ */
+export declare function tiltedTickBand(labels: readonly string[], angle: number, scale?: number): number | undefined;
+/** The width the ticks of a y axis get when a caller does not say, in px at Normal. */
+export 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. */
+export declare function paddedDomain(values: Iterable<number>): [number, number] | undefined;
+/**
+ * {@link paddedDomain} for a caller that has already walked its own data — so a row
+ * of charts can share one scale without building an array to find two numbers in, and
+ * without a second padding rule. `low > high` means "nothing was seen": `undefined`.
+ */
+export 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.
+ *
+ * `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.
+ */
+export declare function axisBandWidth(tickWidth: number | undefined, titled: boolean, scale?: number): number;
+/**
+ * The colour an axis TITLE takes, or `undefined` for the neutral one.
+ *
+ * An axis measuring exactly one line is that line's, and saying so in the title lets a
+ * reader find a channel's scale without counting axes. An axis measuring several is
+ * nobody's — a title in the first one's colour would be claiming it. Counted off the
+ * series, so toggling a second line onto an axis gives the colour up in the same render.
+ */
+export declare function soleSeriesColor(axis: Pick<SeriesChartAxis, "id" | "color">, series: readonly Pick<SeriesChartSeries, "axis">[]): string | undefined;
+/** The single-axis case, which is most charts. `width` is what the TICKS need;
+ *  `orientation` is which side they stand on. */
+export declare function oneAxis(format: ((value: number) => string) | undefined, title: string, width?: number, orientation?: "left" | "right"): SeriesChartAxis[];
+/** One source's samples: an abscissa and the channels measured against it. */
+export interface SeriesSource {
+    x: number[];
+    channels: Record<string, number[]>;
+}
+/**
+ * Merge sources sampled on different grids into rows the chart can draw.
+ *
+ * Merged ON THE ABSCISSA VALUE ITSELF, never interpolated onto a common grid: a line
+ * through invented points looks exactly like one through measured ones. Where a source
+ * has no sample the key is absent, and `connectNulls` bridges the hole with the same
+ * straight segment an interpolation would have drawn — without claiming a measurement.
+ */
+export declare function mergeSeries(sources: SeriesSource[]): Record<string, number>[];
+/**
+ * A series key built out of parts — as a CSS identifier.
+ *
+ * The chart shell paints each series through `--color-<key>`, and skips (with a
+ * console warning) any key that is not `[A-Za-z_][A-Za-z0-9_-]*`. A line whose colour
+ * was skipped has no stroke at all: an axis, a grid and nothing between them. So a key
+ * assembled out of DATA — an id, an enum, a side — goes through here: every other
+ * character becomes `_`, the parts are joined with `_`, and a key that would start with
+ * a digit or a hyphen gets a leading `_`.
+ */
+export declare function seriesKey(...parts: (string | number)[]): string;
+/**
+ * The band an axis carrying bars or areas draws: the data's extent with ZERO in it,
+ * padded only on the sides that are not zero — bars standing on a frame's bottom edge,
+ * not floating four per cent above it on a band of air nobody asked for.
+ * `undefined` when there is nothing to fit.
+ */
+export declare function anchoredBand(extent: readonly [number, number] | undefined): [number, number] | undefined;
+/**
+ * Series with their colours settled BEFORE any are switched off.
+ *
+ * A series with no `color` takes `paletteFor(its position)` — and a legend toggle that
+ * hands the chart a shorter list moves every later series one position up, repainting
+ * it in its neighbour's colour on each click. Resolving the colours on the full list
+ * and filtering after keeps each series in the colour its legend entry shows.
+ */
+export declare function visibleSeries(series: readonly SeriesChartSeries[], hidden: ReadonlySet<string>): SeriesChartSeries[];
+/** A finite number, or `undefined` — the only thing a row cell counts as a sample. */
+export declare const finite: (value: unknown) => number | undefined;
+/**
+ * The abscissa, reduced to a number line — which is all the plot, the ticks and the
+ * zoom ever deal in. A number stays itself; a category becomes its slot index; a time
+ * its epoch ms. Everything the caller sees (ticks, tooltip, hits) is turned back.
+ */
+export interface XModel {
+    kind: "number" | "category" | "time";
+    /** The caller's key, still holding their value. */
+    sourceKey: string;
+    /** The key the plot reads. The same as `sourceKey` on a number line. */
+    plotKey: string;
+    /** The rows as plotted. The caller's own on a number line. */
+    rows: readonly SeriesChartRow[];
+    /** The caller's rows, which dots and hits hand back. */
+    source: readonly SeriesChartRow[];
+    position: (value: unknown) => number | undefined;
+    valueAt: (position: number) => SeriesChartXValue;
+}
+export declare function xModel(rows: readonly SeriesChartRow[], x: SeriesChartX): XModel;
+/** Caller ticks, as positions inside the domain on show. */
+export declare function resolveTicks<T>(values: SeriesChartTickValues<T> | undefined, domain: [number, number] | undefined, position: (value: T) => number | undefined): number[] | undefined;
+/** A low/high pair widened by some values, or `undefined` if there is still none. */
+export declare function extend(span: readonly [number, number] | undefined, values: readonly (number | undefined)[]): [number, number] | undefined;
+/** How a time tick is written, by what one step of the ticks is. */
+export declare const TIME_TICK_FORMAT: Record<TimeTickUnit, Intl.DateTimeFormatOptions>;

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

@@ -0,0 +1,164 @@
+"use client";
+import { DEFAULT_Y_AXIS } from "./chart-zoom-core.js";
+import { paletteFor } from "../theme/chart-palette.js";
+const AXIS_TITLE_STRIP = 16;
+const AXIS_TITLE_OFFSET = 10;
+const MAX_TILTED_TICK_BAND = 120;
+const TICK_CHAR_WIDTH = 7;
+const TICK_LINE_HEIGHT = 12;
+const TICK_GAP = 8;
+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 * 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;
+function paddedDomain(values) {
+  let low = Infinity;
+  let high = -Infinity;
+  for (const value of values) {
+    if (!Number.isFinite(value)) continue;
+    if (value < low) low = value;
+    if (value > high) high = value;
+  }
+  return padBand(low, high);
+}
+function padBand(low, high) {
+  if (!(low <= high)) return void 0;
+  const pad = (high - low) * AUTO_PAD || Math.abs(high) * AUTO_PAD || 1;
+  return [low - pad, high + pad];
+}
+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);
+  return mine.length === 1 ? axis.color : void 0;
+}
+function oneAxis(format, title, width, orientation) {
+  return [{ id: DEFAULT_Y_AXIS, format, title, width, orientation }];
+}
+function mergeSeries(sources) {
+  const byAbscissa = /* @__PURE__ */ new Map();
+  for (const source of sources) {
+    source.x.forEach((value, index) => {
+      const row = byAbscissa.get(value) ?? { x: value };
+      for (const [key, channel] of Object.entries(source.channels)) row[key] = channel[index];
+      byAbscissa.set(value, row);
+    });
+  }
+  return [...byAbscissa.values()].sort((a, b) => a.x - b.x);
+}
+function seriesKey(...parts) {
+  const key = parts.map((part) => String(part).replace(/[^A-Za-z0-9_-]/g, "_")).join("_");
+  return /^[A-Za-z_]/.test(key) ? key : `_${key}`;
+}
+function anchoredBand(extent) {
+  if (!extent) return void 0;
+  const low = Math.min(0, extent[0]);
+  const high = Math.max(0, extent[1]);
+  const pad = (high - low) * AUTO_PAD || 1;
+  return [low < 0 ? low - pad : 0, high > 0 ? high + pad : 0];
+}
+function visibleSeries(series, hidden) {
+  return series.map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) })).filter((entry) => !hidden.has(entry.key));
+}
+const PLOTTED_X = "__seriesChartX";
+const finite = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
+function toTime(value) {
+  if (value instanceof Date) return finite(value.getTime());
+  if (typeof value === "number") return finite(value);
+  if (typeof value !== "string") return void 0;
+  const day = /^(\d{4})-(\d{2})(?:-(\d{2}))?$/.exec(value);
+  if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3] ?? 1)).getTime();
+  return finite(Date.parse(value));
+}
+const categoryId = (value) => value instanceof Date ? `d:${value.getTime()}` : `${typeof value}:${String(value)}`;
+function xModel(rows, x) {
+  const sourceKey = x.key ?? "x";
+  if (x.type === "category") {
+    const slots = /* @__PURE__ */ new Map();
+    rows.forEach((row, index) => {
+      const id = categoryId(row[sourceKey]);
+      if (!slots.has(id)) slots.set(id, index);
+    });
+    return {
+      kind: "category",
+      sourceKey,
+      plotKey: PLOTTED_X,
+      rows: rows.map((row, index) => ({ ...row, [PLOTTED_X]: index })),
+      source: rows,
+      position: (value) => slots.get(categoryId(value)),
+      valueAt: (position) => rows[Math.round(position)]?.[sourceKey]
+    };
+  }
+  if (x.type === "time") {
+    return {
+      kind: "time",
+      sourceKey,
+      plotKey: PLOTTED_X,
+      rows: rows.map((row) => ({ ...row, [PLOTTED_X]: toTime(row[sourceKey]) })),
+      source: rows,
+      position: toTime,
+      valueAt: (position) => new Date(position)
+    };
+  }
+  return {
+    kind: "number",
+    sourceKey,
+    plotKey: sourceKey,
+    rows,
+    source: rows,
+    position: finite,
+    valueAt: (position) => position
+  };
+}
+function resolveTicks(values, domain, position) {
+  if (!values || !domain) return void 0;
+  const list = typeof values === "function" ? values(domain) : values;
+  if (!list) return void 0;
+  const slack = (domain[1] - domain[0]) * 1e-9;
+  return list.map(position).filter((at) => at !== void 0 && at >= domain[0] - slack && at <= domain[1] + slack);
+}
+function extend(span, values) {
+  let out = span ? [span[0], span[1]] : void 0;
+  for (const value of values) {
+    if (value === void 0 || !Number.isFinite(value)) continue;
+    out = out ? [Math.min(out[0], value), Math.max(out[1], value)] : [value, value];
+  }
+  return out;
+}
+const TIME_TICK_FORMAT = {
+  hour: { hour: "2-digit", minute: "2-digit" },
+  day: { day: "numeric", month: "short" },
+  month: { month: "short", year: "2-digit" },
+  year: { year: "numeric" }
+};
+export {
+  AXIS_TICK_WIDTH,
+  AXIS_TITLE_OFFSET,
+  AXIS_TITLE_STRIP,
+  MIN_TICK_GAP,
+  TIME_TICK_FORMAT,
+  anchoredBand,
+  axisBandWidth,
+  extend,
+  finite,
+  mergeSeries,
+  oneAxis,
+  padBand,
+  paddedDomain,
+  resolveTicks,
+  seriesKey,
+  soleSeriesColor,
+  tiltedTickBand,
+  visibleSeries,
+  xModel
+};
+//# sourceMappingURL=series-chart-axes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/series-chart-axes.ts"],"sourcesContent":["// The series chart's pure half: the axis bands, the padded and anchored domains, the\n// series keys and colours, and the abscissa reduced to a number line. No React, no\n// recharts and no JSX here (chart-zoom-core lends the one name `DEFAULT_Y_AXIS`) —\n// arithmetic over rows and axes, which is why apps import some of it in\n// files that draw no chart (Kurvenschmiede's curve-chart-model.ts builds its series\n// keys with `seriesKey`).\n//\n// Moved out of series-chart.tsx as it was (MOD-9, refactor audit 2026-10). The public\n// names are still exported from series-chart.tsx, so `/chart` and the barrel are\n// unchanged; this module is not an entry of its own. The names below that series-chart\n// does not re-export (the tick-band constants, `xModel`, `finite`, …) stay internal.\nimport { DEFAULT_Y_AXIS } from \"./chart-zoom-core\";\nimport type { TimeTickUnit } from \"./series-chart-ticks\";\nimport { paletteFor } from \"../theme/chart-palette\";\nimport type {\n  SeriesChartAxis,\n  SeriesChartRow,\n  SeriesChartSeries,\n  SeriesChartTickValues,\n  SeriesChartX,\n  SeriesChartXValue,\n} from \"./series-chart\";\n\n/** How much of an axis band the rotated title takes, in px at Normal — × the text size's\n *  scale on the chart (§3.2), since the title is text. Reserved rather than shared with\n *  the ticks: a title merely offset inside the band prints on top of a five-figure tick,\n *  and which gives way depends on the data. */\nexport const AXIS_TITLE_STRIP = 16;\n\n/** Where inside its strip the rotated title sits. */\nexport const AXIS_TITLE_OFFSET = 10;\n\n/** The tallest band tilted x ticks reserve, in px at Normal (× the scale). A category\n *  name longer than this at its angle is clipped rather than squeezing the plot down to\n *  a strip. */\nconst MAX_TILTED_TICK_BAND = 120;\n\n/** What one character of a tick label is taken to be, in px at Normal, for the tilted\n *  band — the shell's `text-xs`. An estimate: the SVG is not laid out yet when the band\n *  is decided. Both grow with the text size, as `text-xs` does (§3.2). */\nconst TICK_CHAR_WIDTH = 7;\nconst TICK_LINE_HEIGHT = 12;\n/** recharts' gap between the axis line and a bottom tick's text — px, at every size:\n *  recharts draws it, not the type. */\nconst TICK_GAP = 8;\n/** recharts' own band under level x ticks. */\nconst LEVEL_TICK_BAND = 30;\n/** The least room recharts' x ticks keep between labels, in px at Normal. */\nexport const MIN_TICK_GAP = 32;\n\n/**\n * The height the x axis reserves for its ticks at a text `scale`: tilted by `angle`\n * degrees, the rotated box of the longest label, from its length; level, recharts' own\n * 30 px grown with the labels. `undefined` for level ticks at Normal, where recharts'\n * default is exactly that.\n */\nexport function tiltedTickBand(labels: readonly string[], angle: number, scale = 1): number | undefined {\n  if (!angle) return scale === 1 ? undefined : Math.ceil(LEVEL_TICK_BAND * scale);\n  const rad = (Math.abs(angle) * Math.PI) / 180;\n  const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH * scale;\n  const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT * scale + TICK_GAP;\n  return Math.min(Math.round(MAX_TILTED_TICK_BAND * scale), Math.max(Math.ceil(LEVEL_TICK_BAND * scale), Math.ceil(band)));\n}\n\n/** The width the ticks of a y axis get when a caller does not say, in px at Normal. */\nexport const AXIS_TICK_WIDTH = 48;\n\n/**\n * How much air a FITTED axis leaves between the data and its frame, as a fraction of\n * the range. Recharts fits `[dataMin, dataMax]`, which draws a peak half a stroke\n * outside the plot and a curve running to its limit indistinguishable from the frame.\n */\nconst AUTO_PAD = 0.04;\n\n/** The band a fitted axis draws, padded — and a real band for constant data, which is\n *  a zero-height domain recharts cannot scale into. `undefined` when nothing finite. */\nexport function paddedDomain(values: Iterable<number>): [number, number] | undefined {\n  let low = Infinity;\n  let high = -Infinity;\n  for (const value of values) {\n    if (!Number.isFinite(value)) continue;\n    if (value < low) low = value;\n    if (value > high) high = value;\n  }\n  return padBand(low, high);\n}\n\n/**\n * {@link paddedDomain} for a caller that has already walked its own data — so a row\n * of charts can share one scale without building an array to find two numbers in, and\n * without a second padding rule. `low > high` means \"nothing was seen\": `undefined`.\n */\nexport function padBand(low: number, high: number): [number, number] | undefined {\n  if (!(low <= high)) return undefined;\n  const pad = (high - low) * AUTO_PAD || Math.abs(high) * AUTO_PAD || 1;\n  return [low - pad, high + pad];\n}\n\n/**\n * The whole band a y axis occupies: its ticks, and its title when it draws one. For\n * lining a heading up over a PLOT rather than over its column.\n *\n * `scale` is the text size's (`useTextSize().scale`, §3.2, §10.10): the chart draws every\n * band — the default 48 px and a caller's own `width` alike (keksdose's\n * `MONEY_AXIS_WIDTH`) — this many times wider, because the ticks in it are `text-xs`\n * and grow with the text. A heading lined up over the plot has to pass the same scale.\n * One factor for both sides of a facing pair, so the mirrored bands stay equal.\n */\nexport function axisBandWidth(tickWidth: number | undefined, titled: boolean, scale = 1): number {\n  const band = (tickWidth ?? AXIS_TICK_WIDTH) + (titled ? AXIS_TITLE_STRIP : 0);\n  return scale === 1 ? band : Math.round(band * scale);\n}\n\n/**\n * The colour an axis TITLE takes, or `undefined` for the neutral one.\n *\n * An axis measuring exactly one line is that line's, and saying so in the title lets a\n * reader find a channel's scale without counting axes. An axis measuring several is\n * nobody's — a title in the first one's colour would be claiming it. Counted off the\n * series, so toggling a second line onto an axis gives the colour up in the same render.\n */\nexport function soleSeriesColor(\n  axis: Pick<SeriesChartAxis, \"id\" | \"color\">,\n  series: readonly Pick<SeriesChartSeries, \"axis\">[],\n): string | undefined {\n  const mine = series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id);\n  return mine.length === 1 ? axis.color : undefined;\n}\n\n/** The single-axis case, which is most charts. `width` is what the TICKS need;\n *  `orientation` is which side they stand on. */\nexport function oneAxis(\n  format: ((value: number) => string) | undefined,\n  title: string,\n  width?: number,\n  orientation?: \"left\" | \"right\",\n): SeriesChartAxis[] {\n  return [{ id: DEFAULT_Y_AXIS, format, title, width, orientation }];\n}\n\n/** One source's samples: an abscissa and the channels measured against it. */\nexport interface SeriesSource {\n  x: number[];\n  channels: Record<string, number[]>;\n}\n\n/**\n * Merge sources sampled on different grids into rows the chart can draw.\n *\n * Merged ON THE ABSCISSA VALUE ITSELF, never interpolated onto a common grid: a line\n * through invented points looks exactly like one through measured ones. Where a source\n * has no sample the key is absent, and `connectNulls` bridges the hole with the same\n * straight segment an interpolation would have drawn — without claiming a measurement.\n */\nexport function mergeSeries(sources: SeriesSource[]): Record<string, number>[] {\n  const byAbscissa = new Map<number, Record<string, number>>();\n  for (const source of sources) {\n    source.x.forEach((value, index) => {\n      const row = byAbscissa.get(value) ?? { x: value };\n      for (const [key, channel] of Object.entries(source.channels)) row[key] = channel[index];\n      byAbscissa.set(value, row);\n    });\n  }\n  return [...byAbscissa.values()].sort((a, b) => a.x - b.x);\n}\n\n/**\n * A series key built out of parts — as a CSS identifier.\n *\n * The chart shell paints each series through `--color-<key>`, and skips (with a\n * console warning) any key that is not `[A-Za-z_][A-Za-z0-9_-]*`. A line whose colour\n * was skipped has no stroke at all: an axis, a grid and nothing between them. So a key\n * assembled out of DATA — an id, an enum, a side — goes through here: every other\n * character becomes `_`, the parts are joined with `_`, and a key that would start with\n * a digit or a hyphen gets a leading `_`.\n */\nexport function seriesKey(...parts: (string | number)[]): string {\n  const key = parts.map((part) => String(part).replace(/[^A-Za-z0-9_-]/g, \"_\")).join(\"_\");\n  return /^[A-Za-z_]/.test(key) ? key : `_${key}`;\n}\n\n/**\n * The band an axis carrying bars or areas draws: the data's extent with ZERO in it,\n * padded only on the sides that are not zero — bars standing on a frame's bottom edge,\n * not floating four per cent above it on a band of air nobody asked for.\n * `undefined` when there is nothing to fit.\n */\nexport function anchoredBand(extent: readonly [number, number] | undefined): [number, number] | undefined {\n  if (!extent) return undefined;\n  const low = Math.min(0, extent[0]);\n  const high = Math.max(0, extent[1]);\n  const pad = (high - low) * AUTO_PAD || 1;\n  return [low < 0 ? low - pad : 0, high > 0 ? high + pad : 0];\n}\n\n/**\n * Series with their colours settled BEFORE any are switched off.\n *\n * A series with no `color` takes `paletteFor(its position)` — and a legend toggle that\n * hands the chart a shorter list moves every later series one position up, repainting\n * it in its neighbour's colour on each click. Resolving the colours on the full list\n * and filtering after keeps each series in the colour its legend entry shows.\n */\nexport function visibleSeries(\n  series: readonly SeriesChartSeries[],\n  hidden: ReadonlySet<string>,\n): SeriesChartSeries[] {\n  return series\n    .map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) }))\n    .filter((entry) => !hidden.has(entry.key));\n}\n\n/** Where a category or time chart keeps each row's plotted position. Not the caller's\n *  key: that one still holds their own value, which `format` and a hit hand back. */\nconst PLOTTED_X = \"__seriesChartX\";\n\n/** A finite number, or `undefined` — the only thing a row cell counts as a sample. */\nexport const finite = (value: unknown): number | undefined =>\n  typeof value === \"number\" && Number.isFinite(value) ? value : undefined;\n\n/** A time value as epoch ms. A date-only ISO string is LOCAL midnight (see\n *  `SeriesChartX.type`); anything unreadable is `undefined`, i.e. not plotted. */\nfunction toTime(value: unknown): number | undefined {\n  if (value instanceof Date) return finite(value.getTime());\n  if (typeof value === \"number\") return finite(value);\n  if (typeof value !== \"string\") return undefined;\n  const day = /^(\\d{4})-(\\d{2})(?:-(\\d{2}))?$/.exec(value);\n  if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3] ?? 1)).getTime();\n  return finite(Date.parse(value));\n}\n\n/** A category's identity, so a Date matches another Date of the same instant. */\nconst categoryId = (value: unknown) =>\n  value instanceof Date ? `d:${value.getTime()}` : `${typeof value}:${String(value)}`;\n\n/**\n * The abscissa, reduced to a number line — which is all the plot, the ticks and the\n * zoom ever deal in. A number stays itself; a category becomes its slot index; a time\n * its epoch ms. Everything the caller sees (ticks, tooltip, hits) is turned back.\n */\nexport interface XModel {\n  kind: \"number\" | \"category\" | \"time\";\n  /** The caller's key, still holding their value. */\n  sourceKey: string;\n  /** The key the plot reads. The same as `sourceKey` on a number line. */\n  plotKey: string;\n  /** The rows as plotted. The caller's own on a number line. */\n  rows: readonly SeriesChartRow[];\n  /** The caller's rows, which dots and hits hand back. */\n  source: readonly SeriesChartRow[];\n  position: (value: unknown) => number | undefined;\n  valueAt: (position: number) => SeriesChartXValue;\n}\n\nexport function xModel(rows: readonly SeriesChartRow[], x: SeriesChartX): XModel {\n  const sourceKey = x.key ?? \"x\";\n  if (x.type === \"category\") {\n    const slots = new Map<string, number>();\n    rows.forEach((row, index) => {\n      const id = categoryId(row[sourceKey]);\n      if (!slots.has(id)) slots.set(id, index);\n    });\n    return {\n      kind: \"category\",\n      sourceKey,\n      plotKey: PLOTTED_X,\n      rows: rows.map((row, index) => ({ ...row, [PLOTTED_X]: index })),\n      source: rows,\n      position: (value) => slots.get(categoryId(value)),\n      valueAt: (position) => rows[Math.round(position)]?.[sourceKey] as SeriesChartXValue,\n    };\n  }\n  if (x.type === \"time\") {\n    return {\n      kind: \"time\",\n      sourceKey,\n      plotKey: PLOTTED_X,\n      rows: rows.map((row) => ({ ...row, [PLOTTED_X]: toTime(row[sourceKey]) })),\n      source: rows,\n      position: toTime,\n      valueAt: (position) => new Date(position),\n    };\n  }\n  return {\n    kind: \"number\",\n    sourceKey,\n    plotKey: sourceKey,\n    rows,\n    source: rows,\n    position: finite,\n    valueAt: (position) => position,\n  };\n}\n\n/** Caller ticks, as positions inside the domain on show. */\nexport function resolveTicks<T>(\n  values: SeriesChartTickValues<T> | undefined,\n  domain: [number, number] | undefined,\n  position: (value: T) => number | undefined,\n): number[] | undefined {\n  if (!values || !domain) return undefined;\n  const list = typeof values === \"function\" ? values(domain) : values;\n  if (!list) return undefined;\n  const slack = (domain[1] - domain[0]) * 1e-9;\n  return list\n    .map(position)\n    .filter((at): at is number => at !== undefined && at >= domain[0] - slack && at <= domain[1] + slack);\n}\n\n/** A low/high pair widened by some values, or `undefined` if there is still none. */\nexport function extend(\n  span: readonly [number, number] | undefined,\n  values: readonly (number | undefined)[],\n): [number, number] | undefined {\n  let out: [number, number] | undefined = span ? [span[0], span[1]] : undefined;\n  for (const value of values) {\n    if (value === undefined || !Number.isFinite(value)) continue;\n    out = out ? [Math.min(out[0], value), Math.max(out[1], value)] : [value, value];\n  }\n  return out;\n}\n\n/** How a time tick is written, by what one step of the ticks is. */\nexport const TIME_TICK_FORMAT: Record<TimeTickUnit, Intl.DateTimeFormatOptions> = {\n  hour: { hour: \"2-digit\", minute: \"2-digit\" },\n  day: { day: \"numeric\", month: \"short\" },\n  month: { month: \"short\", year: \"2-digit\" },\n  year: { year: \"numeric\" },\n};\n"],"mappings":"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","names":[]}

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

@@ -3,7 +3,7 @@
  * 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 | {
+export type SeriesChartAxisBudget = number | {
     left?: number;
     right?: number;
 };
@@ -24,14 +24,14 @@ interface BudgetAxis {
  * 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;
+export declare const MIN_PLOT_WIDTH = 160;
 /** The budget the automatic rule applies: one axis a side. */
-declare const NARROW_AXIS_BUDGET: SeriesChartAxisBudget;
+export declare const NARROW_AXIS_BUDGET: SeriesChartAxisBudget;
 /**
  * The automatic rule's second step: the left axis alone — for a chart with an axis on
  * each side that even one a side leaves too little plot (0.32, see {@link autoAxisBudget}).
  */
-declare const LEFT_AXIS_BUDGET: SeriesChartAxisBudget;
+export declare const LEFT_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.
@@ -41,7 +41,7 @@ declare const LEFT_AXIS_BUDGET: SeriesChartAxisBudget;
  * 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[];
+export declare function budgetedAxes(axes: readonly BudgetAxis[], budget: SeriesChartAxisBudget | undefined): string[];
 /**
  * The automatic budget for a chart `width` px wide, in two steps — each taken only when
  * the plot would otherwise be narrower than {@link MIN_PLOT_WIDTH} × `scale`:
@@ -69,15 +69,14 @@ declare function budgetedAxes(axes: readonly BudgetAxis[], budget: SeriesChartAx
  * 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, scale?: number): SeriesChartAxisBudget | undefined;
+export declare function autoAxisBudget(axes: readonly BudgetAxis[], width: number | undefined, bandWidth: (axis: BudgetAxis) => number, scale?: 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: {
+export declare function axisUnit(axis: {
     unit?: string;
     title?: string;
 }): string | undefined;
-
-export { LEFT_AXIS_BUDGET, MIN_PLOT_WIDTH, NARROW_AXIS_BUDGET, type SeriesChartAxisBudget, autoAxisBudget, axisUnit, budgetedAxes };
+export {};

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

@@ -1,4 +1,4 @@
-interface SeriesChartLabels {
+export interface SeriesChartLabels {
     /** The button that puts a zoomed chart back to its full extent. Visible text. */
     resetZoom: string;
     /** Accessible name of the drag surface laid over the plot. It is the only place the
@@ -12,6 +12,4 @@ interface SeriesChartLabels {
      *  lays over its bars or periods — one tab stop, arrow keys between them. */
     points: string;
 }
-declare const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels;
-
-export { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels };
+export declare const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels;

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

@@ -0,0 +1,34 @@
+/** A table the rule reads: rows, and a cell by key. The chart's rows, or any others. */
+type ThinRow = Readonly<Record<string, unknown>>;
+/**
+ * The fewest rows a budget can be met with for `channels` series: the table's first and
+ * last row, each series' first and last sample, and one bucket's low and high of each.
+ * A smaller `maxRows` is raised to this — an envelope cannot be drawn with less.
+ */
+export declare function minimumRows(channels: number): number;
+/**
+ * The indices of `rows[from, to)` to draw `keys` from, in order — at most `maxRows` of
+ * them (but see {@link minimumRows}). A range no longer than `maxRows` comes back whole.
+ *
+ * Several series share one set of rows (that is what a recharts row is), so the buckets
+ * get fewer as the series get more: two rows per series per bucket, plus the first and
+ * last ones, and the total stays within the budget, which is what the budget is for.
+ * With no key to read an envelope off, each bucket keeps its first row.
+ */
+export declare function envelopeIndices(rows: readonly ThinRow[], keys: readonly string[], maxRows: number, from?: number, to?: number): number[];
+/** Whether `key` never decreases down the rows — a time axis, a sweep. Holes are skipped. */
+export declare function ascending(rows: readonly ThinRow[], key: string): boolean;
+/**
+ * The rows a chart draws under a row budget, as indices into `rows` — or `undefined` when
+ * it draws them all (no more rows than the budget, or no budget), so the caller can hand
+ * recharts its own array untouched.
+ *
+ * `xKey` is the abscissa, as plotted. Where it never decreases and the chart is zoomed to
+ * `window`, only the rows inside the window are thinned — with one more on each side, so
+ * the lines run to the plot's edges — and a zoom far enough in draws every sample there:
+ * the budget is spent on what is on show. Where the abscissa doubles back, the window
+ * does not cut the table into one stretch, so the whole table is thinned, and the
+ * abscissa is one of the enveloped keys: its turning points are part of the shape.
+ */
+export declare function thinnedRows(rows: readonly ThinRow[], xKey: string, keys: readonly string[], maxRows: number | undefined, window?: readonly [number, number]): number[] | undefined;
+export {};

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

@@ -0,0 +1,103 @@
+"use client";
+const sampled = (value) => typeof value === "number" && Number.isFinite(value);
+function minimumRows(channels) {
+  const c = Math.max(1, channels);
+  return 2 + 2 * c + 2 * c;
+}
+function envelopeIndices(rows, keys, maxRows, from = 0, to = rows.length) {
+  const length = Math.max(0, to - from);
+  const budget = Math.max(Math.floor(maxRows), minimumRows(keys.length));
+  if (length <= budget) return Array.from({ length }, (_, offset) => from + offset);
+  const keep = new Uint8Array(length);
+  keep[0] = 1;
+  keep[length - 1] = 1;
+  for (const key of keys) {
+    let first = 0;
+    while (first < length && !sampled(rows[from + first][key])) first += 1;
+    let last = length - 1;
+    while (last > first && !sampled(rows[from + last][key])) last -= 1;
+    if (first < length) {
+      keep[first] = 1;
+      keep[last] = 1;
+    }
+  }
+  const series = Math.max(1, keys.length);
+  const buckets = Math.max(1, Math.floor((budget - 2 - 2 * series) / (2 * series)));
+  for (let bucket = 0; bucket < buckets; bucket += 1) {
+    const start = Math.floor(bucket * length / buckets);
+    const end = Math.floor((bucket + 1) * length / buckets);
+    if (keys.length === 0) {
+      keep[start] = 1;
+      continue;
+    }
+    for (const key of keys) {
+      let low = -1;
+      let high = -1;
+      let lowest = Infinity;
+      let highest = -Infinity;
+      for (let offset = start; offset < end; offset += 1) {
+        const value = rows[from + offset][key];
+        if (!sampled(value)) continue;
+        if (value < lowest) {
+          lowest = value;
+          low = offset;
+        }
+        if (value > highest) {
+          highest = value;
+          high = offset;
+        }
+      }
+      if (low >= 0) keep[low] = 1;
+      if (high >= 0) keep[high] = 1;
+    }
+  }
+  const indices = [];
+  for (let offset = 0; offset < length; offset += 1) if (keep[offset]) indices.push(from + offset);
+  return indices;
+}
+function ascending(rows, key) {
+  let previous = -Infinity;
+  for (const row of rows) {
+    const value = row[key];
+    if (!sampled(value)) continue;
+    if (value < previous) return false;
+    previous = value;
+  }
+  return true;
+}
+function thinnedRows(rows, xKey, keys, maxRows, window) {
+  if (maxRows === void 0 || !(maxRows > 0) || rows.length <= maxRows) return void 0;
+  if (!ascending(rows, xKey)) {
+    const indices2 = envelopeIndices(rows, [...keys, xKey], maxRows);
+    return indices2.length === rows.length ? void 0 : indices2;
+  }
+  let from = 0;
+  let to = rows.length;
+  if (window) {
+    let first = -1;
+    let last = -1;
+    rows.forEach((row, index) => {
+      const at = row[xKey];
+      if (!sampled(at)) return;
+      if (first === -1 && at >= window[0]) first = index;
+      if (at <= window[1]) last = index;
+    });
+    if (first !== -1 && last >= first) {
+      from = Math.max(0, first - 1);
+      to = Math.min(rows.length, last + 2);
+    } else {
+      const after = first === -1 ? rows.length : first;
+      from = Math.max(0, after - 1);
+      to = Math.min(rows.length, after + 1);
+    }
+  }
+  const indices = envelopeIndices(rows, keys, maxRows, from, to);
+  return indices.length === rows.length ? void 0 : indices;
+}
+export {
+  ascending,
+  envelopeIndices,
+  minimumRows,
+  thinnedRows
+};
+//# sourceMappingURL=series-chart-thin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/series-chart-thin.ts"],"sourcesContent":["// The row budget of a series chart: which rows of a long table reach recharts, when there\n// are more than it should draw (`SeriesChartProps.maxRows`). Pure, and apart from the\n// chart, so the rule is tested on numbers, as the axis budget is (`series-chart-budget.ts`).\n//\n// Kurvenschmiede asked for it (KS U2, from its F88; round 0.34 C10). A chart cannot draw\n// two hundred thousand points — the SVG would hold more path nodes than the plot has\n// pixels — so a long table is thinned before it reaches recharts, and HOW decides what\n// the reader sees. Keeping every `ceil(n / 2000)`th sample, which the app did first,\n// ALIASES: the 160 Hz top of an acoustic sweep sampled at 1 kHz was kept at about 167 Hz\n// and drawn as a slow 6.7 Hz wave at full amplitude, a shape the data does not have,\n// drawn with complete confidence. A stride also steps over a spike one sample wide\n// whenever it falls between two kept rows — the sample a reader of a jerk channel is\n// looking for. So the envelope is the only way the chart thins; there is no stride\n// option beside it, because a stride is the one decimation that lies.\n//\n// **What is kept.** The table is cut into buckets, in order, and from each bucket the row\n// where each drawn series is lowest and the row where it is highest — so every line\n// still reaches every extreme the table reaches, in the bucket it reaches it in. A tone\n// faster than the buckets draws as the band it fills, not as a wave it is not. Each\n// series' first and last sample are kept too (a line starts where its data starts, and\n// arrives where it arrives), and so are the table's first and last row. The kept rows\n// are returned in their order, so a line is still the path in time — which matters where\n// the abscissa doubles back (a hysteresis loop drawn against position), and there the\n// abscissa is enveloped as well, so the path's turning points stay.\n//\n// Nothing is interpolated, averaged or smoothed: every point drawn is a row the caller\n// handed in.\n\n/** A sample, or a hole: anything that is not a finite number draws nothing. */\nconst sampled = (value: unknown): value is number => typeof value === \"number\" && Number.isFinite(value);\n\n/** A table the rule reads: rows, and a cell by key. The chart's rows, or any others. */\ntype ThinRow = Readonly<Record<string, unknown>>;\n\n/**\n * The fewest rows a budget can be met with for `channels` series: the table's first and\n * last row, each series' first and last sample, and one bucket's low and high of each.\n * A smaller `maxRows` is raised to this — an envelope cannot be drawn with less.\n */\nexport function minimumRows(channels: number): number {\n  const c = Math.max(1, channels);\n  return 2 + 2 * c + 2 * c;\n}\n\n/**\n * The indices of `rows[from, to)` to draw `keys` from, in order — at most `maxRows` of\n * them (but see {@link minimumRows}). A range no longer than `maxRows` comes back whole.\n *\n * Several series share one set of rows (that is what a recharts row is), so the buckets\n * get fewer as the series get more: two rows per series per bucket, plus the first and\n * last ones, and the total stays within the budget, which is what the budget is for.\n * With no key to read an envelope off, each bucket keeps its first row.\n */\nexport function envelopeIndices(\n  rows: readonly ThinRow[],\n  keys: readonly string[],\n  maxRows: number,\n  from = 0,\n  to = rows.length,\n): number[] {\n  const length = Math.max(0, to - from);\n  const budget = Math.max(Math.floor(maxRows), minimumRows(keys.length));\n  if (length <= budget) return Array.from({ length }, (_, offset) => from + offset);\n\n  const keep = new Uint8Array(length);\n  keep[0] = 1;\n  keep[length - 1] = 1;\n  for (const key of keys) {\n    // Where each line starts and stops, which for a series with holes at either end is\n    // not the table's first and last row.\n    let first = 0;\n    while (first < length && !sampled(rows[from + first][key])) first += 1;\n    let last = length - 1;\n    while (last > first && !sampled(rows[from + last][key])) last -= 1;\n    if (first < length) {\n      keep[first] = 1;\n      keep[last] = 1;\n    }\n  }\n\n  // What is left after the first and last rows, two per series per bucket.\n  const series = Math.max(1, keys.length);\n  const buckets = Math.max(1, Math.floor((budget - 2 - 2 * series) / (2 * series)));\n  for (let bucket = 0; bucket < buckets; bucket += 1) {\n    const start = Math.floor((bucket * length) / buckets);\n    const end = Math.floor(((bucket + 1) * length) / buckets);\n    if (keys.length === 0) {\n      keep[start] = 1;\n      continue;\n    }\n    for (const key of keys) {\n      let low = -1;\n      let high = -1;\n      let lowest = Infinity;\n      let highest = -Infinity;\n      for (let offset = start; offset < end; offset += 1) {\n        const value = rows[from + offset][key];\n        if (!sampled(value)) continue;\n        if (value < lowest) {\n          lowest = value;\n          low = offset;\n        }\n        if (value > highest) {\n          highest = value;\n          high = offset;\n        }\n      }\n      if (low >= 0) keep[low] = 1;\n      if (high >= 0) keep[high] = 1;\n    }\n  }\n\n  const indices: number[] = [];\n  for (let offset = 0; offset < length; offset += 1) if (keep[offset]) indices.push(from + offset);\n  return indices;\n}\n\n/** Whether `key` never decreases down the rows — a time axis, a sweep. Holes are skipped. */\nexport function ascending(rows: readonly ThinRow[], key: string): boolean {\n  let previous = -Infinity;\n  for (const row of rows) {\n    const value = row[key];\n    if (!sampled(value)) continue;\n    if (value < previous) return false;\n    previous = value;\n  }\n  return true;\n}\n\n/**\n * The rows a chart draws under a row budget, as indices into `rows` — or `undefined` when\n * it draws them all (no more rows than the budget, or no budget), so the caller can hand\n * recharts its own array untouched.\n *\n * `xKey` is the abscissa, as plotted. Where it never decreases and the chart is zoomed to\n * `window`, only the rows inside the window are thinned — with one more on each side, so\n * the lines run to the plot's edges — and a zoom far enough in draws every sample there:\n * the budget is spent on what is on show. Where the abscissa doubles back, the window\n * does not cut the table into one stretch, so the whole table is thinned, and the\n * abscissa is one of the enveloped keys: its turning points are part of the shape.\n */\nexport function thinnedRows(\n  rows: readonly ThinRow[],\n  xKey: string,\n  keys: readonly string[],\n  maxRows: number | undefined,\n  window?: readonly [number, number],\n): number[] | undefined {\n  if (maxRows === undefined || !(maxRows > 0) || rows.length <= maxRows) return undefined;\n  if (!ascending(rows, xKey)) {\n    const indices = envelopeIndices(rows, [...keys, xKey], maxRows);\n    return indices.length === rows.length ? undefined : indices;\n  }\n  let from = 0;\n  let to = rows.length;\n  if (window) {\n    // The first row at or past the window's start, less one; the last at or before its\n    // end, plus one. Holes in the abscissa are neither.\n    let first = -1;\n    let last = -1;\n    rows.forEach((row, index) => {\n      const at = row[xKey];\n      if (!sampled(at)) return;\n      if (first === -1 && at >= window[0]) first = index;\n      if (at <= window[1]) last = index;\n    });\n    if (first !== -1 && last >= first) {\n      from = Math.max(0, first - 1);\n      to = Math.min(rows.length, last + 2);\n    } else {\n      // A window between two samples: the two rows either side of it, so the line is\n      // still drawn across.\n      const after = first === -1 ? rows.length : first;\n      from = Math.max(0, after - 1);\n      to = Math.min(rows.length, after + 1);\n    }\n  }\n  const indices = envelopeIndices(rows, keys, maxRows, from, to);\n  return indices.length === rows.length ? undefined : indices;\n}\n"],"mappings":"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","names":["indices"]}

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

@@ -1,11 +1,11 @@
 /** The aim at Large and Extra large (docs/text-size-harmonization.md §4): the labels are
  *  25–50 % wider and taller, so five of them crowd an axis that holds them at Normal. */
-declare const LARGE_TEXT_TARGET_TICKS = 3;
+export declare const LARGE_TEXT_TARGET_TICKS = 3;
 /** How many ticks to aim for at a text `scale` (`useTextSize().scale`): five at Normal,
  *  three from Large up. */
-declare function tickTarget(scale?: number): number;
+export declare function tickTarget(scale?: number): number;
 /** The round step closest to `span / target`: 1, 2 or 5 times a power of ten. */
-declare function niceStep(span: number, target?: number): number;
+export declare function niceStep(span: number, target?: number): number;
 /**
  * The round ticks inside `[low, high]`, ascending — or `undefined` when there is no
  * span to divide (no domain, a zero-height one, anything non-finite), which leaves the
@@ -14,14 +14,14 @@ declare function niceStep(span: number, target?: number): number;
  * Each tick is computed as `k × step` and then rounded to the step's own decimals:
  * accumulating `+= 0.1` would print 0.30000000000000004 on the third tick.
  */
-declare function niceTicks(domain: readonly [number, number] | undefined, target?: number): number[] | undefined;
+export declare function niceTicks(domain: readonly [number, number] | undefined, target?: number): number[] | undefined;
 /**
  * {@link niceTicks} on whole numbers only: the step never drops below 1, so a short
  * index series (a domain of [-0.2, 4.2]) is ticked 0 1 2 3 4 instead of every half.
  * `undefined` when the window holds no whole number at all, so the caller can fall
  * back to the fractional ticks of a deep zoom rather than show none.
  */
-declare function integerTicks(domain: readonly [number, number] | undefined, target?: number): number[] | undefined;
+export declare function integerTicks(domain: readonly [number, number] | undefined, target?: number): number[] | undefined;
 /**
  * The slots of a CATEGORY axis that lie inside a window over their positions.
  *
@@ -30,9 +30,9 @@ declare function integerTicks(domain: readonly [number, number] | undefined, tar
  * third to ninth month. A tick belongs on every whole slot inside it, and on nothing in
  * between: there is no month 2.5. Recharts' `minTickGap` thins them where they crowd.
  */
-declare function categoryTicks(domain: readonly [number, number] | undefined, count: number): number[] | undefined;
+export declare function categoryTicks(domain: readonly [number, number] | undefined, count: number): number[] | undefined;
 /** What one tick of a time axis stands for, which is also how its label is written. */
-type TimeTickUnit = "hour" | "day" | "month" | "year";
+export type TimeTickUnit = "hour" | "day" | "month" | "year";
 /**
  * Calendar ticks inside a window of epoch milliseconds — midnights, Mondays, month and
  * quarter starts, new years, in LOCAL time — and the unit they are in, so the label can
@@ -42,11 +42,9 @@ type TimeTickUnit = "hour" | "day" | "month" | "year";
  * on 5 × 10⁹ ms, every 58 days, at whatever hour that happens to be. keksdose's price
  * history and cash buffer each thinned their own ticks by hand for exactly this reason.
  */
-declare function timeTicksWithUnit(domain: readonly [number, number] | undefined, target?: number): {
+export declare function timeTicksWithUnit(domain: readonly [number, number] | undefined, target?: number): {
     ticks: number[];
     unit: TimeTickUnit;
 } | undefined;
 /** {@link timeTicksWithUnit}, ticks only. */
-declare function timeTicks(domain: readonly [number, number] | undefined, target?: number): number[] | undefined;
-
-export { LARGE_TEXT_TARGET_TICKS, type TimeTickUnit, categoryTicks, integerTicks, niceStep, niceTicks, tickTarget, timeTicks, timeTicksWithUnit };
+export declare function timeTicks(domain: readonly [number, number] | undefined, target?: number): number[] | undefined;