@opendata-ai/openchart-vanilla 6.19.3 → 6.21.0

package/src/renderers/axes.ts

@@ -0,0 +1,164 @@
+/**
+ * Axis rendering: axis line, ticks, tick labels, gridlines, axis title.
+ */
+
+import type { AxisLayout, ChartLayout } from '@opendata-ai/openchart-core';
+import { estimateTextWidth } from '@opendata-ai/openchart-core';
+import { applyTextStyle, createSVGElement, setAttrs } from './svg-dom';
+
+function renderAxis(
+  parent: SVGElement,
+  axis: AxisLayout,
+  orientation: 'x' | 'y',
+  layout: ChartLayout,
+): void {
+  const g = createSVGElement('g');
+  g.setAttribute('class', `oc-axis oc-axis-${orientation}`);
+
+  const { area } = layout;
+
+  // Only draw axis line for x-axis (bottom baseline).
+  // Horizontal gridlines already guide y-values, so the vertical y-axis line is redundant.
+  if (orientation === 'x') {
+    const line = createSVGElement('line');
+    line.setAttribute('class', 'oc-axis-line');
+    setAttrs(line, {
+      x1: axis.start.x,
+      y1: axis.start.y,
+      x2: axis.end.x,
+      y2: axis.end.y,
+      stroke: layout.theme.colors.axis,
+      'stroke-width': 1,
+    });
+    g.appendChild(line);
+  }
+
+  // Ticks and labels
+  // Tick positions are absolute pixel coordinates from D3 scales whose range
+  // was set to [chartArea.x, chartArea.x + chartArea.width] (and similarly for y).
+  // Don't add area.x/area.y again or you'll double-offset everything.
+  for (const tick of axis.ticks) {
+    if (orientation === 'x') {
+      // Label (no tick marks -- gridlines provide sufficient reference)
+      const label = createSVGElement('text');
+      label.setAttribute('class', 'oc-axis-tick');
+
+      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);
+    } else {
+      // Label (no tick marks -- gridlines provide sufficient reference)
+      const label = createSVGElement('text');
+      label.setAttribute('class', 'oc-axis-tick');
+      setAttrs(label, {
+        x: area.x - 6,
+        y: tick.position,
+        'text-anchor': 'end',
+        'dominant-baseline': 'central',
+      });
+      applyTextStyle(label, axis.tickLabelStyle);
+      label.textContent = tick.label;
+      g.appendChild(label);
+    }
+  }
+
+  // Gridlines (positions are also absolute from the scales)
+  for (const gridline of axis.gridlines) {
+    const gl = createSVGElement('line');
+    gl.setAttribute('class', 'oc-gridline');
+    if (orientation === 'y') {
+      setAttrs(gl, {
+        x1: area.x,
+        y1: gridline.position,
+        x2: area.x + area.width,
+        y2: gridline.position,
+        stroke: layout.theme.colors.gridline,
+        'stroke-width': 1,
+        'stroke-opacity': 0.6,
+      });
+    } else {
+      setAttrs(gl, {
+        x1: gridline.position,
+        y1: area.y,
+        x2: gridline.position,
+        y2: area.y + area.height,
+        stroke: layout.theme.colors.gridline,
+        'stroke-width': 1,
+        'stroke-opacity': 0.6,
+      });
+    }
+    g.appendChild(gl);
+  }
+
+  // Axis label
+  if (axis.label && axis.labelStyle) {
+    const axisLabel = createSVGElement('text');
+    axisLabel.setAttribute('class', 'oc-axis-title');
+    applyTextStyle(axisLabel, axis.labelStyle);
+    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: titleY,
+        'text-anchor': 'middle',
+      });
+    } else {
+      // Rotated y-axis label
+      setAttrs(axisLabel, {
+        x: area.x - 45,
+        y: area.y + area.height / 2,
+        'text-anchor': 'middle',
+        transform: `rotate(-90, ${area.x - 45}, ${area.y + area.height / 2})`,
+      });
+    }
+    g.appendChild(axisLabel);
+  }
+
+  parent.appendChild(g);
+}
+
+export function renderAxes(parent: SVGElement, layout: ChartLayout): void {
+  if (layout.axes.x) {
+    renderAxis(parent, layout.axes.x, 'x', layout);
+  }
+  if (layout.axes.y) {
+    renderAxis(parent, layout.axes.y, 'y', layout);
+  }
+}

package/src/renderers/brand.ts

@@ -0,0 +1,75 @@
+/**
+ * Brand rendering: the "tryOpenData.ai" watermark footer.
+ */
+
+import type { ChartLayout } from '@opendata-ai/openchart-core';
+import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH } from '@opendata-ai/openchart-core';
+import { computeXAxisExtent, createSVGElement, setAttrs, XLINK_NS } from './svg-dom';
+
+const BRAND_URL = 'https://tryopendata.ai';
+
+/**
+ * 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.
+ */
+export 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.
+  const { chrome } = layout;
+  const xAxisExtent = computeXAxisExtent(layout);
+  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 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', 'oc-chrome-ref');
+
+  // "try" in normal weight, "OpenData" in semibold, ".ai" in normal weight,
+  // rendered as a single right-aligned text element with three tspans.
+  // Use alphabetic baseline so mixed-size tspans share a common bottom line.
+  const BRAND_LARGE = 16;
+  const text = createSVGElement('text');
+  setAttrs(text, {
+    x: rightEdge,
+    y: chromeY + BRAND_LARGE,
+    'dominant-baseline': 'alphabetic',
+    'font-family': layout.theme.fonts.family,
+    'font-size': BRAND_FONT_SIZE,
+    'text-anchor': 'end',
+    'fill-opacity': 0.55,
+  });
+  (text as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', fill);
+
+  const trySpan = createSVGElement('tspan');
+  trySpan.setAttribute('font-weight', '500');
+  trySpan.textContent = 'try';
+  text.appendChild(trySpan);
+
+  const openDataSpan = createSVGElement('tspan');
+  openDataSpan.setAttribute('font-weight', '600');
+  openDataSpan.setAttribute('font-size', String(BRAND_LARGE));
+  openDataSpan.textContent = 'OpenData';
+  text.appendChild(openDataSpan);
+
+  const aiSpan = createSVGElement('tspan');
+  aiSpan.setAttribute('font-weight', '500');
+  aiSpan.textContent = '.ai';
+  text.appendChild(aiSpan);
+
+  a.appendChild(text);
+  parent.appendChild(a);
+}

package/src/renderers/chrome.ts

@@ -0,0 +1,96 @@
+/**
+ * Chrome rendering: title, subtitle, source, byline, footer.
+ */
+
+import type {
+  ChartLayout,
+  MeasureTextFn,
+  ResolvedChromeElement,
+} from '@opendata-ai/openchart-core';
+import { wrapText } from '@opendata-ai/openchart-core';
+import { applyTextStyle, computeXAxisExtent, createSVGElement, setAttrs } from './svg-dom';
+
+function renderChromeElement(
+  parent: SVGElement,
+  element: ResolvedChromeElement,
+  className: string,
+  chromeKey: string,
+  measureText?: MeasureTextFn,
+): void {
+  const text = createSVGElement('text');
+  setAttrs(text, { x: element.x, y: element.y });
+  applyTextStyle(text, element.style);
+  text.setAttribute('class', className);
+  text.setAttribute('data-chrome-key', chromeKey);
+
+  const lines = wrapText(
+    element.text,
+    element.style.fontSize,
+    element.style.fontWeight,
+    element.maxWidth,
+    measureText,
+  );
+
+  if (lines.length === 1) {
+    text.textContent = element.text;
+  } else {
+    const lineHeight = element.style.fontSize * (element.style.lineHeight ?? 1.3);
+    for (let i = 0; i < lines.length; i++) {
+      const tspan = createSVGElement('tspan');
+      setAttrs(tspan, { x: element.x, dy: i === 0 ? 0 : lineHeight });
+      tspan.textContent = lines[i];
+      text.appendChild(tspan);
+    }
+  }
+
+  parent.appendChild(text);
+}
+
+export function renderChrome(parent: SVGElement, layout: ChartLayout): void {
+  const g = createSVGElement('g');
+  g.setAttribute('class', 'oc-chrome');
+
+  const { chrome, measureText } = layout;
+
+  // Top chrome: render at their stored y positions (already absolute)
+  if (chrome.title) {
+    renderChromeElement(g, chrome.title, 'oc-title', 'title', measureText);
+  }
+  if (chrome.subtitle) {
+    renderChromeElement(g, chrome.subtitle, 'oc-subtitle', 'subtitle', measureText);
+  }
+
+  // Bottom chrome starts below x-axis labels/title, not at chart area bottom.
+  // 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(
+      g,
+      { ...chrome.source, y: bottomOffset + chrome.source.y },
+      'oc-source',
+      'source',
+      measureText,
+    );
+  }
+  if (chrome.byline) {
+    renderChromeElement(
+      g,
+      { ...chrome.byline, y: bottomOffset + chrome.byline.y },
+      'oc-byline',
+      'byline',
+      measureText,
+    );
+  }
+  if (chrome.footer) {
+    renderChromeElement(
+      g,
+      { ...chrome.footer, y: bottomOffset + chrome.footer.y },
+      'oc-footer',
+      'footer',
+      measureText,
+    );
+  }
+
+  parent.appendChild(g);
+}

package/src/renderers/legend.ts

@@ -0,0 +1,131 @@
+/**
+ * Legend rendering: swatches + labels with wrap/overflow handling.
+ */
+
+import type { LegendLayout } from '@opendata-ai/openchart-core';
+import { estimateTextWidth } from '@opendata-ai/openchart-core';
+import { applyTextStyle, createSVGElement, setAttrs } from './svg-dom';
+
+export function renderLegend(parent: SVGElement, legend: LegendLayout): void {
+  if (legend.entries.length === 0) return;
+
+  const g = createSVGElement('g');
+  g.setAttribute('class', 'oc-legend');
+  g.setAttribute('role', 'list');
+  g.setAttribute('aria-label', 'Chart legend');
+
+  const isHorizontal = legend.position === 'top' || legend.position === 'bottom';
+  let offsetX = legend.bounds.x;
+  let offsetY = legend.bounds.y;
+
+  for (let i = 0; i < legend.entries.length; i++) {
+    const entry = legend.entries[i];
+
+    // Pre-check: wrap to next line if this entry would overflow bounds
+    if (isHorizontal && i > 0) {
+      const labelWidth = estimateTextWidth(
+        entry.label,
+        legend.labelStyle.fontSize,
+        legend.labelStyle.fontWeight,
+      );
+      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+      if (offsetX + entryWidth > legend.bounds.x + legend.bounds.width) {
+        offsetX = legend.bounds.x;
+        offsetY += legend.swatchSize + 6;
+      }
+    }
+    const entryG = createSVGElement('g');
+    entryG.setAttribute('class', 'oc-legend-entry');
+    entryG.setAttribute('role', 'listitem');
+    entryG.setAttribute('data-legend-index', String(i));
+    entryG.setAttribute('data-legend-label', entry.label);
+    if (entry.overflow) {
+      entryG.setAttribute('data-legend-overflow', 'true');
+      entryG.setAttribute('aria-label', entry.label);
+      entryG.setAttribute('opacity', '0.5');
+    } else {
+      entryG.setAttribute(
+        'aria-label',
+        `${entry.label}: ${entry.active !== false ? 'visible' : 'hidden'}`,
+      );
+      entryG.setAttribute('style', 'cursor: pointer');
+
+      // Apply dimming for inactive entries
+      if (entry.active === false) {
+        entryG.setAttribute('opacity', '0.3');
+      }
+    }
+
+    // Swatch
+    if (entry.shape === 'circle') {
+      const circle = createSVGElement('circle');
+      setAttrs(circle, {
+        cx: offsetX + legend.swatchSize / 2,
+        cy: offsetY + legend.swatchSize / 2,
+        r: legend.swatchSize / 2,
+        fill: entry.color,
+      });
+      entryG.appendChild(circle);
+    } else if (entry.shape === 'line') {
+      // Line swatch: a short line segment with a dot in the middle
+      const line = createSVGElement('line');
+      setAttrs(line, {
+        x1: offsetX,
+        y1: offsetY + legend.swatchSize / 2,
+        x2: offsetX + legend.swatchSize,
+        y2: offsetY + legend.swatchSize / 2,
+        stroke: entry.color,
+        'stroke-width': 2,
+      });
+      entryG.appendChild(line);
+      // Small dot at center
+      const dot = createSVGElement('circle');
+      setAttrs(dot, {
+        cx: offsetX + legend.swatchSize / 2,
+        cy: offsetY + legend.swatchSize / 2,
+        r: 2.5,
+        fill: entry.color,
+      });
+      entryG.appendChild(dot);
+    } else {
+      const rect = createSVGElement('rect');
+      setAttrs(rect, {
+        x: offsetX,
+        y: offsetY,
+        width: legend.swatchSize,
+        height: legend.swatchSize,
+        fill: entry.color,
+        rx: 2,
+      });
+      entryG.appendChild(rect);
+    }
+
+    // Label
+    const label = createSVGElement('text');
+    setAttrs(label, {
+      x: offsetX + legend.swatchSize + legend.swatchGap,
+      y: offsetY + legend.swatchSize / 2,
+      'dominant-baseline': 'central',
+    });
+    applyTextStyle(label, legend.labelStyle);
+    label.textContent = entry.label;
+    entryG.appendChild(label);
+
+    g.appendChild(entryG);
+
+    // Advance position for next entry
+    if (isHorizontal) {
+      const labelWidth = estimateTextWidth(
+        entry.label,
+        legend.labelStyle.fontSize,
+        legend.labelStyle.fontWeight,
+      );
+      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+      offsetX += entryWidth;
+    } else {
+      offsetY += legend.swatchSize + legend.entryGap;
+    }
+  }
+
+  parent.appendChild(g);
+}