layerchart 2.0.0-next.54 → 2.0.0-next.56

package/dist/components/GeoPoint.svelte

@@ -63,11 +63,25 @@
 
 {#if layerCtx === 'svg'}
   {#if children}
-    <Group {x} {y} opacity={opacity as number} class={className as string} {...extractLayerProps(restProps, 'lc-geo-point-group')}>
+    <Group
+      {x}
+      {y}
+      opacity={opacity as number}
+      class={className as string}
+      {...extractLayerProps(restProps, 'lc-geo-point-group')}
+    >
       {@render children({ x, y })}
     </Group>
   {:else}
-    <Circle cx={x} cy={y} {opacity} {fillOpacity} {strokeWidth} class={className} {...extractLayerProps(restProps, 'lc-geo-point')} />
+    <Circle
+      cx={x}
+      cy={y}
+      {opacity}
+      {fillOpacity}
+      {strokeWidth}
+      class={className}
+      {...extractLayerProps(restProps, 'lc-geo-point')}
+    />
   {/if}
 {/if}
 
@@ -78,6 +92,14 @@
     {@render children({ x, y })}
     <!-- </Group> -->
   {:else}
-    <Circle cx={x} cy={y} {opacity} {fillOpacity} {strokeWidth} class={className} {...extractLayerProps(restProps, 'lc-geo-point')} />
+    <Circle
+      cx={x}
+      cy={y}
+      {opacity}
+      {fillOpacity}
+      {strokeWidth}
+      class={className}
+      {...extractLayerProps(restProps, 'lc-geo-point')}
+    />
   {/if}
 {/if}

package/dist/components/GeoSpline.svelte

@@ -75,7 +75,4 @@
   );
 </script>
 
-<Path
-  pathData={d}
-  {...extractLayerProps(restProps, 'lc-geo-spline')}
-/>
+<Path pathData={d} {...extractLayerProps(restProps, 'lc-geo-spline')} />

package/dist/components/GeoTile.svelte

@@ -91,10 +91,14 @@
   }
 
   if (layerCtx === 'canvas') {
-    ctx.registerComponent({ name: 'GeoTile', kind: 'mark', canvasRender: {
-      render,
-      deps: () => [tiles],
-    } });
+    ctx.registerComponent({
+      name: 'GeoTile',
+      kind: 'mark',
+      canvasRender: {
+        render,
+        deps: () => [tiles],
+      },
+    });
   }
 </script>
 

package/dist/components/Grid.svelte

@@ -3,20 +3,31 @@
   import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
   import type { SVGAttributes } from 'svelte/elements';
 
+  /** Props forwarded onto the underlying grid line (`<Line>`, `<Circle>`, or `<Spline>`). */
+  type GridLineProps = Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    /** Dashed-line pattern. See `Line.dashArray`. */
+    dashArray?: number | number[] | string;
+  };
+
   export type GridPropsWithoutHTML<In extends Transition = Transition> = {
     /**
-     * Draw a x-axis lines
+     * Draw a x-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    x?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    x?: boolean | GridLineProps;
 
     /**
-     * Draw a y-axis lines
+     * Draw a y-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    y?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    y?: boolean | GridLineProps;
 
     /**
      * Control the number of x-axis ticks

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

@@ -1,19 +1,29 @@
 import type { Transition, TransitionParams, Without } from '../utils/types.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
 import type { SVGAttributes } from 'svelte/elements';
+/** Props forwarded onto the underlying grid line (`<Line>`, `<Circle>`, or `<Spline>`). */
+type GridLineProps = Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    /** Dashed-line pattern. See `Line.dashArray`. */
+    dashArray?: number | number[] | string;
+};
 export type GridPropsWithoutHTML<In extends Transition = Transition> = {
     /**
-     * Draw a x-axis lines
+     * Draw a x-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    x?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    x?: boolean | GridLineProps;
     /**
-     * Draw a y-axis lines
+     * Draw a y-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    y?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    y?: boolean | GridLineProps;
     /**
      * Control the number of x-axis ticks
      */

package/dist/components/Group.svelte

@@ -137,9 +137,7 @@
   const dataMode = $derived(hasAnyDataProp(x, y));
 
   // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(
-    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
-  );
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
 
   // Resolve a single data item to pixel coordinates
   function resolveGroup(d: any) {
@@ -198,10 +196,18 @@
   const initialY = initialYProp ?? (typeof y === 'number' ? y : undefined);
 
   const trueX = $derived(
-    typeof x === 'number' ? x : (x == null && (center === 'x' || center === true) ? chartCtx.width / 2 : 0)
+    typeof x === 'number'
+      ? x
+      : x == null && (center === 'x' || center === true)
+        ? chartCtx.width / 2
+        : 0
   );
   const trueY = $derived(
-    typeof y === 'number' ? y : (y == null && (center === 'y' || center === true) ? chartCtx.height / 2 : 0)
+    typeof y === 'number'
+      ? y
+      : y == null && (center === 'y' || center === true)
+        ? chartCtx.height / 2
+        : 0
   );
   const motionX = createMotion(initialX, () => trueX, motion);
   const motionY = createMotion(initialY, () => trueY, motion);

package/dist/components/Highlight.svelte

@@ -389,9 +389,9 @@
               : null;
             // For diverging stacks, use the outer edge (y0 for below-baseline, y1 for above)
             const stackedY1 = stackValue
-              ? (ctx.series.stackLayout === 'stackDiverging' && stackValue[1] <= 0
-                  ? stackValue[0]
-                  : stackValue[1])
+              ? ctx.series.stackLayout === 'stackDiverging' && stackValue[1] <= 0
+                ? stackValue[0]
+                : stackValue[1]
               : 0;
 
             if (ctx.valueAxis === 'x') {
@@ -681,6 +681,7 @@
           y1={line.y1}
           x2={line.x2}
           y2={line.y2}
+          dashArray={[2, 2]}
           {opacity}
           {...extractLayerProps(linesProp, 'lc-highlight-line')}
         />

package/dist/components/Image.svelte

@@ -195,16 +195,16 @@
   const geo = getGeoContext();
 
   // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(
-    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
-  );
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
 
   // Resolve a single data item to pixel coordinates and dimensions
   function resolveImage(d: any) {
     const resolvedR = r !== undefined ? resolveDataProp(r, d, null, 0) : undefined;
     const defaultSize = resolvedR !== undefined ? resolvedR * 2 : 16;
-    const resolvedWidth = width !== undefined ? resolveDataProp(width, d, null, defaultSize) : defaultSize;
-    const resolvedHeight = height !== undefined ? resolveDataProp(height, d, null, defaultSize) : defaultSize;
+    const resolvedWidth =
+      width !== undefined ? resolveDataProp(width, d, null, defaultSize) : defaultSize;
+    const resolvedHeight =
+      height !== undefined ? resolveDataProp(height, d, null, defaultSize) : defaultSize;
 
     let resolvedX: number, resolvedY: number;
     if (geo.projection) {
@@ -247,7 +247,14 @@
         const key = keyFn(d, i);
         activeKeys.add(key);
         const resolved = resolveImage(d);
-        untrack(() => dataMotionMap.update(key, { x: resolved.x, y: resolved.y, width: resolved.width, height: resolved.height }));
+        untrack(() =>
+          dataMotionMap.update(key, {
+            x: resolved.x,
+            y: resolved.y,
+            width: resolved.width,
+            height: resolved.height,
+          })
+        );
       }
       untrack(() => dataMotionMap.cleanup(activeKeys));
     });
@@ -416,29 +423,32 @@
         y: typeof y === 'string' ? y : undefined,
       };
     },
-    canvasRender: layerCtx === 'canvas' ? {
-      render: canvasRender,
-      events: {
-        click: restProps.onclick,
-        pointerdown: restProps.onpointerdown,
-        pointerenter: restProps.onpointerenter,
-        pointermove: restProps.onpointermove,
-        pointerleave: restProps.onpointerleave,
-      },
-      deps: () => [
-        dataMode,
-        dataMode ? resolvedItems : null,
-        motionX.current,
-        motionY.current,
-        motionWidth.current,
-        motionHeight.current,
-        href,
-        opacity,
-        className,
-        restProps.style,
-        loadedImageCount,
-      ],
-    } : undefined,
+    canvasRender:
+      layerCtx === 'canvas'
+        ? {
+            render: canvasRender,
+            events: {
+              click: restProps.onclick,
+              pointerdown: restProps.onpointerdown,
+              pointerenter: restProps.onpointerenter,
+              pointermove: restProps.onpointermove,
+              pointerleave: restProps.onpointerleave,
+            },
+            deps: () => [
+              dataMode,
+              dataMode ? resolvedItems : null,
+              motionX.current,
+              motionY.current,
+              motionWidth.current,
+              motionHeight.current,
+              href,
+              opacity,
+              className,
+              restProps.style,
+              loadedImageCount,
+            ],
+          }
+        : undefined,
   });
 </script>
 
@@ -487,7 +497,9 @@
       width={motionWidth.current}
       height={motionHeight.current}
       clip-path={pixelR !== undefined ? `url(#${clipId})` : undefined}
-      transform={pixelRotate ? `rotate(${pixelRotate}, ${motionX.current}, ${motionY.current})` : undefined}
+      transform={pixelRotate
+        ? `rotate(${pixelRotate}, ${motionX.current}, ${motionY.current})`
+        : undefined}
       {preserveAspectRatio}
       crossorigin={crossOrigin}
       image-rendering={imageRendering}

package/dist/components/Labels.svelte

@@ -173,8 +173,7 @@
           fill: fillValue,
           x: point.x + (placement === 'outside' ? -offset : offset),
           y: point.y,
-          textAnchor:
-            placement === 'middle' ? 'middle' : placement === 'outside' ? 'end' : 'start',
+          textAnchor: placement === 'middle' ? 'middle' : placement === 'outside' ? 'end' : 'start',
           verticalAnchor: 'middle',
           capHeight: '.6rem',
         };
@@ -185,8 +184,7 @@
           fill: fillValue,
           x: point.x + (placement === 'outside' ? offset : -offset),
           y: point.y,
-          textAnchor:
-            placement === 'middle' ? 'middle' : placement === 'outside' ? 'start' : 'end',
+          textAnchor: placement === 'middle' ? 'middle' : placement === 'outside' ? 'start' : 'end',
           verticalAnchor: 'middle',
           capHeight: '.6rem',
         };

package/dist/components/Line.svelte

@@ -111,6 +111,14 @@
 
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
+
+    /**
+     * Dashed-line pattern. Accepts a number (single dash length), a
+     * `[dash, gap, ...]` array, or a string (same syntax as SVG
+     * `stroke-dasharray`). Works across `<Svg>`, `<Canvas>`, and `<Html>`
+     * layers — HTML approximates the pattern via `repeating-linear-gradient`.
+     */
+    dashArray?: number | number[] | string;
   } & DataDrivenStyleProps;
 
   export type LineProps = LinePropsWithoutHTML &
@@ -137,6 +145,7 @@
 
   import { createKey } from '../utils/key.svelte.js';
   import { createId } from '../utils/createId.js';
+  import { parseDashArray, dashArrayToGradient } from '../utils/path.js';
 
   const uid = $props.id();
 
@@ -162,9 +171,13 @@
     markerMid,
     motion,
     fillOpacity,
+    dashArray,
     ...restProps
   }: LineProps = $props();
 
+  const dashArrayResolved = $derived(parseDashArray(dashArray));
+  const dashArrayAttr = $derived(dashArrayResolved ? dashArrayResolved.join(' ') : undefined);
+
   // Data mode detection
   const dataMode = $derived(hasAnyDataProp(x1, y1, x2, y2));
 
@@ -285,7 +298,13 @@
             'lc-line',
             itemClass ?? (typeof className === 'string' ? className : undefined)
           ),
-          style: restProps.style as string | undefined,
+          style:
+            [
+              restProps.style as string | undefined,
+              dashArrayAttr ? `stroke-dasharray: ${dashArrayAttr}` : undefined,
+            ]
+              .filter(Boolean)
+              .join('; ') || undefined,
         };
   }
 
@@ -358,6 +377,7 @@
               opacity,
               className,
               restProps.style,
+              dashArrayAttr,
             ],
           }
         : undefined,
@@ -390,6 +410,7 @@
         marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
         marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
         marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+        stroke-dasharray={dashArrayAttr}
         class={cls('lc-line', resolvedClass)}
         {...restProps}
       />
@@ -408,6 +429,7 @@
       marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
       marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
       marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+      stroke-dasharray={dashArrayAttr}
       class={cls('lc-line', staticClassName)}
       {...restProps}
     />
@@ -435,7 +457,10 @@
         style:transform="translateY(-50%) rotate({angle}deg)"
         style:transform-origin="0 50%"
         style:opacity={resolvedOpacity}
-        style:background-color={resolvedStroke}
+        style:background={dashArrayResolved
+          ? dashArrayToGradient(dashArrayResolved, resolvedStroke ?? 'var(--stroke-color)')
+          : undefined}
+        style:background-color={dashArrayResolved ? undefined : resolvedStroke}
         class={cls('lc-line', resolvedClass)}
         style={restProps.style}
       ></div>
@@ -455,7 +480,10 @@
       style:transform="translateY(-50%) rotate({angle}deg)"
       style:transform-origin="0 50%"
       style:opacity={staticOpacity}
-      style:background-color={staticStroke}
+      style:background={dashArrayResolved
+        ? dashArrayToGradient(dashArrayResolved, staticStroke ?? 'var(--stroke-color)')
+        : undefined}
+      style:background-color={dashArrayResolved ? undefined : staticStroke}
       class={cls('lc-line', staticClassName)}
       style={restProps.style}
     ></div>

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

@@ -93,6 +93,13 @@ export type LinePropsWithoutHTML = {
     markerEnd?: MarkerOptions;
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
+    /**
+     * Dashed-line pattern. Accepts a number (single dash length), a
+     * `[dash, gap, ...]` array, or a string (same syntax as SVG
+     * `stroke-dasharray`). Works across `<Svg>`, `<Canvas>`, and `<Html>`
+     * layers — HTML approximates the pattern via `repeating-linear-gradient`.
+     */
+    dashArray?: number | number[] | string;
 } & DataDrivenStyleProps;
 export type LineProps = LinePropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, LinePropsWithoutHTML>;
 declare const Line: import("svelte").Component<LineProps, {}, "">;

package/dist/components/LinearGradient.svelte

@@ -174,10 +174,14 @@
   }
 
   if (layerCtx === 'canvas') {
-    ctx.registerComponent({ name: 'Gradient', kind: 'group', canvasRender: {
-      render,
-      deps: () => [x1, y1, x2, y2, stops, className],
-    } });
+    ctx.registerComponent({
+      name: 'Gradient',
+      kind: 'group',
+      canvasRender: {
+        render,
+        deps: () => [x1, y1, x2, y2, stops, className],
+      },
+    });
   }
 </script>
 

package/dist/components/Link.svelte

@@ -82,6 +82,9 @@ TODO:
 	*/
   import Connector, { type ConnectorProps } from './Connector.svelte';
   import { extractLayerProps } from '../utils/attributes.js';
+  import { getChartContext } from '../contexts/chart.js';
+
+  const ctx = getChartContext();
 
   let {
     data,
@@ -95,6 +98,7 @@ TODO:
     explicitCoords,
     type = 'd3',
     sweep = 'none',
+    radius = 20,
     ...restProps
   }: LinkProps = $props();
 
@@ -125,12 +129,14 @@ TODO:
   const xAccessor = $derived.by(() => {
     if (xProp) return xProp;
     if (sankey) return (d: any) => (d.isSource ? d.node.x1 : d.node.x0);
+    if (ctx.radial) return (d: any) => d.x;
     return (d: any) => (orientation === 'horizontal' ? d.y : d.x);
   });
 
   const yAccessor = $derived.by(() => {
     if (yProp) return yProp;
     if (sankey) return (d: any) => d.y;
+    if (ctx.radial) return (d: any) => d.y;
     return (d: any) => (orientation === 'horizontal' ? d.x : d.y);
   });
 
@@ -173,5 +179,7 @@ TODO:
   {type}
   {curve}
   {sweep}
+  {radius}
+  radial={ctx.radial}
   {...extractLayerProps(restProps, 'lc-link')}
 />

package/dist/components/Marker.svelte

@@ -8,7 +8,15 @@
      *
      * Pass `children` to render a custom element/component inside the marker instead.
      */
-    type?: 'arrow' | 'triangle' | 'line' | 'circle' | 'circle-stroke' | 'dot' | 'square' | 'square-stroke';
+    type?:
+      | 'arrow'
+      | 'triangle'
+      | 'line'
+      | 'circle'
+      | 'circle-stroke'
+      | 'dot'
+      | 'square'
+      | 'square-stroke';
 
     /**
      * Unique identifier for the marker

package/dist/components/Path.svelte

@@ -197,30 +197,50 @@
   const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
   if (layerCtx === 'canvas') {
-    ctx.registerComponent({ name: 'Path', kind: 'mark', canvasRender: {
-      render,
-      events: {
-        get click() { return onclick; },
-        get pointerenter() { return onpointerenter; },
-        get pointermove() { return onpointermove; },
-        get pointerleave() { return onpointerleave; },
-        get pointerdown() { return onpointerdown; },
-        get pointerover() { return onpointerover; },
-        get pointerout() { return onpointerout; },
-        get touchmove() { return ontouchmove; },
+    ctx.registerComponent({
+      name: 'Path',
+      kind: 'mark',
+      canvasRender: {
+        render,
+        events: {
+          get click() {
+            return onclick;
+          },
+          get pointerenter() {
+            return onpointerenter;
+          },
+          get pointermove() {
+            return onpointermove;
+          },
+          get pointerleave() {
+            return onpointerleave;
+          },
+          get pointerdown() {
+            return onpointerdown;
+          },
+          get pointerover() {
+            return onpointerover;
+          },
+          get pointerout() {
+            return onpointerout;
+          },
+          get touchmove() {
+            return ontouchmove;
+          },
+        },
+        deps: () => [
+          fillKey!.current,
+          fillOpacity,
+          strokeKey!.current,
+          strokeOpacity,
+          strokeWidth,
+          opacity,
+          className,
+          tweenedState.current,
+          restProps.style,
+        ],
       },
-      deps: () => [
-        fillKey!.current,
-        fillOpacity,
-        strokeKey!.current,
-        strokeOpacity,
-        strokeWidth,
-        opacity,
-        className,
-        tweenedState.current,
-        restProps.style,
-      ],
-    } });
+    });
   }
 
   let startPoint = $state<DOMPoint | undefined>();