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

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

@@ -1,40 +1,57 @@
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { Without } from '../utils/types.js';
+import type { DataDrivenStyleProps } from '../utils/dataProp.js';
 import type { SVGAttributes } from 'svelte/elements';
 import { type MotionProp } from '../utils/motion.svelte.js';
+import type { FormatType, FormatConfig } from '@layerstack/utils';
+/**
+ * Check if a Text prop value is a data-space prop.
+ * Functions are always data props.
+ * Strings are data props unless they look like CSS values (e.g. "50%", "1em").
+ */
+export declare function isTextDataProp(value: any): boolean;
 export type TextPropsWithoutHTML = {
     /**
-     * text value
+     * Text value to render.
+     * - `number`: direct value
+     * - `string`: in data mode, treated as a data property name (e.g. `"label"` → `d.label`);
+     *   in pixel mode, used as literal text
+     * - `function(d)`: accessor called per data item to get the text value
+     *
      * @default 0
      */
-    value?: string | number;
-    /**
-     * The fill color of the text
-     */
-    fill?: string;
+    value?: string | number | ((d: any) => string | number);
     /**
      * Maximum width to occupy (approximate as words are not split)
      */
     width?: number;
     /**
-     * x position of the text
+     * x position of the text.
+     * - `number`: pixel value (direct)
+     * - `string` (CSS value like "50%"): SVG position value
+     * - `string` (property name like "date"): data property, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
      *
      * @default 0
      */
-    x?: string | number;
+    x?: string | number | ((d: any) => any);
     /**
-     * Initial x position of the text
+     * Initial x position of the text (pixel mode only).
      *
      * @default x
      */
     initialX?: string | number;
     /**
-     * y position of the text
+     * y position of the text.
+     * - `number`: pixel value (direct)
+     * - `string` (CSS value like "50%"): SVG position value
+     * - `string` (property name like "value"): data property, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
      *
      * @default 0
      */
-    y?: string | number;
+    y?: string | number | ((d: any) => any);
     /**
-     * Initial y position of the text
+     * Initial y position of the text (pixel mode only).
      *
      * @default y
      */
@@ -80,6 +97,12 @@ export type TextPropsWithoutHTML = {
      * @default 'end'
      */
     verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+    /**
+     * The dominant baseline of the text.  Useful for aligning text to the baseline of the axis.
+     *
+     * @default 'auto'
+     */
+    dominantBaseline?: 'auto' | 'text-before-edge' | 'text-after-edge' | 'middle' | 'hanging' | 'ideographic' | 'mathematical';
     /**
      * Rotational angle of the text
      */
@@ -100,6 +123,12 @@ export type TextPropsWithoutHTML = {
      * @bindable
      */
     ref?: SVGTextElement;
+    /**
+     * Format the displayed value. When set with `motion` and a numeric `value`,
+     * the number will tween smoothly and be formatted for display.
+     */
+    format?: FormatType | FormatConfig;
+    /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
     /**
      * Whether to enable text truncation
@@ -122,7 +151,18 @@ export type TextPropsWithoutHTML = {
      * @default '0%'
      */
     startOffset?: string | number;
-} & CommonStyleProps;
+    /**
+     * Data array to iterate over in data mode.
+     * Falls back to chart context data when not provided.
+     */
+    data?: any[];
+    /**
+     * Key function for keyed {#each} rendering in data mode.
+     *
+     * @default (d, i) => i
+     */
+    key?: (d: any, index: number) => any;
+} & DataDrivenStyleProps;
 export type TextProps = TextPropsWithoutHTML & Without<SVGAttributes<SVGTextElement>, TextPropsWithoutHTML>;
 import { type TruncateTextOptions } from '../utils/string.js';
 declare const Text: import("svelte").Component<TextProps, {}, "ref" | "svgRef">;

package/dist/components/Text.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Text.svelte.test.js

@@ -0,0 +1,152 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import Text from './Text.svelte';
+describe('Text', () => {
+    describe('pixel mode', () => {
+        it('should render text with pixel values', async () => {
+            render(TestHarness, {
+                component: Text,
+                componentProps: {
+                    x: 50,
+                    y: 50,
+                    value: 'Hello',
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+        });
+        it('should preserve CSS-like string values as SVG values', async () => {
+            render(TestHarness, {
+                component: Text,
+                componentProps: {
+                    x: '50%',
+                    y: '50%',
+                    value: 'Centered',
+                    textAnchor: 'middle',
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+        });
+    });
+    describe('data mode', () => {
+        const data = [
+            { date: new Date('2024-01-01'), value: 20, label: 'A' },
+            { date: new Date('2024-02-01'), value: 40, label: 'B' },
+            { date: new Date('2024-03-01'), value: 60, label: 'C' },
+        ];
+        it('should render one text per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x: 'date',
+                    y: 'value',
+                    value: (d) => d.label,
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+        });
+        it('should resolve value as data property name in data mode', async () => {
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x: 'date',
+                    y: 'value',
+                    value: 'label',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+            // Check that the text content is resolved from the data property
+            const tspans = document.querySelectorAll('.lc-text-tspan');
+            const textContents = Array.from(tspans).map((el) => el.textContent);
+            expect(textContents).toEqual(['A', 'B', 'C']);
+        });
+        it('should resolve data-driven fill through cScale', async () => {
+            const colorData = [
+                { date: new Date('2024-01-01'), value: 20, label: 'A', category: 'X' },
+                { date: new Date('2024-02-01'), value: 40, label: 'B', category: 'Y' },
+                { date: new Date('2024-03-01'), value: 60, label: 'C', category: 'X' },
+            ];
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data: colorData,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    c: 'category',
+                    cRange: ['steelblue', 'coral'],
+                },
+                componentProps: {
+                    x: 'date',
+                    y: 'value',
+                    value: 'label',
+                    fill: 'category',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+            // Text elements are <text> inside <svg>, check the fill attribute
+            expect(texts[0].getAttribute('fill')).toBe('steelblue');
+            expect(texts[1].getAttribute('fill')).toBe('coral');
+            expect(texts[2].getAttribute('fill')).toBe('steelblue');
+        });
+        it('should pass literal CSS colors through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x: 'date',
+                    y: 'value',
+                    value: 'label',
+                    fill: 'red',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+            expect(texts[0].getAttribute('fill')).toBe('red');
+            expect(texts[1].getAttribute('fill')).toBe('red');
+        });
+        it('should use explicit data prop over chart context data', async () => {
+            const explicitData = [{ date: new Date('2024-01-01'), value: 20, label: 'Only' }];
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data: explicitData,
+                    x: 'date',
+                    y: 'value',
+                    value: 'label',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(1);
+        });
+    });
+});

package/dist/components/Threshold.svelte

@@ -40,14 +40,17 @@
       - https://github.com/airbnb/visx/issues/245
   */
 
-  import { min } from 'd3-array';
+  import { min, max } from 'd3-array';
 
   import Area from './Area.svelte';
   import ClipPath from './ClipPath.svelte';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
 
   const ctx = getChartContext();
 
+  // Mark as composite so child Areas don't register
+  ctx.registerComponent({ name: 'Threshold', kind: 'composite-mark' });
+
   let { curve, defined, below, above, children }: ThresholdProps = $props();
 </script>
 
@@ -55,7 +58,7 @@
 {#key curve}
   <ClipPath>
     {#snippet clip()}
-      <Area y0={(d) => ctx.y(d)[0]} y1={(d) => min(ctx.yDomain)} {curve} {defined} />
+      <Area y0={(d) => ctx.y(d)[1]} y1={(d) => max(ctx.yDomain)} {curve} {defined} />
     {/snippet}
     {@render above?.({ curve, defined })}
   </ClipPath>

package/dist/components/TileImage.svelte

@@ -135,7 +135,7 @@
     y={(y + ty) * scale - 0.5}
     width={scale + 1}
     height={scale + 1}
-    {...extractLayerProps(restProps, 'tile-image-lower')}
+    {...extractLayerProps(restProps, 'lc-tile-image-lower')}
   />
   <image
     {href}
@@ -143,7 +143,7 @@
     y={(y + ty) * scale}
     width={scale}
     height={scale}
-    {...extractLayerProps(restProps, 'tile-image')}
+    {...extractLayerProps(restProps, 'lc-tile-image')}
   />
 {/key}
 {#if debug}
@@ -152,7 +152,7 @@
     y={(y + ty) * scale}
     width={scale}
     height={scale}
-    class="stroke-danger/50 fill-none"
+    class="lc-tile-image-debug-rect"
   />
   <Text
     x={(x + tx) * scale}
@@ -161,6 +161,21 @@
     dx={2}
     dy={-2}
     value="{x}-{y}-{z}"
-    class="text-[8px] fill-black/50"
+    class="lc-tile-image-debug-text"
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-tile-image-debug-rect)) {
+      fill: none;
+      stroke: var(--color-danger, red);
+    }
+
+    :global(:where(.lc-tile-image-debug-text)) {
+      --fill-color: var(--color-danger, red);
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+</style>

package/dist/components/Trail.svelte

@@ -0,0 +1,256 @@
+<script lang="ts" module>
+  import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+
+  import { accessor, type Accessor } from '../utils/common.js';
+  import type { MotionProp } from '../utils/motion.svelte.js';
+  import type { DataProp } from '../utils/dataProp.js';
+  import type { TrailCap } from '../utils/trail.js';
+  import type { PathProps } from './Path.svelte';
+
+  export type TrailPropsWithoutHTML = {
+    /**
+     * Override data instead of using context
+     */
+    data?: any;
+
+    /**
+     * Override `x` accessor from Chart context
+     */
+    x?: Accessor;
+
+    /**
+     * Override `y` accessor from Chart context
+     */
+    y?: Accessor;
+
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series` and `x`/`y` are not set.
+     */
+    seriesKey?: string;
+
+    /**
+     * Function to determine if a point is defined
+     *
+     * @example
+     * <Trail defined={(d) => d.value !== null} />
+     */
+    defined?: Parameters<Line<any>['defined']>[0];
+
+    /**
+     * Width at each point. Falls back to Chart's `r` accessor if not set.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via rScale
+     * - `function(d)`: accessor called per data item, result passed through rScale
+     *
+     * @default 4 (when Chart `r` is also not set)
+     */
+    r?: DataProp;
+
+    /**
+     * Curve interpolation applied to the trail centerline.
+     * @example
+     * import { curveNatural } from 'd3-shape';
+     * <Trail curve={curveNatural} />
+     */
+    curve?: CurveFactory | CurveFactoryLineOnly;
+
+    /**
+     * Cap style for trail endpoints.
+     * - 'round' (default): semicircular end caps
+     * - 'butt': flat ends with polygon offset outline
+     * @default 'round'
+     */
+    cap?: TrailCap;
+
+    /**
+     * Tension parameter for applicable curve factories (0–1).
+     * Applied via curveCardinal.tension(), curveCatmullRom.alpha(), or curveBundle.beta().
+     */
+    tension?: number;
+
+    /**
+     * Number of interpolated samples per segment for curve resampling.
+     * Auto-estimated when omitted.
+     */
+    resolution?: number;
+
+    /**
+     * Fill color
+     */
+    fill?: string;
+
+    /**
+     * Fill opacity
+     */
+    fillOpacity?: number;
+
+    /**
+     * Opacity
+     */
+    opacity?: number;
+
+    /**
+     * CSS class
+     */
+    class?: string;
+
+    /**
+     * Whether to animate the path using tweened interpolation.
+     */
+    motion?: MotionProp;
+  };
+
+  export type TrailProps = TrailPropsWithoutHTML &
+    Omit<PathProps, keyof TrailPropsWithoutHTML | 'r'>;
+</script>
+
+<script lang="ts">
+  import { max } from 'd3-array';
+  import { interpolatePath } from 'd3-interpolate-path';
+  import { cls } from '@layerstack/tailwind';
+
+  import { isScaleBand } from '../utils/scales.svelte.js';
+  import { resolveDataProp } from '../utils/dataProp.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { computeTrailPath } from '../utils/trail.js';
+  import { createMotion, extractTweenConfig } from '../utils/motion.svelte.js';
+  import Path from './Path.svelte';
+
+  const ctx = getChartContext();
+
+  let {
+    data,
+    x,
+    y,
+    seriesKey,
+    defined,
+    r,
+    curve,
+    cap,
+    tension,
+    resolution,
+    fill,
+    fillOpacity,
+    opacity,
+    motion,
+    class: className,
+    ...restProps
+  }: TrailProps = $props();
+
+  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);
+
+  function getScaleValue(
+    data: any,
+    scale: typeof ctx.xScale | typeof ctx.yScale,
+    accessor: Function
+  ) {
+    let value = accessor(data);
+
+    if (Array.isArray(value)) {
+      value = max(value);
+    }
+
+    if (scale.domain().length) {
+      return scale(value);
+    } else {
+      return value;
+    }
+  }
+
+  /** Resolve r per data point: prop > Chart r accessor > default 4 */
+  const resolvedR = $derived(r ?? (ctx.config.r as DataProp | undefined));
+
+  const trailPath = $derived.by(() => {
+    const resolvedData = data ?? series?.data ?? ctx.data;
+    const definedFn = defined ?? ((d: any) => xAccessor(d) != null && yAccessor(d) != null);
+
+    const points = resolvedData
+      .filter((d: any, i: number) => definedFn(d, i, resolvedData))
+      .map((d: any) => ({
+        x: getScaleValue(d, ctx.xScale, xAccessor) + xOffset,
+        y: getScaleValue(d, ctx.yScale, yAccessor) + yOffset,
+        r: resolvedR != null
+          ? resolveDataProp(resolvedR, d, ctx.rScale, typeof resolvedR === 'number' ? resolvedR : 4)
+          : 4,
+      }));
+
+    return computeTrailPath(points, { curve, cap, tension, resolution });
+  });
+
+  /**
+   * Provide initial baseline trail so it animates up from y=0 on mount.
+   * Computes a trail path with all y-values at baseline.
+   */
+  function defaultPathData() {
+    // Skip baseline computation when motion is not initially enabled (faster initial render)
+    if (!extractTweenConfig(motion)) return '';
+
+    if (ctx.config.x) {
+      const resolvedData = data ?? series?.data ?? ctx.data;
+      const definedFn = defined ?? ((d: any) => xAccessor(d) != null && yAccessor(d) != null);
+      const baseline = Math.min(ctx.yScale(0) ?? ctx.yRange[0], ctx.yRange[0]);
+
+      const points = resolvedData
+        .filter((d: any, i: number) => definedFn(d, i, resolvedData))
+        .map((d: any) => ({
+          x: getScaleValue(d, ctx.xScale, xAccessor) + xOffset,
+          y: baseline,
+          r: resolvedR != null
+            ? resolveDataProp(resolvedR, d, ctx.rScale, typeof resolvedR === 'number' ? resolvedR : 4)
+            : 4,
+        }));
+
+      return computeTrailPath(points, { curve, cap, tension, resolution });
+    }
+
+    return '';
+  }
+
+  // Always create tween motion so it's ready when motion is toggled on
+  const tweenState = createMotion(defaultPathData(), () => trailPath, {
+    type: 'tween',
+    interpolate: interpolatePath,
+  });
+
+  /** Reactively check whether motion is enabled */
+  const isTweened = $derived(extractTweenConfig(motion) != null);
+
+  ctx.registerComponent({
+    name: 'Trail',
+    kind: 'mark',
+    markInfo: () => ({ data, x, y, seriesKey, curve }),
+  });
+</script>
+
+<Path
+  pathData={isTweened ? tweenState.current : trailPath}
+  {fill}
+  fillOpacity={fillOpacity}
+  {opacity}
+  stroke="none"
+  class={cls('lc-trail', className)}
+  {...restProps}
+/>
+
+<style>
+  @layer base {
+    :global(:where(.lc-trail)) {
+      --fill-color: var(--color-surface-content, currentColor);
+    }
+
+    :global(:where(.lc-layout-svg .lc-trail, svg.lc-trail):not([fill])) {
+      fill: var(--fill-color);
+    }
+  }
+</style>

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

@@ -0,0 +1,88 @@
+import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+import { type Accessor } from '../utils/common.js';
+import type { MotionProp } from '../utils/motion.svelte.js';
+import type { DataProp } from '../utils/dataProp.js';
+import type { TrailCap } from '../utils/trail.js';
+import type { PathProps } from './Path.svelte';
+export type TrailPropsWithoutHTML = {
+    /**
+     * Override data instead of using context
+     */
+    data?: any;
+    /**
+     * Override `x` accessor from Chart context
+     */
+    x?: Accessor;
+    /**
+     * Override `y` accessor from Chart context
+     */
+    y?: Accessor;
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series` and `x`/`y` are not set.
+     */
+    seriesKey?: string;
+    /**
+     * Function to determine if a point is defined
+     *
+     * @example
+     * <Trail defined={(d) => d.value !== null} />
+     */
+    defined?: Parameters<Line<any>['defined']>[0];
+    /**
+     * Width at each point. Falls back to Chart's `r` accessor if not set.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via rScale
+     * - `function(d)`: accessor called per data item, result passed through rScale
+     *
+     * @default 4 (when Chart `r` is also not set)
+     */
+    r?: DataProp;
+    /**
+     * Curve interpolation applied to the trail centerline.
+     * @example
+     * import { curveNatural } from 'd3-shape';
+     * <Trail curve={curveNatural} />
+     */
+    curve?: CurveFactory | CurveFactoryLineOnly;
+    /**
+     * Cap style for trail endpoints.
+     * - 'round' (default): semicircular end caps
+     * - 'butt': flat ends with polygon offset outline
+     * @default 'round'
+     */
+    cap?: TrailCap;
+    /**
+     * Tension parameter for applicable curve factories (0–1).
+     * Applied via curveCardinal.tension(), curveCatmullRom.alpha(), or curveBundle.beta().
+     */
+    tension?: number;
+    /**
+     * Number of interpolated samples per segment for curve resampling.
+     * Auto-estimated when omitted.
+     */
+    resolution?: number;
+    /**
+     * Fill color
+     */
+    fill?: string;
+    /**
+     * Fill opacity
+     */
+    fillOpacity?: number;
+    /**
+     * Opacity
+     */
+    opacity?: number;
+    /**
+     * CSS class
+     */
+    class?: string;
+    /**
+     * Whether to animate the path using tweened interpolation.
+     */
+    motion?: MotionProp;
+};
+export type TrailProps = TrailPropsWithoutHTML & Omit<PathProps, keyof TrailPropsWithoutHTML | 'r'>;
+declare const Trail: import("svelte").Component<TrailProps, {}, "">;
+type Trail = ReturnType<typeof Trail>;
+export default Trail;