layerchart 2.0.0-next.5 → 2.0.0-next.51

package/dist/components/Pattern.svelte

@@ -125,10 +125,12 @@
 </script>
 
 <script lang="ts">
-  import { getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { getChartContext } from '../contexts/chart.js';
   import { createPattern } from '../utils/canvas.js';
 
+  const chartCtx = getChartContext();
+
   const uid = $props.id();
 
   let {
@@ -144,7 +146,7 @@
     ...restProps
   }: PatternProps = $props();
 
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
   let canvasPattern = $state<CanvasPattern | null>(null);
 
@@ -154,7 +156,7 @@
     const lineDefs = Array.isArray(linesProp) ? linesProp : linesProp === true ? [{}] : [linesProp];
     for (const line of lineDefs) {
       // const spacing = Math.abs(line.spacing);
-      const stroke = line.color ?? 'var(--color-surface-content)';
+      const stroke = line.color ?? 'var(--color-surface-content, currentColor)';
       const strokeWidth = line.width ?? 1;
       const opacity = line.opacity ?? 1;
 
@@ -217,7 +219,7 @@
             cx: size / 4,
             cy: size / 4,
             r: circle.radius ?? 1,
-            fill: circle.color ?? 'var(--color-surface-content)',
+            fill: circle.color ?? 'var(--color-surface-content, currentColor)',
             opacity: circle.opacity ?? 1,
           },
           {
@@ -225,7 +227,7 @@
             cx: (size * 3) / 4,
             cy: (size * 3) / 4,
             r: circle.radius ?? 1,
-            fill: circle.color ?? 'var(--color-surface-content)',
+            fill: circle.color ?? 'var(--color-surface-content, currentColor)',
             opacity: circle.opacity ?? 1,
           }
         );
@@ -235,7 +237,7 @@
           cx: size / 2,
           cy: size / 2,
           r: circle.radius ?? 1,
-          fill: circle.color ?? 'var(--color-surface-content)',
+          fill: circle.color ?? 'var(--color-surface-content, currentColor)',
           opacity: circle.opacity ?? 1,
         });
       }
@@ -247,25 +249,24 @@
     canvasPattern = pattern;
   }
 
-  if (renderCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'Pattern',
+  if (layerCtx === 'canvas') {
+    chartCtx.registerComponent({ name: 'Pattern', kind: 'mark', canvasRender: {
       render,
       deps: () => [width, height, shapes, background],
-    });
+    } });
   }
 </script>
 
-{#if renderCtx === 'canvas'}
+{#if layerCtx === 'canvas'}
   {@render children?.({ id, pattern: asAny(canvasPattern) })}
-{:else if renderCtx === 'svg'}
+{:else if layerCtx === 'svg'}
   <defs>
     <pattern
       {id}
       {width}
       {height}
       patternUnits="userSpaceOnUse"
-      {...extractLayerProps(restProps, 'pattern')}
+      {...extractLayerProps(restProps, 'lc-pattern')}
     >
       {#if patternContent}
         {@render patternContent?.()}

package/dist/components/Pie.svelte

@@ -58,9 +58,9 @@
     offset?: number;
 
     /**
-     * Tooltip context to setup pointer events to show tooltip for related data
+     * Setup pointer events to show tooltip for related data
      */
-    tooltipContext?: TooltipContextValue;
+    tooltip?: boolean;
 
     /**
      * Sort function to sort the arcs
@@ -78,10 +78,8 @@
   import Arc from './Arc.svelte';
   import { degreesToRadians } from '../utils/math.js';
   import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
-  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import type { Snippet } from 'svelte';
-  import { layerClass } from '../utils/attributes.js';
 
   /*
     TODO:
@@ -102,7 +100,7 @@
     padAngle = 0,
     motion,
     offset = 0,
-    tooltipContext,
+    tooltip,
     sort,
     children,
   }: PiePropsWithoutHTML = $props();
@@ -140,7 +138,7 @@
 {:else}
   {#each arcs as arc}
     <Arc
-      class={layerClass('pie-arc')}
+      class="lc-pie-arc"
       startAngle={arc.startAngle}
       endAngle={arc.endAngle}
       padAngle={arc.padAngle}
@@ -150,7 +148,7 @@
       {offset}
       fill={ctx.config.c ? ctx.cScale?.(ctx.c(arc.data)) : null}
       data={arc.data}
-      {tooltipContext}
+      {tooltip}
     />
   {/each}
 {/if}

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

@@ -46,9 +46,9 @@ export type PiePropsWithoutHTML = {
      */
     offset?: number;
     /**
-     * Tooltip context to setup pointer events to show tooltip for related data
+     * Setup pointer events to show tooltip for related data
      */
-    tooltipContext?: TooltipContextValue;
+    tooltip?: boolean;
     /**
      * Sort function to sort the arcs
      */
@@ -59,7 +59,6 @@ export type PiePropsWithoutHTML = {
     motion?: MotionProp;
 };
 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>;

package/dist/components/Point.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
 
   let { d, children }: PointProps = $props();
 

package/dist/components/Points.svelte

@@ -1,8 +1,17 @@
 <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 };
+  import type { Snippet } from 'svelte';
+
+  export type Point = {
+    x: number;
+    y: number;
+    r: number;
+    xValue: any;
+    yValue: any;
+    data: any;
+    /** Index within array accessor (0 = start/low edge, 1 = end/high edge). Undefined for single-value points. */
+    edgeIndex?: number;
+  };
   type Offset = number | ((value: number, context: any) => number) | undefined;
 
   export type PointsPropsWithoutHTML = {
@@ -20,6 +29,11 @@
      */
     y?: Accessor;
 
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series` and `x`/`y` are not set.
+     */
+    seriesKey?: string;
+
     /**
      * Override `r` accessor from Chart context
      *
@@ -37,13 +51,6 @@
      */
     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;
 
@@ -52,14 +59,12 @@
 </script>
 
 <script lang="ts">
-  import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
 
   import Circle, { type CircleProps } from './Circle.svelte';
-  import Link from './Link.svelte';
   import { isScaleBand, type AnyScale } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import { extractLayerProps } from '../utils/attributes.js';
 
   const ctx = getChartContext();
@@ -68,10 +73,10 @@
     data,
     x,
     y,
+    seriesKey,
     r = 5,
     offsetX,
     offsetY,
-    links = false,
     fill,
     fillOpacity,
     stroke,
@@ -81,11 +86,28 @@
     ...restProps
   }: PointsProps = $props();
 
-  function getOffset(value: any, offset: Offset, scale: AnyScale) {
+  ctx.registerComponent({
+    name: 'Points',
+    kind: 'mark',
+    markInfo: () => ({ data, x, y, seriesKey, color: (fill ?? stroke) as string | undefined }),
+  });
+
+  let series = $derived(ctx.series.series.find((s) => s.key === seriesKey));
+  let seriesAccessor = $derived(series?.value ?? (series?.data ? undefined : series?.key));
+
+  // Get stack accessors if seriesKey is provided and stacking is enabled
+  let stackAccessors = $derived(
+    seriesKey && ctx.series.isStacked ? ctx.series.getStackAccessors(seriesKey) : null
+  );
+
+  function getOffset(value: any, offset: Offset, scale: AnyScale, subScale?: AnyScale) {
     if (typeof offset === 'function') {
       return offset(value, ctx);
     } else if (offset != null) {
       return offset;
+    } else if (subScale && seriesKey) {
+      // Center within grouped sub-band (replaces main band centering)
+      return subScale(seriesKey) + (subScale.bandwidth?.() ?? 0) / 2;
     } else if (isScaleBand(scale) && !ctx.radial) {
       return scale.bandwidth() / 2;
     } else {
@@ -93,23 +115,41 @@
     }
   }
 
-  const xAccessor = $derived(x ? accessor(x) : ctx.x);
-  const yAccessor = $derived(y ? accessor(y) : ctx.y);
-  const pointsData = $derived(data ?? ctx.data);
+  const xAccessor = $derived(
+    accessor(x ?? (ctx.valueAxis === 'x' ? seriesAccessor : undefined) ?? ctx.x)
+  );
+
+  // Use stack y1 accessor when stacking is enabled, otherwise fall back to series accessor or context
+  const yAccessor = $derived(
+    y
+      ? accessor(y)
+      : stackAccessors
+        ? stackAccessors.y1
+        : Array.isArray(seriesAccessor) && ctx.valueAxis === 'y'
+          ? accessor(seriesAccessor[1])
+          : accessor((ctx.valueAxis === 'y' ? seriesAccessor : undefined) ?? ctx.y)
+  );
+  const pointsData = $derived(data ?? series?.data ?? ctx.data);
 
   // Pre-calculate common values to avoid redundant calculations
-  const getPointObject = (xVal: number, yVal: number, d: any): Point => {
+  const getPointObject = (xVal: number, yVal: number, d: any, edgeIndex?: number): Point => {
     // Only calculate these scaled values once per point
     const scaledX: number = ctx.xScale(xVal);
     const scaledY: number = ctx.yScale(yVal);
 
+    const x = scaledX + getOffset(scaledX, offsetX, ctx.xScale, ctx.x1Scale ?? undefined);
+    const y = scaledY + getOffset(scaledY, offsetY, ctx.yScale, ctx.y1Scale ?? undefined);
+
+    const radialPoint = pointRadial(x, y);
+
     return {
-      x: scaledX + getOffset(scaledX, offsetX, ctx.xScale),
-      y: scaledY + getOffset(scaledY, offsetY, ctx.yScale),
+      x: ctx.radial ? radialPoint[0] : x,
+      y: ctx.radial ? radialPoint[1] : y,
       r: ctx.config.r ? ctx.rGet(d) : r,
       xValue: xVal,
       yValue: yVal,
       data: d,
+      edgeIndex,
     };
   };
 
@@ -121,9 +161,11 @@
       if (Array.isArray(xValue)) {
         return xValue
           .filter(Boolean)
-          .map((xVal: number) => getPointObject(xVal, yValue as number, d));
+          .map((xVal: number, i: number) => getPointObject(xVal, yValue as number, d, i));
       } else if (Array.isArray(yValue)) {
-        return yValue.filter(Boolean).map((yVal: number) => getPointObject(xValue, yVal, d));
+        return yValue
+          .filter(Boolean)
+          .map((yVal: number, i: number) => getPointObject(xValue, yVal, d, i));
       } else if (xValue != null && yValue != null) {
         return getPointObject(xValue as number, yValue as number, d);
       }
@@ -131,78 +173,28 @@
       return [];
     }) as Point[]
   );
-
-  const _links = $derived(
-    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(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"]}
-			*/
-        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 {
-          source: {
-            x: x,
-            y: yMin + getOffset(yMin, offsetY, ctx.yScale),
-          },
-          target: {
-            x: x,
-            y: yMax + getOffset(yMax, offsetY, ctx.yScale),
-          },
-          data: d,
-        };
-      }
-    })
-  );
 </script>
 
 {#if children}
   {@render children({ points })}
 {:else}
-  {#if links}
-    {#each _links as link}
-      <Link
-        data={link}
-        stroke={fill ?? (ctx.config.c ? ctx.cGet(link.data) : null)}
-        {...extractLayerProps(links, 'points-link')}
-      />
-    {/each}
-  {/if}
-
   {#each points as point}
-    {@const radialPoint = pointRadial(point.x, point.y)}
     <Circle
-      cx={ctx.radial ? radialPoint[0] : point.x}
-      cy={ctx.radial ? radialPoint[1] : point.y}
+      cx={point.x}
+      cy={point.y}
       r={point.r}
-      fill={fill ?? (ctx.config.c ? ctx.cGet(point.data) : null)}
+      fill={fill ?? series?.color ?? (ctx.config.c ? ctx.cGet(point.data) : null)}
       {fillOpacity}
       {stroke}
       {strokeWidth}
-      {opacity}
-      {...extractLayerProps(restProps, 'point')}
+      opacity={opacity ??
+        (series?.key == null ||
+        ctx.series.visibleSeries.length <= 1 ||
+        ctx.series.isHighlighted(series.key, true)
+          ? 1
+          : 0.1)}
+      {...series?.props}
+      {...extractLayerProps(restProps, 'lc-point')}
     />
   {/each}
 {/if}

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

@@ -1,5 +1,5 @@
 import type { CommonStyleProps, Without } from '../utils/types.js';
-import type { ComponentProps, Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 export type Point = {
     x: number;
     y: number;
@@ -7,6 +7,8 @@ export type Point = {
     xValue: any;
     yValue: any;
     data: any;
+    /** Index within array accessor (0 = start/low edge, 1 = end/high edge). Undefined for single-value points. */
+    edgeIndex?: number;
 };
 type Offset = number | ((value: number, context: any) => number) | undefined;
 export type PointsPropsWithoutHTML = {
@@ -22,6 +24,10 @@ export type PointsPropsWithoutHTML = {
      *  Override `y` accessor from Chart context
      */
     y?: Accessor;
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series` and `x`/`y` are not set.
+     */
+    seriesKey?: string;
     /**
      * Override `r` accessor from Chart context
      *
@@ -36,19 +42,12 @@ export type PointsPropsWithoutHTML = {
      * 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 Points: import("svelte").Component<PointsProps, {}, "">;
 type Points = ReturnType<typeof Points>;