@fundar/data-chart-telling 0.0.11 → 0.0.13

package/dist/layout/plot/PlotLayout.svelte

@@ -219,7 +219,7 @@
   </Plot>
 
   {#if tooltip && ctrl.showTooltip && ctrl.tooltipPosition}
-    <Tooltip x={ctrl.tooltipPosition?.x ?? 0} y={ctrl.tooltipPosition?.y ?? 0}>
+    <Tooltip x={ctrl.tooltipPosition?.x ?? 0} y={ctrl.tooltipPosition?.y ?? 0} bounds={{ width, height }}>
       {#if tooltip.content}
         {@render tooltip.content({ rows: ctrl.matchedRows.map((p) => p.row) })}
       {:else}

package/dist/layout/tooltip/Tooltip.svelte

@@ -6,6 +6,11 @@
    * parent. It is styled entirely from the `--dct-tooltip-*` variables that
    * {@link ChartContainer} stamps from the config, so it themes for free. Plots
    * that implement hovering can render this with their own content snippet.
+   *
+   * Placement is boundary-aware: it prefers sitting centered above the point,
+   * but flips below when it would overflow the top and shifts horizontally
+   * when it would overflow the left/right, so it always stays clear of the
+   * `bounds` box (typically the plot's own width/height).
    */
   let {
     x,
@@ -13,6 +18,7 @@
     visible = true,
     background,
     color,
+    bounds,
     children,
   }: {
     x: number;
@@ -20,15 +26,39 @@
     visible?: boolean;
     background?: string;
     color?: string;
+    /** Box the tooltip must stay within — usually the hosting plot's width/height. */
+    bounds?: { width: number; height: number };
     children: Snippet;
   } = $props();
+
+  const GAP = 10;
+  const EDGE_MARGIN = 6;
+
+  let boxWidth = $state(0);
+  let boxHeight = $state(0);
+
+  const placement = $derived.by(() => {
+    const boundsWidth = bounds?.width ?? Infinity;
+    const boundsHeight = bounds?.height ?? Infinity;
+
+    let top = y - GAP - boxHeight;
+    if (top < EDGE_MARGIN) top = y + GAP;
+    top = Math.min(Math.max(top, EDGE_MARGIN), Math.max(EDGE_MARGIN, boundsHeight - boxHeight - EDGE_MARGIN));
+
+    let left = x - boxWidth / 2;
+    left = Math.min(Math.max(left, EDGE_MARGIN), Math.max(EDGE_MARGIN, boundsWidth - boxWidth - EDGE_MARGIN));
+
+    return { left, top };
+  });
 </script>
 
 {#if visible}
   <div
     class="dct-tooltip"
-    style:left="{x}px"
-    style:top="{y}px"
+    bind:clientWidth={boxWidth}
+    bind:clientHeight={boxHeight}
+    style:left="{placement.left}px"
+    style:top="{placement.top}px"
     style:background={background}
     style:color={color}
   >
@@ -40,7 +70,6 @@
   .dct-tooltip {
     position: absolute;
     z-index: 10;
-    transform: translate(-50%, -110%);
     pointer-events: none;
     background: var(--dct-tooltip-bg, #111827);
     color: var(--dct-tooltip-color, #fff);

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

@@ -5,6 +5,11 @@ type $$ComponentProps = {
     visible?: boolean;
     background?: string;
     color?: string;
+    /** Box the tooltip must stay within — usually the hosting plot's width/height. */
+    bounds?: {
+        width: number;
+        height: number;
+    };
     children: Snippet;
 };
 declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -47,7 +47,7 @@ export function createHoverController(args) {
             return cursor != null;
         return h.sync;
     });
-    const tooltipText = $derived(matchedRows.length ? matchedRows.map((p) => args.format()(p.row)).join('\n\n') : '');
+    const tooltipText = $derived(matchedRows.length ? matchedRows.map((p) => args.format()(p.row)).join('\n') : '');
     function onPointer(data) {
         const h = args.hover();
         if (data.length) {

package/dist/plots/bar/Plot.svelte

@@ -156,10 +156,12 @@
                 ruleStyle={marker.ruleStyle}
                 dotStyle={marker.dotStyle}
                 fontStyle={marker.fontStyle}
+                seriesColor={seg.style?.fill ?? defaultColor}
               />
             {/if}
           {/each}
         {:else}
+          {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
           <HoverMarker
             data={seriesPoints}
             ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
@@ -168,6 +170,7 @@
             ruleStyle={marker.ruleStyle}
             dotStyle={marker.dotStyle}
             fontStyle={marker.fontStyle}
+            seriesColor={segs[0]?.style?.fill ?? defaultColor}
           />
         {/if}
       {/if}

package/dist/plots/line/Plot.svelte

@@ -178,10 +178,12 @@
                 ruleStyle={marker.ruleStyle}
                 dotStyle={marker.dotStyle}
                 fontStyle={marker.fontStyle}
+                seriesColor={seg.style?.stroke?.stroke ?? defaultColor}
               />
             {/if}
           {/each}
         {:else}
+          {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
           <HoverMarker
             data={seriesPoints}
             ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
@@ -190,6 +192,7 @@
             ruleStyle={marker.ruleStyle}
             dotStyle={marker.dotStyle}
             fontStyle={marker.fontStyle}
+            seriesColor={segs[0]?.style?.stroke?.stroke ?? defaultColor}
           />
         {/if}
       {/if}

package/dist/plots/markers/HoverMarker.svelte

@@ -34,9 +34,14 @@
     ruleStyle,
     dotStyle,
     fontStyle,
+    seriesColor,
   }: Props = $props();
 
   const cfg = $derived(getConfiguration());
+
+  /** Explicit style wins; otherwise fall back to the series color, then the point's own resolved color. */
+  const resolveColor = (explicit: string | undefined, point: HoverDisplayPoint) =>
+    explicit ?? seriesColor ?? point.color;
 </script>
 
 {#if ruleX != null}
@@ -70,8 +75,8 @@
       style={{
         ...cfg.hover.dot,
         ...dotStyle,
-        ...(dotStyle?.dotFill === 'currentColor' && point.color ? { dotFill: point.color } : {}),
-        ...(dotStyle?.dotStroke === 'currentColor' && point.color ? { dotStroke: point.color } : {}),
+        dotFill: resolveColor(dotStyle?.dotFill, point),
+        dotStroke: resolveColor(dotStyle?.dotStroke, point),
       }}
     />
   {/each}
@@ -85,7 +90,7 @@
         style={{
           ...cfg.hover.font,
           ...fontStyle,
-          ...(fontStyle?.fill === 'currentColor' && point.color ? { fill: point.color } : {}),
+          fill: resolveColor(fontStyle?.fill, point),
         }}
       />
     {/each}

package/dist/plots/pyramid/Plot.svelte

@@ -262,10 +262,12 @@
                   ruleStyle={marker.ruleStyle}
                   dotStyle={marker.dotStyle}
                   fontStyle={marker.fontStyle}
+                  seriesColor={seg.style?.fill ?? defaultColor}
                 />
               {/if}
             {/each}
           {:else}
+            {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
             <HoverMarker
               data={seriesPoints}
               ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
@@ -274,6 +276,7 @@
               ruleStyle={marker.ruleStyle}
               dotStyle={marker.dotStyle}
               fontStyle={marker.fontStyle}
+              seriesColor={segs[0]?.style?.fill ?? defaultColor}
             />
           {/if}
         {/if}

package/package.json

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