@opendata-ai/openchart-vanilla 2.3.5 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "2.3.5",
+  "version": "2.5.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.3.5",
-    "@opendata-ai/openchart-engine": "2.3.5",
+    "@opendata-ai/openchart-core": "2.5.0",
+    "@opendata-ai/openchart-engine": "2.5.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

@@ -28,6 +28,31 @@ import { estimateTextWidth } from '@opendata-ai/openchart-core';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
+/**
+ * Compute the vertical extent of x-axis labels below the chart area.
+ * Accounts for rotated tick labels which need more vertical space.
+ */
+function computeXAxisExtent(layout: ChartLayout): number {
+  const xAxis = layout.axes.x;
+  if (!xAxis) return 0;
+
+  if (xAxis.tickAngle && Math.abs(xAxis.tickAngle) > 10) {
+    // Rotated labels: estimate height from the longest tick label.
+    const fontSize = xAxis.tickLabelStyle.fontSize;
+    const fontWeight = xAxis.tickLabelStyle.fontWeight;
+    const angleRad = Math.abs(xAxis.tickAngle) * (Math.PI / 180);
+    let maxLabelWidth = 40;
+    for (const tick of xAxis.ticks) {
+      const w = estimateTextWidth(tick.label, fontSize, fontWeight);
+      if (w > maxLabelWidth) maxLabelWidth = w;
+    }
+    const rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
+    return xAxis.label ? rotatedHeight + 20 : rotatedHeight;
+  }
+
+  return xAxis.label ? 48 : 26;
+}
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -96,9 +121,8 @@ function renderChrome(parent: SVGElement, layout: ChartLayout): void {
   }
 
   // Bottom chrome starts below x-axis labels/title, not at chart area bottom.
-  // X-axis tick labels render at +14, axis title at +35. Account for that
-  // so source/byline/footer don't overlap axis content.
-  const xAxisExtent = layout.axes.x ? (layout.axes.x.label ? 48 : 26) : 0;
+  // Accounts for rotated tick labels which need more vertical space.
+  const xAxisExtent = computeXAxisExtent(layout);
   const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
   if (chrome.source) {
     renderChromeElement(
@@ -168,11 +192,26 @@ function renderAxis(
       // Label (no tick marks -- gridlines provide sufficient reference)
       const label = createSVGElement('text');
       label.setAttribute('class', 'viz-axis-tick');
-      setAttrs(label, {
-        x: tick.position,
-        y: area.y + area.height + 14,
-        'text-anchor': 'middle',
-      });
+
+      if (axis.tickAngle && Math.abs(axis.tickAngle) > 10) {
+        // Rotated labels: anchor at the rotation pivot point
+        const labelX = tick.position;
+        const labelY = area.y + area.height + 6;
+        setAttrs(label, {
+          x: labelX,
+          y: labelY,
+          'text-anchor': axis.tickAngle < 0 ? 'end' : 'start',
+          'dominant-baseline': 'central',
+          transform: `rotate(${axis.tickAngle}, ${labelX}, ${labelY})`,
+        });
+      } else {
+        setAttrs(label, {
+          x: tick.position,
+          y: area.y + area.height + 14,
+          'text-anchor': 'middle',
+        });
+      }
+
       applyTextStyle(label, axis.tickLabelStyle);
       label.textContent = tick.label;
       g.appendChild(label);
@@ -228,9 +267,26 @@ function renderAxis(
     axisLabel.textContent = axis.label;
 
     if (orientation === 'x') {
+      // Position axis title below tick labels. For rotated labels, compute
+      // the vertical extent of the rotated ticks and place the title below.
+      let titleY = area.y + area.height + 35;
+      if (axis.tickAngle && Math.abs(axis.tickAngle) > 10) {
+        const angleRad = Math.abs(axis.tickAngle) * (Math.PI / 180);
+        let maxLabelWidth = 40;
+        for (const tick of axis.ticks) {
+          const w = estimateTextWidth(
+            tick.label,
+            axis.tickLabelStyle.fontSize,
+            axis.tickLabelStyle.fontWeight,
+          );
+          if (w > maxLabelWidth) maxLabelWidth = w;
+        }
+        const rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
+        titleY = area.y + area.height + rotatedHeight + 14;
+      }
       setAttrs(axisLabel, {
         x: area.x + area.width / 2,
-        y: area.y + area.height + 35,
+        y: titleY,
         'text-anchor': 'middle',
       });
     } else {
@@ -296,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);
   }
 
@@ -845,89 +904,65 @@ function renderLegend(parent: SVGElement, legend: LegendLayout): void {
 // Brand rendering
 // ---------------------------------------------------------------------------
 
-const BRAND_FONT_SIZE = 20;
+const BRAND_FONT_SIZE = 11;
 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 = layout.axes.x ? (layout.axes.x.label ? 48 : 26) : 0;
+  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);
 }
@@ -997,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;