layerchart 2.0.0-next.6 → 2.0.0-next.60

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2024 Sean Lynch
+Copyright (c) 2026 Sean Lynch
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/bench/ComposableLineChart.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import Chart from '../components/Chart.svelte';
+  import Layer from '../components/layers/Layer.svelte';
+  import Axis from '../components/Axis.svelte';
+  import Spline from '../components/Spline.svelte';
+  import Highlight from '../components/Highlight.svelte';
+
+  type Props = {
+    data: any[];
+    x: string;
+    y?: string;
+    width?: number;
+    height?: number;
+    xDomain?: any;
+    yDomain?: any;
+    series?: any[];
+    layer?: 'svg' | 'canvas';
+    axis?: boolean;
+    highlight?: boolean;
+  };
+
+  let {
+    data,
+    x,
+    y,
+    width,
+    height,
+    xDomain,
+    yDomain,
+    series,
+    layer = 'svg',
+    axis = false,
+    highlight = false,
+  }: Props = $props();
+</script>
+
+<Chart {data} {x} {y} {width} {height} {series} {xDomain} {yDomain}>
+  <Layer type={layer}>
+    {#if axis}
+      <Axis placement="left" />
+      <Axis placement="bottom" />
+    {/if}
+
+    {#if series}
+      {#each series as s (s.key)}
+        <Spline seriesKey={s.key} />
+      {/each}
+    {:else}
+      <Spline />
+    {/if}
+
+    {#if highlight}
+      <Highlight />
+    {/if}
+  </Layer>
+</Chart>

package/dist/bench/ComposableLineChart.svelte.d.ts

@@ -0,0 +1,16 @@
+type Props = {
+    data: any[];
+    x: string;
+    y?: string;
+    width?: number;
+    height?: number;
+    xDomain?: any;
+    yDomain?: any;
+    series?: any[];
+    layer?: 'svg' | 'canvas';
+    axis?: boolean;
+    highlight?: boolean;
+};
+declare const ComposableLineChart: import("svelte").Component<Props, {}, "">;
+type ComposableLineChart = ReturnType<typeof ComposableLineChart>;
+export default ComposableLineChart;

package/dist/bench/GeoBench.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Chart from '../components/Chart.svelte';
+  import Layer from '../components/layers/Layer.svelte';
+  import GeoPath from '../components/geo/GeoPath.svelte';
+
+  type Props = {
+    features: any[];
+    fitGeojson: any;
+    projection: any;
+    layer?: 'svg' | 'canvas';
+    height?: number;
+    width?: number;
+  };
+
+  let { features, fitGeojson, projection, layer = 'svg', height = 400, width }: Props = $props();
+</script>
+
+<Chart geo={{ projection, fitGeojson }} {width} {height}>
+  <Layer type={layer}>
+    {#each features as feature, i (i)}
+      <GeoPath geojson={feature} class="fill-surface-content/10 stroke-surface-content/20" />
+    {/each}
+  </Layer>
+</Chart>

package/dist/bench/GeoBench.svelte.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    features: any[];
+    fitGeojson: any;
+    projection: any;
+    layer?: 'svg' | 'canvas';
+    height?: number;
+    width?: number;
+};
+declare const GeoBench: import("svelte").Component<Props, {}, "">;
+type GeoBench = ReturnType<typeof GeoBench>;
+export default GeoBench;

package/dist/bench/PrimitiveBench.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import Chart from '../components/Chart.svelte';
+  import Layer from '../components/layers/Layer.svelte';
+  import Rect from '../components/Rect.svelte';
+  import Circle from '../components/Circle.svelte';
+  import Ellipse from '../components/Ellipse.svelte';
+  import Line from '../components/Line.svelte';
+  import Group from '../components/Group.svelte';
+  import Text from '../components/Text.svelte';
+  import Path from '../components/Path.svelte';
+
+  type Primitive = 'rect' | 'circle' | 'ellipse' | 'line' | 'group' | 'text' | 'path';
+  type Mode = 'layerchart' | 'native';
+
+  type Props = {
+    primitive: Primitive;
+    mode: Mode;
+    count?: number;
+  };
+
+  let { primitive, mode, count = 100 }: Props = $props();
+</script>
+
+{#if mode === 'layerchart'}
+  <Chart width={500} height={300}>
+    <Layer type="svg">
+      {#each Array(count) as _, i (i)}
+        {#if primitive === 'rect'}
+          <Rect x={10} y={10} width={50} height={30} fill="steelblue" />
+        {:else if primitive === 'circle'}
+          <Circle cx={30} cy={30} r={15} fill="steelblue" />
+        {:else if primitive === 'ellipse'}
+          <Ellipse cx={30} cy={30} rx={20} ry={10} fill="steelblue" />
+        {:else if primitive === 'line'}
+          <Line x1={0} y1={0} x2={50} y2={50} stroke="steelblue" strokeWidth={2} />
+        {:else if primitive === 'group'}
+          <Group x={10} y={10} />
+        {:else if primitive === 'text'}
+          <Text x={10} y={20} value="Hello" fill="steelblue" />
+        {:else if primitive === 'path'}
+          <Path pathData="M0,0 L50,50 L100,0 Z" fill="none" stroke="steelblue" strokeWidth={2} />
+        {/if}
+      {/each}
+    </Layer>
+  </Chart>
+{:else}
+  <svg width={500} height={300}>
+    {#each Array(count) as _, i (i)}
+      {#if primitive === 'rect'}
+        <rect x={10} y={10} width={50} height={30} fill="steelblue" />
+      {:else if primitive === 'circle'}
+        <circle cx={30} cy={30} r={15} fill="steelblue" />
+      {:else if primitive === 'ellipse'}
+        <ellipse cx={30} cy={30} rx={20} ry={10} fill="steelblue" />
+      {:else if primitive === 'line'}
+        <line x1={0} y1={0} x2={50} y2={50} stroke="steelblue" stroke-width={2} />
+      {:else if primitive === 'group'}
+        <g transform="translate(10,10)"></g>
+      {:else if primitive === 'text'}
+        <text x={10} y={20} fill="steelblue">Hello</text>
+      {:else if primitive === 'path'}
+        <path d="M0,0 L50,50 L100,0 Z" fill="none" stroke="steelblue" stroke-width={2} />
+      {/if}
+    {/each}
+  </svg>
+{/if}

package/dist/bench/PrimitiveBench.svelte.d.ts

@@ -0,0 +1,10 @@
+type Primitive = 'rect' | 'circle' | 'ellipse' | 'line' | 'group' | 'text' | 'path';
+type Mode = 'layerchart' | 'native';
+type Props = {
+    primitive: Primitive;
+    mode: Mode;
+    count?: number;
+};
+declare const PrimitiveBench: import("svelte").Component<Props, {}, "">;
+type PrimitiveBench = ReturnType<typeof PrimitiveBench>;
+export default PrimitiveBench;

package/dist/bench/composable-vs-linechart.svelte.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/bench/composable-vs-linechart.svelte.bench.js

@@ -0,0 +1,100 @@
+import { describe, bench, afterEach } from 'vitest';
+import { render, cleanup } from 'vitest-browser-svelte';
+import LineChart from '../components/charts/LineChart.svelte';
+import ComposableLineChart from './ComposableLineChart.svelte';
+import { generateTimeSeriesData, generateMultiSeriesData } from './generateData.js';
+// SVG vs Canvas benchmarks are in svg-vs-canvas.svelte.bench.ts
+afterEach(() => {
+    cleanup();
+});
+// ── Composable API vs high-level LineChart ──────────────────────────
+describe('Composable vs LineChart — single series (500 pts)', () => {
+    const data = generateTimeSeriesData(500);
+    bench('LineChart (default features)', () => {
+        cleanup();
+        render(LineChart, { data, x: 'date', y: 'value', height: 300 });
+    });
+    bench('LineChart (minimal: no axis/highlight/tooltip)', () => {
+        cleanup();
+        render(LineChart, {
+            data,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            axis: false,
+            highlight: false,
+            tooltipContext: false,
+        });
+    });
+    bench('Composable: Chart + Layer + Spline only', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data,
+            x: 'date',
+            y: 'value',
+            height: 300,
+        });
+    });
+    bench('Composable: Chart + Layer + Spline + Axis', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            axis: true,
+        });
+    });
+    bench('Composable: Chart + Layer + Spline + Axis + Highlight', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            axis: true,
+            highlight: true,
+        });
+    });
+});
+// ── Composable vs LineChart — multi-series ──────────────────────────
+describe('Composable vs LineChart — 5 series (500 pts)', () => {
+    const keys = ['a', 'b', 'c', 'd', 'e'];
+    const data = generateMultiSeriesData(500, keys);
+    const series = keys.map((key) => ({ key, color: 'currentColor' }));
+    bench('LineChart with series', () => {
+        cleanup();
+        render(LineChart, { data, x: 'date', series, height: 300 });
+    });
+    bench('LineChart with series (minimal)', () => {
+        cleanup();
+        render(LineChart, {
+            data,
+            x: 'date',
+            series,
+            height: 300,
+            axis: false,
+            highlight: false,
+            tooltipContext: false,
+        });
+    });
+    bench('Composable with series (Spline only)', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data,
+            x: 'date',
+            series,
+            height: 300,
+        });
+    });
+    bench('Composable with series + Axis', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data,
+            x: 'date',
+            series,
+            height: 300,
+            axis: true,
+        });
+    });
+});

package/dist/bench/generateData.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Data generation utilities for benchmarks.
+ */
+import type { GeoPermissibleObjects } from 'd3-geo';
+export type TimeSeriesPoint = {
+    date: Date;
+    value: number;
+};
+export type MultiSeriesPoint = Record<string, Date | number>;
+/**
+ * Generate time series data with the given number of points.
+ */
+export declare function generateTimeSeriesData(count: number): TimeSeriesPoint[];
+/**
+ * Generate wide-format multi-series data (one row per date, multiple value columns).
+ */
+export declare function generateMultiSeriesData(count: number, seriesKeys: string[]): MultiSeriesPoint[];
+/**
+ * Generate separate data arrays for each series (long format).
+ */
+export declare function generateSeparateSeriesData(count: number, seriesKeys: string[]): Record<string, TimeSeriesPoint[]>;
+/**
+ * Generate a GeoJSON FeatureCollection with `count` polygon features.
+ * `verticesPerFeature` controls polygon boundary complexity.
+ */
+export declare function generateGeoFeatures(count: number, verticesPerFeature?: number): {
+    features: GeoPermissibleObjects[];
+    collection: GeoPermissibleObjects;
+};

package/dist/bench/generateData.js

@@ -0,0 +1,93 @@
+/**
+ * Data generation utilities for benchmarks.
+ */
+/**
+ * Generate time series data with the given number of points.
+ */
+export function generateTimeSeriesData(count) {
+    const start = new Date('2020-01-01').getTime();
+    const dayMs = 86_400_000;
+    const data = new Array(count);
+    let value = 50;
+    for (let i = 0; i < count; i++) {
+        value += (Math.random() - 0.5) * 10;
+        data[i] = {
+            date: new Date(start + i * dayMs),
+            value,
+        };
+    }
+    return data;
+}
+/**
+ * Generate wide-format multi-series data (one row per date, multiple value columns).
+ */
+export function generateMultiSeriesData(count, seriesKeys) {
+    const start = new Date('2020-01-01').getTime();
+    const dayMs = 86_400_000;
+    const data = new Array(count);
+    const values = Object.fromEntries(seriesKeys.map((k) => [k, 50]));
+    for (let i = 0; i < count; i++) {
+        const row = { date: new Date(start + i * dayMs) };
+        for (const key of seriesKeys) {
+            values[key] += (Math.random() - 0.5) * 10;
+            row[key] = values[key];
+        }
+        data[i] = row;
+    }
+    return data;
+}
+/**
+ * Generate separate data arrays for each series (long format).
+ */
+export function generateSeparateSeriesData(count, seriesKeys) {
+    const result = {};
+    for (const key of seriesKeys) {
+        result[key] = generateTimeSeriesData(count);
+    }
+    return result;
+}
+/**
+ * Generate a single polygon feature resembling a country-like shape.
+ * `vertexCount` controls the complexity of the polygon boundary.
+ */
+function generatePolygonFeature(centerLon, centerLat, size, vertexCount, id) {
+    const coords = [];
+    for (let i = 0; i < vertexCount; i++) {
+        const angle = (2 * Math.PI * i) / vertexCount;
+        const jitter = 0.5 + Math.random() * 0.5; // random radius variation
+        const lon = centerLon + size * jitter * Math.cos(angle);
+        const lat = centerLat + size * 0.6 * jitter * Math.sin(angle);
+        coords.push([lon, lat]);
+    }
+    // Close the ring
+    coords.push(coords[0]);
+    return {
+        type: 'Feature',
+        id,
+        properties: { name: `Region ${id}` },
+        geometry: {
+            type: 'Polygon',
+            coordinates: [coords],
+        },
+    };
+}
+/**
+ * Generate a GeoJSON FeatureCollection with `count` polygon features.
+ * `verticesPerFeature` controls polygon boundary complexity.
+ */
+export function generateGeoFeatures(count, verticesPerFeature = 20) {
+    const cols = Math.ceil(Math.sqrt(count));
+    const size = 300 / cols; // spread across ~300 degrees of longitude
+    const features = [];
+    for (let i = 0; i < count; i++) {
+        const col = i % cols;
+        const row = Math.floor(i / cols);
+        const lon = -150 + col * size + size / 2;
+        const lat = -60 + row * size + size / 2;
+        features.push(generatePolygonFeature(lon, lat, size * 0.4, verticesPerFeature, i));
+    }
+    return {
+        features,
+        collection: { type: 'FeatureCollection', features },
+    };
+}

package/dist/bench/primitives.svelte.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/bench/primitives.svelte.bench.js

@@ -0,0 +1,42 @@
+import { describe, bench, afterEach } from 'vitest';
+import { render, cleanup } from 'vitest-browser-svelte';
+import PrimitiveBench from './PrimitiveBench.svelte';
+afterEach(() => {
+    cleanup();
+});
+const COUNT = 100;
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// LayerChart primitives vs native SVG elements — 100 instances each
+//
+// Representative subset: rect (shape), circle (shape), group (container),
+// text (complex), path (path-based). Ellipse/line follow the same
+// architecture as rect/circle and would show the same ratio.
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+const PRIMITIVES = ['rect', 'circle', 'group', 'text', 'path'];
+for (const primitive of PRIMITIVES) {
+    describe(`${primitive} — ${COUNT} instances`, () => {
+        bench(`Native <${primitive}>`, () => {
+            cleanup();
+            render(PrimitiveBench, { primitive, mode: 'native', count: COUNT });
+        });
+        bench(`LayerChart <${primitive[0].toUpperCase()}${primitive.slice(1)}>`, () => {
+            cleanup();
+            render(PrimitiveBench, { primitive, mode: 'layerchart', count: COUNT });
+        });
+    });
+}
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Scaling: rect at 10, 100, 250 instances
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+describe('rect — scaling', () => {
+    for (const count of [10, 100, 250]) {
+        bench(`Native <rect> × ${count}`, () => {
+            cleanup();
+            render(PrimitiveBench, { primitive: 'rect', mode: 'native', count });
+        });
+        bench(`LayerChart <Rect> × ${count}`, () => {
+            cleanup();
+            render(PrimitiveBench, { primitive: 'rect', mode: 'layerchart', count });
+        });
+    }
+});

package/dist/bench/svg-vs-canvas.svelte.bench.d.ts

@@ -0,0 +1 @@
+export {};