@fundar/data-chart-telling 0.0.8 → 0.0.10

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/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/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.8",
+  "version": "0.0.10",
   "type": "module",
   "files": [
     "dist"