@fundar/data-chart-telling 0.0.6 → 0.0.8

package/dist/charts/Chart.svelte

@@ -108,6 +108,7 @@
         progress={timeline.progress}
         values={timeline.values}
         orientation={timeline.orientation}
+        show={timeline.show}
         thickness={timeline.thickness ?? cfg.timeline.thickness}
         filterMode={timeline.filterMode}
         interpolate={typeof timeline.interpolate === 'object' ? timeline.interpolate : undefined}

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/layout/timeline/TimelineLayout.svelte

@@ -22,6 +22,7 @@
     progress,
     values,
     orientation = 'vertical',
+    show = true,
     thickness = 60,
     filterMode = 'exact',
     interpolate,
@@ -34,6 +35,7 @@
     progress: number;
     values?: TimeValue[];
     orientation?: Orientation;
+    show?: boolean;
     thickness?: number;
     filterMode?: 'exact' | 'upTo';
     interpolate?: TimelineInterpolation<TRow>;
@@ -126,32 +128,37 @@
   });
 
   const isVertical = $derived(orientation === 'vertical');
-  const gap = 12;
+  const gap = $derived(show ? 12 : 0);
+  const effectiveThickness = $derived(show ? thickness : 0);
   const innerWidth = $derived(
-    Math.max(0, isVertical ? width - thickness - gap : width),
+    Math.max(0, isVertical ? width - effectiveThickness - gap : width),
   );
   const innerHeight = $derived(
-    Math.max(0, isVertical ? height : height - thickness - gap),
+    Math.max(0, isVertical ? height : height - effectiveThickness - gap),
   );
 </script>
 
 {#if isVertical}
-  <div class="dct-timeline dct-timeline--vertical" style:width="{width}px" style:height="{height}px">
+  <div class="dct-timeline dct-timeline--vertical" style:width="{width}px" style:height="{height}px" style:gap="{gap}px">
     <div class="dct-timeline__plot">
       {@render child({ selectedValue, data: filtered, width: innerWidth, height: innerHeight })}
     </div>
-    <div class="dct-timeline__gutter" style:width="{thickness}px">
-      <Timeline currentValue={selectedValue} values={steps} orientation="vertical" width={thickness} height={innerHeight} />
-    </div>
+    {#if show}
+      <div class="dct-timeline__gutter" style:width="{thickness}px">
+        <Timeline currentValue={selectedValue} values={steps} orientation="vertical" width={thickness} height={innerHeight} />
+      </div>
+    {/if}
   </div>
 {:else}
-  <div class="dct-timeline dct-timeline--horizontal" style:width="{width}px" style:height="{height}px">
+  <div class="dct-timeline dct-timeline--horizontal" style:width="{width}px" style:height="{height}px" style:gap="{gap}px">
     <div class="dct-timeline__plot">
       {@render child({ selectedValue, data: filtered, width: innerWidth, height: innerHeight })}
     </div>
-    <div class="dct-timeline__gutter" style:height="{thickness}px">
-      <Timeline currentValue={selectedValue} values={steps} orientation="horizontal" width={innerWidth} height={thickness} />
-    </div>
+    {#if show}
+      <div class="dct-timeline__gutter" style:height="{thickness}px">
+        <Timeline currentValue={selectedValue} values={steps} orientation="horizontal" width={innerWidth} height={thickness} />
+      </div>
+    {/if}
   </div>
 {/if}
 
@@ -161,11 +168,9 @@
   }
   .dct-timeline--vertical {
     flex-direction: row;
-    gap: 12px;
   }
   .dct-timeline--horizontal {
     flex-direction: column;
-    gap: 12px;
   }
   .dct-timeline__plot {
     flex: 1 1 auto;

package/dist/layout/timeline/TimelineLayout.svelte.d.ts

@@ -7,6 +7,7 @@ declare function $$render<TRow extends Record<string, unknown>>(): {
         progress: number;
         values?: TimeValue[];
         orientation?: Orientation;
+        show?: boolean;
         thickness?: number;
         filterMode?: "exact" | "upTo";
         interpolate?: TimelineInterpolation<TRow>;

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/types/charts/common.d.ts

@@ -52,6 +52,7 @@ export type TimelineConfig<TRow extends Record<string, unknown>> = {
     progress: number;
     values?: TimeValue[];
     orientation?: Orientation;
+    show?: boolean;
     thickness?: number;
     filterMode?: 'exact' | 'upTo';
     interpolate?: boolean | TimelineInterpolation<TRow>;

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.6",
+  "version": "0.0.8",
   "type": "module",
   "files": [
     "dist"