layerchart 2.0.0-next.0 → 2.0.0-next.2

package/dist/components/Area.svelte

@@ -1,161 +1,199 @@
-<script lang="ts">
-  import { onDestroy, type ComponentProps } from 'svelte';
-  import type { tweened as tweenedStore } from 'svelte/motion';
-  import { type Area, area as d3Area, areaRadial } from 'd3-shape';
-  import type { CurveFactory } from 'd3-shape';
-  import { max, min } from 'd3-array';
-  import { interpolatePath } from 'd3-interpolate-path';
-  import { merge } from 'lodash-es';
-
-  import { cls } from '@layerstack/tailwind';
-  import { objectId } from '@layerstack/utils/object';
-
-  import { motionStore } from '../stores/motionStore.js';
-
-  import { getRenderContext } from './Chart.svelte';
-  import { chartContext } from './ChartContext.svelte';
-  import Spline from './Spline.svelte';
+<script lang="ts" module>
+  import { type Area as D3Area, area as d3Area, areaRadial } from 'd3-shape';
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { ComponentProps } from 'svelte';
   import { accessor, type Accessor } from '../utils/common.js';
-  import { isScaleBand } from '../utils/scales.js';
-  import { flattenPathData } from '../utils/path.js';
-  import { getCanvasContext } from './layout/Canvas.svelte';
-  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
-  const {
-    data: contextData,
-    xScale,
-    yScale,
-    x: contextX,
-    y,
-    yDomain,
-    yRange,
-    radial,
-    config,
-  } = chartContext();
-
-  /** Override data instead of using context */
-  export let data: any = undefined;
 
-  /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
-  export let pathData: string | undefined | null = undefined;
+  export type AreaPropsWithoutHTML = {
+    /** Override data instead of using context */
+    data?: any;
 
-  /** Override x accessor */
-  export let x: Accessor = undefined;
+    /**
+     * Pass `<path d={...} />` explicitly instead of calculating from data / context
+     */
+    pathData?: string | null;
 
-  /** Override y0 accessor.  Defaults to max($yRange) */
-  export let y0: Accessor = undefined;
-  /** Override y1 accessor.  Defaults to y accessor */
-  export let y1: Accessor = undefined;
+    /**
+     * Override x accessor
+     */
+    x?: Accessor;
 
-  /** Interpolate path data using d3-interpolate-path */
-  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+    /**
+     * Override y0 accessor. Defaults to max($yRange)
+     */
+    y0?: Accessor;
 
-  export let clipPath: string | undefined = undefined;
+    /**
+     * Override y1 accessor. Defaults to y accessor
+     */
+    y1?: Accessor;
 
-  export let curve: CurveFactory | undefined = undefined;
-  export let defined: Parameters<Area<any>['defined']>[0] | undefined = undefined;
+    /**
+     * Whether to tween the interpolated path data using d3-interpolate-path
+     */
+    motion?: MotionProp;
 
-  /** Enable showing line */
-  export let line: boolean | Partial<ComponentProps<Spline>> = false;
+    clipPath?: string;
 
-  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;
+    curve?: CurveFactory;
 
-  let className: string | undefined = undefined;
-  export { className as class };
+    defined?: Parameters<D3Area<any>['defined']>[0];
 
-  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
-  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+    /**
+     * Enable showing line
+     *
+     * @default false
+     */
+    line?: boolean | Partial<ComponentProps<typeof Spline>>;
+  } & CommonStyleProps;
 
-  $: xAccessor = x ? accessor(x) : $contextX;
-  $: y0Accessor = y0 ? accessor(y0) : (d: any) => min($yDomain);
-  $: y1Accessor = y1 ? accessor(y1) : $y;
+  export type AreaProps = AreaPropsWithoutHTML &
+    Without<SVGAttributes<SVGPathElement>, AreaPropsWithoutHTML>;
+</script>
 
-  $: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
-  $: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
+<script lang="ts">
+  import type { CurveFactory } from 'd3-shape';
+  import { max, min } from 'd3-array';
+  import { interpolatePath } from 'd3-interpolate-path';
+  import { merge } from 'lodash-es';
 
-  /** Provide initial `0` horizontal baseline and initially hide/untrack scale changes so not reactive (only set on initial mount) */
+  import { getRenderContext } from './Chart.svelte';
+  import Spline from './Spline.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 { getChartContext } from './Chart.svelte';
+  import {
+    createMotion,
+    extractTweenConfig,
+    type MotionProp,
+    type ResolvedMotion,
+  } from '../utils/motion.svelte.js';
+  import { createKey } from '../utils/key.svelte.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+
+  const ctx = getChartContext();
+  const renderCtx = getRenderContext();
+
+  let {
+    clipPath,
+    curve,
+    data,
+    defined,
+    fill,
+    fillOpacity,
+    line = false,
+    opacity,
+    pathData,
+    stroke,
+    strokeWidth,
+    motion,
+    x,
+    y0,
+    y1,
+    ...restProps
+  }: AreaProps = $props();
+
+  const xAccessor = $derived(x ? accessor(x) : ctx.x);
+  const y0Accessor = $derived(y0 ? accessor(y0) : (d: any) => min(ctx.yDomain));
+  const y1Accessor = $derived(y1 ? accessor(y1) : 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 tweenOptions: 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 (!tweenOptions) {
       // 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($yScale(0), $yRange[0]));
-    } else if ($config.x) {
+      return flattenPathData(pathData, Math.min(ctx.yScale(0), ctx.yRange[0]));
+    } else if (ctx.config.x) {
       // Only use default line if `x` accessor is defined (cartesian chart)
-      const path = $radial
+      const path = ctx.radial
         ? areaRadial()
-            .angle((d) => $xScale(xAccessor(d)))
-            .innerRadius((d) => Math.min($yScale(0), $yRange[0]))
-            .outerRadius((d) => Math.min($yScale(0), $yRange[0]))
+            .angle((d) => ctx.xScale(xAccessor(d)))
+            .innerRadius(() => Math.min(ctx.yScale(0), ctx.yRange[0]))
+            .outerRadius(() => Math.min(ctx.yScale(0), ctx.yRange[0]))
         : d3Area()
-            .x((d) => $xScale(xAccessor(d)) + xOffset)
-            .y0((d) => Math.min($yScale(0), $yRange[0]))
-            .y1((d) => Math.min($yScale(0), $yRange[0]));
+            .x((d) => ctx.xScale(xAccessor(d)) + xOffset)
+            .y0(() => Math.min(ctx.yScale(0), ctx.yRange[0]))
+            .y1(() => Math.min(ctx.yScale(0), ctx.yRange[0]));
 
       path.defined(defined ?? ((d) => xAccessor(d) != null && y1Accessor(d) != null));
 
       if (curve) path.curve(curve);
 
-      return path(data ?? $contextData);
+      // TODO: type this appropriately otherwise we will have bugs in the future
+      return path(data ?? ctx.data);
     }
   }
 
-  const tweenedOptions = tweened
-    ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
-    : false;
-  $: tweened_d = motionStore(defaultPathData(), { tweened: tweenedOptions });
-  $: {
-    const path = $radial
+  const d = $derived.by(() => {
+    const _path = ctx.radial
       ? areaRadial()
-          .angle((d) => $xScale(xAccessor(d)))
-          .innerRadius((d) => $yScale(y0Accessor(d)))
-          .outerRadius((d) => $yScale(y1Accessor(d)))
+          .angle((d) => ctx.xScale(xAccessor(d)))
+          .innerRadius((d) => ctx.yScale(y0Accessor(d)))
+          .outerRadius((d) => ctx.yScale(y1Accessor(d)))
       : d3Area()
-          .x((d) => $xScale(xAccessor(d)) + xOffset)
+          .x((d) => {
+            const v = xAccessor(d);
+            return ctx.xScale(v) + xOffset;
+          })
           .y0((d) => {
-            let value = max<number>($yRange)!;
+            let value = max<number>(ctx.yRange)!;
             if (y0) {
-              value = $yScale(y0Accessor(d));
-            } else if (Array.isArray($config.y) && $config.y[0] === 0) {
+              value = ctx.yScale(y0Accessor(d));
+            } else if (Array.isArray(ctx.config.y) && ctx.config.y[0] === 0) {
               // Use first value if `y` defined as an array (ex. `<Chart y={[0,1]}>`)
               // TODO: Would be nice if this also handled multi-series (<Chart y={['apples', 'bananas', 'oranges']}>) as well as delta values (<Chart y={['baseline', 'value']}>)
-              value = $yScale($y(d)[0]);
+              value = ctx.yScale(ctx.y(d)[0]);
             }
 
             return value + yOffset;
           })
           .y1((d) => {
-            let value = max<number>($yRange)!;
+            let value = max<number>(ctx.yRange)!;
             if (y1) {
-              value = $yScale(y1Accessor(d));
-            } else if (Array.isArray($config.y) && $config.y[1] === 1) {
+              value = ctx.yScale(y1Accessor(d));
+            } else if (Array.isArray(ctx.config.y) && ctx.config.y[1] === 1) {
               // Use second value if `y` defined as an array (ex. `<Chart y={[0,1]}>`)
               // TODO: Would be nice if this also handled multi-series (<Chart y={['apples', 'bananas', 'oranges']}>) as well as delta values (<Chart y={['baseline', 'value']}>)
-              value = $yScale($y(d)[1]);
+              value = ctx.yScale(ctx.y(d)[1]);
             } else {
               // Expect single value defined for `y` (ex. `<Chart y="value">`)
-              value = $yScale($y(d));
+              value = ctx.yScale(ctx.y(d));
             }
 
             return value + yOffset;
           });
 
-    path.defined(defined ?? ((d) => xAccessor(d) != null && y1Accessor(d) != null));
+    _path.defined(defined ?? ((d: any) => xAccessor(d) != null && y1Accessor(d) != null));
 
-    if (curve) path.curve(curve);
+    if (curve) _path.curve(curve);
 
-    const d = pathData ?? path(data ?? $contextData);
-    tweened_d.set(d ?? '');
-  }
+    return pathData ?? _path(data ?? ctx.data) ?? defaultPathData();
+  });
 
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
+  const tweenState = createMotion(defaultPathData(), () => d, tweenOptions);
 
   function render(
     ctx: CanvasRenderingContext2D,
@@ -163,78 +201,56 @@
   ) {
     renderPathData(
       ctx,
-      $tweened_d,
+      tweenState.current,
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: restProps.class ?? '',
           }
     );
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  $: fillKey = fill && typeof fill === 'object' ? objectId(fill) : fill;
-  $: strokeKey = stroke && typeof stroke === 'object' ? objectId(stroke) : stroke;
+  const fillKey = createKey(() => fill);
+  const strokeKey = createKey(() => stroke);
 
-  $: if (renderContext === 'canvas') {
-    // Redraw when props change
-    fillKey && fillOpacity && strokeKey && strokeWidth && opacity && className;
-    canvasContext.invalidate();
-  }
-
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
-  $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
       name: 'Area',
       render,
       events: {
-        click: onclick,
-        pointerenter: onpointerenter,
-        pointermove: onpointermove,
-        pointerleave: onpointerleave,
+        click: restProps.onclick,
+        pointerenter: restProps.onpointerenter,
+        pointermove: restProps.onpointermove,
+        pointerleave: restProps.onpointerleave,
       },
-    });
-
-    tweened_d.subscribe(() => {
-      canvasContext.invalidate();
+      deps: () => [
+        fillKey.current,
+        fillOpacity,
+        strokeKey.current,
+        strokeWidth,
+        opacity,
+        restProps.class,
+        tweenState.current,
+      ],
     });
   }
-
-  onDestroy(() => {
-    if (renderContext === 'canvas') {
-      canvasUnregister();
-    }
-  });
 </script>
 
 {#if line}
-  <Spline
-    {data}
-    {x}
-    y={y1}
-    {curve}
-    {defined}
-    {tweened}
-    {...typeof line === 'object' ? line : null}
-  />
+  <Spline {data} {x} y={y1} {curve} {defined} {motion} {...extractLayerProps(line, 'area-line')} />
 {/if}
 
-{#if renderContext === 'svg'}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
+{#if renderCtx === 'svg'}
   <path
-    d={$tweened_d}
+    d={tweenState.current}
     clip-path={clipPath}
     {fill}
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    {...$$restProps}
-    class={cls('path-area', className)}
-    on:click={onclick}
-    on:pointerenter={onpointerenter}
-    on:pointermove={onpointermove}
-    on:pointerleave={onpointerleave}
+    {...extractLayerProps(restProps, 'area-path')}
   />
 {/if}

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

@@ -0,0 +1,45 @@
+import { type Area as D3Area } from 'd3-shape';
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { ComponentProps } from 'svelte';
+import { type Accessor } from '../utils/common.js';
+export type AreaPropsWithoutHTML = {
+    /** Override data instead of using context */
+    data?: any;
+    /**
+     * Pass `<path d={...} />` explicitly instead of calculating from data / context
+     */
+    pathData?: string | null;
+    /**
+     * Override x accessor
+     */
+    x?: Accessor;
+    /**
+     * Override y0 accessor. Defaults to max($yRange)
+     */
+    y0?: Accessor;
+    /**
+     * Override y1 accessor. Defaults to y accessor
+     */
+    y1?: Accessor;
+    /**
+     * Whether to tween the interpolated path data using d3-interpolate-path
+     */
+    motion?: MotionProp;
+    clipPath?: string;
+    curve?: CurveFactory;
+    defined?: Parameters<D3Area<any>['defined']>[0];
+    /**
+     * Enable showing line
+     *
+     * @default false
+     */
+    line?: boolean | Partial<ComponentProps<typeof Spline>>;
+} & CommonStyleProps;
+export type AreaProps = AreaPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, AreaPropsWithoutHTML>;
+import type { CurveFactory } from 'd3-shape';
+import Spline from './Spline.svelte';
+import { type MotionProp } from '../utils/motion.svelte.js';
+declare const Area: import("svelte").Component<AreaProps, {}, "">;
+type Area = ReturnType<typeof Area>;
+export default Area;