layerchart 2.0.0-next.2 → 2.0.0-next.20

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
      *
@@ -50,26 +52,30 @@
   };
 
   export type VoronoiProps = VoronoiPropsWithoutHTML &
-    Without<Omit<SVGAttributes<SVGGElement>, 'children'>, VoronoiPropsWithoutHTML>;
+    Without<Omit<GroupProps, 'children'>, VoronoiPropsWithoutHTML>;
 </script>
 
 <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';
   import { cls } from '@layerstack/tailwind';
 
   import GeoPath from './GeoPath.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   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,
@@ -108,54 +114,67 @@
   // 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>
 
-<g {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
+<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}
-</g>
+</Group>

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

@@ -1,10 +1,11 @@
 import type { Without } from '../utils/types.js';
-import type { SVGAttributes } from 'svelte/elements';
 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,8 +36,9 @@ export type VoronoiPropsWithoutHTML = {
         feature?: GeoPermissibleObjects;
     }) => void;
 };
-export type VoronoiProps = VoronoiPropsWithoutHTML & Without<Omit<SVGAttributes<SVGGElement>, 'children'>, VoronoiPropsWithoutHTML>;
-import type { GeoPermissibleObjects } from 'd3-geo';
+export type VoronoiProps = VoronoiPropsWithoutHTML & Without<Omit<GroupProps, 'children'>, VoronoiPropsWithoutHTML>;
+import { type GeoPermissibleObjects } from 'd3-geo';
+import { type GroupProps } from './Group.svelte';
 declare const Voronoi: import("svelte").Component<VoronoiProps, {}, "">;
 type Voronoi = ReturnType<typeof Voronoi>;
 export default Voronoi;

package/dist/components/charts/ArcChart.svelte

@@ -264,8 +264,8 @@
       placement: 'bottom',
       variant: 'swatches',
       onclick: (e, item) => {
-        selectedKeys.toggleSelected(item.value);
-        selectedSeries.toggleSelected(item.value);
+        selectedKeys.toggle(item.value);
+        selectedSeries.toggle(item.value);
       },
       onpointerenter: (e, item) => (highlightKey.current = item.value),
       onpointerleave: (e) => (highlightKey.current = null),

package/dist/components/charts/AreaChart.svelte

@@ -69,7 +69,6 @@
   import { onMount, type ComponentProps } from 'svelte';
   import { scaleLinear, scaleTime } from 'd3-scale';
   import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
-  import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Area from '../Area.svelte';
@@ -136,7 +135,14 @@
 
   const series = $derived(
     seriesProp === undefined
-      ? [{ key: 'default', value: y, color: 'var(--color-primary)' }]
+      ? [
+          {
+            key: 'default',
+            label: typeof y === 'string' ? y : 'value',
+            value: y,
+            color: 'var(--color-primary)',
+          },
+        ]
       : seriesProp
   );
 
@@ -398,13 +404,7 @@
     if (axisDirection === 'y') {
       return {
         placement: radial ? 'radius' : 'left',
-        format: (value) => {
-          if (seriesLayout === 'stackExpand') {
-            return format(value, 'percentRound');
-          } else {
-            return format(value, undefined, { variant: 'short' });
-          }
-        },
+        format: seriesLayout === 'stackExpand' ? 'percentRound' : undefined,
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
@@ -412,7 +412,6 @@
 
     return {
       placement: radial ? 'angle' : 'bottom',
-      format: (value) => format(value, undefined, { variant: 'short' }),
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };

package/dist/components/charts/BarChart.svelte

@@ -84,9 +84,8 @@
 
 <script lang="ts" generics="TData">
   import { onMount, type ComponentProps } from 'svelte';
-  import { scaleBand, scaleLinear } from 'd3-scale';
+  import { scaleBand, scaleLinear, scaleTime } from 'd3-scale';
   import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
-  import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Axis from '../Axis.svelte';
@@ -109,7 +108,7 @@
   import { asAny } from '../../utils/types.js';
   import type { Insets } from '../../utils/rect.svelte.js';
   import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
-  import type { AnyScale } from '../../utils/scales.svelte.js';
+  import { isScaleTime, type AnyScale } from '../../utils/scales.svelte.js';
   import { createLegendProps, SeriesState } from './utils.svelte.js';
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
   import DefaultTooltip from './DefaultTooltip.svelte';
@@ -160,6 +159,14 @@
       ? [
           {
             key: 'default',
+            label:
+              orientation === 'vertical'
+                ? typeof yProp === 'string'
+                  ? yProp
+                  : 'value'
+                : typeof xProp === 'string'
+                  ? xProp
+                  : 'value',
             value: orientation === 'vertical' ? yProp : xProp,
           },
         ]
@@ -171,15 +178,56 @@
   const isStackSeries = $derived(seriesLayout.startsWith('stack'));
   const isGroupSeries = $derived(seriesLayout === 'group');
 
+  const chartData: Array<TData & { stackData?: any }> = $derived.by(() => {
+    let _chartData = (
+      seriesState.allSeriesData.length ? seriesState.allSeriesData : chartDataArray(data)
+    ) as Array<TData & { stackData?: any }>;
+    if (isStackSeries) {
+      const seriesKeys = seriesState.visibleSeries.map((s) => s.key);
+
+      const offset =
+        seriesLayout === 'stackExpand'
+          ? stackOffsetExpand
+          : seriesLayout === 'stackDiverging'
+            ? stackOffsetDiverging
+            : stackOffsetNone;
+      const stackData = stack()
+        .keys(seriesKeys)
+        .value((d, key) => {
+          const s = series.find((d) => d.key === key)!;
+          return accessor(s.value ?? s.key)(d as any);
+        })
+        .offset(offset)(chartDataArray(data)) as any[];
+
+      _chartData = _chartData.map((d, i) => {
+        return {
+          ...d,
+          stackData: stackData.map((sd) => sd[i]),
+        };
+      });
+    }
+    return _chartData;
+  });
+
   const xScale = $derived(
-    xScaleProp ?? (isVertical ? scaleBand().padding(bandPadding) : scaleLinear())
+    xScaleProp ??
+      (isVertical
+        ? scaleBand().padding(bandPadding)
+        : accessor(xProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. x={['start', 'end']})
+          ? scaleTime()
+          : scaleLinear())
   );
-  const xBaseline = $derived(isVertical ? undefined : 0);
+  const xBaseline = $derived(isVertical || isScaleTime(xScale) ? undefined : 0);
 
   const yScale = $derived(
-    yScaleProp ?? (isVertical ? scaleLinear() : scaleBand().padding(bandPadding))
+    yScaleProp ??
+      (isVertical
+        ? accessor(yProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. y={['start', 'end']})
+          ? scaleTime()
+          : scaleLinear()
+        : scaleBand().padding(bandPadding))
   );
-  const yBaseline = $derived(isVertical ? 0 : undefined);
+  const yBaseline = $derived(isVertical || isScaleTime(yScale) ? 0 : undefined);
 
   const x1Scale = $derived(
     isGroupSeries && isVertical ? scaleBand().padding(groupPadding) : undefined
@@ -214,37 +262,6 @@
     return d && typeof d === 'object' && 'stackData' in d;
   }
 
-  const chartData: Array<TData & { stackData?: any }> = $derived.by(() => {
-    let _chartData = (
-      seriesState.allSeriesData.length ? seriesState.allSeriesData : chartDataArray(data)
-    ) as Array<TData & { stackData?: any }>;
-    if (isStackSeries) {
-      const seriesKeys = seriesState.visibleSeries.map((s) => s.key);
-
-      const offset =
-        seriesLayout === 'stackExpand'
-          ? stackOffsetExpand
-          : seriesLayout === 'stackDiverging'
-            ? stackOffsetDiverging
-            : stackOffsetNone;
-      const stackData = stack()
-        .keys(seriesKeys)
-        .value((d, key) => {
-          const s = series.find((d) => d.key === key)!;
-          return accessor(s.value ?? s.key)(d as any);
-        })
-        .offset(offset)(chartDataArray(data)) as any[];
-
-      _chartData = _chartData.map((d, i) => {
-        return {
-          ...d,
-          stackData: stackData.map((sd) => sd[i]),
-        };
-      });
-    }
-    return _chartData;
-  });
-
   function getBarsProps(s: SeriesData<TData, typeof Bars>, i: number): ComponentProps<typeof Bars> {
     const isFirst = i == 0;
     const isLast = i == seriesState.visibleSeries.length - 1;
@@ -278,7 +295,12 @@
       y: isVertical ? valueAccessor : undefined,
       x1: isVertical && isGroupSeries ? (d) => s.value ?? s.key : undefined,
       y1: !isVertical && isGroupSeries ? (d) => s.value ?? s.key : undefined,
-      rounded: isStackLayout && i !== seriesState.visibleSeries.length - 1 ? 'none' : 'edge',
+      rounded:
+        isStackLayout && i !== seriesState.visibleSeries.length - 1
+          ? 'none'
+          : Array.isArray(xProp) || Array.isArray(yProp)
+            ? 'all'
+            : 'edge',
       radius: 4,
       strokeWidth: 1,
       insets: stackInsets,
@@ -350,26 +372,14 @@
       return {
         placement: radial ? 'radius' : 'left',
 
-        format: (value) => {
-          if (isVertical && seriesLayout === 'stackExpand') {
-            return format(value, 'percentRound');
-          } else {
-            return format(value, undefined, { variant: 'short' });
-          }
-        },
+        format: isVertical && seriesLayout === 'stackExpand' ? 'percentRound' : undefined,
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
     }
     return {
       placement: radial ? 'angle' : 'bottom',
-      format: (value) => {
-        if (!isVertical && seriesLayout === 'stackExpand') {
-          return format(value, 'percentRound');
-        } else {
-          return format(value, undefined, { variant: 'short' });
-        }
-      },
+      format: !isVertical && seriesLayout === 'stackExpand' ? 'percentRound' : undefined,
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };

package/dist/components/charts/DefaultTooltip.svelte

@@ -41,7 +41,7 @@
       {/each}
 
       {#if canHaveTotal && payload.length > 1 && !tooltipProps?.hideTotal}
-        <Tooltip.Separator {...tooltipProps?.separator} />
+        <Tooltip.Separator {...tooltipProps?.separator} children={undefined} />
 
         <Tooltip.Item
           label="total"

package/dist/components/charts/LineChart.svelte

@@ -70,7 +70,6 @@
 <script lang="ts" generics="TData">
   import { onMount, type ComponentProps } from 'svelte';
   import { scaleLinear, scaleTime } from 'd3-scale';
-  import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Axis from '../Axis.svelte';
@@ -142,7 +141,14 @@
 
   const series = $derived(
     seriesProp === undefined
-      ? [{ key: 'default', value: yProp, color: 'var(--color-primary)' }]
+      ? [
+          {
+            key: 'default',
+            label: typeof yProp === 'string' ? yProp : 'value',
+            value: yProp,
+            color: 'var(--color-primary)',
+          },
+        ]
       : seriesProp
   );
   const seriesState = new SeriesState(() => series);
@@ -284,14 +290,12 @@
     if (axisDirection === 'y') {
       return {
         placement: radial ? 'radius' : 'left',
-        format: (value) => format(value, undefined, { variant: 'short' }),
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
     }
     return {
       placement: radial ? 'angle' : 'bottom',
-      format: (value) => format(value, undefined, { variant: 'short' }),
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };
@@ -377,7 +381,6 @@
       {@render childrenProp(snippetProps)}
     {:else}
       {@render belowContext?.(snippetProps)}
-      <!-- TODO: Always use `Svg` until `Pattern` supports `Canvas` (issue #307) -->
 
       <Layer
         type={renderContext}

package/dist/components/charts/PieChart.svelte

@@ -281,9 +281,9 @@
       placement: 'bottom',
       variant: 'swatches',
       onclick: (e, item) => {
-        selectedKeys.toggleSelected(item.value);
+        selectedKeys.toggle(item.value);
         // TODO: investigate
-        // selectedSeries.toggleSelected(item.value);
+        // selectedSeries.toggle(item.value);
       },
       onpointerenter: (e, item) => (highlightKey.current = item.value),
       onpointerleave: (e) => (highlightKey.current = null),

package/dist/components/charts/ScatterChart.svelte

@@ -205,14 +205,12 @@
     if (axisDirection === 'y') {
       return {
         placement: 'left',
-        format: (value) => format(value, undefined, { variant: 'short' }),
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
     }
     return {
       placement: 'bottom',
-      format: (value) => format(value, undefined, { variant: 'short' }),
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };

package/dist/components/charts/utils.svelte.d.ts

@@ -4,12 +4,12 @@ import type { SeriesData } from './types.js';
 import type Legend from '../Legend.svelte';
 export declare class HighlightKey<TData, SeriesComponent extends Component> {
     current: string | null;
-    set(seriesKey: typeof this.current): void;
+    set: (seriesKey: typeof this.current) => void;
 }
 export declare class SeriesState<TData, TComponent extends Component> {
     #private;
-    selectedSeries: SelectionState<unknown>;
-    selectedKeys: SelectionState<unknown>;
+    selectedSeries: SelectionState<unknown, false>;
+    selectedKeys: SelectionState<unknown, false>;
     highlightKey: HighlightKey<TData, TComponent>;
     constructor(getSeries: () => SeriesData<TData, TComponent>[]);
     get series(): SeriesData<TData, TComponent>[];

package/dist/components/charts/utils.svelte.js

@@ -2,9 +2,9 @@ import { SelectionState } from '@layerstack/svelte-state';
 import { scaleOrdinal } from 'd3-scale';
 export class HighlightKey {
     current = $state(null);
-    set(seriesKey) {
+    set = (seriesKey) => {
         this.current = seriesKey;
-    }
+    };
 }
 export class SeriesState {
     #series = $state.raw([]);
@@ -13,6 +13,10 @@ export class SeriesState {
     highlightKey = new HighlightKey();
     constructor(getSeries) {
         this.#series = getSeries();
+        $effect.pre(() => {
+            // keep series state in sync with the prop
+            this.#series = getSeries();
+        });
     }
     get series() {
         return this.#series;
@@ -40,7 +44,7 @@ export function createLegendProps(opts) {
         tickFormat: (key) => opts.seriesState.series.find((s) => s.key === key)?.label ?? key,
         placement: 'bottom',
         variant: 'swatches',
-        onclick: (_, item) => opts.seriesState.selectedSeries.toggleSelected(item.value),
+        onclick: (_, item) => opts.seriesState.selectedSeries.toggle(item.value),
         onpointerenter: (_, item) => (opts.seriesState.highlightKey.current = item.value),
         onpointerleave: () => (opts.seriesState.highlightKey.current = null),
         ...opts.props,

package/dist/components/index.d.ts

@@ -42,6 +42,8 @@ export { default as Connector } from './Connector.svelte';
 export * from './Connector.svelte';
 export { default as Dagre } from './Dagre.svelte';
 export * from './Dagre.svelte';
+export { default as Ellipse } from './Ellipse.svelte';
+export * from './Ellipse.svelte';
 export { default as Frame } from './Frame.svelte';
 export * from './Frame.svelte';
 export { default as ForceSimulation } from './ForceSimulation.svelte';
@@ -102,6 +104,8 @@ export { default as Point } from './Point.svelte';
 export * from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export * from './Points.svelte';
+export { default as Polygon } from './Polygon.svelte';
+export * from './Polygon.svelte';
 export { default as RadialGradient } from './RadialGradient.svelte';
 export * from './RadialGradient.svelte';
 export { default as Rect } from './Rect.svelte';

package/dist/components/index.js

@@ -42,6 +42,8 @@ export { default as Connector } from './Connector.svelte';
 export * from './Connector.svelte';
 export { default as Dagre } from './Dagre.svelte';
 export * from './Dagre.svelte';
+export { default as Ellipse } from './Ellipse.svelte';
+export * from './Ellipse.svelte';
 export { default as Frame } from './Frame.svelte';
 export * from './Frame.svelte';
 export { default as ForceSimulation } from './ForceSimulation.svelte';
@@ -102,6 +104,8 @@ export { default as Point } from './Point.svelte';
 export * from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export * from './Points.svelte';
+export { default as Polygon } from './Polygon.svelte';
+export * from './Polygon.svelte';
 export { default as RadialGradient } from './RadialGradient.svelte';
 export * from './RadialGradient.svelte';
 export { default as Rect } from './Rect.svelte';