layerchart 0.30.1 → 0.31.0

package/dist/components/Area.svelte

@@ -1,15 +1,17 @@
 <script>import { getContext } from 'svelte';
-import { area as d3Area } from 'd3-shape';
+import { area as d3Area, areaRadial } from 'd3-shape';
 import { max } from 'd3-array';
 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 */
 export let pathData = undefined;
+/** Use radial instead of cartesian area generator, mapping `x` to `angle` and `y0`/`y1 to `innerRadius`/`outerRadius.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+export let radial = false;
 /** Override x accessor */
 export let x = undefined; // TODO: Update Type
 /** Override y0 accessor.  Defaults to max($yRange) */
@@ -26,10 +28,15 @@ export let line = false;
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
-    const path = d3Area()
-        .x(x ?? $xGet)
-        .y0(y0 ?? max($yRange))
-        .y1(y1 ?? $yGet);
+    const path = radial
+        ? areaRadial()
+            .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((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)
@@ -40,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/Area.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         [x: string]: any;
         data?: any;
         pathData?: string | undefined | null;
+        radial?: boolean | undefined;
         x?: any;
         y0?: any;
         y1?: any;
@@ -18,6 +19,7 @@ declare const __propDef: {
             [x: string]: any;
             data?: any;
             pathData?: string | null | undefined;
+            radial?: boolean | undefined;
             x?: any;
             y?: any;
             tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;

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/Axis.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { format as formatValue, cls } from 'svelte-ux';
 import { extent } from 'd3-array';
+import { pointRadial } from 'd3-shape';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';
 const { xScale, yScale, xRange, yRange, width } = getContext('LayerCake');
@@ -16,8 +17,15 @@ export let ticks = placement === 'left' || placement === 'right' ? 4 : undefined
 export let tickSize = 4;
 export let format = undefined;
 export let labelProps = undefined;
-$: orientation = ['top', 'bottom'].includes(placement) ? 'horizontal' : 'vertical';
-$: scale = orientation === 'horizontal' ? $xScale : $yScale;
+$: orientation =
+    placement === 'angle'
+        ? 'angle'
+        : placement === 'radius'
+            ? 'radius'
+            : ['top', 'bottom'].includes(placement)
+                ? 'horizontal'
+                : 'vertical';
+$: scale = ['horizontal', 'angle'].includes(orientation) ? $xScale : $yScale;
 $: [xRangeMin, xRangeMax] = extent($xRange);
 $: [yRangeMin, yRangeMax] = extent($yRange);
 $: tickVals = Array.isArray(ticks)
@@ -47,9 +55,19 @@ function getCoords(tick) {
                 x: xRangeMax,
                 y: $yScale(tick) + (isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0),
             };
+        case 'angle':
+            return {
+                x: $xScale(tick),
+                y: yRangeMax,
+            };
+        case 'radius':
+            return {
+                x: xRangeMin,
+                y: $yScale(tick),
+            };
     }
 }
-function getDefaultLabelProps() {
+function getDefaultLabelProps(tick) {
     switch (placement) {
         case 'top':
             return {
@@ -77,6 +95,21 @@ function getDefaultLabelProps() {
                 dx: 4,
                 dy: -2, // manually adjusted until Text supports custom styles
             };
+        case 'angle':
+            const xValue = $xScale(tick);
+            return {
+                textAnchor: xValue === 0 || xValue === Math.PI ? 'middle' : xValue > Math.PI ? 'end' : 'start',
+                verticalAnchor: 'middle',
+                dx: 0,
+                dy: -2, // manually adjusted until Text supports custom styles
+            };
+        case 'radius':
+            return {
+                textAnchor: 'middle',
+                verticalAnchor: 'middle',
+                dx: 2,
+                dy: -2, // manually adjusted until Text supports custom styles
+            };
     }
 }
 </script>
@@ -105,10 +138,22 @@ function getDefaultLabelProps() {
         class={cls('rule stroke-surface-content/50', lineProps?.class)}
       />
     {/if}
+
+    <!-- TODO: angle rule? -->
+
+    {#if orientation === 'radius'}
+      <circle
+        r={$yRange[0] || 0}
+        {...lineProps}
+        class={cls('rule stroke-surface-content/20 fill-none', lineProps?.class)}
+      />
+    {/if}
   {/if}
 
   {#each tickVals as tick, i}
     {@const tickCoords = getCoords(tick)}
+    {@const radialTickCoords = pointRadial(tickCoords.x, tickCoords.y)}
+
     <g>
       {#if grid !== false}
         {@const lineProps = typeof grid === 'object' ? grid : null}
@@ -130,6 +175,24 @@ function getDefaultLabelProps() {
             {...lineProps}
             class={cls('grid stroke-surface-content/10', lineProps?.class)}
           />
+        {:else if orientation === 'angle'}
+          {@const [x1, y1] = pointRadial(tickCoords.x, yRangeMin)}
+          {@const [x2, y2] = pointRadial(tickCoords.x, yRangeMax)}
+
+          <line
+            {x1}
+            {y1}
+            {x2}
+            {y2}
+            {...lineProps}
+            class={cls('test grid stroke-surface-content/10', lineProps?.class)}
+          />
+        {:else if orientation === 'radius'}
+          <circle
+            r={tickCoords.y}
+            {...lineProps}
+            class={cls('grid stroke-surface-content/10 fill-none', lineProps?.class)}
+          />
         {/if}
       {/if}
 
@@ -153,10 +216,10 @@ function getDefaultLabelProps() {
       {/if}
 
       <Text
-        x={tickCoords.x}
-        y={tickCoords.y}
-        value={formatValue(tick, format ?? scale.tickFormat?.())}
-        {...getDefaultLabelProps()}
+        x={orientation === 'angle' ? radialTickCoords[0] : tickCoords.x}
+        y={orientation === 'angle' ? radialTickCoords[1] : tickCoords.y}
+        value={formatValue(tick, format ?? scale.tickFormat?.() ?? ((v) => v))}
+        {...getDefaultLabelProps(tick)}
         {...labelProps}
         class={cls(
           'label text-[10px] stroke-surface-100 [stroke-width:2px] font-light',

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

@@ -4,7 +4,7 @@ import type { SVGAttributes } from 'svelte/elements';
 import Text from './Text.svelte';
 declare const __propDef: {
     props: {
-        /** Location of axis */ placement: 'top' | 'bottom' | 'left' | 'right';
+        /** Location of axis */ placement: 'top' | 'bottom' | 'left' | 'right' | 'angle' | 'radius';
         /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Control the number of ticks*/ ticks?: number | any[] | Function | undefined;

package/dist/components/Chart.svelte

@@ -79,9 +79,13 @@ export let geo = undefined;
   let:width
   let:element
   let:xScale
+  let:xGet
   let:yScale
+  let:yGet
   let:zScale
+  let:zGet
   let:rScale
+  let:rGet
   let:padding
   let:data
   let:flatData
@@ -100,9 +104,13 @@ export let geo = undefined;
           {projection}
           {tooltip}
           {xScale}
+          {xGet}
           {yScale}
+          {yGet}
           {zScale}
+          {zGet}
           {rScale}
+          {rGet}
           {padding}
           {data}
           {flatData}
@@ -118,9 +126,13 @@ export let geo = undefined;
         {element}
         {projection}
         {xScale}
+        {xGet}
         {yScale}
+        {yGet}
         {zScale}
+        {zGet}
         {rScale}
+        {rGet}
         {padding}
         {data}
         {flatData}

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

@@ -32,9 +32,13 @@ declare const __propDef: {
             element: Element;
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
             xScale: any;
+            xGet: any;
             yScale: any;
+            yGet: any;
             zScale: any;
+            zGet: any;
             rScale: any;
+            rGet: any;
             padding: {
                 top: number;
                 right: number;

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/Points.svelte

@@ -4,11 +4,14 @@ import { notNull } from 'svelte-ux';
 import Circle from './Circle.svelte';
 import Link from './Link.svelte';
 import { isScaleBand } from '../utils/scales';
+import { pointRadial } from 'd3-shape';
 const context = getContext('LayerCake');
 const { data, xGet, y, yGet, xScale, yScale, rGet, config } = context;
 export let r = 5;
 export let offsetX = undefined;
 export let offsetY = undefined;
+/** Use radial instead of cartesian line generator, mapping `x` to `angle` and `y` to `radius`.  Radial points are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+export let radial = false;
 /** Enable showing links between related points (array x/y accessors) */
 export let links = false;
 function getOffset(value, offset, scale) {
@@ -18,7 +21,7 @@ function getOffset(value, offset, scale) {
     else if (offset != null) {
         return offset;
     }
-    else if (isScaleBand(scale)) {
+    else if (isScaleBand(scale) && !radial) {
         return scale.bandwidth() / 2;
     }
     else {
@@ -123,9 +126,10 @@ $: _links = $data.flatMap((d) => {
 
   <g class="point-group">
     {#each points as point}
+      {@const radialPoint = pointRadial(point.x, point.y)}
       <Circle
-        cx={point.x}
-        cy={point.y}
+        cx={radial ? radialPoint[0] : point.x}
+        cy={radial ? radialPoint[1] : point.y}
         {r}
         fill={$config.r ? $rGet(point.data) : null}
         {...$$restProps}

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         r?: number | undefined;
         offsetX?: number | ((value: number, context: any) => number) | undefined;
         offsetY?: number | ((value: number, context: any) => number) | undefined;
+        radial?: boolean | undefined;
         links?: boolean | Partial<{
             [x: string]: any;
             data?: any;

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

@@ -3,20 +3,22 @@ import { writable } from 'svelte/store';
 import { tweened as tweenedStore } from 'svelte/motion';
 import { draw as _drawTransition } from 'svelte/transition';
 import { cubicInOut } from 'svelte/easing';
-import { line as d3Line } from 'd3-shape';
+import { line as d3Line, lineRadial } from 'd3-shape';
 // import { interpolateString } from 'd3-interpolate';
 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 */
 export let pathData = undefined;
-/** Override x accessor */
+/** Use radial instead of cartesian line generator, mapping `x` to `angle` and `y` to `radius`.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+export let radial = false;
+/** Override `x` accessor from Chart context.  Applies to `angle` when `radial=true` */
 export let x = undefined; // TODO: Update Type
-/** Override y accessor */
+/** Override `y` accessor from Chart context.  Applies to `radius` when `radial=true` */
 export let y = undefined; // TODO: Update Type
 /** Interpolate path data using d3-interpolate-path.  Works best without `draw` enabled */
 export let tweened = undefined;
@@ -37,9 +39,13 @@ let d = '';
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
-    const path = d3Line()
-        .x(x ?? $xGet)
-        .y(y ?? $yGet);
+    const path = radial
+        ? lineRadial()
+            .angle((d) => (x ? $xScale(x(d)) : $xGet(d)))
+            .radius((d) => (y ? $yScale(y(d)) : $yGet(d)))
+        : d3Line()
+            .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/Spline.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         [x: string]: any;
         data?: any;
         pathData?: string | undefined | null;
+        radial?: boolean | undefined;
         x?: any;
         y?: any;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

package/dist/components/Tooltip.svelte

@@ -15,7 +15,7 @@ export let yOffset = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
 export let anchor = 'top-left';
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
 export let animate = true;
-export let variant = 'dark';
+export let variant = 'default';
 export let header = undefined;
 export let classes = {};
 const { padding, xGet, yGet, containerWidth, containerHeight } = getContext('LayerCake');
@@ -115,13 +115,13 @@ $: if ($tooltip?.data) {
           ['[&_.value]:text-sm [&_.value]:tabular-nums'],
         ],
         {
-          dark: [
-            'bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white',
-            '[&_.label]:text-white/75',
+          default: [
+            'bg-surface-100/90 dark:bg-surface-300/90 backdrop-filter backdrop-blur-[2px] text-surface-content',
+            '[&_.label]:text-surface-content/75',
           ],
-          light: [
-            'bg-white text-gray-800 border border-gray-500',
-            '[&_.label]:text-surface-content/50',
+          invert: [
+            'bg-surface-content/90 backdrop-filter backdrop-blur-[2px] text-surface-100 border border-surface-content',
+            '[&_.label]:text-surface-100/50',
           ],
           none: '',
         }[variant],

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

@@ -9,7 +9,7 @@ declare const __propDef: {
         anchor?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         contained?: false | "container" | undefined;
         animate?: boolean | undefined;
-        variant?: "none" | "dark" | "light" | undefined;
+        variant?: "default" | "none" | "invert" | undefined;
         header?: ((data: any) => any) | undefined;
         classes?: {
             root?: string | undefined;

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/Zoom.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
         disablePointer?: boolean | undefined;
-        scroll?: "none" | "scale" | "translate" | undefined;
+        scroll?: "scale" | "translate" | "none" | undefined;
         clickDistance?: number | undefined;
         initialTranslate?: {
             x: number;

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/dist/utils/math.d.ts

@@ -6,3 +6,24 @@ export declare function degreesToRadians(degrees: number): number;
  * Convert radians to degrees
  */
 export declare function radiansToDegrees(radians: number): number;
+/**
+ * Convert polar to cartesian coordinate system.
+ * see also: https://d3js.org/d3-shape/symbol#pointRadial
+ * @param angle - Angle in radians
+ * @param radius - Radius
+ */
+export declare function polarToCartesian(angle: number, radius: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Convert cartesian to polar coordinate system.  Angle in radians
+ */
+export declare function cartesianToPolar(x: number, y: number): {
+    radius: number;
+    angle: number;
+};
+/** Convert celsius temperature to fahrenheit */
+export declare function celsiusToFahrenheit(temperature: number): number;
+/** Convert fahrenheit temperature to celsius */
+export declare function fahrenheitToCelsius(temperature: number): number;

package/dist/utils/math.js

@@ -10,3 +10,32 @@ export function degreesToRadians(degrees) {
 export function radiansToDegrees(radians) {
     return radians * (180 / Math.PI);
 }
+/**
+ * Convert polar to cartesian coordinate system.
+ * see also: https://d3js.org/d3-shape/symbol#pointRadial
+ * @param angle - Angle in radians
+ * @param radius - Radius
+ */
+export function polarToCartesian(angle, radius) {
+    return {
+        x: radius * Math.cos(angle),
+        y: radius * Math.sin(angle),
+    };
+}
+/**
+ * Convert cartesian to polar coordinate system.  Angle in radians
+ */
+export function cartesianToPolar(x, y) {
+    return {
+        radius: Math.sqrt(x ** 2 + y ** 2),
+        angle: Math.atan(y / x),
+    };
+}
+/** Convert celsius temperature to fahrenheit */
+export function celsiusToFahrenheit(temperature) {
+    return temperature * (9 / 5) + 32;
+}
+/** Convert fahrenheit temperature to celsius */
+export function fahrenheitToCelsius(temperature) {
+    return (temperature - 32) * (5 / 9);
+}

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",
@@ -83,7 +83,7 @@
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.105.8",
     "shapefile": "^0.6.6",
-    "svelte-ux": "0.60.2",
+    "svelte-ux": ">=0.60",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {