layerchart 2.0.0-next.46 → 2.0.0-next.47

package/dist/utils/rasterInterpolate.js

@@ -0,0 +1,103 @@
+import { Delaunay } from 'd3-delaunay';
+/**
+ * Interpolate scattered 2D points onto a regular grid.
+ *
+ * @param points - Array of [x, y, value] triples in grid coordinates
+ * @param width - Grid width (columns)
+ * @param height - Grid height (rows)
+ * @param method - Interpolation method
+ * @returns Flat Float64Array of grid values (row-major, length = width * height)
+ */
+export function interpolateGrid(points, width, height, method = 'barycentric') {
+    const n = width * height;
+    const grid = new Float64Array(n);
+    if (points.length === 0) {
+        grid.fill(NaN);
+        return grid;
+    }
+    // Need at least 3 points for triangulation
+    if (points.length < 3) {
+        return interpolateNearest(points, width, height, grid);
+    }
+    switch (method) {
+        case 'none':
+            return interpolateNone(points, width, height, grid);
+        case 'nearest':
+            return interpolateNearest(points, width, height, grid);
+        case 'barycentric':
+            return interpolateBarycentric(points, width, height, grid);
+        default:
+            return interpolateBarycentric(points, width, height, grid);
+    }
+}
+/** Only fill grid cells that directly contain a data point */
+function interpolateNone(points, width, _height, grid) {
+    grid.fill(NaN);
+    for (const [x, y, value] of points) {
+        const ix = Math.round(x);
+        const iy = Math.round(y);
+        if (ix >= 0 && ix < width && iy >= 0 && iy < grid.length / width) {
+            grid[iy * width + ix] = value;
+        }
+    }
+    return grid;
+}
+/** Assign each grid cell the value of its nearest data point (Voronoi) */
+function interpolateNearest(points, width, height, grid) {
+    const delaunay = Delaunay.from(points, (d) => d[0], (d) => d[1]);
+    for (let j = 0; j < height; j++) {
+        for (let i = 0; i < width; i++) {
+            const idx = delaunay.find(i + 0.5, j + 0.5);
+            grid[j * width + i] = points[idx][2];
+        }
+    }
+    return grid;
+}
+/** Delaunay triangulation with barycentric interpolation within triangles */
+function interpolateBarycentric(points, width, height, grid) {
+    const delaunay = Delaunay.from(points, (d) => d[0], (d) => d[1]);
+    const { triangles } = delaunay;
+    const numTriangles = triangles.length / 3;
+    // Build per-point triangle adjacency for fast lookup
+    const pointTriangles = Array.from({ length: points.length }, () => []);
+    for (let t = 0; t < numTriangles; t++) {
+        pointTriangles[triangles[t * 3]].push(t);
+        pointTriangles[triangles[t * 3 + 1]].push(t);
+        pointTriangles[triangles[t * 3 + 2]].push(t);
+    }
+    for (let j = 0; j < height; j++) {
+        for (let i = 0; i < width; i++) {
+            const px = i + 0.5;
+            const py = j + 0.5;
+            const nearest = delaunay.find(px, py);
+            let value = NaN;
+            // Check triangles incident to the nearest point
+            for (const t of pointTriangles[nearest]) {
+                const i0 = triangles[t * 3];
+                const i1 = triangles[t * 3 + 1];
+                const i2 = triangles[t * 3 + 2];
+                const x0 = points[i0][0], y0 = points[i0][1];
+                const x1 = points[i1][0], y1 = points[i1][1];
+                const x2 = points[i2][0], y2 = points[i2][1];
+                // Barycentric coordinates
+                const denom = (y1 - y2) * (x0 - x2) + (x2 - x1) * (y0 - y2);
+                if (Math.abs(denom) < 1e-10)
+                    continue;
+                const w0 = ((y1 - y2) * (px - x2) + (x2 - x1) * (py - y2)) / denom;
+                const w1 = ((y2 - y0) * (px - x2) + (x0 - x2) * (py - y2)) / denom;
+                const w2 = 1 - w0 - w1;
+                // Point is inside triangle (with small epsilon for edge cases)
+                if (w0 >= -1e-6 && w1 >= -1e-6 && w2 >= -1e-6) {
+                    value = w0 * points[i0][2] + w1 * points[i1][2] + w2 * points[i2][2];
+                    break;
+                }
+            }
+            // Fallback for points outside convex hull
+            if (isNaN(value)) {
+                value = points[nearest][2];
+            }
+            grid[j * width + i] = value;
+        }
+    }
+    return grid;
+}

package/dist/utils/rect.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ChartContextValue } from '../contexts/chart.js';
+import type { ChartState } from '../states/chart.svelte.js';
 import { type Accessor } from './common.js';
 /**
  * A set of inset distances, applied to a rectangle to shrink or expand
@@ -31,7 +31,14 @@ type DimensionGetterOptions = {
     y1?: Accessor;
     insets?: Insets;
 };
-export declare function createDimensionGetter<TData>(ctx: ChartContextValue<TData>, getOptions?: () => DimensionGetterOptions): (item: TData) => {
+export type ResolvedInsets = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+export declare function resolveInsets(insets?: Insets): ResolvedInsets;
+export declare function createDimensionGetter<TData>(ctx: ChartState<TData>, getOptions?: () => DimensionGetterOptions): (item: TData) => {
     x: any;
     y: any;
     width: number;

package/dist/utils/rect.svelte.js

@@ -1,7 +1,7 @@
 import { max, min } from 'd3-array';
 import { accessor } from './common.js';
 import { isScaleBand } from './scales.svelte.js';
-function resolveInsets(insets) {
+export function resolveInsets(insets) {
     const all = insets?.all ?? 0;
     const x = insets?.x ?? all;
     const y = insets?.y ?? all;

package/dist/utils/scales.svelte.d.ts

@@ -54,7 +54,7 @@ export declare function scaleBandInvert(scale: ScaleBand<any>): (value: number)
  */
 export declare function scaleInvert(scale: AnyScale<any, any>, value: number): any;
 /** Create new copy of scale with domain and range */
-export declare function createScale(scale: AnyScale, domain: DomainType, range: any[] | readonly any[] | Function, context?: Record<any, any>): AnyScale<any, any, any[]>;
+export declare function createScale(scale: AnyScale, domain: DomainType, range?: any[] | readonly any[] | Function, context?: Record<any, any>): AnyScale<any, any, any[]>;
 /**
  * Auto-detect scale type based on domain values or data values
  */

package/dist/utils/scales.svelte.js

@@ -84,11 +84,13 @@ export function createScale(scale, domain, range, context) {
     if (domain) {
         scaleCopy.domain(domain);
     }
-    if (typeof range === 'function') {
-        scaleCopy.range(range(context));
-    }
-    else {
-        scaleCopy.range(range);
+    if (range != null) {
+        if (typeof range === 'function') {
+            scaleCopy.range(range(context));
+        }
+        else {
+            scaleCopy.range(range);
+        }
     }
     return scaleCopy;
 }

package/dist/utils/stats.d.ts

@@ -0,0 +1,33 @@
+export interface BoxStats {
+    min: number;
+    q1: number;
+    median: number;
+    q3: number;
+    max: number;
+    outliers: number[];
+}
+/**
+ * Compute box plot statistics (five-number summary + outliers) from raw numeric values.
+ * Uses the standard Tukey method: outliers are values beyond `k * IQR` from Q1/Q3.
+ *
+ * @param values - Array of numeric values
+ * @param k - IQR multiplier for outlier detection (default: 1.5)
+ */
+export declare function computeBoxStats(values: number[], k?: number): BoxStats;
+/**
+ * Compute kernel density estimation (KDE) for a set of numeric values.
+ * Returns an array of [value, density] pairs suitable for rendering violin plots.
+ *
+ * @param values - Array of numeric values
+ * @param options - KDE configuration
+ */
+export declare function kde(values: number[], options?: {
+    /** KDE bandwidth. Defaults to Silverman's rule of thumb. */
+    bandwidth?: number;
+    /** Number of evaluation points, or explicit array of thresholds. Default: 50 */
+    thresholds?: number | number[];
+    /** Kernel function factory. Default: Epanechnikov */
+    kernel?: (bandwidth: number) => (x: number) => number;
+    /** Domain extent [min, max]. Defaults to data extent. */
+    extent?: [number, number];
+}): [number, number][];

package/dist/utils/stats.js

@@ -0,0 +1,79 @@
+import { quantile, ascending, deviation } from 'd3-array';
+/**
+ * Compute box plot statistics (five-number summary + outliers) from raw numeric values.
+ * Uses the standard Tukey method: outliers are values beyond `k * IQR` from Q1/Q3.
+ *
+ * @param values - Array of numeric values
+ * @param k - IQR multiplier for outlier detection (default: 1.5)
+ */
+export function computeBoxStats(values, k = 1.5) {
+    const sorted = Float64Array.from(values).sort();
+    const q1 = quantile(sorted, 0.25);
+    const q3 = quantile(sorted, 0.75);
+    const median = quantile(sorted, 0.5);
+    const iqr = q3 - q1;
+    const lowerFence = q1 - k * iqr;
+    const upperFence = q3 + k * iqr;
+    const outliers = [];
+    let min = Infinity;
+    let max = -Infinity;
+    for (const v of sorted) {
+        if (v < lowerFence || v > upperFence) {
+            outliers.push(v);
+        }
+        else {
+            if (v < min)
+                min = v;
+            if (v > max)
+                max = v;
+        }
+    }
+    // If no non-outlier values, use q1/q3 as min/max
+    if (min === Infinity)
+        min = q1;
+    if (max === -Infinity)
+        max = q3;
+    return { min, q1, median, q3, max, outliers };
+}
+/**
+ * Epanechnikov kernel function.
+ * Optimal kernel for minimizing mean integrated squared error.
+ */
+function epanechnikov(bandwidth) {
+    return (x) => {
+        const u = x / bandwidth;
+        return Math.abs(u) <= 1 ? (0.75 * (1 - u * u)) / bandwidth : 0;
+    };
+}
+/**
+ * Compute kernel density estimation (KDE) for a set of numeric values.
+ * Returns an array of [value, density] pairs suitable for rendering violin plots.
+ *
+ * @param values - Array of numeric values
+ * @param options - KDE configuration
+ */
+export function kde(values, options = {}) {
+    const { kernel = epanechnikov, thresholds: thresholdsProp = 50 } = options;
+    const sorted = [...values].sort(ascending);
+    if (sorted.length === 0)
+        return [];
+    const ext = options.extent ?? [sorted[0], sorted[sorted.length - 1]];
+    // Silverman's rule of thumb for bandwidth
+    const bw = options.bandwidth ?? 1.06 * (deviation(sorted) ?? 1) * Math.pow(sorted.length, -1 / 5);
+    const kernelFn = kernel(bw);
+    // Generate evaluation thresholds
+    let ticks;
+    if (Array.isArray(thresholdsProp)) {
+        ticks = thresholdsProp;
+    }
+    else {
+        const n = Math.max(2, thresholdsProp);
+        const step = (ext[1] - ext[0]) / (n - 1);
+        ticks = Array.from({ length: n }, (_, i) => ext[0] + i * step);
+    }
+    // Compute density at each threshold
+    return ticks.map((t) => {
+        const density = values.reduce((sum, v) => sum + kernelFn(t - v), 0) / values.length;
+        return [t, density];
+    });
+}

package/dist/utils/types.d.ts

@@ -14,11 +14,20 @@ export declare function asAny(x: any): any;
  *
  * @template T - The base object type from which properties will be omitted.
  * @template U - The object type whose properties will be omitted from 'T'.
+ *
  * @example
  * type Result = Without<{ a: number; b: string; }, { b: string; }>;
  * // Result type will be { a: number; }
  */
 export type Without<T extends object, U extends object> = Omit<T, keyof U>;
+/**
+ * Extracts the non-nullable array type from a type that may include nulls.
+ *
+ * @example
+ * type Result = NonNullArray<(number | null)[]>;
+ * // Result type will be number[].
+ */
+export type NonNullArray<T> = T extends (infer U | null)[] ? U[] : never;
 export type AxisKey = 'x' | 'y' | 'z' | 'r';
 export type Extents = {
     [K in AxisKey]?: Array<number | string>;
@@ -71,6 +80,10 @@ export type CommonStyleProps = {
      * The stroke color of the element.
      */
     stroke?: string;
+    /**
+     * The stroke opacity of the element. (0 to 1)
+     */
+    strokeOpacity?: number;
     /**
      * The stroke width of the element.
      */

package/package.json

@@ -5,18 +5,20 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.46",
+  "version": "2.0.0-next.47",
   "devDependencies": {
-    "@changesets/cli": "^2.29.8",
+    "@changesets/cli": "^2.30.0",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.52.2",
+    "@sveltejs/kit": "^2.55.0",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@types/d3": "^7.4.3",
     "@types/d3-array": "^3.2.2",
+    "@types/d3-chord": "^3.0.6",
     "@types/d3-color": "^3.1.3",
     "@types/d3-delaunay": "^6.0.4",
+    "@types/d3-dsv": "^3.0.7",
     "@types/d3-force": "^3.0.10",
     "@types/d3-geo": "^3.1.0",
     "@types/d3-hierarchy": "^3.1.7",
@@ -30,20 +32,20 @@
     "@types/d3-scale-chromatic": "^3.1.0",
     "@types/d3-shape": "^3.1.8",
     "@types/d3-time": "^3.0.4",
-    "@vitest/browser": "^4.0.18",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/ui": "^4.0.18",
+    "@vitest/browser": "^4.1.0",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vitest/ui": "^4.1.0",
     "playwright": "^1.58.2",
     "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.5.0",
-    "svelte": "5.53.0",
-    "svelte-check": "^4.4.1",
-    "svelte2tsx": "^0.7.49",
+    "prettier-plugin-svelte": "^3.5.1",
+    "svelte": "5.54.1",
+    "svelte-check": "^4.4.5",
+    "svelte2tsx": "^0.7.52",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18",
-    "vitest-browser-svelte": "^2.0.2"
+    "vite": "^8.0.1",
+    "vitest": "^4.1.0",
+    "vitest-browser-svelte": "^2.1.0"
   },
   "type": "module",
   "dependencies": {
@@ -52,8 +54,11 @@
     "@layerstack/svelte-state": "0.1.0-next.23",
     "@layerstack/tailwind": "2.0.0-next.21",
     "@layerstack/utils": "2.0.0-next.18",
+    "@types/d3-contour": "^3.0.6",
     "d3-array": "^3.2.4",
+    "d3-chord": "^3.0.1",
     "d3-color": "^3.1.0",
+    "d3-contour": "^4.0.2",
     "d3-delaunay": "^6.0.4",
     "d3-dsv": "^3.0.1",
     "d3-force": "^3.0.0",
@@ -106,6 +111,12 @@
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "TZ=UTC-5 vitest",
     "test:ui": "TZ=UTC-5 vitest --ui",
+    "bench": "pnpm bench:linechart && pnpm bench:composable && pnpm bench:svg-vs-canvas",
+    "bench:linechart": "TZ=UTC-5 vitest bench --project bench src/lib/components/charts/LineChart.svelte.bench.ts",
+    "bench:composable": "TZ=UTC-5 vitest bench --project bench src/lib/bench/composable-vs-linechart.svelte.bench.ts",
+    "bench:svg-vs-canvas": "TZ=UTC-5 vitest bench --project bench src/lib/bench/svg-vs-canvas.svelte.bench.ts",
+    "bench:save": "TZ=UTC-5 vitest bench --project bench --outputJson bench-results/latest.json",
+    "bench:compare": "TZ=UTC-5 vitest bench --project bench --compare bench-results/latest.json",
     "lint": "prettier --check .",
     "format": "prettier --write ."
   }

package/dist/components/GeoContext.svelte

@@ -1,160 +0,0 @@
-<script lang="ts" module>
-  import type { Snippet } from 'svelte';
-  import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
-
-  import { setGeoContext, type GeoContextValue } from '../contexts/geo.js';
-  import { getTransformContext } from '../contexts/transform.js';
-  import { getChartContext } from '../contexts/chart.js';
-
-  export type GeoContextProps = {
-    /**
-     * A d3 projection function. Pass this in as an uncalled function, e.g.
-     * `projection={geoAlbersUsa}`.
-     */
-    projection?: () => GeoProjection;
-    fitGeojson?: GeoPermissibleObjects;
-    /**
-     * By default, the map fills to fit the $width and $height. If instead you want a
-     * fixed-aspect ratio, like for a server-side rendered map, set that here.
-     */
-    fixedAspectRatio?: number;
-    clipAngle?: number;
-    clipExtent?: [[number, number], [number, number]];
-    rotate?: {
-      /** Lambda (Center Meridian) */
-      yaw: number;
-      /** Phi */
-      pitch: number;
-      /** Gamma */
-      roll: number;
-    };
-    scale?: number;
-    translate?: [number, number];
-    center?: [number, number];
-    /**
-     * Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are
-     * mutually selected
-     */
-    applyTransform?: ('scale' | 'translate' | 'rotate')[];
-    reflectX?: boolean;
-    reflectY?: boolean;
-    /**
-     * Exposed to allow binding in Chart
-     *
-     * @bindable
-     */
-    geoContext?: GeoContextValue;
-
-    children: Snippet<[{ geoContext: GeoContextValue }]>;
-  };
-</script>
-
-<script lang="ts">
-  let {
-    projection: projectionProp,
-    fitGeojson,
-    fixedAspectRatio,
-    clipAngle,
-    clipExtent,
-    rotate,
-    scale,
-    translate,
-    center,
-    applyTransform = [],
-    reflectX,
-    reflectY,
-    geoContext: geoContextProp = $bindable() as GeoContextValue,
-    children,
-  }: GeoContextProps = $props();
-
-  const ctx = getChartContext();
-  const transformCtx = getTransformContext();
-
-  let projection = $state<GeoProjection>();
-
-  const geoContext = {
-    get projection() {
-      return projection;
-    },
-    set projection(v: GeoProjection | undefined) {
-      projection = v;
-    },
-  };
-
-  geoContextProp = geoContext;
-
-  setGeoContext(geoContext);
-
-  const fitSizeRange = $derived(
-    fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [ctx.width, ctx.height]
-  ) as [number, number];
-
-  $effect.pre(() => {
-    if (!projectionProp) return;
-    const _projection = projectionProp();
-
-    if (fitGeojson && 'fitSize' in _projection) {
-      _projection.fitSize(fitSizeRange, fitGeojson);
-    }
-
-    if ('scale' in _projection) {
-      if (scale) {
-        _projection.scale(scale);
-      }
-
-      if (applyTransform.includes('scale')) {
-        _projection.scale(transformCtx.scale);
-      }
-    }
-
-    if ('rotate' in _projection) {
-      if (rotate) {
-        _projection.rotate([rotate.yaw, rotate.pitch, rotate.roll]);
-      }
-
-      if (applyTransform.includes('rotate')) {
-        _projection.rotate([
-          transformCtx.translate.x, // yaw
-          transformCtx.translate.y, // pitch
-          // TODO: `roll` from `transformContext`?
-        ]);
-      }
-    }
-
-    if ('translate' in _projection) {
-      if (translate) {
-        _projection.translate(translate);
-      }
-
-      if (applyTransform.includes('translate')) {
-        _projection.translate([transformCtx.translate.x, transformCtx.translate.y]);
-      }
-    }
-
-    if (center && 'center' in _projection) {
-      _projection.center(center);
-    }
-
-    if (reflectX) {
-      _projection.reflectX(reflectX);
-    }
-
-    if (reflectY) {
-      _projection.reflectY(reflectY);
-    }
-
-    if (clipAngle && 'clipAngle' in _projection) {
-      _projection.clipAngle(clipAngle);
-    }
-
-    if (clipExtent && 'clipExtent' in _projection) {
-      _projection.clipExtent(clipExtent);
-    }
-
-    geoContext.projection = _projection;
-  });
-</script>
-
-{@render children({
-  geoContext,
-})}