@opendata-ai/openchart-svelte 8.0.0-rc.2 → 8.0.0-rc.21

package/src/Graph.svelte

@@ -1,119 +0,0 @@
-<!--
-  Graph component: Svelte 5 wrapper around the vanilla adapter.
-
-  Mounts a graph instance on render, updates when spec changes,
-  and cleans up on unmount. All heavy lifting is done by the vanilla
-  createGraph() function.
-
-  Exposes imperative methods via component exports for programmatic
-  control (search, zoom, select).
--->
-<script lang="ts">
-import type { DarkMode, GraphSpec, ThemeConfig } from '@opendata-ai/openchart-core';
-import {
-  createGraph,
-  type GraphInstance,
-  type GraphMountOptions,
-} from '@opendata-ai/openchart-vanilla';
-import { onMount, untrack } from 'svelte';
-import { getVizDarkMode, getVizTheme } from './context.js';
-
-let {
-  spec,
-  theme,
-  darkMode,
-  onnodeclick,
-  onnodedoubleclick,
-  onselectionchange,
-  class: className,
-  style,
-}: {
-  spec: GraphSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  onnodeclick?: (node: Record<string, unknown>) => void;
-  onnodedoubleclick?: (node: Record<string, unknown>) => void;
-  onselectionchange?: (nodeIds: string[]) => void;
-  class?: string;
-  style?: string;
-} = $props();
-
-let containerEl: HTMLDivElement;
-let instance: GraphInstance | null = null;
-
-const ctxTheme = getVizTheme();
-const ctxDarkMode = getVizDarkMode();
-
-onMount(() => {
-  return () => {
-    instance?.destroy();
-    instance = null;
-  };
-});
-
-let prevSpec = '';
-
-// Effect 1: Mount/recreate graph on theme/darkMode changes.
-$effect(() => {
-  const resolvedTheme = theme ?? ctxTheme?.();
-  const resolvedDarkMode = darkMode ?? ctxDarkMode?.();
-  const currentSpec = untrack(() => spec);
-
-  instance?.destroy();
-
-  const options: GraphMountOptions = {
-    theme: resolvedTheme,
-    darkMode: resolvedDarkMode,
-    onNodeClick: (node: Record<string, unknown>) => untrack(() => onnodeclick)?.(node),
-    onNodeDoubleClick: (node: Record<string, unknown>) => untrack(() => onnodedoubleclick)?.(node),
-    onSelectionChange: (nodeIds: string[]) => untrack(() => onselectionchange)?.(nodeIds),
-    responsive: true,
-  };
-
-  instance = createGraph(containerEl, currentSpec, options);
-  prevSpec = JSON.stringify(currentSpec);
-});
-
-// Effect 2: Update graph when spec changes (no destroy/recreate).
-$effect(() => {
-  const currentSpec = spec;
-  if (!instance) return;
-
-  const specString = JSON.stringify(currentSpec);
-  if (specString !== prevSpec) {
-    prevSpec = specString;
-    instance.update(currentSpec);
-  }
-});
-
-// Imperative methods exposed via component exports
-export function search(query: string): void {
-  instance?.search(query);
-}
-
-export function clearSearch(): void {
-  instance?.clearSearch();
-}
-
-export function zoomToFit(): void {
-  instance?.zoomToFit();
-}
-
-export function zoomToNode(nodeId: string): void {
-  instance?.zoomToNode(nodeId);
-}
-
-export function selectNode(nodeId: string): void {
-  instance?.selectNode(nodeId);
-}
-
-export function getSelectedNodes(): string[] {
-  return instance?.getSelectedNodes() ?? [];
-}
-</script>
-
-<div
-  bind:this={containerEl}
-  class={className ? `oc-graph-root ${className}` : 'oc-graph-root'}
-  {style}
-></div>

package/src/Sankey.svelte

@@ -1,94 +0,0 @@
-<!--
-  Sankey component: Svelte 5 wrapper around the vanilla adapter.
-
-  Mounts a sankey instance on render, updates when spec changes,
-  and cleans up on unmount. All heavy lifting is done by the vanilla
-  createSankey() function.
--->
-<script lang="ts">
-import type { DarkMode, SankeySpec, ThemeConfig } from '@opendata-ai/openchart-core';
-import {
-  createSankey,
-  type SankeyInstance,
-  type SankeyMountOptions,
-} from '@opendata-ai/openchart-vanilla';
-import { onMount, untrack } from 'svelte';
-import { getVizDarkMode, getVizTheme } from './context.js';
-
-let {
-  spec,
-  theme,
-  darkMode,
-  onnodeclick,
-  onlinkclick,
-  onnodehover,
-  onlinkhover,
-  class: className,
-  style,
-}: {
-  spec: SankeySpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  onnodeclick?: (node: Record<string, unknown>) => void;
-  onlinkclick?: (link: Record<string, unknown>) => void;
-  onnodehover?: (node: Record<string, unknown> | null) => void;
-  onlinkhover?: (link: Record<string, unknown> | null) => void;
-  class?: string;
-  style?: string;
-} = $props();
-
-let containerEl: HTMLDivElement;
-let instance: SankeyInstance | null = null;
-
-const ctxTheme = getVizTheme();
-const ctxDarkMode = getVizDarkMode();
-
-onMount(() => {
-  return () => {
-    instance?.destroy();
-    instance = null;
-  };
-});
-
-let prevSpec = '';
-
-// Effect 1: Mount/recreate sankey on theme/darkMode changes.
-$effect(() => {
-  const resolvedTheme = theme ?? ctxTheme?.();
-  const resolvedDarkMode = darkMode ?? ctxDarkMode?.();
-  const currentSpec = untrack(() => spec);
-
-  instance?.destroy();
-
-  const options: SankeyMountOptions = {
-    theme: resolvedTheme,
-    darkMode: resolvedDarkMode,
-    onNodeClick: (node: Record<string, unknown>) => untrack(() => onnodeclick)?.(node),
-    onLinkClick: (link: Record<string, unknown>) => untrack(() => onlinkclick)?.(link),
-    onNodeHover: (node: Record<string, unknown> | null) => untrack(() => onnodehover)?.(node),
-    onLinkHover: (link: Record<string, unknown> | null) => untrack(() => onlinkhover)?.(link),
-    responsive: true,
-  };
-
-  instance = createSankey(containerEl, currentSpec, options);
-  prevSpec = JSON.stringify(currentSpec);
-});
-
-// Effect 2: Update sankey when spec changes (no destroy/recreate).
-$effect(() => {
-  const currentSpec = spec;
-  if (!instance) return;
-
-  const specString = JSON.stringify(currentSpec);
-  if (specString !== prevSpec) {
-    prevSpec = specString;
-    instance.update(currentSpec);
-  }
-});
-</script>
-
-<div
-  bind:this={containerEl}
-  class={className ? `oc-sankey-root ${className}` : 'oc-sankey-root'}
-  {style}
-></div>

package/src/ThemeProvider.svelte

@@ -1,27 +0,0 @@
-<!--
-  VizThemeProvider: provides a theme and dark mode preference to all
-  descendant Chart, DataTable, and Graph components.
-
-  Components use the context values as fallbacks when no explicit
-  `theme` or `darkMode` prop is passed.
--->
-<script lang="ts">
-import type { DarkMode, ThemeConfig } from '@opendata-ai/openchart-core';
-import type { Snippet } from 'svelte';
-import { setVizDarkMode, setVizTheme } from './context.js';
-
-let {
-  theme,
-  darkMode,
-  children,
-}: {
-  theme: ThemeConfig | undefined;
-  darkMode?: DarkMode;
-  children: Snippet;
-} = $props();
-
-setVizTheme(() => theme);
-setVizDarkMode(() => darkMode);
-</script>
-
-{@render children()}

package/src/TileMap.svelte

@@ -1,112 +0,0 @@
-<!--
-  TileMap component: Svelte 5 wrapper around the vanilla adapter.
-
-  Mounts a tilemap instance on render, updates when spec changes,
-  and cleans up on unmount. All heavy lifting is done by the vanilla
-  createTileMap() function.
--->
-<script lang="ts">
-import type { DarkMode, ThemeConfig, TileMapSpec } from '@opendata-ai/openchart-core';
-import {
-  createTileMap,
-  type TileMapInstance,
-  type TileMapMountOptions,
-} from '@opendata-ai/openchart-vanilla';
-import { onMount, untrack } from 'svelte';
-import { getVizDarkMode, getVizTheme } from './context.js';
-
-let {
-  spec,
-  theme,
-  darkMode,
-  ontileclick,
-  ontilehover,
-  class: className,
-  style,
-}: {
-  spec: TileMapSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  ontileclick?: (tile: {
-    stateCode: string;
-    stateName: string;
-    value: number | null;
-    data: Record<string, unknown>;
-  }) => void;
-  ontilehover?: (
-    tile: {
-      stateCode: string;
-      stateName: string;
-      value: number | null;
-      data: Record<string, unknown>;
-    } | null,
-  ) => void;
-  class?: string;
-  style?: string;
-} = $props();
-
-let containerEl: HTMLDivElement;
-let instance: TileMapInstance | null = null;
-
-const ctxTheme = getVizTheme();
-const ctxDarkMode = getVizDarkMode();
-
-onMount(() => {
-  return () => {
-    instance?.destroy();
-    instance = null;
-  };
-});
-
-let prevSpec = '';
-
-// Effect 1: Mount/recreate tilemap on theme/darkMode changes.
-$effect(() => {
-  const resolvedTheme = theme ?? ctxTheme?.();
-  const resolvedDarkMode = darkMode ?? ctxDarkMode?.();
-  const currentSpec = untrack(() => spec);
-
-  instance?.destroy();
-
-  const options: TileMapMountOptions = {
-    theme: resolvedTheme,
-    darkMode: resolvedDarkMode,
-    onTileClick: (tile: {
-      stateCode: string;
-      stateName: string;
-      value: number | null;
-      data: Record<string, unknown>;
-    }) => untrack(() => ontileclick)?.(tile),
-    onTileHover: (
-      tile: {
-        stateCode: string;
-        stateName: string;
-        value: number | null;
-        data: Record<string, unknown>;
-      } | null,
-    ) => untrack(() => ontilehover)?.(tile),
-    responsive: true,
-  };
-
-  instance = createTileMap(containerEl, currentSpec, options);
-  prevSpec = JSON.stringify(currentSpec);
-});
-
-// Effect 2: Update tilemap when spec changes (no destroy/recreate).
-$effect(() => {
-  const currentSpec = spec;
-  if (!instance) return;
-
-  const specString = JSON.stringify(currentSpec);
-  if (specString !== prevSpec) {
-    prevSpec = specString;
-    instance.update(currentSpec);
-  }
-});
-</script>
-
-<div
-  bind:this={containerEl}
-  class={className ? `oc-tilemap-root ${className}` : 'oc-tilemap-root'}
-  {style}
-></div>

package/src/Visualization.svelte

@@ -1,54 +0,0 @@
-<!--
-  Visualization routing component: renders Chart, DataTable, or Graph
-  based on the spec type. Use this when rendering arbitrary VizSpec values.
-
-  For event handlers, use the specific component (Chart, DataTable, Graph) directly.
--->
-<script lang="ts">
-import type { DarkMode, ThemeConfig, VizSpec } from '@opendata-ai/openchart-core';
-import {
-  isBarListSpec,
-  isGraphSpec,
-  isMapSpec,
-  isSankeySpec,
-  isTableSpec,
-  isTileMapSpec,
-} from '@opendata-ai/openchart-core';
-import BarList from './BarList.svelte';
-import Chart from './Chart.svelte';
-import DataTable from './DataTable.svelte';
-import GeoMap from './GeoMap.svelte';
-import Graph from './Graph.svelte';
-import Sankey from './Sankey.svelte';
-import TileMap from './TileMap.svelte';
-
-let {
-  spec,
-  theme,
-  darkMode,
-  class: className,
-  style,
-}: {
-  spec: VizSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  class?: string;
-  style?: string;
-} = $props();
-</script>
-
-{#if isTableSpec(spec)}
-  <DataTable {spec} {theme} {darkMode} class={className} {style} />
-{:else if isGraphSpec(spec)}
-  <Graph {spec} {theme} {darkMode} class={className} {style} />
-{:else if isSankeySpec(spec)}
-  <Sankey {spec} {theme} {darkMode} class={className} {style} />
-{:else if isTileMapSpec(spec)}
-  <TileMap {spec} {theme} {darkMode} class={className} {style} />
-{:else if isBarListSpec(spec)}
-  <BarList {spec} {theme} {darkMode} class={className} {style} />
-{:else if isMapSpec(spec)}
-  <GeoMap {spec} {theme} {darkMode} class={className} {style} />
-{:else}
-  <Chart {spec} {theme} {darkMode} class={className} {style} />
-{/if}

package/src/__tests__/Chart.test.ts

@@ -1,134 +0,0 @@
-import type { ChartSpec } from '@opendata-ai/openchart-core';
-import { cleanup, render, waitFor } from '@testing-library/svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Chart from '../Chart.svelte';
-
-// ---------------------------------------------------------------------------
-// Test data
-// ---------------------------------------------------------------------------
-
-const lineSpec: ChartSpec = {
-  mark: 'line',
-  data: [
-    { date: '2020-01-01', value: 10, country: 'US' },
-    { date: '2021-01-01', value: 40, country: 'US' },
-    { date: '2020-01-01', value: 15, country: 'UK' },
-    { date: '2021-01-01', value: 35, country: 'UK' },
-  ],
-  encoding: {
-    x: { field: 'date', type: 'temporal' },
-    y: { field: 'value', type: 'quantitative' },
-    color: { field: 'country', type: 'nominal' },
-  },
-  chrome: {
-    title: 'GDP Growth',
-    subtitle: 'US vs UK over time',
-    source: 'World Bank',
-  },
-};
-
-const barSpec: ChartSpec = {
-  mark: 'bar',
-  data: [
-    { name: 'A', value: 10 },
-    { name: 'B', value: 30 },
-    { name: 'C', value: 20 },
-  ],
-  encoding: {
-    x: { field: 'value', type: 'quantitative' },
-    y: { field: 'name', type: 'nominal' },
-  },
-  chrome: {
-    title: 'Updated Title',
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Helper: render Chart and wait for SVG to appear ($effect is deferred)
-// ---------------------------------------------------------------------------
-
-async function renderChart(props: { spec: ChartSpec; [key: string]: unknown }) {
-  const result = render(Chart, { props });
-  await waitFor(() => {
-    expect(result.container.querySelector('svg')).not.toBeNull();
-  });
-  return result;
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-afterEach(() => {
-  cleanup();
-});
-
-describe('<Chart />', () => {
-  it('renders an SVG element', async () => {
-    const { container } = await renderChart({ spec: lineSpec });
-    const svg = container.querySelector('svg');
-    expect(svg).not.toBeNull();
-    expect(svg?.getAttribute('class')).toBe('oc-chart');
-  });
-
-  it('renders chrome text elements', async () => {
-    const { container } = await renderChart({ spec: lineSpec });
-
-    const title = container.querySelector('.oc-title');
-    expect(title).not.toBeNull();
-    expect(title?.textContent).toBe('GDP Growth');
-
-    const subtitle = container.querySelector('.oc-subtitle');
-    expect(subtitle?.textContent).toBe('US vs UK over time');
-
-    const source = container.querySelector('.oc-source');
-    expect(source?.textContent).toBe('World Bank');
-  });
-
-  it('spec changes trigger re-render', async () => {
-    const { container, rerender } = await renderChart({ spec: lineSpec });
-
-    const titleBefore = container.querySelector('.oc-title');
-    expect(titleBefore?.textContent).toBe('GDP Growth');
-
-    await rerender({ spec: barSpec });
-    await waitFor(() => {
-      expect(container.querySelector('.oc-title')?.textContent).toBe('Updated Title');
-    });
-  });
-
-  it('unmounting cleans up chart instance', async () => {
-    const { container, unmount } = await renderChart({ spec: lineSpec });
-
-    const svgBefore = container.querySelector('svg');
-    expect(svgBefore).not.toBeNull();
-
-    unmount();
-
-    expect(container.querySelector('svg')).toBeNull();
-  });
-
-  it('className prop passes through to wrapper div', async () => {
-    const { container } = await renderChart({ spec: lineSpec, class: 'my-chart' });
-
-    const wrapper = container.firstElementChild as HTMLElement;
-    expect(wrapper?.className).toContain('my-chart');
-  });
-
-  it('renders with dark mode option', async () => {
-    const { container } = await renderChart({ spec: lineSpec, darkMode: 'force' });
-
-    const svg = container.querySelector('svg');
-    expect(svg).not.toBeNull();
-  });
-
-  it('style prop passes through to wrapper div', async () => {
-    const { container } = await renderChart({
-      spec: lineSpec,
-      style: 'border: 1px solid red',
-    });
-
-    const wrapper = container.firstElementChild as HTMLElement;
-    expect(wrapper?.style.border).toBe('1px solid red');
-  });
-});

package/src/__tests__/ChartStory.test.ts

@@ -1,64 +0,0 @@
-import type { ChartSpec } from '@opendata-ai/openchart-core';
-import { cleanup, render, waitFor } from '@testing-library/svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import Harness from './ChartStoryHarness.svelte';
-
-const baseSpec: ChartSpec = {
-  mark: 'line',
-  data: [
-    { year: '2008', value: 10, country: 'US' },
-    { year: '2012', value: 40, country: 'US' },
-    { year: '2016', value: 25, country: 'US' },
-  ],
-  encoding: {
-    x: { field: 'year', type: 'ordinal' },
-    y: { field: 'value', type: 'quantitative' },
-  },
-  chrome: { title: 'Base' },
-};
-
-const steps = [
-  {},
-  { spec: { chrome: { title: 'One' } } },
-  { spec: { chrome: { subtitle: 'Two' } } },
-];
-
-describe('ChartStory (Svelte)', () => {
-  afterEach(cleanup);
-
-  it('renders the chart panel and one block per step', async () => {
-    const { container } = render(Harness, { props: { spec: baseSpec, steps } });
-
-    await waitFor(() => {
-      expect(container.querySelector('svg')).not.toBeNull();
-    });
-
-    expect(container.querySelectorAll('[data-oc-story-step]')).toHaveLength(3);
-  });
-
-  it('drives the story from the controlled step prop', async () => {
-    const { container, rerender } = render(Harness, { props: { spec: baseSpec, steps, step: 0 } });
-
-    await waitFor(() => {
-      expect(container.querySelector('svg')).not.toBeNull();
-    });
-
-    await rerender({ spec: baseSpec, steps, step: 2 });
-
-    await waitFor(() => {
-      expect(container.querySelector('.oc-title')?.textContent).toBe('One');
-      expect(container.querySelector('.oc-subtitle')?.textContent).toBe('Two');
-    });
-  });
-
-  it('tears down the chart on unmount', async () => {
-    const { container, unmount } = render(Harness, { props: { spec: baseSpec, steps } });
-
-    await waitFor(() => {
-      expect(container.querySelector('svg')).not.toBeNull();
-    });
-
-    unmount();
-    expect(container.querySelector('svg')).toBeNull();
-  });
-});

package/src/__tests__/ChartStoryHarness.svelte

@@ -1,13 +0,0 @@
-<!-- Test harness: supplies narrative snippets to ChartStory. -->
-<script lang="ts">
-import type { ChartSpec } from '@opendata-ai/openchart-core';
-import ChartStory from '../ChartStory.svelte';
-
-let { spec, steps, step }: { spec: ChartSpec; steps: unknown[]; step?: number } = $props();
-</script>
-
-{#snippet intro()}<p>Intro</p>{/snippet}
-{#snippet middle()}<p>Middle</p>{/snippet}
-{#snippet end()}<p>End</p>{/snippet}
-
-<ChartStory {spec} steps={steps as never} narrative={[intro, middle, end]} {step} />