react-cheminfo 0.9.0 → 0.10.0

package/lib/chart/ui/TrackedLineChart.d.ts

@@ -0,0 +1,136 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ChartAxisSpec } from './ChartFrame.tsx';
+/** Whether a series is drawn as a line or as bars from the zero line. */
+export type ChartSeriesKind = 'line' | 'bar';
+/** One line or one set of bars. */
+export interface ChartSeries {
+    /** A stable id, used as the React key and named in the tracking callback. */
+    id: string;
+    /** What the legend calls it, e.g. `PC 1`. */
+    label: string;
+    /** One value per slot, in the slots' order. */
+    values: ArrayLike<number>;
+    /** Its colour, normally from `chartSeriesColor`. */
+    color: string;
+    /**
+     * Whether it is drawn as a line or as bars.
+     * @default 'line'
+     */
+    kind?: ChartSeriesKind;
+    /**
+     * Whether it is drawn at all — what a legend entry switches.
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Whether it is drawn faintly behind the rest, which is what the average
+     * sample is in every loadings panel.
+     * @default false
+     */
+    muted?: boolean;
+}
+/** Where the pointer is, and what stands under it. */
+export interface ChartTrackEvent {
+    /** Which slot, from 0. */
+    index: number;
+    /** What that slot is called. */
+    label: string;
+    /** The middle of the slot, in pixels from the wrapper's left. */
+    x: number;
+    /** The pointer's own vertical position, in pixels from the wrapper's top. */
+    y: number;
+    /** Every visible series' value there, in the order they are drawn. */
+    values: ReadonlyArray<{
+        /** The series' id. */
+        id: string;
+        /** What it is called. */
+        label: string;
+        /** Its value at this slot. */
+        value: number;
+        /** Its colour. */
+        color: string;
+    }>;
+}
+/** What {@link TrackedLineChart} needs. */
+export interface TrackedLineChartProps {
+    /** One label per slot along the horizontal axis. */
+    categories: readonly string[];
+    /** The series to draw. */
+    series: readonly ChartSeries[];
+    /** Total width, from `useContainerSize`. */
+    width: number;
+    /** Total height. */
+    height: number;
+    /**
+     * The vertical axis. Its domain is read from the visible series when it is
+     * left out, and includes zero whenever any series is drawn as bars.
+     * @default undefined
+     */
+    y?: Partial<ChartAxisSpec>;
+    /**
+     * The horizontal axis title, e.g. `Measurement` or `Wavenumber (cm⁻¹)`.
+     * @default undefined
+     */
+    xLabel?: string;
+    /**
+     * The slot the crosshair sits on, for a parent driving it from elsewhere —
+     * a hovered row of a table beside the chart. Left out, the chart keeps its
+     * own.
+     * @default undefined
+     */
+    trackedIndex?: number | null;
+    /**
+     * Called as the pointer moves across the plot, and with `null` when it
+     * leaves. It fires only when the slot under the pointer changes, but that is
+     * still every few pixels, so a caller doing real work should hold the value
+     * in a ref rather than in state.
+     * @default undefined
+     */
+    onTrack?: (event: ChartTrackEvent | null) => void;
+    /**
+     * Called when a slot is clicked or committed with Enter, for a caller that
+     * wants a measurement pinned rather than hovered.
+     * @default undefined
+     */
+    onSelect?: (index: number) => void;
+    /**
+     * What floats over the chart, normally an `OverlayBar`.
+     * @default undefined
+     */
+    overlay?: ReactNode;
+    /**
+     * What the axis writes under the slots it labels, one per slot. A number
+     * line hands in rounded values here — `879 cm⁻¹` — while `categories` goes
+     * on naming a slot in whatever the caller measured.
+     * @default undefined — the axis writes the categories themselves
+     */
+    tickLabels?: readonly string[];
+    /**
+     * The most slot labels to write. Past it every nth is written so the labels
+     * never overlap; the ticks themselves stay.
+     * @default 24
+     */
+    maxTickLabels?: number;
+    /**
+     * What a screen reader is told the chart shows.
+     * @default ''
+     */
+    label?: string;
+    /**
+     * Value of the `data-testid` attribute of the wrapper.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * A chart of one or more series over a shared list of measurements, with a
+ * crosshair that reports what stands under the pointer.
+ *
+ * The horizontal axis is a band rather than a number line, so finding the slot
+ * under the pointer is one division instead of a search, and the same
+ * component draws a spectrum as a line and a table's columns as bars.
+ * @param props - See {@link TrackedLineChartProps}.
+ * @returns The chart.
+ */
+export declare function TrackedLineChart(props: TrackedLineChartProps): ReactElement;
+//# sourceMappingURL=TrackedLineChart.d.ts.map

package/lib/chart/ui/TrackedLineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackedLineChart.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/TrackedLineChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMtD,yEAAyE;AACzE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,KAAK,CAAC;AAE7C,mCAAmC;AACnC,MAAM,WAAW,WAAW;IAC1B,6EAA6E;IAC7E,EAAE,EAAE,MAAM,CAAC;IACX,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC1B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,sDAAsD;AACtD,MAAM,WAAW,eAAe;IAC9B,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,6EAA6E;IAC7E,CAAC,EAAE,MAAM,CAAC;IACV,sEAAsE;IACtE,MAAM,EAAE,aAAa,CAAC;QACpB,sBAAsB;QACtB,EAAE,EAAE,MAAM,CAAC;QACX,yBAAyB;QACzB,KAAK,EAAE,MAAM,CAAC;QACd,8BAA8B;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACJ;AAED,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB;IACpC,oDAAoD;IACpD,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,0BAA0B;IAC1B,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,CAAC,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CA0E3E"}

package/lib/chart/ui/TrackedLineChart.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { chartAxisScale } from "../core/chartAxisScale.js";
+import { chartBand } from "../core/chartBand.js";
+import { EMPTY_EXTENT, chartPadExtent, chartValuesExtent, } from "../core/chartExtent.js";
+import { chartScale } from "../core/chartScale.js";
+import { ChartFrame } from "./ChartFrame.js";
+import { ChartSeriesMarks } from "./ChartSeriesMarks.js";
+import { ChartTrackingLayer } from "./ChartTrackingLayer.js";
+import { chartOuterRoom, chartPlotArea } from "./chartStyles.js";
+/**
+ * A chart of one or more series over a shared list of measurements, with a
+ * crosshair that reports what stands under the pointer.
+ *
+ * The horizontal axis is a band rather than a number line, so finding the slot
+ * under the pointer is one division instead of a search, and the same
+ * component draws a spectrum as a line and a table's columns as bars.
+ * @param props - See {@link TrackedLineChartProps}.
+ * @returns The chart.
+ */
+export function TrackedLineChart(props) {
+    const { categories, series, width, height, y, trackedIndex, xLabel } = props;
+    const { onTrack, onSelect, overlay, label, testId, maxTickLabels } = props;
+    const { tickLabels = categories } = props;
+    const [ownIndex, setOwnIndex] = useState(null);
+    const drawn = series
+        .filter((item) => item.visible !== false)
+        .toSorted((a, b) => Number(b.muted === true) - Number(a.muted === true));
+    const slots = Math.max(1, categories.length);
+    const domain = y?.domain ?? seriesDomain(drawn, categories.length);
+    const nicing = { count: y?.tickCount, nice: y?.nice };
+    const ticks = chartAxisScale(domain[0], domain[1], nicing);
+    const under = { domain: [0, slots], label: xLabel };
+    const margins = {
+        bottom: chartOuterRoom('bottom', under, { ...ticks, exponent: 0 }),
+        left: chartOuterRoom('left', { ...y, domain }, ticks),
+    };
+    const plot = chartPlotArea(width, height, margins, margins);
+    const band = chartBand(categories.length, plot.left, plot.right);
+    const [low, high] = ticks.domain;
+    function track(slot, event) {
+        if (trackedIndex === undefined)
+            setOwnIndex(slot);
+        onTrack?.(event);
+    }
+    return (_jsx(ChartFrame, { width: width, height: height, margins: margins, label: label, testId: testId, x: { domain: [0, slots], showTicks: false, showGrid: false, nice: false }, y: { ...y, domain }, overlay: _jsxs(_Fragment, { children: [_jsx(ChartTrackingLayer, { plot: plot, band: band, y: chartScale(low, high, plot.bottom, plot.top), categories: categories, series: drawn, index: trackedIndex === undefined ? ownIndex : trackedIndex, slotAxis: slotTicks(tickLabels, band, maxTickLabels ?? 24), title: xLabel, onTrack: track, onSelect: onSelect }), overlay] }), children: (frame) => {
+            // Only the bars share a slot; a line is drawn across the whole of it.
+            let bars = 0;
+            for (const item of drawn)
+                if (item.kind === 'bar')
+                    bars++;
+            let lane = 0;
+            return drawn.map((item) => (_jsx(ChartSeriesMarks, { item: item, band: band, y: frame.y, lane: item.kind === 'bar'
+                    ? { index: lane++, count: bars }
+                    : { index: 0, count: 1 } }, item.id)));
+        } }));
+}
+function seriesDomain(drawn, slots) {
+    let extent = EMPTY_EXTENT;
+    let grounded = false;
+    for (const item of drawn) {
+        if (item.kind === 'bar')
+            grounded = true;
+        extent = chartValuesExtent(item.values, { limit: slots, into: extent });
+    }
+    const range = chartPadExtent(extent);
+    if (!grounded)
+        return [range.min, range.max];
+    return [Math.min(range.min, 0), Math.max(range.max, 0)];
+}
+function slotTicks(categories, band, maxLabels) {
+    let longest = 1;
+    for (const text of categories)
+        longest = Math.max(longest, text.length);
+    const room = Math.max(1, band.step);
+    const wide = Math.ceil((longest * LABEL_ROOM + LABEL_GAP) / room);
+    const many = Math.ceil(categories.length / Math.max(1, maxLabels));
+    const stride = Math.max(1, wide, many);
+    const values = [];
+    const labels = [];
+    for (let index = 0; index < categories.length; index += stride) {
+        values.push(index + 0.5);
+        labels.push(categories[index] ?? '');
+    }
+    const domain = [0, Math.max(1, band.count)];
+    return { domain, values, labels, step: stride, decimals: 0, exponent: 0 };
+}
+const LABEL_ROOM = 6.5;
+const LABEL_GAP = 10;
+//# sourceMappingURL=TrackedLineChart.js.map

package/lib/chart/ui/TrackedLineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackedLineChart.js","sourceRoot":"","sources":["../../../src/chart/ui/TrackedLineChart.tsx"],"names":[],"mappings":"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"}

package/lib/chart/ui/TrackedStickChart.d.ts

@@ -0,0 +1,88 @@
+/**
+ * A peak list drawn as the sticks it is, on a real number line.
+ *
+ * `TrackedLineChart` lays every measurement in a slot of its own and joins
+ * them, which is right for a spectrum that was sampled on a grid and wrong for
+ * one that was picked off it. A peak list has gaps, and the gaps are a
+ * measurement: an empty stretch between m/z 526 and 725 drawn as wide as the
+ * step from 206 to 252 says the run is crowded where it is bare, and a line
+ * across it claims a signal at every mass in between. So the horizontal axis
+ * here is the frame's own — niced ticks over the values themselves — and a
+ * measurement is a stick standing where it was measured.
+ *
+ * A series is one `<path>` whatever its length. Ten thousand peaks are ten
+ * thousand move-and-line pairs in one `d`, which paints as one node; ten
+ * thousand elements would not survive the pointer. The same reasoning as the
+ * pair grid's dots, and the reason a peak list of any size can be drawn here.
+ *
+ * The pointer is answered from one transparent rectangle over the plot rather
+ * than from a hit area per stick, so a finger lands on the nearest peak rather
+ * than having to hit a one-pixel line. Nearest is found by bisecting the
+ * positions, which is what makes it independent of how many there are.
+ */
+import type { ReactElement, ReactNode } from 'react';
+import type { ChartAxisSpec } from './ChartFrame.tsx';
+import type { ChartTrackEvent } from './TrackedLineChart.tsx';
+import type { ChartStickSeries } from './stickChartModel.ts';
+export type { ChartStickSeries } from './stickChartModel.ts';
+/** What {@link TrackedStickChart} needs. */
+export interface TrackedStickChartProps {
+    /**
+     * Where each measurement sits, ascending, in the series' own order. It must
+     * ascend: the peak under the pointer is found by bisecting it.
+     */
+    positions: readonly number[];
+    /** One label per measurement, for the readout. */
+    categories: readonly string[];
+    /** The series to draw. */
+    series: readonly ChartStickSeries[];
+    /** Total width, from `useContainerSize`. */
+    width: number;
+    /** Total height. */
+    height: number;
+    /**
+     * The vertical axis. Its domain is read from the visible series when it is
+     * left out, and always includes zero, since a stick is read from there.
+     * @default undefined
+     */
+    y?: Partial<ChartAxisSpec>;
+    /**
+     * The horizontal axis title, e.g. `m/z`.
+     * @default undefined
+     */
+    xLabel?: string;
+    /**
+     * Which measurement the crosshair sits on. Present, the caller owns it,
+     * which is how a stack of panels shows one rule across all of them.
+     * @default undefined — the chart keeps its own
+     */
+    trackedIndex?: number | null;
+    /**
+     * Called with the measurement the pointer entered, and with `null` when it
+     * leaves.
+     * @default undefined
+     */
+    onTrack?: (event: ChartTrackEvent | null) => void;
+    /**
+     * What a screen reader is told the chart shows.
+     * @default '' — the chart is hidden from a screen reader
+     */
+    label?: string;
+    /**
+     * What floats over the chart in HTML.
+     * @default undefined
+     */
+    overlay?: ReactNode;
+    /**
+     * Value of the `data-testid` attribute of the wrapper.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * Draw a peak list, and say which peak the pointer is on.
+ * @param props - See {@link TrackedStickChartProps}.
+ * @returns The chart.
+ */
+export declare function TrackedStickChart(props: TrackedStickChartProps): ReactElement;
+//# sourceMappingURL=TrackedStickChart.d.ts.map

package/lib/chart/ui/TrackedStickChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackedStickChart.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/TrackedStickChart.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAA6B,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EAAE,aAAa,EAAoB,MAAM,kBAAkB,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAS7D,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,4CAA4C;AAC5C,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,kDAAkD;IAClD,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,0BAA0B;IAC1B,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,CAAC,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CA0F7E"}

package/lib/chart/ui/TrackedStickChart.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChartFrame } from "./ChartFrame.js";
+import { nearestPosition, seriesDomain, spanOf, stickPath, valueAt, } from "./stickChartModel.js";
+/**
+ * Draw a peak list, and say which peak the pointer is on.
+ * @param props - See {@link TrackedStickChartProps}.
+ * @returns The chart.
+ */
+export function TrackedStickChart(props) {
+    const { positions, categories, series, width, height, y, xLabel } = props;
+    const { onTrack, label, overlay, testId, trackedIndex } = props;
+    const [ownIndex, setOwnIndex] = useState(null);
+    const held = trackedIndex === undefined ? ownIndex : trackedIndex;
+    const drawn = series
+        .filter((item) => item.visible !== false)
+        .toSorted((a, b) => Number(b.muted === true) - Number(a.muted === true));
+    const across = spanOf(positions);
+    const domain = y?.domain ?? seriesDomain(drawn, positions.length);
+    function report(frame, event) {
+        const { plot, x } = frame;
+        const box = event.currentTarget.getBoundingClientRect();
+        const scaleX = box.width === 0 ? 1 : plot.width / box.width;
+        const scaleY = box.height === 0 ? 1 : plot.height / box.height;
+        const pixel = plot.left + (event.clientX - box.left) * scaleX;
+        const found = nearestPosition(positions, valueAt(x, pixel));
+        if (found === -1)
+            return;
+        if (trackedIndex === undefined)
+            setOwnIndex(found);
+        onTrack?.({
+            index: found,
+            label: categories[found] ?? '',
+            x: x.offset + positions[found] * x.factor,
+            y: plot.top + (event.clientY - box.top) * scaleY,
+            values: drawn.map((item) => ({
+                id: item.id,
+                label: item.label,
+                value: item.values[found] ?? Number.NaN,
+                color: item.color,
+            })),
+        });
+    }
+    function leave() {
+        if (trackedIndex === undefined)
+            setOwnIndex(null);
+        onTrack?.(null);
+    }
+    return (_jsx(ChartFrame, { width: width, height: height, label: label, testId: testId, overlay: overlay, x: { domain: across, label: xLabel, showGrid: false }, y: { ...y, domain }, children: (frame) => (_jsxs(_Fragment, { children: [drawn.map((item) => (_jsx("path", { "data-series": item.id, d: stickPath(item, positions, frame), fill: "none", stroke: item.color, strokeWidth: item.muted === true ? 1 : 1.5, strokeOpacity: item.muted === true ? 0.55 : 1, strokeLinecap: "butt" }, item.id))), held === null || positions[held] === undefined ? null : (_jsx("path", { "data-chart-rule": "tracked", d: `M${frame.x.offset + positions[held] * frame.x.factor} ${frame.plot.top}V${frame.plot.bottom}`, stroke: "var(--text-faint)", strokeDasharray: "3 3", shapeRendering: "crispEdges" })), _jsx("rect", { x: frame.plot.left, y: frame.plot.top, width: frame.plot.width, height: frame.plot.height, fill: "transparent", style: SURFACE_STYLE, "aria-label": xLabel, onMouseMove: (event) => {
+                        report(frame, event);
+                    }, onMouseLeave: leave })] })) }));
+}
+const SURFACE_STYLE = {
+    pointerEvents: 'auto',
+    touchAction: 'none',
+    cursor: 'crosshair',
+};
+//# sourceMappingURL=TrackedStickChart.js.map

package/lib/chart/ui/TrackedStickChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackedStickChart.js","sourceRoot":"","sources":["../../../src/chart/ui/TrackedStickChart.tsx"],"names":[],"mappings":"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"}

package/lib/chart/ui/chartStyles.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Every rule the frame and its axes are drawn with.
+ *
+ * A frame is the one part of a figure the reader is not meant to notice, so
+ * the whole domain's visual decision fits in this file: three weights of line
+ * and one colour of text. Grid rules take the faintest border token, the rule
+ * at zero takes the strong one held back, and the axis line takes it outright
+ * — a ramp the eye reads as depth rather than as three unrelated greys.
+ *
+ * The room numbers live here too. They are what makes a chart with no titles
+ * give its plot back the forty pixels it was reserving for words nobody asked
+ * for, and keeping them beside the type sizes is what keeps the two in step.
+ */
+import type { CSSProperties } from 'react';
+import type { ChartAxisScale } from '../core/chartAxisScale.ts';
+import type { ChartAxisSpec, ChartMargins, ChartPlotArea } from './ChartFrame.tsx';
+/** Room kept around the plot before either axis asks for any of its own. */
+export declare const CHART_BASE_MARGINS: {
+    readonly top: 10;
+    readonly right: 12;
+    readonly bottom: 8;
+    readonly left: 10;
+};
+/** Room a set of tick marks and their labels needs, outside the plot. */
+export declare const CHART_TICK_ROOM: {
+    readonly bottom: 22;
+    readonly left: 32;
+};
+/** Room an axis title needs, beyond whatever its ticks already took. */
+export declare const CHART_TITLE_ROOM: {
+    readonly bottom: 18;
+    readonly left: 16;
+};
+/** How far a tick mark reaches out of the plot, in pixels. */
+export declare const CHART_TICK_LENGTH = 4;
+/** Baseline of a horizontal tick label, below the bottom of the plot. */
+export declare const CHART_TICK_LABEL_OFFSET = 15;
+/** How far a vertical tick label ends before the left of the plot. */
+export declare const CHART_TICK_LABEL_INSET = 8;
+/** Baseline of an axis title, past the room its ticks took. */
+export declare const CHART_TITLE_OFFSET = 13;
+/**
+ * How much room one edge of the plot gives up.
+ *
+ * An inner cell of a pair grid keeps its grid and drops its ticks, and a
+ * figure that names its axes in a caption drops its titles; both get the
+ * pixels back rather than framing the plot with empty margin. An axis whose
+ * labels were divided by a power of ten always keeps its title room even
+ * unnamed, because without the factor written down the labels read as the
+ * wrong number entirely.
+ * @param side - Which edge, since a column of numbers is wider than a row.
+ * @param spec - How the axis on that edge was asked for.
+ * @param scale - The axis as it was niced, for the power of ten it lifted.
+ * @returns The margin, in pixels.
+ */
+export declare function chartOuterRoom(side: 'bottom' | 'left', spec: ChartAxisSpec, scale: ChartAxisScale): number;
+/**
+ * The rectangle the data is drawn in.
+ *
+ * Both sides are clamped rather than trusted. A chart in a collapsed panel is
+ * measured at nothing before it is measured properly, and a plot of minus
+ * eighty pixels would reach the DOM as an invalid `rect` and take the figure
+ * down with it.
+ * @param width - Total width of the figure, in pixels.
+ * @param height - Total height.
+ * @param margins - What the caller insists on, over the rest.
+ * @param outer - What the two written edges asked for, from
+ * {@link chartOuterRoom}.
+ * @param outer.bottom - Room the horizontal axis asked for below the plot.
+ * @param outer.left - Room the vertical axis asked for beside it.
+ * @returns The plot rectangle.
+ */
+export declare function chartPlotArea(width: number, height: number, margins: Partial<ChartMargins>, outer: {
+    bottom: number;
+    left: number;
+}): ChartPlotArea;
+/**
+ * The block a figure occupies, which the floating chrome is positioned
+ * against.
+ * @param width - Total width, in pixels.
+ * @param height - Total height.
+ * @returns The wrapper's rules.
+ */
+export declare function chartFrameStyle(width: number, height: number): CSSProperties;
+/**
+ * The drawing surface, which fills the block exactly.
+ *
+ * It paints outside its own box on purpose: an axis title sitting on the last
+ * pixel of the margin would otherwise lose its descenders to the viewport
+ * edge, and a clipped `y` is a typographic bug nobody can explain.
+ */
+export declare const CHART_SVG_STYLE: {
+    readonly display: "block";
+    readonly overflow: "visible";
+};
+/** A rule across the plot at one tick, drawn under everything. */
+export declare const CHART_GRID_STYLE: {
+    readonly stroke: "var(--border)";
+    readonly strokeWidth: 1;
+    readonly shapeRendering: "crispEdges";
+};
+/**
+ * The rule at zero, which is what separates a positive loading from a
+ * negative one at a glance and so outweighs the grid without becoming an axis.
+ */
+export declare const CHART_ZERO_RULE_STYLE: {
+    readonly stroke: "var(--border-strong)";
+    readonly strokeWidth: 1;
+    readonly strokeOpacity: 0.6;
+    readonly shapeRendering: "crispEdges";
+};
+/** The line along the edge the axis is written on. */
+export declare const CHART_AXIS_LINE_STYLE: {
+    readonly stroke: "var(--border-strong)";
+    readonly strokeWidth: 1;
+    readonly shapeRendering: "crispEdges";
+};
+/** The stub outside the plot that ties a label to its value. */
+export declare const CHART_TICK_MARK_STYLE: {
+    readonly stroke: "var(--border-strong)";
+    readonly strokeWidth: 1;
+    readonly shapeRendering: "crispEdges";
+};
+/**
+ * One tick written out. The figures are tabular so that a column of them on a
+ * vertical axis lines up on the decimal point instead of wandering.
+ */
+export declare const CHART_TICK_LABEL_STYLE: {
+    readonly fill: "var(--text-muted)";
+    readonly fontSize: 11;
+    readonly fontVariantNumeric: "tabular-nums";
+    readonly userSelect: "none";
+};
+/** What the axis measures, and any power of ten its labels were divided by. */
+export declare const CHART_AXIS_TITLE_STYLE: {
+    readonly fill: "var(--text-muted)";
+    readonly fontSize: 12;
+    readonly fontWeight: 500;
+    readonly userSelect: "none";
+};
+//# sourceMappingURL=chartStyles.d.ts.map

package/lib/chart/ui/chartStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartStyles.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/chartStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,EACV,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,kBAAkB,CAAC;AAE1B,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,yEAAyE;AACzE,eAAO,MAAM,eAAe;;;CAAoC,CAAC;AAEjE,wEAAwE;AACxE,eAAO,MAAM,gBAAgB;;;CAAoC,CAAC;AAElE,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC,yEAAyE;AACzE,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAE1C,sEAAsE;AACtE,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,+DAA+D;AAC/D,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,QAAQ,GAAG,MAAM,EACvB,IAAI,EAAE,aAAa,EACnB,KAAK,EAAE,cAAc,GACpB,MAAM,CAOR;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,EAC9B,KAAK,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACtC,aAAa,CAiBf;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,aAAa,CAM5E;AAED;;;;;;GAMG;AACH,eAAO,MAAM,eAAe;;;CAGM,CAAC;AAEnC,kEAAkE;AAClE,eAAO,MAAM,gBAAgB;;;;CAIK,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;CAKA,CAAC;AAEnC,sDAAsD;AACtD,eAAO,MAAM,qBAAqB;;;;CAIA,CAAC;AAEnC,gEAAgE;AAChE,eAAO,MAAM,qBAAqB;;;;CAIA,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;CAKD,CAAC;AAEnC,+EAA+E;AAC/E,eAAO,MAAM,sBAAsB;;;;;CAKD,CAAC"}