layerchart 2.0.0-next.60 → 2.0.0-next.61

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.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;

package/dist/components/Voronoi.svelte

@@ -1,208 +0,0 @@
-<script lang="ts" module>
-  import type { Without } from '../utils/types.js';
-  import type { Accessor } from '../utils/common.js';
-
-  export type VoronoiPropsWithoutHTML = {
-    /**
-     * Override data instead of using context
-     */
-    data?: any;
-
-    /**
-     * Override the `x` accessor used to place each point. Useful when the
-     * chart's `x` accessor returns an array of values (e.g. `['start', 'end']`)
-     * and you want to use a specific one.
-     */
-    x?: Accessor;
-
-    /** Override the `y` accessor used to place each point. See `x` above. */
-    y?: Accessor;
-
-    /** Radius to clip voronoi cells.  `0` or `undefined` to disables clipping */
-    r?: number;
-
-    /**
-     * Classes to apply to the root and path elements
-     *
-     * @default = {}
-     */
-    classes?: {
-      root?: string;
-      path?: string;
-    };
-
-    onclick?: (
-      e: MouseEvent,
-      details: { data: any; point?: [number, number]; feature?: GeoPermissibleObjects }
-    ) => void;
-
-    onpointerenter?: (
-      e: PointerEvent,
-      details: {
-        data: any;
-        point?: [number, number];
-        feature?: GeoPermissibleObjects;
-      }
-    ) => void;
-    onpointermove?: (
-      e: PointerEvent,
-      details: {
-        data: any;
-        point?: [number, number];
-        feature?: GeoPermissibleObjects;
-      }
-    ) => void;
-    onpointerdown?: (
-      e: PointerEvent,
-      details: {
-        data: any;
-        point?: [number, number];
-        feature?: GeoPermissibleObjects;
-      }
-    ) => void;
-  };
-
-  export type VoronoiProps = VoronoiPropsWithoutHTML &
-    Without<Omit<GroupProps, 'children'>, VoronoiPropsWithoutHTML>;
-</script>
-
-<script lang="ts">
-  import { max } from 'd3-array';
-  import { Delaunay } from 'd3-delaunay';
-  import { type GeoPermissibleObjects } from 'd3-geo';
-  // @ts-expect-error
-  import { geoVoronoi } from 'd3-geo-voronoi';
-  import { pointRadial } from 'd3-shape';
-  import { cls } from '@layerstack/tailwind';
-
-  import GeoPath from './geo/GeoPath.svelte';
-  import Group, { type GroupProps } from './Group.svelte';
-  import Path from './Path.svelte';
-  import { getChartContext } from '../contexts/chart.js';
-  import { getGeoContext } from '../contexts/geo.js';
-  import { accessor } from '../utils/common.js';
-  import CircleClipPath from './CircleClipPath.svelte';
-
-  let {
-    data,
-    x: xProp,
-    y: yProp,
-    r,
-    classes = {},
-    onclick,
-    onpointerenter,
-    onpointerdown,
-    onpointermove,
-    class: className,
-    ...restProps
-  }: VoronoiProps = $props();
-
-  const ctx = getChartContext();
-  const geo = getGeoContext();
-
-  const xAccessorOverride = $derived(xProp != null ? accessor(xProp) : undefined);
-  const yAccessorOverride = $derived(yProp != null ? accessor(yProp) : undefined);
-
-  const points = $derived(
-    (data ?? ctx.flatData).map((d: any) => {
-      // geo voronoi needs raw latitude/longitude, not mapped to range (chart dimensions)
-      const xValue = xAccessorOverride
-        ? geo.projection
-          ? xAccessorOverride(d)
-          : ctx.xScale(xAccessorOverride(d))
-        : geo.projection
-          ? ctx.x(d)
-          : ctx.xGet(d);
-      const yValue = yAccessorOverride
-        ? geo.projection
-          ? yAccessorOverride(d)
-          : ctx.yScale(yAccessorOverride(d))
-        : geo.projection
-          ? ctx.y(d)
-          : ctx.yGet(d);
-
-      const x = Array.isArray(xValue) ? max(xValue) : xValue;
-      const y = Array.isArray(yValue) ? max(yValue) : yValue;
-
-      let point: [number, number];
-      if (ctx.radial) {
-        const radialPoint = pointRadial(x, y);
-        // Assume radial is also centered
-        point = [radialPoint[0] + ctx.width / 2, radialPoint[1] + ctx.height / 2];
-      } else {
-        point = [x, y];
-      }
-      // @ts-expect-error
-      point.data = d;
-      return point;
-    })
-  );
-
-  // Width and/or height can sometimes be negative (when loading data remotely and updately)
-  const boundWidth = $derived(Math.max(ctx.width, 0));
-  const boundHeight = $derived(Math.max(ctx.height, 0));
-
-  const disableClip = $derived(r === 0 || r == null || r === Infinity);
-</script>
-
-<Group {...restProps} class={cls('lc-voronoi-g', classes.root, className)}>
-  {#if geo.projection}
-    {@const polygons = geoVoronoi().polygons(points)}
-    {#each polygons.features as feature}
-      {@const point = r ? geo.projection?.(feature.properties.sitecoordinates) : null}
-      <CircleClipPath
-        cx={point?.[0]}
-        cy={point?.[1]}
-        r={r ?? 0}
-        disabled={point == null || disableClip}
-      >
-        <GeoPath
-          geojson={feature}
-          class={['lc-voronoi-geo-path', classes.path]}
-          onclick={(e) => onclick?.(e, { data: feature.properties.site.data, feature })}
-          onpointerenter={(e) =>
-            onpointerenter?.(e, { data: feature.properties.site.data, feature })}
-          onpointermove={(e) => onpointermove?.(e, { data: feature.properties.site.data, feature })}
-          onpointerdown={(e) => onpointerdown?.(e, { data: feature.properties.site.data, feature })}
-          {onpointerleave}
-          ontouchmove={(e) => {
-            // Prevent touch to not interfere with pointer
-            e.preventDefault();
-          }}
-        />
-      </CircleClipPath>
-    {/each}
-  {:else}
-    {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
-    {#each points as point, i}
-      {@const pathData = voronoi.renderCell(i)}
-      <!-- Wait to render Path until pathData is available to fix path artifacts from injected tweened points in Path  -->
-      {#if pathData}
-        <CircleClipPath cx={point[0]} cy={point[1]} r={r ?? 0} disabled={disableClip}>
-          <Path
-            {pathData}
-            class={['lc-voronoi-path', classes.path]}
-            onclick={(e) => onclick?.(e, { data: point.data, point })}
-            onpointerenter={(e) => onpointerenter?.(e, { data: point.data, point })}
-            onpointermove={(e) => onpointermove?.(e, { data: point.data, point })}
-            {onpointerleave}
-            onpointerdown={(e) => onpointerdown?.(e, { data: point.data, point })}
-            ontouchmove={(e) => {
-              // Prevent touch to not interfere with pointer
-              e.preventDefault();
-            }}
-          />
-        </CircleClipPath>
-      {/if}
-    {/each}
-  {/if}
-</Group>
-
-<style>
-  @layer components {
-    :global(:where(.lc-voronoi-path, .lc-voronoi-geo-path)) {
-      fill: transparent;
-      stroke: transparent;
-    }
-  }
-</style>

package/dist/components/geo/GeoCircle.svelte

@@ -1,37 +0,0 @@
-<script lang="ts" module>
-  import GeoPath, { type GeoPathProps } from './GeoPath.svelte';
-  import type { Without } from '../../utils/types.js';
-  export type GeoCirclePropsWithoutHTML = {
-    /**
-     * The radius of the circle in degrees.
-     * @default 90
-     */
-    radius?: number;
-
-    /**
-     * The center point of the circle in degrees ([longitude, latitude]).
-     * @default [0, 0]
-     */
-    center?: [number, number];
-
-    /**
-     * The precision of the circle in degrees.
-     * @default 6
-     */
-    precision?: number;
-  };
-
-  export type GeoCircleProps = GeoCirclePropsWithoutHTML &
-    Without<GeoPathProps, GeoCirclePropsWithoutHTML>;
-</script>
-
-<script lang="ts">
-  import { geoCircle } from 'd3-geo';
-  import { extractLayerProps } from '../../utils/attributes.js';
-
-  let { radius = 90, center = [0, 0], precision = 6, ...restProps }: GeoCircleProps = $props();
-
-  const geojson = $derived(geoCircle().radius(radius).center(center).precision(precision)());
-</script>
-
-<GeoPath {geojson} {...extractLayerProps(restProps, 'lc-geo-circle')} />

package/dist/components/geo/GeoCircle.svelte.d.ts

@@ -1,23 +0,0 @@
-import { type GeoPathProps } from './GeoPath.svelte';
-import type { Without } from '../../utils/types.js';
-export type GeoCirclePropsWithoutHTML = {
-    /**
-     * The radius of the circle in degrees.
-     * @default 90
-     */
-    radius?: number;
-    /**
-     * The center point of the circle in degrees ([longitude, latitude]).
-     * @default [0, 0]
-     */
-    center?: [number, number];
-    /**
-     * The precision of the circle in degrees.
-     * @default 6
-     */
-    precision?: number;
-};
-export type GeoCircleProps = GeoCirclePropsWithoutHTML & Without<GeoPathProps, GeoCirclePropsWithoutHTML>;
-declare const GeoCircle: import("svelte").Component<GeoCircleProps, {}, "">;
-type GeoCircle = ReturnType<typeof GeoCircle>;
-export default GeoCircle;

package/dist/components/geo/GeoClipPath.svelte

@@ -1,72 +0,0 @@
-<script lang="ts" module>
-  import type { GeoPermissibleObjects } from 'd3-geo';
-  import type { Snippet } from 'svelte';
-
-  import type { ClipPathPropsWithoutHTML } from '../ClipPath.svelte';
-  import type { GeoPathPropsWithoutHTML } from './GeoPath.svelte';
-  import type { Without } from '../../utils/types.js';
-
-  export type BaseGeoClipPathPropsWithoutHTML = {
-    /**
-     * A unique id for the clipPath.
-     */
-    id?: string;
-
-    /**
-     * GeoJSON data defining the clip boundary.
-     */
-    geojson: GeoPermissibleObjects;
-
-    /**
-     * Whether to disable clipping (show all).
-     *
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Invert the clip — content renders *outside* the geojson shape.
-     *
-     * @default false
-     */
-    invert?: boolean;
-
-    /**
-     * The children snippet to render content inside the clipPath.
-     */
-    children?: ClipPathPropsWithoutHTML['children'];
-  };
-
-  export type GeoClipPathPropsWithoutHTML = BaseGeoClipPathPropsWithoutHTML &
-    Without<GeoPathPropsWithoutHTML, BaseGeoClipPathPropsWithoutHTML>;
-
-  export type GeoClipPathProps = GeoClipPathPropsWithoutHTML;
-</script>
-
-<script lang="ts">
-  import { geoPath as d3GeoPath } from 'd3-geo';
-
-  import ClipPath from '../ClipPath.svelte';
-  import { createId } from '../../utils/createId.js';
-  import { getGeoContext } from '../../contexts/geo.js';
-
-  const uid = $props.id();
-
-  let {
-    id = createId('clipPath-', uid),
-    geojson,
-    disabled = false,
-    invert = false,
-    children,
-  }: GeoClipPathProps = $props();
-
-  const geo = getGeoContext();
-
-  // d3-geo-path emits an SVG path `d` string that Path2D and
-  // `clip-path: path()` also accept — single source of truth for all layers.
-  const path = $derived(
-    geo.projection && geojson ? (d3GeoPath(geo.projection)(geojson) ?? undefined) : undefined
-  );
-</script>
-
-<ClipPath {id} {disabled} {invert} {children} {path} />

package/dist/components/geo/GeoClipPath.svelte.d.ts

@@ -1,35 +0,0 @@
-import type { GeoPermissibleObjects } from 'd3-geo';
-import type { ClipPathPropsWithoutHTML } from '../ClipPath.svelte';
-import type { GeoPathPropsWithoutHTML } from './GeoPath.svelte';
-import type { Without } from '../../utils/types.js';
-export type BaseGeoClipPathPropsWithoutHTML = {
-    /**
-     * A unique id for the clipPath.
-     */
-    id?: string;
-    /**
-     * GeoJSON data defining the clip boundary.
-     */
-    geojson: GeoPermissibleObjects;
-    /**
-     * Whether to disable clipping (show all).
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Invert the clip — content renders *outside* the geojson shape.
-     *
-     * @default false
-     */
-    invert?: boolean;
-    /**
-     * The children snippet to render content inside the clipPath.
-     */
-    children?: ClipPathPropsWithoutHTML['children'];
-};
-export type GeoClipPathPropsWithoutHTML = BaseGeoClipPathPropsWithoutHTML & Without<GeoPathPropsWithoutHTML, BaseGeoClipPathPropsWithoutHTML>;
-export type GeoClipPathProps = GeoClipPathPropsWithoutHTML;
-declare const GeoClipPath: import("svelte").Component<GeoClipPathPropsWithoutHTML, {}, "">;
-type GeoClipPath = ReturnType<typeof GeoClipPath>;
-export default GeoClipPath;