layerchart 2.0.0-next.50 → 2.0.0-next.52

package/dist/components/Legend.svelte

@@ -77,6 +77,14 @@
      */
     selected?: string[];
 
+    /**
+     * Value to indicate on the ramp (e.g. the currently hovered data point).
+     * When set, a downward-pointing arrow is drawn above the bar at this value's
+     * position. Defaults to auto-detecting from `ctx.tooltip.data` via the
+     * chart's color accessor (`ctx.c`).
+     */
+    value?: number | string | null;
+
     /**
      * Classes to apply to the elements.
      *
@@ -149,6 +157,7 @@
     onpointerleave: onpointerleaveProp,
     variant: variantProp,
     selected: selectedProp,
+    value: valueProp,
     classes = {},
     ref: refProp = $bindable(),
     class: className,
@@ -345,6 +354,36 @@
   const variant = $derived(variantProp ?? (seriesItems ? 'swatches' : 'ramp'));
   const selected = $derived(selectedProp ?? ctx.series?.selectedKeys?.current ?? []);
 
+  // Position indicator for the currently hovered value on the ramp. If `value`
+  // is explicitly provided, use it; otherwise fall back to `ctx.tooltip.data`
+  // piped through the chart's color accessor (`ctx.c`).
+  const indicatorX = $derived.by(() => {
+    if (variant !== 'ramp' || !scale) return null;
+    let value: any = valueProp;
+    if (value == null) {
+      const data = ctx.tooltip?.data;
+      if (data == null) return null;
+      value = ctx.c?.(data);
+    }
+    if (value == null) return null;
+
+    // Threshold / quantize / quantile scales — scaleConfig.xScale maps swatch
+    // *indices* to pixels, not the raw domain value. Find which bucket the
+    // value falls into and center on that swatch.
+    if ((scale as any).invertExtent) {
+      const i = scale.range().indexOf(scale(value));
+      if (i < 0) return null;
+      const x0 = scaleConfig.xScale?.(i - 1);
+      const x1 = scaleConfig.xScale?.(i);
+      if (typeof x0 !== 'number' || typeof x1 !== 'number') return null;
+      return (x0 + x1) / 2;
+    }
+
+    const x = scaleConfig.xScale?.(value);
+    if (typeof x !== 'number' || !Number.isFinite(x)) return null;
+    return x + scaleConfig.tickLabelOffset;
+  });
+
   const swatchItems = $derived.by(() => {
     if (seriesItems) {
       // Series-based legend items
@@ -397,10 +436,13 @@
       seriesItems,
     })}
   {:else if variant === 'ramp'}
+    {@const indicatorSize = 6}
+    {@const tickLabelY = height + tickLengthProp + tickFontSize}
+    {@const svgHeight = tickLabelY}
     <svg
       {width}
-      height={height + tickLengthProp + tickFontSize}
-      viewBox="0 0 {width} {height + tickLengthProp + tickFontSize}"
+      height={svgHeight}
+      viewBox="0 0 {width} {svgHeight}"
       class={cls('lc-legend-ramp-svg')}
     >
       <g class="lc-legend-ramp-g">
@@ -423,7 +465,7 @@
           <text
             text-anchor="middle"
             x={scaleConfig.xScale?.(tick) + scaleConfig.tickLabelOffset}
-            y={height + tickLengthProp + tickFontSize}
+            y={tickLabelY}
             style:font-size={tickFontSize}
             class={cls('lc-legend-tick-text', classes.label)}
           >
@@ -442,6 +484,15 @@
           {/if}
         {/each}
       </g>
+
+      {#if indicatorX != null}
+        <path
+          d="M{indicatorX - 4},{height + indicatorSize + 1} L{indicatorX + 4},{height +
+            indicatorSize +
+            1} L{indicatorX},{height} Z"
+          class={cls('lc-legend-indicator')}
+        />
+      {/if}
     </svg>
   {:else if variant === 'swatches'}
     <div class={cls('lc-legend-swatch-group', classes.items)} data-orientation={orientation}>
@@ -537,6 +588,10 @@
       stroke: var(--color-surface-content, currentColor);
     }
 
+    :where(.lc-legend-indicator) {
+      fill: var(--color-surface-content, currentColor);
+    }
+
     :where(.lc-legend-swatch-group) {
       display: flex;
       gap: 0.25rem 1rem;

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

@@ -64,6 +64,13 @@ export type LegendPropsWithoutHTML = {
      * An array of selected items. If provided, the legend fades unselected items.
      */
     selected?: string[];
+    /**
+     * Value to indicate on the ramp (e.g. the currently hovered data point).
+     * When set, a downward-pointing arrow is drawn above the bar at this value's
+     * position. Defaults to auto-detecting from `ctx.tooltip.data` via the
+     * chart's color accessor (`ctx.c`).
+     */
+    value?: number | string | null;
     /**
      * Classes to apply to the elements.
      *

package/dist/components/Line.svelte

@@ -125,7 +125,13 @@
   import { getLayerContext } from '../contexts/layer.js';
   import { getChartContext } from '../contexts/chart.js';
   import { createDataMotionMap } from '../utils/motion.svelte.js';
-  import { hasAnyDataProp, resolveDataProp, resolveColorProp, resolveGeoDataPair, resolveStyleProp } from '../utils/dataProp.js';
+  import {
+    hasAnyDataProp,
+    resolveDataProp,
+    resolveColorProp,
+    resolveGeoDataPair,
+    resolveStyleProp,
+  } from '../utils/dataProp.js';
   import { getGeoContext } from '../contexts/geo.js';
   import { chartDataArray } from '../utils/common.js';
 
@@ -167,9 +173,7 @@
   const geo = getGeoContext();
 
   // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(
-    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
-  );
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
 
   // Resolve a single data item to pixel coordinates
   function resolveLine(d: any) {
@@ -233,29 +237,21 @@
   const _initialX2 = initialX2 ?? (typeof x2 === 'number' ? x2 : 0);
   const _initialY2 = initialY2 ?? (typeof y2 === 'number' ? y2 : 0);
 
-  const motionX1 = createMotion(
-    _initialX1,
-    () => (typeof x1 === 'number' ? x1 : 0),
-    motion
-  );
-  const motionY1 = createMotion(
-    _initialY1,
-    () => (typeof y1 === 'number' ? y1 : 0),
-    motion
-  );
-  const motionX2 = createMotion(
-    _initialX2,
-    () => (typeof x2 === 'number' ? x2 : 0),
-    motion
-  );
-  const motionY2 = createMotion(
-    _initialY2,
-    () => (typeof y2 === 'number' ? y2 : 0),
-    motion
-  );
+  const motionX1 = createMotion(_initialX1, () => (typeof x1 === 'number' ? x1 : 0), motion);
+  const motionY1 = createMotion(_initialY1, () => (typeof y1 === 'number' ? y1 : 0), motion);
+  const motionX2 = createMotion(_initialX2, () => (typeof x2 === 'number' ? x2 : 0), motion);
+  const motionY2 = createMotion(_initialY2, () => (typeof y2 === 'number' ? y2 : 0), motion);
 
   const layerCtx = getLayerContext();
 
+  const staticFill = $derived(typeof fill === 'string' ? fill : undefined);
+  const staticStroke = $derived(typeof stroke === 'string' ? stroke : undefined);
+  const staticFillOpacity = $derived(typeof fillOpacity === 'number' ? fillOpacity : undefined);
+  const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
+  const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
+  const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+  const staticHeight = $derived(typeof strokeWidth === 'number' ? `${strokeWidth}px` : '1px');
+
   function getStyleOptions(
     styleOverrides: ComputedStylesOptions | undefined,
     itemFill?: string | undefined,
@@ -266,16 +262,29 @@
     itemClass?: string | undefined
   ) {
     return styleOverrides
-      ? merge({ styles: { strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined) } }, styleOverrides)
+      ? merge(
+          {
+            styles: {
+              strokeWidth:
+                itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+            },
+          },
+          styleOverrides
+        )
       : {
           styles: {
             fill: itemFill ?? fill,
-            fillOpacity: itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
+            fillOpacity:
+              itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
             stroke: itemStroke ?? stroke,
-            strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+            strokeWidth:
+              itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
             opacity: itemOpacity ?? (typeof opacity === 'number' ? opacity : undefined),
           },
-          classes: cls('lc-line', itemClass ?? (typeof className === 'string' ? className : undefined)),
+          classes: cls(
+            'lc-line',
+            itemClass ?? (typeof className === 'string' ? className : undefined)
+          ),
           style: restProps.style as string | undefined,
         };
   }
@@ -292,7 +301,15 @@
         const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d);
         const resolvedOpacity = resolveStyleProp(opacity, item.d);
         const resolvedClass = resolveStyleProp(className, item.d);
-        const styleOpts = getStyleOptions(styleOverrides, resolvedFill, resolvedStroke, resolvedFillOpacity, resolvedStrokeWidth, resolvedOpacity, resolvedClass);
+        const styleOpts = getStyleOptions(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
         const pathData = `M ${item.x1},${item.y1} L ${item.x2},${item.y2}`;
         renderPathData(ctx, pathData, styleOpts);
       }
@@ -318,29 +335,32 @@
         color: typeof stroke === 'string' ? stroke : typeof fill === 'string' ? fill : undefined,
       };
     },
-    canvasRender: layerCtx === 'canvas' ? {
-      render,
-      events: {
-        click: restProps.onclick,
-        pointerenter: restProps.onpointerenter,
-        pointermove: restProps.onpointermove,
-        pointerleave: restProps.onpointerleave,
-      },
-      deps: () => [
-        dataMode,
-        dataMode ? resolvedItems : null,
-        motionX1.current,
-        motionY1.current,
-        motionX2.current,
-        motionY2.current,
-        fillKey!.current,
-        strokeKey!.current,
-        strokeWidth,
-        opacity,
-        className,
-        restProps.style,
-      ],
-    } : undefined,
+    canvasRender:
+      layerCtx === 'canvas'
+        ? {
+            render,
+            events: {
+              click: restProps.onclick,
+              pointerenter: restProps.onpointerenter,
+              pointermove: restProps.onpointermove,
+              pointerleave: restProps.onpointerleave,
+            },
+            deps: () => [
+              dataMode,
+              dataMode ? resolvedItems : null,
+              motionX1.current,
+              motionY1.current,
+              motionX2.current,
+              motionY2.current,
+              fillKey!.current,
+              strokeKey!.current,
+              strokeWidth,
+              opacity,
+              className,
+              restProps.style,
+            ],
+          }
+        : undefined,
   });
 </script>
 
@@ -380,15 +400,15 @@
       y1={motionY1.current}
       x2={motionX2.current}
       y2={motionY2.current}
-      fill={fill as string}
-      stroke={stroke as string}
-      fill-opacity={fillOpacity as number}
-      stroke-width={strokeWidth as number}
-      opacity={opacity as number}
+      fill={staticFill}
+      stroke={staticStroke}
+      fill-opacity={staticFillOpacity}
+      stroke-width={staticStrokeWidth}
+      opacity={staticOpacity}
       marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
       marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
       marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-      class={cls('lc-line', className as string)}
+      class={cls('lc-line', staticClassName)}
       {...restProps}
     />
     <MarkerWrapper id={markerStartId} marker={markerStart ?? marker} />
@@ -431,12 +451,12 @@
       style:left="{motionX1.current}px"
       style:top="{motionY1.current}px"
       style:width="{length}px"
-      style:height="{(strokeWidth as number) ?? 1}px"
+      style:height={staticHeight}
       style:transform="translateY(-50%) rotate({angle}deg)"
       style:transform-origin="0 50%"
-      style:opacity={opacity as number}
-      style:background-color={stroke as string}
-      class={cls('lc-line', className as string)}
+      style:opacity={staticOpacity}
+      style:background-color={staticStroke}
+      class={cls('lc-line', staticClassName)}
       style={restProps.style}
     ></div>
   {/if}

package/dist/components/Points.svelte

@@ -137,8 +137,8 @@
     const scaledX: number = ctx.xScale(xVal);
     const scaledY: number = ctx.yScale(yVal);
 
-    const x = scaledX + getOffset(scaledX, offsetX, ctx.xScale, ctx.x1Scale);
-    const y = scaledY + getOffset(scaledY, offsetY, ctx.yScale, ctx.y1Scale);
+    const x = scaledX + getOffset(scaledX, offsetX, ctx.xScale, ctx.x1Scale ?? undefined);
+    const y = scaledY + getOffset(scaledY, offsetY, ctx.yScale, ctx.y1Scale ?? undefined);
 
     const radialPoint = pointRadial(x, y);
 

package/dist/components/Polygon.svelte

@@ -168,7 +168,13 @@
     type ResolvedMotion,
   } from '../utils/motion.svelte.js';
   import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
-  import { hasAnyDataProp, resolveDataProp, resolveColorProp, resolveGeoDataPair, resolveStyleProp } from '../utils/dataProp.js';
+  import {
+    hasAnyDataProp,
+    resolveDataProp,
+    resolveColorProp,
+    resolveGeoDataPair,
+    resolveStyleProp,
+  } from '../utils/dataProp.js';
   import { getGeoContext } from '../contexts/geo.js';
   import { chartDataArray } from '../utils/common.js';
   import { createKey } from '../utils/key.svelte.js';
@@ -219,9 +225,7 @@
   const dataMode = $derived(hasAnyDataProp(cx, cy, r));
 
   // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(
-    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
-  );
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
 
   // Resolve a single data item to a polygon path string
   function resolvePolygon(d: any) {
@@ -234,22 +238,23 @@
     }
     const resolvedR = resolveDataProp(r, d, chartCtx.rScale, typeof r === 'number' ? r : 1);
 
-    const pts = typeof points === 'number'
-      ? polygon({
-          cx: resolvedCx,
-          cy: resolvedCy,
-          count: points,
-          radius: resolvedR,
-          rotate,
-          inset,
-          scaleX,
-          scaleY,
-          skewX,
-          skewY,
-          tiltX,
-          tiltY,
-        })
-      : points;
+    const pts =
+      typeof points === 'number'
+        ? polygon({
+            cx: resolvedCx,
+            cy: resolvedCy,
+            count: points,
+            radius: resolvedR,
+            rotate,
+            inset,
+            scaleX,
+            scaleY,
+            skewX,
+            skewY,
+            tiltX,
+            tiltY,
+          })
+        : points;
 
     return roundedPolygonPath(pts, cornerRadius);
   }
@@ -350,6 +355,13 @@
 
   const layerCtx = getLayerContext();
 
+  const staticFill = $derived(typeof fill === 'string' ? fill : undefined);
+  const staticFillOpacity = $derived(typeof fillOpacity === 'number' ? fillOpacity : undefined);
+  const staticStroke = $derived(typeof stroke === 'string' ? stroke : undefined);
+  const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
+  const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
+  const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+
   function getStyleOptions(
     styleOverrides: ComputedStylesOptions | undefined,
     itemFill?: string | undefined,
@@ -360,16 +372,29 @@
     itemClass?: string | undefined
   ) {
     return styleOverrides
-      ? merge({ styles: { strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined) } }, styleOverrides)
+      ? merge(
+          {
+            styles: {
+              strokeWidth:
+                itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+            },
+          },
+          styleOverrides
+        )
       : {
           styles: {
             fill: itemFill ?? fill,
-            fillOpacity: itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
+            fillOpacity:
+              itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
             stroke: itemStroke ?? stroke,
-            strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+            strokeWidth:
+              itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
             opacity: itemOpacity ?? (typeof opacity === 'number' ? opacity : undefined),
           },
-          classes: cls('lc-polygon', itemClass ?? (typeof className === 'string' ? className : undefined)),
+          classes: cls(
+            'lc-polygon',
+            itemClass ?? (typeof className === 'string' ? className : undefined)
+          ),
           style: restProps.style as string | undefined,
         };
   }
@@ -387,7 +412,15 @@
         const resolvedStrokeWidth = resolveStyleProp(strokeWidth, d);
         const resolvedOpacity = resolveStyleProp(opacity, d);
         const resolvedClass = resolveStyleProp(className, d);
-        const styleOpts = getStyleOptions(styleOverrides, resolvedFill, resolvedStroke, resolvedFillOpacity, resolvedStrokeWidth, resolvedOpacity, resolvedClass);
+        const styleOpts = getStyleOptions(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
         renderPathData(ctx, pathData, styleOpts);
       }
     } else {
@@ -412,31 +445,34 @@
         color: typeof fill === 'string' ? fill : typeof stroke === 'string' ? stroke : undefined,
       };
     },
-    canvasRender: layerCtx === 'canvas' ? {
-      render,
-      events: {
-        click: restProps.onclick,
-        pointerenter: restProps.onpointerenter,
-        pointermove: restProps.onpointermove,
-        pointerleave: restProps.onpointerleave,
-        pointerdown: restProps.onpointerdown,
-        pointerover: restProps.onpointerover,
-        pointerout: restProps.onpointerout,
-        touchmove: restProps.ontouchmove,
-      },
-      deps: () => [
-        dataMode,
-        dataMode ? resolvedItems : null,
-        fillKey!.current,
-        fillOpacity,
-        strokeKey!.current,
-        strokeWidth,
-        opacity,
-        className,
-        tweenedState.current,
-        restProps.style,
-      ],
-    } : undefined,
+    canvasRender:
+      layerCtx === 'canvas'
+        ? {
+            render,
+            events: {
+              click: restProps.onclick,
+              pointerenter: restProps.onpointerenter,
+              pointermove: restProps.onpointermove,
+              pointerleave: restProps.onpointerleave,
+              pointerdown: restProps.onpointerdown,
+              pointerover: restProps.onpointerover,
+              pointerout: restProps.onpointerout,
+              touchmove: restProps.ontouchmove,
+            },
+            deps: () => [
+              dataMode,
+              dataMode ? resolvedItems : null,
+              fillKey!.current,
+              fillOpacity,
+              strokeKey!.current,
+              strokeWidth,
+              opacity,
+              className,
+              tweenedState.current,
+              restProps.style,
+            ],
+          }
+        : undefined,
   });
 </script>
 
@@ -464,12 +500,12 @@
   {:else}
     <path
       d={tweenedState.current}
-      fill={fill as string}
-      fill-opacity={fillOpacity as number}
-      stroke={stroke as string}
-      stroke-width={strokeWidth as number}
-      opacity={opacity as number}
-      class={cls('lc-polygon', className as string)}
+      fill={staticFill}
+      fill-opacity={staticFillOpacity}
+      stroke={staticStroke}
+      stroke-width={staticStrokeWidth}
+      opacity={staticOpacity}
+      class={cls('lc-polygon', staticClassName)}
       {...restProps}
       bind:this={ref}
     />