@opendata-ai/openchart-vanilla 2.0.0 → 2.1.0

package/README.md

@@ -0,0 +1,102 @@
+# @opendata-ai/openchart-vanilla
+
+DOM rendering adapter for OpenChart. Creates SVG charts, HTML tables, and canvas-based network graphs from compiled specs. Framework-agnostic.
+
+## Install
+
+```bash
+npm install @opendata-ai/openchart-vanilla
+```
+
+You typically don't install this directly unless you're working without a framework. The framework packages (`openchart-react`, `openchart-vue`, `openchart-svelte`) include it as a dependency and wrap it with lifecycle management.
+
+## Charts
+
+```typescript
+import { createChart } from '@opendata-ai/openchart-vanilla';
+
+const chart = createChart(container, spec, {
+  darkMode: 'auto',
+  responsive: true,
+  onMarkClick: (event) => console.log(event.datum),
+  onMarkHover: (event) => showTooltip(event),
+  onMarkLeave: () => hideTooltip(),
+  onLegendToggle: (series, visible) => console.log(series, visible),
+  onAnnotationClick: (annotation, event) => console.log(annotation),
+});
+
+chart.update(newSpec);          // Re-render with new spec
+chart.resize();                 // Manual resize trigger
+chart.export('svg');            // Export as SVG string
+await chart.export('png');      // Export as PNG Blob
+chart.export('csv');            // Export data as CSV
+chart.destroy();                // Clean up DOM and observers
+```
+
+Responsive mode (default) uses a `ResizeObserver` on the container. Charts recompile at new dimensions automatically.
+
+## Tables
+
+```typescript
+import { createTable } from '@opendata-ai/openchart-vanilla';
+
+const table = createTable(container, tableSpec, {
+  responsive: true,
+  onRowClick: (row) => console.log(row),
+  onStateChange: (state) => console.log(state.sort, state.search, state.page),
+});
+
+table.update(newSpec);
+table.getState();               // { sort, search, page }
+table.setState({ page: 2 });    // Programmatic state control
+table.export('csv');             // CSV export (respects sort/search, ignores pagination)
+table.destroy();
+```
+
+## Graphs
+
+```typescript
+import { createGraph } from '@opendata-ai/openchart-vanilla';
+
+const graph = createGraph(container, graphSpec, {
+  darkMode: 'auto',
+  responsive: true,
+  onNodeClick: (node) => console.log(node),
+  onNodeDoubleClick: (node) => console.log(node),
+  onSelectionChange: (nodeIds) => console.log(nodeIds),
+});
+
+graph.search('query');           // Highlight matching nodes
+graph.clearSearch();
+graph.zoomToFit();              // Fit all nodes in viewport
+graph.zoomToNode('node-id');    // Center on a specific node
+graph.selectNode('node-id');    // Programmatic selection
+graph.getSelectedNodes();       // Get selected node IDs
+graph.update(newSpec);
+graph.destroy();
+```
+
+Graphs render on canvas with a force simulation running in a web worker. Nodes support click, drag, and double-click. The simulation auto-fits nodes once it settles.
+
+## Export utilities
+
+Standalone export functions if you need them outside of an instance:
+
+```typescript
+import { exportSVG, exportPNG, exportCSV } from '@opendata-ai/openchart-vanilla';
+```
+
+## Other exports
+
+- `observeResize()` - ResizeObserver wrapper for container tracking
+- `attachKeyboardNav()` - Keyboard navigation for chart marks
+- `createTooltipManager()` - Tooltip lifecycle management
+- `renderChartSVG()` - Low-level SVG rendering from a ChartLayout
+- `renderTable()` - Low-level table DOM rendering from a TableLayout
+- `renderCell()` and cell-type renderers (`renderBarCell`, `renderSparklineCell`, `renderHeatmapCell`, etc.) - Individual table cell renderers
+
+## Related docs
+
+- [Getting started](../../docs/getting-started.md) for a hands-on tutorial
+- [Integration guide](../../docs/integration-guide.md) for lifecycle management and events
+- [Spec reference](../../docs/spec-reference.md) for field-by-field type details

package/dist/index.js

@@ -194,6 +194,26 @@ var GraphCanvasRenderer = class {
       );
     }
     ctx.restore();
+    this.drawBrand(ctx, cssWidth, cssHeight, theme);
+  }
+  // -------------------------------------------------------------------------
+  // Brand rendering
+  // -------------------------------------------------------------------------
+  drawBrand(ctx, w, h, theme) {
+    if (w < 120) return;
+    const { dpr } = this;
+    ctx.save();
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    const padding = theme.spacing.padding;
+    const x = w - padding;
+    const y = h - 4;
+    ctx.font = `600 20px ${theme.fonts.family}`;
+    ctx.fillStyle = theme.colors.axis;
+    ctx.globalAlpha = 0.5;
+    ctx.textAlign = "right";
+    ctx.textBaseline = "alphabetic";
+    ctx.fillText("OpenData", x, y);
+    ctx.restore();
   }
   // -------------------------------------------------------------------------
   // Batched edge drawing
@@ -2521,6 +2541,73 @@ function renderLegend(parent, legend) {
   }
   parent.appendChild(g);
 }
+var BRAND_FONT_SIZE = 20;
+var BRAND_MIN_WIDTH = 120;
+var BRAND_URL = "https://tryopendata.ai";
+var XLINK_NS = "http://www.w3.org/1999/xlink";
+function brandPosition(layout) {
+  const { width } = layout.dimensions;
+  const padding = layout.theme.spacing.padding;
+  const rightEdge = width - padding;
+  const { chrome } = layout;
+  const xAxisExtent = layout.axes.x ? layout.axes.x.label ? 48 : 26 : 0;
+  const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
+  const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
+  const chromeY = firstBottom ? bottomOffset + firstBottom.y : bottomOffset + layout.theme.spacing.chartToFooter;
+  const y = chromeY + BRAND_FONT_SIZE;
+  const dataWidth = estimateTextWidth("Data", BRAND_FONT_SIZE, 600);
+  const dataX = rightEdge - dataWidth;
+  const openX = dataX;
+  return { openX, dataX, y, fill: layout.theme.colors.axis };
+}
+function renderBrandOpen(parent, layout) {
+  if (layout.dimensions.width < BRAND_MIN_WIDTH) return;
+  const { openX, y, fill } = brandPosition(layout);
+  const a = createSVGElement("a");
+  a.setAttribute("href", BRAND_URL);
+  a.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
+  a.setAttribute("target", "_blank");
+  a.setAttribute("rel", "noopener");
+  a.setAttribute("class", "viz-axis-ref");
+  const text = createSVGElement("text");
+  setAttrs(text, {
+    x: openX,
+    y,
+    "font-family": layout.theme.fonts.family,
+    "font-size": BRAND_FONT_SIZE,
+    "font-weight": 500,
+    "text-anchor": "end",
+    "fill-opacity": 0.55
+  });
+  text.style.setProperty("fill", fill);
+  text.textContent = "Open";
+  a.appendChild(text);
+  parent.appendChild(a);
+}
+function renderBrandData(parent, layout) {
+  if (layout.dimensions.width < BRAND_MIN_WIDTH) return;
+  const { dataX, y, fill } = brandPosition(layout);
+  const a = createSVGElement("a");
+  a.setAttribute("href", BRAND_URL);
+  a.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
+  a.setAttribute("target", "_blank");
+  a.setAttribute("rel", "noopener");
+  a.setAttribute("class", "viz-chrome-ref");
+  const text = createSVGElement("text");
+  setAttrs(text, {
+    x: dataX,
+    y,
+    "font-family": layout.theme.fonts.family,
+    "font-size": BRAND_FONT_SIZE,
+    "font-weight": 600,
+    "text-anchor": "start",
+    "fill-opacity": 0.55
+  });
+  text.style.setProperty("fill", fill);
+  text.textContent = "Data";
+  a.appendChild(text);
+  parent.appendChild(a);
+}
 function renderChartSVG(layout, container) {
   const { width, height } = layout.dimensions;
   const svg = createSVGElement("svg");
@@ -2561,7 +2648,9 @@ function renderChartSVG(layout, container) {
   svg.appendChild(clippedGroup);
   renderAnnotations(svg, layout);
   renderLegend(svg, layout.legend);
+  renderBrandOpen(svg, layout);
   renderChrome(svg, layout);
+  renderBrandData(svg, layout);
   container.appendChild(svg);
   return svg;
 }
@@ -4371,6 +4460,18 @@ function renderTable(layout, container) {
   liveRegion.setAttribute("aria-atomic", "true");
   liveRegion.setAttribute("role", "status");
   wrapper.appendChild(liveRegion);
+  const brandColor = theme ? theme.colors.axis : "#999999";
+  const brand = document.createElement("div");
+  brand.className = "viz-table-ref";
+  brand.style.cssText = "text-align: right; padding: 4px 8px;";
+  const brandLink = document.createElement("a");
+  brandLink.href = "https://tryopendata.ai";
+  brandLink.target = "_blank";
+  brandLink.rel = "noopener";
+  brandLink.style.cssText = `font-size: 20px; color: ${brandColor}; opacity: 0.55; text-decoration: none; font-family: ${theme ? theme.fonts.family : "sans-serif"};`;
+  brandLink.textContent = "OpenData";
+  brand.appendChild(brandLink);
+  wrapper.appendChild(brand);
   container.appendChild(wrapper);
   return wrapper;
 }