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

package/src/Visualization.ts

@@ -1,84 +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.
- */
-
-import type { DarkMode, ThemeConfig, VizSpec } from '@opendata-ai/openchart-core';
-import {
-  isBarListSpec,
-  isGraphSpec,
-  isMapSpec,
-  isSankeySpec,
-  isTableSpec,
-  isTileMapSpec,
-} from '@opendata-ai/openchart-core';
-import { type CSSProperties, defineComponent, h, type PropType } from 'vue';
-import { BarList } from './BarList';
-import { Chart } from './Chart';
-import { DataTable } from './DataTable';
-import { Graph } from './Graph';
-import { GeoMap } from './Map';
-import { Sankey } from './Sankey';
-import { TileMap } from './TileMap';
-
-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 });
-      }
-      if (isSankeySpec(spec)) {
-        return h(Sankey, { ...sharedProps, spec });
-      }
-      if (isTileMapSpec(spec)) {
-        return h(TileMap, { ...sharedProps, spec });
-      }
-      if (isBarListSpec(spec)) {
-        return h(BarList, { ...sharedProps, spec });
-      }
-      if (isMapSpec(spec)) {
-        return h(GeoMap, { ...sharedProps, spec });
-      }
-      return h(Chart, { ...sharedProps, spec });
-    };
-  },
-});

package/src/__tests__/Chart.test.ts

@@ -1,139 +0,0 @@
-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 = {
-  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: 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('oc-chart');
-    wrapper.unmount();
-  });
-
-  it('renders chrome text elements', async () => {
-    const wrapper = await mountChart({ spec: lineSpec });
-
-    const title = wrapper.find('.oc-title');
-    expect(title.exists()).toBe(true);
-    expect(title.text()).toBe('GDP Growth');
-
-    const subtitle = wrapper.find('.oc-subtitle');
-    expect(subtitle.text()).toBe('US vs UK over time');
-
-    const source = wrapper.find('.oc-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('.oc-title');
-    expect(titleBefore.text()).toBe('GDP Growth');
-
-    await wrapper.setProps({ spec: barSpec });
-    await flushPromises();
-
-    const titleAfter = wrapper.find('.oc-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__/ChartStory.test.ts

@@ -1,70 +0,0 @@
-import type { ChartSpec } from '@opendata-ai/openchart-core';
-import { flushPromises, mount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import { h } from 'vue';
-import { ChartStory } from '../ChartStory';
-
-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' } } },
-];
-const narrative = [h('p', 'Intro'), h('p', 'Middle'), h('p', 'End')];
-
-describe('ChartStory (Vue)', () => {
-  it('renders the chart panel and one block per step', async () => {
-    const wrapper = mount(ChartStory, { props: { spec: baseSpec, steps, narrative } });
-    await flushPromises();
-
-    expect(wrapper.find('svg').exists()).toBe(true);
-    expect(wrapper.findAll('[data-oc-story-step]')).toHaveLength(3);
-
-    wrapper.unmount();
-  });
-
-  it('drives the story from the controlled step prop', async () => {
-    const wrapper = mount(ChartStory, { props: { spec: baseSpec, steps, narrative, step: 0 } });
-    await flushPromises();
-
-    await wrapper.setProps({ step: 2 });
-    await flushPromises();
-
-    expect(wrapper.find('.oc-title').text()).toBe('One');
-    expect(wrapper.find('.oc-subtitle').text()).toBe('Two');
-
-    wrapper.unmount();
-  });
-
-  it('exposes goTo through the component instance', async () => {
-    const wrapper = mount(ChartStory, { props: { spec: baseSpec, steps, narrative } });
-    await flushPromises();
-
-    (wrapper.vm as unknown as { goTo(n: number): void }).goTo(1);
-    expect(wrapper.find('.oc-title').text()).toBe('One');
-
-    wrapper.unmount();
-  });
-
-  it('tears down the chart on unmount', async () => {
-    const wrapper = mount(ChartStory, { props: { spec: baseSpec, steps, narrative } });
-    await flushPromises();
-    expect(wrapper.find('svg').exists()).toBe(true);
-
-    wrapper.unmount();
-    expect(wrapper.find('svg').exists()).toBe(false);
-  });
-});

package/src/__tests__/DataTable.test.ts

@@ -1,131 +0,0 @@
-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('.oc-table-title');
-    expect(titleBefore.text()).toBe('People Table');
-
-    await wrapper.setProps({ spec: updatedSpec });
-    await flushPromises();
-
-    const titleAfter = wrapper.find('.oc-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

@@ -1,133 +0,0 @@
-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('.oc-title');
-    expect(title.exists()).toBe(true);
-    expect(title.text()).toBe('Test Graph');
-
-    const subtitle = wrapper.find('.oc-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('.oc-title');
-    expect(titleBefore.text()).toBe('Test Graph');
-
-    await wrapper.setProps({ spec: updatedSpec });
-    await flushPromises();
-
-    const titleAfter = wrapper.find('.oc-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();
-  });
-});