@fusion.dev/helix-headless 0.198.0 → 0.199.1

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

@@ -0,0 +1,99 @@
+import { pathData } from '@fusion.dev/helix-core';
+import { barsOf } from '../spatial-bar-chart/bars.js';
+import { inBox } from '../spatial-scatter-chart/view.js';
+const HEIGHT = 0.6;
+const THICKNESS = 0.45;
+export const ribbonsOf = (rows, columns) => {
+    const field = barsOf(rows, columns);
+    const series = Math.max(field.series.length, 1);
+    return {
+        ...field,
+        axes: {
+            ...field.axes,
+            extent: [1, HEIGHT, Math.min(1, Math.max(0.3, series * 0.22))],
+            x: {
+                ...field.axes.x,
+                range: [0, Math.max(field.categories.length - 1, 1)],
+                rules: undefined,
+            },
+            z: {
+                ...field.axes.z,
+                labels: field.series,
+                ticks: field.series.map((_, at) => at),
+            },
+        },
+    };
+};
+export const ribbonsDrawn = (field, projection) => {
+    const [ex, ey, ez] = field.axes.extent;
+    const on = (x, y, z) => projection.at(x * ex, -z * ez, y * ey);
+    const across = field.categories.length;
+    const count = Math.max(field.series.length, 1);
+    const half = (THICKNESS * 2) / count / 2;
+    const zero = inBox(field.axes.y, Math.max(field.axes.y.range[0], 0));
+    const [tx, ty, tz] = projection.toward;
+    const toward = { x: tx, y: tz, z: -ty };
+    return field.series.map((_, series) => {
+        const z = inBox(field.axes.z, series);
+        const [near, far] = [z + half, z - half];
+        const points = [];
+        for (let at = 0; at < across; at++) {
+            const index = at * field.series.length + series;
+            const value = field.cells[index]?.value;
+            if (value !== undefined) {
+                points.push({ index, value: inBox(field.axes.y, value), x: inBox(field.axes.x, at) });
+            }
+        }
+        const faces = [];
+        const front = toward.z >= 0 ? near : far;
+        const curtain = (depth) => pathData([
+            ...points.map((point) => on(point.x, point.value, depth)),
+            ...[...points].reverse().map((point) => on(point.x, zero, depth)),
+        ]);
+        const first = points[0];
+        const last = points.at(-1);
+        const ends = [];
+        if (first && last) {
+            const end = toward.x >= 0 ? last : first;
+            ends.push({
+                d: pathData([
+                    on(end.x, zero, near),
+                    on(end.x, end.value, near),
+                    on(end.x, end.value, far),
+                    on(end.x, zero, far),
+                ]),
+                shade: 0.22,
+            });
+        }
+        const tops = [];
+        for (let at = 0; at + 1 < points.length; at++) {
+            const [a, b] = [
+                points[at],
+                points[at + 1],
+            ];
+            const rise = Math.abs(b.value - a.value) * ey;
+            const run = Math.abs(b.x - a.x) * ex || 1e-6;
+            tops.push({
+                d: pathData([
+                    on(a.x, a.value, near),
+                    on(b.x, b.value, near),
+                    on(b.x, b.value, far),
+                    on(a.x, a.value, far),
+                ]),
+                shade: Math.min(0.3, (rise / Math.hypot(rise, run)) * 0.3),
+            });
+        }
+        if (toward.x < 0) {
+            tops.reverse();
+        }
+        faces.push(...ends, ...tops, { d: curtain(front), shade: 0.12 });
+        const outline = points.flatMap((point) => [near, far].flatMap((depth) => [on(point.x, point.value, depth), on(point.x, zero, depth)]));
+        return {
+            depth: projection.depth(0, -z * ez),
+            faces,
+            outline,
+            readings: points.map((point) => ({ index: point.index, ...on(point.x, point.value, front) })),
+            series,
+        };
+    });
+};

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

@@ -0,0 +1,243 @@
+import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+import '../../tooltip/index.js';
+import { type RibbonField } from '../ribbons.js';
+declare const HelixHeadlessSpatialRibbonChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartStatusInterface);
+/**
+ * @summary A chart that draws each series as a ribbon in three dimensions, its top following the values, for several series over one set of places.
+ *
+ * @description
+ * A 3D ribbon chart reads its table as `Line Chart` does: **each row is a
+ * place across, such as a day, named by its label, and each numeric column a
+ * series**, named by its heading. Each series is a ribbon in a depth of its
+ * own, the first in front, its top following the values and its face falling
+ * to zero, so several series that would tangle as lines stand apart.
+ *
+ * **The flat `Line Chart` is read more exactly.** Use this one where the
+ * shape of each series, and how the series differ, matters more than any one
+ * value, such as response times by region over a month. The tooltip and the
+ * table carry the exact values, and a drag turns the view to show a ribbon
+ * another hides.
+ *
+ * **Helix draws the frame, and the chart draws the ribbons 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
+ * `connectSpatialRibbonChart` from `@fusion.dev/helix-plot`, given
+ * `threeRibbonDriver` from `@fusion.dev/helix-plot/three`, draws the ribbons
+ * 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 readings, series, and
+ * places, 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 place to
+ * place, the down and up arrows from series to series, and Home and End go
+ * to the first and the last reading. The `live` part says the reading's
+ * place, series, and value in words. Shift with an arrow turns the view, and
+ * Escape lets the reading go.
+ *
+ * **A reading shows its row in a tooltip**, as on every chart: the reading a
+ * mouse or a pen rests nearest, the one 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 reading 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 place. |
+ * | Down, Up | Moves to the next or the previous series. |
+ * | Home, End | Moves to the first or the last reading. |
+ * | Shift with an arrow | Turns the view across, or tilts it up and down. |
+ * | Enter, Space | Presses the reading, which sends `helix-reading-press`. |
+ * | Escape | Lets the reading go. |
+ *
+ * @since 0.199.0
+ * @status experimental
+ * @category charts
+ * @aliases 3D ribbon chart, 3D line chart, Ribbon chart, Waterfall plot, Line chart in 3D
+ * @documentation https://fusion.dev/helix/components/spatial-ribbon-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 readings or the reading 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 reading 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 drawing - The chart's own drawing in SVG: the box, its grid and names, and the ribbons.
+ * @csspart empty - The words when the table has no readings: the `empty` slot, falling back to `empty-text`.
+ * @csspart face - One face of a ribbon the view shows: a piece of its top, an end, or its side, shaded by how far it turns from the light.
+ * @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 reading 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 ribbon - One ribbon, its faces in its series' color.
+ * @csspart ring - The ring around the reading the pointer or the keys rest on, drawn over the ribbons.
+ * @csspart summary - The number of readings, series, and places, 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 place'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-ribbon-chart-shade - How far a ribbon's face turns from the light, from 0 for a level top. The component writes it on each face, and the stylesheet that shades the face reads it.
+ *
+ * @cssstate active - While a reading is shown, under the pointer or the keys.
+ * @cssstate drawn - While a renderer has drawn the ribbons, 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 HelixHeadlessSpatialRibbonChart extends HelixHeadlessSpatialRibbonChart_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-spatial-ribbon-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 reading the table has no value for.
+     * `{place}` and `{series}` name it.
+     */
+    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 `{places}` are
+     * the number of readings, series, and places, written in the locale,
+     * and `{low}` and `{high}` the lowest and the highest value.
+     */
+    summaryLabel: string;
+    /** Whether a renderer has drawn the ribbons, 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 reading 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 ribbons. **Each row is a place across, and each
+     * numeric column a series.** A renderer reads it.
+     */
+    get field(): RibbonField;
+    /** The field last read, and the rows and columns it was read from. */
+    private memo;
+    /** The reading 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 ribbons, which hides the chart's own
+     * drawing or shows it again. Called by the connector.
+     */
+    rendererDrawn(on?: boolean): void;
+    /**
+     * Puts the reading on the one 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 place, so the
+     * up and down arrows move from series to series and the left and right
+     * arrows from place to place. 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;
+    /** Each reading where the chart's own drawing put it, which the pointer finds. */
+    private placed;
+    /** A mouse or a pen over the chart's own drawing puts the reading on the one nearest it. */
+    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 reading nearest it until a tap lands elsewhere.
+     */
+    private readonly onDrawingTap;
+    protected render(): TemplateResult;
+    /**
+     * The ribbons in 3D, in SVG: the box with its grid and names, and each
+     * series a ribbon, painted back to front, each in its series' color with
+     * its faces shaded by how far they turn from the light. The chart's own
+     * drawing, until a renderer has drawn and where none is connected.
+     */
+    private renderFallback;
+    /** One ribbon, its faces in its series' color, each shaded by how far it turns from the light. */
+    private renderRibbon;
+    /** The readout: the reading's place, series, and value in words, once the keys have moved to one. */
+    private renderLive;
+    /**
+     * The reading's row in the tooltip, pointed at it 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 reading.
+     */
+    private renderTooltip;
+    /** What the plot shows, in a sentence, which describes the plot. */
+    private renderSummary;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-spatial-ribbon-chart': HelixHeadlessSpatialRibbonChart;
+    }
+}
+export {};

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

@@ -0,0 +1,259 @@
+import { __decorate } from "tslib";
+import { AriaForwardController, CHART_PLOT, customElement, 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, nearestTo, SPATIAL_VIEW, turned, } from '../../spatial-scatter-chart/view.js';
+import { ribbonsDrawn, ribbonsOf } from '../ribbons.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 HelixHeadlessSpatialRibbonChart = class HelixHeadlessSpatialRibbonChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
+    constructor() {
+        super(...arguments);
+        this.noBox = false;
+        this.openLabel = '{place}, {series}: no value';
+        this.plotLabel = '3D ribbon chart';
+        this.summaryLabel = '{count, plural, one {# reading} other {# readings}} in {series, plural, one {# series} other {# series}} over {places, plural, one {# place} other {# places}}, 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.placed = [];
+        this.onDrawingMove = (event) => {
+            if (this.drag.move(event)) {
+                return;
+            }
+            if (event.pointerType === 'touch') {
+                return;
+            }
+            this.requestActive(nearestTo(event.currentTarget, event, this.placed), 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(nearestTo(event.currentTarget, event, this.placed, 24), 'touch');
+            }
+        };
+    }
+    static { this.words = 'helix-spatial-ribbon-chart'; }
+    get field() {
+        const rows = this.sourceRows;
+        const columns = this.plottedColumns;
+        if (this.memo?.rows !== rows || this.memo.columns !== columns) {
+            this.memo = { columns, field: ribbonsOf(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?.();
+        }
+    }
+    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 ribbons = ribbonsDrawn(field, view.projection).sort((one, other) => one.depth - other.depth);
+        const places = ribbons.flatMap((ribbon) => ribbon.readings);
+        this.placed = places;
+        const active = places.find((place) => place.index === at);
+        const cell = field.cells[at];
+        const bounds = this.drag.frame(this.noBox
+            ? boundsOf(ribbons.flatMap((ribbon) => ribbon.outline), 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)}${ribbons.map((ribbon) => this.renderRibbon(ribbon))}${active
+            ? svg `<circle cx=${active.x} cy=${active.y} part="ring" r="0.06"></circle><foreignObject height="0.001" overflow="visible" width="0.001" x=${active.x} y=${active.y}>${this.renderOwnTooltip(cell?.row)}</foreignObject>`
+            : nothing}</svg>
+    </div>`;
+    }
+    renderRibbon(ribbon) {
+        const short = (value) => Math.round(value * 1000) / 1000;
+        return svg `<g part="ribbon" style="--chart-series: var(--chart-series-${(ribbon.series % SERIES) + 1})">${ribbon.faces.map((face) => svg `<path d=${face.d} part="face" style="--spatial-ribbon-chart-shade: ${short(face.shade)}"></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', {
+                        place: 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', {
+            count: field.readings,
+            high: Math.max(...values),
+            low: Math.min(...values),
+            places: field.categories.length,
+            series: field.series.length,
+        });
+        return html `<p id="helix-chart-summary" part="summary">${said}</p>`;
+    }
+};
+__decorate([
+    property({ attribute: 'no-box', reflect: true, type: Boolean })
+], HelixHeadlessSpatialRibbonChart.prototype, "noBox", void 0);
+__decorate([
+    words,
+    property({ attribute: 'open-label' })
+], HelixHeadlessSpatialRibbonChart.prototype, "openLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'plot-label' })
+], HelixHeadlessSpatialRibbonChart.prototype, "plotLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'summary-label' })
+], HelixHeadlessSpatialRibbonChart.prototype, "summaryLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialRibbonChart.prototype, "rendered", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialRibbonChart.prototype, "camera", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialRibbonChart.prototype, "place", void 0);
+HelixHeadlessSpatialRibbonChart = __decorate([
+    customElement('helix-headless-spatial-ribbon-chart')
+], HelixHeadlessSpatialRibbonChart);
+export { HelixHeadlessSpatialRibbonChart };

package/dist/spatial-scatter-chart/field.d.ts

@@ -31,8 +31,16 @@ export interface PlotPoint {
 }
 /** One axis: its column's name, its range widened to round numbers, and the ticks on it. */
 export interface PlotAxis {
+    /**
+     * The words written at the ticks, in their order, for an axis of names such
+     * as a bar chart's categories, which stand at 0, 1, 2 and on. Absent, each
+     * tick is written as its number.
+     */
+    labels?: readonly string[] | undefined;
     name: string;
     range: [number, number];
+    /** Where the grid's lines run along this axis, where not at the ticks: between the names of an axis of names. */
+    rules?: readonly number[] | undefined;
     ticks: number[];
 }
 /** The table as a 3D scatter reads it. */

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

@@ -70,6 +70,7 @@ declare const HelixHeadlessSpatialScatterChart_base: typeof HelixElement & (new
  *
  * @csspart axis-name - A measure's name, along its edge of the box, in the chart's own drawing.
  * @csspart drawing - The chart's own drawing in SVG: the box, its grid and numbers, and the points.
+ * @csspart drop-line - The line from a point straight down to the floor of the box, drawn under `drop-lines`, in its group's color.
  * @csspart empty - The words when the table has no points: the `empty` slot, falling back to `empty-text`.
  * @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 at the ticks, in the chart's own drawing.
@@ -111,8 +112,21 @@ export declare class HelixHeadlessSpatialScatterChart extends HelixHeadlessSpati
      * `registerWords('de', { 'helix-spatial-scatter-chart': { emptyText: 'Keine Punkte' } })`.
      */
     static words: string;
+    /**
+     * Draws a line from each point straight down to the floor of the box, in
+     * its group's color, so where a point stands across and in depth reads off
+     * the floor's grid. A renderer draws them too.
+     */
+    dropLines: boolean;
     /** The column of text that puts each point in a group, by its heading. None by default. */
     groupBy: 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;
     /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
     plotLabel: string;
     /**