layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/components/Spline.svelte

@@ -1,18 +1,11 @@
 <script lang="ts" module>
-  import type { Snippet } from 'svelte';
-  import type { MarkerOptions } from './MarkerWrapper.svelte';
-  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
 
-  import {
-    createControlledMotion,
-    createMotion,
-    extractTweenConfig,
-    type MotionProp,
-    type ResolvedMotion,
-  } from '../utils/motion.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
+  import type { MotionProp } from '../utils/motion.svelte.js';
+  import type { ColorProp, StyleProp } from '../utils/dataProp.js';
 
   export type SplinePropsWithoutHTML = {
     /**
@@ -20,12 +13,6 @@
      */
     data?: any;
 
-    /**
-     * Pass `<path d={...} />` explicitly instead of calculating
-     * from data / context
-     */
-    pathData?: string | undefined | null;
-
     /**
      * Override `x` accessor from Chart context
      */
@@ -37,24 +24,9 @@
     y?: Accessor;
 
     /**
-     * Whether to animate the drawing of the path over time.
-     * Pass either `true` or an object with transition options to
-     * enable the transition.
-     *
-     * Works best with `tweened` disabled.
-     */
-    draw?: boolean | Parameters<typeof _drawTransition>[1];
-
-    /**
-     * Curve of spline drawn. Imported via d3-shape.
-     *
-     * @example
-     * import { curveNatural } from 'd3-shape';
-     * <Spline curve={curveNatural} />
-     *
-     * @type {CurveFactory | CurveFactoryLineOnly | undefined}
+     * Series key to use for accessor.  Only applicable if `<Chart>` uses `series` and `x`/`y` are not set.
      */
-    curve?: CurveFactory | CurveFactoryLineOnly;
+    seriesKey?: string;
 
     /**
      * Function to determine if a point is defined
@@ -65,48 +37,41 @@
     defined?: Parameters<Line<any>['defined']>[0];
 
     /**
-     * Marker to attach to both start and end points of the line
-     */
-    marker?: MarkerOptions;
-
-    /**
-     * Marker to attach to the middle point of the line
-     */
-    markerMid?: MarkerOptions;
-
-    /**
-     * Marker to attach to the start point of the line
+     * Curve of path drawn. Imported via d3-shape.
+     *
+     * @example
+     * import { curveNatural } from 'd3-shape';
+     * <Path curve={curveNatural} />
+     *
+     * @type {CurveFactory | CurveFactoryLineOnly | undefined}
      */
-    markerStart?: MarkerOptions;
+    curve?: CurveFactory | CurveFactoryLineOnly;
 
     /**
-     * Marker to attach to the end point of the line
+     * Stroke color or function returning stroke per data point.
+     * When a function, consecutive points with the same value are grouped
+     * into separate path segments, enabling per-segment styling.
      */
-    markerEnd?: MarkerOptions;
+    stroke?: ColorProp;
 
     /**
-     * Add additional content at the start of the line.
-     *
-     * Receives `{ point: DOMPoint }` as a snippet prop.
+     * Fill color or function returning fill per data point.
+     * When a function, acts as a grouping channel like `stroke`.
      */
-    startContent?: Snippet<[{ point: DOMPoint }]>;
+    fill?: ColorProp;
 
     /**
-     * Add additional content at the end of the line.
-     *
-     * Receives `{ point: DOMPoint }` as a snippet prop.
+     * Opacity or function returning opacity per data point.
+     * When a function, acts as a grouping channel like `stroke`.
      */
-    endContent?: Snippet<[{ point: DOMPoint }]>;
+    opacity?: StyleProp<number | undefined>;
 
     /**
-     * A reference to the `<path>` element.
-     *
-     * @bindable
+     * Whether to animate the path using tweened interpolation.
+     * When set, the line will animate from the baseline (y=0) on mount.
      */
-    splineRef?: SVGPathElement;
-
     motion?: MotionProp;
-  } & CommonStyleProps;
+  } & Omit<PathProps, 'x' | 'y' | 'motion' | 'stroke' | 'fill' | 'opacity'>;
 
   export type SplineProps = SplinePropsWithoutHTML &
     Without<SVGAttributes<SVGPathElement>, SplinePropsWithoutHTML>;
@@ -114,69 +79,48 @@
 
 <script lang="ts">
   import { draw as _drawTransition } from 'svelte/transition';
-  import { cubicInOut } from 'svelte/easing';
-  import { merge } from 'lodash-es';
 
+  import { geoPath as d3GeoPath } from 'd3-geo';
   import { line as d3Line, lineRadial } from 'd3-shape';
-  import { interpolatePath } from 'd3-interpolate-path';
   import { max } from 'd3-array';
-  import { cls } from '@layerstack/tailwind';
+  import { interpolatePath } from 'd3-interpolate-path';
 
-  import Group from './Group.svelte';
   import { isScaleBand } from '../utils/scales.svelte.js';
-  import { flattenPathData } from '../utils/path.js';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
-  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
-  import { getRenderContext } from './Chart.svelte';
-  import MarkerWrapper from './MarkerWrapper.svelte';
-  import { getChartContext } from './Chart.svelte';
-  import { createKey } from '../utils/key.svelte.js';
-  import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import { resolveColorProp, resolveStyleProp } from '../utils/dataProp.js';
+  import Path, { type PathProps } from './Path.svelte';
+  import { createMotion, extractTweenConfig } from '../utils/motion.svelte.js';
 
   const ctx = getChartContext();
-
-  const uid = $props.id();
+  const geo = getGeoContext();
 
   let {
     data,
-    pathData,
     x,
     y,
-    motion,
-    draw,
-    curve,
+    seriesKey,
     defined,
-    fill,
+    curve,
     stroke,
-    strokeWidth,
-    fillOpacity,
-    class: className,
-    marker,
-    markerStart: markerStartProp,
-    markerMid: markerMidProp,
-    markerEnd: markerEndProp,
-    startContent,
-    endContent,
+    fill,
     opacity,
-    splineRef: splineRefProp = $bindable(),
+    motion,
     ...restProps
   }: SplineProps = $props();
 
-  let splineRef = $state<SVGPathElement>();
-
-  $effect.pre(() => {
-    splineRefProp = splineRef;
+  ctx.registerComponent({
+    name: 'Spline',
+    kind: 'mark',
+    markInfo: () => ({
+      data,
+      x,
+      y,
+      seriesKey,
+      color: typeof stroke === 'string' ? stroke : undefined,
+    }),
   });
 
-  const markerStart = $derived(markerStartProp ?? marker);
-  const markerMid = $derived(markerMidProp ?? marker);
-  const markerEnd = $derived(markerEndProp ?? marker);
-
-  const markerStartId = $derived(markerStart ? createId('marker-start', uid) : '');
-  const markerMidId = $derived(markerMid ? createId('marker-mid', uid) : '');
-  const markerEndId = $derived(markerEnd ? createId('marker-end', uid) : '');
-
   function getScaleValue(
     data: any,
     scale: typeof ctx.xScale | typeof ctx.yScale,
@@ -197,53 +141,23 @@
     }
   }
 
-  const xAccessor = $derived(x ? accessor(x) : ctx.x);
-  const yAccessor = $derived(y ? accessor(y) : ctx.y);
+  let series = $derived(ctx.series.series.find((s) => s.key === seriesKey));
+  let seriesAccessor = $derived(series?.value ?? (series?.data ? undefined : series?.key));
+
+  const xAccessor = $derived(
+    accessor(x ?? (ctx.valueAxis === 'x' ? seriesAccessor : undefined) ?? ctx.x)
+  );
+  const yAccessor = $derived(
+    accessor(y ?? (ctx.valueAxis === 'y' ? seriesAccessor : undefined) ?? ctx.y)
+  );
 
   const xOffset = $derived(isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0);
   const yOffset = $derived(isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0);
 
-  const extractedTween = extractTweenConfig(motion);
-
-  const tweenedOptions: ResolvedMotion | undefined = extractedTween
-    ? {
-        type: extractedTween.type,
-        options: { interpolate: interpolatePath, ...extractedTween.options },
-      }
-    : undefined;
-
-  /** Provide initial `0` horizontal baseline and initially hide/untrack scale changes so not reactive (only set on initial mount) */
-  function defaultPathData() {
-    if (!tweenedOptions) {
-      // If not tweened, return empty string (faster initial render)
-      return '';
-    } else if (pathData) {
-      // Flatten all `y` coordinates of pre-defined `pathData`
-      return flattenPathData(pathData, Math.min(ctx.yScale(0) ?? ctx.yRange[0], ctx.yRange[0]));
-    } else if (ctx.config.x) {
-      // Only use default line if `x` accessor is defined (cartesian chart)
-      const path = ctx.radial
-        ? lineRadial()
-            .angle((d) => ctx.xScale(xAccessor(d)) + 0) // Never apply xOffset (LineChart radar, BarChart radial, ...)?
-
-            .radius((d) => Math.min(ctx.yScale(0), ctx.yRange[0]))
-        : d3Line()
-            .x((d) => ctx.xScale(xAccessor(d)) + xOffset)
-            .y((d) => Math.min(ctx.yScale(0), ctx.yRange[0]));
-
-      path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
-
-      if (curve) path.curve(curve);
-
-      return path(data ?? ctx.data);
-    }
-  }
-
-  const d = $derived.by(() => {
+  function buildPath(resolvedData: any[]) {
     const path = ctx.radial
       ? lineRadial()
           .angle((d) => getScaleValue(d, ctx.xScale, xAccessor) + 0) // Never apply xOffset (LineChart radar, BarChart radial, ...)?
-
           .radius((d) => getScaleValue(d, ctx.yScale, yAccessor) + yOffset)
       : d3Line()
           .x((d) => getScaleValue(d, ctx.xScale, xAccessor) + xOffset)
@@ -252,147 +166,153 @@
     path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
     if (curve) path.curve(curve);
 
-    return pathData ?? path(data ?? ctx.data) ?? '';
-  });
-
-  const tweenedState = createMotion(defaultPathData(), () => d, tweenedOptions);
+    return path(resolvedData) ?? '';
+  }
 
-  const drawTransition = $derived(draw ? _drawTransition : () => ({}));
+  const d = $derived.by(() => {
+    // Skip full-path computation when segments mode handles rendering
+    if (hasAnyStyleFn && !geo.projection) return '';
+
+    const resolvedData = data ?? series?.data ?? ctx.data;
+
+    // Geo mode: convert data to GeoJSON LineString and render via geoPath
+    if (geo.projection) {
+      const coordinates = resolvedData
+        .filter((d: any) => {
+          if (defined) return defined(d, 0, resolvedData);
+          return xAccessor(d) != null && yAccessor(d) != null;
+        })
+        .map((d: any) => [xAccessor(d), yAccessor(d)]);
+
+      const lineString = { type: 'LineString' as const, coordinates };
+      return d3GeoPath(geo.projection)(lineString) ?? '';
+    }
 
-  let key = $state(Symbol());
+    return buildPath(resolvedData);
+  });
 
-  const renderCtx = getRenderContext();
+  type SegmentStyle = { stroke?: string; fill?: string; opacity?: number };
+
+  /**
+   * Groups consecutive data points by a composite key derived from function-valued style props.
+   * The key at index `i` determines the style for the segment from point `i` to point `i+1`.
+   * Each group includes an overlap of 1 point at boundaries for curve continuity.
+   */
+  function groupConsecutive(
+    data: any[],
+    keyFn: (d: any, index: number, data: any[]) => { key: string; style: SegmentStyle }
+  ): Array<{ style: SegmentStyle; data: any[] }> {
+    if (data.length < 2) return [];
+
+    const groups: Array<{ style: SegmentStyle; data: any[] }> = [];
+    let current = keyFn(data[0], 0, data);
+    let startIdx = 0;
+
+    for (let i = 1; i < data.length; i++) {
+      const next = keyFn(data[i], i, data);
+      if (next.key !== current.key) {
+        groups.push({ style: current.style, data: data.slice(startIdx, i + 1) });
+        startIdx = i;
+        current = next;
+      }
+    }
+    if (data.length - startIdx >= 2) {
+      groups.push({ style: current.style, data: data.slice(startIdx) });
+    }
 
-  function render(
-    ctx: CanvasRenderingContext2D,
-    styleOverrides: ComputedStylesOptions | undefined
-  ) {
-    renderPathData(
-      ctx,
-      tweenedState.current,
-      styleOverrides
-        ? merge({ styles: { strokeWidth } }, styleOverrides)
-        : {
-            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: className,
-          }
-    );
+    return groups;
   }
 
-  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
-
-  if (renderCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'Spline',
-      render,
-      events: {
-        click: restProps.onclick,
-        pointerenter: restProps.onpointerenter,
-        pointermove: restProps.onpointermove,
-        pointerleave: restProps.onpointerleave,
-        pointerdown: restProps.onpointerdown,
-        pointerover: restProps.onpointerover,
-        pointerout: restProps.onpointerout,
-        touchmove: restProps.ontouchmove,
-      },
-      deps: () => [
-        fillKey.current,
-        fillOpacity,
-        strokeKey.current,
-        strokeWidth,
-        opacity,
-        className,
-        tweenedState.current,
-      ],
+  const hasAnyStyleFn = $derived(
+    typeof stroke === 'function' || typeof fill === 'function' || typeof opacity === 'function'
+  );
+
+  const segments = $derived.by(() => {
+    if (!hasAnyStyleFn) return null;
+    const resolvedData = data ?? series?.data ?? ctx.data;
+    if (geo.projection) return null;
+
+    const groups = groupConsecutive(resolvedData, (d, i, arr) => {
+      const s = resolveColorProp(stroke, d, ctx.cScale, i, arr);
+      const f = resolveColorProp(fill, d, ctx.cScale, i, arr);
+      const o = resolveStyleProp(opacity, d, i, arr);
+      return { key: `${s}\0${f}\0${o}`, style: { stroke: s, fill: f, opacity: o } };
     });
-  }
 
-  let startPoint = $state<DOMPoint | undefined>();
+    return groups.map((group) => ({
+      ...group.style,
+      d: buildPath(group.data),
+    }));
+  });
+
+  /**
+   * Provide initial `0` horizontal baseline so the line animates up from y=0 on mount.
+   * Computes a proper flattened path using d3-line with all y-values at baseline.
+   */
+  function defaultPathData() {
+    // Skip baseline computation when motion is not initially enabled (faster initial render)
+    if (!extractTweenConfig(motion)) return '';
 
-  const endPointDuration = $derived.by(() => {
-    if (
-      typeof draw === 'object' &&
-      draw.duration !== undefined &&
-      typeof draw.duration !== 'function'
-    ) {
-      return draw.duration;
+    if (ctx.config.x) {
+      const resolvedData = data ?? series?.data ?? ctx.data;
+      const baseline = Math.min(ctx.yScale(0) ?? ctx.yRange[0], ctx.yRange[0]);
+
+      const path = ctx.radial
+        ? lineRadial()
+            .angle((d) => getScaleValue(d, ctx.xScale, xAccessor) + 0)
+            .radius(() => baseline)
+        : d3Line()
+            .x((d) => getScaleValue(d, ctx.xScale, xAccessor) + xOffset)
+            .y(() => baseline);
+
+      path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
+      if (curve) path.curve(curve);
+
+      return path(resolvedData) ?? '';
     }
-    return 800;
-  });
 
-  const endPoint = createControlledMotion<DOMPoint | undefined>(
-    undefined,
-    draw
-      ? {
-          type: 'tween',
-          duration: () => endPointDuration,
-          easing: typeof draw === 'object' && draw.easing ? draw.easing : cubicInOut,
-          interpolate() {
-            return (t: number) => {
-              const totalLength = splineRef?.getTotalLength() ?? 0;
-              const point = splineRef?.getPointAtLength(totalLength * t);
-              return point;
-            };
-          },
-        }
-      : { type: 'none' }
-  );
+    return '';
+  }
 
-  $effect(() => {
-    if (!startContent && !endContent) return;
-    d;
-    if (!splineRef || !splineRef.getTotalLength()) return;
-    startPoint = splineRef.getPointAtLength(0);
-    const totalLength = splineRef.getTotalLength();
-    endPoint.target = splineRef.getPointAtLength(totalLength);
+  // Always create tween motion so it's ready when motion is toggled on
+  const tweenState = createMotion(defaultPathData(), () => d, {
+    type: 'tween',
+    interpolate: interpolatePath,
   });
 
-  $effect(() => {
-    if (!draw) return;
-    [tweenedState.current];
-    // Anytime the path data changes, redraw
-    key = Symbol();
-  });
+  /** Reactively check whether motion is enabled */
+  const isTweened = $derived(extractTweenConfig(motion) != null);
+
+  const seriesOpacity = $derived(
+    series?.key == null ||
+      ctx.series.visibleSeries.length <= 1 ||
+      ctx.series.isHighlighted(series.key, true)
+      ? 1
+      : 0.1
+  );
 </script>
 
-{#if renderCtx === 'svg'}
-  {#key key}
-    <path
-      d={tweenedState.current}
+<!-- TODO: handle in LineChart/etc? -->
+<!-- class: cls(props.spline?.class, s.props?.class), -->
+
+{#if segments}
+  {#each segments as seg, i (i)}
+    <Path
+      pathData={seg.d}
+      stroke={seg.stroke}
+      fill={seg.fill}
+      opacity={seg.opacity ?? seriesOpacity}
+      {...series?.props}
       {...restProps}
-      class={cls(
-        layerClass('spline-path'),
-        !fill && 'fill-none',
-        !stroke && 'stroke-surface-content',
-        className
-      )}
-      {fill}
-      fill-opacity={fillOpacity}
-      {stroke}
-      stroke-width={strokeWidth}
-      {opacity}
-      marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
-      marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
-      marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-      in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
-      bind:this={splineRef}
     />
-    <MarkerWrapper id={markerStartId} marker={markerStart} />
-    <MarkerWrapper id={markerMidId} marker={markerMid} />
-    <MarkerWrapper id={markerEndId} marker={markerEnd} />
-
-    {#if startContent && startPoint}
-      <Group x={startPoint.x} y={startPoint.y} class={layerClass('spline-g-start')}>
-        {@render startContent({ point: startPoint })}
-      </Group>
-    {/if}
-
-    {#if endContent && endPoint.current}
-      <Group x={endPoint.current.x} y={endPoint.current.y} class={layerClass('spline-g-end')}>
-        {@render endContent({ point: endPoint.current })}
-      </Group>
-    {/if}
-  {/key}
+  {/each}
+{:else}
+  <Path
+    pathData={isTweened ? tweenState.current : d}
+    stroke={(typeof stroke === 'string' ? stroke : undefined) ?? series?.color}
+    fill={typeof fill === 'string' ? fill : undefined}
+    opacity={(typeof opacity === 'number' ? opacity : undefined) ?? seriesOpacity}
+    {...series?.props}
+    {...restProps}
+  />
 {/if}