@fundar/data-chart-telling 0.0.9 → 0.0.11

package/README.md

@@ -157,6 +157,8 @@ Plots accept either `series` (pre-built `Series[]`) or the `data` + `x`/`y`/`z`
 | `title` | `string` | | ✅ | ✅ | ✅ | ✅ |
 | `subtitle` | `string` | | ✅ | ✅ | ✅ | ✅ |
 | `caption` | `string` | | ✅ | ✅ | ✅ | ✅ |
+| `header` | `Snippet` | | ✅ | ✅ | ✅ | ✅ |
+| `footer` | `Snippet` | | ✅ | ✅ | ✅ | ✅ |
 | `legend` | `LegendSection[]` | | ✅ | ✅ | ✅ | ✅ |
 | `segments` | `Segments<TStyle>` | `[]` | ✅ | ✅ | ✅ | ✅ |
 | `markers` | `Marker[]` | `[]` | ✅ | ✅ | ✅ | ✅ |
@@ -167,6 +169,23 @@ Plots accept either `series` (pre-built `Series[]`) or the `data` + `x`/`y`/`z`
 | `tooltip` | `TooltipProp` | | ✅ | ✅ | ✅ | ✅ |
 | `styles` | `PlotStyles` | | ✅ | ✅ | ✅ | ✅ |
 
+`header` and `footer` are Svelte 5 snippets that replace the string props when richer markup is needed (custom styles, logos, links, etc.). When `header` is provided it takes full precedence over `title`/`subtitle`; when `footer` is provided it takes full precedence over `caption`. Use the natural snippet syntax:
+
+```svelte
+<LineChart ...>
+  {#snippet header()}
+    <div style="display:flex; justify-content:space-between">
+      <h3 style="color:#2563eb">My Chart</h3>
+      <img src="/logo.svg" alt="Logo" />
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <small>Source: <a href="...">Dataset</a> · Updated Q3 2024</small>
+  {/snippet}
+</LineChart>
+```
+
 See the [PlotStyles sub-properties table](#plotstyles-sub-properties-plots) above — charts accept the same `styles` shape and pass it through to their underlying plot.  
 
 ---

package/dist/charts/Chart.svelte

@@ -5,6 +5,7 @@
   import LegendLayout from '../layout/legend/LegendLayout.svelte';
   import { getConfiguration } from '../configuration/config.svelte';
   import { provideHover } from '../layout/tooltip/hover.svelte';
+  import type { Snippet } from 'svelte';
   import type { LegendSection } from '../types/charts/legend';
   import type { HoverStrategy } from '../types/layout/tooltip';
   import type {
@@ -32,6 +33,8 @@
     subtitle,
     caption,
     legend,
+    header,
+    footer,
     data,
     facet,
     timeline,
@@ -44,6 +47,8 @@
     subtitle?: string;
     caption?: string;
     legend?: LegendSection[];
+    header?: Snippet;
+    footer?: Snippet;
     data: TRow[];
     facet?: FacetConfig<TRow>;
     timeline?: TimelineConfig<TRow>;
@@ -98,6 +103,8 @@
   {title}
   {subtitle}
   {caption}
+  {header}
+  {footer}
   legend={legend && legend.length > 0 ? legendSnippet : undefined}
 >
   {#snippet plot({ width: w, height: h })}

package/dist/charts/Chart.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { LegendSection } from '../types/charts/legend';
 import type { HoverStrategy } from '../types/layout/tooltip';
 import type { ChartPlotSnippet, FacetConfig, TimelineConfig } from '../types/charts/common';
@@ -9,6 +10,8 @@ declare function $$render<TRow extends Record<string, unknown>>(): {
         subtitle?: string;
         caption?: string;
         legend?: LegendSection[];
+        header?: Snippet;
+        footer?: Snippet;
         data: TRow[];
         facet?: FacetConfig<TRow>;
         timeline?: TimelineConfig<TRow>;

package/dist/charts/bar/Chart.svelte

@@ -25,6 +25,8 @@
     subtitle,
     caption,
     legend,
+    header,
+    footer,
     data,
     x,
     y,
@@ -71,6 +73,8 @@
   {subtitle}
   {caption}
   {legend}
+  {header}
+  {footer}
   {data}
   {facet}
   timeline={timelineConfig}

package/dist/charts/container/ChartContainer.svelte

@@ -17,6 +17,8 @@
     subtitle,
     caption,
     legend,
+    header,
+    footer,
     plot,
   }: {
     width: number;
@@ -25,6 +27,8 @@
     subtitle?: string;
     caption?: string;
     legend?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
     plot: ChartBoxSnippet;
   } = $props();
 
@@ -37,7 +41,9 @@
 </script>
 
 <div class="dct-chart" style={themeStyle} style:width="{width}px" style:height="{height}px">
-  {#if title || subtitle}
+  {#if header}
+    <div class="dct-chart__header">{@render header()}</div>
+  {:else if title || subtitle}
     <div class="dct-chart__header">
       {#if title}<h3 class="dct-chart__title">{title}</h3>{/if}
       {#if subtitle}<span class="dct-chart__subtitle">{subtitle}</span>{/if}
@@ -58,7 +64,9 @@
     {/if}
   </div>
 
-  {#if caption}
+  {#if footer}
+    <div class="dct-chart__caption">{@render footer()}</div>
+  {:else if caption}
     <div class="dct-chart__caption">
       <span>{caption}</span>
     </div>

package/dist/charts/container/ChartContainer.svelte.d.ts

@@ -7,6 +7,8 @@ type $$ComponentProps = {
     subtitle?: string;
     caption?: string;
     legend?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
     plot: ChartBoxSnippet;
 };
 declare const ChartContainer: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/charts/heatmap/Chart.svelte

@@ -26,6 +26,8 @@
     subtitle,
     caption,
     legend,
+    header,
+    footer,
     data,
     x,
     y,
@@ -74,6 +76,8 @@
   {subtitle}
   {caption}
   {legend}
+  {header}
+  {footer}
   {data}
   {facet}
   {timeline}

package/dist/charts/line/Chart.svelte

@@ -25,6 +25,8 @@
     subtitle,
     caption,
     legend,
+    header,
+    footer,
     data,
     x,
     y,
@@ -73,6 +75,8 @@
   {subtitle}
   {caption}
   {legend}
+  {header}
+  {footer}
   {data}
   {facet}
   timeline={timelineConfig}

package/dist/charts/pyramid/Chart.svelte

@@ -28,6 +28,8 @@
     subtitle,
     caption,
     legend,
+    header,
+    footer,
     data,
     x: magnitude,
     y: category,
@@ -94,6 +96,8 @@
   {subtitle}
   {caption}
   {legend}
+  {header}
+  {footer}
   {data}
   {facet}
   timeline={timelineConfig}

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

@@ -33,6 +33,7 @@ export declare function createHoverController<T extends Record<string, unknown>>
         y: AxisValue;
         label: string;
         series: string | undefined;
+        color: string | undefined;
     }[];
     readonly matchedRows: HoverPoint<T>[];
     readonly ruleX: AxisValue | null;

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

@@ -31,7 +31,7 @@ export function createHoverController(args) {
     const matchedRows = $derived(filterBySeries(matched, args.seriesFilter?.()));
     // Points highlighted in THIS facet for the in-SVG marker — no series
     // filtering, since that's the tooltip text's concern, not the marker's.
-    const highlight = $derived(matched.map(({ x, y, label, series }) => ({ x, y, label, series })));
+    const highlight = $derived(matched.map(({ x, y, label, series, color }) => ({ x, y, label, series, color })));
     // Raw hover position — available whenever there are matched points.
     // PlotLayout gates actual display with impliesRuleX/Y + the marker's ruleX/Y props.
     const ruleX = $derived(matched.length > 0 ? args.hover().activeX : null);

package/dist/types/charts/props.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { Accessor, AxisValue, ScalesConfig, MarginConfig } from '../plots/common';
 import type { PlotStyles, Segments } from '../plots/styles';
 import type { Marker } from '../plots/markers';
@@ -19,6 +20,8 @@ export type ChartProps<TRow extends Record<string, unknown>, TSegmentStyle exten
     title?: string;
     subtitle?: string;
     caption?: string;
+    header?: Snippet;
+    footer?: Snippet;
     legend?: LegendSection[];
     data: TRow[];
     x: Accessor<TRow, AxisValue>;

package/package.json

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