@fundar/data-chart-telling 0.0.53 → 0.0.54

package/dist/layout/geometry/GeometryLayout.svelte

@@ -23,7 +23,8 @@
   import type { Series } from '../../types/plots/data/common';
   import type { HoverMarkerConfig, CustomComponentMarkerConfig } from '../../types/markers/common';
   import type { MarkerConfig } from '../../types/markers/all';
-  import type { HoverPoint, TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+  import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+  import type { HoverController } from '../tooltip/controller.svelte';
   import type { ScopedMarkerGroup } from '../../types/layout/geometry';
   import type { GeoFeature } from '../../types/plots/data/geo';
 
@@ -49,10 +50,7 @@
     markers = [],
     seriesData = [],
     scopedGroups = [],
-    matchedPoints,
-    activePoint,
-    impliesCrosshairX,
-    impliesCrosshairY,
+    ctrl,
     numericMargins,
     data = [],
     geoAllFeatures = [],
@@ -68,11 +66,8 @@
     seriesData?: Series<TSeries>[];
     /** One entry per series that can own a `series`-scoped marker. Same `TSeries` as `seriesData`. */
     scopedGroups?: ScopedMarkerGroup<TSeries>[];
-    matchedPoints: HoverPoint<TData>[];
-    /** The specific matched point actually under the cursor. */
-    activePoint: HoverPoint<TData> | null;
-    impliesCrosshairX: boolean;
-    impliesCrosshairY: boolean;
+    /** `BasePlotLayout`'s own hover controller. */
+    ctrl: HoverController<TData>;
     /** The plot's own resolved margins — `inset` marker only, to place its content box. */
     numericMargins?: { top: number; right: number; bottom: number; left: number };
     /** `BasePlotLayout`'s own rows — `contour` (clip) and unscoped `geo-component` fallback data. */
@@ -171,9 +166,16 @@
   {:else if marker.type === 'geo-component'}
     <marker.component {...marker.props} data={marker.data ?? data} />
   {:else if marker.type === 'hover'}
-    <HoverMarker {marker} data={matchedPoints} {activePoint} {impliesCrosshairX} {impliesCrosshairY} />
+    <HoverMarker
+      {marker}
+      data={ctrl.points}
+      activePoint={ctrl.activePoint}
+      impliesCrosshairX={ctrl.impliesCrosshairX}
+      impliesCrosshairY={ctrl.impliesCrosshairY}
+      onActivePointPixel={ctrl.reportActivePointPixel}
+    />
   {:else if marker.type === 'geo-hover'}
-    <GeoHoverMarker {marker} data={matchedPoints} />
+    <GeoHoverMarker {marker} data={ctrl.points} />
   {:else if marker.type === 'delta'}
     <DeltaMarker {marker} data={seriesData} />
   {/if}
@@ -182,7 +184,7 @@
 {#each scopedGroups as group (group.name)}
   {#each scopedMarkersByName.get(group.name) ?? [] as marker, i (`${group.name}-${marker.type}-${i}`)}
     {#if marker.type === 'hover'}
-      {@const seriesPoints = matchedPoints.filter((p) => p.series === group.name)}
+      {@const seriesPoints = ctrl.points.filter((p) => p.series === group.name)}
       {#if marker.scope === 'segment'}
         {#each group.segments as seg, segIdx (`${group.name}-hover-segment-${segIdx}`)}
           <!-- p.row (TData) is always a superset of TSeries in practice, not provable across two independent generics. -->
@@ -192,8 +194,8 @@
               {marker}
               data={segPoints}
               activePoint={segPoints[0] ?? null}
-              {impliesCrosshairX}
-              {impliesCrosshairY}
+              impliesCrosshairX={ctrl.impliesCrosshairX}
+              impliesCrosshairY={ctrl.impliesCrosshairY}
               seriesColor={seg.color}
             />
           {/if}
@@ -203,8 +205,8 @@
           {marker}
           data={seriesPoints}
           activePoint={seriesPoints[0] ?? null}
-          {impliesCrosshairX}
-          {impliesCrosshairY}
+          impliesCrosshairX={ctrl.impliesCrosshairX}
+          impliesCrosshairY={ctrl.impliesCrosshairY}
           seriesColor={group.segments[0]?.color ?? group.color}
         />
       {/if}

package/dist/layout/geometry/GeometryLayout.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { Series } from '../../types/plots/data/common';
 import type { MarkerConfig } from '../../types/markers/all';
-import type { HoverPoint, TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+import type { HoverController } from '../tooltip/controller.svelte';
 import type { ScopedMarkerGroup } from '../../types/layout/geometry';
 import type { GeoFeature } from '../../types/plots/data/geo';
 declare function $$render<TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData>(): {
@@ -14,11 +15,8 @@ declare function $$render<TData extends Record<string, unknown>, TSeries extends
         seriesData?: Series<TSeries>[];
         /** One entry per series that can own a `series`-scoped marker. Same `TSeries` as `seriesData`. */
         scopedGroups?: ScopedMarkerGroup<TSeries>[];
-        matchedPoints: HoverPoint<TData>[];
-        /** The specific matched point actually under the cursor. */
-        activePoint: HoverPoint<TData> | null;
-        impliesCrosshairX: boolean;
-        impliesCrosshairY: boolean;
+        /** `BasePlotLayout`'s own hover controller. */
+        ctrl: HoverController<TData>;
         /** The plot's own resolved margins — `inset` marker only, to place its content box. */
         numericMargins?: {
             top: number;

package/dist/layout/plot/BasePlotLayout.svelte

@@ -227,7 +227,8 @@
 		label: () => hover.label,
 		seriesFilter: () => hover.tooltip?.series,
 		width: () => width,
-		height: () => height
+		height: () => height,
+		crosshair: () => hover.crosshair
 	});
 
 	function onMove(e: PointerEvent) {
@@ -243,14 +244,6 @@
 			? markers({ setHoverMatch: ctrl.onPointer, clearHoverMatch: ctrl.onLeave })
 			: markers
 	);
-
-	/** `hover.crosshair === false` forces both off, overriding the strategy-implied default — see {@link HoverConfig.crosshair}. */
-	const effectiveImpliesCrosshairX = $derived(
-		hover.crosshair === false ? false : ctrl.impliesCrosshairX
-	);
-	const effectiveImpliesCrosshairY = $derived(
-		hover.crosshair === false ? false : ctrl.impliesCrosshairY
-	);
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -281,10 +274,7 @@
 			markers={resolvedMarkers}
 			seriesData={seriesData ?? []}
 			scopedGroups={scopedGroups ?? []}
-			matchedPoints={ctrl.points}
-			activePoint={ctrl.activePoint}
-			impliesCrosshairX={effectiveImpliesCrosshairX}
-			impliesCrosshairY={effectiveImpliesCrosshairY}
+			{ctrl}
 			{width}
 			{height}
 			{numericMargins}
@@ -296,8 +286,8 @@
 			{@render children?.({
 				matchedPoints: ctrl.points,
 				activePoint: ctrl.activePoint,
-				impliesCrosshairX: effectiveImpliesCrosshairX,
-				impliesCrosshairY: effectiveImpliesCrosshairY,
+				impliesCrosshairX: ctrl.impliesCrosshairX,
+				impliesCrosshairY: ctrl.impliesCrosshairY,
 				numericMargins,
 				setHoverMatch: ctrl.onPointer,
 				clearHoverMatch: ctrl.onLeave

package/dist/layout/tooltip/controller.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { HoverStore, HoverPoint } from '../../types/layout/tooltip';
 import type { AxisValue } from '../../types/layout/scales';
+/** Return type of {@link createHoverController}. */
+export type HoverController<T extends Record<string, unknown>> = ReturnType<typeof createHoverController<T>>;
 /**
  * The plot-agnostic hover state machine shared by every plot. Given reactive
  * accessors for the current hover store, this facet's id, and the local points,
@@ -23,10 +25,16 @@ export declare function createHoverController<T extends Record<string, unknown>>
     /** This facet's own box, used to convert the cursor to/from a sync-broadcast fraction. */
     width: () => number;
     height: () => number;
+    /** Forces the crosshair rule(s) off entirely — see {@link import('../../types/plots/props').HoverConfig.crosshair}. */
+    crosshair?: () => boolean | undefined;
 }): {
     onPointer: (data: T[]) => void;
     onMove: (e: PointerEvent) => void;
     onLeave: () => void;
+    reportActivePointPixel(pos: {
+        x: number;
+        y: number;
+    } | null): void;
     readonly points: {
         x: AxisValue;
         y: AxisValue;

package/dist/layout/tooltip/controller.svelte.js

@@ -11,6 +11,8 @@ import { eq, matchByStrategy, impliesCrosshairX, impliesCrosshairY, filterBySeri
  */
 export function createHoverController(args) {
     let cursor = $state(null);
+    // This facet's own `activePoint`, as a pixel position reported by `HoverMarker`.
+    let activePointPixel = $state(null);
     // Finds the matching hoverPoint for a hit row — by identity first, then
     // by x/y value (for svelteplot's `Pointer`, which hands back clones).
     const pointForRow = (row) => {
@@ -79,9 +81,9 @@ export function createHoverController(args) {
             return candidates[0];
         return candidates.find((p) => eq(p.x, activeX) && eq(p.y, activeY)) ?? candidates[0];
     });
-    // Whether the current strategy implies a crosshair rule on each axis by default.
-    const _impliesCrosshairX = $derived(impliesCrosshairX(args.hover().strategy));
-    const _impliesCrosshairY = $derived(impliesCrosshairY(args.hover().strategy));
+    // Whether the current strategy implies a crosshair rule on each axis, unless `crosshair: false`.
+    const _impliesCrosshairX = $derived(args.crosshair?.() === false ? false : impliesCrosshairX(args.hover().strategy));
+    const _impliesCrosshairY = $derived(args.crosshair?.() === false ? false : impliesCrosshairY(args.hover().strategy));
     const showTooltip = $derived.by(() => {
         if (matchedRows.length === 0)
             return false;
@@ -127,9 +129,12 @@ export function createHoverController(args) {
             h.source = null;
         }
     }
+    /** This facet's tooltip position: the cursor, else `activePointPixel`, else the source facet's cursor fraction reprojected onto this box. */
     const tooltipPosition = $derived.by(() => {
         if (cursor)
             return cursor;
+        if (activePointPixel)
+            return activePointPixel;
         const frac = args.hover().cursorFrac;
         return frac ? { x: frac.x * args.width(), y: frac.y * args.height() } : null;
     });
@@ -137,6 +142,9 @@ export function createHoverController(args) {
         onPointer,
         onMove,
         onLeave,
+        reportActivePointPixel(pos) {
+            activePointPixel = pos;
+        },
         get points() {
             return highlight;
         },

package/dist/markers/BarMarker.svelte

@@ -78,14 +78,14 @@
 	{#if categoryScale?.type === 'band'}
 		{@const bandwidth = categoryScale.fn.bandwidth()}
 		{@const bandStart = Number(categoryScale.fn(marker.category as never) ?? 0)}
+		{@const insetLeft = (marker.insetLeft ?? 0) * bandwidth}
+		{@const insetRight = (marker.insetRight ?? 0) * bandwidth}
+		{@const insetTop = (marker.insetTop ?? 0) * bandwidth}
+		{@const insetBottom = (marker.insetBottom ?? 0) * bandwidth}
 		{#if marker.role === 'hitArea'}
 			{@const [rangeMin, rangeMax] = marker.isHorizontal
 				? hitAreaValueRangeFor(marker.isHorizontal, marker.x1, marker.x2)
 				: hitAreaValueRangeFor(marker.isHorizontal, marker.y1, marker.y2)}
-			{@const insetLeft = (marker.insetLeft ?? 0) * bandwidth}
-			{@const insetRight = (marker.insetRight ?? 0) * bandwidth}
-			{@const insetTop = (marker.insetTop ?? 0) * bandwidth}
-			{@const insetBottom = (marker.insetBottom ?? 0) * bandwidth}
 			{#if marker.isHorizontal}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<rect
@@ -113,9 +113,9 @@
 			{/if}
 		{:else}
 			{@const [valueMin, valueMax] = valueExtentFor(marker.isHorizontal)}
-			{@const thickness = bandwidth + 2}
-			{@const center = bandStart + bandwidth / 2}
 			{#if marker.isHorizontal}
+				{@const thickness = Math.max(0, bandwidth - insetTop - insetBottom) + 2}
+				{@const center = bandStart + insetTop + (bandwidth - insetTop - insetBottom) / 2}
 				<rect
 					class="hover-area"
 					x={valueMin}
@@ -132,6 +132,8 @@
 					pointer-events="none"
 				/>
 			{:else}
+				{@const thickness = Math.max(0, bandwidth - insetLeft - insetRight) + 2}
+				{@const center = bandStart + insetLeft + (bandwidth - insetLeft - insetRight) / 2}
 				<rect
 					class="hover-area"
 					x={center - thickness / 2}

package/dist/markers/HoverMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { usePlot } from 'svelteplot';
   import DotMarker from './DotMarker.svelte';
   import TextMarker from './TextMarker.svelte';
   import RuleMarker from './RuleMarker.svelte';
@@ -39,6 +40,8 @@
     activePoint?: HoverDisplayPoint | null;
     impliesCrosshairX?: boolean;
     impliesCrosshairY?: boolean;
+    /** Reports `activePoint`'s real pixel position within this facet's own box, or `null` when nothing's matched. */
+    onActivePointPixel?: (pos: { x: number; y: number } | null) => void;
   }
 
   let {
@@ -48,9 +51,35 @@
     impliesCrosshairX = false,
     impliesCrosshairY = false,
     seriesColor,
+    onActivePointPixel,
   }: Props = $props();
 
   const cfg = $derived(getConfiguration());
+  const plot = usePlot();
+
+  /** Scaled pixel position of `value`, centered within its band for a band scale. */
+  function scaledPixel(scale: { type?: string; fn?: (v: never) => unknown } | undefined, value: unknown): number | null {
+    if (!scale?.fn || value == null) return null;
+    const raw = Number(scale.fn(value as never));
+    if (!Number.isFinite(raw)) return null;
+    if (scale.type === 'band') {
+      const bandwidth = (scale.fn as { bandwidth?: () => number }).bandwidth?.() ?? 0;
+      return raw + bandwidth / 2;
+    }
+    return raw;
+  }
+
+  const activePixel = $derived.by((): { x: number; y: number } | null => {
+    if (!activePoint) return null;
+    const x = scaledPixel(plot.scales.x, activePoint.x);
+    const y = scaledPixel(plot.scales.y, activePoint.y);
+    if (x == null || y == null) return null;
+    return { x: x + (activePoint.dx ?? 0), y: y + (activePoint.dy ?? 0) };
+  });
+
+  $effect(() => {
+    onActivePointPixel?.(activePixel);
+  });
 
   const showCrosshairX = $derived(marker.ruleX !== false && (impliesCrosshairX || marker.ruleX === true));
   const showCrosshairY = $derived(marker.ruleY !== false && (impliesCrosshairY || marker.ruleY === true));
@@ -115,6 +144,8 @@
       isHorizontal: false,
       data: [],
       category: areaX,
+      insetLeft: activePoint?.areaInset?.start,
+      insetRight: activePoint?.areaInset?.end,
       style: areaStyle,
     }}
   />
@@ -128,17 +159,23 @@
       isHorizontal: true,
       data: [],
       category: areaY,
+      insetTop: activePoint?.areaInset?.start,
+      insetBottom: activePoint?.areaInset?.end,
       style: areaStyle,
     }}
   />
 {/if}
 
 {#if ruleX != null}
-  <RuleMarker axis="x" value={ruleX} style={{ ...cfg.hover.rule, ...ruleStyle }} />
+  <g transform="translate({activePoint?.dx ?? 0}, {activePoint?.dy ?? 0})">
+    <RuleMarker axis="x" value={ruleX} style={{ ...cfg.hover.rule, ...ruleStyle }} />
+  </g>
 {/if}
 
 {#if ruleY != null}
-  <RuleMarker axis="y" value={ruleY} style={{ ...cfg.hover.rule, ...ruleStyle }} />
+  <g transform="translate({activePoint?.dx ?? 0}, {activePoint?.dy ?? 0})">
+    <RuleMarker axis="y" value={ruleY} style={{ ...cfg.hover.rule, ...ruleStyle }} />
+  </g>
 {/if}
 
 {#if data.length > 0}

package/dist/markers/HoverMarker.svelte.d.ts

@@ -29,6 +29,11 @@ interface Props extends MarkerProps<HoverDisplayPoint> {
     activePoint?: HoverDisplayPoint | null;
     impliesCrosshairX?: boolean;
     impliesCrosshairY?: boolean;
+    /** Reports `activePoint`'s real pixel position within this facet's own box, or `null` when nothing's matched. */
+    onActivePointPixel?: (pos: {
+        x: number;
+        y: number;
+    } | null) => void;
 }
 declare const HoverMarker: import("svelte").Component<Props, {}, "">;
 type HoverMarker = ReturnType<typeof HoverMarker>;

package/dist/plots/bar/hoverPoints.d.ts

@@ -12,4 +12,4 @@ import type { BarLayout } from './layout.svelte';
  * height instead of `dx`/`dy`, since that offset is representable as a
  * regular data value (unlike 'grouped''s pixel-only slice offset).
  */
-export declare function buildHoverPoints<TData extends Record<string, unknown>>(resolvedSeries: Series<TData>[], isHorizontal: boolean, geometry: Pick<BarLayout<TData>, 'layout' | 'stackedBaseline' | 'groupOffset'>, colorFor: (seriesName: string) => string): HoverPoint<TData>[];
+export declare function buildHoverPoints<TData extends Record<string, unknown>>(resolvedSeries: Series<TData>[], isHorizontal: boolean, geometry: Pick<BarLayout<TData>, 'layout' | 'stackedBaseline' | 'groupOffset' | 'groupInsetFraction'>, colorFor: (seriesName: string) => string): HoverPoint<TData>[];

package/dist/plots/bar/hoverPoints.js

@@ -15,6 +15,7 @@ export function buildHoverPoints(resolvedSeries, isHorizontal, geometry, colorFo
     return resolvedSeries.flatMap((s, idx) => {
         const sx = resolveAccessor(s.x);
         const sy = resolveAccessor(s.y);
+        const areaInset = geometry.layout === 'grouped' ? geometry.groupInsetFraction(idx) : undefined;
         return s.data.filter((d) => !isGapValue(sy(d))).map((d) => {
             const category = sx(d);
             const rawValue = Number(sy(d));
@@ -25,6 +26,7 @@ export function buildHoverPoints(resolvedSeries, isHorizontal, geometry, colorFo
                 y: isHorizontal ? category : value,
                 dx,
                 dy,
+                areaInset,
                 row: d,
                 label: String(sy(d)),
                 series: s.name,

package/dist/types/layout/tooltip.d.ts

@@ -96,6 +96,11 @@ export type HoverDisplayPoint = {
      */
     dx?: number;
     dy?: number;
+    /** A 'grouped' series' own slice of the category band, as start/end fractions (0–1) of the whole band. `undefined` means the whole band. */
+    areaInset?: {
+        start: number;
+        end: number;
+    };
 };
 /** A candidate point for hover matching/highlighting — also carries its source row. */
 export type HoverPoint<T> = HoverDisplayPoint & {

package/dist/types/markers/common.d.ts

@@ -52,7 +52,8 @@ export type LineMarkerConfig = {
  * for hover, resolved against the live scale at render time; `role:
  * 'highlight'` is `HoverMarkerConfig`'s `areaX`/`areaY` highlight — a
  * visible, non-interactive rect centered on `category`, spanning the full
- * opposite axis, sized to the category band's own width plus 2px.
+ * opposite axis, sized to the category band's own width plus 2px (or a
+ * single series' own slice, via `insetTop`/etc.).
  */
 export type BarMarkerConfig = {
     type: 'bar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "type": "module",
   "files": [
     "dist"