react-cheminfo 0.8.0 → 0.10.0

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

@@ -0,0 +1,50 @@
+import type { ReactElement } from 'react';
+import type { ChartAxisScale } from '../core/chartAxisScale.ts';
+import type { ChartScale } from '../core/chartScale.ts';
+import type { ChartPlotArea } from './ChartFrame.tsx';
+/** What {@link ChartAxis} draws. */
+export interface ChartAxisProps {
+    /** Which edge of the plot the axis is written along. */
+    orientation: 'bottom' | 'left';
+    /** The niced axis, from `chartAxisScale`. */
+    scale: ChartAxisScale;
+    /** Data to pixels along this axis's own direction. */
+    pixels: ChartScale;
+    /** The rectangle the data is drawn in. */
+    plot: ChartPlotArea;
+    /**
+     * What the axis measures, built with `chartAxisTitle`. Whatever power of ten
+     * the labels were divided by is appended here, never by the caller.
+     * @default '' — the axis carries no title
+     */
+    label?: string;
+    /**
+     * Which half is drawn. The two halves straddle the data: a frame draws the
+     * `grid` half before it and the `axis` half after, so a rule never lies over
+     * a mark and a tick is never buried under one.
+     * @default 'both'
+     */
+    layer?: 'grid' | 'axis' | 'both';
+    /**
+     * Whether the plot is ruled at every tick.
+     * @default true
+     */
+    showGrid?: boolean;
+    /**
+     * Whether the tick marks and their labels are drawn.
+     * @default true
+     */
+    showTicks?: boolean;
+}
+/**
+ * One axis of a figure: its rules, its line, its ticks and its title.
+ *
+ * A domain that straddles zero always gets a rule there, whatever the grid is
+ * doing, because it is the one line that says which side of nothing a value
+ * fell on — and it is drawn between the grid and the axis in weight so it
+ * reads as a landmark rather than as a second frame.
+ * @param props - See {@link ChartAxisProps}.
+ * @returns The axis.
+ */
+export declare function ChartAxis(props: ChartAxisProps): ReactElement;
+//# sourceMappingURL=ChartAxis.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/ChartAxis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAetD,oCAAoC;AACpC,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,WAAW,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B,6CAA6C;IAC7C,KAAK,EAAE,cAAc,CAAC;IACtB,sDAAsD;IACtD,MAAM,EAAE,UAAU,CAAC;IACnB,0CAA0C;IAC1C,IAAI,EAAE,aAAa,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CA0B7D"}

package/lib/chart/ui/ChartAxis.js

@@ -0,0 +1,89 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { chartExponentSuffix } from "../core/chartAxisScale.js";
+import { chartPixel } from "../core/chartScale.js";
+import { CHART_AXIS_LINE_STYLE, CHART_AXIS_TITLE_STYLE, CHART_GRID_STYLE, CHART_TICK_LABEL_INSET, CHART_TICK_LABEL_OFFSET, CHART_TICK_LABEL_STYLE, CHART_TICK_LENGTH, CHART_TICK_MARK_STYLE, CHART_TICK_ROOM, CHART_TITLE_OFFSET, CHART_ZERO_RULE_STYLE, } from "./chartStyles.js";
+/**
+ * One axis of a figure: its rules, its line, its ticks and its title.
+ *
+ * A domain that straddles zero always gets a rule there, whatever the grid is
+ * doing, because it is the one line that says which side of nothing a value
+ * fell on — and it is drawn between the grid and the axis in weight so it
+ * reads as a landmark rather than as a second frame.
+ * @param props - See {@link ChartAxisProps}.
+ * @returns The axis.
+ */
+export function ChartAxis(props) {
+    const { orientation, scale, pixels, plot, label = '', layer = 'both', showGrid = true, showTicks = true, } = props;
+    const horizontal = orientation === 'bottom';
+    const crossesZero = scale.domain[0] < 0 && scale.domain[1] > 0;
+    const title = `${label}${chartExponentSuffix(scale.exponent)}`;
+    return (_jsxs("g", { className: `chart-axis chart-axis-${orientation}`, children: [layer === 'axis'
+                ? null
+                : gridRules(horizontal, scale, pixels, plot, showGrid, crossesZero), layer === 'grid'
+                ? null
+                : axisMarks(horizontal, scale, pixels, plot, showTicks, title)] }));
+}
+function gridRules(horizontal, scale, pixels, plot, showGrid, crossesZero) {
+    const rules = [];
+    if (showGrid) {
+        for (const value of scale.values) {
+            // The zero rule stands in for its own grid line rather than doubling it.
+            if (crossesZero && value === 0)
+                continue;
+            rules.push(_jsx("line", { ...ruleGeometry(horizontal, chartPixel(pixels, value), plot), style: CHART_GRID_STYLE }, `grid-${value}`));
+        }
+    }
+    if (crossesZero) {
+        rules.push(_jsx("line", { "data-chart-rule": "zero", ...ruleGeometry(horizontal, chartPixel(pixels, 0), plot), style: CHART_ZERO_RULE_STYLE }, "zero"));
+    }
+    return rules;
+}
+function axisMarks(horizontal, scale, pixels, plot, showTicks, title) {
+    const marks = [
+        _jsx("line", { ...(horizontal
+                ? { x1: plot.left, x2: plot.right, y1: plot.bottom, y2: plot.bottom }
+                : { x1: plot.left, x2: plot.left, y1: plot.top, y2: plot.bottom }), style: CHART_AXIS_LINE_STYLE }, "line"),
+    ];
+    if (showTicks) {
+        for (let index = 0; index < scale.values.length; index++) {
+            const value = scale.values[index];
+            const text = scale.labels[index];
+            if (value === undefined || text === undefined)
+                continue;
+            marks.push(tickMark(horizontal, chartPixel(pixels, value), text, plot));
+        }
+    }
+    if (title !== '')
+        marks.push(axisTitle(horizontal, plot, showTicks, title));
+    return marks;
+}
+function tickMark(horizontal, at, text, plot) {
+    const mark = horizontal
+        ? { x1: at, x2: at, y1: plot.bottom, y2: plot.bottom + CHART_TICK_LENGTH }
+        : { x1: plot.left - CHART_TICK_LENGTH, x2: plot.left, y1: at, y2: at };
+    const caption = horizontal
+        ? { x: at, y: plot.bottom + CHART_TICK_LABEL_OFFSET, textAnchor: 'middle' }
+        : {
+            x: plot.left - CHART_TICK_LABEL_INSET,
+            y: at,
+            textAnchor: 'end',
+            dominantBaseline: 'middle',
+        };
+    return (_jsxs("g", { children: [_jsx("line", { ...mark, style: CHART_TICK_MARK_STYLE }), _jsx("text", { ...caption, style: CHART_TICK_LABEL_STYLE, children: text })] }, `tick-${at}`));
+}
+function axisTitle(horizontal, plot, showTicks, title) {
+    if (horizontal) {
+        const room = showTicks ? CHART_TICK_ROOM.bottom : 0;
+        return (_jsx("text", { x: (plot.left + plot.right) / 2, y: plot.bottom + room + CHART_TITLE_OFFSET, textAnchor: "middle", style: CHART_AXIS_TITLE_STYLE, children: title }, "title"));
+    }
+    const room = showTicks ? CHART_TICK_ROOM.left : 0;
+    const x = plot.left - room - CHART_TICK_LENGTH;
+    const y = (plot.top + plot.bottom) / 2;
+    return (_jsx("text", { x: x, y: y, textAnchor: "middle", transform: `rotate(-90 ${x} ${y})`, style: CHART_AXIS_TITLE_STYLE, children: title }, "title"));
+}
+function ruleGeometry(horizontal, at, plot) {
+    return horizontal
+        ? { x1: at, x2: at, y1: plot.top, y2: plot.bottom }
+        : { x1: plot.left, x2: plot.right, y1: at, y2: at };
+}
+//# sourceMappingURL=ChartAxis.js.map

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

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

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

@@ -0,0 +1,136 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ChartAxisScale } from '../core/chartAxisScale.ts';
+import type { ChartScale } from '../core/chartScale.ts';
+/** How one axis of a {@link ChartFrame} is drawn. */
+export interface ChartAxisSpec {
+    /** The data range the axis covers, before nicing. */
+    domain: readonly [number, number];
+    /**
+     * The axis title, already carrying its share — build it with
+     * `chartAxisTitle`. Any power of ten the labels were divided by is appended
+     * by the frame itself.
+     * @default undefined — the axis carries no title and its margin shrinks
+     */
+    label?: string;
+    /**
+     * Roughly how many ticks to aim for.
+     * @default 5
+     */
+    tickCount?: number;
+    /**
+     * Whether to rule the plot at every tick.
+     * @default true
+     */
+    showGrid?: boolean;
+    /**
+     * Whether the tick marks and their labels are drawn. An inner cell of a pair
+     * grid turns them off and keeps the grid.
+     * @default true
+     */
+    showTicks?: boolean;
+    /**
+     * Whether the domain is widened outward to whole tick steps.
+     * @default true
+     */
+    nice?: boolean;
+}
+/** The rectangle the data is drawn in, in SVG pixels. */
+export interface ChartPlotArea {
+    /** Left edge. */
+    left: number;
+    /** Top edge. */
+    top: number;
+    /** Right edge. */
+    right: number;
+    /** Bottom edge. */
+    bottom: number;
+    /** Width. */
+    width: number;
+    /** Height. */
+    height: number;
+}
+/** Room left around the plot, in pixels. */
+export interface ChartMargins {
+    /** Above the plot. */
+    top: number;
+    /** To the right of it. */
+    right: number;
+    /** Below it, where the horizontal axis is written. */
+    bottom: number;
+    /** To its left, where the vertical axis is written. */
+    left: number;
+}
+/** What a {@link ChartFrame} hands the function that draws inside it. */
+export interface ChartFrameRender {
+    /** The rectangle to draw in. */
+    plot: ChartPlotArea;
+    /** Data to pixels, horizontally. */
+    x: ChartScale;
+    /** Data to pixels, vertically; its `factor` is negative. */
+    y: ChartScale;
+    /** The horizontal axis as it was niced. */
+    xAxis: ChartAxisScale;
+    /** The vertical axis as it was niced. */
+    yAxis: ChartAxisScale;
+}
+/** What {@link ChartFrame} needs. */
+export interface ChartFrameProps {
+    /** Total width, in pixels, normally from `useContainerSize`. */
+    width: number;
+    /** Total height. */
+    height: number;
+    /** The horizontal axis. */
+    x: ChartAxisSpec;
+    /** The vertical axis. */
+    y: ChartAxisSpec;
+    /**
+     * What is drawn inside the plot, clipped to it: marks, outlines, a tracking
+     * rectangle, in the order they should stack.
+     */
+    children: (frame: ChartFrameRender) => ReactNode;
+    /**
+     * What floats over the chart in HTML rather than SVG — an `OverlayBar`, a
+     * legend, a readout. It is wrapped in an `OverlayLayer`, so it is not
+     * clipped, not scaled, and lets every pointer event through except on the
+     * cards themselves.
+     * @default undefined
+     */
+    overlay?: ReactNode;
+    /**
+     * Whether the figure is repainting, which the overlay reads to drop its
+     * backdrop blur for a flat fill while a lasso is being dragged.
+     * @default false
+     */
+    busy?: boolean;
+    /**
+     * What a screen reader is told the chart shows. Without it the chart is
+     * decoration and is hidden from the reader.
+     * @default '' — the chart is hidden from a screen reader
+     */
+    label?: string;
+    /**
+     * Room left around the plot, merged over the defaults — which already shrink
+     * when an axis carries no title.
+     * @default {}
+     */
+    margins?: Partial<ChartMargins>;
+    /**
+     * Value of the `data-testid` attribute of the wrapper, for the end-to-end
+     * tests.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * The frame every chart in the family is drawn in: a plot rectangle, two
+ * niced axes, a clip, and a layer of floating chrome over the top.
+ *
+ * The grid goes down before the caller's marks and the axes go over them, so
+ * a rule never crosses a point and a tick is never buried under one. The clip
+ * is keyed on a generated id: two frames on a page would otherwise share one,
+ * and the second would silently steal the first's.
+ * @param props - See {@link ChartFrameProps}.
+ * @returns The chart.
+ */
+export declare function ChartFrame(props: ChartFrameProps): ReactElement;
+//# sourceMappingURL=ChartFrame.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartFrame.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/ChartFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAWxD,qDAAqD;AACrD,MAAM,WAAW,aAAa;IAC5B,qDAAqD;IACrD,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,yDAAyD;AACzD,MAAM,WAAW,aAAa;IAC5B,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,4CAA4C;AAC5C,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,yEAAyE;AACzE,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,IAAI,EAAE,aAAa,CAAC;IACpB,oCAAoC;IACpC,CAAC,EAAE,UAAU,CAAC;IACd,4DAA4D;IAC5D,CAAC,EAAE,UAAU,CAAC;IACd,2CAA2C;IAC3C,KAAK,EAAE,cAAc,CAAC;IACtB,yCAAyC;IACzC,KAAK,EAAE,cAAc,CAAC;CACvB;AAED,qCAAqC;AACrC,MAAM,WAAW,eAAe;IAC9B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,CAAC,EAAE,aAAa,CAAC;IACjB,yBAAyB;IACzB,CAAC,EAAE,aAAa,CAAC;IACjB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAC;IACjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CA4F/D"}

package/lib/chart/ui/ChartFrame.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { OverlayLayer } from "../../overlay/ui/OverlayLayer.js";
+import { chartAxisScale } from "../core/chartAxisScale.js";
+import { chartScale } from "../core/chartScale.js";
+import { ChartAxis } from "./ChartAxis.js";
+import { CHART_SVG_STYLE, chartFrameStyle, chartOuterRoom, chartPlotArea, } from "./chartStyles.js";
+/**
+ * The frame every chart in the family is drawn in: a plot rectangle, two
+ * niced axes, a clip, and a layer of floating chrome over the top.
+ *
+ * The grid goes down before the caller's marks and the axes go over them, so
+ * a rule never crosses a point and a tick is never buried under one. The clip
+ * is keyed on a generated id: two frames on a page would otherwise share one,
+ * and the second would silently steal the first's.
+ * @param props - See {@link ChartFrameProps}.
+ * @returns The chart.
+ */
+export function ChartFrame(props) {
+    const { width, height, x, y, children, overlay, busy = false, label = '', margins = {}, testId, } = props;
+    const clipId = useId();
+    const xAxis = chartAxisScale(x.domain[0], x.domain[1], {
+        count: x.tickCount,
+        nice: x.nice,
+    });
+    const yAxis = chartAxisScale(y.domain[0], y.domain[1], {
+        count: y.tickCount,
+        nice: y.nice,
+    });
+    const plot = chartPlotArea(width, height, margins, {
+        bottom: chartOuterRoom('bottom', x, xAxis),
+        left: chartOuterRoom('left', y, yAxis),
+    });
+    const horizontal = {
+        orientation: 'bottom',
+        scale: xAxis,
+        pixels: chartScale(xAxis.domain[0], xAxis.domain[1], plot.left, plot.right),
+        plot,
+        label: x.label,
+        showGrid: x.showGrid,
+        showTicks: x.showTicks ?? true,
+    };
+    const vertical = {
+        orientation: 'left',
+        scale: yAxis,
+        pixels: chartScale(yAxis.domain[0], yAxis.domain[1], plot.bottom, plot.top),
+        plot,
+        label: y.label,
+        showGrid: y.showGrid,
+        showTicks: y.showTicks ?? true,
+    };
+    const frame = {
+        plot,
+        x: horizontal.pixels,
+        y: vertical.pixels,
+        xAxis,
+        yAxis,
+    };
+    return (_jsxs("div", { className: "chart-frame", style: chartFrameStyle(width, height), "data-testid": testId, children: [_jsxs("svg", { width: Math.max(0, width), height: Math.max(0, height), style: CHART_SVG_STYLE, role: label === '' ? undefined : 'img', "aria-label": label === '' ? undefined : label, "aria-hidden": label === '' ? true : undefined, children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: plot.left, y: plot.top, width: plot.width, height: plot.height }) }) }), _jsx(ChartAxis, { ...horizontal, layer: "grid" }), _jsx(ChartAxis, { ...vertical, layer: "grid" }), _jsx("g", { clipPath: `url(#${clipId})`, children: children(frame) }), _jsx(ChartAxis, { ...horizontal, layer: "axis" }), _jsx(ChartAxis, { ...vertical, layer: "axis" })] }), overlay === undefined ? null : (_jsx(OverlayLayer, { width: width, busy: busy, children: overlay }))] }));
+}
+//# sourceMappingURL=ChartFrame.js.map

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

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

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

@@ -0,0 +1,44 @@
+/**
+ * One series drawn over a band axis, as a line or as bars from the zero line.
+ *
+ * It is its own module because it is the one part of a band chart that a
+ * caller might reasonably want on its own — a sparkline, a preview inside a
+ * list row — and because the tracking layer beside it is about the pointer
+ * rather than about the data.
+ */
+import type { ReactElement } from 'react';
+import type { ChartBand } from '../core/chartBand.ts';
+import type { ChartScale } from '../core/chartScale.ts';
+import type { ChartSeries } from './TrackedLineChart.tsx';
+/** What {@link ChartSeriesMarks} draws. */
+export interface ChartSeriesMarksProps {
+    /** The series to draw. */
+    item: ChartSeries;
+    /** The slots it is drawn over. */
+    band: ChartBand;
+    /** Data to pixels, vertically. */
+    y: ChartScale;
+    /**
+     * Which of the bar series this one is, and how many there are, so that two
+     * of them share a slot side by side instead of one painting over the other.
+     *
+     * Lines ignore it: two lines over one slot are both readable where two bars
+     * from the same baseline are not, and narrowing a line would say nothing.
+     * @default { index: 0, count: 1 } — the series has the slot to itself
+     */
+    lane?: {
+        index: number;
+        count: number;
+    };
+}
+/**
+ * One series over the band: a line as a single path, or a bar per slot growing
+ * from the zero line in whichever direction its value points. The line is one
+ * `d` string built in an indexed loop rather than an element per point, since
+ * a spectrum is two thousand points and four panels of them as separate
+ * elements is a page that will not scroll.
+ * @param props - See {@link ChartSeriesMarksProps}.
+ * @returns Its marks.
+ */
+export declare function ChartSeriesMarks(props: ChartSeriesMarksProps): ReactElement;
+//# sourceMappingURL=ChartSeriesMarks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSeriesMarks.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/ChartSeriesMarks.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB;IACpC,0BAA0B;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,kCAAkC;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,kCAAkC;IAClC,CAAC,EAAE,UAAU,CAAC;IACd;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACzC;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAgD3E"}

package/lib/chart/ui/ChartSeriesMarks.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * One series over the band: a line as a single path, or a bar per slot growing
+ * from the zero line in whichever direction its value points. The line is one
+ * `d` string built in an indexed loop rather than an element per point, since
+ * a spectrum is two thousand points and four panels of them as separate
+ * elements is a page that will not scroll.
+ * @param props - See {@link ChartSeriesMarksProps}.
+ * @returns Its marks.
+ */
+export function ChartSeriesMarks(props) {
+    const { item, band, y, lane = SOLE_LANE } = props;
+    const slots = Math.min(band.count, item.values.length);
+    const muted = item.muted === true;
+    const grounded = item.kind === 'bar';
+    const lanes = Math.max(1, lane.count);
+    const wide = round(band.bandWidth / lanes);
+    const shift = band.bandWidth * ((lane.index + 0.5) / lanes - 0.5);
+    const rects = [];
+    let path = '';
+    let pen = 'M';
+    for (let index = 0; index < slots; index++) {
+        const value = item.values[index];
+        if (value === undefined || !Number.isFinite(value)) {
+            pen = 'M';
+            continue;
+        }
+        const x = band.offset + band.step * (index + 0.5);
+        const at = y.offset + value * y.factor;
+        if (!grounded) {
+            path += `${pen}${round(x)} ${round(at)}`;
+            pen = 'L';
+            continue;
+        }
+        const near = round(x + shift - band.bandWidth / lanes / 2);
+        const high = round(Math.min(at, y.offset));
+        const tall = round(Math.abs(at - y.offset));
+        rects.push(_jsx("rect", { x: near, y: high, width: wide, height: tall }, index));
+    }
+    if (grounded) {
+        return (_jsx("g", { "data-series": item.id, fill: item.color, opacity: muted ? 0.55 : 1, children: rects }));
+    }
+    return (_jsx("path", { "data-series": item.id, d: path, fill: "none", stroke: item.color, strokeWidth: muted ? 1 : 1.5, strokeDasharray: muted ? '4 3' : undefined }));
+}
+/** What a series drawn on its own is told, which is that it has the slot. */
+const SOLE_LANE = { index: 0, count: 1 };
+const round = (value) => Math.round(value * 100) / 100;
+//# sourceMappingURL=ChartSeriesMarks.js.map

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

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

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

@@ -0,0 +1,54 @@
+/**
+ * What a band chart draws: the series, the names under the slots, and the
+ * crosshair saying which slot is under the pointer. The names sit in an
+ * overlay because a frame clips its children to the plot, and a name goes
+ * under it.
+ */
+import type { ReactElement } from 'react';
+import type { ChartAxisScale } from '../core/chartAxisScale.ts';
+import type { ChartBand } from '../core/chartBand.ts';
+import type { ChartScale } from '../core/chartScale.ts';
+import type { ChartPlotArea } from './ChartFrame.tsx';
+import type { ChartSeries, ChartTrackEvent } from './TrackedLineChart.tsx';
+/** What {@link ChartTrackingLayer} needs. */
+export interface ChartTrackingLayerProps {
+    /** The rectangle the data is drawn in. */
+    plot: ChartPlotArea;
+    /** The slots the pointer is resolved against. */
+    band: ChartBand;
+    /** Data to pixels, vertically, which is where a marker sits. */
+    y: ChartScale;
+    /** One label per slot, in the slots' order. */
+    categories: readonly string[];
+    /** The visible series, in the order they are drawn. */
+    series: readonly ChartSeries[];
+    /** The slots that are named, thinned so the names cannot overlap. */
+    slotAxis: ChartAxisScale;
+    /** The slot the crosshair sits on, or `null` when nothing is tracked. */
+    index: number | null;
+    /** Called with the slot the pointer entered, and with nothing when it leaves. */
+    onTrack: (index: number | null, event: ChartTrackEvent | null) => void;
+    /**
+     * Called when a slot is clicked or committed with Enter.
+     * @default undefined
+     */
+    onSelect?: (index: number) => void;
+    /**
+     * What the horizontal axis measures, written under the names.
+     * @default undefined — the axis carries no title
+     */
+    title?: string;
+}
+/**
+ * The names of the slots, the crosshair, and the transparent rectangle that
+ * takes the pointer.
+ *
+ * The rectangle covers the whole plot rather than a hit area per point, which
+ * is what lets a finger track a spectrum: a two-pixel band cannot be aimed at,
+ * and the nearest slot to where the finger landed is what the reader meant. It
+ * lets every event through but its own, so a floating card stays clickable.
+ * @param props - See {@link ChartTrackingLayerProps}.
+ * @returns The layer.
+ */
+export declare function ChartTrackingLayer(props: ChartTrackingLayerProps): ReactElement;
+//# sourceMappingURL=ChartTrackingLayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTrackingLayer.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/ChartTrackingLayer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE3E,6CAA6C;AAC7C,MAAM,WAAW,uBAAuB;IACtC,0CAA0C;IAC1C,IAAI,EAAE,aAAa,CAAC;IACpB,iDAAiD;IACjD,IAAI,EAAE,SAAS,CAAC;IAChB,gEAAgE;IAChE,CAAC,EAAE,UAAU,CAAC;IACd,+CAA+C;IAC/C,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,uDAAuD;IACvD,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;IAC/B,qEAAqE;IACrE,QAAQ,EAAE,cAAc,CAAC;IACzB,yEAAyE;IACzE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iFAAiF;IACjF,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;IACvE;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,YAAY,CAuFd"}

package/lib/chart/ui/ChartTrackingLayer.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { chartBandCenter, chartBandIndexAt } from "../core/chartBand.js";
+import { ChartAxis } from "./ChartAxis.js";
+/**
+ * The names of the slots, the crosshair, and the transparent rectangle that
+ * takes the pointer.
+ *
+ * The rectangle covers the whole plot rather than a hit area per point, which
+ * is what lets a finger track a spectrum: a two-pixel band cannot be aimed at,
+ * and the nearest slot to where the finger landed is what the reader meant. It
+ * lets every event through but its own, so a floating card stays clickable.
+ * @param props - See {@link ChartTrackingLayerProps}.
+ * @returns The layer.
+ */
+export function ChartTrackingLayer(props) {
+    const { plot, band, y, categories, series, index, onTrack, onSelect } = props;
+    const { slotAxis, title } = props;
+    const entered = useRef(null);
+    const slot = index ?? -1;
+    const tracked = slot >= 0 && slot < band.count;
+    const at = tracked ? chartBandCenter(band, slot) : 0;
+    const crosshair = `M${at} ${plot.top}V${plot.bottom}`;
+    function report(found, x, pointer) {
+        entered.current = found;
+        onTrack(found, {
+            index: found,
+            label: categories[found] ?? '',
+            x,
+            y: pointer,
+            values: series.map((item) => ({
+                id: item.id,
+                label: item.label,
+                value: item.values[found] ?? Number.NaN,
+                color: item.color,
+            })),
+        });
+    }
+    function move(event) {
+        const box = event.currentTarget.getBoundingClientRect();
+        const across = box.width === 0 ? 1 : plot.width / box.width;
+        const down = box.height === 0 ? 1 : plot.height / box.height;
+        const x = plot.left + (event.clientX - box.left) * across;
+        const found = chartBandIndexAt(band, x);
+        if (found === -1 || found === entered.current)
+            return;
+        const height = plot.top + (event.clientY - box.top) * down;
+        report(found, chartBandCenter(band, found), height);
+    }
+    function leave() {
+        if (entered.current === null)
+            return;
+        entered.current = null;
+        onTrack(null, null);
+    }
+    function commit() {
+        if (entered.current !== null)
+            onSelect?.(entered.current);
+    }
+    function keys(event) {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        if (tracked)
+            onSelect?.(slot);
+    }
+    return (_jsxs("svg", { width: "100%", height: "100%", style: LAYER_STYLE, children: [_jsx(ChartAxis, { orientation: "bottom", scale: slotAxis, pixels: { offset: band.offset, factor: band.step }, plot: plot, label: title, layer: "axis", showGrid: false }), tracked ? _jsx("path", { d: crosshair, style: CROSSHAIR_STYLE }) : null, tracked ? markers(series, slot, at, y) : null, _jsx("rect", { x: plot.left, y: plot.top, width: plot.width, height: plot.height, fill: "transparent", style: SLIDER_STYLE, tabIndex: 0, role: "button", "aria-label": tracked
+                    ? `Measurement ${categories[slot]}`
+                    : (title ?? 'Measurements'), onPointerDown: move, onPointerMove: move, onPointerLeave: leave, onClick: commit, onKeyDown: keys })] }));
+}
+function markers(series, slot, at, y) {
+    const dots = [];
+    for (const item of series) {
+        const value = item.values[slot];
+        if (value === undefined || !Number.isFinite(value))
+            continue;
+        const cy = round(y.offset + value * y.factor);
+        dots.push(_jsx("circle", { cx: at, cy: cy, r: 3.5, fill: item.color }, item.id));
+    }
+    return (_jsx("g", { stroke: "var(--surface)", strokeWidth: 1.5, children: dots }));
+}
+const LAYER_STYLE = {
+    position: 'absolute',
+    inset: 0,
+    pointerEvents: 'none',
+};
+const SLIDER_STYLE = {
+    pointerEvents: 'auto',
+    touchAction: 'none',
+    cursor: 'crosshair',
+};
+const CROSSHAIR_STYLE = {
+    stroke: 'var(--border-strong)',
+    strokeWidth: 1,
+    strokeDasharray: '3 3',
+};
+const round = (value) => Math.round(value * 100) / 100;
+//# sourceMappingURL=ChartTrackingLayer.js.map

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

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