layerchart 2.0.0-next.45 → 2.0.0-next.47

package/dist/components/Area.svelte

@@ -29,13 +29,16 @@
      */
     y1?: Accessor;
 
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series` and `y0`/`y1` are not set.
+     */
+    seriesKey?: string;
+
     /**
      * Whether to tween the interpolated path data using d3-interpolate-path
      */
     motion?: MotionProp;
 
-    clipPath?: string;
-
     curve?: CurveFactory;
 
     defined?: Parameters<D3Area<any>['defined']>[0];
@@ -46,7 +49,7 @@
      * @default false
      */
     line?: boolean | Partial<ComponentProps<typeof Spline>>;
-  } & CommonStyleProps;
+  } & Omit<PathProps, 'x' | 'y' | 'y0' | 'y1'>;
 
   export type AreaProps = AreaPropsWithoutHTML &
     Without<SVGAttributes<SVGPathElement>, AreaPropsWithoutHTML>;
@@ -54,16 +57,13 @@
 
 <script lang="ts">
   import type { CurveFactory } from 'd3-shape';
-  import { max, min } from 'd3-array';
+  import { min } from 'd3-array';
   import { interpolatePath } from 'd3-interpolate-path';
-  import { merge } from '@layerstack/utils';
 
-  import { getLayerContext } from '../contexts/layer.js';
   import Spline from './Spline.svelte';
+  import Path, { type PathProps } from './Path.svelte';
   import { isScaleBand } from '../utils/scales.svelte.js';
   import { flattenPathData } from '../utils/path.js';
-  import { registerCanvasComponent } from './layers/Canvas.svelte';
-  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
   import { getChartContext } from '../contexts/chart.js';
   import {
     createMotion,
@@ -71,34 +71,72 @@
     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 layerCtx = getLayerContext();
 
   let {
-    clipPath,
     curve,
     data,
     defined,
     fill,
-    fillOpacity,
+    stroke = 'none',
     line = false,
-    opacity,
     pathData,
-    stroke,
-    strokeWidth,
     motion,
     x,
     y0,
     y1,
+    seriesKey,
     ...restProps
   }: AreaProps = $props();
 
+  // Register as composite mark (shields child Spline) + chart mark registration
+  ctx.registerComponent({
+    name: 'Area',
+    kind: 'composite-mark',
+    markInfo: () => ({ data, x, y: y1 ?? y0, seriesKey, color: fill as string | undefined }),
+  });
+
+  let series = $derived(ctx.series.series.find((s) => s.key === seriesKey));
+  let seriesData = $derived(series?.data);
+  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
+  );
+
   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);
+  // Use stack accessors when available, otherwise fall back to explicit props or defaults
+  // Also handle array-form seriesAccessor like ['baseline', 'value']
+  const y0Accessor = $derived(
+    y0
+      ? accessor(y0)
+      : stackAccessors
+        ? stackAccessors.y0
+        : Array.isArray(seriesAccessor)
+          ? accessor(seriesAccessor[0])
+          : Array.isArray(ctx.config.y) && ctx.config.y[0] === 0
+            ? (d: any) => ctx.y(d)[0]
+            : ctx.props.yBaseline != null
+              ? () => ctx.props.yBaseline
+              : (d: any) => min(ctx.yScale.domain())
+  );
+  const y1Accessor = $derived(
+    y1
+      ? accessor(y1)
+      : stackAccessors
+        ? stackAccessors.y1
+        : Array.isArray(seriesAccessor)
+          ? accessor(seriesAccessor[1])
+          : seriesAccessor
+            ? accessor(seriesAccessor)
+            : Array.isArray(ctx.config.y) && ctx.config.y[1] === 1
+              ? (d: any) => ctx.y(d)[1]
+              : ctx.y
+  );
+  const resolvedData = $derived(data ?? seriesData ?? ctx.data);
 
   const xOffset = $derived(isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0);
   const yOffset = $derived(isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0);
@@ -143,7 +181,7 @@
       if (curve) path.curve(curve);
 
       // TODO: type this appropriately otherwise we will have bugs in the future
-      return path(data ?? ctx.data);
+      return path(resolvedData);
     }
   }
 
@@ -158,93 +196,40 @@
             const v = xAccessor(d);
             return ctx.xScale(v) + xOffset;
           })
-          .y0((d) => {
-            let value = max<number>(ctx.yRange)!;
-            if (y0) {
-              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 = ctx.yScale(ctx.y(d)[0]);
-            }
-
-            return value + yOffset;
-          })
-          .y1((d) => {
-            let value = max<number>(ctx.yRange)!;
-            if (y1) {
-              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 = ctx.yScale(ctx.y(d)[1]);
-            } else {
-              // Expect single value defined for `y` (ex. `<Chart y="value">`)
-              value = ctx.yScale(ctx.y(d));
-            }
-
-            return value + yOffset;
-          });
+          .y0((d) => ctx.yScale(y0Accessor(d)) + yOffset)
+          .y1((d) => ctx.yScale(y1Accessor(d)) + yOffset);
 
     _path.defined(defined ?? ((d: any) => xAccessor(d) != null && y1Accessor(d) != null));
 
     if (curve) _path.curve(curve);
 
-    return pathData ?? _path(data ?? ctx.data) ?? defaultPathData();
+    return pathData ?? _path(resolvedData) ?? defaultPathData();
   });
 
   const tweenState = createMotion(defaultPathData(), () => d, tweenOptions);
 
-  function render(
-    ctx: CanvasRenderingContext2D,
-    styleOverrides: ComputedStylesOptions | undefined
-  ) {
-    renderPathData(
-      ctx,
-      tweenState.current,
-      styleOverrides
-        ? merge({ styles: { strokeWidth } }, styleOverrides)
-        : {
-            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: restProps.class ?? '',
-            style: restProps.style as string | undefined,
-          }
-    );
-  }
+  const lineYAccessor = $derived.by(() => {
+    // For diverging stacks, use the outer edge (y0 for below-baseline series, y1 for above)
+    if (stackAccessors && ctx.series.stackLayout === 'stackDiverging') {
+      const firstPoint = resolvedData?.[0];
+      if (firstPoint) {
+        const val = stackAccessors.value(firstPoint);
+        if (val && val[1] <= 0) return y0Accessor;
+      }
+    }
 
-  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
-
-  if (layerCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'Area',
-      render,
-      events: {
-        click: restProps.onclick,
-        pointerenter: restProps.onpointerenter,
-        pointermove: restProps.onpointermove,
-        pointerleave: restProps.onpointerleave,
-      },
-      deps: () => [
-        fillKey.current,
-        fillOpacity,
-        strokeKey.current,
-        strokeWidth,
-        opacity,
-        restProps.class,
-        restProps.style,
-        tweenState.current,
-      ],
-    });
-  }
+    return y1 || stackAccessors || Array.isArray(seriesAccessor) || seriesAccessor
+      ? y1Accessor
+      : undefined;
+  });
 </script>
 
 {#if line}
   <Spline
-    {data}
+    data={data ?? seriesData}
     {x}
-    y={y1}
+    y={lineYAccessor}
+    {seriesKey}
     {curve}
     {defined}
     {motion}
@@ -252,15 +237,15 @@
   />
 {/if}
 
-{#if layerCtx === 'svg'}
-  <path
-    d={tweenState.current}
-    clip-path={clipPath}
-    {fill}
-    fill-opacity={fillOpacity}
-    {stroke}
-    stroke-width={strokeWidth}
-    {opacity}
-    {...extractLayerProps(restProps, 'lc-area-path')}
-  />
-{/if}
+<Path
+  pathData={tweenState.current}
+  fill={fill ?? series?.color}
+  {stroke}
+  opacity={series?.key == null ||
+  // Checking `visibleSeries.length <= 1` fixes re-animated tweened areas on hover
+  ctx.series.visibleSeries.length <= 1 ||
+  ctx.series.isHighlighted(series.key, true)
+    ? 1
+    : 0.1}
+  {...extractLayerProps(restProps, 'lc-area-path')}
+/>

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

@@ -1,6 +1,6 @@
 import { type Area as D3Area } from 'd3-shape';
 import type { SVGAttributes } from 'svelte/elements';
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { Without } from '../utils/types.js';
 import type { ComponentProps } from 'svelte';
 import { type Accessor } from '../utils/common.js';
 export type AreaPropsWithoutHTML = {
@@ -22,11 +22,14 @@ export type AreaPropsWithoutHTML = {
      * Override y1 accessor. Defaults to y accessor
      */
     y1?: Accessor;
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series` and `y0`/`y1` are not set.
+     */
+    seriesKey?: string;
     /**
      * Whether to tween the interpolated path data using d3-interpolate-path
      */
     motion?: MotionProp;
-    clipPath?: string;
     curve?: CurveFactory;
     defined?: Parameters<D3Area<any>['defined']>[0];
     /**
@@ -35,10 +38,11 @@ export type AreaPropsWithoutHTML = {
      * @default false
      */
     line?: boolean | Partial<ComponentProps<typeof Spline>>;
-} & CommonStyleProps;
+} & Omit<PathProps, 'x' | 'y' | 'y0' | 'y1'>;
 export type AreaProps = AreaPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, AreaPropsWithoutHTML>;
 import type { CurveFactory } from 'd3-shape';
 import Spline from './Spline.svelte';
+import { type PathProps } from './Path.svelte';
 import { type MotionProp } from '../utils/motion.svelte.js';
 declare const Area: import("svelte").Component<AreaProps, {}, "">;
 type Area = ReturnType<typeof Area>;

package/dist/components/Axis.svelte

@@ -189,6 +189,22 @@
     ['horizontal', 'angle'].includes(orientation) ? ctx.xInterval : ctx.yInterval
   );
 
+  // Default format to 'percentRound' for stackExpand layout considering axis direction
+  const resolvedFormat = $derived.by(() => {
+    if (format !== undefined) return format;
+
+    if (ctx.series.stackLayout === 'stackExpand') {
+      const isValueAxis =
+        (ctx.valueAxis === 'x' && ['horizontal', 'angle'].includes(orientation)) ||
+        (ctx.valueAxis === 'y' && ['vertical', 'radius'].includes(orientation));
+      if (isValueAxis) {
+        return 'percentRound';
+      }
+    }
+
+    return undefined;
+  });
+
   const xRangeMinMax = $derived(extent<number>(ctx.xRange)) as [number, number];
   const yRangeMinMax = $derived(extent<number>(ctx.yRange)) as [number, number];
 
@@ -220,7 +236,7 @@
     }
 
     // Use format to filter ticks (helpful to keep ticks above a threshold for wide charts or short durations)
-    const formatType = typeof format === 'object' ? format?.type : format;
+    const formatType = typeof resolvedFormat === 'object' ? resolvedFormat?.type : resolvedFormat;
 
     if (formatType === 'integer') {
       tickVals = tickVals.filter(Number.isInteger);
@@ -254,7 +270,7 @@
       scale,
       ticks,
       count: tickCount,
-      formatType: format,
+      formatType: resolvedFormat,
       multiline: tickMultiline,
       placement,
     })

package/dist/components/Bar.svelte

@@ -35,6 +35,16 @@
      */
     y1?: Accessor;
 
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series`.
+     */
+    seriesKey?: string;
+
+    /**
+     * Padding between stacked bars.
+     */
+    stackPadding?: number;
+
     radius?: number;
 
     insets?: Insets;
@@ -47,6 +57,16 @@
 
     initialWidth?: number;
 
+    /**
+     * Fixed width in pixels. Overrides the scale-derived width and centers the bar within its band.
+     */
+    width?: number;
+
+    /**
+     * Fixed height in pixels. Overrides the scale-derived height and centers the bar within its band.
+     */
+    height?: number;
+
     /**
      * Control which corners are rounded with radius. Uses <path> instead of <rect> when not set
      * to `all`
@@ -65,6 +85,11 @@
       | 'bottom-right';
 
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+
+    /**
+     * Setup pointer events to show tooltip for related data.
+     */
+    tooltip?: boolean;
   } & CommonStyleProps;
 
   export type BarProps = BarPropsWithoutHTML &
@@ -76,7 +101,7 @@
 </script>
 
 <script lang="ts">
-  import type { SVGAttributes } from 'svelte/elements';
+  import type { PointerEventHandler, SVGAttributes } from 'svelte/elements';
   import { greatestAbs } from '@layerstack/utils';
 
   import Rect from './Rect.svelte';
@@ -94,10 +119,12 @@
 
   let {
     data,
-    x = ctx.x,
-    y = ctx.y,
-    x1,
-    y1,
+    x: xProp,
+    y: yProp,
+    x1: x1Prop,
+    y1: y1Prop,
+    seriesKey,
+    stackPadding = 0,
     fill,
     fillOpacity,
     stroke: strokeProp = 'black',
@@ -106,16 +133,77 @@
     radius = 0,
     rounded: roundedProp = 'all',
     motion,
-    insets,
+    insets: insetsProp,
     initialX,
     initialY,
     initialHeight,
     initialWidth,
+    width: widthProp,
+    height: heightProp,
+    tooltip,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
     ...restProps
   }: BarProps = $props();
 
   const stroke = $derived(strokeProp === null || strokeProp === undefined ? 'black' : strokeProp);
 
+  // Get series data if seriesKey is provided
+  const series = $derived(
+    seriesKey ? ctx.series.series.find((s) => s.key === seriesKey) : undefined
+  );
+  const seriesAccessor = $derived(
+    series ? (series.value ?? (series.data ? undefined : series.key)) : undefined
+  );
+
+  // Get stack accessors if seriesKey is provided and stacking is enabled
+  const stackAccessors = $derived(
+    seriesKey && ctx.series.isStacked ? ctx.series.getStackAccessors(seriesKey) : null
+  );
+
+  // Resolve accessors: use explicit props first, then stack accessors, then series accessor, then context
+  // stackAccessors and seriesAccessor are value accessors and should only be used for the value dimension
+  const x = $derived(
+    xProp ?? (ctx.valueAxis == 'x' ? (stackAccessors?.value ?? seriesAccessor) : undefined) ?? ctx.x
+  );
+  const y = $derived(
+    yProp ?? (ctx.valueAxis == 'y' ? (stackAccessors?.value ?? seriesAccessor) : undefined) ?? ctx.y
+  );
+  const x1 = $derived(x1Prop);
+  const y1 = $derived(y1Prop);
+
+  // Calculate series index and count from context when seriesKey is provided
+  const seriesIndex = $derived(
+    seriesKey ? ctx.series.visibleSeries.findIndex((s) => s.key === seriesKey) : undefined
+  );
+  const seriesCount = $derived(ctx.series.visibleSeries.length);
+
+  // Calculate stack insets if stacking is enabled
+  const stackInsets = $derived.by(() => {
+    if (!ctx.series.isStacked || stackPadding === 0 || seriesIndex === undefined) {
+      return undefined;
+    }
+
+    const isFirst = seriesIndex === 0;
+    const isLast = seriesIndex === seriesCount - 1;
+    const stackInset = stackPadding / 2;
+
+    if (ctx.valueAxis === 'y') {
+      return {
+        bottom: isFirst ? undefined : stackInset,
+        top: isLast ? undefined : stackInset,
+      };
+    } else {
+      return {
+        left: isFirst ? undefined : stackInset,
+        right: isLast ? undefined : stackInset,
+      };
+    }
+  });
+
+  const insets = $derived(insetsProp ?? stackInsets);
+
   const getDimensions = $derived(
     createDimensionGetter(ctx, () => ({
       x,
@@ -126,17 +214,33 @@
     }))
   );
 
-  const dimensions = $derived(getDimensions(data) ?? { x: 0, y: 0, width: 0, height: 0 });
+  const scaleDimensions = $derived(getDimensions(data) ?? { x: 0, y: 0, width: 0, height: 0 });
+
+  // Apply fixed width/height overrides, centering within the scale-derived band
+  const dimensions = $derived.by(() => {
+    let { x, y, width, height } = scaleDimensions;
+
+    if (widthProp != null) {
+      x = x + (width - widthProp) / 2;
+      width = widthProp;
+    }
 
-  const isVertical = $derived(isScaleBand(ctx.xScale) || isScaleTime(ctx.xScale));
-  const valueAccessor = $derived(accessor(isVertical ? y : x));
+    if (heightProp != null) {
+      y = y + (height - heightProp) / 2;
+      height = heightProp;
+    }
+
+    return { x, y, width, height };
+  });
+
+  const valueAccessor = $derived(accessor(ctx.valueAxis === 'y' ? y : x));
   const value = $derived(valueAccessor(data));
   const resolvedValue = $derived(Array.isArray(value) ? greatestAbs(value) : value);
 
   // Resolved `rounded="edge"` based on orientation and value
   const rounded = $derived(
     roundedProp === 'edge'
-      ? isVertical
+      ? ctx.valueAxis === 'y'
         ? resolvedValue >= 0 && ctx.yRange[0] > ctx.yRange[1] // not inverted (bottom to top)
           ? 'top'
           : 'bottom'
@@ -157,6 +261,20 @@
   const r = $derived(Math.min(radius, width / 2, height / 2));
   const diameter = $derived(2 * r);
 
+  // Auto-compute initial values for mount animation when motion is configured
+  const resolvedInitialY = $derived(
+    initialY ?? (motion && ctx.valueAxis === 'y' ? Math.max(ctx.yRange[0], ctx.yRange[1]) : undefined)
+  );
+  const resolvedInitialHeight = $derived(
+    initialHeight ?? (motion && ctx.valueAxis === 'y' ? 0 : undefined)
+  );
+  const resolvedInitialX = $derived(
+    initialX ?? (motion && ctx.valueAxis === 'x' ? Math.min(ctx.xRange[0], ctx.xRange[1]) : undefined)
+  );
+  const resolvedInitialWidth = $derived(
+    initialWidth ?? (motion && ctx.valueAxis === 'x' ? 0 : undefined)
+  );
+
   const pathData = $derived(
     `M${dimensions.x + r},${dimensions.y} h${width - diameter}
       ${topRight ? `a${r},${r} 0 0 1 ${r},${r}` : `h${r}v${r}`}
@@ -170,6 +288,21 @@
       .split('\n')
       .join('')
   );
+
+  const onPointerEnter: PointerEventHandler<Element> = (e) => {
+    onpointerenter?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+
+  const onPointerMove: PointerEventHandler<Element> = (e) => {
+    onpointermove?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+
+  const onPointerLeave: PointerEventHandler<Element> = (e) => {
+    onpointerleave?.(e);
+    if (tooltip) ctx.tooltip.hide();
+  };
 </script>
 
 {#if ctx.radial}
@@ -184,6 +317,9 @@
     {strokeWidth}
     {opacity}
     cornerRadius={radius}
+    onpointerenter={onPointerEnter}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
     {...extractLayerProps(restProps, 'lc-bar')}
   />
 {:else if rounded === 'all' || rounded === 'none' || radius === 0}
@@ -195,11 +331,14 @@
     {opacity}
     rx={rounded === 'none' ? 0 : radius}
     {motion}
-    {initialX}
-    {initialY}
-    {initialHeight}
-    {initialWidth}
+    initialX={resolvedInitialX}
+    initialY={resolvedInitialY}
+    initialHeight={resolvedInitialHeight}
+    initialWidth={resolvedInitialWidth}
     {...dimensions}
+    onpointerenter={onPointerEnter}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
     {...extractLayerProps(restProps, 'lc-bar')}
   />
 {:else}
@@ -212,6 +351,9 @@
     {strokeWidth}
     {opacity}
     motion={tweenMotion}
+    onpointerenter={onPointerEnter}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
     {...extractLayerProps(restProps, 'lc-bar')}
   />
 {/if}

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

@@ -28,18 +28,38 @@ export type BarPropsWithoutHTML = {
      * @default ctx.y1
      */
     y1?: Accessor;
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series`.
+     */
+    seriesKey?: string;
+    /**
+     * Padding between stacked bars.
+     */
+    stackPadding?: number;
     radius?: number;
     insets?: Insets;
     initialX?: number;
     initialY?: number;
     initialHeight?: number;
     initialWidth?: number;
+    /**
+     * Fixed width in pixels. Overrides the scale-derived width and centers the bar within its band.
+     */
+    width?: number;
+    /**
+     * Fixed height in pixels. Overrides the scale-derived height and centers the bar within its band.
+     */
+    height?: number;
     /**
      * Control which corners are rounded with radius. Uses <path> instead of <rect> when not set
      * to `all`
      */
     rounded?: 'all' | 'none' | 'edge' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+    /**
+     * Setup pointer events to show tooltip for related data.
+     */
+    tooltip?: boolean;
 } & CommonStyleProps;
 export type BarProps = BarPropsWithoutHTML & Without<Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y' | 'offset'>, BarPropsWithoutHTML> & CommonEvents;
 import type { SVGAttributes } from 'svelte/elements';