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

package/src/__test-fixtures__/dom.ts

@@ -1,70 +0,0 @@
-/**
- * Shared DOM helpers for vanilla package tests.
- *
- * Provides container creation with mocked getBoundingClientRect (needed because
- * happy-dom has no layout engine) and mouse event construction.
- */
-
-/**
- * Create an HTMLDivElement with mocked dimensions, appended to document.body.
- * happy-dom returns zero for getBoundingClientRect by default, so we provide
- * realistic values for the chart/table compilation pipeline to work with.
- */
-export function createContainer(width = 600, height = 400): HTMLDivElement {
-  const container = document.createElement('div');
-  Object.defineProperty(container, 'getBoundingClientRect', {
-    value: () => ({
-      width,
-      height,
-      top: 0,
-      left: 0,
-      right: width,
-      bottom: height,
-      x: 0,
-      y: 0,
-      toJSON: () => ({}),
-    }),
-  });
-  document.body.appendChild(container);
-  return container;
-}
-
-/**
- * Create an auto-height container: its measured height is 0 until a chart
- * SVG is mounted, then tracks the SVG's own style.height — mimicking a real
- * DOM container with no explicit height that wraps its content.
- */
-export function createAutoHeightContainer(width = 390): HTMLDivElement {
-  const container = document.createElement('div');
-  Object.defineProperty(container, 'getBoundingClientRect', {
-    value: () => {
-      const svg = container.querySelector('svg');
-      const height = svg ? Number.parseFloat((svg as SVGElement).style.height) || 0 : 0;
-      return {
-        width,
-        height,
-        top: 0,
-        left: 0,
-        right: width,
-        bottom: height,
-        x: 0,
-        y: 0,
-        toJSON: () => ({}),
-      };
-    },
-  });
-  document.body.appendChild(container);
-  return container;
-}
-
-/**
- * Create a MouseEvent with clientX/clientY coordinates.
- * happy-dom supports basic MouseEvent construction.
- */
-export function createMouseEvent(type: string, x = 100, y = 100): MouseEvent {
-  return new MouseEvent(type, {
-    bubbles: true,
-    clientX: x,
-    clientY: y,
-  });
-}

package/src/__test-fixtures__/specs.ts

@@ -1,214 +0,0 @@
-/**
- * Shared chart, table, and graph spec fixtures for vanilla package tests.
- *
- * These cover all chart types and common configurations so individual test
- * files don't need to duplicate spec definitions.
- */
-
-import type { ChartSpec, GraphSpec, TableSpec } from '@opendata-ai/openchart-engine';
-
-// ---------------------------------------------------------------------------
-// Line chart specs
-// ---------------------------------------------------------------------------
-
-export 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',
-  },
-};
-
-/**
- * Multi-series line with wrapping chrome and an explicit top legend — the
- * mobile auto-height growth scenario (long title + subtitle + legend +
- * source all stack above/below the plot).
- */
-export const longChromeLineSpec: 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' },
-  },
-  legend: { show: true, position: 'top' },
-  chrome: {
-    title:
-      'An intentionally long editorial chart title that wraps to several lines at phone widths',
-    subtitle: 'A methodological subtitle that provides additional context for readers',
-    source: 'World Bank',
-  },
-};
-
-export const singleSeriesLineSpec: ChartSpec = {
-  mark: 'line',
-  data: [
-    { date: '2020-01-01', value: 10 },
-    { date: '2021-01-01', value: 40 },
-    { date: '2022-01-01', value: 25 },
-  ],
-  encoding: {
-    x: { field: 'date', type: 'temporal' },
-    y: { field: 'value', type: 'quantitative' },
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Bar chart specs
-// ---------------------------------------------------------------------------
-
-export 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 Chart',
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Column chart specs
-// ---------------------------------------------------------------------------
-
-export const columnSpec: ChartSpec = {
-  mark: 'bar',
-  data: [
-    { category: 'Q1', revenue: 100 },
-    { category: 'Q2', revenue: 200 },
-    { category: 'Q3', revenue: 150 },
-  ],
-  encoding: {
-    x: { field: 'category', type: 'nominal' },
-    y: { field: 'revenue', type: 'quantitative' },
-  },
-  chrome: {
-    title: 'Quarterly Revenue',
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Scatter chart specs
-// ---------------------------------------------------------------------------
-
-export const scatterSpec: ChartSpec = {
-  mark: 'point',
-  data: [
-    { x: 10, y: 20, group: 'A' },
-    { x: 30, y: 40, group: 'A' },
-    { x: 50, y: 10, group: 'B' },
-    { x: 60, y: 30, group: 'B' },
-  ],
-  encoding: {
-    x: { field: 'x', type: 'quantitative' },
-    y: { field: 'y', type: 'quantitative' },
-    color: { field: 'group', type: 'nominal' },
-  },
-  chrome: {
-    title: 'Scatter Plot',
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Pie chart specs
-// ---------------------------------------------------------------------------
-
-export const pieSpec: ChartSpec = {
-  mark: 'arc',
-  data: [
-    { category: 'Red', value: 30 },
-    { category: 'Blue', value: 50 },
-    { category: 'Green', value: 20 },
-  ],
-  encoding: {
-    color: { field: 'category', type: 'nominal' },
-    theta: { field: 'value', type: 'quantitative' },
-  },
-  chrome: {
-    title: 'Market Share',
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Multi-series bar spec (grouped)
-// ---------------------------------------------------------------------------
-
-export const multiSeriesBarSpec: ChartSpec = {
-  mark: 'bar',
-  data: [
-    { name: 'A', value: 10, group: 'X' },
-    { name: 'B', value: 30, group: 'X' },
-    { name: 'A', value: 20, group: 'Y' },
-    { name: 'B', value: 15, group: 'Y' },
-  ],
-  encoding: {
-    x: { field: 'value', type: 'quantitative' },
-    y: { field: 'name', type: 'nominal' },
-    color: { field: 'group', type: 'nominal' },
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Table specs
-// ---------------------------------------------------------------------------
-
-export function makeTableSpec(overrides?: Partial<TableSpec>): TableSpec {
-  return {
-    type: 'table',
-    data: [
-      { name: 'Alice', age: 30, city: 'Portland' },
-      { name: 'Bob', age: 25, city: 'Seattle' },
-      { name: 'Charlie', age: 35, city: 'Portland' },
-      { name: 'Diana', age: 28, city: 'Denver' },
-      { name: 'Eve', age: 22, city: 'Seattle' },
-    ],
-    columns: [
-      { key: 'name', label: 'Name' },
-      { key: 'age', label: 'Age' },
-      { key: 'city', label: 'City' },
-    ],
-    chrome: { title: 'People' },
-    ...overrides,
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Graph specs
-// ---------------------------------------------------------------------------
-
-export const graphSpec: GraphSpec = {
-  type: 'graph',
-  nodes: [
-    { id: 'a', label: 'Node A', community: 'group1' },
-    { id: 'b', label: 'Node B', community: 'group1' },
-    { id: 'c', label: 'Node C', community: 'group2' },
-  ],
-  edges: [
-    { source: 'a', target: 'b' },
-    { source: 'b', target: 'c' },
-  ],
-};

package/src/__tests__/animation.test.ts

@@ -1,358 +0,0 @@
-/**
- * Animation integration tests for the vanilla renderer.
- *
- * Tests the full pipeline from spec -> compile -> render for animation-related
- * behavior. Verifies that the compiled layout carries animation config and that
- * the SVG output is correctly structured for CSS animations to work.
- *
- * Note: CSS animation keyframes and class-based triggers are defined in the
- * CSS partials under packages/core/src/styles/. These tests verify the DOM
- * structure that CSS hooks into, not the visual animation itself (which
- * requires a real browser).
- */
-
-import type { ChartSpec } from '@opendata-ai/openchart-engine';
-import { compileChart } from '@opendata-ai/openchart-engine';
-import { afterEach, describe, expect, it } from 'vitest';
-import { createContainer } from '../__test-fixtures__/dom';
-import { barSpec, columnSpec, lineSpec } from '../__test-fixtures__/specs';
-import { createChart } from '../mount';
-import { renderChartSVG } from '../svg-renderer';
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function compileAndRender(spec: ChartSpec, width = 600, height = 400) {
-  const container = createContainer(width, height);
-  const layout = compileChart(spec, { width, height });
-  const svg = renderChartSVG(layout, container);
-  return { svg, container, layout };
-}
-
-// ---------------------------------------------------------------------------
-// Cleanup
-// ---------------------------------------------------------------------------
-
-afterEach(() => {
-  document.body.innerHTML = '';
-});
-
-// ---------------------------------------------------------------------------
-// Layout carries animation config through to render
-// ---------------------------------------------------------------------------
-
-describe('animation in compiled layout', () => {
-  it('layout has animation config when spec enables animation', () => {
-    const spec = { ...barSpec, animation: true } as ChartSpec;
-    const layout = compileChart(spec, { width: 600, height: 400 });
-    expect(layout.animation).toBeDefined();
-    expect(layout.animation!.enter).toBeDefined();
-  });
-
-  it('layout has no animation config when spec omits animation', () => {
-    const layout = compileChart(barSpec, { width: 600, height: 400 });
-    expect(layout.animation).toBeUndefined();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// SVG mark structure supports CSS animation selectors
-// ---------------------------------------------------------------------------
-
-describe('SVG structure for animation CSS hooks', () => {
-  it('bar chart renders rect elements inside oc-mark groups', () => {
-    const spec = { ...barSpec, animation: true } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-
-    // CSS animations target .oc-mark-rect rect and .oc-mark-bar rect
-    const rects = svg.querySelectorAll('.oc-marks rect');
-    expect(rects.length).toBeGreaterThan(0);
-  });
-
-  it('column chart renders rect elements for vertical bars', () => {
-    const spec = { ...columnSpec, animation: true } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-
-    const rects = svg.querySelectorAll('.oc-marks rect');
-    expect(rects.length).toBeGreaterThan(0);
-  });
-
-  it('line chart renders path elements inside oc-mark-line groups', () => {
-    const spec = { ...lineSpec, animation: true } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-
-    const paths = svg.querySelectorAll('.oc-mark-line path');
-    expect(paths.length).toBeGreaterThan(0);
-  });
-
-  it('mark groups have data-mark-id attributes for targeting', () => {
-    const spec = { ...barSpec, animation: true } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-
-    const markGroups = svg.querySelectorAll('[data-mark-id]');
-    expect(markGroups.length).toBeGreaterThan(0);
-  });
-
-  it('SVG root has oc-chart class (oc-animate is added by mount, not renderer)', () => {
-    const spec = { ...barSpec, animation: true } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-    expect(svg.getAttribute('class')).toContain('oc-chart');
-    // oc-animate is added by mount.ts on first render only, not by the renderer
-    expect(svg.getAttribute('class')).not.toContain('oc-animate');
-  });
-
-  it('SVG root does not have oc-animate class when animation is disabled', () => {
-    const { svg } = compileAndRender(barSpec);
-    expect(svg.getAttribute('class')).toContain('oc-chart');
-    expect(svg.getAttribute('class')).not.toContain('oc-animate');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Animation CSS custom properties on SVG root
-// ---------------------------------------------------------------------------
-
-describe('animation CSS custom properties', () => {
-  it('sets --oc-animation-duration on SVG root', () => {
-    const spec = {
-      ...barSpec,
-      animation: { enter: { duration: 800 } },
-    } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-    expect(svg.style.getPropertyValue('--oc-animation-duration')).toBe('800ms');
-  });
-
-  it('sets --oc-animation-stagger on SVG root', () => {
-    const spec = { ...barSpec, animation: true } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-    const stagger = svg.style.getPropertyValue('--oc-animation-stagger');
-    expect(stagger).toMatch(/^\d+ms$/);
-  });
-
-  it('sets --oc-annotation-delay on SVG root', () => {
-    const spec = {
-      ...barSpec,
-      animation: { enter: true, annotationDelay: 500 },
-    } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-    expect(svg.style.getPropertyValue('--oc-annotation-delay')).toBe('500ms');
-  });
-
-  it('does not set animation custom properties when animation is disabled', () => {
-    const { svg } = compileAndRender(barSpec);
-    expect(svg.style.getPropertyValue('--oc-animation-duration')).toBe('');
-    expect(svg.style.getPropertyValue('--oc-animation-stagger')).toBe('');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// --oc-mark-index stamped on mark elements
-// ---------------------------------------------------------------------------
-
-describe('mark animation index attributes', () => {
-  it('stamps --oc-mark-index on rect mark groups', () => {
-    const spec = { ...columnSpec, animation: true } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-
-    const markGroups = svg.querySelectorAll('.oc-mark-rect');
-    expect(markGroups.length).toBeGreaterThan(0);
-
-    for (const group of markGroups) {
-      const el = group as SVGElement & ElementCSSInlineStyle;
-      const markIndex = el.style.getPropertyValue('--oc-mark-index');
-      expect(markIndex).not.toBe('');
-    }
-  });
-
-  it('stamps data-animation-index attribute on mark groups', () => {
-    const spec = { ...columnSpec, animation: true } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-
-    const markGroups = svg.querySelectorAll('[data-animation-index]');
-    expect(markGroups.length).toBeGreaterThan(0);
-
-    // Each should have a numeric index
-    for (const group of markGroups) {
-      const idx = group.getAttribute('data-animation-index');
-      expect(idx).toMatch(/^\d+$/);
-    }
-  });
-
-  it('does not stamp animation attributes when animation is disabled', () => {
-    const { svg } = compileAndRender(columnSpec);
-
-    const withAnimIdx = svg.querySelectorAll('[data-animation-index]');
-    expect(withAnimIdx.length).toBe(0);
-  });
-
-  it('stamps --oc-mark-index on line mark groups', () => {
-    const spec = { ...lineSpec, animation: true } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-
-    const lineGroups = svg.querySelectorAll('.oc-mark-line');
-    expect(lineGroups.length).toBeGreaterThan(0);
-
-    for (const group of lineGroups) {
-      const el = group as SVGElement & ElementCSSInlineStyle;
-      const markIndex = el.style.getPropertyValue('--oc-mark-index');
-      expect(markIndex).not.toBe('');
-    }
-  });
-});
-
-// ---------------------------------------------------------------------------
-// data-orient attribute for horizontal bars
-// ---------------------------------------------------------------------------
-
-describe('data-orient for horizontal bars', () => {
-  it('sets data-orient=horizontal on mark groups for horizontal bar charts', () => {
-    // barSpec has x=quantitative, y=nominal which is a horizontal bar chart
-    const spec = { ...barSpec, animation: true } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-
-    const horizontalGroups = svg.querySelectorAll('[data-orient="horizontal"]');
-    expect(horizontalGroups.length).toBeGreaterThan(0);
-  });
-
-  it('does not set data-orient=horizontal on vertical column charts', () => {
-    // columnSpec has x=nominal, y=quantitative which is a vertical column chart
-    const spec = { ...columnSpec, animation: true } as ChartSpec;
-    const { svg } = compileAndRender(spec);
-
-    const horizontalGroups = svg.querySelectorAll('[data-orient="horizontal"]');
-    expect(horizontalGroups.length).toBe(0);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Value-based stagger ordering assigns animationIndex on marks
-// ---------------------------------------------------------------------------
-
-describe('animationIndex for value-based stagger', () => {
-  it('assigns animationIndex to rect marks when stagger order is value', () => {
-    const spec = {
-      ...columnSpec,
-      animation: {
-        enter: { stagger: { order: 'value' as const } },
-      },
-    } as ChartSpec;
-    const layout = compileChart(spec, { width: 600, height: 400 });
-
-    const rectMarks = layout.marks.filter((m) => m.type === 'rect');
-    expect(rectMarks.length).toBe(3);
-
-    // Each rect mark should have animationIndex
-    for (const mark of rectMarks) {
-      const idx = (mark as unknown as { animationIndex?: number }).animationIndex;
-      expect(idx).toBeDefined();
-    }
-  });
-
-  it('orders marks by their primary quantitative value', () => {
-    // columnSpec has revenues: Q1=100, Q2=200, Q3=150
-    // Value ordering should sort by bar height (revenue)
-    const spec = {
-      ...columnSpec,
-      animation: {
-        enter: { stagger: { order: 'value' as const } },
-      },
-    } as ChartSpec;
-    const layout = compileChart(spec, { width: 600, height: 400 });
-
-    const rectMarks = layout.marks.filter((m) => m.type === 'rect');
-    const indexed = rectMarks.map((m) => ({
-      index: (m as unknown as { animationIndex: number }).animationIndex,
-    }));
-
-    // All indices should be unique
-    const indices = indexed.map((m) => m.index);
-    const uniqueIndices = new Set(indices);
-    expect(uniqueIndices.size).toBe(rectMarks.length);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// createChart mount lifecycle with animation
-// ---------------------------------------------------------------------------
-
-describe('createChart animation lifecycle', () => {
-  it('produces valid SVG on mount with animation enabled', () => {
-    const container = createContainer();
-    const spec = { ...barSpec, animation: true } as ChartSpec;
-    const chart = createChart(container, spec);
-
-    const svg = container.querySelector('svg');
-    expect(svg).not.toBeNull();
-    expect(svg?.getAttribute('class')).toContain('oc-chart');
-    expect(svg?.getAttribute('class')).toContain('oc-animate');
-
-    // Marks are rendered
-    const rects = container.querySelectorAll('.oc-marks rect');
-    expect(rects.length).toBeGreaterThan(0);
-
-    chart.destroy();
-  });
-
-  it('update re-renders chart correctly with animation', () => {
-    const container = createContainer();
-    const spec = { ...barSpec, animation: true } as ChartSpec;
-    const chart = createChart(container, spec);
-
-    // Verify initial render
-    let rects = container.querySelectorAll('.oc-marks rect');
-    const initialCount = rects.length;
-    expect(initialCount).toBeGreaterThan(0);
-
-    // Update with different data but same animation setting
-    const updatedSpec = {
-      ...barSpec,
-      data: [
-        { name: 'X', value: 50 },
-        { name: 'Y', value: 70 },
-      ],
-      animation: true,
-    } as ChartSpec;
-    chart.update(updatedSpec);
-
-    // SVG is re-rendered
-    const svg = container.querySelector('svg');
-    expect(svg).not.toBeNull();
-
-    // Marks reflect updated data
-    rects = container.querySelectorAll('.oc-marks rect');
-    expect(rects.length).toBeGreaterThan(0);
-
-    chart.destroy();
-  });
-
-  it('works correctly when animation is toggled off on update', () => {
-    const container = createContainer();
-    const specWithAnim = { ...barSpec, animation: true } as ChartSpec;
-    const chart = createChart(container, specWithAnim);
-
-    // Update with animation disabled
-    const specNoAnim = { ...barSpec, animation: false } as ChartSpec;
-    chart.update(specNoAnim);
-
-    // Chart should still render correctly
-    const svg = container.querySelector('svg');
-    expect(svg).not.toBeNull();
-    const rects = container.querySelectorAll('.oc-marks rect');
-    expect(rects.length).toBeGreaterThan(0);
-
-    chart.destroy();
-  });
-
-  it('destroy cleans up the container', () => {
-    const container = createContainer();
-    const spec = { ...barSpec, animation: true } as ChartSpec;
-    const chart = createChart(container, spec);
-
-    expect(container.querySelector('svg')).not.toBeNull();
-
-    chart.destroy();
-
-    expect(container.querySelector('svg')).toBeNull();
-  });
-});