@aceshooting/lyra-ui 0.1.2 → 0.1.4

package/dist/components/graph/graph.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { styles } from './graph.styles.js';
@@ -44,6 +45,20 @@ function loadD3() {
 }
 const MIN_RADIUS = 6;
 const MAX_RADIUS = 24;
+/**
+ * Rejects a `GraphNode.color` that could break out of the single
+ * `--lyra-node-fill` custom-property declaration it's assigned to — `;`,
+ * `{`, and `}` are all a value needs to terminate that declaration and start
+ * another. This matters even though the node fill is set via Lit's
+ * `styleMap` directive (not raw string interpolation): `styleMap`'s first
+ * commit for a given attribute part serializes the whole `style` value as a
+ * single string (only later updates go through the safe
+ * `CSSStyleDeclaration.setProperty()` path), so an unsanitized value could
+ * still inject on that first render.
+ */
+function sanitizeNodeColor(color) {
+    return color != null && !/[;{}]/.test(color) ? color : undefined;
+}
 /**
  * `<lyra-graph>` — a force-directed node-link diagram with pan/zoom/drag.
  * Requires the optional peer deps `d3-force`/`d3-drag`/`d3-zoom`/`d3-selection`
@@ -63,6 +78,8 @@ export class LyraGraph extends LyraElement {
         this.height = 600;
         this.chargeStrength = -300;
         this.linkDistance = 100;
+        this.minZoom = 0.1;
+        this.maxZoom = 8;
         /** True until the lazy-loaded d3 peer dependencies have settled (success or failure). */
         this.loading = true;
         this.simNodes = [];
@@ -72,6 +89,13 @@ export class LyraGraph extends LyraElement {
         /** Node `<circle>`s already wired up with d3-drag; cleared on every simulation rebuild
          *  so DOM elements Lit reuses across a rebuild get rebound to their fresh datum. */
         this.boundNodeEls = new WeakSet();
+        /** Node/link/label DOM elements, index-aligned with simNodes/simLinks, cached
+         *  once per structural rebuild and written to directly by onTick() — this is
+         *  what lets ticks update positions without going through Lit's reactive
+         *  simNodes/simLinks properties (see rebuildSimulation()'s doc comment). */
+        this.nodeEls = [];
+        this.nodeLabelEls = [];
+        this.linkEls = [];
     }
     static { this.styles = [LyraElement.styles, styles]; }
     connectedCallback() {
@@ -94,6 +118,17 @@ export class LyraGraph extends LyraElement {
     nodeRadius(n) {
         return n.radius ?? (MIN_RADIUS + MAX_RADIUS) / 2;
     }
+    willUpdate(changed) {
+        // rebuildSimulation() (re)assigns the simNodes/simLinks reactive
+        // properties — doing that from willUpdate() folds them into the render
+        // this same update is already about to perform. Doing it from updated()
+        // instead would set a reactive property *after* the update completed,
+        // which Lit schedules as a whole extra update pass (a dev-mode warning,
+        // and pointless work).
+        if (this.d3 && (changed.has('nodes') || changed.has('links'))) {
+            this.rebuildSimulation();
+        }
+    }
     updated(changed) {
         if (this.loading)
             this.setAttribute('aria-busy', 'true');
@@ -101,35 +136,61 @@ export class LyraGraph extends LyraElement {
             this.removeAttribute('aria-busy');
         if (!this.d3)
             return;
-        if (changed.has('nodes') || changed.has('links')) {
-            this.rebuildSimulation();
-        }
-        else if (changed.has('width') || changed.has('height')) {
-            this.simulation?.force('center', this.d3.forceCenter(this.width / 2, this.height / 2));
-            this.simulation?.alpha(0.1).restart();
+        if (!changed.has('nodes') && !changed.has('links')) {
+            if (changed.has('width') || changed.has('height')) {
+                this.simulation?.force('center', this.d3.forceCenter(this.width / 2, this.height / 2));
+                this.simulation?.alpha(0.1).restart();
+            }
+            else if (changed.has('chargeStrength') || changed.has('linkDistance')) {
+                // Without this branch, chargeStrength/linkDistance only took effect
+                // the next time nodes/links also changed (rebuildSimulation() reads
+                // them fresh) — retune the already-created force objects in place
+                // instead of rebuilding the whole simulation.
+                if (changed.has('chargeStrength'))
+                    this.chargeForce?.strength(this.chargeStrength);
+                if (changed.has('linkDistance'))
+                    this.linkForce?.distance(this.linkDistance);
+                this.simulation?.alpha(0.3).restart();
+            }
         }
-        this.applyInteractions();
+        // simNodes/simLinks only ever change once per structural rebuild (see
+        // rebuildSimulation()'s doc comment) — never on a tick — so gating the
+        // node/link querySelectorAll scan on that is equivalent to "structurally
+        // changed" without needing a separate flag.
+        this.applyInteractions(changed.has('simNodes') || changed.has('simLinks'));
     }
     /**
      * Imperatively wires up d3-zoom (pan/zoom on the `<svg>`) and d3-drag
-     * (per-node drag) against the just-rendered DOM. Runs after every render:
-     * binding the `<svg>` is a one-time no-op guard (`zoomedEl`), and node
-     * `<circle>`s are skipped once bound (`boundNodeEls`) — a WeakSet reset on
-     * every `rebuildSimulation()` so DOM nodes Lit reuses across a rebuild get
+     * (per-node drag) against the just-rendered DOM. The zoom bind is a
+     * one-time no-op guard (`zoomedEl`); the node-drag bind + node/link/label
+     * element caching for `onTick()` only run when `structural` is true (a
+     * fresh structural render just happened), not on every call — otherwise
+     * this would re-scan the DOM via `querySelectorAll` on every Lit update,
+     * which used to include every single simulation tick. `<circle>`s already
+     * bound are skipped (`boundNodeEls`) — a WeakSet reset on every
+     * `rebuildSimulation()` so DOM nodes Lit reuses across a rebuild get
      * rebound against their new datum instead of a stale one.
      */
-    applyInteractions() {
+    applyInteractions(structural) {
         if (!this.d3)
             return;
         const svgEl = this.renderRoot.querySelector('svg');
         if (svgEl && svgEl !== this.zoomedEl) {
             this.zoomedEl = svgEl;
-            const zoomBehavior = this.d3.zoom().on('zoom', (event) => {
+            const zoomBehavior = this.d3
+                .zoom()
+                .scaleExtent([this.minZoom, this.maxZoom])
+                .on('zoom', (event) => {
                 this.transform = event.transform.toString();
             });
             this.d3.select(svgEl).call(zoomBehavior);
         }
-        const nodeEls = this.renderRoot.querySelectorAll('[part="node"]');
+        if (!structural)
+            return;
+        const nodeEls = Array.from(this.renderRoot.querySelectorAll('[part="node"]'));
+        this.nodeEls = nodeEls;
+        this.nodeLabelEls = nodeEls.map((el) => el.parentElement?.querySelector('[part="label"]') ?? null);
+        this.linkEls = Array.from(this.renderRoot.querySelectorAll('[part="link"]'));
         nodeEls.forEach((el, i) => {
             if (this.boundNodeEls.has(el))
                 return;
@@ -158,6 +219,43 @@ export class LyraGraph extends LyraElement {
             }));
         });
     }
+    /**
+     * Runs on every d3-force simulation tick (up to ~300 while a graph settles
+     * on load, continuously while a node is being dragged via
+     * `alphaTarget(0.3)`). Writes positions straight to the already-rendered
+     * DOM via direct d3-selection `.attr()` calls instead of reassigning the
+     * reactive `simNodes`/`simLinks` properties, which would force a full Lit
+     * re-render (and, before the `structural` gate above, an unconditional
+     * `querySelectorAll` scan) on every single frame.
+     */
+    onTick() {
+        if (!this.d3)
+            return;
+        const d3 = this.d3;
+        this.simNodes.forEach((n, i) => {
+            const circle = this.nodeEls[i];
+            if (circle)
+                d3.select(circle).attr('cx', n.x ?? 0).attr('cy', n.y ?? 0);
+            const label = this.nodeLabelEls[i];
+            if (label) {
+                d3.select(label)
+                    .attr('x', (n.x ?? 0) + this.nodeRadius(n) + 2)
+                    .attr('y', n.y ?? 0);
+            }
+        });
+        this.simLinks.forEach((l, i) => {
+            const line = this.linkEls[i];
+            if (!line)
+                return;
+            const source = l.source;
+            const target = l.target;
+            d3.select(line)
+                .attr('x1', source.x ?? 0)
+                .attr('y1', source.y ?? 0)
+                .attr('x2', target.x ?? 0)
+                .attr('y2', target.y ?? 0);
+        });
+    }
     rebuildSimulation() {
         if (!this.d3)
             return;
@@ -168,16 +266,25 @@ export class LyraGraph extends LyraElement {
         const links = this.links
             .filter((l) => byId.has(l.source) && byId.has(l.target))
             .map((l) => ({ ...l, source: byId.get(l.source), target: byId.get(l.target) }));
+        this.linkForce = this.d3.forceLink(links).distance(this.linkDistance);
+        this.chargeForce = this.d3.forceManyBody().strength(this.chargeStrength);
         this.simulation = this.d3
             .forceSimulation(nodes)
-            .force('link', this.d3.forceLink(links).distance(this.linkDistance))
-            .force('charge', this.d3.forceManyBody().strength(this.chargeStrength))
+            .force('link', this.linkForce)
+            .force('charge', this.chargeForce)
             .force('center', this.d3.forceCenter(this.width / 2, this.height / 2))
             .force('collide', this.d3.forceCollide().radius((n) => this.nodeRadius(n) + 10))
-            .on('tick', () => {
-            this.simNodes = [...nodes];
-            this.simLinks = [...links];
-        });
+            .on('tick', () => this.onTick());
+        // Assign these SAME array/object references (not copies) exactly once
+        // for this structural rebuild: forceSimulation(nodes) above already
+        // initialized their .x/.y synchronously, so this one Lit re-render
+        // creates the initial DOM with correct starting positions. Every
+        // subsequent tick mutates these same node/link objects in place and
+        // calls onTick() to write positions straight to the DOM — reassigning
+        // simNodes/simLinks on every tick (as before) would force a full Lit
+        // re-render up to ~300 times on load and continuously while dragging.
+        this.simNodes = nodes;
+        this.simLinks = links;
     }
     onNodeClick(node) {
         this.emit('lyra-node-click', { id: node.id });
@@ -215,7 +322,9 @@ export class LyraGraph extends LyraElement {
                 @click=${() => this.onLinkClick(l)}
               ></line>`;
         })}
-            ${this.simNodes.map((n) => svg `<g>
+            ${this.simNodes.map((n) => {
+            const fill = sanitizeNodeColor(n.color);
+            return svg `<g>
                 <circle
                   part="node"
                   role="button"
@@ -224,19 +333,20 @@ export class LyraGraph extends LyraElement {
                   r=${this.nodeRadius(n)}
                   cx=${n.x ?? 0}
                   cy=${n.y ?? 0}
-                  style=${n.color ? `--lyra-node-fill:${n.color}` : ''}
+                  style=${styleMap(fill ? { '--lyra-node-fill': fill } : {})}
                   @click=${() => this.onNodeClick(n)}
                   @keydown=${(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                this.onNodeClick(n);
-            }
-        }}
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.onNodeClick(n);
+                }
+            }}
                 ></circle>
                 ${n.label
-            ? svg `<text part="label" x=${(n.x ?? 0) + this.nodeRadius(n) + 2} y=${n.y ?? 0}>${n.label}</text>`
-            : ''}
-              </g>`)}
+                ? svg `<text part="label" x=${(n.x ?? 0) + this.nodeRadius(n) + 2} y=${n.y ?? 0}>${n.label}</text>`
+                : ''}
+              </g>`;
+        })}
           </g>
         </svg>
       </div>
@@ -261,6 +371,12 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: 'link-distance' })
 ], LyraGraph.prototype, "linkDistance", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min-zoom' })
+], LyraGraph.prototype, "minZoom", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-zoom' })
+], LyraGraph.prototype, "maxZoom", void 0);
 __decorate([
     state()
 ], LyraGraph.prototype, "loading", void 0);

package/dist/components/heatmap/calendar-grid.d.ts

@@ -0,0 +1,31 @@
+export interface CalendarDay {
+    /** ISO `yyyy-mm-dd` date string. */
+    date: string;
+    value: number;
+}
+export interface CalendarCell {
+    date: string;
+    value: number;
+    /** 0-based week column, counting from the grid's first (earliest-containing) Sunday. */
+    week: number;
+    /** 0 (Sunday) .. 6 (Saturday). */
+    weekday: number;
+}
+/** Parses a `yyyy-mm-dd` string as UTC midnight, avoiding local-timezone day-boundary drift. */
+export declare function parseIsoDate(iso: string): Date;
+/**
+ * Lays `days` out onto a GitHub-style Sunday-Saturday x week grid. `days`
+ * need not be sorted or contiguous; the grid spans from the earliest to the
+ * latest date present, anchored at the Sunday on/before the earliest date.
+ */
+export declare function buildCalendarGrid(days: CalendarDay[]): {
+    cells: CalendarCell[];
+    weekCount: number;
+    firstWeekStart: Date;
+    monthLabels: {
+        week: number;
+        label: string;
+    }[];
+};
+/** Splits `value`'s rank within `sorted` (ascending, pre-sorted by the caller) into `bucketCount` quartile-style buckets. */
+export declare function quartileBucket(value: number, sorted: number[], bucketCount: number): number;

package/dist/components/heatmap/calendar-grid.js

@@ -0,0 +1,52 @@
+const MS_PER_DAY = 86_400_000;
+/** Parses a `yyyy-mm-dd` string as UTC midnight, avoiding local-timezone day-boundary drift. */
+export function parseIsoDate(iso) {
+    const [y, m, d] = iso.split('-').map(Number);
+    return new Date(Date.UTC(y, m - 1, d));
+}
+/**
+ * Lays `days` out onto a GitHub-style Sunday-Saturday x week grid. `days`
+ * need not be sorted or contiguous; the grid spans from the earliest to the
+ * latest date present, anchored at the Sunday on/before the earliest date.
+ */
+export function buildCalendarGrid(days) {
+    if (days.length === 0) {
+        return { cells: [], weekCount: 0, firstWeekStart: new Date(0), monthLabels: [] };
+    }
+    const parsed = days.map((d) => ({ ...d, dateObj: parseIsoDate(d.date) }));
+    const minTime = Math.min(...parsed.map((d) => d.dateObj.getTime()));
+    const min = new Date(minTime);
+    const firstWeekStart = new Date(Date.UTC(min.getUTCFullYear(), min.getUTCMonth(), min.getUTCDate() - min.getUTCDay()));
+    const cells = parsed.map((d) => {
+        const weekday = d.dateObj.getUTCDay();
+        const daysSinceStart = Math.round((d.dateObj.getTime() - firstWeekStart.getTime()) / MS_PER_DAY);
+        const week = Math.floor(daysSinceStart / 7);
+        return { date: d.date, value: d.value, week, weekday };
+    });
+    const weekCount = Math.max(...cells.map((c) => c.week)) + 1;
+    const monthLabels = [];
+    let lastMonth = -1;
+    for (const cell of cells.slice().sort((a, b) => a.week - b.week)) {
+        const cellDate = parseIsoDate(cell.date);
+        const month = cellDate.getUTCMonth();
+        if (cell.weekday === 0 && month !== lastMonth) {
+            lastMonth = month;
+            monthLabels.push({
+                week: cell.week,
+                label: cellDate.toLocaleString('en', { month: 'short', timeZone: 'UTC' }),
+            });
+        }
+    }
+    return { cells, weekCount, firstWeekStart, monthLabels };
+}
+/** Splits `value`'s rank within `sorted` (ascending, pre-sorted by the caller) into `bucketCount` quartile-style buckets. */
+export function quartileBucket(value, sorted, bucketCount) {
+    if (sorted.length === 0)
+        return 0;
+    let count = 0;
+    for (const v of sorted)
+        if (v <= value)
+            count++;
+    const rank = count / sorted.length;
+    return Math.min(bucketCount - 1, Math.floor(rank * bucketCount));
+}

package/dist/components/heatmap/heatmap-scale.d.ts

@@ -1,5 +1,13 @@
 /** Maps `value` in `[lo, hi]` to a 0.1–1.0 alpha, matching the cd-heatmap ramp. */
 export declare function linearAlpha(value: number, lo: number, hi: number): number;
+/**
+ * Computes `[min, max]` of `values` via a linear scan, or `null` for an
+ * empty array. Deliberately not `Math.min(...values)`/`Math.max(...values)`
+ * — spreading a large array as call arguments throws `RangeError: Maximum
+ * call stack size exceeded` once the engine's argument-list limit is
+ * exceeded (verified at ~150k+ elements).
+ */
+export declare function minMax(values: number[]): [number, number] | null;
 /**
  * Square-root-scaled bucket index in `[0, steps-1]`, or `-1` for no-data.
  * Compresses large counts so a single heavy cell doesn't wash out the rest

package/dist/components/heatmap/heatmap-scale.js

@@ -4,6 +4,27 @@ export function linearAlpha(value, lo, hi) {
     const t = (value - lo) / span;
     return 0.1 + 0.9 * Math.min(1, Math.max(0, t));
 }
+/**
+ * Computes `[min, max]` of `values` via a linear scan, or `null` for an
+ * empty array. Deliberately not `Math.min(...values)`/`Math.max(...values)`
+ * — spreading a large array as call arguments throws `RangeError: Maximum
+ * call stack size exceeded` once the engine's argument-list limit is
+ * exceeded (verified at ~150k+ elements).
+ */
+export function minMax(values) {
+    if (values.length === 0)
+        return null;
+    let lo = values[0];
+    let hi = values[0];
+    for (let i = 1; i < values.length; i++) {
+        const v = values[i];
+        if (v < lo)
+            lo = v;
+        if (v > hi)
+            hi = v;
+    }
+    return [lo, hi];
+}
 /**
  * Square-root-scaled bucket index in `[0, steps-1]`, or `-1` for no-data.
  * Compresses large counts so a single heavy cell doesn't wash out the rest

package/dist/components/heatmap/heatmap.d.ts

@@ -1,5 +1,6 @@
 import { type TemplateResult } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
+import { type CalendarDay } from './calendar-grid.js';
 /**
  * Parses a strict `#rgb` or `#rrggbb` hex string into an `[r, g, b]` triple,
  * or `null` if `hex` isn't one (rather than silently coercing an unparsable
@@ -43,6 +44,18 @@ export declare class LyraHeatmap extends LyraElement {
     cellSize: number;
     valueLabel: string;
     scale: 'linear' | 'sqrt';
+    /**
+     * When set, `cellSize` is derived from the host's measured `clientWidth`
+     * on every draw (including ResizeObserver-triggered redraws) instead of
+     * the fixed `cell-size` attribute, so the grid actually fills the
+     * available width. Without this, canvas dimensions are computed purely
+     * from `PAD_LEFT + cols * cellSize`, so a resize-triggered redraw is a
+     * geometric no-op.
+     */
+    fitToWidth: boolean;
+    mode: 'matrix' | 'calendar';
+    days: CalendarDay[];
+    bucketCount: number;
     private canvas?;
     private resizeObserver?;
     private dprQuery?;
@@ -51,12 +64,18 @@ export declare class LyraHeatmap extends LyraElement {
     private watchDpr;
     private onDprChange;
     protected willUpdate(): void;
+    /** The real (non-no-data) value range across `values` (or `days` in calendar mode), or `null` if there is none. Shared by `willUpdate()`, `draw()`, and the legend. */
+    private valueRange;
     protected updated(): void;
     /** Reads the customizable ramp endpoints off the host's computed style. */
     private scaleEndpoints;
     /** Resolves the `--lyra-color-text-quiet` chrome token for axis labels. */
     private labelColor;
+    /** Reads the customizable no-data cell fill off the host's computed style. */
+    private noDataFill;
     private draw;
+    private drawCalendar;
+    private drawMatrix;
     render(): TemplateResult;
 }
 declare global {