layerchart 0.81.2 → 0.90.0

package/dist/components/Highlight.svelte

@@ -66,12 +66,21 @@
   /** Set to false to disable spring transitions */
   export let motion = true;
 
-  export let onAreaClick: (e: { data: any }) => void = () => {};
-  export let onBarClick: (e: { data: any }) => void = () => {};
-
-  export let onPointClick: (e: { point: (typeof _points)[number]; data: any }) => void = () => {};
-  export let onPointEnter: (e: { point: (typeof _points)[number]; data: any }) => void = () => {};
-  export let onPointLeave: (e: { point: (typeof _points)[number]; data: any }) => void = () => {};
+  export let onareaclick: (e: MouseEvent, data: { data: any }) => void = () => {};
+  export let onbarclick: (e: MouseEvent, data: { data: any }) => void = () => {};
+
+  export let onpointclick: (
+    e: MouseEvent,
+    data: { point: (typeof _points)[number]; data: any }
+  ) => void = () => {};
+  export let onpointenter: (
+    e: MouseEvent,
+    datae: { point: (typeof _points)[number]; data: any }
+  ) => void = () => {};
+  export let onpointleave: (
+    e: MouseEvent,
+    datae: { point: (typeof _points)[number]; data: any }
+  ) => void = () => {};
 
   const _x = accessor(x);
   const _y = accessor(y);
@@ -353,7 +362,7 @@
           !area.fill && 'fill-surface-content/5',
           typeof area === 'object' ? area.class : null
         )}
-        on:click={() => onAreaClick({ data: highlightData })}
+        onclick={(e) => onareaclick(e, { data: highlightData })}
       />
     </slot>
   {/if}
@@ -374,7 +383,7 @@
           !bar.fill && 'fill-primary',
           typeof bar === 'object' ? bar.class : null
         )}
-        on:click={() => onBarClick({ data: highlightData })}
+        onclick={(e) => onbarclick(e, { data: highlightData })}
       />
     </slot>
   {/if}
@@ -407,15 +416,16 @@
           cy={point.y}
           fill={point.fill}
           r={4}
+          strokeWidth={6}
           {...typeof points === 'object' ? points : null}
           class={cls(
-            'stroke-[6] stroke-white [paint-order:stroke] drop-shadow',
+            'stroke-white [paint-order:stroke] drop-shadow',
             !point.fill && (typeof points === 'boolean' || !points.fill) && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}
-          on:click={() => onPointClick({ point, data: highlightData })}
-          on:pointerenter={() => onPointEnter({ point, data: highlightData })}
-          on:pointerleave={() => onPointLeave({ point, data: highlightData })}
+          onclick={(e) => onpointclick(e, { point, data: highlightData })}
+          onpointerenter={(e) => onpointenter(e, { point, data: highlightData })}
+          onpointerleave={(e) => onpointleave(e, { point, data: highlightData })}
         />
       {/each}
     </slot>

package/dist/components/Hull.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import { type ComponentProps } from 'svelte';
   import { min } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
   // @ts-expect-error
@@ -25,14 +25,19 @@
     path?: string;
   } = {};
 
-  const dispatch = createEventDispatcher<{
-    click: { points: [number, number][]; polygon: Delaunay.Polygon };
-    pointermove: {
-      event: PointerEvent;
-      points: [number, number][];
-      polygon: Delaunay.Polygon;
-    };
-  }>();
+  export let onclick:
+    | ((e: MouseEvent, details: { points: [number, number][]; polygon: Delaunay.Polygon }) => void)
+    | undefined = undefined;
+  export let onpointermove:
+    | ((
+        e: PointerEvent,
+        details: {
+          points: [number, number][];
+          polygon: Delaunay.Polygon;
+        }
+      ) => void)
+    | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
 
   $: points = (data ?? $flatData).map((d: any) => {
     const xValue = $xContext(d);
@@ -55,9 +60,9 @@
       geojson={polygon}
       {curve}
       class={cls('fill-transparent', classes.path)}
-      on:pointermove={(e) => dispatch('pointermove', { event: e, points, polygon })}
-      on:pointerleave
-      on:click={(e) => dispatch('click', { points, polygon })}
+      onclick={(e) => onclick?.(e, { points, polygon })}
+      onpointermove={(e) => onpointermove?.(e, { points, polygon })}
+      {onpointerleave}
     />
   {:else}
     {@const delaunay = Delaunay.from(points)}
@@ -68,9 +73,9 @@
       y={(d) => d[1]}
       {curve}
       class={cls('fill-transparent', classes.path)}
-      on:pointermove={(e) => dispatch('pointermove', { event: e, points, polygon })}
-      on:pointerleave
-      on:click={(e) => dispatch('click', { points, polygon })}
+      onclick={(e) => onclick?.(e, { points, polygon })}
+      onpointermove={(e) => onpointermove?.(e, { points, polygon })}
+      {onpointerleave}
     />
   {/if}
 </g>

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

@@ -9,19 +9,17 @@ declare const __propDef: {
             root?: string;
             path?: string;
         } | undefined;
-    };
-    events: {
-        pointerleave: PointerEvent;
-        click: CustomEvent<{
+        onclick?: ((e: MouseEvent, details: {
             points: [number, number][];
             polygon: Delaunay.Polygon;
-        }>;
-        pointermove: CustomEvent<{
-            event: PointerEvent;
+        }) => void) | undefined | undefined;
+        onpointermove?: ((e: PointerEvent, details: {
             points: [number, number][];
             polygon: Delaunay.Polygon;
-        }>;
-    } & {
+        }) => void) | undefined | undefined;
+        onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
+    };
+    events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/Legend.svelte

@@ -35,9 +35,9 @@
   export let placement: Placement | undefined = undefined;
   export let orientation: 'horizontal' | 'vertical' = 'horizontal';
 
-  export let onClick: ((item: any) => any) | undefined = undefined;
-  export let onPointerEnter: ((item: any) => any) | undefined = undefined;
-  export let onPointerLeave: ((item: any) => any) | undefined = undefined;
+  export let onclick: ((e: MouseEvent, detail: any) => any) | undefined = undefined;
+  export let onpointerenter: ((e: MouseEvent, detail: any) => any) | undefined = undefined;
+  export let onpointerleave: ((e: MouseEvent, detail: any) => any) | undefined = undefined;
 
   /** Determine display ramp (individual color swatches or continuous ramp)*/
   export let variant: 'ramp' | 'swatches' = 'ramp';
@@ -214,10 +214,10 @@
           {@const color = _scale(tick)}
           {@const item = { value: tick, color }}
           <button
-            class={cls('flex gap-1', !onClick && 'cursor-auto', classes.item?.(item))}
-            on:click={() => onClick?.(item)}
-            on:pointerenter={() => onPointerEnter?.(item)}
-            on:pointerleave={() => onPointerLeave?.(item)}
+            class={cls('flex gap-1', !onclick && 'cursor-auto', classes.item?.(item))}
+            on:click={(e) => onclick?.(e, item)}
+            on:pointerenter={(e) => onpointerenter?.(e, item)}
+            on:pointerleave={(e) => onpointerleave?.(e, item)}
           >
             <div
               class={cls('h-4 w-4 rounded-full', classes.swatch)}

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

@@ -14,9 +14,9 @@ declare const __propDef: {
         tickLength?: number | undefined;
         placement?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
-        onClick?: ((item: any) => any) | undefined | undefined;
-        onPointerEnter?: ((item: any) => any) | undefined | undefined;
-        onPointerLeave?: ((item: any) => any) | undefined | undefined;
+        onclick?: ((e: MouseEvent, detail: any) => any) | undefined | undefined;
+        onpointerenter?: ((e: MouseEvent, detail: any) => any) | undefined | undefined;
+        onpointerleave?: ((e: MouseEvent, detail: any) => any) | undefined | undefined;
         variant?: "ramp" | "swatches" | undefined;
         classes?: {
             root?: string;

package/dist/components/Line.svelte

@@ -4,11 +4,12 @@
   import { cls } from '@layerstack/tailwind';
   import { uniqueId } from '@layerstack/utils';
   import { objectId } from '@layerstack/utils/object';
+  import { merge } from 'lodash-es';
 
   import { motionStore } from '../stores/motionStore.js';
 
   import Marker from './Marker.svelte';
-  import { renderPathData } from '../utils/canvas.js';
+  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
 
   export let x1: number;
@@ -30,6 +31,11 @@
   let className: string | undefined = undefined;
   export { className as class };
 
+  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+
   /** Marker to attach to start and end points of path */
   export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
     undefined;
@@ -61,12 +67,21 @@
   const canvasContext = getCanvasContext();
   const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  function render(ctx: CanvasRenderingContext2D) {
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
     const pathData = `M ${$tweened_x1},${$tweened_y1} L ${$tweened_x2},${$tweened_y2}`;
-    renderPathData(ctx, pathData, {
-      styles: { fill, stroke, strokeWidth },
-      classes: className,
-    });
+    renderPathData(
+      ctx,
+      pathData,
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, stroke, strokeWidth },
+            classes: className,
+          }
+    );
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
@@ -88,7 +103,16 @@
 
   let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Line', render });
+    canvasUnregister = canvasContext.register({
+      name: 'Line',
+      render,
+      events: {
+        click: onclick,
+        pointerenter: onpointerenter,
+        pointermove: onpointermove,
+        pointerleave: onpointerleave,
+      },
+    });
   }
 
   onDestroy(() => {
@@ -112,9 +136,10 @@
     marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
     class={cls(stroke === undefined && 'stroke-surface-content', className)}
     {...$$restProps}
-    on:click
-    on:pointermove
-    on:pointerleave
+    on:click={onclick}
+    on:pointerenter={onpointerenter}
+    on:pointermove={onpointermove}
+    on:pointerleave={onpointerleave}
   />
 
   <slot name="markerStart" id={markerStartId}>

package/dist/components/Link.svelte

@@ -22,6 +22,7 @@
   import { uniqueId } from '@layerstack/utils';
 
   import Marker from './Marker.svelte';
+  import Spline from './Spline.svelte';
 
   // Override what is used from context
   export let data: any = undefined; // TODO: Update Type
@@ -39,6 +40,13 @@
   export let y = (d: any) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
   export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
 
+  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerover: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerout: ((e: PointerEvent) => void) | undefined = undefined;
+
   /** Marker to attach to start, mid, and end points of path */
   export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
     undefined;
@@ -69,20 +77,19 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<path
+<Spline
   class="path-link"
-  d={$tweened_d}
+  pathData={$tweened_d}
   fill="none"
   marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
   marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
   marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-  on:click
-  on:pointerover
-  on:pointermove
-  on:pointerout
-  on:pointerleave
+  {onclick}
+  {onpointerenter}
+  {onpointermove}
+  {onpointerleave}
+  {onpointerover}
+  {onpointerout}
   {...$$restProps}
 />
 

package/dist/components/Points.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script lang="ts">
-  import { onDestroy, type ComponentProps } from 'svelte';
+  import { type ComponentProps } from 'svelte';
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
   import { notNull } from '@layerstack/utils';
@@ -12,7 +12,6 @@
   import Circle from './Circle.svelte';
   import Link from './Link.svelte';
   import { isScaleBand, type AnyScale } from '../utils/scales.js';
-  import { getCanvasContext } from './layout/Canvas.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
 
   const context = chartContext() as any;
@@ -52,10 +51,6 @@
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
 
-  /** Render to canvas */
-  export let render: ((ctx: CanvasRenderingContext2D, points: Point[]) => any) | undefined =
-    undefined;
-
   let className: string | undefined = undefined;
   export { className as class };
 
@@ -168,59 +163,31 @@
       };
     }
   });
-
-  const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
-
-  function _render(ctx: CanvasRenderingContext2D) {
-    if (render) {
-      render(ctx, points);
-    } else {
-      // Rendered below
-    }
-  }
-
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
-  $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Points', render: _render });
-  }
-
-  onDestroy(() => {
-    if (renderContext === 'canvas') {
-      canvasUnregister();
-    }
-  });
 </script>
 
 <slot {points}>
-  {#if renderContext === 'svg' || (renderContext === 'canvas' && !render)}
-    {#if links}
-      <g class="link-group">
-        {#each _links as link}
-          <Link
-            data={link}
-            class="stroke-surface-content/50"
-            {...typeof links === 'object' ? links : null}
-          />
-        {/each}
-      </g>
-    {/if}
-
-    <g class="point-group">
-      {#each points as point}
-        {@const radialPoint = pointRadial(point.x, point.y)}
-        <Circle
-          cx={$radial ? radialPoint[0] : point.x}
-          cy={$radial ? radialPoint[1] : point.y}
-          r={point.r}
-          fill={fill ?? ($config.c ? $cGet(point.data) : null)}
-          {fillOpacity}
-          {stroke}
-          {strokeWidth}
-          class={className}
-          {...$$restProps}
-        />
-      {/each}
-    </g>
+  {#if links}
+    {#each _links as link}
+      <Link
+        data={link}
+        class="stroke-surface-content/50"
+        {...typeof links === 'object' ? links : null}
+      />
+    {/each}
   {/if}
+
+  {#each points as point}
+    {@const radialPoint = pointRadial(point.x, point.y)}
+    <Circle
+      cx={$radial ? radialPoint[0] : point.x}
+      cy={$radial ? radialPoint[1] : point.y}
+      r={point.r}
+      fill={fill ?? ($config.c ? $cGet(point.data) : null)}
+      {fillOpacity}
+      {stroke}
+      {strokeWidth}
+      class={className}
+      {...$$restProps}
+    />
+  {/each}
 </slot>

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

@@ -24,7 +24,6 @@ declare const __propDef: {
         fillOpacity?: number | undefined | undefined;
         stroke?: string | undefined | undefined;
         strokeWidth?: number | undefined | undefined;
-        render?: ((ctx: CanvasRenderingContext2D, points: Point[]) => any) | undefined | undefined;
         class?: string | undefined | undefined;
     };
     events: {

package/dist/components/Rect.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { onDestroy, tick } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
   import { cls } from '@layerstack/tailwind';
   import { objectId } from '@layerstack/utils/object';
+  import { merge } from 'lodash-es';
 
   import {
     motionStore,
@@ -10,7 +12,10 @@
     type TweenedOptions,
   } from '../stores/motionStore.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
-  import { renderRect } from '../utils/canvas.js';
+  import { renderRect, type ComputedStylesOptions } from '../utils/canvas.js';
+
+  /** Undlying `<rect>` tag when using <Svg>. Useful for bindings. */
+  export let element: SVGRectElement | undefined = undefined;
 
   export let x = 0;
   export let initialX = x;
@@ -29,9 +34,17 @@
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
 
-  let className: string | undefined = undefined;
+  let className: ClassValue | undefined = undefined;
   export { className as class };
 
+  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let ondblclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerover: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerout: ((e: PointerEvent) => void) | undefined = undefined;
+
   export let spring: boolean | SpringOptions | { [prop: string]: SpringOptions } = undefined;
   export let tweened: boolean | TweenedOptions | { [prop: string]: TweenedOptions } = undefined;
 
@@ -50,14 +63,19 @@
   const canvasContext = getCanvasContext();
   const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  function render(ctx: CanvasRenderingContext2D) {
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
     renderRect(
       ctx,
       { x: $tweened_x, y: $tweened_y, width: $tweened_width, height: $tweened_height },
-      {
-        styles: { fill, fillOpacity, stroke, strokeWidth },
-        classes: className,
-      }
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, fillOpacity, stroke, strokeWidth },
+            classes: className,
+          }
     );
   }
 
@@ -80,7 +98,19 @@
 
   let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Rect', render });
+    canvasUnregister = canvasContext.register({
+      name: 'Rect',
+      render,
+      events: {
+        click: onclick,
+        dblclick: ondblclick,
+        pointerenter: onpointerenter,
+        pointermove: onpointermove,
+        pointerleave: onpointerleave,
+        pointerover: onpointerover,
+        pointerout: onpointerout,
+      },
+    });
   }
 
   onDestroy(() => {
@@ -104,12 +134,13 @@
     stroke-width={strokeWidth}
     class={cls(fill == null && 'fill-surface-content', className)}
     {...$$restProps}
-    on:click
-    on:pointerenter
-    on:pointerover
-    on:pointermove
-    on:pointerout
-    on:pointerleave
-    on:dblclick
+    on:click={onclick}
+    on:dblclick={ondblclick}
+    on:pointerenter={onpointerenter}
+    on:pointerover={onpointerover}
+    on:pointermove={onpointermove}
+    on:pointerout={onpointerout}
+    on:pointerleave={onpointerleave}
+    bind:this={element}
   />
 {/if}

package/dist/components/Sankey.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   // https://github.com/d3/d3-sankey
-  import { createEventDispatcher } from 'svelte';
   import {
     sankey as d3Sankey,
     sankeyLeft,
@@ -13,8 +12,6 @@
 
   import { chartContext } from './ChartContext.svelte';
 
-  const dispatch = createEventDispatcher();
-
   const { data, width, height } = chartContext();
 
   export let nodes = (d: any) => d.nodes;
@@ -35,6 +32,8 @@
   export let links = (d: any) => d.links;
   export let linkSort = undefined;
 
+  export let onupdate: ((data: typeof sankeyData) => void) | undefined = undefined;
+
   $: sankey = d3Sankey()
     .size([$width, $height])
     .nodes(nodes)
@@ -64,7 +63,7 @@
   $: _nodes = sankeyData.nodes as SankeyNode<NodeExtraProperties, any>[];
   $: _links = sankeyData.links as SankeyLink<NodeExtraProperties, any>[];
 
-  $: dispatch('update', sankeyData);
+  $: onupdate?.(sankeyData);
 </script>
 
 <slot nodes={_nodes} links={_links} />

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

@@ -12,10 +12,9 @@ declare const __propDef: {
         nodeSort?: undefined;
         links?: (d: any) => any;
         linkSort?: undefined;
+        onupdate?: ((data: import("d3-sankey").SankeyGraph<{}, {}>) => void) | undefined;
     };
     events: {
-        update: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {