layerchart 2.0.0-next.57 → 2.0.0-next.59

package/dist/components/AnnotationLine.svelte

@@ -5,12 +5,24 @@
   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;
 
@@ -45,6 +57,10 @@
   const {
     x,
     y,
+    x1: x1Prop,
+    y1: y1Prop,
+    x2: x2Prop,
+    y2: y2Prop,
     label,
     labelPlacement = 'top-right',
     labelXOffset = 0,
@@ -54,74 +70,104 @@
 
   const ctx = getChartContext();
 
-  const isVertical = $derived(x != null);
+  const isVertical = $derived(
+    x != null || (x1Prop != null && x2Prop != null && x1Prop === x2Prop)
+  );
 
   const line = $derived({
-    x1: x ? ctx.xScale(x) : ctx.xRange[0],
-    y1: y && !x ? ctx.yScale(y) : ctx.yRange[0],
-    x2: x ? ctx.xScale(x) : ctx.xRange[1],
-    y2: y ? ctx.yScale(y) : ctx.yRange[1],
+    x1: x1Prop != null ? ctx.xScale(x1Prop) : x != null ? ctx.xScale(x) : ctx.xRange[0],
+    y1:
+      y1Prop != null ? ctx.yScale(y1Prop) : y != null && x == null ? ctx.yScale(y) : ctx.yRange[0],
+    x2: x2Prop != null ? ctx.xScale(x2Prop) : x != null ? ctx.xScale(x) : ctx.xRange[1],
+    y2: y2Prop != null ? ctx.yScale(y2Prop) : y != null ? ctx.yScale(y) : ctx.yRange[1],
   });
 
-  const labelProps = $derived<ComponentProps<typeof Text>>(
-    isVertical
-      ? {
-          x: line.x1 + (labelPlacement.includes('left') ? -labelXOffset : labelXOffset),
-          y:
-            (labelPlacement.includes('top')
-              ? line.y2
-              : labelPlacement.includes('bottom')
-                ? line.y1
-                : (line.y1 - line.y2) / 2) +
-            (['top', 'bottom-left', 'bottom-right'].includes(labelPlacement)
-              ? -labelYOffset
-              : labelYOffset),
-          dy: -2, // adjust for smaller font size
-          textAnchor: labelPlacement.includes('left')
-            ? 'end'
-            : labelPlacement.includes('right')
-              ? 'start'
-              : 'middle',
-          verticalAnchor:
-            labelPlacement === 'top'
-              ? 'end' // place above line
-              : labelPlacement === 'bottom'
-                ? 'start' // place below line
-                : labelPlacement.includes('top')
-                  ? 'start'
-                  : labelPlacement.includes('bottom')
-                    ? 'end'
-                    : 'middle',
-        }
-      : {
-          x:
-            (labelPlacement.includes('left')
-              ? line.x1
-              : labelPlacement.includes('right')
-                ? line.x2
-                : (line.x2 - line.x1) / 2) +
-            (['left', 'top-right', 'bottom-right'].includes(labelPlacement)
-              ? -labelXOffset
-              : labelXOffset),
-          y: line.y1 + (labelPlacement.includes('top') ? -labelYOffset : labelYOffset),
-          dy: -2, // adjust for smaller font size
-          textAnchor:
-            labelPlacement === 'left'
-              ? 'end' // place beside line
-              : labelPlacement === 'right'
-                ? 'start' // place beside line
-                : labelPlacement.includes('left')
-                  ? 'start'
-                  : labelPlacement.includes('right')
-                    ? 'end'
-                    : 'middle',
-          verticalAnchor: labelPlacement.includes('top')
-            ? 'end'
-            : labelPlacement.includes('bottom')
-              ? 'start'
-              : 'middle',
-        }
-  );
+  const isSloped = $derived(!isVertical && line.x1 !== line.x2 && line.y1 !== line.y2);
+
+  // Angle of the line in degrees, normalized to [-90, 90] so text stays upright
+  const slopeAngle = $derived.by(() => {
+    let angle = Math.atan2(line.y2 - line.y1, line.x2 - line.x1) * (180 / Math.PI);
+    if (angle > 90) angle -= 180;
+    else if (angle < -90) angle += 180;
+    return angle;
+  });
+
+  const labelProps = $derived.by<ComponentProps<typeof Text>>(() => {
+    const isLeft = labelPlacement.includes('left');
+    const isRight = labelPlacement.includes('right');
+    const isTop = labelPlacement.includes('top');
+    const isBottom = labelPlacement.includes('bottom');
+
+    if (isVertical) {
+      return {
+        x: line.x1 + (isLeft ? -labelXOffset : labelXOffset),
+        y:
+          (isTop ? line.y2 : isBottom ? line.y1 : (line.y1 - line.y2) / 2) +
+          (['top', 'bottom-left', 'bottom-right'].includes(labelPlacement)
+            ? -labelYOffset
+            : labelYOffset),
+        dy: -2, // adjust for smaller font size
+        textAnchor: isLeft ? 'end' : isRight ? 'start' : 'middle',
+        verticalAnchor:
+          labelPlacement === 'top'
+            ? 'end' // place above line
+            : labelPlacement === 'bottom'
+              ? 'start' // place below line
+              : isTop
+                ? 'start'
+                : isBottom
+                  ? 'end'
+                  : 'middle',
+      };
+    }
+
+    const x = isLeft ? line.x1 : isRight ? line.x2 : (line.x1 + line.x2) / 2;
+    const y = isLeft ? line.y1 : isRight ? line.y2 : (line.y1 + line.y2) / 2;
+    const textAnchor =
+      labelPlacement === 'left'
+        ? 'end' // place beside line
+        : labelPlacement === 'right'
+          ? 'start' // place beside line
+          : isLeft
+            ? 'start'
+            : isRight
+              ? 'end'
+              : 'middle';
+    const verticalAnchor = isTop ? 'end' : isBottom ? 'start' : 'middle';
+
+    if (isSloped) {
+      // Project along-line and perpendicular offsets onto screen dx/dy so
+      // labelXOffset/labelYOffset track the slope rather than the viewport axes.
+      const aSign = ['left', 'top-right', 'bottom-right'].includes(labelPlacement) ? -1 : 1;
+      const pSign = isTop ? 1 : -1;
+      const alongLine = aSign * labelXOffset;
+      const perpAbove = pSign * labelYOffset + 2; // +2 for font baseline
+      const theta = (slopeAngle * Math.PI) / 180;
+      const cosT = Math.cos(theta);
+      const sinT = Math.sin(theta);
+      return {
+        x,
+        y,
+        rotate: slopeAngle,
+        dx: alongLine * cosT + perpAbove * sinT,
+        dy: alongLine * sinT - perpAbove * cosT,
+        textAnchor,
+        verticalAnchor,
+      };
+    }
+
+    return {
+      x:
+        x +
+        (['left', 'top-right', 'bottom-right'].includes(labelPlacement)
+          ? -labelXOffset
+          : labelXOffset),
+      y: y + (isTop ? -labelYOffset : labelYOffset),
+      dy: -2, // adjust for smaller font size
+      textAnchor,
+      verticalAnchor,
+    };
+  });
 </script>
 
 <Line

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;
 
@@ -42,7 +49,9 @@
 
 <script lang="ts">
   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,39 +65,78 @@
     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'
+  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',
+    };
+  });
+
+  // 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')
-        ? 'start'
-        : 'middle',
-    verticalAnchor: labelPlacement.includes('top')
-      ? 'end'
+        ? 1
+        : 0;
+    const dirY = labelPlacement.includes('top')
+      ? -1
       : labelPlacement.includes('bottom')
-        ? 'start'
-        : 'middle',
+        ? 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();
@@ -115,9 +163,24 @@
   onmouseleave={onPointerLeave}
   ontouchend={onPointerLeave}
   {...props?.circle}
-  class={cls('lc-annotation-point', 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}
@@ -133,5 +196,16 @@
       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/GeoPath.svelte

@@ -151,10 +151,10 @@
   <Path
     {pathData}
     {...restProps}
-    onclick={onclick ? _onClick : undefined}
-    onpointerenter={tooltip || onpointerenter ? _onPointerEnter : undefined}
-    onpointermove={tooltip || onpointermove ? _onPointerMove : undefined}
-    onpointerleave={tooltip || onpointerleave ? _onPointerLeave : undefined}
+    {...onclick && { onclick: _onClick }}
+    {...(tooltip || onpointerenter) && { onpointerenter: _onPointerEnter }}
+    {...(tooltip || onpointermove) && { onpointermove: _onPointerMove }}
+    {...(tooltip || onpointerleave) && { onpointerleave: _onPointerLeave }}
     class={cls('lc-geo-path', className)}
     pathRef={refProp}
   />

package/dist/components/Legend.svelte

@@ -498,6 +498,7 @@
     <div class={cls('lc-legend-swatch-group', classes.items)} data-orientation={orientation}>
       {#each swatchItems as item}
         <button
+          type="button"
           class={cls('lc-legend-swatch-button', resolveMaybeFn(classes?.item, item))}
           style:opacity={selected.length === 0 || selected.includes(item.value) ? 1 : 0.3}
           onclick={(e) => onclickProp?.(e, item) ?? item.onclick?.(e)}