@fusion.dev/helix-headless 0.198.0 → 0.199.0

package/dist/spatial-bar-chart/bars.js

@@ -0,0 +1,72 @@
+import { solid, ticks } from '@fusion.dev/helix-core';
+import { niceRange } from '../spatial-scatter-chart/field.js';
+import { inBox } from '../spatial-scatter-chart/view.js';
+const HEIGHT = 0.6;
+const named = (count, labels, nearest = false) => {
+    const places = Math.max(count, 1);
+    return {
+        labels,
+        name: '',
+        range: nearest ? [places - 0.5, -0.5] : [-0.5, places - 0.5],
+        rules: Array.from({ length: places + 1 }, (_, at) => at - 0.5),
+        ticks: labels.map((_, at) => at),
+    };
+};
+export const barsOf = (rows, columns) => {
+    const series = columns.map((column) => rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
+    const cells = [];
+    const values = [];
+    rows.forEach((row, at) => {
+        columns.forEach((column, depth) => {
+            const value = row.cells[column]?.value;
+            const read = Number.isFinite(value) ? value : undefined;
+            if (read !== undefined) {
+                values.push(read);
+            }
+            cells.push({ across: at, column, depth, label: row.label, row: at, value: read });
+        });
+    });
+    const [low, high] = [Math.min(0, ...values), Math.max(0, ...values)];
+    const range = low === high ? [0, 1] : niceRange(low, high);
+    const longest = Math.max(rows.length, series.length, 1);
+    return {
+        axes: {
+            extent: [Math.max(rows.length, 1) / longest, HEIGHT, Math.max(series.length, 1) / longest],
+            x: named(rows.length, rows.map((row) => row.label)),
+            y: { name: series.length === 1 ? (series[0] ?? '') : '', range, ticks: ticks(range) },
+            z: named(series.length, series.length === 1 ? [] : series, true),
+        },
+        categories: rows.map((row) => row.label),
+        cells,
+        readings: values.length,
+        series,
+    };
+};
+const FOOTPRINT = 0.6;
+export const barsDrawn = (field, projection) => {
+    const [ex, ey, ez] = field.axes.extent;
+    const spacing = Math.min((2 * ex) / Math.max(field.categories.length, 1), (2 * ez) / Math.max(field.series.length, 1));
+    const zero = inBox(field.axes.y, 0) * ey;
+    return field.cells.flatMap((cell, index) => {
+        if (cell.value === undefined) {
+            return [];
+        }
+        const x = inBox(field.axes.x, cell.across) * ex;
+        const y = -inBox(field.axes.z, cell.depth) * ez;
+        const top = inBox(field.axes.y, cell.value) * ey;
+        const base = Math.min(zero, top);
+        const height = Math.abs(top - zero);
+        const lifted = {
+            ...projection,
+            at: (px, py, pz = 0) => projection.at(px, py, pz + base),
+        };
+        const width = spacing * FOOTPRINT;
+        const corners = [];
+        for (const cx of [x - width / 2, x + width / 2]) {
+            for (const cy of [y - width / 2, y + width / 2]) {
+                corners.push(lifted.at(cx, cy, 0), lifted.at(cx, cy, height));
+            }
+        }
+        return [{ corners, drawn: solid(lifted, 'block', x, y, width, height), height, index, x, y }];
+    });
+};

package/dist/spatial-bar-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { type BarCell, type BarField, barsDrawn, barsOf, type DrawnBar } from './bars.js';
+export { HelixHeadlessSpatialBarChart } from './root/spatial-bar-chart-root.js';

package/dist/spatial-bar-chart/index.js

@@ -0,0 +1,2 @@
+export { barsDrawn, barsOf } from './bars.js';
+export { HelixHeadlessSpatialBarChart } from './root/spatial-bar-chart-root.js';

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.d.ts

@@ -0,0 +1,245 @@
+import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+import '../../tooltip/index.js';
+import { type BarField } from '../bars.js';
+declare const HelixHeadlessSpatialBarChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartStatusInterface);
+/**
+ * @summary A bar chart drawn in three dimensions, each bar a block as tall as its value, for categories in one or more series.
+ *
+ * @description
+ * A 3D bar chart reads its table as `Bar Chart` does: **each row is a
+ * category, named by its label, and each numeric column a series**, named by
+ * its heading. The bars stand on a grid of categories across and series in
+ * depth, each as tall as its value from zero and colored by its series, so
+ * one series is a single row of bars and several make a block of them.
+ *
+ * **The flat `Bar Chart` is read more exactly.** Measured, a reader judges
+ * a 3D bar's value less closely than a flat one's, and a bar can stand
+ * behind another. Use this one where the shape across two sets of names
+ * matters more than any one exact value, such as sales by region and by
+ * quarter. The tooltip and the table carry the exact values, and a drag
+ * turns the view to show a bar another hides.
+ *
+ * **Helix draws the frame, and the chart draws the bars in 3D itself, in
+ * SVG**: a picture a print and a page without WebGL show too, which a drag
+ * or Shift with an arrow turns. Put a box inside the chart, and
+ * `connectSpatialBarChart` from `@fusion.dev/helix-plot`, given
+ * `threeBarDriver` from `@fusion.dev/helix-plot/three`, draws the bars in it
+ * with three.js, lit and in perspective.
+ *
+ * **The table is the reading.** Every number is in it, and screen readers
+ * read it. The `summary` part names the number of bars, series, and
+ * categories, and the range of values, and describes the plot.
+ *
+ * **The plot is read by key, across and in depth.** It takes focus, named by
+ * `label` or the caption. The left and right arrows move from category to
+ * category, the down and up arrows from series to series, and Home and End
+ * go to the first and the last bar. The `live` part says the bar's category,
+ * series, and value in words. Shift with an arrow turns the view, and
+ * Escape lets the bar go.
+ *
+ * **A reading shows its row in a tooltip**, as on every chart: the bar a
+ * mouse or a pen rests on, the bar tapped, or the one the keys move to.
+ *
+ * **Readings are sent as every chart sends them.** `helix-reading-change`
+ * says each move of the reading, and `helix-reading-press` a bar clicked or
+ * pressed with Enter or Space, each with the row of the table in `index`.
+ *
+ * **Keyboard.** The plot is one tab stop once it has readings.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Tab | Moves focus to the plot. |
+ * | Right, Left | Moves to the next or the previous category. |
+ * | Down, Up | Moves to the next or the previous series. |
+ * | Home, End | Moves to the first or the last bar. |
+ * | Shift with an arrow | Turns the view across, or tilts it up and down. |
+ * | Enter, Space | Presses the bar, which sends `helix-reading-press`. |
+ * | Escape | Lets the bar go. |
+ *
+ * @since 0.199.0
+ * @status experimental
+ * @category charts
+ * @aliases 3D bar chart, 3D column chart, Isometric bar chart, Isometric column chart, Bar chart in 3D
+ * @documentation https://fusion.dev/helix/components/spatial-bar-chart
+ *
+ * @slot - The renderer's box, which the 3D drawing is made in.
+ * @slot empty - Content shown when the table has no readings. Falls back to `empty-text`.
+ * @slot loading - Content shown while `loading` is set and there are no readings yet. Falls back to `loading-text`.
+ *
+ * @event {HelixPlotChangeEvent} helix-plot-change - The bars or the bar the keys rest on changed, which the renderer is told. It stays on the chart.
+ * @event {HelixPlotTurnEvent} helix-plot-turn - Shift with an arrow asked the view to turn, by a step across or up.
+ * @event {HelixReadingChangeEvent} helix-reading-change - The reading moved, or was put away: `index` is the row, or `-1` for none, with its `label` and the `pointerType` that moved it.
+ * @event {HelixReadingPressEvent} helix-reading-press - A bar was clicked or pressed with Enter or Space, with the same detail as `helix-reading-change`.
+ *
+ * @csspart axis-name - A measure's name, along its edge of the box, in the chart's own drawing.
+ * @csspart bar - One bar, its faces in its series' color.
+ * @csspart bar-active - The bar the pointer or the keys rest on. Set alongside `bar`.
+ * @csspart drawing - The chart's own drawing in SVG: the box, its grid and names, and the bars.
+ * @csspart empty - The words when the table has no readings: the `empty` slot, falling back to `empty-text`.
+ * @csspart face - One face of a bar the view shows, shaded by which way it faces.
+ * @csspart fallback - The box the chart's own drawing fills, shown until a renderer has drawn and where none is connected. Hidden from screen readers.
+ * @csspart grid - The box's edges and its grid, in the chart's own drawing.
+ * @csspart live - The readout: a polite live region that says the bar the keys moved to. Hide it visually.
+ * @csspart loading - The words while `loading` is set and there are no readings.
+ * @csspart mark - The invisible point the tooltip is anchored to, where the renderer draws the reading.
+ * @csspart plot - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
+ * @csspart ring - The outline around the bar the pointer or the keys rest on, painted after it, so the bars in front of it cover it.
+ * @csspart summary - The number of bars, series, and categories, and the range of values, written as a sentence for screen readers, which describes the plot. Hide it visually.
+ * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
+ * @csspart tick - A category's or a series' name, or a value at a tick, along its edge of the box, in the chart's own drawing.
+ * @csspart tooltip - The bubble, forwarded from `Tooltip`.
+ * @csspart tooltip-anchor - The `Tooltip` element itself.
+ * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, on its top edge. Set alongside `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, on its right edge. Set alongside `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, on its left edge. Set alongside `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The point while the bubble is above the reading, on its bottom edge. Set alongside `tooltip-arrow`.
+ * @csspart tooltip-bottom - The bubble while it is below the reading. Set alongside `tooltip`.
+ * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell a chart's series keys rest on, which every chart's tooltip can mark. This chart marks none, since its readout says the measure. Set alongside `tooltip-cell`.
+ * @csspart tooltip-label - The row's own name inside the tooltip.
+ * @csspart tooltip-left - The bubble while it is left of the reading. Set alongside `tooltip`.
+ * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-right - The bubble while it is right of the reading. Set alongside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above the reading. Set alongside `tooltip`.
+ * @csspart tooltip-value - A column's value inside the tooltip.
+ *
+ * @cssproperty --spatial-bar-chart-shade - How far a bar's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it.
+ *
+ * @cssstate active - While a bar is shown, under the pointer or the keys.
+ * @cssstate drawn - While a renderer has drawn the bars, and the chart's own drawing is hidden.
+ * @cssstate empty - While the `empty` part stands in place of the readings.
+ * @cssstate loading - While the `loading` part stands in place of the readings.
+ */
+export declare class HelixHeadlessSpatialBarChart extends HelixHeadlessSpatialBarChart_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-spatial-bar-chart': { emptyText: 'Keine Werte' } })`.
+     */
+    static words: string;
+    /**
+     * Draws no box: no edges, grid, numbers, or names, so the readings stand
+     * alone and fill the plot, as a picture on a product's own page does. The
+     * table, the summary, the tooltip, and the keys still carry every value,
+     * and a renderer draws no box either.
+     */
+    noBox: boolean;
+    /**
+     * What the readout says for a place with no value. `{category}` and
+     * `{series}` name the place.
+     */
+    openLabel: string;
+    /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+    plotLabel: string;
+    /**
+     * The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
+     * are the number of bars, series, and categories, written in the locale,
+     * and `{low}` and `{high}` the lowest and the highest value.
+     */
+    summaryLabel: string;
+    /** Whether a renderer has drawn the bars, which hides the chart's own drawing. */
+    private rendered;
+    /** Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns. */
+    private camera;
+    /** A drag across the chart's own drawing, which turns its view. */
+    private readonly drag;
+    /** Where the renderer draws the reading, which the tooltip points at. */
+    private place;
+    /** The field last told, kept so a change of it can be told. */
+    private last;
+    /** The bar the keys rested on last, so a change of it can be told. */
+    private told;
+    /** Carries a host `aria-labelledby` and `aria-describedby` to the plot. */
+    protected readonly aria: AriaForwardController;
+    /**
+     * The table read as bars. **Each row is a category, and each numeric
+     * column a series.** A renderer reads it.
+     */
+    get field(): BarField;
+    /** The field last read, and the rows and columns it was read from. */
+    private memo;
+    /** The bar the keys or the pointer rest on, as its place in `field.cells`, or `-1`. */
+    get active(): number;
+    /** The number of places on the grid, which the keys walk. */
+    get readings(): number;
+    /**
+     * Says whether a renderer has drawn the bars, which hides the chart's own
+     * drawing or shows it again. Called by the connector.
+     */
+    rendererDrawn(on?: boolean): void;
+    /**
+     * Puts the reading on the bar at `index`, or lets it go with `-1`, as a
+     * pointer resting on it in the renderer's drawing or a press there does.
+     * A touch keeps it until a tap lands elsewhere, and a mouse leaving a
+     * reading the keys moved to leaves it. Called by the connector.
+     */
+    requestActive(index: number, kind?: 'mouse' | 'pen' | 'touch'): void;
+    /**
+     * Says where the renderer draws the reading, as fractions of the plot from
+     * its top left, or `undefined` while it draws none. The tooltip points
+     * there. Called by the connector.
+     */
+    placeReading(at: {
+        x: number;
+        y: number;
+    } | undefined): void;
+    /**
+     * Tells the keys how many series stand in depth for each category, so the
+     * up and down arrows move from series to series and the left and right
+     * arrows from category to category. Here rather than in `updated`, since
+     * the server calls this one.
+     */
+    protected willUpdate(changed: PropertyValues<this>): void;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Shift with an arrow turns the view, the chart's own drawing and the
+     * renderer's alike, and moves no reading.
+     */
+    private readonly onPlotKeydown;
+    /** The bar a pointer event is over, or `-1`: the one in front, since the bars are painted back to front. */
+    private barAt;
+    /** A mouse or a pen over the chart's own drawing puts the reading on the bar it rests on. */
+    private readonly onDrawingMove;
+    private readonly onDrawingDown;
+    /** A press the browser took back, such as for a scroll, which ends a drag as a release does. */
+    private readonly onDrawingCancel;
+    private readonly onDrawingLeave;
+    /**
+     * A tap is a touch reader's hover, unless it was a drag, which turned the
+     * view: it shows the bar under it until a tap lands elsewhere.
+     */
+    private readonly onDrawingTap;
+    protected render(): TemplateResult;
+    /**
+     * The bars in 3D, in SVG: the box with its grid and names, and each bar a
+     * block standing from zero to its value, painted back to front, in its
+     * series' color and shaded by which way each face turns. The chart's own
+     * drawing, until a renderer has drawn and where none is connected.
+     */
+    private renderFallback;
+    /** One bar, its faces in its series' color, each shaded by which way it faces. */
+    private renderBar;
+    /** The readout: the bar's category, series, and value in words, once the keys have moved to one. */
+    private renderLive;
+    /**
+     * The reading's row in the tooltip, pointed at its bar in the chart's own
+     * drawing, which holds it there.
+     */
+    private renderOwnTooltip;
+    /**
+     * The reading's row in the tooltip every chart shows, pointed at where the
+     * renderer draws it. Only once a renderer has drawn; until then the
+     * chart's own drawing holds the tooltip at the bar.
+     */
+    private renderTooltip;
+    /** What the plot shows, in a sentence, which describes the plot. */
+    private renderSummary;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-spatial-bar-chart': HelixHeadlessSpatialBarChart;
+    }
+}
+export {};

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.js

@@ -0,0 +1,262 @@
+import { __decorate } from "tslib";
+import { AriaForwardController, CHART_PLOT, customElement, depthOrder, drawTooltip, formatWords, HelixElement, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, MixinChartSource, MixinChartStatus, spokenReading, words, } from '@fusion.dev/helix-core';
+import { html, nothing, svg, } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import '../../tooltip/index.js';
+import { boundsOf, boxView, DragTurn, drawBox, SPATIAL_VIEW, turned, } from '../../spatial-scatter-chart/view.js';
+import { barsDrawn, barsOf } from '../bars.js';
+const TURNS = {
+    ArrowDown: { across: 0, up: -1 },
+    ArrowLeft: { across: -1, up: 0 },
+    ArrowRight: { across: 1, up: 0 },
+    ArrowUp: { across: 0, up: 1 },
+};
+const SERIES = 24;
+let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
+    constructor() {
+        super(...arguments);
+        this.noBox = false;
+        this.openLabel = '{category}, {series}: no value';
+        this.plotLabel = '3D bar chart';
+        this.summaryLabel = '{count, plural, one {# bar} other {# bars}} in {series, plural, one {# series} other {# series}} over {categories, plural, one {# category} other {# categories}}, from {low} to {high}.';
+        this.rendered = false;
+        this.camera = SPATIAL_VIEW;
+        this.drag = new DragTurn((next) => {
+            this.camera = next(this.camera);
+        }, () => this.requestUpdate());
+        this.told = -1;
+        this.aria = new AriaForwardController(this, {
+            target: () => this.partNamed('plot'),
+        });
+        this.onPlotKeydown = (event) => {
+            const turn = TURNS[event.key];
+            if (!event.shiftKey || !turn || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.camera = turned(this.camera, turn.across, turn.up);
+            this.dispatchEvent(new HelixPlotTurnEvent(turn));
+        };
+        this.onDrawingMove = (event) => {
+            if (this.drag.move(event)) {
+                return;
+            }
+            if (event.pointerType === 'touch') {
+                return;
+            }
+            this.requestActive(this.barAt(event), event.pointerType === 'pen' ? 'pen' : 'mouse');
+        };
+        this.onDrawingDown = (event) => {
+            this.drag.down(event);
+        };
+        this.onDrawingCancel = (event) => {
+            this.drag.up(event);
+        };
+        this.onDrawingLeave = (event) => {
+            if (event.pointerType !== 'touch') {
+                this.requestActive(-1, 'mouse');
+            }
+        };
+        this.onDrawingTap = (event) => {
+            if (this.drag.up(event)) {
+                return;
+            }
+            if (event.pointerType === 'touch') {
+                this.requestActive(this.barAt(event), 'touch');
+            }
+        };
+    }
+    static { this.words = 'helix-spatial-bar-chart'; }
+    get field() {
+        const rows = this.sourceRows;
+        const columns = this.plottedColumns;
+        if (this.memo?.rows !== rows || this.memo.columns !== columns) {
+            this.memo = { columns, field: barsOf(rows, columns), rows };
+        }
+        return this.memo.field;
+    }
+    get active() {
+        return this.pointer.at;
+    }
+    get readings() {
+        return this.field.cells.length;
+    }
+    rendererDrawn(on = true) {
+        this.rendered = on;
+        this.toggleState('drawn', on);
+    }
+    requestActive(index, kind = 'mouse') {
+        if (kind === 'touch') {
+            this.pointer.tapTo(index);
+        }
+        else if (index >= 0 || !this.pointer.keyed) {
+            this.pointer.set(index);
+        }
+    }
+    placeReading(at) {
+        this.place = at;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.pointer.grid = Math.max(1, this.field.series.length);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointer.axis = 'none';
+        this.pointer.onReading = (heard, detail) => {
+            const cell = this.field.cells[detail.index];
+            const told = {
+                ...detail,
+                index: cell?.value === undefined ? -1 : cell.row,
+                label: cell?.label ?? '',
+            };
+            this.dispatchEvent(heard === 'press' ? new HelixReadingPressEvent(told) : new HelixReadingChangeEvent(told));
+        };
+    }
+    updated(changed) {
+        super.updated(changed);
+        const field = this.field;
+        if (field !== this.last) {
+            this.last = field;
+            this.dispatchEvent(new HelixPlotChangeEvent({ kind: 'data' }));
+        }
+        if (this.pointer.at !== this.told) {
+            this.told = this.pointer.at;
+            this.dispatchEvent(new HelixPlotChangeEvent({ kind: 'focus' }));
+        }
+        if (changed.has('place')) {
+            ;
+            this.renderRoot.querySelector('[for="helix-chart-mark"]')?.reposition?.();
+        }
+    }
+    barAt(event) {
+        const bar = event.composedPath()[0]?.closest?.('[data-index]');
+        const index = Number(bar?.getAttribute('data-index') ?? -1);
+        return Number.isInteger(index) ? index : -1;
+    }
+    render() {
+        const field = this.field;
+        const readable = field.readings > 0;
+        const at = this.pointer.at;
+        const cell = field.cells[at];
+        return html `<div
+        aria-describedby=${readable ? 'helix-chart-summary' : nothing}
+        aria-label=${this.named || this.plotLabel}
+        id=${CHART_PLOT}
+        part="plot"
+        role=${readable ? 'application' : 'img'}
+        tabindex=${readable ? '0' : nothing}
+        @keydown=${this.onPlotKeydown}
+      >
+        <slot></slot>
+        ${readable ? this.renderFallback(field, at) : nothing}
+        ${readable ? this.renderLive(field, at) : nothing}
+        ${this.renderTooltip(cell?.value === undefined ? undefined : cell.row)}
+      </div>
+      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderTable()}`;
+    }
+    renderFallback(field, at) {
+        const view = boxView(field.axes, this.camera, [], this.noBox);
+        const bars = barsDrawn(field, view.projection);
+        const active = bars.find((bar) => bar.index === at);
+        const cell = field.cells[at];
+        const bounds = this.drag.frame(this.noBox
+            ? boundsOf(bars.flatMap((bar) => bar.corners), 0.1)
+            : view.bounds, view.on([0, 0, 0]));
+        return html `<div aria-hidden="true" dir="ltr" ?hidden=${this.rendered} part="fallback">
+      <svg
+        part="drawing"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}"
+        xmlns="http://www.w3.org/2000/svg"
+        @click=${this.drag.click}
+        @pointercancel=${this.onDrawingCancel}
+        @pointerdown=${this.onDrawingDown}
+        @pointerleave=${this.onDrawingLeave}
+        @pointermove=${this.onDrawingMove}
+        @pointerup=${this.onDrawingTap}
+      >${this.noBox ? nothing : drawBox(view)}${depthOrder(view.projection, bars).map((bar) => svg `${this.renderBar(field, bar, at)}${bar === active ? svg `<path d=${active.drawn.outline} part="ring"></path>` : nothing}`)}${active
+            ? svg `<foreignObject height="0.001" overflow="visible" width="0.001" x=${active.drawn.peak.x} y=${active.drawn.peak.y}>${this.renderOwnTooltip(cell?.row)}</foreignObject>`
+            : nothing}</svg>
+    </div>`;
+    }
+    renderBar(field, bar, at) {
+        const depth = field.cells[bar.index]?.depth ?? 0;
+        const short = (value) => Math.round(value * 1000) / 1000;
+        return svg `<g data-index=${bar.index} part="bar${bar.index === at ? ' bar-active' : ''}" style="--chart-series: var(--chart-series-${(depth % SERIES) + 1})">${bar.drawn.faces.map((face) => svg `<path d=${face.d} part="face" style="--spatial-bar-chart-shade: ${short(face.darken)}"></path>`)}</g>`;
+    }
+    renderLive(field, at) {
+        const cell = field.cells[at];
+        const row = cell === undefined ? undefined : this.sourceRows[cell.row];
+        let said = '';
+        if (this.pointer.keyed && cell) {
+            said =
+                row && cell.value !== undefined
+                    ? spokenReading(row, cell.column, (one) => this.pointer.shows(one), this.pointer.position)
+                    : formatWords(this, 'openLabel', {
+                        category: cell.label,
+                        series: field.series[cell.depth] ?? '',
+                    });
+        }
+        return html `<span aria-live="polite" part="live" role="status">${said}</span>`;
+    }
+    renderOwnTooltip(row) {
+        if (this.rendered || row === undefined || !this.sourceRows[row]) {
+            return nothing;
+        }
+        return drawTooltip(this.sourceRows, row, this.tag('tooltip'), { dir: isRtl(this) ? 'rtl' : 'ltr', fixed: true, placement: 'top', x: '0%', y: '0%' }, () => undefined);
+    }
+    renderTooltip(row) {
+        const place = this.place;
+        if (!this.rendered || !place || row === undefined || !this.sourceRows[row]) {
+            return nothing;
+        }
+        return drawTooltip(this.sourceRows, row, this.tag('tooltip'), {
+            dir: isRtl(this) ? 'rtl' : 'ltr',
+            fixed: true,
+            placement: 'top',
+            x: `${place.x * 100}%`,
+            y: `${place.y * 100}%`,
+        }, () => undefined);
+    }
+    renderSummary(field) {
+        const values = field.cells.flatMap((cell) => (cell.value === undefined ? [] : [cell.value]));
+        const said = formatWords(this, 'summaryLabel', {
+            categories: field.categories.length,
+            count: field.readings,
+            high: Math.max(...values),
+            low: Math.min(...values),
+            series: field.series.length,
+        });
+        return html `<p id="helix-chart-summary" part="summary">${said}</p>`;
+    }
+};
+__decorate([
+    property({ attribute: 'no-box', reflect: true, type: Boolean })
+], HelixHeadlessSpatialBarChart.prototype, "noBox", void 0);
+__decorate([
+    words,
+    property({ attribute: 'open-label' })
+], HelixHeadlessSpatialBarChart.prototype, "openLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'plot-label' })
+], HelixHeadlessSpatialBarChart.prototype, "plotLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'summary-label' })
+], HelixHeadlessSpatialBarChart.prototype, "summaryLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialBarChart.prototype, "rendered", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialBarChart.prototype, "camera", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialBarChart.prototype, "place", void 0);
+HelixHeadlessSpatialBarChart = __decorate([
+    customElement('helix-headless-spatial-bar-chart')
+], HelixHeadlessSpatialBarChart);
+export { HelixHeadlessSpatialBarChart };

package/dist/spatial-ribbon-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { type DrawnRibbon, type RibbonCell, type RibbonFace, type RibbonField, ribbonsDrawn, ribbonsOf, } from './ribbons.js';
+export { HelixHeadlessSpatialRibbonChart } from './root/spatial-ribbon-chart-root.js';

package/dist/spatial-ribbon-chart/index.js

@@ -0,0 +1,2 @@
+export { ribbonsDrawn, ribbonsOf, } from './ribbons.js';
+export { HelixHeadlessSpatialRibbonChart } from './root/spatial-ribbon-chart-root.js';

package/dist/spatial-ribbon-chart/ribbons.d.ts

@@ -0,0 +1,55 @@
+/**
+ * A 3D ribbon chart's table read as ribbons, one for each series, and the
+ * faces each is drawn with.
+ *
+ * Kept apart from the element because it is arithmetic a picture hides: a
+ * ribbon whose faces are painted in the wrong order shows its back over its
+ * front, and a value read under the wrong column bends a ribbon where the
+ * data never did.
+ */
+import { type PagePoint, type Projection } from '@fusion.dev/helix-core';
+import { type BarCell, type BarField } from '../spatial-bar-chart/bars.js';
+import type { FieldRow } from '../spatial-scatter-chart/field.js';
+/**
+ * The table as a 3D ribbon chart reads it: as `Bar Chart` and `Line Chart`
+ * read theirs, **each row a place across, named by its label, and each
+ * numeric column a series**, drawn as a ribbon in its own depth.
+ */
+export type RibbonField = BarField;
+export type RibbonCell = BarCell;
+/**
+ * Reads the table: each row a place across and each numeric column a
+ * series, every series in a ribbon of its own, the first in front. **The box
+ * is long across and shallow in depth**, a ribbon's place in depth a third
+ * of the length across at most, so a long series reads as a line and not as
+ * a wall.
+ */
+export declare const ribbonsOf: (rows: readonly FieldRow[], columns: readonly number[]) => RibbonField;
+/** One face of a ribbon, as path data, and how far it turns from the light. */
+export interface RibbonFace {
+    d: string;
+    /** From 0, the series' color, as the top takes it, to about 0.3, shaded. */
+    shade: number;
+}
+/** A ribbon as the chart's own drawing paints it: its faces in the order to paint them, and where each reading stands. */
+export interface DrawnRibbon {
+    /** How near the camera the ribbon stands: the larger, the nearer. */
+    depth: number;
+    faces: RibbonFace[];
+    /** Every corner of the ribbon on the page, which a drawing with no box is framed around. */
+    outline: PagePoint[];
+    /** Each reading's place on the top of the ribbon, by its place in `field.cells`. */
+    readings: Array<PagePoint & {
+        index: number;
+    }>;
+    series: number;
+}
+/**
+ * Each series as a ribbon seen through `projection`, which the box's own
+ * places go through as the box view's `on` does. **Painted so its faces
+ * cover each other rightly from any side**: the side turned away is left
+ * out, the top's pieces go back to front, and the side facing the reader
+ * last. The ribbons themselves are painted back to front by the caller, in
+ * `depth`.
+ */
+export declare const ribbonsDrawn: (field: RibbonField, projection: Projection) => DrawnRibbon[];