layerchart 2.0.0-next.6 → 2.0.0-next.60

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

@@ -3,10 +3,18 @@ import type { SVGAttributes } from 'svelte/elements';
 import type { CommonStyleProps, Without } from '../utils/types.js';
 import type { SingleDomainType } from '../utils/scales.svelte.js';
 export type AnnotationLinePropsWithoutHTML = {
-    /** x value of the point */
+    /** x value of the line (draws vertically across the full y range) */
     x?: SingleDomainType;
-    /** y value of the point */
+    /** y value of the line (draws horizontally across the full x range) */
     y?: SingleDomainType;
+    /** x value of the line's start point. Takes precedence over `x`. Defaults to the start of the x range. */
+    x1?: SingleDomainType;
+    /** y value of the line's start point. Takes precedence over `y`. Defaults to the start of the y range. */
+    y1?: SingleDomainType;
+    /** x value of the line's end point. Takes precedence over `x`. Defaults to the end of the x range. */
+    x2?: SingleDomainType;
+    /** y value of the line's end point. Takes precedence over `y`. Defaults to the end of the y range. */
+    y2?: SingleDomainType;
     /** Label to display for line*/
     label?: string;
     /** Placement of the label */

package/dist/components/AnnotationPoint.svelte

@@ -14,7 +14,7 @@
     /** Radius of the circle */
     r?: number;
 
-    /** Label to display on circle*/
+    /** Label to display on circle */
     label?: string;
 
     /** Placement of the label */
@@ -26,6 +26,13 @@
     /** Y offset of the label */
     labelYOffset?: number;
 
+    /**
+     * Draw a `<Link>` from the ring edge to the label (d3-ring-note style).
+     * Pass `true` for a straight line, or an object to configure the `Link`
+     * (e.g. `{ type: 'beveled', radius: 20 }`).
+     */
+    link?: boolean | Partial<ComponentProps<typeof Link>>;
+
     /** Details (description, etc) useful to display in tooltip */
     details?: any;
 
@@ -41,8 +48,10 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
   import Circle from './Circle.svelte';
+  import Link from './Link.svelte';
   import Text from './Text.svelte';
   import type { Placement } from './types.js';
 
@@ -56,64 +65,141 @@
     labelPlacement = 'center',
     labelXOffset = 0,
     labelYOffset = 0,
+    link,
     details,
     props,
   }: AnnotationPointProps = $props();
 
   const ctx = getChartContext();
+  const geo = getGeoContext();
 
-  const point = $derived({
-    x: x ? ctx.xScale(x) + (isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0) : 0,
-    y: y ? ctx.yScale(y) + (isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0) : ctx.height,
+  const point = $derived.by(() => {
+    // Inside a geo chart, interpret `x`/`y` as `[lon, lat]` and project directly.
+    if (geo.projection && typeof x === 'number' && typeof y === 'number') {
+      const [px, py] = geo.projection([x, y]) ?? [0, 0];
+      return { x: px, y: py };
+    }
+    return {
+      x: x ? ctx.xScale(x) + (isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0) : 0,
+      y: y
+        ? ctx.yScale(y) + (isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0)
+        : ctx.height,
+    };
   });
 
-  const labelProps = $derived<ComponentProps<typeof Text>>({
-    x:
-      point.x +
-      ((['top', 'center', 'bottom'].includes(labelPlacement) ? 0 : r) + labelXOffset) *
-        (labelPlacement.includes('left') ? -1 : 1),
-    y:
-      point.y +
-      ((['left', 'center', 'right'].includes(labelPlacement) ? 0 : r) + labelYOffset) *
-        (labelPlacement.includes('top') ? -1 : 1),
-    dy: -2, // adjust for smaler font size
-    textAnchor: labelPlacement.includes('left')
-      ? 'end'
-      : labelPlacement.includes('right')
-        ? 'start'
-        : 'middle',
-    verticalAnchor: labelPlacement.includes('top')
-      ? 'end'
-      : labelPlacement.includes('bottom')
-        ? 'start'
-        : 'middle',
+  const labelProps = $derived.by<ComponentProps<typeof Text>>(() => {
+    // Unit vector from the ring center toward the placement direction — diagonals
+    // land on the ring at 45°, not at the bounding-box corner.
+    const dirX = labelPlacement.includes('left') ? -1 : labelPlacement.includes('right') ? 1 : 0;
+    const dirY = labelPlacement.includes('top') ? -1 : labelPlacement.includes('bottom') ? 1 : 0;
+    const mag = Math.hypot(dirX, dirY) || 1;
+    const signX = labelPlacement.includes('left') ? -1 : 1;
+    const signY = labelPlacement.includes('top') ? -1 : 1;
+
+    return {
+      x: point.x + (r * dirX) / mag + labelXOffset * signX,
+      y: point.y + (r * dirY) / mag + labelYOffset * signY,
+      dy: -2, // adjust for smaller font size
+      textAnchor: labelPlacement.includes('left')
+        ? 'end'
+        : labelPlacement.includes('right')
+          ? 'start'
+          : 'middle',
+      verticalAnchor: labelPlacement.includes('top')
+        ? 'end'
+        : labelPlacement.includes('bottom')
+          ? 'start'
+          : 'middle',
+    };
   });
-</script>
 
-<Circle
-  cx={point.x}
-  cy={point.y}
-  {r}
-  onpointermove={(e) => {
+  // Endpoints for the optional leader `<Link>`. Source sits on the ring edge in
+  // the direction dictated by `labelPlacement` — offsets don't rotate it.
+  const linkEndpoints = $derived.by(() => {
+    if (!link) return null;
+
+    const dirX = labelPlacement.includes('left') ? -1 : labelPlacement.includes('right') ? 1 : 0;
+    const dirY = labelPlacement.includes('top') ? -1 : labelPlacement.includes('bottom') ? 1 : 0;
+    if (dirX === 0 && dirY === 0) return null; // labelPlacement='center' — no line
+
+    const mag = Math.hypot(dirX, dirY);
+    return {
+      source: { x: point.x + (r * dirX) / mag, y: point.y + (r * dirY) / mag },
+      target: { x: labelProps.x as number, y: labelProps.y as number },
+    };
+  });
+
+  const linkProps = $derived(typeof link === 'object' ? link : {});
+
+  function onPointerMove(e: PointerEvent | MouseEvent | TouchEvent) {
     if (details) {
       e.stopPropagation();
       ctx.tooltip.show(e, { annotation: { label, details } });
     }
-  }}
-  onpointerleave={() => {
+  }
+
+  function onPointerLeave(e: PointerEvent | MouseEvent | TouchEvent) {
     if (details) {
+      e.stopPropagation();
       ctx.tooltip.hide();
     }
-  }}
+  }
+</script>
+
+<Circle
+  cx={point.x}
+  cy={point.y}
+  {r}
+  onpointermove={onPointerMove}
+  onmousemove={onPointerMove}
+  ontouchmove={onPointerMove}
+  onpointerleave={onPointerLeave}
+  onmouseleave={onPointerLeave}
+  ontouchend={onPointerLeave}
   {...props?.circle}
-  class={cls('stroke-surface-100', props?.circle?.class)}
+  class={cls('lc-annotation-point', link && 'lc-annotation-point-ring', props?.circle?.class)}
 />
 
+{#if linkEndpoints}
+  <Link
+    x1={linkEndpoints.source.x}
+    y1={linkEndpoints.source.y}
+    x2={linkEndpoints.target.x}
+    y2={linkEndpoints.target.y}
+    type="straight"
+    {...linkProps}
+    class={cls(
+      'lc-annotation-point-link',
+      typeof linkProps.class === 'string' ? linkProps.class : undefined
+    )}
+  />
+{/if}
+
 {#if label}
   <Text
     value={label}
     {...labelProps}
     {...props?.label}
-    class={cls('text-xs pointer-events-none', props?.label?.class)}
+    class={cls('lc-annotation-point-label', props?.label?.class)}
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-annotation-point-label)) {
+      font-size: 12px;
+      pointer-events: none;
+    }
+
+    :global(:where(.lc-annotation-point-ring)) {
+      --fill-color: none;
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    :global(:where(.lc-annotation-point-link)) {
+      --stroke-color: var(--color-surface-content, currentColor);
+      fill: none;
+      pointer-events: none;
+    }
+  }
+</style>

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

@@ -9,7 +9,7 @@ export type AnnotationPointPropsWithoutHTML = {
     y?: SingleDomainType;
     /** Radius of the circle */
     r?: number;
-    /** Label to display on circle*/
+    /** Label to display on circle */
     label?: string;
     /** Placement of the label */
     labelPlacement?: Placement;
@@ -17,6 +17,12 @@ export type AnnotationPointPropsWithoutHTML = {
     labelXOffset?: number;
     /** Y offset of the label */
     labelYOffset?: number;
+    /**
+     * Draw a `<Link>` from the ring edge to the label (d3-ring-note style).
+     * Pass `true` for a straight line, or an object to configure the `Link`
+     * (e.g. `{ type: 'beveled', radius: 20 }`).
+     */
+    link?: boolean | Partial<ComponentProps<typeof Link>>;
     /** Details (description, etc) useful to display in tooltip */
     details?: any;
     /** Classes for inner elements */
@@ -27,6 +33,7 @@ export type AnnotationPointPropsWithoutHTML = {
 } & CommonStyleProps;
 export type AnnotationPointProps = AnnotationPointPropsWithoutHTML & Without<SVGAttributes<Element>, AnnotationPointPropsWithoutHTML>;
 import Circle from './Circle.svelte';
+import Link from './Link.svelte';
 import Text from './Text.svelte';
 import type { Placement } from './types.js';
 declare const AnnotationPoint: import("svelte").Component<AnnotationPointProps, {}, "">;

package/dist/components/AnnotationRange.svelte

@@ -47,7 +47,7 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import LinearGradient from './LinearGradient.svelte';
   import Pattern from './Pattern.svelte';
   import Rect from './Rect.svelte';
@@ -72,20 +72,34 @@
 
   const ctx = getChartContext();
 
-  const rect = $derived<ComponentProps<typeof Rect>>({
-    x: x
-      ? ctx.xScale(x[0] ?? ctx.xDomain[0]) -
-        (isScaleBand(ctx.xScale) ? (ctx.xScale.padding() * ctx.xScale.step()) / 2 : 0)
-      : ctx.xRange[0],
-    y: y ? ctx.yScale(y[1] ?? ctx.yDomain[1]) : ctx.yRange[1],
-    width: x
-      ? ctx.xScale(x[1] ?? ctx.xDomain[1]) -
-        ctx.xScale(x[0] ?? ctx.xDomain[0]) +
-        (isScaleBand(ctx.xScale) ? ctx.xScale.step() : 0)
-      : ctx.width,
-    height: y
-      ? ctx.yScale(y[0] ?? ctx.yDomain[0]) - ctx.yScale(y[1] ?? ctx.yDomain[1])
-      : ctx.height,
+  const rect = $derived.by(() => {
+    // `null`/`undefined` on either side means "extend to chart edge" (xRange/yRange).
+    // Tracked so band adjustments only apply to endpoints derived from the band scale,
+    // not to the xRange fallback (which already contains the full pixel extent).
+    const x0FromScale = x?.[0] != null;
+    const x1FromScale = x?.[1] != null;
+    const x0 = x0FromScale ? ctx.xScale(x![0]) : ctx.xRange[0];
+    const x1 = x1FromScale ? ctx.xScale(x![1]) : ctx.xRange[1];
+    const y0 = y?.[0] != null ? ctx.yScale(y[0]) : ctx.yRange[0];
+    const y1 = y?.[1] != null ? ctx.yScale(y[1]) : ctx.yRange[1];
+
+    const bandPadding = isScaleBand(ctx.xScale)
+      ? (ctx.xScale.padding() * ctx.xScale.step()) / 2
+      : 0;
+    const bandStep = isScaleBand(ctx.xScale) ? ctx.xScale.step() : 0;
+
+    const leftFromScale = x0 <= x1 ? x0FromScale : x1FromScale;
+    const rightFromScale = x0 <= x1 ? x1FromScale : x0FromScale;
+
+    const left = Math.min(x0, x1) - (leftFromScale ? bandPadding : 0);
+    const right = Math.max(x0, x1) + (rightFromScale ? bandStep - bandPadding : 0);
+
+    return {
+      x: left,
+      y: Math.min(y0, y1),
+      width: right - left,
+      height: Math.abs(y1 - y0),
+    } satisfies ComponentProps<typeof Rect>;
   });
 
   const labelProps = $derived<ComponentProps<typeof Text>>({
@@ -118,7 +132,12 @@
 </script>
 
 {#if fill || className}
-  <Rect {...rect} {...props?.rect} {fill} class={cls(props?.rect?.class, className)} />
+  <Rect
+    {...rect}
+    {...props?.rect}
+    {fill}
+    class={cls('lc-annotation-range', props?.rect?.class, className)}
+  />
 {/if}
 
 {#if gradient}
@@ -142,6 +161,15 @@
     value={label}
     {...labelProps}
     {...props?.label}
-    class={cls('text-xs pointer-events-none', props?.label?.class)}
+    class={cls('lc-annotation-range-label', props?.label?.class)}
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-annotation-range-label)) {
+      font-size: 12px;
+      pointer-events: none;
+    }
+  }
+</style>

package/dist/components/Arc.svelte

@@ -2,8 +2,7 @@
   import type { ComponentProps, Snippet } from 'svelte';
   import type { PointerEventHandler, SVGAttributes } from 'svelte/elements';
 
-  import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
-  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+  import Path, { type PathPropsWithoutHTML } from './Path.svelte';
   import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
   import type { CommonStyleProps, Without } from '../utils/types.js';
 
@@ -113,11 +112,11 @@
     offset?: number;
 
     /**
-     * Tooltip context to setup pointer events to show tooltip for related data.
+     * Setup pointer events to show tooltip for related data.
      *
      * **Must set `data` prop as well**
      */
-    tooltipContext?: TooltipContextValue;
+    tooltip?: boolean;
 
     /**
      * Data to set when showing tooltip
@@ -128,7 +127,7 @@
      * Pass true to enable the track with default props, or pass an object
      * of props to enable the track.
      */
-    track?: boolean | Partial<ComponentProps<typeof Spline>>;
+    track?: boolean | Partial<ComponentProps<typeof Path>>;
 
     /**
      * A reference to the track element
@@ -150,6 +149,10 @@
           centroid: [number, number];
           boundingBox: DOMRect;
           value: number;
+          startAngle: number;
+          endAngle: number;
+          innerRadius: number;
+          outerRadius: number;
           getTrackTextProps: GetArcTextProps;
           getArcTextProps: GetArcTextProps;
         },
@@ -160,9 +163,9 @@
   } & CommonStyleProps;
 
   export type ArcProps = ArcPropsWithoutHTML &
-    // we omit the spline props to avoid conflicts with attribute names since we are
-    // passing them through to `<Spline />`
-    Without<SVGAttributes<SVGPathElement>, ArcPropsWithoutHTML & SplinePropsWithoutHTML>;
+    // we omit the path props to avoid conflicts with attribute names since we are
+    // passing them through to `<Path />`
+    Without<SVGAttributes<SVGPathElement>, ArcPropsWithoutHTML & PathPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -188,8 +191,8 @@
   import { scaleLinear } from 'd3-scale';
 
   import { degreesToRadians } from '../utils/math.js';
-  import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { cls } from '@layerstack/tailwind';
   import { max } from 'd3-array';
   import {
@@ -230,7 +233,7 @@
     onpointermove = () => {},
     onpointerleave = () => {},
     ontouchmove = () => {},
-    tooltipContext,
+    tooltip,
     track = false,
     children,
     class: className,
@@ -251,7 +254,8 @@
   const ctx = getChartContext();
 
   const endAngle = $derived(
-    endAngleProp ?? degreesToRadians(ctx.config.xRange ? max(ctx.xRange) : max(range))
+    endAngleProp ??
+      degreesToRadians((ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!)
   );
 
   const motionEndAngle = createMotion(initialValue, () => value, motion);
@@ -276,13 +280,11 @@
     }
   }
 
-  const outerRadius = $derived(
-    getOuterRadius(outerRadiusProp, (Math.min(ctx.xRange[1], ctx.yRange[0]) ?? 0) / 2)
-  );
+  const chartRadius = $derived((Math.min(ctx.width, ctx.height) ?? 0) / 2);
+
+  const outerRadius = $derived(getOuterRadius(outerRadiusProp, chartRadius));
   const trackOuterRadius = $derived(
-    trackOuterRadiusProp
-      ? getOuterRadius(trackOuterRadiusProp, (Math.min(ctx.xRange[1], ctx.yRange[0]) ?? 0) / 2)
-      : outerRadius
+    trackOuterRadiusProp ? getOuterRadius(trackOuterRadiusProp, chartRadius) : outerRadius
   );
 
   function getInnerRadius(innerRadius: number | undefined, outerRadius: number) {
@@ -353,17 +355,17 @@
 
   const onPointerEnter: PointerEventHandler<SVGPathElement> = (e) => {
     onpointerenter?.(e);
-    tooltipContext?.show(e, data);
+    if (tooltip) ctx.tooltip.show(e, data);
   };
 
   const onPointerMove: PointerEventHandler<SVGPathElement> = (e) => {
     onpointermove?.(e);
-    tooltipContext?.show(e, data);
+    if (tooltip) ctx.tooltip.show(e, data);
   };
 
   const onPointerLeave: PointerEventHandler<SVGPathElement> = (e) => {
     onpointerleave?.(e);
-    tooltipContext?.hide();
+    if (tooltip) ctx.tooltip.hide();
   };
 
   function getTrackTextProps(position: ArcTextPosition, opts: ArcTextOptions = {}) {
@@ -371,8 +373,8 @@
       {
         startAngle: () => trackStartAngle,
         endAngle: () => trackEndAngle,
-        outerRadius: () => trackOuterRadius + (opts.outerPadding ? opts.outerPadding : 0),
-        innerRadius: () => trackInnerRadius,
+        outerRadius: () => trackOuterRadius + (opts.outerPadding ?? 0),
+        innerRadius: () => trackInnerRadius - (opts.innerPadding ?? 0),
         cornerRadius: () => trackCornerRadius,
         centroid: () => trackArcCentroid,
       },
@@ -386,8 +388,8 @@
       {
         startAngle: () => startAngle,
         endAngle: () => arcEndAngle,
-        outerRadius: () => outerRadius + (opts.outerPadding ? opts.outerPadding : 0),
-        innerRadius: () => innerRadius,
+        outerRadius: () => outerRadius + (opts.outerPadding ?? 0),
+        innerRadius: () => innerRadius - (opts.innerPadding ?? 0),
         cornerRadius: () => cornerRadius,
         centroid: () => trackArcCentroid,
       },
@@ -398,33 +400,34 @@
 </script>
 
 {#if track}
-  <Spline
+  <Path
     pathData={trackArc()}
     stroke="none"
-    bind:splineRef={trackRef}
-    {...extractLayerProps(track, 'arc-track')}
+    bind:pathRef={trackRef}
+    {...extractLayerProps(track, 'lc-arc-track')}
   />
 {/if}
 
-<Spline
-  bind:splineRef={ref}
+<Path
+  bind:pathRef={ref}
   pathData={arc()}
   transform="translate({xOffset}, {yOffset})"
   {fill}
   {fillOpacity}
   {stroke}
-  stroke-width={strokeWidth}
+  {strokeWidth}
   {opacity}
   {...restProps}
-  class={cls(layerClass('arc-line'), className)}
+  class={cls('lc-arc-line', className)}
   onpointerenter={onPointerEnter}
   onpointermove={onPointerMove}
   onpointerleave={onPointerLeave}
   ontouchmove={(e) => {
     ontouchmove?.(e);
-    if (!tooltipContext) return;
-    // Prevent touch to not interfere with pointer when using tooltip
-    e.preventDefault();
+    if (tooltip) {
+      // Prevent touch to not interfere with pointer when using tooltip
+      e.preventDefault();
+    }
   }}
 />
 
@@ -432,6 +435,10 @@
   centroid: trackArcCentroid,
   boundingBox,
   value: motionEndAngle.current,
+  startAngle,
+  endAngle: arcEndAngle,
+  innerRadius,
+  outerRadius,
   getTrackTextProps: getTrackTextProps,
   getArcTextProps: getArcTextProps,
 })}

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

@@ -1,7 +1,6 @@
 import type { ComponentProps, Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
-import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
-import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+import Path, { type PathPropsWithoutHTML } from './Path.svelte';
 import { type MotionProp } from '../utils/motion.svelte.js';
 import type { CommonStyleProps, Without } from '../utils/types.js';
 export type ArcPropsWithoutHTML = {
@@ -94,11 +93,11 @@ export type ArcPropsWithoutHTML = {
      */
     offset?: number;
     /**
-     * Tooltip context to setup pointer events to show tooltip for related data.
+     * Setup pointer events to show tooltip for related data.
      *
      * **Must set `data` prop as well**
      */
-    tooltipContext?: TooltipContextValue;
+    tooltip?: boolean;
     /**
      * Data to set when showing tooltip
      */
@@ -107,7 +106,7 @@ export type ArcPropsWithoutHTML = {
      * Pass true to enable the track with default props, or pass an object
      * of props to enable the track.
      */
-    track?: boolean | Partial<ComponentProps<typeof Spline>>;
+    track?: boolean | Partial<ComponentProps<typeof Path>>;
     /**
      * A reference to the track element
      *
@@ -125,13 +124,17 @@ export type ArcPropsWithoutHTML = {
             centroid: [number, number];
             boundingBox: DOMRect;
             value: number;
+            startAngle: number;
+            endAngle: number;
+            innerRadius: number;
+            outerRadius: number;
             getTrackTextProps: GetArcTextProps;
             getArcTextProps: GetArcTextProps;
         }
     ]>;
     motion?: MotionProp;
 } & CommonStyleProps;
-export type ArcProps = ArcPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, ArcPropsWithoutHTML & SplinePropsWithoutHTML>;
+export type ArcProps = ArcPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, ArcPropsWithoutHTML & PathPropsWithoutHTML>;
 import { type GetArcTextProps } from '../utils/arcText.svelte.js';
 declare const Arc: import("svelte").Component<ArcProps, {}, "ref" | "trackRef">;
 type Arc = ReturnType<typeof Arc>;

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

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