@opendata-ai/openchart-svelte 2.0.0

package/src/__tests__/DataTable.test.ts

@@ -0,0 +1,126 @@
+import type { TableSpec } from '@opendata-ai/openchart-core';
+import { cleanup, render, waitFor } from '@testing-library/svelte';
+import { afterEach, describe, expect, it } from 'vitest';
+import DataTable from '../DataTable.svelte';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const tableSpec: TableSpec = {
+  type: 'table',
+  data: [
+    { name: 'Alice', age: 30, city: 'Portland' },
+    { name: 'Bob', age: 25, city: 'Seattle' },
+    { name: 'Charlie', age: 35, city: 'Denver' },
+  ],
+  columns: [
+    { key: 'name', label: 'Name' },
+    { key: 'age', label: 'Age' },
+    { key: 'city', label: 'City' },
+  ],
+  chrome: { title: 'People Table' },
+};
+
+const updatedSpec: TableSpec = {
+  type: 'table',
+  data: [
+    { x: 1, y: 2 },
+    { x: 3, y: 4 },
+  ],
+  columns: [
+    { key: 'x', label: 'X Value' },
+    { key: 'y', label: 'Y Value' },
+  ],
+  chrome: { title: 'Updated Table' },
+};
+
+// ---------------------------------------------------------------------------
+// Helper: render DataTable and wait for the table to mount ($effect is deferred)
+// ---------------------------------------------------------------------------
+
+async function renderTable(props: { spec: TableSpec; [key: string]: unknown }) {
+  const result = render(DataTable, { props });
+  await waitFor(() => {
+    expect(result.container.querySelector('table')).not.toBeNull();
+  });
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('<DataTable />', () => {
+  it('renders a table', async () => {
+    const { container } = await renderTable({ spec: tableSpec });
+    const table = container.querySelector('table');
+    expect(table).not.toBeNull();
+  });
+
+  it('renders correct number of columns', async () => {
+    const { container } = await renderTable({ spec: tableSpec });
+    const headers = container.querySelectorAll('thead th');
+    expect(headers.length).toBe(3);
+  });
+
+  it('renders correct number of rows', async () => {
+    const { container } = await renderTable({ spec: tableSpec });
+    const rows = container.querySelectorAll('tbody tr');
+    expect(rows.length).toBe(3);
+  });
+
+  it('spec changes trigger re-render', async () => {
+    const { container, rerender } = await renderTable({ spec: tableSpec });
+
+    const titleBefore = container.querySelector('.viz-table-title');
+    expect(titleBefore?.textContent).toBe('People Table');
+
+    await rerender({ spec: updatedSpec });
+    await waitFor(() => {
+      expect(container.querySelector('.viz-table-title')?.textContent).toBe('Updated Table');
+    });
+
+    const headersAfter = container.querySelectorAll('thead th');
+    expect(headersAfter.length).toBe(2);
+  });
+
+  it('unmounting cleans up', async () => {
+    const { container, unmount } = await renderTable({ spec: tableSpec });
+
+    const tableBefore = container.querySelector('table');
+    expect(tableBefore).not.toBeNull();
+
+    unmount();
+
+    expect(container.querySelector('table')).toBeNull();
+  });
+
+  it('className passes through', async () => {
+    const { container } = await renderTable({ spec: tableSpec, class: 'my-table' });
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper?.className).toContain('my-table');
+  });
+
+  it('renders with dark mode option', async () => {
+    const { container } = await renderTable({ spec: tableSpec, darkMode: 'force' });
+
+    const table = container.querySelector('table');
+    expect(table).not.toBeNull();
+  });
+
+  it('style prop passes through to wrapper div', async () => {
+    const { container } = await renderTable({
+      spec: tableSpec,
+      style: 'border: 1px solid red',
+    });
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper?.style.border).toBe('1px solid red');
+  });
+});

package/src/__tests__/Graph.test.ts

@@ -0,0 +1,130 @@
+import type { GraphSpec } from '@opendata-ai/openchart-core';
+import { cleanup, render, waitFor } from '@testing-library/svelte';
+import { afterEach, describe, expect, it } from 'vitest';
+import Graph from '../Graph.svelte';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const basicSpec: GraphSpec = {
+  type: 'graph',
+  nodes: [
+    { id: 'a', label: 'Node A' },
+    { id: 'b', label: 'Node B' },
+    { id: 'c', label: 'Node C' },
+  ],
+  edges: [
+    { source: 'a', target: 'b' },
+    { source: 'b', target: 'c' },
+  ],
+  chrome: {
+    title: 'Test Graph',
+    subtitle: 'A simple test graph',
+  },
+};
+
+const updatedSpec: GraphSpec = {
+  type: 'graph',
+  nodes: [
+    { id: 'x', label: 'Node X' },
+    { id: 'y', label: 'Node Y' },
+  ],
+  edges: [{ source: 'x', target: 'y' }],
+  chrome: {
+    title: 'Updated Graph',
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Helper: render Graph and wait for canvas to mount ($effect is deferred)
+// ---------------------------------------------------------------------------
+
+async function renderGraph(props: { spec: GraphSpec; [key: string]: unknown }) {
+  const result = render(Graph, { props });
+  await waitFor(() => {
+    expect(result.container.querySelector('canvas')).not.toBeNull();
+  });
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('<Graph />', () => {
+  it('renders a container div', async () => {
+    const { container } = await renderGraph({ spec: basicSpec });
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper).not.toBeNull();
+    expect(wrapper.tagName.toLowerCase()).toBe('div');
+  });
+
+  it('mounts graph instance with canvas element', async () => {
+    const { container } = await renderGraph({ spec: basicSpec });
+    const canvas = container.querySelector('canvas');
+    expect(canvas).not.toBeNull();
+  });
+
+  it('renders chrome text elements', async () => {
+    const { container } = await renderGraph({ spec: basicSpec });
+
+    const title = container.querySelector('.viz-title');
+    expect(title).not.toBeNull();
+    expect(title?.textContent).toBe('Test Graph');
+
+    const subtitle = container.querySelector('.viz-subtitle');
+    expect(subtitle?.textContent).toBe('A simple test graph');
+  });
+
+  it('spec changes trigger re-render', async () => {
+    const { container, rerender } = await renderGraph({ spec: basicSpec });
+
+    const titleBefore = container.querySelector('.viz-title');
+    expect(titleBefore?.textContent).toBe('Test Graph');
+
+    await rerender({ spec: updatedSpec });
+    await waitFor(() => {
+      expect(container.querySelector('.viz-title')?.textContent).toBe('Updated Graph');
+    });
+  });
+
+  it('unmounting cleans up graph instance', async () => {
+    const { container, unmount } = await renderGraph({ spec: basicSpec });
+
+    const canvasBefore = container.querySelector('canvas');
+    expect(canvasBefore).not.toBeNull();
+
+    unmount();
+
+    expect(container.querySelector('canvas')).toBeNull();
+  });
+
+  it('className prop passes through to wrapper div', async () => {
+    const { container } = await renderGraph({ spec: basicSpec, class: 'my-graph' });
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper?.className).toContain('my-graph');
+  });
+
+  it('style prop passes through to wrapper div', async () => {
+    const { container } = await renderGraph({
+      spec: basicSpec,
+      style: 'border: 1px solid red',
+    });
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper?.style.border).toBe('1px solid red');
+  });
+
+  it('renders with dark mode option', async () => {
+    const { container } = await renderGraph({ spec: basicSpec, darkMode: 'force' });
+
+    const canvas = container.querySelector('canvas');
+    expect(canvas).not.toBeNull();
+  });
+});

package/src/__tests__/ThemeContext.test.ts

@@ -0,0 +1,106 @@
+/**
+ * Tests for VizThemeProvider context propagation.
+ *
+ * Tests that theme and dark mode contexts are correctly provided to
+ * descendant Chart components via the VizThemeProvider.
+ *
+ * Since testing context requires Svelte components that consume context,
+ * we test through the Chart component which reads context via
+ * getVizTheme() and getVizDarkMode().
+ */
+
+import type { ChartSpec, ThemeConfig } 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';
+import { DARK_MODE_KEY, THEME_KEY } from '../context.js';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const minimalSpec: ChartSpec = {
+  type: 'bar',
+  data: [
+    { name: 'A', value: 10 },
+    { name: 'B', value: 20 },
+  ],
+  encoding: {
+    x: { field: 'value', type: 'quantitative' },
+    y: { field: 'name', type: 'nominal' },
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('Theme context', () => {
+  it('Chart renders without context (graceful fallback)', async () => {
+    const { container } = render(Chart, { props: { spec: minimalSpec } });
+    await waitFor(() => {
+      expect(container.querySelector('svg')).not.toBeNull();
+    });
+  });
+
+  it('Chart receives theme from context', async () => {
+    const theme: ThemeConfig = {
+      colors: { categorical: ['#ff0000', '#00ff00', '#0000ff'] },
+    };
+
+    const { container } = render(Chart, {
+      props: { spec: minimalSpec },
+      context: new Map([[THEME_KEY, () => theme]]),
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('svg')).not.toBeNull();
+    });
+  });
+
+  it('Chart receives dark mode from context', async () => {
+    const { container } = render(Chart, {
+      props: { spec: minimalSpec },
+      context: new Map([[DARK_MODE_KEY, () => 'force']]),
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('svg')).not.toBeNull();
+    });
+  });
+
+  it('explicit theme prop overrides context theme', async () => {
+    const contextTheme: ThemeConfig = {
+      colors: { categorical: ['#111'] },
+    };
+    const propTheme: ThemeConfig = {
+      colors: { categorical: ['#222'] },
+    };
+
+    // When both context and prop are provided, prop should take priority.
+    // We just verify it renders successfully (the override logic is in the component).
+    const { container } = render(Chart, {
+      props: { spec: minimalSpec, theme: propTheme },
+      context: new Map([[THEME_KEY, () => contextTheme]]),
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('svg')).not.toBeNull();
+    });
+  });
+
+  it('explicit darkMode prop overrides context darkMode', async () => {
+    const { container } = render(Chart, {
+      props: { spec: minimalSpec, darkMode: 'off' },
+      context: new Map([[DARK_MODE_KEY, () => 'force']]),
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('svg')).not.toBeNull();
+    });
+  });
+});

package/src/__tests__/composables.test.ts

@@ -0,0 +1,101 @@
+/**
+ * Tests for useDarkMode composable.
+ *
+ * Since useDarkMode uses Svelte 5 runes ($state, $effect), it needs to run
+ * in a Svelte component context. We test by rendering a Chart component with
+ * dark mode options and verifying it renders correctly.
+ *
+ * Direct unit testing of rune-based composables outside a component context
+ * is limited in Svelte 5, so we test the observable behavior through components.
+ */
+
+import type { ChartSpec } from '@opendata-ai/openchart-core';
+import { cleanup, render, waitFor } from '@testing-library/svelte';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Chart from '../Chart.svelte';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const barSpec: ChartSpec = {
+  type: 'bar',
+  data: [
+    { name: 'A', value: 10 },
+    { name: 'B', value: 30 },
+  ],
+  encoding: {
+    x: { field: 'value', type: 'quantitative' },
+    y: { field: 'name', type: 'nominal' },
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('dark mode rendering', () => {
+  it('renders without dark mode', async () => {
+    const { container } = render(Chart, { props: { spec: barSpec } });
+    await waitFor(() => {
+      expect(container.querySelector('svg')).not.toBeNull();
+    });
+  });
+
+  it('renders with dark mode off', async () => {
+    const { container } = render(Chart, {
+      props: { spec: barSpec, darkMode: 'off' },
+    });
+    await waitFor(() => {
+      expect(container.querySelector('svg')).not.toBeNull();
+    });
+  });
+
+  it('renders with dark mode forced', async () => {
+    const { container } = render(Chart, {
+      props: { spec: barSpec, darkMode: 'force' },
+    });
+    await waitFor(() => {
+      expect(container.querySelector('svg')).not.toBeNull();
+    });
+  });
+
+  it('renders with dark mode auto', async () => {
+    const spy = vi.spyOn(window, 'matchMedia').mockImplementation(
+      (query: string) =>
+        ({
+          matches: query === '(prefers-color-scheme: dark)',
+          media: query,
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+        }) as unknown as MediaQueryList,
+    );
+
+    const { container } = render(Chart, {
+      props: { spec: barSpec, darkMode: 'auto' },
+    });
+    await waitFor(() => {
+      expect(container.querySelector('svg')).not.toBeNull();
+    });
+
+    spy.mockRestore();
+  });
+
+  it('switching dark mode re-renders chart', async () => {
+    const { container, rerender } = render(Chart, {
+      props: { spec: barSpec, darkMode: 'off' },
+    });
+    await waitFor(() => {
+      expect(container.querySelector('svg')).not.toBeNull();
+    });
+
+    await rerender({ spec: barSpec, darkMode: 'force' });
+    await waitFor(() => {
+      expect(container.querySelector('svg')).not.toBeNull();
+    });
+  });
+});

package/src/__tests__/useTableState.test.ts

@@ -0,0 +1,134 @@
+/**
+ * Tests for useTableState composable.
+ *
+ * Since useTableState uses $state runes, it requires running within a Svelte
+ * reactive context. We test by verifying the returned object's behavior
+ * directly since $state creates reactive getters/setters that work
+ * synchronously outside of $effect tracking.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { useTableState } from '../composables/useTableState.svelte.js';
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('useTableState', () => {
+  // -----------------------------------------------------------------------
+  // Default initial state
+  // -----------------------------------------------------------------------
+
+  it('initializes with default values when no options provided', () => {
+    const state = useTableState();
+
+    expect(state.sort).toBeNull();
+    expect(state.search).toBe('');
+    expect(state.page).toBe(0);
+  });
+
+  // -----------------------------------------------------------------------
+  // Custom initial state
+  // -----------------------------------------------------------------------
+
+  it('initializes with provided sort state', () => {
+    const state = useTableState({
+      sort: { column: 'name', direction: 'asc' },
+    });
+    expect(state.sort).toEqual({ column: 'name', direction: 'asc' });
+  });
+
+  it('initializes with provided search string', () => {
+    const state = useTableState({ search: 'hello' });
+    expect(state.search).toBe('hello');
+  });
+
+  it('initializes with provided page number', () => {
+    const state = useTableState({ page: 3 });
+    expect(state.page).toBe(3);
+  });
+
+  // -----------------------------------------------------------------------
+  // State setters
+  // -----------------------------------------------------------------------
+
+  it('setSort updates the sort state', () => {
+    const state = useTableState();
+
+    state.setSort({ column: 'age', direction: 'desc' });
+    expect(state.sort).toEqual({ column: 'age', direction: 'desc' });
+  });
+
+  it('setSort can clear sort by passing null', () => {
+    const state = useTableState({
+      sort: { column: 'name', direction: 'asc' },
+    });
+    expect(state.sort).toEqual({ column: 'name', direction: 'asc' });
+
+    state.setSort(null);
+    expect(state.sort).toBeNull();
+  });
+
+  it('setSearch updates the search query', () => {
+    const state = useTableState();
+
+    state.setSearch('filter text');
+    expect(state.search).toBe('filter text');
+  });
+
+  it('setPage updates the current page', () => {
+    const state = useTableState();
+
+    state.setPage(5);
+    expect(state.page).toBe(5);
+  });
+
+  // -----------------------------------------------------------------------
+  // resetState
+  // -----------------------------------------------------------------------
+
+  it('resetState restores default initial values', () => {
+    const state = useTableState();
+
+    // Change all values
+    state.setSort({ column: 'name', direction: 'asc' });
+    state.setSearch('filter text');
+    state.setPage(5);
+
+    expect(state.sort).toEqual({ column: 'name', direction: 'asc' });
+    expect(state.search).toBe('filter text');
+    expect(state.page).toBe(5);
+
+    // Reset
+    state.resetState();
+
+    expect(state.sort).toBeNull();
+    expect(state.search).toBe('');
+    expect(state.page).toBe(0);
+  });
+
+  it('resetState restores custom initial values', () => {
+    const initialState = {
+      sort: { column: 'age', direction: 'desc' as const },
+      search: 'initial',
+      page: 1,
+    };
+    const state = useTableState(initialState);
+
+    // Change all values
+    state.setSort(null);
+    state.setSearch('changed');
+    state.setPage(5);
+
+    expect(state.sort).toBeNull();
+    expect(state.search).toBe('changed');
+    expect(state.page).toBe(5);
+
+    // Reset to initial
+    state.resetState();
+
+    expect(state.sort).toEqual({ column: 'age', direction: 'desc' });
+    expect(state.search).toBe('initial');
+    expect(state.page).toBe(1);
+  });
+});

package/src/composables/useChart.svelte.ts

@@ -0,0 +1,108 @@
+/**
+ * useChart: composable for manual chart lifecycle control.
+ *
+ * Returns a Svelte action function for use with `use:chart` directive
+ * and exposes the chart instance and compiled layout.
+ *
+ * Usage:
+ * ```svelte
+ * <script>
+ *   const { action, chart, layout } = useChart(spec);
+ * </script>
+ * <div use:action></div>
+ * ```
+ *
+ * Uses .svelte.ts extension so runes ($state, $effect) work outside
+ * .svelte components.
+ */
+
+import type { ChartLayout, ChartSpec, GraphSpec } from '@opendata-ai/openchart-core';
+import { type ChartInstance, createChart, type MountOptions } from '@opendata-ai/openchart-vanilla';
+import { untrack } from 'svelte';
+
+export interface UseChartOptions {
+  /** Theme overrides. */
+  theme?: MountOptions['theme'];
+  /** Dark mode setting. */
+  darkMode?: MountOptions['darkMode'];
+  /** Data point click handler. */
+  onDataPointClick?: MountOptions['onDataPointClick'];
+  /** Enable responsive resizing. Defaults to true. */
+  responsive?: boolean;
+}
+
+export interface UseChartReturn {
+  /** Svelte action to attach to a container div. */
+  action: (node: HTMLElement) => { destroy: () => void };
+  /** The chart instance (null until mounted). */
+  readonly chart: ChartInstance | null;
+  /** The current compiled layout (null until mounted). */
+  readonly layout: ChartLayout | null;
+}
+
+export function useChart(
+  spec: () => ChartSpec | GraphSpec,
+  options?: () => UseChartOptions | undefined,
+): UseChartReturn {
+  let chart = $state<ChartInstance | null>(null);
+  let layout = $state<ChartLayout | null>(null);
+
+  function action(node: HTMLElement) {
+    let prevSpec = '';
+
+    // Effect 1: Mount/recreate on option changes
+    $effect(() => {
+      const opts = options?.();
+
+      const mountOpts: MountOptions = {
+        theme: opts?.theme,
+        darkMode: opts?.darkMode,
+        onDataPointClick: opts?.onDataPointClick,
+        responsive: opts?.responsive ?? true,
+      };
+
+      // Read spec without tracking
+      const currentSpec = untrack(() => spec());
+
+      const instance = createChart(node, currentSpec, mountOpts);
+      chart = instance;
+      layout = instance.layout;
+      prevSpec = JSON.stringify(currentSpec);
+
+      return () => {
+        instance.destroy();
+        chart = null;
+        layout = null;
+      };
+    });
+
+    // Effect 2: Update on spec change
+    $effect(() => {
+      const currentSpec = spec();
+      if (!chart) return;
+
+      const specString = JSON.stringify(currentSpec);
+      if (specString !== prevSpec) {
+        prevSpec = specString;
+        chart.update(currentSpec);
+        layout = chart.layout;
+      }
+    });
+
+    return {
+      destroy() {
+        // $effect cleanup handles teardown
+      },
+    };
+  }
+
+  return {
+    action,
+    get chart() {
+      return chart;
+    },
+    get layout() {
+      return layout;
+    },
+  };
+}