layerchart 0.30.2 → 0.31.0

package/dist/components/Area.svelte

@@ -5,7 +5,7 @@ import { interpolatePath } from 'd3-interpolate-path';
 import { cls } from 'svelte-ux';
 import { motionStore } from '../stores/motionStore';
 import Spline from './Spline.svelte';
-const { data: contextData, xGet, yGet, yRange } = getContext('LayerCake');
+const { data: contextData, xScale, yScale, xGet, yGet, yRange } = getContext('LayerCake');
 /** Override data instead of using context */
 export let data = undefined;
 /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
@@ -30,13 +30,13 @@ $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     const path = radial
         ? areaRadial()
-            .angle(x ?? $xGet)
-            .innerRadius(y0 ?? max($yRange))
-            .outerRadius(y1 ?? $yGet)
+            .angle((d) => (x ? $xScale(x(d)) : $xGet(d)))
+            .innerRadius((d) => (y0 ? $yScale(y0(d)) : max($yRange)))
+            .outerRadius((d) => (y1 ? $yScale(y1(d)) : $yGet(d)))
         : d3Area()
-            .x(x ?? $xGet)
-            .y0(y0 ?? max($yRange))
-            .y1(y1 ?? $yGet);
+            .x((d) => (x ? $xScale(x(d)) : $xGet(d)))
+            .y0((d) => (y0 ? $yScale(y0(d)) : max($yRange)))
+            .y1((d) => (y1 ? $yScale(y1(d)) : $yGet(d)));
     if (curve)
         path.curve(curve);
     if (defined)
@@ -47,7 +47,7 @@ $: {
 </script>
 
 {#if line}
-  <Spline {data} {curve} {defined} {tweened} {...typeof line === 'object' ? line : null} />
+  <Spline {data} y={y1} {curve} {defined} {tweened} {...typeof line === 'object' ? line : null} />
 {/if}
 
 <path

package/dist/components/AreaStack.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
 import Area from './Area.svelte';
 import Spline from './Spline.svelte';
-const { data, yScale, rGet } = getContext('LayerCake');
+const { data, rGet } = getContext('LayerCake');
 export let curve = undefined;
 export let defined = undefined;
 export let opacity = 0.3;
@@ -16,7 +16,7 @@ $: lineData = [...$data].reverse();
     {#each lineData as seriesData}
       <Spline
         data={seriesData}
-        y={(d) => $yScale(d[1])}
+        y={(d) => d[1]}
         stroke={$rGet(seriesData)}
         {curve}
         {defined}
@@ -27,17 +27,19 @@ $: lineData = [...$data].reverse();
   </g>
 {/if}
 
-<g class="area-group">
-  {#each $data as seriesData}
-    <Area
-      data={seriesData}
-      y0={(d) => $yScale(d[0])}
-      y1={(d) => $yScale(d[1])}
-      fill={$rGet(seriesData)}
-      {curve}
-      {defined}
-      {opacity}
-      {tweened}
-    />
-  {/each}
-</g>
+<slot data={$data}>
+  <g class="area-group">
+    {#each $data as seriesData}
+      <Area
+        data={seriesData}
+        y0={(d) => d[0]}
+        y1={(d) => d[1]}
+        fill={$rGet(seriesData)}
+        {curve}
+        {defined}
+        {opacity}
+        {tweened}
+      />
+    {/each}
+  </g>
+</slot>

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

@@ -14,7 +14,11 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {
+            data: any;
+        };
+    };
 };
 export type AreaStackProps = typeof __propDef.props;
 export type AreaStackEvents = typeof __propDef.events;

package/dist/components/Circle.svelte

@@ -23,7 +23,7 @@ $: tick().then(() => {
   cx={$tweened_cx}
   cy={$tweened_cy}
   r={$tweened_r}
-  class={cls($$props.fill === undefined && 'fill-surface-content')}
+  class={cls($$props.fill == null && 'fill-surface-content')}
   {...$$restProps}
   on:click
   on:mousemove

package/dist/components/Rect.svelte

@@ -29,7 +29,7 @@ $: tick().then(() => {
   y={$tweened_y}
   width={$tweened_width}
   height={$tweened_height}
-  class={cls($$props.fill === undefined && 'fill-surface-content')}
+  class={cls($$props.fill == null && 'fill-surface-content')}
   {...$$restProps}
   on:click
   on:mouseover

package/dist/components/Spline.svelte

@@ -9,7 +9,7 @@ import { interpolatePath } from 'd3-interpolate-path';
 import { cls } from 'svelte-ux';
 import { motionStore } from '../stores/motionStore';
 import Group from './Group.svelte';
-const { data: contextData, xGet, yGet } = getContext('LayerCake');
+const { data: contextData, xScale, yScale, xGet, yGet } = getContext('LayerCake');
 /** Override data instead of using context */
 export let data = undefined;
 /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
@@ -41,11 +41,11 @@ $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     const path = radial
         ? lineRadial()
-            .angle(x ?? $xGet)
-            .radius(y ?? $yGet)
+            .angle((d) => (x ? $xScale(x(d)) : $xGet(d)))
+            .radius((d) => (y ? $yScale(y(d)) : $yGet(d)))
         : d3Line()
-            .x(x ?? $xGet)
-            .y(y ?? $yGet);
+            .x((d) => (x ? $xScale(x(d)) : $xGet(d)))
+            .y((d) => (y ? $yScale(y(d)) : $yGet(d)));
     if (curve)
         path.curve(curve);
     if (defined)

package/dist/components/TooltipContext.svelte

@@ -18,11 +18,11 @@ function setTooltipContext(tooltip) {
 <script>import { raise } from 'layercake';
 import { writable } from 'svelte/store';
 import { bisector, max, min } from 'd3-array';
-import { Delaunay } from 'd3-delaunay';
 import { quadtree as d3Quadtree } from 'd3-quadtree';
-import { sortFunc } from 'svelte-ux';
+import { cls, sortFunc } from 'svelte-ux';
 import { Svg, Html } from './Chart.svelte';
 import ChartClipPath from './ChartClipPath.svelte';
+import Voronoi from './Voronoi.svelte';
 import { localPoint } from '../utils/event';
 import { isScaleBand, scaleInvert } from '../utils/scales';
 import { quadtreeRects } from '../utils/quadtree';
@@ -187,20 +187,6 @@ function hideTooltip() {
         $tooltip = { ...$tooltip, data: null };
     });
 }
-let points;
-let voronoi;
-$: if (mode === 'voronoi') {
-    points = $flatData.map((d) => {
-        const xValue = $xGet(d);
-        const yValue = $yGet(d);
-        const x = Array.isArray(xValue) ? min(xValue) : xValue;
-        const y = Array.isArray(yValue) ? min(yValue) : yValue;
-        const point = [x, y];
-        point.data = d;
-        return point;
-    });
-    voronoi = Delaunay.from(points).voronoi([0, 0, Math.max($width, 0), Math.max($height, 0)]); // width and/or height can sometimes be negative (when loading data remotely and updately)
-}
 let quadtree;
 $: if (mode === 'quadtree') {
     quadtree = d3Quadtree()
@@ -287,10 +273,9 @@ $: if (mode === 'bounds' || mode === 'band') {
 {#if ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)}
   <Html>
     <div
-      class="tooltip-trigger absolute"
       style:width="{$width}px"
       style:height="{$height}px"
-      style:background={debug ? 'rgba(255 0 0 / .1)' : undefined}
+      class={cls('tooltip-trigger absolute', debug && 'bg-danger/10 outline outline-danger')}
       on:touchstart={showTooltip}
       on:touchmove={showTooltip}
       on:mousemove={showTooltip}
@@ -302,21 +287,14 @@ $: if (mode === 'bounds' || mode === 'band') {
   </Html>
 {:else if mode === 'voronoi'}
   <Svg>
-    {#each points as point, i}
-      <g class="tooltip-voronoi">
-        <path
-          d={voronoi.renderCell(i)}
-          style:fill={debug ? 'red' : 'transparent'}
-          style:fill-opacity={debug ? 0.1 : 0}
-          style:stroke={debug ? 'red' : 'transparent'}
-          on:mousemove={(e) => showTooltip(e, point.data)}
-          on:mouseleave={hideTooltip}
-          on:click={(e) => {
-            onClick({ data: point.data });
-          }}
-        />
-      </g>
-    {/each}
+    <Voronoi
+      on:mousemove={(e) => showTooltip(e.detail.event, e.detail.point.data)}
+      on:mouseleave={hideTooltip}
+      on:click={(e) => {
+        onClick({ data: e.detail.point.data });
+      }}
+      classes={{ path: cls(debug && 'fill-danger/10 stroke-danger') }}
+    />
   </Svg>
 {:else if mode === 'bounds' || mode === 'band'}
   <Svg>
@@ -327,9 +305,7 @@ $: if (mode === 'bounds' || mode === 'band') {
           y={rect.y}
           width={rect.width}
           height={rect.height}
-          style:fill={debug ? 'red' : 'transparent'}
-          style:fill-opacity={debug ? 0.1 : 0}
-          style:stroke={debug ? 'red' : 'transparent'}
+          class={cls(debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent')}
           on:mousemove={(e) => showTooltip(e, rect.data)}
           on:mouseleave={hideTooltip}
           on:click={(e) => {
@@ -351,9 +327,7 @@ $: if (mode === 'bounds' || mode === 'band') {
             y={rect.y}
             width={rect.width}
             height={rect.height}
-            style:fill={debug ? 'red' : 'transparent'}
-            style:fill-opacity={debug ? 0.1 : 0}
-            stroke="red"
+            class={cls(debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent')}
           />
         {/each}
       </g>

package/dist/components/Voronoi.svelte

@@ -0,0 +1,33 @@
+<script>import { createEventDispatcher, getContext } from 'svelte';
+import { draw as _drawTransition } from 'svelte/transition';
+import { Delaunay } from 'd3-delaunay';
+import { min } from 'd3-array';
+import { cls } from 'svelte-ux';
+const { flatData, xGet, yGet, width, height } = getContext('LayerCake');
+/** Override data instead of using context */
+export let data = undefined;
+export let classes = {};
+const dispatch = createEventDispatcher();
+$: points = (data ?? $flatData).map((d) => {
+    const xValue = $xGet(d);
+    const yValue = $yGet(d);
+    const x = Array.isArray(xValue) ? min(xValue) : xValue;
+    const y = Array.isArray(yValue) ? min(yValue) : yValue;
+    const point = [x, y];
+    point.data = d;
+    return point;
+});
+$: voronoi = Delaunay.from(points).voronoi([0, 0, Math.max($width, 0), Math.max($height, 0)]); // width and/or height can sometimes be negative (when loading data remotely and updately)
+</script>
+
+<g {...$$restProps} class={cls(classes.root, $$props.class)}>
+  {#each points as point, i}
+    <path
+      d={voronoi.renderCell(i)}
+      class={cls('fill-transparent', classes.path)}
+      on:mousemove={(e) => dispatch('mousemove', { point, event: e })}
+      on:mouseleave
+      on:click={(e) => dispatch('click', { point })}
+    />
+  {/each}
+</g>

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

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        data?: any;
+        classes?: {
+            root?: string | undefined;
+            path?: string | undefined;
+        } | undefined;
+    };
+    events: {
+        mouseleave: MouseEvent;
+        click: CustomEvent<{
+            point: {
+                data: any;
+            };
+        }>;
+        mousemove: CustomEvent<{
+            point: {
+                data: any;
+            };
+            event: MouseEvent;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type VoronoiProps = typeof __propDef.props;
+export type VoronoiEvents = typeof __propDef.events;
+export type VoronoiSlots = typeof __propDef.slots;
+export default class Voronoi extends SvelteComponentTyped<VoronoiProps, VoronoiEvents, VoronoiSlots> {
+}
+export {};

package/dist/components/index.d.ts

@@ -47,4 +47,5 @@ export { default as TooltipItem } from './TooltipItem.svelte';
 export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
+export { default as Voronoi } from './Voronoi.svelte';
 export { default as Zoom } from './Zoom.svelte';

package/dist/components/index.js

@@ -47,4 +47,5 @@ export { default as TooltipItem } from './TooltipItem.svelte';
 export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
+export { default as Voronoi } from './Voronoi.svelte';
 export { default as Zoom } from './Zoom.svelte';

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.30.2",
+  "version": "0.31.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",