@fusion.dev/helix-headless 0.188.0 → 0.190.0

package/types/words.d.ts

@@ -1911,75 +1911,6 @@ declare module '@fusion.dev/helix-core' {
        */
       revealLabel: Message
     }
-    'helix-isometric-heatmap': {
-      /**
-       * The name the `overview` gives the busiest reading, `{busiestLabel}` in
-       * `overview-label`.
-       *
-       * English: `Busiest`
-       */
-      busiestLabel: Message
-      /**
-       * The words shown in place of the drawing when the table has no readings,
-       * and the fallback of the `empty` slot.
-       *
-       * English: `No readings`
-       */
-      emptyText: Message
-      /**
-       * The words shown in place of the drawing while `loading` is set and
-       * there are no readings yet, and the fallback of the `loading` slot.
-       *
-       * English: `Loading readings`
-       */
-      loadingText: Message
-      /**
-       * The `overview`'s sentence. `{busiestLabel}` and `{totalLabel}` are
-       * `busiest-label` and `total-label`, `{busiest}` the busiest reading's name
-       * and its reading as the table writes it, and `{total}` the total of the
-       * readings drawn, written in the locale.
-       *
-       * English: `{busiestLabel}: {busiest}; {totalLabel} {total}.`
-       */
-      overviewLabel: Message
-      /**
-       * Where a reading the keys moved to stands among the readings, said after
-       * it. `{position}` and `{count}` are replaced with the numbers, written in
-       * `locale`.
-       *
-       * English: `{position} of {count}`
-       */
-      positionLabel: Message
-      /**
-       * What the readout added for a selected cell, under `selection-mode`.
-       *
-       * English: `selected`
-       */
-      selectedLabel: Message
-      /**
-       * What the `selection` part says after the selection changes. `{count}` is
-       * how many cells are selected, written in the locale, and a language that
-       * needs plural forms writes them: `{count, plural, one {# wybrany} few
-       * {# wybrane} many {# wybranych} other {# wybranego}}`.
-       *
-       * English: `{count, plural, one {# selected} other {# selected}}`
-       */
-      selectionLabel: Message
-      /**
-       * The strip's name where the chart has none: no `aria-label`, `label`, or
-       * table caption.
-       *
-       * English: `Heatmap`
-       */
-      stripLabel: Message
-      /**
-       * The name the `overview` gives the total of the readings drawn,
-       * `{totalLabel}` in `overview-label`.
-       *
-       * English: `Total`
-       */
-      totalLabel: Message
-    }
     'helix-lightbox': {
       /**
        * The close control's accessible name. Translate it with the rest of your
@@ -3023,6 +2954,159 @@ declare module '@fusion.dev/helix-core' {
        */
       positionLabel: Message
     }
+    'helix-spatial-heatmap': {
+      /**
+       * The name the `overview` gives the busiest reading, `{busiestLabel}` in
+       * `overview-label`.
+       *
+       * English: `Busiest`
+       */
+      busiestLabel: Message
+      /**
+       * The words shown in place of the drawing when the table has no readings,
+       * and the fallback of the `empty` slot.
+       *
+       * English: `No readings`
+       */
+      emptyText: Message
+      /**
+       * The words shown in place of the drawing while `loading` is set and
+       * there are no readings yet, and the fallback of the `loading` slot.
+       *
+       * English: `Loading readings`
+       */
+      loadingText: Message
+      /**
+       * The `overview`'s sentence. `{busiestLabel}` and `{totalLabel}` are
+       * `busiest-label` and `total-label`, `{busiest}` the busiest reading's name
+       * and its reading as the table writes it, and `{total}` the total of the
+       * readings drawn, written in the locale.
+       *
+       * English: `{busiestLabel}: {busiest}; {totalLabel} {total}.`
+       */
+      overviewLabel: Message
+      /**
+       * Where a reading the keys moved to stands among the readings, said after
+       * it. `{position}` and `{count}` are replaced with the numbers, written in
+       * `locale`.
+       *
+       * English: `{position} of {count}`
+       */
+      positionLabel: Message
+      /**
+       * What the readout added for a selected cell, under `selection-mode`.
+       *
+       * English: `selected`
+       */
+      selectedLabel: Message
+      /**
+       * What the `selection` part says after the selection changes. `{count}` is
+       * how many cells are selected, written in the locale, and a language that
+       * needs plural forms writes them: `{count, plural, one {# wybrany} few
+       * {# wybrane} many {# wybranych} other {# wybranego}}`.
+       *
+       * English: `{count, plural, one {# selected} other {# selected}}`
+       */
+      selectionLabel: Message
+      /**
+       * The strip's name where the chart has none: no `aria-label`, `label`, or
+       * table caption.
+       *
+       * English: `Heatmap`
+       */
+      stripLabel: Message
+      /**
+       * The name the `overview` gives the total of the readings drawn,
+       * `{totalLabel}` in `overview-label`.
+       *
+       * English: `Total`
+       */
+      totalLabel: Message
+    }
+    'helix-spatial-scatter-chart': {
+      /**
+       * The words shown in place of the drawing when the table has no readings,
+       * and the fallback of the `empty` slot.
+       *
+       * English: `No readings`
+       */
+      emptyText: Message
+      /**
+       * The words shown in place of the drawing while `loading` is set and
+       * there are no readings yet, and the fallback of the `loading` slot.
+       *
+       * English: `Loading readings`
+       */
+      loadingText: Message
+      /**
+       * The plot's name where the chart has none: no `aria-label`, `label`, or table caption.
+       *
+       * English: `3D scatter chart`
+       */
+      plotLabel: Message
+      /**
+       * Where a reading the keys moved to stands among the readings, said after
+       * it. `{position}` and `{count}` are replaced with the numbers, written in
+       * `locale`.
+       *
+       * English: `{position} of {count}`
+       */
+      positionLabel: Message
+      /**
+       * The `summary` part's sentence. `{count}` is the number of points, written
+       * in the locale, and `{x}`, `{y}`, and `{z}` are the three measures' names.
+       *
+       * English: `{count, plural, one {# point} other {# points}}: {x} across, {y} up, and {z} in depth.`
+       */
+      summaryLabel: Message
+    }
+    'helix-spatial-surface-chart': {
+      /**
+       * The words shown in place of the drawing when the table has no readings,
+       * and the fallback of the `empty` slot.
+       *
+       * English: `No readings`
+       */
+      emptyText: Message
+      /**
+       * The words shown in place of the drawing while `loading` is set and
+       * there are no readings yet, and the fallback of the `loading` slot.
+       *
+       * English: `Loading readings`
+       */
+      loadingText: Message
+      /**
+       * What the readout says for a place with no reading. `{x}` and `{z}` are
+       * the place's numbers across and in depth, and `{across}` and `{depth}`
+       * the two measures' names.
+       *
+       * English: `{across} {x}, {depth} {z}: no reading`
+       */
+      openLabel: Message
+      /**
+       * The plot's name where the chart has none: no `aria-label`, `label`, or table caption.
+       *
+       * English: `3D surface chart`
+       */
+      plotLabel: Message
+      /**
+       * Where a reading the keys moved to stands among the readings, said after
+       * it. `{position}` and `{count}` are replaced with the numbers, written in
+       * `locale`.
+       *
+       * English: `{position} of {count}`
+       */
+      positionLabel: Message
+      /**
+       * The `summary` part's sentence. `{count}` is the number of readings,
+       * written in the locale, `{x}`, `{z}`, and `{y}` are the measures across,
+       * in depth, and up, and `{low}` and `{high}` the lowest and the highest
+       * reading.
+       *
+       * English: `{count, plural, one {# reading} other {# readings}} of {y} over {x} and {z}, from {low} to {high}.`
+       */
+      summaryLabel: Message
+    }
     'helix-speed-dial': {
       /**
        * Accessible name for the trigger and the set of actions it opens.

package/dist/isometric-heatmap/index.d.ts

@@ -1 +0,0 @@
-export { HelixHeadlessIsometricHeatmap } from './root/isometric-heatmap-root.js';

package/dist/isometric-heatmap/index.js

@@ -1 +0,0 @@
-export { HelixHeadlessIsometricHeatmap } from './root/isometric-heatmap-root.js';

package/dist/isometric-heatmap/root/isometric-heatmap-root.d.ts

@@ -1,118 +0,0 @@
-import { nothing, type TemplateResult } from 'lit';
-import '../../tooltip/index.js';
-import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
-/**
- * @summary A heatmap drawn as a relief, where each reading stands as tall as its value.
- *
- * @description
- * The same strip as `Heatmap`, seen from above at an angle. Each reading is a
- * prism: its top face takes the cell's tone, and its height repeats the value,
- * measured from zero against the highest reading in the table. `rows="7"`
- * makes a contribution graph, with each week a column running down to the
- * right.
- *
- * **The height says what the tone says.** Read the exact value from the tooltip
- * or the table, and compare readings by tone. A tall reading at the front can
- * hide a short one behind it, so the newest column stands at the front, where
- * nothing covers it.
- *
- * **Everything else is `Heatmap`.** The table named by `for`, the tones and
- * thresholds, the keys, the tooltip, the overview, `selection-mode`, and the
- * events all work as they do there. The class extends the headless heatmap,
- * and its own entry point carries the drawing, so a page using only `Heatmap`
- * loads none of it.
- *
- * **`flat` lays every prism down** at no height, which leaves the tones on a
- * plane at the same angle.
- *
- * **`gap` and `min-cell` set the smallest cell.** The drawing scales as a
- * whole, so a wider box draws larger cells and the gap grows with them. A box
- * too narrow for every column at `min-cell` draws the newest that fit.
- *
- * **The drawing is SVG and holds still.** It scales with its box through its
- * `viewBox`, needs no WebGL, and has no motion to pause.
- *
- * **Keyboard.** The keys are `Heatmap`'s. Down moves to the next reading in a
- * column, drawn down to the left, and Right to the same reading in the next
- * column, drawn down to the right.
- *
- * | Key | What it does |
- * |---|---|
- * | Tab | Moves focus to the strip and shows the first cell. |
- * | Down, Up | Moves to the next or the previous cell. |
- * | Right, Left | Moves a column on or back, a week with `rows="7"`. On a right-to-left page, Left moves on. |
- * | Home, End | Moves to the first or the last cell. |
- * | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |
- * | Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |
- * | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode="multiple"`. |
- * | Escape | Puts the cell's tooltip away. |
- *
- * @since 0.185.0
- * @status experimental
- * @category charts
- * @aliases Isometric chart, 3D heatmap, Relief chart, Isometric contribution graph
- * @documentation https://fusion.dev/helix/components/isometric-heatmap
- *
- * @csspart cell - One reading: a group holding its three faces.
- * @csspart drawing - The SVG every prism is drawn in. It is mirrored on a right-to-left page.
- * @csspart left-face - The face of a prism toward the next row, drawn at its lower left.
- * @csspart right-face - The face of a prism toward the next column, drawn at its lower right.
- * @csspart row - A column of prisms, which a grid reads as a row, under `selection-mode`.
- * @csspart strip - 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 top-face - The top of a prism, which carries the reading's tone.
- *
- * @cssproperty --isometric-heatmap-span - How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it.
- */
-export declare class HelixHeadlessIsometricHeatmap extends HelixHeadlessHeatmap {
-    /**
-     * The key this family's words are registered under, its styled tag:
-     * `registerWords('de', { 'helix-isometric-heatmap': { emptyText: 'Keine Werte' } })`.
-     */
-    static words: string;
-    protected static markRules: string[];
-    /**
-     * Draws every prism at no height, so the tones lie on a plane.
-     */
-    flat: boolean;
-    /**
-     * How tall the highest reading stands, in cells. Every other reading stands
-     * at its share of it.
-     */
-    relief: number;
-    /** The prisms drawn on the last render, which the tooltip is placed against. */
-    private shown;
-    /**
-     * How many readings fit, as whole columns, newest kept.
-     *
-     * The drawing runs at 30 degrees, so a cell takes `ACROSS` of its width, and
-     * the rows run across too: a strip `rows` deep starts that many cells to the
-     * left of its first column.
-     */
-    protected get room(): number;
-    /** The drawn readings as prisms, standing against the highest reading in the table. */
-    private drawnRelief;
-    protected render(): TemplateResult;
-    /**
-     * One reading as a prism. The sides come first, so the top face is painted
-     * over the edge they share with it.
-     *
-     * Under `selection-mode` the prism is a `gridcell` named by its row in the
-     * table and saying whether it is selected, as the flat strip's cell is.
-     */
-    private renderPrism;
-    /**
-     * The prisms as a grid's rows, one for each column of the strip, which is
-     * also the order they are painted in.
-     */
-    private renderPrismRows;
-    /**
-     * The bubble over the top face of the reading the pointer or the keys rest
-     * on, placed as a share of the drawing, which the strip's box matches.
-     */
-    protected renderTooltip(grid?: boolean): TemplateResult | typeof nothing;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'helix-headless-isometric-heatmap': HelixHeadlessIsometricHeatmap;
-    }
-}

package/dist/isometric-heatmap/root/isometric-heatmap-root.js

@@ -1,127 +0,0 @@
-import { __decorate } from "tslib";
-import { CHART_PLOT, commaList, customElement, drawTooltip, MIRROR_RULE, spokenReading, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
-import { html, nothing, svg } from 'lit';
-import { property } from 'lit/decorators.js';
-import '../../tooltip/index.js';
-import { fits, toneOf } from '../../heatmap/root/buckets.js';
-import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
-import { ACROSS, heightsOf, highestOf, reliefOf } from '../projection.js';
-let HelixHeadlessIsometricHeatmap = class HelixHeadlessIsometricHeatmap extends HelixHeadlessHeatmap {
-    constructor() {
-        super(...arguments);
-        this.flat = false;
-        this.relief = 2;
-        this.shown = undefined;
-    }
-    static { this.words = 'helix-isometric-heatmap'; }
-    static { this.markRules = [MIRROR_RULE]; }
-    get room() {
-        const width = this.width;
-        if (width === undefined) {
-            return this.points.length;
-        }
-        const pitch = this.cellPx + this.gapPx;
-        const across = width / ACROSS - this.rowCount * pitch - this.gapPx;
-        return fits(this.points.length, Math.max(across, Number.MIN_VALUE), this.cellPx, this.gapPx, this.rowCount);
-    }
-    drawnRelief() {
-        const tallest = this.flat ? 0 : Math.max(0, this.relief || 0);
-        const highest = highestOf(this.points.map((point) => point.value));
-        const heights = heightsOf(this.drawn.map((point) => point.value), highest, tallest);
-        return reliefOf(heights, this.rowCount, this.cellPx / (this.cellPx + this.gapPx));
-    }
-    render() {
-        const bounds = writtenNumbers(this.thresholds);
-        const palette = writtenList(this.tones);
-        const cells = this.drawn;
-        const readable = cells.length > 0;
-        const grid = readable && this.selectionMode !== undefined;
-        const keys = this.selectionMode ? this.keysOf(cells) : [];
-        const chosen = new Set(this.selectionMode ? commaList(this.value) : []);
-        const relief = this.drawnRelief();
-        this.shown = relief;
-        const at = this.pointer.at;
-        const prisms = relief.prisms.map((prism) => this.renderPrism(prism.index, prism.top, prism.left, prism.right, at === prism.index, chosen.has(keys[prism.index] ?? ''), grid, toneOf(cells[prism.index] ?? { value: undefined }, bounds, palette)));
-        const { box } = relief;
-        const drawing = readable
-            ? html `<svg
-          aria-hidden=${grid ? nothing : 'true'}
-          data-mirror
-          part="drawing"
-          role=${grid ? 'none' : nothing}
-          viewBox="${box.x} ${box.y} ${box.width} ${box.height}"
-          xmlns="http://www.w3.org/2000/svg"
-        >${grid ? this.renderPrismRows(prisms) : prisms}</svg>`
-            : nothing;
-        return html `<div
-        aria-activedescendant=${grid && at >= 0 ? `cell-${at}` : nothing}
-        aria-describedby=${readable ? 'helix-chart-summary' : nothing}
-        aria-label=${this.named || this.stripLabel}
-        aria-multiselectable=${grid && this.selectionMode === 'multiple' ? 'true' : nothing}
-        part="strip plot"
-        id=${CHART_PLOT}
-        role=${grid ? 'grid' : readable ? 'application' : 'img'}
-        style="--isometric-heatmap-span: ${Math.ceil(cells.length / this.rowCount) + Math.min(this.rowCount, cells.length)}"
-        tabindex=${readable ? '0' : nothing}
-        @click=${this.onClick}
-        @keydown=${this.onStripKeydown}
-        @pointerover=${this.onPointerOver}
-        @pointerleave=${this.onPointerLeave}
-        @pointerup=${this.onPointerUp}
-      >${drawing}${this.renderTooltip(grid)}</div>
-      ${cells.length === 0 ? this.renderStatus() : nothing}
-      <div part="footer">
-        <span part="start"><slot name="start"></slot></span>
-        <span part="summary"><slot name="summary"></slot></span>
-        <span part="end"><slot name="end"></slot></span>
-      </div>${readable ? this.renderOverview(cells) : nothing}${this.status.spoken
-            ? html `<span part="selection" role="status">${this.status.said}</span>`
-            : nothing}${this.renderTable()}`;
-    }
-    renderPrism(index, top, left, right, active, picked, grid, tone) {
-        const row = grid ? this.sourceRows[this.points.length - this.drawn.length + index] : undefined;
-        const name = row ? spokenReading(row) : '';
-        return svg `<g
-      aria-label=${grid && name ? name : nothing}
-      aria-selected=${grid ? (picked ? 'true' : 'false') : nothing}
-      data-index=${index}
-      data-tone=${tone ?? nothing}
-      id=${grid ? `cell-${index}` : nothing}
-      part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
-      role=${grid ? 'gridcell' : nothing}
-      style=${tone === undefined ? nothing : `--heatmap-tone: var(--heatmap-tone-${tone})`}
-    ><path d=${left} part="left-face"></path><path d=${right} part="right-face"></path><path d=${top} part="top-face"></path></g>`;
-    }
-    renderPrismRows(prisms) {
-        const size = this.rowCount === 1 ? prisms.length : this.rowCount;
-        const rows = [];
-        for (let start = 0; start < prisms.length; start += size) {
-            rows.push(svg `<g part="row" role="row">${prisms.slice(start, start + size)}</g>`);
-        }
-        return rows;
-    }
-    renderTooltip(grid = false) {
-        const at = this.pointer.at;
-        const prism = this.shown?.prisms[at];
-        const box = this.shown?.box;
-        const reading = grid ? undefined : this.pointer;
-        if (at < 0 || !prism || !box || box.width <= 0 || box.height <= 0) {
-            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, reading);
-        }
-        return drawTooltip(this.sourceRows, this.points.length - this.drawn.length + at, this.tag('tooltip'), {
-            placement: 'top',
-            x: `${((prism.peak.x - box.x) / box.width) * 100}%`,
-            y: `${((prism.peak.y - box.y) / box.height) * 100}%`,
-        }, undefined, reading);
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessIsometricHeatmap.prototype, "flat", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessIsometricHeatmap.prototype, "relief", void 0);
-HelixHeadlessIsometricHeatmap = __decorate([
-    customElement('helix-headless-isometric-heatmap')
-], HelixHeadlessIsometricHeatmap);
-export { HelixHeadlessIsometricHeatmap };