layerchart 2.0.0-next.60 → 2.0.0-next.62

package/dist/components/Threshold.svelte

@@ -1,75 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentProps, Snippet } from 'svelte';
-  import type { CurveFactory } from 'd3-shape';
-  export type ThresholdSnippetProps = {
-    curve?: CurveFactory;
-    defined?: ComponentProps<typeof Area>['defined'];
-  };
-
-  export type ThresholdProps = {
-    /**
-     * The curve factory to use for the area.
-     *
-     */
-    curve?: CurveFactory;
-
-    /**
-     * Function to determine if a point is defined.
-     *
-     */
-    defined?: ComponentProps<typeof Area>['defined'];
-
-    /**
-     * Content to render above the threshold area.
-     */
-    above?: Snippet<[ThresholdSnippetProps]>;
-
-    /**
-     * Content to render below the threshold area.
-     */
-    below?: Snippet<[ThresholdSnippetProps]>;
-
-    children?: Snippet<[ThresholdSnippetProps]>;
-  };
-</script>
-
-<script lang="ts">
-  /*
-    See also:
-      - https://observablehq.com/@d3/difference-chart
-      - https://github.com/airbnb/visx/issues/245
-  */
-
-  import { min, max } from 'd3-array';
-
-  import Area from './Area.svelte';
-  import ClipPath from './ClipPath.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>
-
-<!-- Recreate on curve change as otherwise is 1 state change behind for some reason -->
-{#key curve}
-  <ClipPath>
-    {#snippet clip()}
-      <Area y0={(d) => ctx.y(d)[1]} y1={(d) => max(ctx.yDomain)} {curve} {defined} />
-    {/snippet}
-    {@render above?.({ curve, defined })}
-  </ClipPath>
-
-  <ClipPath>
-    {#snippet clip()}
-      <Area y0={(d) => min(ctx.yDomain)} y1={(d) => ctx.y(d)[1]} {curve} {defined} />
-    {/snippet}
-
-    {@render below?.({ curve, defined })}
-  </ClipPath>
-
-  {@render children?.({ curve, defined })}
-{/key}

package/dist/components/Trail.svelte

@@ -1,268 +0,0 @@
-<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}
-  {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

@@ -1,88 +0,0 @@
-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;

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

@@ -1,109 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { SVGAttributes } from 'svelte/elements';
-import type { Without } from '../utils/types.js';
-import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
-import type { VectorAnchor } from '../utils/path.js';
-export type VectorShape = 'arrow' | 'arrow-filled' | 'spike';
-export type VectorPropsWithoutHTML = {
-    /**
-     * The x position of the vector.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via xScale
-     * - `function(d)`: accessor called per data item, result passed through xScale
-     *
-     * @default 0
-     */
-    x?: DataProp;
-    /**
-     * The initial x position (pixel mode only).
-     * @default x
-     */
-    initialX?: number;
-    /**
-     * The y position of the vector.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via yScale
-     * - `function(d)`: accessor called per data item, result passed through yScale
-     *
-     * @default 0
-     */
-    y?: DataProp;
-    /**
-     * The initial y position (pixel mode only).
-     * @default y
-     */
-    initialY?: number;
-    /**
-     * The length of the vector in pixels.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via rScale
-     * - `function(d)`: accessor called per data item, result passed through rScale
-     *
-     * @default 12
-     */
-    length?: DataProp;
-    /**
-     * The initial length of the vector (pixel mode only).
-     * @default length
-     */
-    initialLength?: number;
-    /**
-     * The rotation angle in degrees, clockwise from north (up).
-     * - `number`: direct degree value
-     * - `string`: data property name (raw value extracted, no scale)
-     * - `function(d)`: accessor called per data item (raw value, no scale)
-     *
-     * @default 0
-     */
-    rotate?: DataProp;
-    /**
-     * The shape of the vector.
-     * - `"arrow"`: a line with a V-shaped arrowhead at the tip (stroke-based)
-     * - `"arrow-filled"`: a solid arrow with a tapered tail and triangular arrowhead (fill-based)
-     * - `"spike"`: a thin filled triangle
-     *
-     * @default 'arrow'
-     */
-    shape?: VectorShape;
-    /**
-     * Where the position (x, y) is relative to the vector.
-     * - `"start"`: base of the vector is at the position
-     * - `"middle"`: center of the vector is at the position
-     * - `"end"`: tip of the vector is at the position
-     *
-     * Defaults to `"middle"` for arrow shape and `"start"` for spike shape.
-     */
-    anchor?: VectorAnchor;
-    /**
-     * Width of the vector shape in pixels (arrowhead wingspan or spike base).
-     * When not set, scales proportionally with length (~25% of length).
-     */
-    width?: number;
-    /**
-     * 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;
-    /** Motion configuration (pixel mode only). */
-    motion?: MotionProp;
-    /**
-     * Custom content to render inside the vector's positioned/rotated coordinate space.
-     * When provided, replaces the default shape rendering.
-     * The snippet receives `{ length, d }` where `d` is the data item (data mode only).
-     * Content is rendered at the origin, rotated so "up" (negative y) points in the vector direction.
-     */
-    children?: Snippet<[{
-        length: number;
-        d?: any;
-    }]>;
-} & DataDrivenStyleProps;
-export type VectorProps = VectorPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, VectorPropsWithoutHTML>;
-import { type MotionProp } from '../utils/motion.svelte.js';
-declare const Vector: import("svelte").Component<VectorProps, {}, "">;
-type Vector = ReturnType<typeof Vector>;
-export default Vector;

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

@@ -1,47 +0,0 @@
-import type { SVGAttributes } from 'svelte/elements';
-import type { CurveFactory } from 'd3-shape';
-import type { CommonStyleProps, CommonEvents, Without } from '../utils/types.js';
-import type { Accessor } from '../utils/common.js';
-export type ViolinPropsWithoutHTML = {
-    /** Data item containing violin data */
-    data: Object;
-    /**
-     * Pre-computed density data accessor. Should resolve to an array of `[value, density]` pairs.
-     * Use this when you want full control over the density estimation.
-     */
-    density?: Accessor;
-    /**
-     * Raw values accessor. If provided, KDE (kernel density estimation) is computed automatically.
-     * The accessor should resolve to an array of numbers.
-     */
-    values?: Accessor;
-    /** KDE bandwidth. Auto-computed via Silverman's rule of thumb if not specified. */
-    bandwidth?: number;
-    /** Number of evaluation points for KDE. @default 50 */
-    thresholds?: number;
-    /** Fixed width of the violin in pixels. Defaults to 80% of band scale bandwidth, or 40px. */
-    width?: number;
-    /** Curve interpolation for the violin shape. @default curveCardinal */
-    curve?: CurveFactory;
-    /**
-     * Show a median line inside the violin.
-     * Requires `values` prop to compute the median.
-     * @default false
-     */
-    median?: boolean;
-    /**
-     * Show an inner box (Q1-Q3 range) inside the violin.
-     * Pass `true` for defaults or `{ width: number }` to customize box width.
-     * Requires `values` prop to compute quartiles.
-     * @default false
-     */
-    box?: boolean | {
-        width?: number;
-    };
-    /** Setup pointer events to show tooltip for this data item. */
-    tooltip?: boolean;
-} & CommonStyleProps;
-export type ViolinProps = ViolinPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, ViolinPropsWithoutHTML> & CommonEvents;
-declare const Violin: import("svelte").Component<ViolinProps, {}, "">;
-type Violin = ReturnType<typeof Violin>;
-export default Violin;