layerchart 2.0.0-next.3 → 2.0.0-next.31

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

@@ -4,6 +4,8 @@ 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,7 +37,7 @@ export type VoronoiPropsWithoutHTML = {
     }) => void;
 };
 export type VoronoiProps = VoronoiPropsWithoutHTML & Without<Omit<GroupProps, 'children'>, VoronoiPropsWithoutHTML>;
-import type { GeoPermissibleObjects } from 'd3-geo';
+import { type GeoPermissibleObjects } from 'd3-geo';
 import { type GroupProps } from './Group.svelte';
 declare const Voronoi: import("svelte").Component<VoronoiProps, {}, "">;
 type Voronoi = ReturnType<typeof 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),
@@ -384,7 +384,9 @@
         ]}
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...restProps}
-  tooltip={tooltip === false ? false : props.tooltip?.context}
+  tooltip={tooltip === false
+    ? false
+    : { ...props.tooltip?.context, ...(typeof tooltip === 'object' ? tooltip : null) }}
 >
   {#snippet children({ context })}
     {@const snippetProps = {

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,
     };
@@ -444,10 +443,11 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'bisect-x',
+        mode: 'quadtree-x',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

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';
@@ -142,6 +141,8 @@
     bandPadding = radial ? 0 : 0.4,
     groupPadding = 0,
     stackPadding = 0,
+    xInterval,
+    yInterval,
     tooltip = true,
     children: childrenProp,
     aboveContext,
@@ -160,6 +161,14 @@
       ? [
           {
             key: 'default',
+            label:
+              orientation === 'vertical'
+                ? typeof yProp === 'string'
+                  ? yProp
+                  : 'value'
+                : typeof xProp === 'string'
+                  ? xProp
+                  : 'value',
             value: orientation === 'vertical' ? yProp : xProp,
           },
         ]
@@ -171,15 +180,60 @@
   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 ??
+      (xInterval
+        ? scaleTime()
+        : 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 ??
+      (yInterval
+        ? scaleTime()
+        : 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 +268,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 +301,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 +378,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,
     };
@@ -426,6 +442,7 @@
   {x1Scale}
   {x1Domain}
   {x1Range}
+  {xInterval}
   y={resolveAccessor(yProp)}
   {yScale}
   {yBaseline}
@@ -433,6 +450,7 @@
   {y1Scale}
   {y1Domain}
   {y1Range}
+  {yInterval}
   c={isVertical ? yProp : xProp}
   cRange={['var(--color-primary)']}
   {radial}
@@ -445,6 +463,7 @@
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

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,
     };
@@ -339,10 +343,11 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'bisect-x',
+        mode: 'quadtree-x',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {
@@ -377,7 +382,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),
@@ -409,7 +409,9 @@
         ]}
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...restProps}
-  tooltip={tooltip === false ? false : props.tooltip?.context}
+  tooltip={tooltip === false
+    ? false
+    : { ...props.tooltip?.context, ...(typeof tooltip === 'object' ? tooltip : null) }}
 >
   {#snippet children({ context })}
     {@const snippetProps = {

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,
     };
@@ -255,10 +253,11 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'voronoi',
+        mode: 'quadtree',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

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

@@ -8,8 +8,8 @@ export declare class HighlightKey<TData, SeriesComponent extends Component> {
 }
 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

@@ -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';
@@ -124,7 +128,7 @@ export * as Tooltip from './tooltip/index.js';
 export * from './tooltip/TooltipContext.svelte';
 export { default as TransformContext } from './TransformContext.svelte';
 export * from './TransformContext.svelte';
-// export { default as TransformControls } from './TransformControls.svelte'; // TODO: Restore once no longer using `svelet-ux` or `@mdi/js` (as they are dev dependencies)
+// export { default as TransformControls } from './TransformControls.svelte'; // TODO: Restore once no longer using `svelte-ux` or `~icons` (as they are dev dependencies)
 export { default as Tree } from './Tree.svelte';
 export * from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';