layerchart 2.0.0-next.46 → 2.0.0-next.48

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={xDomain} yDomain={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,31 @@
+<script lang="ts">
+  import Chart from '../components/Chart.svelte';
+  import Layer from '../components/layers/Layer.svelte';
+  import GeoPath from '../components/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/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/svg-vs-canvas.svelte.bench.d.ts

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