layerchart 2.0.0-next.1 → 2.0.0-next.3

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

@@ -1,52 +1,66 @@
-import { SvelteComponentTyped } from "svelte";
-import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
-import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
-declare const __propDef: {
-    props: {
-        data?: any[] | undefined;
-        /**
-           * Range [min,max] in degrees.  See also startAngle/endAngle
-           */ range?: number[];
-        /**
-           * Start angle in radians
-           */ startAngle?: number | undefined;
-        /**
-           * End angle in radians
-           */ endAngle?: number | undefined;
-        /**
-           * Define innerRadius.
-           *   value >= 1: discrete value
-           *   value >  0: percent of `outerRadius`
-           *   value <  0: offset of `outerRadius`
-           *   default: yRange min
-           */ innerRadius?: number | undefined;
-        /**
-           * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
-           */ outerRadius?: number | undefined;
-        cornerRadius?: number;
-        padAngle?: number;
-        spring?: boolean | Parameters<typeof springStore>[1];
-        tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        /**
-           * Offset all arcs from center
-           */ offset?: number;
-        /**
-           * Tooltip context to setup pointer events to show tooltip for related data
-           */ tooltip?: TooltipContextValue | undefined;
-        sort?: ((a: any, b: any) => number) | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            arcs: import("d3-shape").PieArcDatum<any>[];
-        };
-    };
+import { type PieArcDatum } from 'd3-shape';
+export type PiePropsWithoutHTML = {
+    data?: any[];
+    /**
+     * Range [min,max] in degrees.  See also startAngle/endAngle
+     *
+     * @default [0, 360]
+     */
+    range?: [number, number] | number[];
+    /**
+     * Start angle in radians
+     */
+    startAngle?: number;
+    /**
+     * End angle in radians
+     */
+    endAngle?: number;
+    /**
+     * Define innerRadius.
+     *   value >= 1: discrete value
+     *   value >  0: percent of `outerRadius`
+     *   value <  0: offset of `outerRadius`
+     *   default: yRange min
+     */
+    innerRadius?: number;
+    /**
+     * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+     */
+    outerRadius?: number;
+    /**
+     * Corner radius of the arc
+     *
+     * @default 0
+     */
+    cornerRadius?: number;
+    /**
+     * Angle between the arcs
+     *
+     * @default 0
+     */
+    padAngle?: number;
+    /**
+     * Offset all arcs from center
+     *
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * Tooltip context to setup pointer events to show tooltip for related data
+     */
+    tooltipContext?: TooltipContextValue;
+    /**
+     * Sort function to sort the arcs
+     */
+    sort?: ((a: any, b: any) => number) | null;
+    children?: Snippet<[{
+        arcs: PieArcDatum<any>[];
+    }]>;
+    motion?: MotionProp;
 };
-export type PieProps = typeof __propDef.props;
-export type PieEvents = typeof __propDef.events;
-export type PieSlots = typeof __propDef.slots;
-export default class Pie extends SvelteComponentTyped<PieProps, PieEvents, PieSlots> {
-}
-export {};
+import { type MotionProp } from '../utils/motion.svelte.js';
+import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+import type { Snippet } from 'svelte';
+declare const Pie: import("svelte").Component<PiePropsWithoutHTML, {}, "">;
+type Pie = ReturnType<typeof Pie>;
+export default Pie;

package/dist/components/Point.svelte

@@ -1,14 +1,25 @@
-<script lang="ts">
-  import { chartContext } from './ChartContext.svelte';
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export type PointProps = {
+    /**
+     * Single data point to translate to x/y
+     */
+    d: any;
 
-  const context = chartContext() as any;
-  const { xGet, yGet } = context;
+    /**
+     * Children containing the x and y values
+     */
+    children?: Snippet<[{ x: number; y: number }]>;
+  };
+</script>
+
+<script lang="ts">
+  import { getChartContext } from './Chart.svelte';
 
-  /** Single data point to translate to x/y */
-  export let d;
+  let { d, children }: PointProps = $props();
 
-  $: x = $xGet(d);
-  $: y = $yGet(d);
+  const ctx = getChartContext();
 </script>
 
-<slot {x} {y} />
+{@render children?.({ x: ctx.xGet(d), y: ctx.yGet(d) })}

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

@@ -1,21 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /** Single data point to translate to x/y */ d: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            x: any;
-            y: any;
-        };
-    };
+import type { Snippet } from 'svelte';
+export type PointProps = {
+    /**
+     * Single data point to translate to x/y
+     */
+    d: any;
+    /**
+     * Children containing the x and y values
+     */
+    children?: Snippet<[{
+        x: number;
+        y: number;
+    }]>;
 };
-export type PointProps = typeof __propDef.props;
-export type PointEvents = typeof __propDef.events;
-export type PointSlots = typeof __propDef.slots;
-export default class Point extends SvelteComponentTyped<PointProps, PointEvents, PointSlots> {
-}
-export {};
+declare const Point: import("svelte").Component<PointProps, {}, "">;
+type Point = ReturnType<typeof Point>;
+export default Point;

package/dist/components/Points.svelte

@@ -1,79 +1,139 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { ComponentProps, Snippet } from 'svelte';
+
   export type Point = { x: number; y: number; r: number; xValue: any; yValue: any; data: any };
+  type Offset = number | ((value: number, context: any) => number) | undefined;
+
+  export type PointsPropsWithoutHTML = {
+    /**
+     * Override data instead of using context
+     */
+    data?: any;
+
+    /**
+     * Override `x` accessor from Chart context
+     */
+    x?: Accessor;
+    /**
+     *  Override `y` accessor from Chart context
+     */
+    y?: Accessor;
+
+    /**
+     * Override `r` accessor from Chart context
+     *
+     * @default 5
+     */
+    r?: number;
+
+    /**
+     * The offset of the point in the x direction
+     */
+    offsetX?: Offset;
+
+    /**
+     * The offset of the point in the y direction
+     */
+    offsetY?: Offset;
+
+    /**
+     * Enable showing links between related points (array x/y accessors)
+     *
+     * @default false
+     */
+    links?: boolean | Partial<ComponentProps<typeof Link>>;
+
+    children?: Snippet<[{ points: Point[] }]>;
+  } & CommonStyleProps;
+
+  export type PointsProps = PointsPropsWithoutHTML &
+    Omit<Without<CircleProps, PointsPropsWithoutHTML>, 'ref'>;
 </script>
 
 <script lang="ts">
-  import { type ComponentProps } from 'svelte';
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
-  import { notNull } from '@layerstack/utils';
 
-  import { chartContext } from './ChartContext.svelte';
-  import Circle from './Circle.svelte';
+  import Circle, { type CircleProps } from './Circle.svelte';
   import Link from './Link.svelte';
-  import { isScaleBand, type AnyScale } from '../utils/scales.js';
+  import { isScaleBand, type AnyScale } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
-
-  const context = chartContext() as any;
-  const {
-    data: contextData,
-    x: contextX,
-    xScale,
-    xGet,
-    y: contextY,
-    yScale,
-    yGet,
-    cGet,
-    rGet,
-    config,
-    radial,
-  } = context;
-
-  type Offset = number | ((value: number, context: any) => number) | undefined;
-
-  /** Override data instead of using context */
-  export let data: any = undefined;
-
-  /** Override `x` accessor from Chart context */
-  export let x: Accessor = undefined;
-  /** Override `y` accessor from Chart context */
-  export let y: Accessor = undefined;
-
-  export let r = 5;
-  export let offsetX: Offset = undefined;
-  export let offsetY: Offset = undefined;
-
-  /** Enable showing links between related points (array x/y accessors) */
-  export let links: boolean | Partial<ComponentProps<Link>> = false;
-
-  export let fill: string | undefined = undefined;
-  export let fillOpacity: number | undefined = undefined;
-  export let stroke: string | undefined = undefined;
-  export let strokeWidth: number | undefined = undefined;
-  export let opacity: number | undefined = undefined;
-
-  let className: string | undefined = undefined;
-  export { className as class };
+  import { getChartContext } from './Chart.svelte';
+  import { extractLayerProps } from '../utils/attributes.js';
+
+  const ctx = getChartContext();
+
+  let {
+    data,
+    x,
+    y,
+    r = 5,
+    offsetX,
+    offsetY,
+    links = false,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    children,
+    ...restProps
+  }: PointsProps = $props();
 
   function getOffset(value: any, offset: Offset, scale: AnyScale) {
     if (typeof offset === 'function') {
-      return offset(value, context);
+      return offset(value, ctx);
     } else if (offset != null) {
       return offset;
-    } else if (isScaleBand(scale) && !$radial) {
+    } else if (isScaleBand(scale) && !ctx.radial) {
       return scale.bandwidth() / 2;
     } else {
       return 0;
     }
   }
 
-  $: xAccessor = x ? accessor(x) : $contextX;
-  $: yAccessor = y ? accessor(y) : $contextY;
+  const xAccessor = $derived(x ? accessor(x) : ctx.x);
+  const yAccessor = $derived(y ? accessor(y) : ctx.y);
+  const pointsData = $derived(data ?? ctx.data);
+
+  // Pre-calculate common values to avoid redundant calculations
+  const getPointObject = (xVal: number, yVal: number, d: any): Point => {
+    // Only calculate these scaled values once per point
+    const scaledX: number = ctx.xScale(xVal);
+    const scaledY: number = ctx.yScale(yVal);
+
+    return {
+      x: scaledX + getOffset(scaledX, offsetX, ctx.xScale),
+      y: scaledY + getOffset(scaledY, offsetY, ctx.yScale),
+      r: ctx.config.r ? ctx.rGet(d) : r,
+      xValue: xVal,
+      yValue: yVal,
+      data: d,
+    };
+  };
+
+  const points = $derived(
+    pointsData.flatMap((d: any) => {
+      const xValue: number | number[] = xAccessor(d);
+      const yValue: number | number[] = yAccessor(d);
+
+      if (Array.isArray(xValue)) {
+        return xValue
+          .filter(Boolean)
+          .map((xVal: number) => getPointObject(xVal, yValue as number, d));
+      } else if (Array.isArray(yValue)) {
+        return yValue.filter(Boolean).map((yVal: number) => getPointObject(xValue, yVal, d));
+      } else if (xValue != null && yValue != null) {
+        return getPointObject(xValue as number, yValue as number, d);
+      }
 
-  $: pointsData = data ?? $contextData;
+      return [];
+    }) as Point[]
+  );
 
-  $: points = pointsData
-    .flatMap((d: any) => {
+  const _links = $derived(
+    pointsData.flatMap((d: any) => {
       const xValue = xAccessor(d);
       const yValue = yAccessor(d);
 
@@ -82,99 +142,51 @@
 				x={["prop1" ,"prop2"]}
 				y="prop3"
 			*/
-        return xValue.filter(notNull).map((xValue: number) => {
-          return {
-            x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
-            y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
-            r: $config.r ? $rGet(d) : r,
-            xValue,
-            yValue,
-            data: d,
-          };
-        });
+        const [xMin, xMax] = extent(ctx.xGet(d)) as unknown as [number, number];
+        const y = ctx.yGet(d) + getOffset(ctx.yGet(d), offsetY, ctx.yScale);
+        return {
+          source: {
+            x: xMin + getOffset(xMin, offsetX, ctx.xScale) + (ctx.config.r ? ctx.rGet(d) : r),
+            y,
+          },
+          target: {
+            x: xMax + getOffset(xMax, offsetX, ctx.xScale) - (ctx.config.r ? ctx.rGet(d) : r),
+            y: y,
+          },
+          data: d,
+        };
       } else if (Array.isArray(yValue)) {
         /*
 				x="prop1"
 				y={["prop2" ,"prop3"]}
 			*/
-        return yValue.filter(notNull).map((yValue: number) => {
-          return {
-            x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
-            y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
-            r: $config.r ? $rGet(d) : r,
-            xValue,
-            yValue,
-            data: d,
-          };
-        });
-      } else if (xValue != null && yValue != null) {
-        /*
-				x="prop1"
-				y="prop2"
-			*/
+        const x = ctx.xGet(d) + getOffset(ctx.xGet(d), offsetX, ctx.xScale);
+        const [yMin, yMax] = extent(ctx.yGet(d)) as unknown as [number, number];
         return {
-          x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
-          y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
-          r: $config.r ? $rGet(d) : r,
-          xValue,
-          yValue,
+          source: {
+            x: x,
+            y: yMin + getOffset(yMin, offsetY, ctx.yScale),
+          },
+          target: {
+            x: x,
+            y: yMax + getOffset(yMax, offsetY, ctx.yScale),
+          },
           data: d,
         };
       }
     })
-    .filter((p: Point) => p) as Point[];
-
-  $: _links = pointsData.flatMap((d: any) => {
-    const xValue = xAccessor(d);
-    const yValue = yAccessor(d);
-
-    if (Array.isArray(xValue)) {
-      /*
-				x={["prop1" ,"prop2"]}
-				y="prop3"
-			*/
-      const [xMin, xMax] = extent($xGet(d)) as unknown as [number, number];
-      const y = $yGet(d) + getOffset($yGet(d), offsetY, $yScale);
-      return {
-        source: {
-          x: xMin + getOffset(xMin, offsetX, $xScale) + ($config.r ? $rGet(d) : r),
-          y,
-        },
-        target: {
-          x: xMax + getOffset(xMax, offsetX, $xScale) - ($config.r ? $rGet(d) : r),
-          y: y,
-        },
-        data: d,
-      };
-    } else if (Array.isArray(yValue)) {
-      /*
-				x="prop1"
-				y={["prop2" ,"prop3"]}
-			*/
-      const x = $xGet(d) + getOffset($xGet(d), offsetX, $xScale);
-      const [yMin, yMax] = extent($yGet(d)) as unknown as [number, number];
-      return {
-        source: {
-          x: x,
-          y: yMin + getOffset(yMin, offsetY, $yScale),
-        },
-        target: {
-          x: x,
-          y: yMax + getOffset(yMax, offsetY, $yScale),
-        },
-        data: d,
-      };
-    }
-  });
+  );
 </script>
 
-<slot {points}>
+{#if children}
+  {@render children({ points })}
+{:else}
   {#if links}
     {#each _links as link}
       <Link
         data={link}
-        stroke={fill ?? ($config.c ? $cGet(link.data) : null)}
-        {...typeof links === 'object' ? links : null}
+        stroke={fill ?? (ctx.config.c ? ctx.cGet(link.data) : null)}
+        {...extractLayerProps(links, 'points-link')}
       />
     {/each}
   {/if}
@@ -182,16 +194,15 @@
   {#each points as point}
     {@const radialPoint = pointRadial(point.x, point.y)}
     <Circle
-      cx={$radial ? radialPoint[0] : point.x}
-      cy={$radial ? radialPoint[1] : point.y}
+      cx={ctx.radial ? radialPoint[0] : point.x}
+      cy={ctx.radial ? radialPoint[1] : point.y}
       r={point.r}
-      fill={fill ?? ($config.c ? $cGet(point.data) : null)}
+      fill={fill ?? (ctx.config.c ? ctx.cGet(point.data) : null)}
       {fillOpacity}
       {stroke}
       {strokeWidth}
       {opacity}
-      class={className}
-      {...$$restProps}
+      {...extractLayerProps(restProps, 'point')}
     />
   {/each}
-</slot>
+{/if}

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

@@ -1,4 +1,5 @@
-import { SvelteComponentTyped } from "svelte";
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { ComponentProps, Snippet } from 'svelte';
 export type Point = {
     x: number;
     y: number;
@@ -7,38 +8,48 @@ export type Point = {
     yValue: any;
     data: any;
 };
-import { type ComponentProps } from 'svelte';
+type Offset = number | ((value: number, context: any) => number) | undefined;
+export type PointsPropsWithoutHTML = {
+    /**
+     * Override data instead of using context
+     */
+    data?: any;
+    /**
+     * Override `x` accessor from Chart context
+     */
+    x?: Accessor;
+    /**
+     *  Override `y` accessor from Chart context
+     */
+    y?: Accessor;
+    /**
+     * Override `r` accessor from Chart context
+     *
+     * @default 5
+     */
+    r?: number;
+    /**
+     * The offset of the point in the x direction
+     */
+    offsetX?: Offset;
+    /**
+     * The offset of the point in the y direction
+     */
+    offsetY?: Offset;
+    /**
+     * Enable showing links between related points (array x/y accessors)
+     *
+     * @default false
+     */
+    links?: boolean | Partial<ComponentProps<typeof Link>>;
+    children?: Snippet<[{
+        points: Point[];
+    }]>;
+} & CommonStyleProps;
+export type PointsProps = PointsPropsWithoutHTML & Omit<Without<CircleProps, PointsPropsWithoutHTML>, 'ref'>;
+import { type CircleProps } from './Circle.svelte';
 import Link from './Link.svelte';
 import { type Accessor } from '../utils/common.js';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        data?: any;
-        x?: Accessor;
-        y?: Accessor;
-        r?: number | undefined;
-        offsetX?: number | ((value: number, context: any) => number) | undefined;
-        offsetY?: number | ((value: number, context: any) => number) | undefined;
-        links?: (boolean | Partial<ComponentProps<Link>>) | undefined;
-        fill?: string | undefined | undefined;
-        fillOpacity?: number | undefined | undefined;
-        stroke?: string | undefined | undefined;
-        strokeWidth?: number | undefined | undefined;
-        opacity?: number | undefined | undefined;
-        class?: string | undefined | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            points: Point[];
-        };
-    };
-};
-export type PointsProps = typeof __propDef.props;
-export type PointsEvents = typeof __propDef.events;
-export type PointsSlots = typeof __propDef.slots;
-export default class Points extends SvelteComponentTyped<PointsProps, PointsEvents, PointsSlots> {
-}
-export {};
+declare const Points: import("svelte").Component<PointsProps, {}, "">;
+type Points = ReturnType<typeof Points>;
+export default Points;