@fundar/data-chart-telling 0.0.7 → 0.0.9

package/dist/layout/plot/PlotLayout.svelte

@@ -210,6 +210,7 @@
         ruleX={showRuleX ? ctrl.ruleX : null}
         ruleY={showRuleY ? ctrl.ruleY : null}
         showLabels={unscopedHoverMarker.showLabels ?? showHoverLabels}
+        format={unscopedHoverMarker.format}
         ruleStyle={unscopedHoverMarker.ruleStyle}
         dotStyle={unscopedHoverMarker.dotStyle}
         fontStyle={unscopedHoverMarker.fontStyle}

package/dist/plots/bar/Plot.svelte

@@ -63,7 +63,7 @@
   const yAcc = $derived(resolveAccessor(resolvedSeries[0]?.y ?? ((d: TData) => d)));
   const flat = $derived(resolvedSeries.flatMap((s) => s.data));
   const hoverPoints = $derived(
-    resolvedSeries.flatMap((s) => {
+    resolvedSeries.flatMap((s, idx) => {
       const sx = resolveAccessor(s.x);
       const sy = resolveAccessor(s.y);
       return s.data.map((d) => ({
@@ -72,6 +72,7 @@
         row: d,
         label: String(sy(d)),
         series: s.name,
+        color: paletteColor(idx, cfg.palette),
       }));
     }),
   );

package/dist/plots/line/Plot.svelte

@@ -62,7 +62,7 @@
   const yAcc = $derived(resolveAccessor(resolvedSeries[0]?.y ?? ((d: TData) => d)));
   const flat = $derived(resolvedSeries.flatMap((s) => s.data));
   const hoverPoints = $derived(
-    resolvedSeries.flatMap((s) => {
+    resolvedSeries.flatMap((s, idx) => {
       const sx = resolveAccessor(s.x);
       const sy = resolveAccessor(s.y);
       return s.data.map((d) => ({
@@ -71,6 +71,7 @@
         row: d,
         label: String(sy(d)),
         series: s.name,
+        color: paletteColor(idx, cfg.palette),
       }));
     }),
   );

package/dist/plots/markers/HoverMarker.svelte

@@ -19,6 +19,7 @@
     ruleX?: AxisValue | null;
     ruleY?: AxisValue | null;
     showLabels?: boolean;
+    format?: (point: HoverDisplayPoint) => string;
     ruleStyle?: StrokeStyle;
     dotStyle?: DotStyle;
     fontStyle?: FontStyle;
@@ -29,6 +30,7 @@
     ruleX = null,
     ruleY = null,
     showLabels = true,
+    format,
     ruleStyle,
     dotStyle,
     fontStyle,
@@ -60,19 +62,32 @@
 {/if}
 
 {#if data.length > 0}
-  <DotMarker
-    {data}
-    x={(d) => d.x}
-    y={(d) => d.y}
-    style={{ ...cfg.hover.dot, ...dotStyle }}
-  />
-  {#if showLabels}
-    <TextMarker
-      {data}
+  {#each data as point (point.series ?? `${point.x}_${point.y}`)}
+    <DotMarker
+      data={[point]}
       x={(d) => d.x}
       y={(d) => d.y}
-      text={(d) => d.label ?? ''}
-      style={{ ...cfg.hover.font, ...fontStyle }}
+      style={{
+        ...cfg.hover.dot,
+        ...dotStyle,
+        ...(dotStyle?.dotFill === 'currentColor' && point.color ? { dotFill: point.color } : {}),
+        ...(dotStyle?.dotStroke === 'currentColor' && point.color ? { dotStroke: point.color } : {}),
+      }}
     />
+  {/each}
+  {#if showLabels}
+    {#each data as point (point.series ?? `${point.x}_${point.y}`)}
+      <TextMarker
+        data={[point]}
+        x={(d) => d.x}
+        y={(d) => d.y}
+        text={(d) => format ? format(d) : (d.label ?? '')}
+        style={{
+          ...cfg.hover.font,
+          ...fontStyle,
+          ...(fontStyle?.fill === 'currentColor' && point.color ? { fill: point.color } : {}),
+        }}
+      />
+    {/each}
   {/if}
 {/if}

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

@@ -13,6 +13,7 @@ interface Props extends MarkerProps<HoverDisplayPoint> {
     ruleX?: AxisValue | null;
     ruleY?: AxisValue | null;
     showLabels?: boolean;
+    format?: (point: HoverDisplayPoint) => string;
     ruleStyle?: StrokeStyle;
     dotStyle?: DotStyle;
     fontStyle?: FontStyle;

package/dist/plots/pyramid/Plot.svelte

@@ -118,6 +118,7 @@
       row: d,
       label: d.__label,
       series: d.__series,
+      color: d.__side === 'left' ? leftColor : rightColor,
     })),
   );
 

package/dist/plots/utils/segments.js

@@ -68,6 +68,27 @@ export function validateSegments(segments) {
         check(key === DEFAULT_KEY ? '(default)' : `"${key}"`, segs);
     }
 }
+function isPlainObject(v) {
+    return v !== null && typeof v === 'object' && !Array.isArray(v);
+}
+/**
+ * Merges two style objects one level deep: for any key where both base and
+ * override hold plain objects (e.g. `stroke`, `dots`), their fields are
+ * merged — override wins on conflict. Primitive fields are overridden directly.
+ */
+function mergeStyles(base, override) {
+    const result = { ...base };
+    for (const [key, val] of Object.entries(override)) {
+        const baseVal = result[key];
+        if (isPlainObject(val) && isPlainObject(baseVal)) {
+            result[key] = { ...baseVal, ...val };
+        }
+        else {
+            result[key] = val;
+        }
+    }
+    return result;
+}
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function resolveSeriesSegments(series, segs) {
     if (!segs.length) {
@@ -143,7 +164,7 @@ function resolveSeriesSegments(series, segs) {
             // keys fill in whatever the area segment omits; the area wins on conflict.
             const isAreaSpecific = seg.areas != null && seg.areas.length > 0;
             const resolvedStyle = isAreaSpecific && catchAll?.style
-                ? { ...catchAll.style, ...segStyle }
+                ? mergeStyles(catchAll.style, segStyle)
                 : segStyle;
             userVisual.push({ data: run.data, style: resolvedStyle });
             // When the next run is also a user segment (no unmatched data between them),

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

@@ -81,6 +81,8 @@ export type HoverDisplayPoint = {
     label: string;
     /** Owning series name; undefined for plot kinds with no series concept (heatmap). */
     series?: string;
+    /** Resolved series color — used by HoverMarker when dotFill/fill is `'currentColor'`. */
+    color?: string;
 };
 /** A candidate point for hover matching/highlighting — also carries its source row. */
 export type HoverPoint<T> = HoverDisplayPoint & {

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

@@ -1,6 +1,6 @@
 import type { AxisValue } from './common';
 import type { DotStyle, FontStyle, StrokeStyle } from './styles';
-import type { HoverStrategy } from '../layout/tooltip';
+import type { HoverStrategy, HoverDisplayPoint } from '../layout/tooltip';
 /**
  * Baseline props every marker component receives when mounted by a plot:
  * `data` for the points/values it draws, plus `series`/`seriesColor` when
@@ -40,6 +40,8 @@ export type HoverMarkerConfig = {
     ruleX?: boolean;
     ruleY?: boolean;
     showLabels?: boolean;
+    /** Custom label formatter. Receives the matched point; return the string to display. */
+    format?: (point: HoverDisplayPoint) => string;
     ruleStyle?: StrokeStyle;
     dotStyle?: DotStyle;
     fontStyle?: FontStyle;

package/package.json

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