layerchart 2.0.0-next.46 → 2.0.0-next.48

package/dist/components/Line.svelte.test.js

@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import Line from './Line.svelte';
+describe('Line', () => {
+    describe('pixel mode', () => {
+        it('should render a line with pixel values', async () => {
+            render(TestHarness, {
+                component: Line,
+                componentProps: {
+                    x1: 0,
+                    y1: 0,
+                    x2: 100,
+                    y2: 100,
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+        });
+    });
+    describe('data mode', () => {
+        const data = [
+            { date: new Date('2024-01-01'), value: 20 },
+            { date: new Date('2024-02-01'), value: 40 },
+            { date: new Date('2024-03-01'), value: 60 },
+        ];
+        it('should render one line per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Line,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x1: 'date',
+                    y1: (d) => 0,
+                    x2: 'date',
+                    y2: 'value',
+                },
+            });
+            const lines = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => lines.length).toBe(3);
+        });
+        it('should resolve data-driven stroke through cScale', async () => {
+            const colorData = [
+                { date: new Date('2024-01-01'), value: 20, category: 'A' },
+                { date: new Date('2024-02-01'), value: 40, category: 'B' },
+                { date: new Date('2024-03-01'), value: 60, category: 'A' },
+            ];
+            render(TestHarness, {
+                component: Line,
+                chartProps: {
+                    data: colorData,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    c: 'category',
+                    cRange: ['steelblue', 'coral'],
+                },
+                componentProps: {
+                    x1: 'date',
+                    y1: (d) => 0,
+                    x2: 'date',
+                    y2: 'value',
+                    stroke: 'category',
+                },
+            });
+            const lines = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => lines.length).toBe(3);
+            expect(lines[0].getAttribute('stroke')).toBe('steelblue');
+            expect(lines[1].getAttribute('stroke')).toBe('coral');
+            expect(lines[2].getAttribute('stroke')).toBe('steelblue');
+        });
+        it('should pass literal CSS colors through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Line,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x1: 'date',
+                    y1: (d) => 0,
+                    x2: 'date',
+                    y2: 'value',
+                    stroke: 'red',
+                },
+            });
+            const lines = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => lines.length).toBe(3);
+            expect(lines[0].getAttribute('stroke')).toBe('red');
+            expect(lines[1].getAttribute('stroke')).toBe('red');
+        });
+        it('should use explicit data prop over chart context data', async () => {
+            const explicitData = [{ date: new Date('2024-01-01'), value: 20 }];
+            render(TestHarness, {
+                component: Line,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data: explicitData,
+                    x1: 'date',
+                    y1: (d) => 0,
+                    x2: 'date',
+                    y2: 'value',
+                },
+            });
+            const lines = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => lines.length).toBe(1);
+        });
+    });
+});

package/dist/components/LinearGradient.svelte

@@ -78,7 +78,6 @@
 <script lang="ts">
   import { getLayerContext } from '../contexts/layer.js';
   import { getChartContext } from '../contexts/chart.js';
-  import { registerCanvasComponent } from './layers/Canvas.svelte';
   import { createLinearGradient, getComputedStyles } from '../utils/canvas.js';
   import { parsePercent } from '../utils/math.js';
   import { createId } from '../utils/createId.js';
@@ -175,11 +174,10 @@
   }
 
   if (layerCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'Gradient',
+    ctx.registerComponent({ name: 'Gradient', kind: 'mark', canvasRender: {
       render,
       deps: () => [x1, y1, x2, y2, stops, className],
-    });
+    } });
   }
 </script>
 

package/dist/components/Path.svelte

@@ -87,7 +87,6 @@
 
   import Group from './Group.svelte';
   import { flattenPathData } from '../utils/path.js';
-  import { registerCanvasComponent } from './layers/Canvas.svelte';
   import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
   import { getLayerContext } from '../contexts/layer.js';
   import MarkerWrapper from './MarkerWrapper.svelte';
@@ -107,6 +106,7 @@
     draw,
     fill,
     stroke,
+    strokeOpacity,
     strokeWidth,
     fillOpacity,
     class: className,
@@ -177,7 +177,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
+            styles: { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, opacity },
             classes: cls('lc-path', className),
             style: restProps.style as string | undefined,
           }
@@ -189,8 +189,7 @@
   const strokeKey = createKey(() => stroke);
 
   if (layerCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'Path',
+    ctx.registerComponent({ name: 'Path', kind: 'mark', canvasRender: {
       render,
       events: {
         click: restProps.onclick,
@@ -206,13 +205,14 @@
         fillKey.current,
         fillOpacity,
         strokeKey.current,
+        strokeOpacity,
         strokeWidth,
         opacity,
         className,
         tweenedState.current,
         restProps.style,
       ],
-    });
+    } });
   }
 
   let startPoint = $state<DOMPoint | undefined>();
@@ -279,6 +279,7 @@
       {fill}
       fill-opacity={fillOpacity}
       {stroke}
+      stroke-opacity={strokeOpacity}
       stroke-width={strokeWidth}
       {opacity}
       marker-start={markerStartId ? `url(#${markerStartId})` : undefined}

package/dist/components/Pattern.svelte

@@ -126,9 +126,11 @@
 
 <script lang="ts">
   import { getLayerContext } from '../contexts/layer.js';
-  import { registerCanvasComponent } from './layers/Canvas.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import { createPattern } from '../utils/canvas.js';
 
+  const chartCtx = getChartContext();
+
   const uid = $props.id();
 
   let {
@@ -248,11 +250,10 @@
   }
 
   if (layerCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'Pattern',
+    chartCtx.registerComponent({ name: 'Pattern', kind: 'mark', canvasRender: {
       render,
       deps: () => [width, height, shapes, background],
-    });
+    } });
   }
 </script>
 

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,7 +78,6 @@
   import Arc from './Arc.svelte';
   import { degreesToRadians } from '../utils/math.js';
   import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
-  import type { TooltipContextValue } from '../contexts/tooltip.js';
   import { getChartContext } from '../contexts/chart.js';
   import type { Snippet } from 'svelte';
 
@@ -101,7 +100,7 @@
     padAngle = 0,
     motion,
     offset = 0,
-    tooltipContext,
+    tooltip,
     sort,
     children,
   }: PiePropsWithoutHTML = $props();
@@ -149,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 '../contexts/tooltip.js';
 import type { Snippet } from 'svelte';
 declare const Pie: import("svelte").Component<PiePropsWithoutHTML, {}, "">;
 type Pie = ReturnType<typeof Pie>;

package/dist/components/Points.svelte

@@ -2,7 +2,16 @@
   import type { CommonStyleProps, Without } from '../utils/types.js';
   import type { Snippet } from 'svelte';
 
-  export type Point = { x: number; y: number; r: number; xValue: any; yValue: any; data: any };
+  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
      *
@@ -59,6 +73,7 @@
     data,
     x,
     y,
+    seriesKey,
     r = 5,
     offsetX,
     offsetY,
@@ -71,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 {
@@ -83,18 +115,30 @@
     }
   }
 
-  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);
-    const y = scaledY + getOffset(scaledY, offsetY, ctx.yScale);
+    const x = scaledX + getOffset(scaledX, offsetX, ctx.xScale, ctx.x1Scale);
+    const y = scaledY + getOffset(scaledY, offsetY, ctx.yScale, ctx.y1Scale);
 
     const radialPoint = pointRadial(x, y);
 
@@ -105,6 +149,7 @@
       xValue: xVal,
       yValue: yVal,
       data: d,
+      edgeIndex,
     };
   };
 
@@ -116,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);
       }
@@ -136,11 +183,17 @@
       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}
+      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}

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

@@ -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
      *