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

package/dist/components/ArcLabel.svelte

@@ -1,259 +0,0 @@
-<script lang="ts" module>
-  import type { PathProps } from './Path.svelte';
-  import type { TextProps } from './Text.svelte';
-  import type { GetArcTextProps, ArcTextOptions } from '../utils/arcText.svelte.js';
-
-  /**
-   * Placement options for `ArcLabel`.
-   * - `centroid`: at the arc centroid (horizontal text)
-   * - `centroid-rotated`: at the arc centroid, rotated to follow the arc tangent
-   * - `centroid-radial`: at the arc centroid, rotated to read radially (center → outside)
-   * - `inner` / `middle` / `outer`: along the inner / middle / outer arc path
-   * - `callout`: outside the arc connected by a polyline with a bend
-   */
-  export type ArcLabelPlacement =
-    | 'centroid'
-    | 'centroid-rotated'
-    | 'centroid-radial'
-    | 'inner'
-    | 'middle'
-    | 'outer'
-    | 'callout';
-
-  export type ArcLabelConfig = {
-    /**
-     * The placement of the label.
-     * @default 'centroid'
-     */
-    placement?: ArcLabelPlacement;
-
-    /**
-     * Length of the radial portion of the callout leader line (from the outer
-     * arc edge outward to the bend point).
-     * @default 16
-     */
-    calloutLineLength?: number;
-
-    /**
-     * Length of the horizontal portion of the callout leader line after the
-     * bend before the label text.
-     * @default 12
-     */
-    calloutLabelOffset?: number;
-
-    /**
-     * Padding between the bend point on the leader line and the label text.
-     * @default 4
-     */
-    calloutPadding?: number;
-
-    /**
-     * Props applied to the leader line `<Path>` when using `callout` placement.
-     * Because `<Path>` is used (instead of a raw `<polyline>`), the leader line
-     * renders in SVG and Canvas chart layers alike.
-     */
-    line?: Omit<PathProps, 'pathData'>;
-
-    /**
-     * Radial offset for the label, interpreted per-placement:
-     * - `centroid` / `centroid-rotated` / `centroid-radial`: shifts the label
-     *   radially from the arc centroid (positive = outward).
-     * - `inner` / `middle` / `outer`: added to `outerPadding` (padding of the
-     *   arc path the text runs along).
-     * - `callout`: added to `calloutLineLength` (radial portion of the leader
-     *   line).
-     * @default 0
-     */
-    offset?: number;
-  } & ArcTextOptions &
-    Omit<TextProps, 'path'>;
-
-  export type ArcLabelProps = {
-    /**
-     * Function returned from the `Arc` children snippet used to position the
-     * label for `inner`, `middle`, `outer`, and `outer-radial` placements.
-     */
-    getArcTextProps?: GetArcTextProps;
-
-    /** Centroid `[x, y]` of the arc (from `Arc` children snippet) */
-    centroid?: [number, number];
-
-    /** Arc start angle in radians (from `Arc` children snippet) */
-    startAngle?: number;
-
-    /** Arc end angle in radians (from `Arc` children snippet) */
-    endAngle?: number;
-
-    /** Arc inner radius (from `Arc` children snippet) */
-    innerRadius?: number;
-
-    /** Arc outer radius (from `Arc` children snippet) */
-    outerRadius?: number;
-  } & ArcLabelConfig;
-</script>
-
-<script lang="ts">
-  import Path from './Path.svelte';
-  import Text from './Text.svelte';
-  import { radiansToDegrees } from '../utils/math.js';
-
-  let {
-    getArcTextProps,
-    centroid,
-    startAngle,
-    endAngle,
-    innerRadius,
-    outerRadius,
-    placement = 'centroid',
-    startOffset,
-    outerPadding,
-    calloutLineLength = 16,
-    calloutLabelOffset = 12,
-    calloutPadding = 4,
-    line,
-    offset = 0,
-    ...restProps
-  }: ArcLabelProps = $props();
-
-  const midAngle = $derived(
-    startAngle != null && endAngle != null ? (startAngle + endAngle) / 2 : 0
-  );
-
-  // Offset the centroid radially along the mid-angle direction.
-  // Used by the `centroid` / `centroid-rotated` / `centroid-radial` placements.
-  const offsetCentroid = $derived.by(() => {
-    if (!centroid) return centroid;
-    if (!offset || startAngle == null || endAngle == null) return centroid;
-    const angle = midAngle - Math.PI / 2;
-    return [centroid[0] + Math.cos(angle) * offset, centroid[1] + Math.sin(angle) * offset] as [
-      number,
-      number,
-    ];
-  });
-
-  // Route the shared `offset` to the placement-appropriate radial padding:
-  // - `outer`: outward from the outer edge (`outerPadding`)
-  // - `inner`: inward from the inner edge (`innerPadding`)
-  // - `middle`: both, so the middle path shifts by half in each direction
-  const effectiveOuterPadding = $derived.by(() => {
-    const base = outerPadding ?? 0;
-    if (placement === 'outer') return base + offset;
-    if (placement === 'middle') return base + offset;
-    return base;
-  });
-  const effectiveInnerPadding = $derived.by(() => {
-    if (placement === 'inner') return offset;
-    if (placement === 'middle') return offset;
-    return 0;
-  });
-  // `calloutLineLength` for `callout` placement gets the shared `offset` added
-  // on top of the default/explicit length.
-  const effectiveCalloutLineLength = $derived(calloutLineLength + offset);
-
-  // Rotation in degrees to apply to the text at the centroid.
-  // - `centroid-rotated`: follow the arc tangent direction
-  // - `centroid-radial`: read radially outward (center → outer edge)
-  const centroidRotation = $derived.by(() => {
-    if (startAngle == null || endAngle == null) return 0;
-    let deg = radiansToDegrees(midAngle);
-    if (placement === 'centroid-radial') {
-      // Rotate so text reads along the radial direction
-      deg = deg - 90;
-    } else if (placement !== 'centroid-rotated') {
-      return 0;
-    }
-    // Normalize to [-180, 180]
-    deg = ((deg + 180) % 360) - 180;
-    // Flip text on the side where it would be upside-down so it remains readable
-    if (deg > 90) deg -= 180;
-    else if (deg < -90) deg += 180;
-    return deg;
-  });
-
-  const calloutGeometry = $derived.by(() => {
-    if (placement !== 'callout' || startAngle == null || endAngle == null || outerRadius == null) {
-      return null;
-    }
-
-    // Match d3-shape arc convention: 0 radians = 12 o'clock, increasing clockwise.
-    const angle = midAngle - Math.PI / 2;
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-
-    // Point on the outer arc edge at the mid-angle
-    const x0 = cos * outerRadius;
-    const y0 = sin * outerRadius;
-
-    // Bend point: extend radially outward from the edge
-    const bendRadius = outerRadius + effectiveCalloutLineLength;
-    const x1 = cos * bendRadius;
-    const y1 = sin * bendRadius;
-
-    // Label point: extend horizontally toward the chart side the arc lives on
-    const onRightSide = cos >= 0;
-    const x2 = x1 + (onRightSide ? calloutLabelOffset : -calloutLabelOffset);
-    const y2 = y1;
-
-    return {
-      pathData: `M${x0},${y0}L${x1},${y1}L${x2},${y2}`,
-      labelX: x2 + (onRightSide ? calloutPadding : -calloutPadding),
-      labelY: y2,
-      textAnchor: (onRightSide ? 'start' : 'end') as 'start' | 'end',
-    };
-  });
-
-  const arcTextProps = $derived.by(() => {
-    if (placement === 'centroid') {
-      if (offsetCentroid) {
-        return {
-          x: offsetCentroid[0],
-          y: offsetCentroid[1],
-          textAnchor: 'middle' as const,
-          verticalAnchor: 'middle' as const,
-        };
-      }
-      return getArcTextProps?.('centroid', { startOffset, outerPadding }) ?? {};
-    }
-
-    if (placement === 'centroid-rotated' || placement === 'centroid-radial') {
-      if (offsetCentroid) {
-        return {
-          x: offsetCentroid[0],
-          y: offsetCentroid[1],
-          textAnchor: 'middle' as const,
-          verticalAnchor: 'middle' as const,
-          rotate: centroidRotation,
-        };
-      }
-      return getArcTextProps?.('centroid', { startOffset, outerPadding }) ?? {};
-    }
-
-    if (placement === 'callout') {
-      const g = calloutGeometry;
-      if (g) {
-        return {
-          x: g.labelX,
-          y: g.labelY,
-          textAnchor: g.textAnchor,
-          verticalAnchor: 'middle' as const,
-        };
-      }
-      return {};
-    }
-
-    // inner / middle / outer
-    return (
-      getArcTextProps?.(placement, {
-        startOffset,
-        outerPadding: effectiveOuterPadding,
-        innerPadding: effectiveInnerPadding,
-      }) ?? {}
-    );
-  });
-</script>
-
-{#if placement === 'callout' && calloutGeometry}
-  <Path pathData={calloutGeometry.pathData} {...line} />
-{/if}
-
-<Text {...arcTextProps} {...restProps} />

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

@@ -1,73 +0,0 @@
-import type { PathProps } from './Path.svelte';
-import type { TextProps } from './Text.svelte';
-import type { GetArcTextProps, ArcTextOptions } from '../utils/arcText.svelte.js';
-/**
- * Placement options for `ArcLabel`.
- * - `centroid`: at the arc centroid (horizontal text)
- * - `centroid-rotated`: at the arc centroid, rotated to follow the arc tangent
- * - `centroid-radial`: at the arc centroid, rotated to read radially (center → outside)
- * - `inner` / `middle` / `outer`: along the inner / middle / outer arc path
- * - `callout`: outside the arc connected by a polyline with a bend
- */
-export type ArcLabelPlacement = 'centroid' | 'centroid-rotated' | 'centroid-radial' | 'inner' | 'middle' | 'outer' | 'callout';
-export type ArcLabelConfig = {
-    /**
-     * The placement of the label.
-     * @default 'centroid'
-     */
-    placement?: ArcLabelPlacement;
-    /**
-     * Length of the radial portion of the callout leader line (from the outer
-     * arc edge outward to the bend point).
-     * @default 16
-     */
-    calloutLineLength?: number;
-    /**
-     * Length of the horizontal portion of the callout leader line after the
-     * bend before the label text.
-     * @default 12
-     */
-    calloutLabelOffset?: number;
-    /**
-     * Padding between the bend point on the leader line and the label text.
-     * @default 4
-     */
-    calloutPadding?: number;
-    /**
-     * Props applied to the leader line `<Path>` when using `callout` placement.
-     * Because `<Path>` is used (instead of a raw `<polyline>`), the leader line
-     * renders in SVG and Canvas chart layers alike.
-     */
-    line?: Omit<PathProps, 'pathData'>;
-    /**
-     * Radial offset for the label, interpreted per-placement:
-     * - `centroid` / `centroid-rotated` / `centroid-radial`: shifts the label
-     *   radially from the arc centroid (positive = outward).
-     * - `inner` / `middle` / `outer`: added to `outerPadding` (padding of the
-     *   arc path the text runs along).
-     * - `callout`: added to `calloutLineLength` (radial portion of the leader
-     *   line).
-     * @default 0
-     */
-    offset?: number;
-} & ArcTextOptions & Omit<TextProps, 'path'>;
-export type ArcLabelProps = {
-    /**
-     * Function returned from the `Arc` children snippet used to position the
-     * label for `inner`, `middle`, `outer`, and `outer-radial` placements.
-     */
-    getArcTextProps?: GetArcTextProps;
-    /** Centroid `[x, y]` of the arc (from `Arc` children snippet) */
-    centroid?: [number, number];
-    /** Arc start angle in radians (from `Arc` children snippet) */
-    startAngle?: number;
-    /** Arc end angle in radians (from `Arc` children snippet) */
-    endAngle?: number;
-    /** Arc inner radius (from `Arc` children snippet) */
-    innerRadius?: number;
-    /** Arc outer radius (from `Arc` children snippet) */
-    outerRadius?: number;
-} & ArcLabelConfig;
-declare const ArcLabel: import("svelte").Component<ArcLabelProps, {}, "">;
-type ArcLabel = ReturnType<typeof ArcLabel>;
-export default ArcLabel;

package/dist/components/Area.svelte

@@ -1,251 +0,0 @@
-<script lang="ts" module>
-  import { type Area as D3Area, area as d3Area, areaRadial } from 'd3-shape';
-  import type { SVGAttributes } from 'svelte/elements';
-  import type { CommonStyleProps, Without } from '../utils/types.js';
-  import type { ComponentProps } from 'svelte';
-  import { accessor, type Accessor } from '../utils/common.js';
-
-  export type AreaPropsWithoutHTML = {
-    /** Override data instead of using context */
-    data?: any;
-
-    /**
-     * Pass `<path d={...} />` explicitly instead of calculating from data / context
-     */
-    pathData?: string | null;
-
-    /**
-     * Override x accessor
-     */
-    x?: Accessor;
-
-    /**
-     * Override y0 accessor. Defaults to max($yRange)
-     */
-    y0?: Accessor;
-
-    /**
-     * 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;
-
-    curve?: CurveFactory;
-
-    defined?: Parameters<D3Area<any>['defined']>[0];
-
-    /**
-     * Enable showing line
-     *
-     * @default false
-     */
-    line?: boolean | Partial<ComponentProps<typeof Spline>>;
-  } & Omit<PathProps, 'x' | 'y' | 'y0' | 'y1'>;
-
-  export type AreaProps = AreaPropsWithoutHTML &
-    Without<SVGAttributes<SVGPathElement>, AreaPropsWithoutHTML>;
-</script>
-
-<script lang="ts">
-  import type { CurveFactory } from 'd3-shape';
-  import { min } from 'd3-array';
-  import { interpolatePath } from 'd3-interpolate-path';
-
-  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 { getChartContext } from '../contexts/chart.js';
-  import {
-    createMotion,
-    extractTweenConfig,
-    type MotionProp,
-    type ResolvedMotion,
-  } from '../utils/motion.svelte.js';
-  import { extractLayerProps } from '../utils/attributes.js';
-
-  const ctx = getChartContext();
-
-  let {
-    curve,
-    data,
-    defined,
-    fill,
-    stroke = 'none',
-    line = false,
-    pathData,
-    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);
-  // 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);
-
-  const extractedTween = extractTweenConfig(motion);
-
-  const tweenOptions: ResolvedMotion | undefined = extractedTween
-    ? {
-        type: extractedTween.type,
-        options: {
-          interpolate: interpolatePath,
-          ...extractedTween.options,
-        },
-      }
-    : undefined;
-
-  /**
-   * Provide initial `0` horizontal baseline and initially hide/untrack scale changes so not
-   * reactive (only set on initial mount)
-   */
-  function defaultPathData() {
-    if (!tweenOptions) {
-      // If not tweened, return empty string (faster initial render)
-      return '';
-    } else if (pathData) {
-      // Flatten all `y` coordinates of pre-defined `pathData`
-      return flattenPathData(pathData, Math.min(ctx.yScale(0), ctx.yRange[0]));
-    } else if (ctx.config.x) {
-      // Only use default line if `x` accessor is defined (cartesian chart)
-      const path = ctx.radial
-        ? areaRadial()
-            .angle((d) => ctx.xScale(xAccessor(d)))
-            .innerRadius(() => Math.min(ctx.yScale(0), ctx.yRange[0]))
-            .outerRadius(() => Math.min(ctx.yScale(0), ctx.yRange[0]))
-        : d3Area()
-            .x((d) => ctx.xScale(xAccessor(d)) + xOffset)
-            .y0(() => Math.min(ctx.yScale(0), ctx.yRange[0]))
-            .y1(() => Math.min(ctx.yScale(0), ctx.yRange[0]));
-
-      path.defined(defined ?? ((d) => xAccessor(d) != null && y1Accessor(d) != null));
-
-      if (curve) path.curve(curve);
-
-      // TODO: type this appropriately otherwise we will have bugs in the future
-      return path(resolvedData);
-    }
-  }
-
-  const d = $derived.by(() => {
-    const _path = ctx.radial
-      ? areaRadial()
-          .angle((d) => ctx.xScale(xAccessor(d)))
-          .innerRadius((d) => ctx.yScale(y0Accessor(d)))
-          .outerRadius((d) => ctx.yScale(y1Accessor(d)))
-      : d3Area()
-          .x((d) => {
-            const v = xAccessor(d);
-            return ctx.xScale(v) + xOffset;
-          })
-          .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(resolvedData) ?? defaultPathData();
-  });
-
-  const tweenState = createMotion(defaultPathData(), () => d, tweenOptions);
-
-  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;
-      }
-    }
-
-    return y1 || stackAccessors || Array.isArray(seriesAccessor) || seriesAccessor
-      ? y1Accessor
-      : undefined;
-  });
-</script>
-
-{#if line}
-  <Spline
-    data={data ?? seriesData}
-    {x}
-    y={lineYAccessor}
-    {seriesKey}
-    {curve}
-    {defined}
-    {motion}
-    {...extractLayerProps(line, 'lc-area-line')}
-  />
-{/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,49 +0,0 @@
-import { type Area as D3Area } from 'd3-shape';
-import type { SVGAttributes } from 'svelte/elements';
-import type { Without } from '../utils/types.js';
-import type { ComponentProps } from 'svelte';
-import { type Accessor } from '../utils/common.js';
-export type AreaPropsWithoutHTML = {
-    /** Override data instead of using context */
-    data?: any;
-    /**
-     * Pass `<path d={...} />` explicitly instead of calculating from data / context
-     */
-    pathData?: string | null;
-    /**
-     * Override x accessor
-     */
-    x?: Accessor;
-    /**
-     * Override y0 accessor. Defaults to max($yRange)
-     */
-    y0?: Accessor;
-    /**
-     * 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;
-    curve?: CurveFactory;
-    defined?: Parameters<D3Area<any>['defined']>[0];
-    /**
-     * Enable showing line
-     *
-     * @default false
-     */
-    line?: boolean | Partial<ComponentProps<typeof Spline>>;
-} & 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>;
-export default Area;