@ruckc/truss-chart 1.6.0 → 1.8.0

package/dist/density.js

@@ -0,0 +1,149 @@
+/** Pure helpers for DensityChart: data preparation, single-pass binning, hit testing, view maths and the colour ramp. */
+import { MAX_SERIES } from './util.js';
+/**
+ * Normalises either input style into parallel arrays. Typed arrays are used as-is (no copy).
+ * Groups beyond the 8 palette slots, and points without a group in a grouped set, take slot 0.
+ */
+export function prepare(points, xs, ys, groupIds, groupNames) {
+    let px, py, g = null, names = [];
+    if (xs && ys) {
+        px = xs;
+        py = ys;
+        if (groupIds && groupNames?.length) {
+            g = groupIds;
+            names = groupNames.slice(0, MAX_SERIES);
+        }
+    }
+    else {
+        const pts = points ?? [];
+        const n = pts.length;
+        const fx = new Float64Array(n), fy = new Float64Array(n);
+        const ids = new Map();
+        let fg = null;
+        for (let i = 0; i < n; i++) {
+            const p = pts[i];
+            fx[i] = p.x;
+            fy[i] = p.y;
+            if (p.group != null) {
+                let id = ids.get(p.group);
+                if (id === undefined) {
+                    if (ids.size >= MAX_SERIES)
+                        id = 0;
+                    else {
+                        id = ids.size;
+                        ids.set(p.group, id);
+                    }
+                }
+                if (!fg)
+                    fg = new Uint8Array(n);
+                fg[i] = id;
+            }
+        }
+        px = fx;
+        py = fy;
+        g = fg;
+        names = [...ids.keys()];
+    }
+    const n = Math.min(px.length, py.length);
+    let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
+    for (let i = 0; i < n; i++) {
+        const x = px[i], y = py[i];
+        if (!Number.isFinite(x) || !Number.isFinite(y))
+            continue;
+        if (x < x0)
+            x0 = x;
+        if (x > x1)
+            x1 = x;
+        if (y < y0)
+            y0 = y;
+        if (y > y1)
+            y1 = y;
+    }
+    return { xs: px, ys: py, g, names, n, extent: x0 <= x1 ? { x0, x1, y0, y1 } : null };
+}
+/**
+ * Counts the points inside `v` into `out` (cols x rows, row 0 at the bottom, y up) in one pass, skipping hidden
+ * groups and non-finite values. Returns how many points fell inside the view. No allocation.
+ */
+export function bin(p, hid, v, cols, rows, out) {
+    out.fill(0, 0, cols * rows);
+    const { xs, ys, g, n } = p;
+    const sx = cols / (v.x1 - v.x0), sy = rows / (v.y1 - v.y0);
+    const lastC = cols - 1, lastR = rows - 1;
+    let inside = 0;
+    for (let i = 0; i < n; i++) {
+        const x = xs[i], y = ys[i];
+        // written so NaN fails every comparison
+        if (!(x >= v.x0 && x <= v.x1 && y >= v.y0 && y <= v.y1))
+            continue;
+        if (g !== null && hid[g[i]] === 1)
+            continue;
+        let c = ((x - v.x0) * sx) | 0, r = ((y - v.y0) * sy) | 0;
+        if (c > lastC)
+            c = lastC;
+        if (r > lastR)
+            r = lastR;
+        out[r * cols + c]++;
+        inside++;
+    }
+    return inside;
+}
+/** Index of the visible point nearest to the domain position (qx, qy) within `rx`/`ry` domain units, or -1. */
+export function nearest(p, hid, qx, qy, rx, ry) {
+    const { xs, ys, g, n } = p;
+    let best = -1, bd = 1;
+    for (let i = 0; i < n; i++) {
+        const dx = (xs[i] - qx) / rx;
+        if (!(dx >= -1 && dx <= 1))
+            continue;
+        const dy = (ys[i] - qy) / ry;
+        if (!(dy >= -1 && dy <= 1))
+            continue;
+        if (g !== null && hid[g[i]] === 1)
+            continue;
+        const d = dx * dx + dy * dy;
+        if (d <= bd) {
+            bd = d;
+            best = i;
+        }
+    }
+    return best;
+}
+const MIN_SPAN = 1e-7;
+export const isHome = (v, h) => v.x1 - v.x0 >= h.x1 - h.x0 && v.y1 - v.y0 >= h.y1 - h.y0;
+/** Keeps a window of the given span inside [h0, h1]. */
+function fit(lo, span, h0, h1) {
+    if (span >= h1 - h0)
+        return h0;
+    return Math.min(Math.max(lo, h0), h1 - span);
+}
+/** Zooms by factor `k` (>1 zooms in) keeping the point at fractions (fx, fy from the top) of the plot fixed. */
+export function zoomView(v, h, fx, fy, k) {
+    const sx = Math.min(h.x1 - h.x0, Math.max((h.x1 - h.x0) * MIN_SPAN, (v.x1 - v.x0) / k));
+    const sy = Math.min(h.y1 - h.y0, Math.max((h.y1 - h.y0) * MIN_SPAN, (v.y1 - v.y0) / k));
+    const ax = v.x0 + fx * (v.x1 - v.x0), ay = v.y1 - fy * (v.y1 - v.y0);
+    const x0 = fit(ax - fx * sx, sx, h.x0, h.x1), y1 = fit(ay - (1 - fy) * sy, sy, h.y0, h.y1);
+    return { x0, x1: x0 + sx, y0: y1, y1: y1 + sy };
+}
+/** Shifts the window by fractions of its own span (positive fx moves right, positive fy moves up). */
+export function panView(v, h, fx, fy) {
+    const sx = v.x1 - v.x0, sy = v.y1 - v.y0;
+    const x0 = fit(v.x0 + fx * sx, sx, h.x0, h.x1), y0 = fit(v.y0 + fy * sy, sy, h.y0, h.y1);
+    return { x0, x1: x0 + sx, y0, y1: y0 + sy };
+}
+/** Fallback sequential ramp (colour-blind safe, readable on light and dark surfaces); overridden by `--trc-seq-1..9`. */
+export const DEFAULT_RAMP = ['#3b528b', '#21918c', '#5ec962', '#fde725'];
+/** `#rrggbb` or `rgb[a](r, g, b…)` (the forms a canvas returns for fillStyle) to [r, g, b]. */
+export function parseColor(s) {
+    if (s[0] === '#')
+        return [parseInt(s.slice(1, 3), 16), parseInt(s.slice(3, 5), 16), parseInt(s.slice(5, 7), 16)];
+    const m = s.match(/[\d.]+/g).map(Number);
+    return [m[0], m[1], m[2]];
+}
+/** Interpolates the ramp at t in [0, 1]. */
+export function rampColor(stops, t) {
+    const pos = Math.min(Math.max(t, 0), 1) * (stops.length - 1);
+    const i = Math.min(Math.floor(pos), stops.length - 2), f = pos - i;
+    const a = stops[i], b = stops[i + 1];
+    return `rgb(${Math.round(a[0] + (b[0] - a[0]) * f)},${Math.round(a[1] + (b[1] - a[1]) * f)},${Math.round(a[2] + (b[2] - a[2]) * f)})`;
+}

package/dist/index.d.ts

@@ -4,6 +4,10 @@ export { default as DonutChart } from './DonutChart.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as Sparkline } from './Sparkline.svelte';
 export { default as ScatterChart } from './ScatterChart.svelte';
+export { default as DensityChart } from './DensityChart.svelte';
 export { default as StatTile } from './StatTile.svelte';
-export { seriesColor, niceTicks, linear } from './util.js';
-export type { Series, ScatterPoint } from './types.js';
+export { default as ColorScale } from './ColorScale.svelte';
+export { seriesColor, niceTicks, linear, gradientFrom } from './util.js';
+export type { ScaleKind } from './util.js';
+export type { Series, ScatterPoint, Band, ReferenceLine } from './types.js';
+export type { DensityPoint } from './density.js';

package/dist/index.js

@@ -4,5 +4,7 @@ export { default as DonutChart } from './DonutChart.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as Sparkline } from './Sparkline.svelte';
 export { default as ScatterChart } from './ScatterChart.svelte';
+export { default as DensityChart } from './DensityChart.svelte';
 export { default as StatTile } from './StatTile.svelte';
-export { seriesColor, niceTicks, linear } from './util.js';
+export { default as ColorScale } from './ColorScale.svelte';
+export { seriesColor, niceTicks, linear, gradientFrom } from './util.js';

package/dist/types.d.ts

@@ -20,3 +20,15 @@ export type ScatterPoint = {
     group?: string;
     label?: string;
 };
+/** Shaded envelope for `LineChart`: `lo`/`hi` align with `x` by index, `null` leaves a gap. */
+export type Band = {
+    lo: (number | null)[];
+    hi: (number | null)[];
+    color?: string;
+    label?: string;
+};
+export type ReferenceLine = {
+    value: number;
+    label?: string;
+    axis?: 'y';
+};

package/dist/util.d.ts

@@ -1,12 +1,27 @@
 export declare const MAX_SERIES = 8;
 /** Color follows the entity (its index in the full series list), never its rank among visible ones. */
 export declare const seriesColor: (i: number) => string;
+export type ScaleKind = 'sequential' | 'diverging';
+/** A CSS `linear-gradient` over the seven palette tokens (`--trc-seq-1..7` or `--trc-div-1..7`), low to high. `direction` is any gradient direction, default `to right`. Retheme-aware: it uses the tokens, not colours. */
+export declare const gradientFrom: (kind: ScaleKind, direction?: string) => string;
 export declare const linear: (d0: number, d1: number, r0: number, r1: number) => (v: number) => number;
+/** True for a finite value > 0: the only values a log axis can place. */
+export declare const isPos: (v: number | null | undefined) => v is number;
+/** Base-10 log scale; non-positive input clamps to the domain start. */
+export declare const logLinear: (d0: number, d1: number, r0: number, r1: number) => (v: number) => number;
+/** Ticks at powers of 10 covering [min, max]; the domain snaps outward to those powers. */
+export declare function logTicks(min: number, max: number): {
+    ticks: number[];
+    min: number;
+    max: number;
+};
 export declare function niceTicks(min: number, max: number, count?: number): {
     ticks: number[];
     min: number;
     max: number;
 };
+/** Text for a value a consumer-supplied formatter returned: nothing (not "undefined") when it returned nothing. */
+export declare const str: (v: unknown) => string;
 export declare const fmtAxis: (n: number) => string;
 export declare const fmtValue: (n: number) => string;
 export declare function fmtX(v: number, span: number, isDate: boolean): string;

package/dist/util.js

@@ -1,7 +1,30 @@
 export const MAX_SERIES = 8;
 /** Color follows the entity (its index in the full series list), never its rank among visible ones. */
 export const seriesColor = (i) => `var(--trc-s${(i % MAX_SERIES) + 1})`;
+/** A CSS `linear-gradient` over the seven palette tokens (`--trc-seq-1..7` or `--trc-div-1..7`), low to high. `direction` is any gradient direction, default `to right`. Retheme-aware: it uses the tokens, not colours. */
+export const gradientFrom = (kind, direction = 'to right') => {
+    const p = kind === 'diverging' ? 'div' : 'seq';
+    return `linear-gradient(${direction}, ${[1, 2, 3, 4, 5, 6, 7].map((i) => `var(--trc-${p}-${i})`).join(', ')})`;
+};
 export const linear = (d0, d1, r0, r1) => (v) => r0 + ((v - d0) / (d1 - d0 || 1)) * (r1 - r0);
+/** True for a finite value > 0: the only values a log axis can place. */
+export const isPos = (v) => v != null && v > 0 && isFinite(v);
+/** Base-10 log scale; non-positive input clamps to the domain start. */
+export const logLinear = (d0, d1, r0, r1) => {
+    const f = linear(Math.log10(d0), Math.log10(d1), r0, r1);
+    return (v) => f(Math.log10(v > 0 ? v : d0));
+};
+/** Ticks at powers of 10 covering [min, max]; the domain snaps outward to those powers. */
+export function logTicks(min, max) {
+    const lo = Math.floor(Math.log10(min));
+    let hi = Math.ceil(Math.log10(max));
+    if (hi === lo)
+        hi++;
+    const ticks = [];
+    for (let k = lo; k <= hi; k++)
+        ticks.push(10 ** k);
+    return { ticks, min: 10 ** lo, max: 10 ** hi };
+}
 export function niceTicks(min, max, count = 5) {
     if (min === max) {
         min -= 1;
@@ -21,6 +44,8 @@ export function niceTicks(min, max, count = 5) {
 }
 const compact = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 });
 const full = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 });
+/** Text for a value a consumer-supplied formatter returned: nothing (not "undefined") when it returned nothing. */
+export const str = (v) => (v == null ? '' : String(v));
 export const fmtAxis = (n) => compact.format(n);
 export const fmtValue = (n) => full.format(n);
 export function fmtX(v, span, isDate) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ruckc/truss-chart",
-	"version": "1.6.0",
+	"version": "1.8.0",
 	"description": "Zero-dependency SVG charts for Truss UI",
 	"type": "module",
 	"license": "MIT",