@fusion.dev/helix-headless 0.217.0 → 0.219.0

package/dist/scroll-area/root/scroll-area-root.js

@@ -17,6 +17,7 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
         });
         this.more = [];
         this.scrolls = false;
+        this.gutter = { blockEnd: 0, inlineEnd: 0 };
         this.measure = () => {
             const box = this.scroller;
             if (!box) {
@@ -43,6 +44,11 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
             this.scrolls =
                 (block && box.scrollHeight > box.clientHeight) ||
                     (inline && box.scrollWidth > box.clientWidth);
+            const blockEnd = Math.max(0, box.offsetHeight - box.clientHeight);
+            const inlineEnd = Math.max(0, box.offsetWidth - box.clientWidth);
+            if (blockEnd !== this.gutter.blockEnd || inlineEnd !== this.gutter.inlineEnd) {
+                this.gutter = { blockEnd, inlineEnd };
+            }
             if (this.scrollbars) {
                 this.bars.read(box);
             }
@@ -118,17 +124,27 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
         this.toggleState('scrollbar-horizontal', drawn?.horizontal.drawn === true);
         this.toggleState('scrollbar-vertical', drawn?.vertical.drawn === true);
     }
-    get clipped() {
+    get viewportStyle() {
+        const rules = [];
         if (this.orientation === 'vertical') {
-            return 'overflow-x: hidden';
+            rules.push('overflow-x: hidden');
+        }
+        else if (this.orientation === 'horizontal') {
+            rules.push('overflow-y: hidden');
+        }
+        if (this.gutter.blockEnd > 0) {
+            rules.push(`--scroll-area-gutter-block-end: ${this.gutter.blockEnd}px`);
         }
-        return this.orientation === 'horizontal' ? 'overflow-y: hidden' : nothing;
+        if (this.gutter.inlineEnd > 0) {
+            rules.push(`--scroll-area-gutter-inline-end: ${this.gutter.inlineEnd}px`);
+        }
+        return rules.length > 0 ? rules.join('; ') : nothing;
     }
     render() {
         return html `<div
       data-scroller
       part="viewport"
-      style=${this.clipped}
+      style=${this.viewportStyle}
       role=${this.label ? 'region' : nothing}
       aria-label=${this.label || nothing}
       tabindex=${this.scrolls ? '0' : nothing}
@@ -211,6 +227,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessScrollArea.prototype, "scrolls", void 0);
+__decorate([
+    state()
+], HelixHeadlessScrollArea.prototype, "gutter", void 0);
 HelixHeadlessScrollArea = __decorate([
     customElement('helix-headless-scroll-area')
 ], HelixHeadlessScrollArea);

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

@@ -15,12 +15,21 @@ export interface BarCell {
     across: number;
     /** The column of the row the value was read from, which names its series. */
     column: number;
-    /** Which series it stands in, counting from zero. */
+    /** Which series it stands in, counting from zero, which colors it. */
     depth: number;
+    /**
+     * Where its block starts on the value axis: zero, or under `stacked` the
+     * readings of the series before it in its category, on its side of zero.
+     */
+    from: number;
     /** The row's own label, which names its category. */
     label: string;
+    /** Which row of the grid in depth it stands in: its series, or the one row of a stacked chart. */
+    lane: number;
     /** The row it was read from, counting from zero. */
     row: number;
+    /** The tone the cell names with `data-tone`, which colors its own bar, where it names one. */
+    tone?: string | undefined;
     /** The value, where the cell holds a number. */
     value?: number | undefined;
 }
@@ -44,10 +53,20 @@ export interface BarField {
      * series `depth` is at `across * series.length + depth`.
      */
     cells: BarCell[];
+    /** How many rows of bars stand in depth: one a series, or one in all when stacked. */
+    lanes: number;
     /** How many cells hold a value. */
     readings: number;
+    /**
+     * How far a `diagonal` row climbs on the page for each step across, where
+     * it climbs less than Switchyard's 15 for every 72: a long row in a short
+     * plot, whose climb would leave its bars no height.
+     */
+    climb?: number;
     /** Every series, in the table's order: each numeric column's heading. */
     series: string[];
+    /** Whether a category's series stand in one column, each on the ones before it. */
+    stacked: boolean;
 }
 /**
  * Reads the table as a bar chart does: **each row is a category, named by
@@ -59,10 +78,46 @@ export interface BarField {
  * **The value axis runs from zero**, whatever the values, so a bar's height
  * is its value: one twice as tall is twice as much. It widens to round
  * numbers past the highest value, and below zero where a value is negative.
+ *
+ * **`stacked` stands a category's series in one column**, each block on the
+ * ones before it, so the column is as tall as the category's total and the
+ * axis runs to the tallest total. A negative reading hangs below zero on the
+ * negatives before it, as a flat chart's stack does.
+ *
+ * `toneOf` gives the tone a cell names, by its row and its series.
+ */
+export declare const barsOf: (rows: readonly FieldRow[], columns: readonly number[], stacked?: boolean, toneOf?: (row: number, depth: number) => string | undefined) => BarField;
+/**
+ * How the bars stand: on the box's grid, in a row level across the page, or
+ * in a row that climbs to the right as it recedes.
  */
-export declare const barsOf: (rows: readonly FieldRow[], columns: readonly number[]) => BarField;
+export type BarLayout = 'diagonal' | 'grid' | 'row';
+/**
+ * How many categories a row has room for across `width` pixels with each bar
+ * `size` pixels wide: a bar covers `FOOTPRINT` of its place, so a place is
+ * that much wider than its bar. At least one.
+ */
+export declare const rowFits: (width: number, size: number) => number;
+/** How wide a bar is on the page, in the drawing's units. */
+export declare const widthOf: (bar: DrawnBar) => number;
+/**
+ * The field with its `diagonal` row climbing at most `rise` on the page over
+ * `length` across, so a long row keeps the height its bars need.
+ */
+export declare const climbing: (field: BarField, rise: number, length: number) => BarField;
+/**
+ * The most times taller a row's value axis may stand than it is drawn in
+ * `bars`, so the tallest bar is no taller than `ROW_TALL` times the row's
+ * length: each of its places is a bar's width over `FOOTPRINT`, the width
+ * `widthOf` gives on the page.
+ */
+export declare const tallestTimes: (field: BarField, projection: Projection, bars: readonly DrawnBar[]) => number;
+/** The field with its value axis `times` as tall, which stands every bar that much taller. */
+export declare const heightened: (field: BarField, times: number) => BarField;
 /** A bar as the chart's own drawing paints it. */
 export interface DrawnBar {
+    /** Where the block starts on the floor's way up, in the box's units. */
+    base: number;
     /** The block's eight corners on the page, which a drawing with no box is framed around. */
     corners: PagePoint[];
     drawn: Drawn;
@@ -73,7 +128,72 @@ export interface DrawnBar {
 }
 /**
  * Each bar with a value as a block, seen through `projection`: standing on
- * its place on the grid, from zero to its value, a little narrower than its
- * place so neighbors stand apart. A value below zero hangs from zero.
+ * its place on the grid, from where it starts to its value, a little
+ * narrower than its place so neighbors stand apart. A value below zero
+ * hangs from where it starts.
+ *
+ * **`row` lays the categories in a straight line across the page**, along
+ * the way the camera reads as level, and the series straight back from it,
+ * so the row stays level whichever way the camera turns, and each block,
+ * which keeps to the floor's grid, shows the turn: its top and two sides.
+ * Turned, a block is wider on the page than its footprint, so the footprint
+ * narrows by as much, and neighbors still stand apart. **`diagonal` lays the
+ * same row climbing to the right**, each place a step further back than the
+ * one before, at the same climb on the page from any turn.
+ *
+ * `grown` says how much of its height each bar has reached, from 0 to 1, as
+ * the chart grows its bars in.
+ */
+export declare const barsDrawn: (field: BarField, projection: Projection, layout?: BarLayout, grown?: (cell: BarCell) => number) => DrawnBar[];
+/**
+ * The bars in the order they are painted, back to front, and **a stacked
+ * column from the floor up**: its blocks share a place on the floor, which
+ * the order by depth cannot tell apart, and one painted under the block below
+ * it would show the lower block's top through the upper one.
+ */
+export declare const paintOrder: (projection: Projection, bars: readonly DrawnBar[]) => DrawnBar[];
+/** One place on the floor of a row, under a bar or where a bar would stand. */
+export interface FloorPlate {
+    /** Which category it stands under, counting from zero. */
+    across: number;
+    /** Its four corners on the page. */
+    corners: PagePoint[];
+    /** Its outline, as path data. */
+    d: string;
+    /** Its corner lowest on the page, nearest the reader, which its name is written under. */
+    front: PagePoint;
+}
+/**
+ * The places on the floor of a row, one for each category in each lane,
+ * whether a bar stands there or not: a square a little wider than a bar's
+ * footprint, turned as the bars are, where zero stands on the value axis,
+ * along the row `layout` lays.
+ */
+export declare const floorOf: (field: BarField, projection: Projection, layout?: Exclude<BarLayout, 'grid'>) => FloorPlate[];
+/** A category's name written under its place in a row. */
+export interface RowName {
+    across: number;
+    text: string;
+    /** Whether a bar of its category names a tone, which colors the name. */
+    tone?: string | undefined;
+    x: number;
+    /** The middle of the line of text. */
+    y: number;
+}
+/**
+ * The names written under a row's plates, `size` tall: each category's name
+ * under its plate nearest the reader, **and only the names that fit**, so
+ * none overlaps another. A name whose bar names a tone is written first,
+ * then every other name, or every second, third, and so on, at the smallest
+ * even step that fits, leaving out a name the toned one covers.
+ */
+export declare const namesOf: (field: BarField, plates: readonly FloorPlate[], size: number) => RowName[];
+/**
+ * How much of its height a bar of category `across` has reached `elapsed`
+ * milliseconds after the bars began to grow in, from 0 to 1. **In reading
+ * order**, each category a little after the one before it, and fast at first
+ * and slow to rest, never past its value.
  */
-export declare const barsDrawn: (field: BarField, projection: Projection) => DrawnBar[];
+export declare const grownAt: (across: number, categories: number, elapsed: number) => number;
+/** How long the bars of `categories` take to grow in, the last one included, in milliseconds. */
+export declare const growTime: (categories: number) => number;

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

@@ -1,4 +1,4 @@
-import { solid, ticks } from '@fusion.dev/helix-core';
+import { depthOrder, pathData, 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;
@@ -12,50 +12,125 @@ const named = (count, labels, nearest = false) => {
         ticks: labels.map((_, at) => at),
     };
 };
-export const barsOf = (rows, columns) => {
+export const barsOf = (rows, columns, stacked = false, toneOf = () => undefined) => {
     const series = columns.map((column) => rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
     const cells = [];
     const values = [];
+    const reached = [];
     rows.forEach((row, at) => {
+        let [above, below] = [0, 0];
         columns.forEach((column, depth) => {
             const value = row.cells[column]?.value;
             const read = Number.isFinite(value) ? value : undefined;
+            let from = stacked ? above : 0;
             if (read !== undefined) {
                 values.push(read);
+                if (stacked) {
+                    from = read < 0 ? below : above;
+                    if (read < 0) {
+                        below += read;
+                    }
+                    else {
+                        above += read;
+                    }
+                }
+                reached.push(from + read);
             }
-            cells.push({ across: at, column, depth, label: row.label, row: at, value: read });
+            const lane = stacked ? 0 : depth;
+            const tone = toneOf(at, depth);
+            cells.push({
+                across: at,
+                column,
+                depth,
+                from,
+                label: row.label,
+                lane,
+                row: at,
+                ...(tone ? { tone } : {}),
+                value: read,
+            });
         });
     });
-    const [low, high] = [Math.min(0, ...values), Math.max(0, ...values)];
+    const lanes = stacked ? 1 : series.length;
+    const [low, high] = [Math.min(0, ...reached), Math.max(0, ...reached)];
     const range = low === high ? [0, 1] : niceRange(low, high);
-    const longest = Math.max(rows.length, series.length, 1);
+    const longest = Math.max(rows.length, lanes, 1);
     return {
         axes: {
-            extent: [Math.max(rows.length, 1) / longest, HEIGHT, Math.max(series.length, 1) / longest],
+            extent: [Math.max(rows.length, 1) / longest, HEIGHT, Math.max(lanes, 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),
+            z: named(lanes, lanes === 1 ? [] : series, true),
         },
         categories: rows.map((row) => row.label),
         cells,
+        lanes,
         readings: values.length,
         series,
+        stacked,
     };
 };
 const FOOTPRINT = 0.6;
-export const barsDrawn = (field, projection) => {
+const CLIMB = 15 / 72;
+const placesOf = (field, projection, layout) => {
+    const [ex, , ez] = field.axes.extent;
+    const [cos, sin] = projection.across;
+    const lined = layout !== 'grid';
+    const spread = lined ? Math.abs(cos) + Math.abs(sin) : 1;
+    const spacing = Math.min((2 * ex) / Math.max(field.categories.length, 1), (2 * ez) / Math.max(field.lanes, 1)) /
+        spread;
+    const origin = projection.at(0, 0, 0);
+    const rise = origin.y - projection.at(-sin, cos, 0).y;
+    const across = projection.at(cos, sin, 0).x - origin.x;
+    const climb = layout === 'diagonal' && rise > 0 ? ((field.climb ?? CLIMB) * across) / rise : 0;
+    return {
+        place: (cell) => {
+            const along = inBox(field.axes.x, cell.across) * ex;
+            const back = -inBox(field.axes.z, cell.lane) * ez + along * climb;
+            return lined
+                ? { x: along * cos - back * sin, y: along * sin + back * cos }
+                : { x: along, y: back };
+        },
+        spacing,
+    };
+};
+export const rowFits = (width, size) => size > 0 ? Math.max(1, Math.floor((width * FOOTPRINT) / size)) : 1;
+export const widthOf = (bar) => {
+    const xs = bar.corners.map((corner) => corner.x);
+    return Math.max(...xs) - Math.min(...xs);
+};
+export const climbing = (field, rise, length) => ({
+    ...field,
+    climb: length > 0 ? Math.min(CLIMB, rise / length) : CLIMB,
+});
+const ROW_TALL = 1.25;
+export const tallestTimes = (field, projection, bars) => {
+    const first = bars[0];
+    const fall = Math.abs(projection.at(0, 0, 1).y - projection.at(0, 0, 0).y);
+    const tallest = Math.max(0, ...bars.map((bar) => bar.height)) * fall;
+    if (!first || tallest <= 0) {
+        return Number.POSITIVE_INFINITY;
+    }
+    const length = (field.categories.length * widthOf(first)) / FOOTPRINT;
+    return (ROW_TALL * length) / tallest;
+};
+export const heightened = (field, times) => {
     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, axes: { ...field.axes, extent: [ex, ey * times, ez] } };
+};
+export const barsDrawn = (field, projection, layout = 'grid', grown = () => 1) => {
+    const ey = field.axes.extent[1];
+    const { place, spacing } = placesOf(field, projection, layout);
     return field.cells.flatMap((cell, index) => {
-        if (cell.value === undefined) {
+        if (cell.value === undefined || (field.stacked && cell.value === 0)) {
             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 { x, y } = place(cell);
+        const share = grown(cell);
+        const start = inBox(field.axes.y, cell.from * share) * ey;
+        const top = inBox(field.axes.y, (cell.from + cell.value) * share) * ey;
+        const base = Math.min(start, top);
+        const height = Math.abs(top - start);
         const lifted = {
             ...projection,
             at: (px, py, pz = 0) => projection.at(px, py, pz + base),
@@ -67,6 +142,108 @@ export const barsDrawn = (field, projection) => {
                 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 }];
+        return [
+            { base, corners, drawn: solid(lifted, 'block', x, y, width, height), height, index, x, y },
+        ];
+    });
+};
+export const paintOrder = (projection, bars) => {
+    const columns = new Map();
+    for (const bar of depthOrder(projection, bars)) {
+        const place = `${bar.x},${bar.y}`;
+        columns.set(place, [...(columns.get(place) ?? []), bar]);
+    }
+    return [...columns.values()].flatMap((column) => column.sort((one, two) => one.base - two.base));
+};
+const PLATE = 0.85;
+export const floorOf = (field, projection, layout = 'row') => {
+    const { place, spacing } = placesOf(field, projection, layout);
+    const floor = inBox(field.axes.y, 0) * field.axes.extent[1];
+    const half = (spacing * PLATE) / 2;
+    const seen = new Set();
+    return field.cells.flatMap((cell) => {
+        const key = `${cell.across} ${cell.lane}`;
+        if (seen.has(key)) {
+            return [];
+        }
+        seen.add(key);
+        const { x, y } = place(cell);
+        const corners = [
+            projection.at(x - half, y - half, floor),
+            projection.at(x + half, y - half, floor),
+            projection.at(x + half, y + half, floor),
+            projection.at(x - half, y + half, floor),
+        ];
+        const front = corners.reduce((low, one) => (one.y > low.y ? one : low));
+        return [{ across: cell.across, corners, d: pathData(corners), front }];
+    });
+};
+const NAME_WIDE = 0.58;
+export const namesOf = (field, plates, size) => {
+    const fronts = new Map();
+    for (const plate of plates) {
+        const kept = fronts.get(plate.across);
+        if (!kept || plate.front.y > kept.y) {
+            fronts.set(plate.across, plate.front);
+        }
+    }
+    const tones = new Map();
+    for (const cell of field.cells) {
+        if (cell.tone && cell.value !== undefined && !tones.has(cell.across)) {
+            tones.set(cell.across, cell.tone);
+        }
+    }
+    const all = field.categories.flatMap((text, across) => {
+        const front = fronts.get(across);
+        return front
+            ? [{ across, text, tone: tones.get(across), x: front.x, y: front.y + size * 1.1 }]
+            : [];
     });
+    const room = (name) => {
+        const half = (name.text.length * size * NAME_WIDE) / 2 + size * 0.4;
+        return [name.x - half, name.x + half];
+    };
+    const clear = (one, kept) => {
+        const [from, to] = room(one);
+        return kept.every((other) => {
+            const [left, right] = room(other);
+            return to <= left || from >= right;
+        });
+    };
+    const toned = all.filter((name) => name.tone);
+    const rest = all.filter((name) => !name.tone);
+    for (let step = 1; step <= Math.max(1, all.length); step++) {
+        const kept = toned.filter((name, at) => clear(name, toned.slice(0, at)));
+        let fits = true;
+        for (const name of rest) {
+            if (name.across % step !== 0) {
+                continue;
+            }
+            if (clear(name, kept)) {
+                kept.push(name);
+            }
+            else if (!clear(name, kept.filter((one) => one.tone))) {
+            }
+            else {
+                fits = false;
+                break;
+            }
+        }
+        if (fits) {
+            return kept.sort((one, other) => one.across - other.across);
+        }
+    }
+    return [];
+};
+const GROW = 1000;
+const STAGGER = 110;
+const SPREAD = 660;
+const stepOf = (categories) => categories > 1 ? Math.min(STAGGER, SPREAD / (categories - 1)) : 0;
+export const grownAt = (across, categories, elapsed) => {
+    const t = (elapsed - across * stepOf(categories)) / GROW;
+    if (t <= 0) {
+        return 0;
+    }
+    return t >= 1 ? 1 : 1 - (1 - t) ** 3;
 };
+export const growTime = (categories) => GROW + stepOf(categories) * Math.max(0, categories - 1);