@opendata-ai/openchart-vue 2.0.0

package/src/Graph.ts

@@ -0,0 +1,179 @@
+/**
+ * Vue Graph component: thin 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 defineExpose for use with useGraph().
+ */
+
+import type { DarkMode, GraphSpec, ThemeConfig } from '@opendata-ai/openchart-core';
+import {
+  createGraph,
+  type GraphInstance,
+  type GraphMountOptions,
+} from '@opendata-ai/openchart-vanilla';
+import {
+  type CSSProperties,
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  onUnmounted,
+  type PropType,
+  ref,
+  watch,
+} from 'vue';
+import { VizDarkModeKey, VizThemeKey } from './context';
+
+export interface GraphProps {
+  spec: GraphSpec;
+  theme?: ThemeConfig;
+  darkMode?: DarkMode;
+  class?: string;
+  style?: string | CSSProperties;
+}
+
+export const Graph = defineComponent({
+  name: 'Graph',
+  props: {
+    spec: {
+      type: Object as PropType<GraphSpec>,
+      required: true,
+    },
+    theme: {
+      type: Object as PropType<ThemeConfig>,
+      default: undefined,
+    },
+    darkMode: {
+      type: String as PropType<DarkMode>,
+      default: undefined,
+    },
+    class: {
+      type: String,
+      default: undefined,
+    },
+    style: {
+      type: [String, Object] as PropType<string | CSSProperties>,
+      default: undefined,
+    },
+  },
+  emits: {
+    'node-click': (_node: Record<string, unknown>) => true,
+    'node-double-click': (_node: Record<string, unknown>) => true,
+    'selection-change': (_nodeIds: string[]) => true,
+  },
+  setup(props, { emit, expose }) {
+    const containerRef = ref<HTMLDivElement | null>(null);
+    let instance: GraphInstance | null = null;
+    let prevSpec = '';
+
+    // Inject theme/darkMode from provider as fallbacks
+    const contextTheme = inject(VizThemeKey, undefined);
+    const contextDarkMode = inject(VizDarkModeKey, undefined);
+
+    function resolveTheme(): ThemeConfig | undefined {
+      return props.theme ?? contextTheme?.value;
+    }
+
+    function resolveDarkMode(): DarkMode | undefined {
+      return props.darkMode ?? contextDarkMode?.value;
+    }
+
+    function mountGraph() {
+      const container = containerRef.value;
+      if (!container) return;
+
+      const options: GraphMountOptions = {
+        theme: resolveTheme(),
+        darkMode: resolveDarkMode(),
+        onNodeClick: (node: Record<string, unknown>) => emit('node-click', node),
+        onNodeDoubleClick: (node: Record<string, unknown>) => emit('node-double-click', node),
+        onSelectionChange: (nodeIds: string[]) => emit('selection-change', nodeIds),
+        responsive: true,
+      };
+
+      instance = createGraph(container, props.spec, options);
+      prevSpec = JSON.stringify(props.spec);
+    }
+
+    function destroyGraph() {
+      instance?.destroy();
+      instance = null;
+      prevSpec = '';
+    }
+
+    // Expose imperative methods for useGraph() composable
+    expose({
+      search(query: string) {
+        instance?.search(query);
+      },
+      clearSearch() {
+        instance?.clearSearch();
+      },
+      zoomToFit() {
+        instance?.zoomToFit();
+      },
+      zoomToNode(nodeId: string) {
+        instance?.zoomToNode(nodeId);
+      },
+      selectNode(nodeId: string) {
+        instance?.selectNode(nodeId);
+      },
+      getSelectedNodes(): string[] {
+        return instance?.getSelectedNodes() ?? [];
+      },
+      get instance() {
+        return instance;
+      },
+    });
+
+    onMounted(() => {
+      mountGraph();
+    });
+
+    onUnmounted(() => {
+      destroyGraph();
+    });
+
+    // Watch spec changes
+    watch(
+      () => JSON.stringify(props.spec),
+      (newVal) => {
+        if (!instance) return;
+        if (newVal !== prevSpec) {
+          prevSpec = newVal;
+          instance.update(props.spec);
+        }
+      },
+    );
+
+    // Recreate graph when theme or darkMode change
+    watch(
+      [
+        () => props.theme,
+        () => props.darkMode,
+        () => contextTheme?.value,
+        () => contextDarkMode?.value,
+      ],
+      () => {
+        if (!containerRef.value) return;
+        destroyGraph();
+        mountGraph();
+      },
+    );
+
+    const rootClass = () => {
+      const base = 'viz-graph-root';
+      return props.class ? `${base} ${props.class}` : base;
+    };
+
+    return () =>
+      h('div', {
+        ref: containerRef,
+        class: rootClass(),
+        style: props.style,
+      });
+  },
+});

package/src/ThemeProvider.ts

@@ -0,0 +1,41 @@
+/**
+ * VizThemeProvider: provides a theme and dark mode preference to all
+ * descendant Chart, DataTable, and Graph components without prop drilling.
+ *
+ * Components use the context values as fallbacks when no explicit
+ * `theme` or `darkMode` prop is passed.
+ */
+
+import type { DarkMode, ThemeConfig } from '@opendata-ai/openchart-core';
+import { computed, defineComponent, type PropType, provide } from 'vue';
+import { VizDarkModeKey, VizThemeKey } from './context';
+
+export interface VizThemeProviderProps {
+  theme: ThemeConfig | undefined;
+  darkMode?: DarkMode;
+}
+
+export const VizThemeProvider = defineComponent({
+  name: 'VizThemeProvider',
+  props: {
+    theme: {
+      type: Object as PropType<ThemeConfig | undefined>,
+      default: undefined,
+    },
+    darkMode: {
+      type: String as PropType<DarkMode>,
+      default: undefined,
+    },
+  },
+  setup(props, { slots }) {
+    // Wrap in computed() so changes to props propagate reactively
+    // through the injection system.
+    const themeRef = computed(() => props.theme);
+    const darkModeRef = computed(() => props.darkMode);
+
+    provide(VizThemeKey, themeRef);
+    provide(VizDarkModeKey, darkModeRef);
+
+    return () => slots.default?.();
+  },
+});

package/src/Visualization.ts

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ */
+
+import type { DarkMode, ThemeConfig, VizSpec } from '@opendata-ai/openchart-core';
+import { isGraphSpec, isTableSpec } from '@opendata-ai/openchart-core';
+import { type CSSProperties, defineComponent, h, type PropType } from 'vue';
+import { Chart } from './Chart';
+import { DataTable } from './DataTable';
+import { Graph } from './Graph';
+
+export interface VisualizationProps {
+  spec: VizSpec;
+  theme?: ThemeConfig;
+  darkMode?: DarkMode;
+  class?: string;
+  style?: string | CSSProperties;
+}
+
+export const Visualization = defineComponent({
+  name: 'Visualization',
+  props: {
+    spec: {
+      type: Object as PropType<VizSpec>,
+      required: true,
+    },
+    theme: {
+      type: Object as PropType<ThemeConfig>,
+      default: undefined,
+    },
+    darkMode: {
+      type: String as PropType<DarkMode>,
+      default: undefined,
+    },
+    class: {
+      type: String,
+      default: undefined,
+    },
+    style: {
+      type: [String, Object] as PropType<string | CSSProperties>,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    return () => {
+      const { spec, theme, darkMode, class: className, style } = props;
+      const sharedProps = { theme, darkMode, class: className, style };
+
+      if (isTableSpec(spec)) {
+        return h(DataTable, { ...sharedProps, spec });
+      }
+      if (isGraphSpec(spec)) {
+        return h(Graph, { ...sharedProps, spec });
+      }
+      return h(Chart, { ...sharedProps, spec });
+    };
+  },
+});

package/src/__tests__/Chart.test.ts

@@ -0,0 +1,139 @@
+import type { ChartSpec } from '@opendata-ai/openchart-core';
+import { flushPromises, mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { Chart } from '../Chart';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const lineSpec: ChartSpec = {
+  type: '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 = {
+  type: '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: mount Chart and wait for the vanilla adapter to render
+// ---------------------------------------------------------------------------
+
+async function mountChart(props: {
+  spec: ChartSpec;
+  class?: string;
+  darkMode?: string;
+  style?: string | Record<string, string>;
+}) {
+  const wrapper = mount(Chart, { props: props as Record<string, unknown> });
+  await flushPromises();
+  return wrapper;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('Chart', () => {
+  it('renders an SVG element', async () => {
+    const wrapper = await mountChart({ spec: lineSpec });
+    const svg = wrapper.find('svg');
+    expect(svg.exists()).toBe(true);
+    expect(svg.attributes('class')).toBe('viz-chart');
+    wrapper.unmount();
+  });
+
+  it('renders chrome text elements', async () => {
+    const wrapper = await mountChart({ spec: lineSpec });
+
+    const title = wrapper.find('.viz-title');
+    expect(title.exists()).toBe(true);
+    expect(title.text()).toBe('GDP Growth');
+
+    const subtitle = wrapper.find('.viz-subtitle');
+    expect(subtitle.text()).toBe('US vs UK over time');
+
+    const source = wrapper.find('.viz-source');
+    expect(source.text()).toBe('World Bank');
+    wrapper.unmount();
+  });
+
+  it('spec changes trigger re-render', async () => {
+    const wrapper = await mountChart({ spec: lineSpec });
+
+    const titleBefore = wrapper.find('.viz-title');
+    expect(titleBefore.text()).toBe('GDP Growth');
+
+    await wrapper.setProps({ spec: barSpec });
+    await flushPromises();
+
+    const titleAfter = wrapper.find('.viz-title');
+    expect(titleAfter.text()).toBe('Updated Title');
+    wrapper.unmount();
+  });
+
+  it('unmounting cleans up chart instance', async () => {
+    const wrapper = await mountChart({ spec: lineSpec });
+
+    const svgBefore = wrapper.find('svg');
+    expect(svgBefore.exists()).toBe(true);
+
+    wrapper.unmount();
+
+    // After unmounting, the wrapper element should be empty
+    expect(wrapper.find('svg').exists()).toBe(false);
+  });
+
+  it('class prop passes through to wrapper div', async () => {
+    const wrapper = await mountChart({ spec: lineSpec, class: 'my-chart' });
+
+    expect(wrapper.classes()).toContain('my-chart');
+    wrapper.unmount();
+  });
+
+  it('renders with dark mode option', async () => {
+    const wrapper = await mountChart({ spec: lineSpec, darkMode: 'force' });
+
+    const svg = wrapper.find('svg');
+    expect(svg.exists()).toBe(true);
+    wrapper.unmount();
+  });
+
+  it('style prop passes through to wrapper div', async () => {
+    const wrapper = await mountChart({
+      spec: lineSpec,
+      style: { border: '1px solid red' },
+    });
+
+    expect(wrapper.attributes('style')).toContain('border');
+    wrapper.unmount();
+  });
+});

package/src/__tests__/DataTable.test.ts

@@ -0,0 +1,131 @@
+import type { TableSpec } from '@opendata-ai/openchart-core';
+import { flushPromises, mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { DataTable } from '../DataTable';
+
+// ---------------------------------------------------------------------------
+// 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: mount DataTable and wait for the vanilla adapter to render
+// ---------------------------------------------------------------------------
+
+async function mountTable(props: {
+  spec: TableSpec;
+  class?: string;
+  darkMode?: string;
+  style?: string | Record<string, string>;
+}) {
+  const wrapper = mount(DataTable, { props: props as Record<string, unknown> });
+  await flushPromises();
+  return wrapper;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('DataTable', () => {
+  it('renders a table', async () => {
+    const wrapper = await mountTable({ spec: tableSpec });
+    const table = wrapper.find('table');
+    expect(table.exists()).toBe(true);
+    wrapper.unmount();
+  });
+
+  it('renders correct number of columns', async () => {
+    const wrapper = await mountTable({ spec: tableSpec });
+    const headers = wrapper.findAll('thead th');
+    expect(headers.length).toBe(3);
+    wrapper.unmount();
+  });
+
+  it('renders correct number of rows', async () => {
+    const wrapper = await mountTable({ spec: tableSpec });
+    const rows = wrapper.findAll('tbody tr');
+    expect(rows.length).toBe(3);
+    wrapper.unmount();
+  });
+
+  it('spec changes trigger re-render', async () => {
+    const wrapper = await mountTable({ spec: tableSpec });
+
+    const titleBefore = wrapper.find('.viz-table-title');
+    expect(titleBefore.text()).toBe('People Table');
+
+    await wrapper.setProps({ spec: updatedSpec });
+    await flushPromises();
+
+    const titleAfter = wrapper.find('.viz-table-title');
+    expect(titleAfter.text()).toBe('Updated Table');
+
+    const headersAfter = wrapper.findAll('thead th');
+    expect(headersAfter.length).toBe(2);
+    wrapper.unmount();
+  });
+
+  it('unmounting cleans up', async () => {
+    const wrapper = await mountTable({ spec: tableSpec });
+
+    const tableBefore = wrapper.find('table');
+    expect(tableBefore.exists()).toBe(true);
+
+    wrapper.unmount();
+
+    expect(wrapper.find('table').exists()).toBe(false);
+  });
+
+  it('class prop passes through', async () => {
+    const wrapper = await mountTable({ spec: tableSpec, class: 'my-table' });
+
+    expect(wrapper.classes()).toContain('my-table');
+    wrapper.unmount();
+  });
+
+  it('renders with dark mode option', async () => {
+    const wrapper = await mountTable({ spec: tableSpec, darkMode: 'force' });
+
+    const table = wrapper.find('table');
+    expect(table.exists()).toBe(true);
+    wrapper.unmount();
+  });
+
+  it('style prop passes through to wrapper div', async () => {
+    const wrapper = await mountTable({
+      spec: tableSpec,
+      style: { border: '1px solid red' },
+    });
+
+    expect(wrapper.attributes('style')).toContain('border');
+    wrapper.unmount();
+  });
+});

package/src/__tests__/Graph.test.ts

@@ -0,0 +1,133 @@
+import type { GraphSpec } from '@opendata-ai/openchart-core';
+import { flushPromises, mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { Graph } from '../Graph';
+
+// ---------------------------------------------------------------------------
+// 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: mount Graph and wait for the vanilla adapter to render
+// ---------------------------------------------------------------------------
+
+async function mountGraph(props: {
+  spec: GraphSpec;
+  class?: string;
+  darkMode?: string;
+  style?: string | Record<string, string>;
+}) {
+  const wrapper = mount(Graph, { props: props as Record<string, unknown> });
+  await flushPromises();
+  return wrapper;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('Graph', () => {
+  it('renders a container div', async () => {
+    const wrapper = await mountGraph({ spec: basicSpec });
+    expect(wrapper.element.tagName.toLowerCase()).toBe('div');
+    wrapper.unmount();
+  });
+
+  it('mounts graph instance with canvas element', async () => {
+    const wrapper = await mountGraph({ spec: basicSpec });
+    const canvas = wrapper.find('canvas');
+    expect(canvas.exists()).toBe(true);
+    wrapper.unmount();
+  });
+
+  it('renders chrome text elements', async () => {
+    const wrapper = await mountGraph({ spec: basicSpec });
+
+    const title = wrapper.find('.viz-title');
+    expect(title.exists()).toBe(true);
+    expect(title.text()).toBe('Test Graph');
+
+    const subtitle = wrapper.find('.viz-subtitle');
+    expect(subtitle.text()).toBe('A simple test graph');
+    wrapper.unmount();
+  });
+
+  it('spec changes trigger re-render', async () => {
+    const wrapper = await mountGraph({ spec: basicSpec });
+
+    const titleBefore = wrapper.find('.viz-title');
+    expect(titleBefore.text()).toBe('Test Graph');
+
+    await wrapper.setProps({ spec: updatedSpec });
+    await flushPromises();
+
+    const titleAfter = wrapper.find('.viz-title');
+    expect(titleAfter.text()).toBe('Updated Graph');
+    wrapper.unmount();
+  });
+
+  it('unmounting cleans up graph instance', async () => {
+    const wrapper = await mountGraph({ spec: basicSpec });
+
+    const canvasBefore = wrapper.find('canvas');
+    expect(canvasBefore.exists()).toBe(true);
+
+    wrapper.unmount();
+
+    expect(wrapper.find('canvas').exists()).toBe(false);
+  });
+
+  it('class prop passes through to wrapper div', async () => {
+    const wrapper = await mountGraph({ spec: basicSpec, class: 'my-graph' });
+
+    expect(wrapper.classes()).toContain('my-graph');
+    wrapper.unmount();
+  });
+
+  it('style prop passes through to wrapper div', async () => {
+    const wrapper = await mountGraph({
+      spec: basicSpec,
+      style: { border: '1px solid red' },
+    });
+
+    expect(wrapper.attributes('style')).toContain('border');
+    wrapper.unmount();
+  });
+
+  it('renders with dark mode option', async () => {
+    const wrapper = await mountGraph({ spec: basicSpec, darkMode: 'force' });
+
+    const canvas = wrapper.find('canvas');
+    expect(canvas.exists()).toBe(true);
+    wrapper.unmount();
+  });
+});