layerchart 2.0.0-next.3 → 2.0.0-next.5

package/dist/components/AnnotationRange.svelte

@@ -118,13 +118,13 @@
 </script>
 
 {#if fill || className}
-  <Rect {...rect} {fill} class={cls(props?.rect?.class, className)} />
+  <Rect {...rect} {...props?.rect} {fill} class={cls(props?.rect?.class, className)} />
 {/if}
 
 {#if gradient}
   <LinearGradient {...gradient}>
     {#snippet children({ gradient })}
-      <Rect {...rect} fill={gradient} class={props?.rect?.class} />
+      <Rect {...rect} {...props?.rect} fill={gradient} />
     {/snippet}
   </LinearGradient>
 {/if}
@@ -132,7 +132,7 @@
 {#if pattern}
   <Pattern {...pattern}>
     {#snippet children({ pattern })}
-      <Rect {...rect} fill={pattern} class={props?.rect?.class} />
+      <Rect {...rect} {...props?.rect} fill={pattern} />
     {/snippet}
   </Pattern>
 {/if}

package/dist/components/Voronoi.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" module>
   import type { Without } from '../utils/types.js';
-  import type { SVGAttributes } from 'svelte/elements';
 
   export type VoronoiPropsWithoutHTML = {
     /**
@@ -8,6 +7,9 @@
      */
     data?: any;
 
+    /** Radius to clip voronoi cells.  `0` or `undefined` to disables clipping */
+    r?: number;
+
     /**
      * Classes to apply to the root and path elements
      *
@@ -56,7 +58,7 @@
 <script lang="ts">
   import { min } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
-  import type { GeoPermissibleObjects } from 'd3-geo';
+  import { type GeoPermissibleObjects } from 'd3-geo';
   // @ts-expect-error
   import { geoVoronoi } from 'd3-geo-voronoi';
   import { pointRadial } from 'd3-shape';
@@ -67,10 +69,13 @@
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
   import { getGeoContext } from './GeoContext.svelte';
+  import CircleClipPath from './CircleClipPath.svelte';
+
   import { layerClass } from '../utils/attributes.js';
 
   let {
     data,
+    r,
     classes = {},
     onclick,
     onpointerenter,
@@ -109,53 +114,66 @@
   // Width and/or height can sometimes be negative (when loading data remotely and updately)
   const boundWidth = $derived(Math.max(ctx.width, 0));
   const boundHeight = $derived(Math.max(ctx.height, 0));
+
+  const disableClip = $derived(r === 0 || r == null || r === Infinity);
 </script>
 
 <Group {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
   {#if geo.projection}
     {@const polygons = geoVoronoi().polygons(points)}
     {#each polygons.features as feature}
-      <GeoPath
-        geojson={feature}
-        class={cls(
-          layerClass('voronoi-geo-path'),
-          'fill-transparent stroke-transparent',
-          classes.path
-        )}
-        onclick={(e) => onclick?.(e, { data: feature.properties.site.data, feature })}
-        onpointerenter={(e) => onpointerenter?.(e, { data: feature.properties.site.data, feature })}
-        onpointermove={(e) => onpointermove?.(e, { data: feature.properties.site.data, feature })}
-        onpointerdown={(e) => onpointerdown?.(e, { data: feature.properties.site.data, feature })}
-        {onpointerleave}
-        ontouchmove={(e) => {
-          // Prevent touch to not interfere with pointer
-          e.preventDefault();
-        }}
-      />
-    {/each}
-  {:else}
-    {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
-    {#each points as point, i}
-      {@const pathData = voronoi.renderCell(i)}
-      <!-- Wait to render Spline until pathData is available to fix path artifacts from injected tweened points in Spline  -->
-      {#if pathData}
-        <Spline
-          {pathData}
+      {@const point = r ? geo.projection?.(feature.properties.sitecoordinates) : null}
+      <CircleClipPath
+        cx={point?.[0]}
+        cy={point?.[1]}
+        r={r ?? 0}
+        disabled={point == null || disableClip}
+      >
+        <GeoPath
+          geojson={feature}
           class={cls(
-            layerClass('voronoi-path'),
+            layerClass('voronoi-geo-path'),
             'fill-transparent stroke-transparent',
             classes.path
           )}
-          onclick={(e) => onclick?.(e, { data: point.data, point })}
-          onpointerenter={(e) => onpointerenter?.(e, { data: point.data, point })}
-          onpointermove={(e) => onpointermove?.(e, { data: point.data, point })}
+          onclick={(e) => onclick?.(e, { data: feature.properties.site.data, feature })}
+          onpointerenter={(e) =>
+            onpointerenter?.(e, { data: feature.properties.site.data, feature })}
+          onpointermove={(e) => onpointermove?.(e, { data: feature.properties.site.data, feature })}
+          onpointerdown={(e) => onpointerdown?.(e, { data: feature.properties.site.data, feature })}
           {onpointerleave}
-          onpointerdown={(e) => onpointerdown?.(e, { data: point.data, point })}
           ontouchmove={(e) => {
             // Prevent touch to not interfere with pointer
             e.preventDefault();
           }}
         />
+      </CircleClipPath>
+    {/each}
+  {:else}
+    {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
+    {#each points as point, i}
+      {@const pathData = voronoi.renderCell(i)}
+      <!-- Wait to render Spline until pathData is available to fix path artifacts from injected tweened points in Spline  -->
+      {#if pathData}
+        <CircleClipPath cx={point[0]} cy={point[1]} r={r ?? 0} disabled={disableClip}>
+          <Spline
+            {pathData}
+            class={cls(
+              layerClass('voronoi-path'),
+              'fill-transparent stroke-transparent',
+              classes.path
+            )}
+            onclick={(e) => onclick?.(e, { data: point.data, point })}
+            onpointerenter={(e) => onpointerenter?.(e, { data: point.data, point })}
+            onpointermove={(e) => onpointermove?.(e, { data: point.data, point })}
+            {onpointerleave}
+            onpointerdown={(e) => onpointerdown?.(e, { data: point.data, point })}
+            ontouchmove={(e) => {
+              // Prevent touch to not interfere with pointer
+              e.preventDefault();
+            }}
+          />
+        </CircleClipPath>
       {/if}
     {/each}
   {/if}

package/dist/components/Voronoi.svelte.d.ts

@@ -4,6 +4,8 @@ export type VoronoiPropsWithoutHTML = {
      * Override data instead of using context
      */
     data?: any;
+    /** Radius to clip voronoi cells.  `0` or `undefined` to disables clipping */
+    r?: number;
     /**
      * Classes to apply to the root and path elements
      *
@@ -35,7 +37,7 @@ export type VoronoiPropsWithoutHTML = {
     }) => void;
 };
 export type VoronoiProps = VoronoiPropsWithoutHTML & Without<Omit<GroupProps, 'children'>, VoronoiPropsWithoutHTML>;
-import type { GeoPermissibleObjects } from 'd3-geo';
+import { type GeoPermissibleObjects } from 'd3-geo';
 import { type GroupProps } from './Group.svelte';
 declare const Voronoi: import("svelte").Component<VoronoiProps, {}, "">;
 type Voronoi = ReturnType<typeof Voronoi>;

package/dist/components/charts/LineChart.svelte

@@ -377,7 +377,6 @@
       {@render childrenProp(snippetProps)}
     {:else}
       {@render belowContext?.(snippetProps)}
-      <!-- TODO: Always use `Svg` until `Pattern` supports `Canvas` (issue #307) -->
 
       <Layer
         type={renderContext}

package/dist/components/tooltip/TooltipContext.svelte

@@ -72,7 +72,7 @@
     locked?: boolean;
 
     /**
-     * quadtree search radius
+     * quadtree search or voronoi clip radius
      * @default Infinity
      */
     radius?: number;
@@ -116,11 +116,14 @@
 </script>
 
 <script lang="ts" generics="TData = any">
+  import type { Snippet } from 'svelte';
   import { bisector, max, min } from 'd3-array';
   import { quadtree as d3Quadtree, type Quadtree } from 'd3-quadtree';
   import { sortFunc, localPoint } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
+  import { getChartContext } from '../Chart.svelte';
+  import { getGeoContext } from '../GeoContext.svelte';
   import Svg from './../layout/Svg.svelte';
   import Arc from '../Arc.svelte';
   import ChartClipPath from './../ChartClipPath.svelte';
@@ -130,8 +133,6 @@
   import { cartesianToPolar } from '../../utils/math.js';
   import { quadtreeRects } from '../../utils/quadtree.js';
   import { raise } from '../../utils/chart.js';
-  import { getChartContext } from '../Chart.svelte';
-  import type { Snippet } from 'svelte';
   import {
     getTooltipMetaContext,
     getTooltipPayload,
@@ -140,6 +141,7 @@
   import { layerClass } from '../../utils/attributes.js';
 
   const ctx = getChartContext<any>();
+  const geoCtx = getGeoContext();
 
   let {
     ref: refProp = $bindable(),
@@ -357,7 +359,11 @@
         }
 
         case 'quadtree': {
-          tooltipData = quadtree?.find(point.x, point.y, radius);
+          tooltipData = quadtree?.find(
+            point.x - ctx.padding.left,
+            point.y - ctx.padding.top,
+            radius
+          );
           break;
         }
       }
@@ -402,11 +408,14 @@
   const quadtree: Quadtree<[number, number]> | undefined = $derived.by(() => {
     if (mode === 'quadtree') {
       return d3Quadtree()
-        .extent([
-          [0, 0],
-          [ctx.width, ctx.height],
-        ])
         .x((d) => {
+          if (geoCtx.projection) {
+            const lat = ctx.x(d);
+            const long = ctx.y(d);
+            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+            return geoValue[0];
+          }
+
           const value = ctx.xGet(d);
 
           if (Array.isArray(value)) {
@@ -420,6 +429,13 @@
           }
         })
         .y((d) => {
+          if (geoCtx.projection) {
+            const lat = ctx.x(d);
+            const long = ctx.y(d);
+            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+            return geoValue[1];
+          }
+
           const value = ctx.yGet(d);
 
           if (Array.isArray(value)) {
@@ -546,6 +562,7 @@
     {#if mode === 'voronoi'}
       <Svg>
         <Voronoi
+          r={radius}
           onpointerenter={(e, { data }) => {
             showTooltip(e, data);
           }}

package/dist/components/tooltip/TooltipContext.svelte.d.ts

@@ -36,7 +36,7 @@ type TooltipContextPropsWithoutHTML<T = any> = {
      */
     locked?: boolean;
     /**
-     * quadtree search radius
+     * quadtree search or voronoi clip radius
      * @default Infinity
      */
     radius?: number;

package/package.json

@@ -4,9 +4,10 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.3",
+  "version": "2.0.0-next.5",
   "devDependencies": {
     "@changesets/cli": "^2.29.2",
+    "@iconify-json/lucide": "^1.2.42",
     "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.5",
     "@sveltejs/adapter-cloudflare": "^4.9.0",
@@ -62,6 +63,7 @@
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
     "unist-util-visit": "^5.0.0",
+    "unplugin-icons": "^22.1.0",
     "us-atlas": "^3.0.1",
     "vite": "^6.3.4",
     "vitest": "^3.1.2"