@opendata-ai/openchart-vanilla 2.0.0

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@opendata-ai/openchart-vanilla",
+  "version": "2.0.0",
+  "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
+  "license": "Apache-2.0",
+  "author": "Riley Hilliard",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tryopendata/openchart.git",
+    "directory": "packages/vanilla"
+  },
+  "homepage": "https://github.com/tryopendata/openchart#readme",
+  "bugs": "https://github.com/tryopendata/openchart/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./simulation-worker": "./dist/simulation-worker.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "chart",
+    "visualization",
+    "svg",
+    "data-table",
+    "vanilla-js",
+    "d3"
+  ],
+  "scripts": {
+    "build": "tsup && bun build src/graph/simulation-worker.ts --outfile dist/simulation-worker.js --target=browser --format=iife",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@opendata-ai/openchart-core": "2.0.0",
+    "@opendata-ai/openchart-engine": "2.0.0",
+    "d3-force": "^3.0.0",
+    "d3-quadtree": "^3.0.1"
+  },
+  "devDependencies": {
+    "@types/d3-force": "^3.0.10",
+    "@types/d3-quadtree": "^3.0.6"
+  }
+}

package/src/__test-fixtures__/dom.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 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

@@ -0,0 +1,187 @@
+/**
+ * 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 = {
+  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',
+  },
+};
+
+export const singleSeriesLineSpec: ChartSpec = {
+  type: '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 = {
+  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 Chart',
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Column chart specs
+// ---------------------------------------------------------------------------
+
+export const columnSpec: ChartSpec = {
+  type: 'column',
+  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 = {
+  type: 'scatter',
+  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 = {
+  type: 'pie',
+  data: [
+    { category: 'Red', value: 30 },
+    { category: 'Blue', value: 50 },
+    { category: 'Green', value: 20 },
+  ],
+  encoding: {
+    color: { field: 'category', type: 'nominal' },
+    y: { field: 'value', type: 'quantitative' },
+  },
+  chrome: {
+    title: 'Market Share',
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Multi-series bar spec (grouped)
+// ---------------------------------------------------------------------------
+
+export const multiSeriesBarSpec: ChartSpec = {
+  type: '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' },
+  ],
+};