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

package/dist/bench/svg-vs-canvas.svelte.bench.js

@@ -0,0 +1,431 @@
+import { describe, bench, afterEach } from 'vitest';
+import { render, cleanup } from 'vitest-browser-svelte';
+import { geoNaturalEarth1, geoOrthographic, geoMercator } from 'd3-geo';
+import ComposableLineChart from './ComposableLineChart.svelte';
+import GeoBench from './GeoBench.svelte';
+import { generateTimeSeriesData, generateMultiSeriesData, generateGeoFeatures, } from './generateData.js';
+afterEach(() => {
+    cleanup();
+});
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// LINE CHARTS — large datasets
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+describe('SVG vs Canvas — single line, large datasets', () => {
+    const data5k = generateTimeSeriesData(5_000);
+    const data10k = generateTimeSeriesData(10_000);
+    const data25k = generateTimeSeriesData(25_000);
+    const data50k = generateTimeSeriesData(50_000);
+    bench('SVG — 5K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data5k,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 5K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data5k,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 10K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data10k,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 10K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data10k,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 25K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data25k,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 25K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data25k,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 50K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data50k,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 50K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data50k,
+            x: 'date',
+            y: 'value',
+            height: 300,
+            layer: 'canvas',
+        });
+    });
+});
+describe('SVG vs Canvas — multi-series, large datasets', () => {
+    const keys5 = ['a', 'b', 'c', 'd', 'e'];
+    const keys10 = Array.from({ length: 10 }, (_, i) => `s${i}`);
+    const series5 = keys5.map((key) => ({ key, color: 'currentColor' }));
+    const series10 = keys10.map((key) => ({ key, color: 'currentColor' }));
+    const data5s_2k = generateMultiSeriesData(2_000, keys5);
+    const data5s_5k = generateMultiSeriesData(5_000, keys5);
+    const data5s_10k = generateMultiSeriesData(10_000, keys5);
+    const data10s_2k = generateMultiSeriesData(2_000, keys10);
+    const data10s_5k = generateMultiSeriesData(5_000, keys10);
+    bench('SVG — 5 series × 2K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data5s_2k,
+            x: 'date',
+            series: series5,
+            height: 300,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 5 series × 2K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data5s_2k,
+            x: 'date',
+            series: series5,
+            height: 300,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 5 series × 5K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data5s_5k,
+            x: 'date',
+            series: series5,
+            height: 300,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 5 series × 5K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data5s_5k,
+            x: 'date',
+            series: series5,
+            height: 300,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 5 series × 10K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data5s_10k,
+            x: 'date',
+            series: series5,
+            height: 300,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 5 series × 10K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data5s_10k,
+            x: 'date',
+            series: series5,
+            height: 300,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 10 series × 2K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data10s_2k,
+            x: 'date',
+            series: series10,
+            height: 300,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 10 series × 2K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data10s_2k,
+            x: 'date',
+            series: series10,
+            height: 300,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 10 series × 5K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data10s_5k,
+            x: 'date',
+            series: series10,
+            height: 300,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 10 series × 5K pts', () => {
+        cleanup();
+        render(ComposableLineChart, {
+            data: data10s_5k,
+            x: 'date',
+            series: series10,
+            height: 300,
+            layer: 'canvas',
+        });
+    });
+});
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// GEO — feature count scaling
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+describe('SVG vs Canvas — geo feature count (20 vertices each)', () => {
+    const geo25 = generateGeoFeatures(25, 20);
+    const geo50 = generateGeoFeatures(50, 20);
+    const geo100 = generateGeoFeatures(100, 20);
+    const geo250 = generateGeoFeatures(250, 20);
+    bench('SVG — 25 features', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo25.features,
+            fitGeojson: geo25.collection,
+            projection: geoNaturalEarth1,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 25 features', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo25.features,
+            fitGeojson: geo25.collection,
+            projection: geoNaturalEarth1,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 50 features', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo50.features,
+            fitGeojson: geo50.collection,
+            projection: geoNaturalEarth1,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 50 features', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo50.features,
+            fitGeojson: geo50.collection,
+            projection: geoNaturalEarth1,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 100 features', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo100.features,
+            fitGeojson: geo100.collection,
+            projection: geoNaturalEarth1,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 100 features', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo100.features,
+            fitGeojson: geo100.collection,
+            projection: geoNaturalEarth1,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 250 features', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo250.features,
+            fitGeojson: geo250.collection,
+            projection: geoNaturalEarth1,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 250 features', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo250.features,
+            fitGeojson: geo250.collection,
+            projection: geoNaturalEarth1,
+            layer: 'canvas',
+        });
+    });
+});
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// GEO — polygon complexity (vertices per feature)
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+describe('SVG vs Canvas — geo polygon complexity (50 features)', () => {
+    const simple = generateGeoFeatures(50, 8);
+    const medium = generateGeoFeatures(50, 30);
+    const complex = generateGeoFeatures(50, 80);
+    const veryComplex = generateGeoFeatures(50, 200);
+    bench('SVG — 8 vertices/feature', () => {
+        cleanup();
+        render(GeoBench, {
+            features: simple.features,
+            fitGeojson: simple.collection,
+            projection: geoNaturalEarth1,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 8 vertices/feature', () => {
+        cleanup();
+        render(GeoBench, {
+            features: simple.features,
+            fitGeojson: simple.collection,
+            projection: geoNaturalEarth1,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 30 vertices/feature', () => {
+        cleanup();
+        render(GeoBench, {
+            features: medium.features,
+            fitGeojson: medium.collection,
+            projection: geoNaturalEarth1,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 30 vertices/feature', () => {
+        cleanup();
+        render(GeoBench, {
+            features: medium.features,
+            fitGeojson: medium.collection,
+            projection: geoNaturalEarth1,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 80 vertices/feature', () => {
+        cleanup();
+        render(GeoBench, {
+            features: complex.features,
+            fitGeojson: complex.collection,
+            projection: geoNaturalEarth1,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 80 vertices/feature', () => {
+        cleanup();
+        render(GeoBench, {
+            features: complex.features,
+            fitGeojson: complex.collection,
+            projection: geoNaturalEarth1,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — 200 vertices/feature', () => {
+        cleanup();
+        render(GeoBench, {
+            features: veryComplex.features,
+            fitGeojson: veryComplex.collection,
+            projection: geoNaturalEarth1,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — 200 vertices/feature', () => {
+        cleanup();
+        render(GeoBench, {
+            features: veryComplex.features,
+            fitGeojson: veryComplex.collection,
+            projection: geoNaturalEarth1,
+            layer: 'canvas',
+        });
+    });
+});
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// GEO — projection type comparison
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+describe('SVG vs Canvas — projection types (75 features)', () => {
+    const geo = generateGeoFeatures(75, 20);
+    bench('SVG — NaturalEarth1', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo.features,
+            fitGeojson: geo.collection,
+            projection: geoNaturalEarth1,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — NaturalEarth1', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo.features,
+            fitGeojson: geo.collection,
+            projection: geoNaturalEarth1,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — Mercator', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo.features,
+            fitGeojson: geo.collection,
+            projection: geoMercator,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — Mercator', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo.features,
+            fitGeojson: geo.collection,
+            projection: geoMercator,
+            layer: 'canvas',
+        });
+    });
+    bench('SVG — Orthographic', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo.features,
+            fitGeojson: geo.collection,
+            projection: geoOrthographic,
+            layer: 'svg',
+        });
+    });
+    bench('Canvas — Orthographic', () => {
+        cleanup();
+        render(GeoBench, {
+            features: geo.features,
+            fitGeojson: geo.collection,
+            projection: geoOrthographic,
+            layer: 'canvas',
+        });
+    });
+});

package/dist/components/AnnotationLine.svelte

@@ -5,12 +5,24 @@
   import type { SingleDomainType } from '../utils/scales.svelte.js';
 
   export type AnnotationLinePropsWithoutHTML = {
-    /** x value of the point */
+    /** x value of the line (draws vertically across the full y range) */
     x?: SingleDomainType;
 
-    /** y value of the point */
+    /** y value of the line (draws horizontally across the full x range) */
     y?: SingleDomainType;
 
+    /** x value of the line's start point. Takes precedence over `x`. Defaults to the start of the x range. */
+    x1?: SingleDomainType;
+
+    /** y value of the line's start point. Takes precedence over `y`. Defaults to the start of the y range. */
+    y1?: SingleDomainType;
+
+    /** x value of the line's end point. Takes precedence over `x`. Defaults to the end of the x range. */
+    x2?: SingleDomainType;
+
+    /** y value of the line's end point. Takes precedence over `y`. Defaults to the end of the y range. */
+    y2?: SingleDomainType;
+
     /** Label to display for line*/
     label?: string;
 
@@ -35,7 +47,7 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import Line from './Line.svelte';
   import Text from './Text.svelte';
   import type { Placement } from './types.js';
@@ -45,6 +57,10 @@
   const {
     x,
     y,
+    x1: x1Prop,
+    y1: y1Prop,
+    x2: x2Prop,
+    y2: y2Prop,
     label,
     labelPlacement = 'top-right',
     labelXOffset = 0,
@@ -54,74 +70,102 @@
 
   const ctx = getChartContext();
 
-  const isVertical = $derived(x != null);
+  const isVertical = $derived(x != null || (x1Prop != null && x2Prop != null && x1Prop === x2Prop));
 
   const line = $derived({
-    x1: x ? ctx.xScale(x) : ctx.xRange[0],
-    y1: y && !x ? ctx.yScale(y) : ctx.yRange[0],
-    x2: x ? ctx.xScale(x) : ctx.xRange[1],
-    y2: y ? ctx.yScale(y) : ctx.yRange[1],
+    x1: x1Prop != null ? ctx.xScale(x1Prop) : x != null ? ctx.xScale(x) : ctx.xRange[0],
+    y1:
+      y1Prop != null ? ctx.yScale(y1Prop) : y != null && x == null ? ctx.yScale(y) : ctx.yRange[0],
+    x2: x2Prop != null ? ctx.xScale(x2Prop) : x != null ? ctx.xScale(x) : ctx.xRange[1],
+    y2: y2Prop != null ? ctx.yScale(y2Prop) : y != null ? ctx.yScale(y) : ctx.yRange[1],
+  });
+
+  const isSloped = $derived(!isVertical && line.x1 !== line.x2 && line.y1 !== line.y2);
+
+  // Angle of the line in degrees, normalized to [-90, 90] so text stays upright
+  const slopeAngle = $derived.by(() => {
+    let angle = Math.atan2(line.y2 - line.y1, line.x2 - line.x1) * (180 / Math.PI);
+    if (angle > 90) angle -= 180;
+    else if (angle < -90) angle += 180;
+    return angle;
   });
 
-  const labelProps = $derived<ComponentProps<typeof Text>>(
-    isVertical
-      ? {
-          x: line.x1 + (labelPlacement.includes('left') ? -labelXOffset : labelXOffset),
-          y:
-            (labelPlacement.includes('top')
-              ? line.y2
-              : labelPlacement.includes('bottom')
-                ? line.y1
-                : (line.y1 - line.y2) / 2) +
-            (['top', 'bottom-left', 'bottom-right'].includes(labelPlacement)
-              ? -labelYOffset
-              : labelYOffset),
-          dy: -2, // adjust for smaller font size
-          textAnchor: labelPlacement.includes('left')
-            ? 'end'
-            : labelPlacement.includes('right')
-              ? 'start'
-              : 'middle',
-          verticalAnchor:
-            labelPlacement === 'top'
-              ? 'end' // place above line
-              : labelPlacement === 'bottom'
-                ? 'start' // place below line
-                : labelPlacement.includes('top')
-                  ? 'start'
-                  : labelPlacement.includes('bottom')
-                    ? 'end'
-                    : 'middle',
-        }
-      : {
-          x:
-            (labelPlacement.includes('left')
-              ? line.x1
-              : labelPlacement.includes('right')
-                ? line.x2
-                : (line.x2 - line.x1) / 2) +
-            (['left', 'top-right', 'bottom-right'].includes(labelPlacement)
-              ? -labelXOffset
-              : labelXOffset),
-          y: line.y1 + (labelPlacement.includes('top') ? -labelYOffset : labelYOffset),
-          dy: -2, // adjust for smaller font size
-          textAnchor:
-            labelPlacement === 'left'
-              ? 'end' // place beside line
-              : labelPlacement === 'right'
-                ? 'start' // place beside line
-                : labelPlacement.includes('left')
-                  ? 'start'
-                  : labelPlacement.includes('right')
-                    ? 'end'
-                    : 'middle',
-          verticalAnchor: labelPlacement.includes('top')
-            ? 'end'
-            : labelPlacement.includes('bottom')
-              ? 'start'
-              : 'middle',
-        }
-  );
+  const labelProps = $derived.by<ComponentProps<typeof Text>>(() => {
+    const isLeft = labelPlacement.includes('left');
+    const isRight = labelPlacement.includes('right');
+    const isTop = labelPlacement.includes('top');
+    const isBottom = labelPlacement.includes('bottom');
+
+    if (isVertical) {
+      return {
+        x: line.x1 + (isLeft ? -labelXOffset : labelXOffset),
+        y:
+          (isTop ? line.y2 : isBottom ? line.y1 : (line.y1 - line.y2) / 2) +
+          (['top', 'bottom-left', 'bottom-right'].includes(labelPlacement)
+            ? -labelYOffset
+            : labelYOffset),
+        dy: -2, // adjust for smaller font size
+        textAnchor: isLeft ? 'end' : isRight ? 'start' : 'middle',
+        verticalAnchor:
+          labelPlacement === 'top'
+            ? 'end' // place above line
+            : labelPlacement === 'bottom'
+              ? 'start' // place below line
+              : isTop
+                ? 'start'
+                : isBottom
+                  ? 'end'
+                  : 'middle',
+      };
+    }
+
+    const x = isLeft ? line.x1 : isRight ? line.x2 : (line.x1 + line.x2) / 2;
+    const y = isLeft ? line.y1 : isRight ? line.y2 : (line.y1 + line.y2) / 2;
+    const textAnchor =
+      labelPlacement === 'left'
+        ? 'end' // place beside line
+        : labelPlacement === 'right'
+          ? 'start' // place beside line
+          : isLeft
+            ? 'start'
+            : isRight
+              ? 'end'
+              : 'middle';
+    const verticalAnchor = isTop ? 'end' : isBottom ? 'start' : 'middle';
+
+    if (isSloped) {
+      // Project along-line and perpendicular offsets onto screen dx/dy so
+      // labelXOffset/labelYOffset track the slope rather than the viewport axes.
+      const aSign = ['left', 'top-right', 'bottom-right'].includes(labelPlacement) ? -1 : 1;
+      const pSign = isTop ? 1 : -1;
+      const alongLine = aSign * labelXOffset;
+      const perpAbove = pSign * labelYOffset + 2; // +2 for font baseline
+      const theta = (slopeAngle * Math.PI) / 180;
+      const cosT = Math.cos(theta);
+      const sinT = Math.sin(theta);
+      return {
+        x,
+        y,
+        rotate: slopeAngle,
+        dx: alongLine * cosT + perpAbove * sinT,
+        dy: alongLine * sinT - perpAbove * cosT,
+        textAnchor,
+        verticalAnchor,
+      };
+    }
+
+    return {
+      x:
+        x +
+        (['left', 'top-right', 'bottom-right'].includes(labelPlacement)
+          ? -labelXOffset
+          : labelXOffset),
+      y: y + (isTop ? -labelYOffset : labelYOffset),
+      dy: -2, // adjust for smaller font size
+      textAnchor,
+      verticalAnchor,
+    };
+  });
 </script>
 
 <Line
@@ -130,7 +174,7 @@
   x2={line.x2}
   y2={line.y2}
   {...props?.line}
-  class={cls('stroke-surface-content', props?.line?.class)}
+  class={cls('lc-annotation-line', props?.line?.class)}
 />
 
 {#if label}
@@ -138,6 +182,19 @@
     value={label}
     {...labelProps}
     {...props?.label}
-    class={cls('text-xs pointer-events-none', props?.label?.class)}
+    class={cls('lc-annotation-line-label', props?.label?.class)}
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-annotation-line)) {
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    :global(:where(.lc-annotation-line-label)) {
+      font-size: 12px;
+      pointer-events: none;
+    }
+  }
+</style>