@opendata-ai/openchart-vanilla 2.4.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -25,13 +25,16 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./styles.css": "./dist/styles.css",
     "./simulation-worker": "./dist/simulation-worker.js"
   },
   "files": [
     "dist",
     "src"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
   "keywords": [
     "chart",
     "visualization",
@@ -46,8 +49,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "2.4.0",
-    "@opendata-ai/openchart-engine": "2.4.0",
+    "@opendata-ai/openchart-core": "2.6.0",
+    "@opendata-ai/openchart-engine": "2.6.0",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

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

@@ -613,44 +613,41 @@ describe('targeted mark snapshots', () => {
 // ---------------------------------------------------------------------------
 
 describe('brand watermark', () => {
-  it('renders "Open" and "Data" text elements', () => {
+  it('renders "OpenData" as a single text element with two tspans', () => {
     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');
+    const brandLink = svg.querySelector('.viz-chrome-ref');
+    expect(brandLink).not.toBeNull();
+    const text = brandLink!.querySelector('text')!;
+    expect(text.textContent).toBe('OpenData');
+    const tspans = text.querySelectorAll('tspan');
+    expect(tspans.length).toBe(2);
+    expect(tspans[0].textContent).toBe('Open');
+    expect(tspans[1].textContent).toBe('Data');
   });
 
-  it('both elements link to tryopendata.ai', () => {
+  it('links to tryopendata.ai', () => {
     const { svg } = renderSpec(lineSpec);
     const links = svg.querySelectorAll('a[href="https://tryopendata.ai"]');
-    expect(links.length).toBe(2);
+    expect(links.length).toBe(1);
   });
 
-  it('elements are direct children of SVG root (no shared group)', () => {
+  it('is a direct child of SVG root', () => {
     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);
+    const brandLink = svg.querySelector('.viz-chrome-ref');
+    expect(brandLink!.parentElement).toBe(svg);
   });
 
-  it('elements are interleaved with other chart layers', () => {
+  it('renders after chrome (in the footer row)', () => {
     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);
+    const brandIdx = children.findIndex((el) => el.classList.contains('viz-chrome-ref'));
+    expect(brandIdx).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();
+    const brandLink = svg.querySelector('.viz-chrome-ref');
+    expect(brandLink).toBeNull();
   });
 });

package/src/svg-renderer.ts

@@ -352,6 +352,9 @@ function renderLineMark(mark: LineMark, index: number): SVGElement {
     if (mark.strokeDasharray) {
       path.setAttribute('stroke-dasharray', mark.strokeDasharray);
     }
+    if (mark.opacity != null) {
+      path.setAttribute('opacity', String(mark.opacity));
+    }
     g.appendChild(path);
   }
 
@@ -906,84 +909,60 @@ 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) {
+/**
+ * Render the "OpenData" brand as a footer-row element, right-aligned on the
+ * same baseline as the first bottom chrome text (source/byline/footer).
+ * Uses the same font size as chrome source text so it blends in as a subtle
+ * footer item rather than occupying independent visual space.
+ */
+function renderBrand(parent: SVGElement, layout: ChartLayout): void {
+  if (layout.dimensions.width < BRAND_MIN_WIDTH) return;
+
   const { width } = layout.dimensions;
   const padding = layout.theme.spacing.padding;
   const rightEdge = width - padding;
+  const fill = layout.theme.colors.axis;
 
-  // 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.
+  // Vertically align with the first bottom chrome element.
   const { chrome } = layout;
   const xAxisExtent = computeXAxisExtent(layout);
   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');
+  a.setAttribute('class', 'viz-chrome-ref');
 
+  // "Open" in normal weight, "Data" in semibold, rendered as a single
+  // right-aligned text element with two tspans.
   const text = createSVGElement('text');
   setAttrs(text, {
-    x: openX,
-    y,
+    x: rightEdge,
+    y: chromeY,
     'font-family': layout.theme.fonts.family,
     'font-size': BRAND_FONT_SIZE,
-    'font-weight': 500,
     'text-anchor': 'end',
+    'dominant-baseline': 'hanging',
     '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 openSpan = createSVGElement('tspan');
+  openSpan.setAttribute('font-weight', '500');
+  openSpan.textContent = 'Open';
+  text.appendChild(openSpan);
 
-  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 dataSpan = createSVGElement('tspan');
+  dataSpan.setAttribute('font-weight', '600');
+  dataSpan.textContent = 'Data';
+  text.appendChild(dataSpan);
 
-  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);
 }
@@ -1053,12 +1032,11 @@ 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);
+  // Brand renders as a footer item, right-aligned on the source/footer row
+  renderBrand(svg, layout);
 
   container.appendChild(svg);
   return svg;