@opendata-ai/openchart-vanilla 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -46,8 +46,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "2.0.0",
-    "@opendata-ai/openchart-engine": "2.0.0",
+    "@opendata-ai/openchart-core": "2.1.0",
+    "@opendata-ai/openchart-engine": "2.1.0",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/__tests__/svg-renderer.test.ts

@@ -607,3 +607,50 @@ describe('targeted mark snapshots', () => {
     expect(path!.getAttribute('d')).not.toBeNull();
   });
 });
+
+// ---------------------------------------------------------------------------
+// Brand watermark
+// ---------------------------------------------------------------------------
+
+describe('brand watermark', () => {
+  it('renders "Open" and "Data" text elements', () => {
+    const { svg } = renderSpec(lineSpec);
+    const openLink = svg.querySelector('.viz-axis-ref');
+    const dataLink = svg.querySelector('.viz-chrome-ref');
+    expect(openLink).not.toBeNull();
+    expect(dataLink).not.toBeNull();
+    expect(openLink!.querySelector('text')!.textContent).toBe('Open');
+    expect(dataLink!.querySelector('text')!.textContent).toBe('Data');
+  });
+
+  it('both elements link to tryopendata.ai', () => {
+    const { svg } = renderSpec(lineSpec);
+    const links = svg.querySelectorAll('a[href="https://tryopendata.ai"]');
+    expect(links.length).toBe(2);
+  });
+
+  it('elements are direct children of SVG root (no shared group)', () => {
+    const { svg } = renderSpec(lineSpec);
+    const openLink = svg.querySelector('.viz-axis-ref');
+    const dataLink = svg.querySelector('.viz-chrome-ref');
+    expect(openLink!.parentElement).toBe(svg);
+    expect(dataLink!.parentElement).toBe(svg);
+  });
+
+  it('elements are interleaved with other chart layers', () => {
+    const { svg } = renderSpec(lineSpec);
+    const children = Array.from(svg.children);
+    const openIdx = children.findIndex((el) => el.classList.contains('viz-axis-ref'));
+    const chromeIdx = children.findIndex((el) => el.classList.contains('viz-chrome'));
+    const dataIdx = children.findIndex((el) => el.classList.contains('viz-chrome-ref'));
+    // "Open" should come before chrome, "Data" after chrome
+    expect(openIdx).toBeLessThan(chromeIdx);
+    expect(dataIdx).toBeGreaterThan(chromeIdx);
+  });
+
+  it('skips watermark on very small charts', () => {
+    const { svg } = renderSpec(lineSpec, { width: 100, height: 80 });
+    const openLink = svg.querySelector('.viz-axis-ref');
+    expect(openLink).toBeNull();
+  });
+});

package/src/graph/canvas-renderer.ts

@@ -222,6 +222,35 @@ export class GraphCanvasRenderer {
     }
 
     ctx.restore();
+
+    // Brand watermark in screen coordinates (unaffected by pan/zoom)
+    this.drawBrand(ctx, cssWidth, cssHeight, theme);
+  }
+
+  // -------------------------------------------------------------------------
+  // Brand rendering
+  // -------------------------------------------------------------------------
+
+  private drawBrand(
+    ctx: CanvasRenderingContext2D,
+    w: number,
+    h: number,
+    theme: GraphRenderState['theme'],
+  ): void {
+    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();
   }
 
   // -------------------------------------------------------------------------

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;
 }