layerchart 2.0.0-next.5 → 2.0.0-next.50

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,26 +85,32 @@
       | '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;
 </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';
-  import Spline from './Spline.svelte';
+  import Path from './Path.svelte';
 
-  import { isScaleBand } from '../utils/scales.svelte.js';
+  import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
-  import { getChartContext } from './Chart.svelte';
-  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
   import { extractLayerProps } from '../utils/attributes.js';
   import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
   import Arc from './Arc.svelte';
@@ -93,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',
@@ -105,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,
@@ -125,21 +214,37 @@
     }))
   );
 
-  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;
+    }
+
+    if (heightProp != null) {
+      y = y + (height - heightProp) / 2;
+      height = heightProp;
+    }
+
+    return { x, y, width, height };
+  });
 
-  const isVertical = $derived(isScaleBand(ctx.xScale));
-  const valueAccessor = $derived(accessor(isVertical ? y : x));
+  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
-        ? resolvedValue >= 0
+      ? ctx.valueAxis === 'y'
+        ? resolvedValue >= 0 && ctx.yRange[0] > ctx.yRange[1] // not inverted (bottom to top)
           ? 'top'
           : 'bottom'
-        : resolvedValue >= 0
+        : resolvedValue >= 0 && ctx.xRange[0] < ctx.xRange[1] // not inverted (left to right)
           ? 'right'
           : 'left'
       : roundedProp
@@ -151,20 +256,53 @@
   const bottomRight = $derived(['all', 'bottom', 'right', 'bottom-right'].includes(rounded));
   const width = $derived(dimensions.width);
   const height = $derived(dimensions.height);
-  const diameter = $derived(2 * radius);
+
+  // Clamp radius to prevent extending beyond bounding box
+  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 + radius},${dimensions.y} h${width - diameter}
-      ${topRight ? `a${radius},${radius} 0 0 1 ${radius},${radius}` : `h${radius}v${radius}`}
+    `M${dimensions.x + r},${dimensions.y} h${width - diameter}
+      ${topRight ? `a${r},${r} 0 0 1 ${r},${r}` : `h${r}v${r}`}
       v${height - diameter}
-      ${bottomRight ? `a${radius},${radius} 0 0 1 ${-radius},${radius}` : `v${radius}h${-radius}`}
+      ${bottomRight ? `a${r},${r} 0 0 1 ${-r},${r}` : `v${r}h${-r}`}
       h${diameter - width}
-      ${bottomLeft ? `a${radius},${radius} 0 0 1 ${-radius},${-radius}` : `h${-radius}v${-radius}`}
+      ${bottomLeft ? `a${r},${r} 0 0 1 ${-r},${-r}` : `h${-r}v${-r}`}
       v${diameter - height}
-      ${topLeft ? `a${radius},${radius} 0 0 1 ${radius},${-radius}` : `v${-radius}h${radius}`}
+      ${topLeft ? `a${r},${r} 0 0 1 ${r},${-r}` : `v${-r}h${r}`}
       z`
       .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}
@@ -179,7 +317,10 @@
     {strokeWidth}
     {opacity}
     cornerRadius={radius}
-    {...extractLayerProps(restProps, 'bar')}
+    onpointerenter={onPointerEnter}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
+    {...extractLayerProps(restProps, 'lc-bar')}
   />
 {:else if rounded === 'all' || rounded === 'none' || radius === 0}
   <Rect
@@ -190,16 +331,19 @@
     {opacity}
     rx={rounded === 'none' ? 0 : radius}
     {motion}
-    {initialX}
-    {initialY}
-    {initialHeight}
-    {initialWidth}
+    initialX={resolvedInitialX}
+    initialY={resolvedInitialY}
+    initialHeight={resolvedInitialHeight}
+    initialWidth={resolvedInitialWidth}
     {...dimensions}
-    {...extractLayerProps(restProps, 'bar')}
+    onpointerenter={onPointerEnter}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
+    {...extractLayerProps(restProps, 'lc-bar')}
   />
 {:else}
   {@const tweenMotion = extractTweenConfig(motion)}
-  <Spline
+  <Path
     {pathData}
     {fill}
     {fillOpacity}
@@ -207,6 +351,9 @@
     {strokeWidth}
     {opacity}
     motion={tweenMotion}
-    {...extractLayerProps(restProps, 'bar')}
+    onpointerenter={onPointerEnter}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
+    {...extractLayerProps(restProps, 'lc-bar')}
   />
 {/if}

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

@@ -28,23 +28,43 @@ 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>;
+export type BarProps = BarPropsWithoutHTML & Without<Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y' | 'offset'>, BarPropsWithoutHTML> & CommonEvents;
 import type { SVGAttributes } from 'svelte/elements';
 import { type Accessor } from '../utils/common.js';
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
 declare const Bar: import("svelte").Component<BarProps, {}, "">;
 type Bar = ReturnType<typeof Bar>;

package/dist/components/Bars.svelte

@@ -18,10 +18,20 @@
      */
     onBarClick?: (e: MouseEvent, detail: { data: any }) => void;
 
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series`.
+     */
+    seriesKey?: string;
+
+    /**
+     * Padding between stacked bars.
+     */
+    stackPadding?: number;
+
     children?: Snippet;
     // TODO: investigate
     [key: string]: any;
-  } & Omit<BarPropsWithoutHTML, 'data' | 'children'>;
+  } & Omit<BarPropsWithoutHTML, 'data' | 'children' | 'seriesKey' | 'stackPadding'>;
 
   export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'data'>;
 </script>
@@ -32,9 +42,9 @@
   import Bar, { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
   import Group from './Group.svelte';
 
+  import { getChartContext } from '../contexts/chart.js';
   import { chartDataArray } from '../utils/common.js';
-  import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
 
   let {
     fill,
@@ -45,14 +55,28 @@
     radius = 0,
     strokeWidth = 0,
     stroke = 'black',
+    seriesKey,
+    stackPadding = 0,
     ...restProps
   }: BarsProps = $props();
 
   const ctx = getChartContext();
-  const data = $derived(chartDataArray(dataProp ?? ctx.data));
+
+  ctx.registerComponent({
+    name: 'Bars',
+    kind: 'mark',
+    markInfo: () => ({ data: dataProp, seriesKey, color: fill as string | undefined }),
+  });
+
+  // Get series data if seriesKey is provided
+  const series = $derived(
+    seriesKey ? ctx.series.series.find((s) => s.key === seriesKey) : undefined
+  );
+  const seriesData = $derived(series?.data);
+  const data = $derived(chartDataArray(dataProp ?? seriesData ?? ctx.data));
 </script>
 
-<Group class={layerClass('bars')}>
+<Group class="lc-bars">
   {#if children}
     {@render children()}
   {:else}
@@ -62,9 +86,11 @@
         {radius}
         {strokeWidth}
         {stroke}
-        fill={fill ?? (ctx.config.c ? ctx.cGet(d) : null)}
+        {seriesKey}
+        {stackPadding}
+        fill={fill ?? series?.color ?? (ctx.config.c ? ctx.cGet(d) : null)}
         onclick={(e) => onBarClick(e, { data: d })}
-        {...extractLayerProps(restProps, 'bars-bar')}
+        {...extractLayerProps(restProps, 'lc-bars-bar')}
       />
     {/each}
   {/if}

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

@@ -16,9 +16,17 @@ export type BarsPropsWithoutHTML = {
     onBarClick?: (e: MouseEvent, detail: {
         data: any;
     }) => void;
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series`.
+     */
+    seriesKey?: string;
+    /**
+     * Padding between stacked bars.
+     */
+    stackPadding?: number;
     children?: Snippet;
     [key: string]: any;
-} & Omit<BarPropsWithoutHTML, 'data' | 'children'>;
+} & Omit<BarPropsWithoutHTML, 'data' | 'children' | 'seriesKey' | 'stackPadding'>;
 export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'data'>;
 import type { Snippet } from 'svelte';
 import { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';

package/dist/components/Blur.svelte

@@ -14,35 +14,36 @@
 
     /**
      * The default children snippet which provides
-     * the id and url for the filter.
+     * the id for the filter.
      */
-    children?: Snippet<[{ id: string; url: string }]>;
+    children?: Snippet;
   };
 </script>
 
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { getRenderContext } from './Chart.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const uid = $props.id();
 
   let { id = createId('blur-', uid), stdDeviation = 5, children }: BlurProps = $props();
 
-  const renderContext = getRenderContext();
+  const layerCtx = getLayerContext();
 </script>
 
-{#if renderContext === 'svg'}
+{#if layerCtx === 'svg'}
   <defs>
-    <filter {id} class={layerClass('blur-filter')}>
+    <filter {id} class="lc-blur-filter">
       <feGaussianBlur in="SourceGraphic" {stdDeviation} />
     </filter>
   </defs>
 
   {#if children}
-    <g filter="url(#{id})" class={layerClass('blur-g')}>
-      {@render children({ id, url: `url(#${id})` })}
+    <g filter="url(#{id})" class="lc-blur-g">
+      {@render children()}
     </g>
   {/if}
+{:else if children}
+  {@render children()}
 {/if}

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

@@ -11,12 +11,9 @@ export type BlurProps = {
     stdDeviation?: number;
     /**
      * The default children snippet which provides
-     * the id and url for the filter.
+     * the id for the filter.
      */
-    children?: Snippet<[{
-        id: string;
-        url: string;
-    }]>;
+    children?: Snippet;
 };
 import type { Snippet } from 'svelte';
 declare const Blur: import("svelte").Component<BlurProps, {}, "">;

package/dist/components/Bounds.svelte

@@ -19,7 +19,7 @@
 <script lang="ts">
   import { scaleLinear } from 'd3-scale';
 
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import { createMotionScale, type AnyScale } from '../utils/scales.svelte.js';
 
   let { domain, range, motion, children }: BoundsProps = $props();