@opendata-ai/openchart-vanilla 2.0.0 → 2.2.0

package/src/index.ts

@@ -17,9 +17,9 @@ export type {
   TableSpec,
   VizSpec,
 } from '@opendata-ai/openchart-engine';
-export type { PNGExportOptions } from './export';
+export type { JPGExportOptions, PNGExportOptions } from './export';
 // Export utilities
-export { exportCSV, exportPNG, exportSVG } from './export';
+export { exportCSV, exportJPG, exportPNG, exportSVG } from './export';
 // Graph simulation worker
 export { createSimulationWorker } from './graph/simulation-worker-url';
 export type { GraphInstance, GraphMountOptions } from './graph-mount';

package/src/mount.ts

@@ -26,7 +26,7 @@ import type {
   TooltipContent,
 } from '@opendata-ai/openchart-core';
 import { compileChart } from '@opendata-ai/openchart-engine';
-import { exportCSV, exportPNG, exportSVG, type PNGExportOptions } from './export';
+import { exportCSV, exportJPG, exportPNG, exportSVG, type JPGExportOptions } from './export';
 import { observeResize } from './resize-observer';
 import { renderChartSVG } from './svg-renderer';
 import { createTooltipManager, type TooltipManager } from './tooltip';
@@ -46,8 +46,8 @@ export interface MountOptions extends ChartEventHandlers {
   responsive?: boolean;
 }
 
-export interface ExportOptions extends PNGExportOptions {
-  // Extensible for future formats
+export interface ExportOptions extends JPGExportOptions {
+  // Extensible for future formats (extends JPGExportOptions which extends PNGExportOptions)
 }
 
 export interface ChartInstance {
@@ -58,8 +58,9 @@ export interface ChartInstance {
   /** Export the chart. */
   export(format: 'svg'): string;
   export(format: 'png', options?: ExportOptions): Promise<Blob>;
+  export(format: 'jpg', options?: ExportOptions): Promise<Blob>;
   export(format: 'csv'): string;
-  export(format: 'svg' | 'png' | 'csv', options?: ExportOptions): string | Promise<Blob>;
+  export(format: 'svg' | 'png' | 'jpg' | 'csv', options?: ExportOptions): string | Promise<Blob>;
   /** Remove all DOM elements and disconnect observers. */
   destroy(): void;
   /** The current compiled layout (for hooks / debugging). */
@@ -1096,13 +1097,16 @@ function wireSeriesLabelDrag(
 
 /**
  * Wire click handlers on legend entries to toggle series visibility.
- * Optionally calls onLegendToggle when a series is toggled.
+ * Fires onEdit with { type: 'legend-toggle', series, hidden } for each toggle,
+ * and optionally calls the legacy onLegendToggle callback.
+ * Legend entries for hidden series stay visible but dimmed (opacity 0.3).
  * Returns a cleanup function.
  */
 function wireLegendInteraction(
   svg: SVGElement,
   _layout: ChartLayout,
   onLegendToggle?: (series: string, visible: boolean) => void,
+  onEdit?: (edit: ElementEdit) => void,
 ): () => void {
   const legendEntries = svg.querySelectorAll('[data-legend-index]');
   const cleanups: Array<() => void> = [];
@@ -1120,11 +1124,13 @@ function wireLegendInteraction(
         entry.setAttribute('opacity', '1');
         entry.setAttribute('aria-label', `${label}: visible`);
         onLegendToggle?.(label, true);
+        onEdit?.({ type: 'legend-toggle', series: label, hidden: false });
       } else {
         hiddenSeries.add(label);
         entry.setAttribute('opacity', '0.3');
         entry.setAttribute('aria-label', `${label}: hidden`);
         onLegendToggle?.(label, false);
+        onEdit?.({ type: 'legend-toggle', series: label, hidden: true });
       }
 
       // Toggle visibility of marks with matching series.
@@ -1448,7 +1454,12 @@ export function createChart(
     );
 
     // Wire legend interactivity
-    cleanupLegend = wireLegendInteraction(svgElement, currentLayout, options?.onLegendToggle);
+    cleanupLegend = wireLegendInteraction(
+      svgElement,
+      currentLayout,
+      options?.onLegendToggle,
+      options?.onEdit,
+    );
 
     // Wire chart event handlers (mark click/hover/leave, annotation click)
     if (
@@ -1546,9 +1557,10 @@ export function createChart(
 
   function doExport(format: 'svg'): string;
   function doExport(format: 'png', exportOptions?: ExportOptions): Promise<Blob>;
+  function doExport(format: 'jpg', exportOptions?: ExportOptions): Promise<Blob>;
   function doExport(format: 'csv'): string;
   function doExport(
-    format: 'svg' | 'png' | 'csv',
+    format: 'svg' | 'png' | 'jpg' | 'csv',
     exportOptions?: ExportOptions,
   ): string | Promise<Blob> {
     if (!svgElement) {
@@ -1560,6 +1572,8 @@ export function createChart(
         return exportSVG(svgElement);
       case 'png':
         return exportPNG(svgElement, exportOptions);
+      case 'jpg':
+        return exportJPG(svgElement, exportOptions);
       case 'csv':
         return exportCSV(
           'data' in currentSpec && Array.isArray(currentSpec.data) ? currentSpec.data : [],

package/src/svg-renderer.ts

@@ -841,6 +841,97 @@ function renderLegend(parent: SVGElement, legend: LegendLayout): void {
   parent.appendChild(g);
 }
 
+// ---------------------------------------------------------------------------
+// Brand rendering
+// ---------------------------------------------------------------------------
+
+const BRAND_FONT_SIZE = 20;
+const BRAND_MIN_WIDTH = 120;
+const BRAND_URL = 'https://tryopendata.ai';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
+
+/** Compute shared brand positioning from layout dimensions and theme. */
+function brandPosition(layout: ChartLayout) {
+  const { width } = layout.dimensions;
+  const padding = layout.theme.spacing.padding;
+  const rightEdge = width - padding;
+
+  // Vertically align with the first bottom chrome element (source/byline/footer).
+  // This uses the same Y computation as renderChrome so the watermark sits on the
+  // same baseline row as the source attribution text.
+  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;
+  // Chrome text uses dominant-baseline:hanging (Y = top of text) while the
+  // brand uses the default alphabetic baseline (Y = baseline). Shift Y down
+  // by the brand font size so the visual tops align.
+  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);
+  // "Open" text-anchor:end sits at the same x where "Data" text-anchor:start begins
+  const dataX = rightEdge - dataWidth;
+  const openX = dataX;
+  return { openX, dataX, y, fill: layout.theme.colors.axis };
+}
+
+function renderBrandOpen(parent: SVGElement, layout: ChartLayout): void {
+  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 as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', fill);
+  text.textContent = 'Open';
+  a.appendChild(text);
+  parent.appendChild(a);
+}
+
+function renderBrandData(parent: SVGElement, layout: ChartLayout): void {
+  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 as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', fill);
+  text.textContent = 'Data';
+  a.appendChild(text);
+  parent.appendChild(a);
+}
+
 // ---------------------------------------------------------------------------
 // Main render function
 // ---------------------------------------------------------------------------
@@ -906,9 +997,13 @@ export function renderChartSVG(layout: ChartLayout, container: HTMLElement): SVG
   renderAnnotations(svg, layout);
   renderLegend(svg, layout.legend);
 
+  renderBrandOpen(svg, layout);
+
   // Chrome renders on top so titles are never obscured by chart elements
   renderChrome(svg, layout);
 
+  renderBrandData(svg, layout);
+
   container.appendChild(svg);
   return svg;
 }

package/src/table-renderer.ts

@@ -345,6 +345,20 @@ export function renderTable(layout: TableLayout, container: HTMLElement): HTMLEl
   liveRegion.setAttribute('role', 'status');
   wrapper.appendChild(liveRegion);
 
+  // Brand watermark
+  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;
 }