@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/configuration/config.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { ChartConfig, ChartConfigInput } from '../types/configuration/styling';
-export declare const DEFAULT_CONFIG: ChartConfig;
+import type { PlotStylesConfig, PlotStylesConfigInput } from '../types/configuration/styling';
+export declare const DEFAULT_CONFIG: PlotStylesConfig;
 /** Read the live, reactive configuration. */
-export declare function getConfiguration(): ChartConfig;
+export declare function getConfiguration(): PlotStylesConfig;
 /** Deep-merge a partial override into the global configuration. Reactive. */
-export declare function setConfiguration(patch: ChartConfigInput): ChartConfig;
+export declare function setConfiguration(patch: PlotStylesConfigInput): PlotStylesConfig;
 /** Restore the shipped defaults. */
 export declare function resetConfiguration(): void;
 /** Flatten a config into the `--dct-*` custom properties used by the styles. */
-export declare function configToCssVars(c: ChartConfig): Record<string, string>;
+export declare function configToCssVars(c: PlotStylesConfig): Record<string, string>;
 /** Serialize a CSS-vars record into a `style` attribute string. */
 export declare function cssVarsStyle(vars: Record<string, string>): string;

package/dist/configuration/config.svelte.js

@@ -1,24 +1,11 @@
+import { merge } from '../utils/merge';
 /**
- * Global, reactive styling configuration for the whole package.
- *
- * One source of truth feeds two consumers:
- *   1. HTML chrome (container, legend, caption, tooltip) reads it as **CSS
- *      custom properties** — {@link configToCssVars} flattens the config and
- *      {@link ChartContainer} stamps the variables on its root so the scoped
- *      `<style>` blocks resolve them.
- *   2. Plots read it as **plain JS values** for the props svelteplot needs as
- *      numbers/strings (margins, tick font sizes, palette, gradient endpoints).
- *
- * Because the store is a module-level Svelte `$state`, calling
- * {@link setConfiguration} re-renders every chart on screen.
+ * Global, reactive styling configuration. Chrome reads it as CSS custom
+ * properties ({@link configToCssVars}); plots read it as plain values.
+ * {@link setConfiguration} re-renders every plot.
  */
 // ── Defaults ────────────────────────────────────────────────────────────────
-// Mirror the values the components shipped with, so adopting the config system
-// is visually a no-op until something is overridden — except `axis.locale`,
-// which defaults to `es-AR` instead of svelteplot's own `en-US`, and
-// `axis.compactDisplay`, which defaults to `long` instead of svelteplot's
-// own `short` (Spanish's short form is inconsistent about letter case —
-// `'1 K'` vs `'10 k'` for the same unit — while its long form isn't).
+// `axis.locale` defaults to `es-AR` and `axis.compactDisplay` to `short`.
 const text = (over) => ({
     font: 'inherit',
     size: '1rem',
@@ -32,13 +19,35 @@ export const DEFAULT_CONFIG = {
     font: 'inherit',
     color: 'currentColor',
     background: 'transparent',
-    border: 'color-mix(in srgb, currentColor 15%, transparent)',
     spacing: {
-        headerPadding: '0.75rem 0 1rem',
-        legendPadding: '0.75rem 0',
+        headerPadding: '0.5rem 0',
+        legendPadding: '0.5rem 0',
         captionPadding: '0.5rem 0',
         bleed: '12px'
     },
+    divider: {
+        color: 'color-mix(in srgb, currentColor 15%, transparent)',
+        width: '1px',
+        style: 'solid',
+        margin: '0.5rem 0px'
+    },
+    // Title and subtitle (or header), a divider, legend, plot, a player timeline,
+    // then caption (or footer). With no title, subtitle or header, the divider has nothing above
+    // it, so it isn't drawn.
+    chrome: {
+        order: [
+            'header',
+            'title',
+            'subtitle',
+            'divider',
+            'legend',
+            'plot',
+            'timeline',
+            'footer',
+            'caption'
+        ],
+        rowGap: '1rem'
+    },
     title: text({ size: '1.5rem', weight: 500, leading: '1.2' }),
     subtitle: text({
         size: '1rem',
@@ -54,8 +63,11 @@ export const DEFAULT_CONFIG = {
         titleSize: '0.875rem',
         titleWeight: 500,
         gap: '0.5rem 2rem',
-        swatchSize: '1.25rem',
+        swatchSize: '0.9rem',
         disabledOpacity: 0.12,
+        pretty: true,
+        seriesTitle: { enabled: true, text: 'Series' },
+        sizeScale: { gap: '12px' },
         navButton: {
             background: 'transparent',
             color: 'currentColor',
@@ -104,7 +116,11 @@ export const DEFAULT_CONFIG = {
         yTickPadding: 10,
         grid: false,
         locale: 'es-AR',
-        compactDisplay: 'long'
+        compactDisplay: 'short',
+        edgeTicks: {
+            x: { enabled: true, collision: 'drop-nice' },
+            y: { enabled: false, collision: 'drop-nice' }
+        }
     },
     tooltip: {
         background: '#111827',
@@ -115,21 +131,25 @@ export const DEFAULT_CONFIG = {
         border: 'none'
     },
     margins: { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' },
-    palette: ['#4f46e5', '#e6580d', '#16a34a', '#dc2626', '#0891b2', '#9333ea', '#ca8a04', '#db2777'],
-    continuous: { min: '#e0e7ff', max: '#4f46e5', labelColor: '#111827' },
+    frameClip: { tolerance: 5 },
+    // ColorBrewer Dark2 - qualitative, harmonious, and dark enough to read on white.
+    palette: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666666'],
+    symbols: ['circle', 'square', 'triangle', 'diamond', 'star', 'cross'],
+    continuous: { min: '#f7fcfd', max: '#1b9e77', labelColor: '#111827', opacityRange: [0.2, 1] },
     line: {
         strokeWidth: 3,
         dotRadius: 4,
         gap: {
             stroke: { strokeOpacity: 0.6, strokeDasharray: '4 4' },
             dots: {}
-        },
-        valueLabels: {
+        }
+    },
+    text: {
+        declutter: {
             elbowGap: 10,
             laneStep: 7,
             labelGap: 6,
-            connectorColor: '#94a3b8',
-            connectorWidth: 0.5
+            connector: { stroke: '#94a3b8', strokeWidth: 0.5 }
         }
     },
     bar: {
@@ -139,14 +159,73 @@ export const DEFAULT_CONFIG = {
         paddingOuter: 0.15
     },
     pyramid: { gap: { fillOpacity: 0.5 } },
+    area: { fillOpacity: 0.6 },
+    histogram: { inset: 1, fillOpacity: 1 },
+    box: { fillOpacity: 0.9, paddingInner: 0.4, paddingOuter: 0.2 },
     scatter: { dotRadius: 5 },
-    timeline: { axisColor: 'currentColor', activeColor: '#e6580d', thickness: 60 },
+    timeline: {
+        axisColor: 'currentColor',
+        activeColor: '#1b9e77',
+        thickness: 60,
+        gap: '12px',
+        rule: {
+            fontSize: 12,
+            activeFontSize: 20,
+            activeFontWeight: 'bold',
+            labelOpacity: 0.55,
+            axisWidth: 1.5,
+            axisOpacity: 0.7
+        },
+        player: {
+            controls: ['play', 'value', 'slider'],
+            speeds: [0.5, 1, 2],
+            stepDuration: 800,
+            background: 'color-mix(in srgb, currentColor 6%, transparent)',
+            color: 'currentColor',
+            radius: '0.5rem',
+            padding: '0.5rem 1rem',
+            gap: '1rem',
+            fontSize: '0.875rem',
+            fontWeight: 500,
+            valueWidth: '3rem',
+            button: {
+                size: '2rem',
+                background: '#1b9e77',
+                color: '#ffffff',
+                hoverBackground: '#0c4937',
+                radius: '999px'
+            },
+            track: {
+                height: '3px',
+                color: 'color-mix(in srgb, currentColor 25%, transparent)',
+                fillColor: '#1b9e77',
+                radius: '999px'
+            },
+            thumb: { size: '14px', color: '#1b9e77' },
+            toggle: {
+                background: 'transparent',
+                color: 'currentColor',
+                activeBackground: '#1b9e77',
+                activeColor: '#ffffff',
+                radius: '0.375rem',
+                fontSize: '0.75rem',
+                padding: '0.125rem 0.5rem'
+            }
+        }
+    },
     hover: {
         rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
         dot: { dotRadius: 5, dotFill: 'currentColor' },
         font: { fill: 'currentColor', fontSize: 12, dy: -18 },
         area: { fill: '#94a3b8', fillOpacity: 0.25 }
     },
+    // Beside a vertical delta (taken on x), above a horizontal one (on y).
+    delta: {
+        text: {
+            x: { dx: 12, dy: 0, lineAnchor: 'middle', textAnchor: 'start' },
+            y: { dx: 0, dy: -10, lineAnchor: 'middle', textAnchor: 'middle' }
+        }
+    },
     facet: {
         indicator: {
             background: '#111827',
@@ -164,21 +243,6 @@ export const DEFAULT_CONFIG = {
         }
     }
 };
-// ── Merge ─────────────────────────────────────────────────────────────────────
-function isPlainObject(v) {
-    return typeof v === 'object' && v !== null && !Array.isArray(v);
-}
-function merge(base, patch) {
-    const out = { ...base };
-    for (const key in patch) {
-        const pv = patch[key];
-        if (pv === undefined)
-            continue;
-        const bv = out[key];
-        out[key] = isPlainObject(bv) && isPlainObject(pv) ? merge(bv, pv) : pv;
-    }
-    return out;
-}
 // ── Reactive store ──────────────────────────────────────────────────────────
 let current = $state(structuredClone(DEFAULT_CONFIG));
 /** Read the live, reactive configuration. */
@@ -209,11 +273,15 @@ export function configToCssVars(c) {
         '--dct-font': c.font,
         '--dct-fg': c.color,
         '--dct-bg': c.background,
-        '--dct-border': c.border,
         '--dct-header-pad': c.spacing.headerPadding,
         '--dct-legend-pad': c.spacing.legendPadding,
         '--dct-caption-pad': c.spacing.captionPadding,
         '--dct-bleed': c.spacing.bleed,
+        '--dct-divider-color': c.divider.color,
+        '--dct-divider-width': c.divider.width,
+        '--dct-divider-style': c.divider.style,
+        '--dct-divider-margin': c.divider.margin,
+        '--dct-row-gap': c.chrome.rowGap,
         ...t('title', c.title),
         ...t('subtitle', c.subtitle),
         ...t('caption', c.caption),
@@ -225,6 +293,7 @@ export function configToCssVars(c) {
         '--dct-legend-title-weight': String(c.legend.titleWeight),
         '--dct-legend-gap': c.legend.gap,
         '--dct-legend-swatch': c.legend.swatchSize,
+        '--dct-legend-size-gap': c.legend.sizeScale.gap,
         '--dct-legend-nav-bg': c.legend.navButton.background,
         '--dct-legend-nav-color': c.legend.navButton.color,
         '--dct-legend-nav-size': c.legend.navButton.size,
@@ -252,6 +321,33 @@ export function configToCssVars(c) {
         '--dct-tooltip-border': c.tooltip.border,
         '--dct-timeline-axis': c.timeline.axisColor,
         '--dct-timeline-active': c.timeline.activeColor,
+        '--dct-timeline-gap': c.timeline.gap,
+        '--dct-player-bg': c.timeline.player.background,
+        '--dct-player-color': c.timeline.player.color,
+        '--dct-player-radius': c.timeline.player.radius,
+        '--dct-player-pad': c.timeline.player.padding,
+        '--dct-player-gap': c.timeline.player.gap,
+        '--dct-player-size': c.timeline.player.fontSize,
+        '--dct-player-weight': String(c.timeline.player.fontWeight),
+        '--dct-player-value-width': c.timeline.player.valueWidth,
+        '--dct-player-button-size': c.timeline.player.button.size,
+        '--dct-player-button-bg': c.timeline.player.button.background,
+        '--dct-player-button-color': c.timeline.player.button.color,
+        '--dct-player-button-hover-bg': c.timeline.player.button.hoverBackground,
+        '--dct-player-button-radius': c.timeline.player.button.radius,
+        '--dct-player-track-height': c.timeline.player.track.height,
+        '--dct-player-track-color': c.timeline.player.track.color,
+        '--dct-player-track-fill': c.timeline.player.track.fillColor,
+        '--dct-player-track-radius': c.timeline.player.track.radius,
+        '--dct-player-thumb-size': c.timeline.player.thumb.size,
+        '--dct-player-thumb-color': c.timeline.player.thumb.color,
+        '--dct-player-toggle-bg': c.timeline.player.toggle.background,
+        '--dct-player-toggle-color': c.timeline.player.toggle.color,
+        '--dct-player-toggle-active-bg': c.timeline.player.toggle.activeBackground,
+        '--dct-player-toggle-active-color': c.timeline.player.toggle.activeColor,
+        '--dct-player-toggle-radius': c.timeline.player.toggle.radius,
+        '--dct-player-toggle-size': c.timeline.player.toggle.fontSize,
+        '--dct-player-toggle-pad': c.timeline.player.toggle.padding,
         '--dct-heat-min': c.continuous.min,
         '--dct-heat-max': c.continuous.max,
         '--dct-heat-text': c.continuous.labelColor,

package/dist/configuration/fonts.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A clean, modern sans-serif that every browser and operating system already
+ * has, so nothing is downloaded: the system UI font (San Francisco, Segoe UI,
+ * Roboto, Cantarell...), then widely installed fallbacks.
+ */
+export declare const SYSTEM_FONT = "Roboto, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, system-ui, -apple-system, BlinkMacSystemFont";

package/dist/configuration/fonts.js

@@ -0,0 +1,6 @@
+/**
+ * A clean, modern sans-serif that every browser and operating system already
+ * has, so nothing is downloaded: the system UI font (San Francisco, Segoe UI,
+ * Roboto, Cantarell...), then widely installed fallbacks.
+ */
+export const SYSTEM_FONT = 'Roboto, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, system-ui, -apple-system, BlinkMacSystemFont';

package/dist/configuration/themes/compact.d.ts

@@ -1,2 +1,2 @@
-import type { ChartConfigInput } from '../../types/configuration/styling';
-export declare const COMPACT_THEME: ChartConfigInput;
+import type { PlotStylesConfigInput } from '../../types/configuration/styling';
+export declare const COMPACT_THEME: PlotStylesConfigInput;

package/dist/configuration/themes/compact.js

@@ -5,5 +5,5 @@ export const COMPACT_THEME = {
     axis: { fontSize: 11, xTickSize: 3, yTickSize: 3, xTickPadding: 6, yTickPadding: 6 },
     margins: { top: 18, right: 30, bottom: 22, left: 30 },
     line: { strokeWidth: 2, dotRadius: 3 },
-    hover: { rule: { strokeWidth: 1, strokeDasharray: '3 3' }, dot: { dotRadius: 3 } },
+    hover: { rule: { strokeWidth: 1, strokeDasharray: '3 3' }, dot: { dotRadius: 3 } }
 };

package/dist/configuration/themes/dark.d.ts

@@ -1,2 +1,2 @@
-import type { ChartConfigInput } from '../../types/configuration/styling';
-export declare const DARK_THEME: ChartConfigInput;
+import type { PlotStylesConfigInput } from '../../types/configuration/styling';
+export declare const DARK_THEME: PlotStylesConfigInput;

package/dist/configuration/themes/dark.js

@@ -1,8 +1,9 @@
+import { SYSTEM_FONT } from '../fonts';
 export const DARK_THEME = {
-    font: 'ui-sans-serif, system-ui, sans-serif',
+    font: SYSTEM_FONT,
     color: '#e5e7eb',
     background: '#0f172a',
-    border: 'color-mix(in srgb, #e5e7eb 18%, transparent)',
+    divider: { color: 'color-mix(in srgb, #e5e7eb 18%, transparent)' },
     title: { size: '1.6rem', weight: 600 },
     subtitle: { color: '#94a3b8' },
     caption: { color: '#94a3b8' },
@@ -13,9 +14,9 @@ export const DARK_THEME = {
     tooltip: { background: '#e5e7eb', color: '#0f172a' },
     facet: {
         indicator: { background: '#e5e7eb', color: '#0f172a' },
-        navButton: { background: '#e5e7eb', color: '#0f172a' },
+        navButton: { background: '#e5e7eb', color: '#0f172a' }
     },
     line: { strokeWidth: 3, dotRadius: 4 },
     timeline: { activeColor: '#38bdf8', axisColor: '#94a3b8', thickness: 60 },
-    hover: { rule: { stroke: '#38bdf8' } },
+    hover: { rule: { stroke: '#38bdf8' } }
 };

package/dist/configuration/themes/default.d.ts

@@ -1,3 +1,8 @@
-import type { ChartConfigInput } from '../../types/configuration/styling';
-/** The shipped no-op theme — `DEFAULT_CONFIG` itself, unchanged. */
-export declare const DEFAULT_THEME: ChartConfigInput;
+import type { PlotStylesConfigInput } from '../../types/configuration/styling';
+/**
+ * The shipped look: `DEFAULT_CONFIG` plus a system sans-serif font. The
+ * configuration itself keeps `font: 'inherit'`, so a plot follows its
+ * project's own font; apply this theme where there is none (a new project, a
+ * Storybook) to avoid the browser's default serif.
+ */
+export declare const DEFAULT_THEME: PlotStylesConfigInput;

package/dist/configuration/themes/default.js

@@ -1,2 +1,8 @@
-/** The shipped no-op theme — `DEFAULT_CONFIG` itself, unchanged. */
-export const DEFAULT_THEME = {};
+import { SYSTEM_FONT } from '../fonts';
+/**
+ * The shipped look: `DEFAULT_CONFIG` plus a system sans-serif font. The
+ * configuration itself keeps `font: 'inherit'`, so a plot follows its
+ * project's own font; apply this theme where there is none (a new project, a
+ * Storybook) to avoid the browser's default serif.
+ */
+export const DEFAULT_THEME = { font: SYSTEM_FONT };

package/dist/configuration/themes/editorial.d.ts

@@ -1,2 +1,2 @@
-import type { ChartConfigInput } from '../../types/configuration/styling';
-export declare const EDITORIAL_THEME: ChartConfigInput;
+import type { PlotStylesConfigInput } from '../../types/configuration/styling';
+export declare const EDITORIAL_THEME: PlotStylesConfigInput;

package/dist/configuration/themes/editorial.js

@@ -1,7 +1,7 @@
 export const EDITORIAL_THEME = {
     font: 'Georgia, "Times New Roman", serif',
     color: '#2b2118',
-    border: 'color-mix(in srgb, #2b2118 20%, transparent)',
+    divider: { color: 'color-mix(in srgb, #2b2118 20%, transparent)' },
     title: { size: '1.9rem', weight: 700, leading: '1.1', spacing: '-0.01em' },
     subtitle: { color: '#8a6d3b', size: '1.05rem' },
     caption: { color: '#8a6d3b' },
@@ -10,5 +10,5 @@ export const EDITORIAL_THEME = {
     axis: { color: '#8a6d3b', fontSize: 13, xTickSize: 6, yTickSize: 6 },
     line: { strokeWidth: 5, dotRadius: 5 },
     timeline: { activeColor: '#bb3e03', axisColor: '#8a6d3b', thickness: 60 },
-    hover: { rule: { stroke: '#bb3e03' } },
+    hover: { rule: { stroke: '#bb3e03' } }
 };