layerchart 2.0.0-next.59 → 2.0.0-next.60

package/dist/components/tooltip/TooltipContext.svelte

@@ -112,16 +112,20 @@
 <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';
+  // d3-quadtree (used only for quadtree* tooltip modes) is dynamically
+  // imported inside the $effect below so non-quadtree users don't pay for it.
+  import type { Quadtree } from 'd3-quadtree';
   import { sortFunc, localPoint } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import { getChartContext } from '../../contexts/chart.js';
   import { getGeoContext } from '../../contexts/geo.js';
   import Svg from './../layers/Svg.svelte';
-  import Arc from '../Arc.svelte';
   import ChartClipPath from './../ChartClipPath.svelte';
-  import Voronoi from './../Voronoi.svelte';
+  // Voronoi (used only when mode === 'voronoi') and Arc (used only for radial
+  // bounds/band mode) are dynamically imported inline in the markup via
+  // `{#await import(...)}` so non-voronoi/non-radial tooltip users don't pay
+  // for them. Voronoi alone pulls in d3-geo-voronoi + d3-geo.
 
   import { isScaleBand, isScaleTime, scaleInvert } from '../../utils/scales.svelte.js';
   import { cartesianToPolar } from '../../utils/math.js';
@@ -432,65 +436,77 @@
   const xAccessorOverride = $derived(xProp != null ? accessor(xProp) : undefined);
   const yAccessorOverride = $derived(yProp != null ? accessor(yProp) : undefined);
 
-  const quadtree: Quadtree<[number, number]> | undefined = $derived.by(() => {
-    if (['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)) {
-      return d3Quadtree()
-        .x((d) => {
-          if (mode === 'quadtree-y') {
-            return 0;
-          }
+  let quadtree = $state<Quadtree<[number, number]> | undefined>();
+
+  $effect(() => {
+    // Touch the dependencies the quadtree is built from so the effect re-runs
+    // on changes (mode, accessors, scales, data, projection).
+    if (!['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)) {
+      quadtree = undefined;
+      return;
+    }
 
-          if (xAccessorOverride) {
-            const scaled = ctx.xScale(xAccessorOverride(d));
+    const m = mode;
+    const xAcc = xAccessorOverride;
+    const yAcc = yAccessorOverride;
+    const xScale = ctx.xScale;
+    const yScale = ctx.yScale;
+    const xGet = ctx.xGet;
+    const yGet = ctx.yGet;
+    const xAccCtx = ctx.x;
+    const yAccCtx = ctx.y;
+    const projection = geo.projection;
+    const flatData = ctx.flatData;
+
+    let cancelled = false;
+    import('d3-quadtree').then(({ quadtree: d3Quadtree }) => {
+      if (cancelled) return;
+      quadtree = d3Quadtree<[number, number]>()
+        .x((d) => {
+          if (m === 'quadtree-y') return 0;
+          if (xAcc) {
+            const scaled = xScale(xAcc(d));
             return typeof scaled === 'number' ? scaled : 0;
           }
-
-          if (geo.projection) {
-            const lat = ctx.x(d);
-            const long = ctx.y(d);
-            const geoValue = geo.projection([lat, long]) ?? [0, 0];
+          if (projection) {
+            const lat = xAccCtx(d);
+            const long = yAccCtx(d);
+            const geoValue = projection([lat, long]) ?? [0, 0];
             return geoValue[0];
           }
-
-          const value = ctx.xGet(d);
-
+          const value = xGet(d);
           if (Array.isArray(value)) {
             // `x` accessor with multiple properties (ex. `x={['start', 'end']})`).
             // Default to the max (typically the "target"/"end" endpoint); override
             // via the `x` prop for explicit control.
             return max(value);
-          } else {
-            return value;
           }
+          return value;
         })
         .y((d) => {
-          if (mode === 'quadtree-x') {
-            return 0;
-          }
-
-          if (yAccessorOverride) {
-            const scaled = ctx.yScale(yAccessorOverride(d));
+          if (m === 'quadtree-x') return 0;
+          if (yAcc) {
+            const scaled = yScale(yAcc(d));
             return typeof scaled === 'number' ? scaled : 0;
           }
-
-          if (geo.projection) {
-            const lat = ctx.x(d);
-            const long = ctx.y(d);
-            const geoValue = geo.projection([lat, long]) ?? [0, 0];
+          if (projection) {
+            const lat = xAccCtx(d);
+            const long = yAccCtx(d);
+            const geoValue = projection([lat, long]) ?? [0, 0];
             return geoValue[1];
           }
-
-          const value = ctx.yGet(d);
-
+          const value = yGet(d);
           if (Array.isArray(value)) {
             // `y` accessor with multiple properties — default to max endpoint.
             return max(value);
-          } else {
-            return value;
           }
+          return value;
         })
-        .addAll(ctx.flatData as [number, number][]);
-    }
+        .addAll(flatData as [number, number][]);
+    });
+    return () => {
+      cancelled = true;
+    };
   });
 
   const rects: Array<{ x: number; y: number; width: number; height: number; data: any }> =
@@ -701,56 +717,60 @@
     {@render children?.({ state: tooltipState })}
 
     {#if mode === 'voronoi'}
-      <Svg>
-        <Voronoi
-          x={xProp}
-          y={yProp}
-          r={radius}
-          onpointerenter={(e, { data }) => {
-            showTooltip(e, data);
-          }}
-          onpointermove={(e, { data }) => {
-            showTooltip(e, data);
-          }}
-          onpointerleave={() => hideTooltip()}
-          onpointerdown={(e) => {
-            // @ts-expect-error
-            if (e.target?.hasPointerCapture(e.pointerId)) {
+      {#await import('../Voronoi.svelte') then { default: Voronoi }}
+        <Svg>
+          <Voronoi
+            x={xProp}
+            y={yProp}
+            r={radius}
+            onpointerenter={(e, { data }) => {
+              showTooltip(e, data);
+            }}
+            onpointermove={(e, { data }) => {
+              showTooltip(e, data);
+            }}
+            onpointerleave={() => hideTooltip()}
+            onpointerdown={(e) => {
               // @ts-expect-error
-              e.target.releasePointerCapture(e.pointerId);
-            }
-          }}
-          onclick={(e, { data }) => {
-            onclick(e, { data });
-          }}
-          classes={{ path: cls('lc-tooltip-voronoi-path', debug && 'debug') }}
-        />
-      </Svg>
+              if (e.target?.hasPointerCapture(e.pointerId)) {
+                // @ts-expect-error
+                e.target.releasePointerCapture(e.pointerId);
+              }
+            }}
+            onclick={(e, { data }) => {
+              onclick(e, { data });
+            }}
+            classes={{ path: cls('lc-tooltip-voronoi-path', debug && 'debug') }}
+          />
+        </Svg>
+      {/await}
     {:else if mode === 'bounds' || mode === 'band'}
       <Svg center={ctx.radial}>
         <g class="lc-tooltip-rects-g">
           {#each rects as rect}
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             {#if ctx.radial}
-              <Arc
-                innerRadius={rect.y}
-                outerRadius={rect.y + rect.height}
-                startAngle={rect.x}
-                endAngle={rect.x + rect.width}
-                class={cls('lc-tooltip-rect', debug && 'debug')}
-                onpointerenter={(e) => showTooltip(e, rect?.data)}
-                onpointermove={(e) => showTooltip(e, rect?.data)}
-                onpointerleave={() => hideTooltip()}
-                onpointerdown={(e) => {
-                  const target = e.target as Element;
-                  if (target?.hasPointerCapture(e.pointerId)) {
-                    target.releasePointerCapture(e.pointerId);
-                  }
-                }}
-                onclick={(e) => {
-                  onclick(e, { data: rect?.data });
-                }}
-              />
+              {#await import('../Arc.svelte') then { default: Arc }}
+                <Arc
+                  innerRadius={rect.y}
+                  outerRadius={rect.y + rect.height}
+                  startAngle={rect.x}
+                  endAngle={rect.x + rect.width}
+                  class={cls('lc-tooltip-rect', debug && 'debug')}
+                  onpointerenter={(e) => showTooltip(e, rect?.data)}
+                  onpointermove={(e) => showTooltip(e, rect?.data)}
+                  onpointerleave={() => hideTooltip()}
+                  onpointerdown={(e) => {
+                    const target = e.target as Element;
+                    if (target?.hasPointerCapture(e.pointerId)) {
+                      target.releasePointerCapture(e.pointerId);
+                    }
+                  }}
+                  onclick={(e) => {
+                    onclick(e, { data: rect?.data });
+                  }}
+                />
+              {/await}
             {:else}
               <rect
                 x={rect?.x}

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

@@ -87,7 +87,7 @@ import type { Snippet } from 'svelte';
 declare function $$render<TData = any>(): {
     props: TooltipContextProps<TData>;
     exports: {};
-    bindings: "ref" | "state";
+    bindings: "state" | "ref";
     slots: {};
     events: {};
 };
@@ -95,7 +95,7 @@ declare class __sveltets_Render<TData = any> {
     props(): ReturnType<typeof $$render<TData>>['props'];
     events(): ReturnType<typeof $$render<TData>>['events'];
     slots(): ReturnType<typeof $$render<TData>>['slots'];
-    bindings(): "ref" | "state";
+    bindings(): "state" | "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/force.d.ts

@@ -0,0 +1 @@
+export * from './components/force/index.js';

package/dist/force.js

@@ -0,0 +1 @@
+export * from './components/force/index.js';

package/dist/geo.d.ts

@@ -0,0 +1 @@
+export * from './components/geo/index.js';

package/dist/geo.js

@@ -0,0 +1 @@
+export * from './components/geo/index.js';

package/dist/graph.d.ts

@@ -0,0 +1 @@
+export * from './components/graph/index.js';

package/dist/graph.js

@@ -0,0 +1 @@
+export * from './components/graph/index.js';

package/dist/hierarchy.d.ts

@@ -0,0 +1 @@
+export * from './components/hierarchy/index.js';

package/dist/hierarchy.js

@@ -0,0 +1 @@
+export * from './components/hierarchy/index.js';

package/dist/states/chart.svelte.d.ts

@@ -95,8 +95,8 @@ export declare class ChartState<TData = any, XScale extends AnyScale = AnyScale,
     containerHeight: number;
     data: import("d3-sankey").SankeyGraph<any, any> | readonly TData[] | import("d3-hierarchy").HierarchyNode<TData>;
     flatData: TData[];
-    _xScaleProp: AnyScale<any, any, any[]> | import("d3-scale").ScaleBand<string> | import("d3-scale").ScaleTime<number, number, never>;
-    _yScaleProp: AnyScale<any, any, any[]> | import("d3-scale").ScaleBand<string> | import("d3-scale").ScaleTime<number, number, never>;
+    _xScaleProp: import("d3-scale").ScaleTime<number, number, never> | import("d3-scale").ScaleBand<string> | AnyScale<any, any, any[]>;
+    _yScaleProp: import("d3-scale").ScaleTime<number, number, never> | import("d3-scale").ScaleBand<string> | AnyScale<any, any, any[]>;
     _zScaleProp: AnyScale;
     _rScaleProp: AnyScale | import("d3-scale").ScalePower<any, any, any>;
     xRangeProp: import("../utils/types.js").BaseRange | undefined;

package/dist/utils/graph/dagre.js

@@ -1,5 +1,5 @@
 import dagre from '@dagrejs/dagre';
-import { Align, EdgeLabelPosition, RankDir } from '../../components/Dagre.svelte';
+import { Align, EdgeLabelPosition, RankDir, } from '../../components/graph/Dagre.svelte';
 /**
  * Build `dagre.graphlib.Graph` instance from DagreGraphData (`{ nodes, edges }`)
  */

package/dist/utils/linkUtils.d.ts

@@ -38,5 +38,5 @@ type GetLinkRadialD3PathProps = {
     target: LinkCoords;
     curve?: CurveFactory;
 };
-export declare function getLinkRadialD3Path({ source, target, curve, }: GetLinkRadialD3PathProps): string;
+export declare function getLinkRadialD3Path({ source, target, curve }: GetLinkRadialD3PathProps): string;
 export {};

package/dist/utils/linkUtils.js

@@ -233,7 +233,7 @@ export function getLinkRadialPresetPath({ source, target, type, radius, bend = 2
     const p2y = cornerY + radialDir * r * ts;
     return `M${sx},${sy}L${p1x},${p1y}L${p2x},${p2y}L${tx},${ty}`;
 }
-export function getLinkRadialD3Path({ source, target, curve, }) {
+export function getLinkRadialD3Path({ source, target, curve }) {
     const g = radialGeometry(source, target);
     const { sr, tr, sc, ss, tc, ts, sx, sy, tx, ty, sweepFlag } = g;
     // Step curves render as polar arcs/radials rather than cartesian stairs.

package/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.59",
+  "version": "2.0.0-next.60",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@napi-rs/canvas": "^0.1.97",
@@ -49,6 +49,9 @@
     "vitest-browser-svelte": "^2.1.0"
   },
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "dependencies": {
     "@dagrejs/dagre": "^2.0.4",
     "@layerstack/svelte-actions": "1.0.1-next.18",
@@ -95,6 +98,26 @@
       "svelte": "./dist/server/index.js",
       "default": "./dist/server/index.js"
     },
+    "./geo": {
+      "types": "./dist/geo.d.ts",
+      "svelte": "./dist/geo.js",
+      "default": "./dist/geo.js"
+    },
+    "./hierarchy": {
+      "types": "./dist/hierarchy.d.ts",
+      "svelte": "./dist/hierarchy.js",
+      "default": "./dist/hierarchy.js"
+    },
+    "./force": {
+      "types": "./dist/force.d.ts",
+      "svelte": "./dist/force.js",
+      "default": "./dist/force.js"
+    },
+    "./graph": {
+      "types": "./dist/graph.d.ts",
+      "svelte": "./dist/graph.js",
+      "default": "./dist/graph.js"
+    },
     "./utils/*": {
       "types": "./dist/utils/*.d.ts",
       "svelte": "./dist/utils/*.js",
@@ -111,6 +134,7 @@
   "svelte": "./dist/index.js",
   "scripts": {
     "dev": "pnpm package:watch",
+    "build": "svelte-package",
     "package": "svelte-package",
     "package:watch": "svelte-package --watch",
     "check": "svelte-check --tsconfig ./tsconfig.json",