@opendata-ai/openchart-vanilla 8.0.0-rc.2 → 8.0.0-rc.21

package/src/barlist-mount.ts

@@ -1,383 +0,0 @@
-/**
- * BarList mount API: the main entry point for vanilla JS barlist usage.
- *
- * createBarList() takes a container, BarListSpec, and options, compiles the
- * barlist, renders it as SVG, sets up responsive resizing, tooltip interaction,
- * and returns a BarListInstance with update/resize/export/destroy.
- */
-
-import type {
-  BarListLayout,
-  BarListSpec,
-  CompileOptions,
-  DarkMode,
-  ThemeConfig,
-} from '@opendata-ai/openchart-core';
-import { compileBarList } from '@opendata-ai/openchart-engine';
-import { cancelAnimations, setupAnimationCleanup } from './animation';
-import { renderBarListSVG } from './barlist-renderer';
-import {
-  exportJPG,
-  exportPNG,
-  exportSVG,
-  exportSVGWithFonts,
-  type JPGExportOptions,
-  type SVGExportOptions,
-} from './export';
-import { createMeasureText, resolveFontFamily, scheduleFontReload } from './measure-text';
-import { observeResize } from './resize-observer';
-import { createTooltipManager, type TooltipManager } from './tooltip';
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface BarListMountOptions {
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  responsive?: boolean;
-  watermark?: boolean;
-  tooltip?: boolean;
-  onRowClick?: (row: { label: string; value: number; data: Record<string, unknown> }) => void;
-  onRowHover?: (
-    row: { label: string; value: number; data: Record<string, unknown> } | null,
-  ) => void;
-}
-
-export interface BarListInstance {
-  update(spec: BarListSpec): void;
-  resize(): void;
-  export(
-    format: 'svg' | 'svg-with-fonts' | 'png' | 'jpg',
-    options?: JPGExportOptions | SVGExportOptions,
-  ): string | Promise<Blob> | Promise<string>;
-  destroy(): void;
-  readonly layout: BarListLayout;
-}
-
-// ---------------------------------------------------------------------------
-// Dark mode resolution
-// ---------------------------------------------------------------------------
-
-function resolveDarkMode(mode?: DarkMode): boolean {
-  if (mode === 'force') return true;
-  if (mode === 'off' || mode === undefined) return false;
-  if (typeof window !== 'undefined' && window.matchMedia) {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches;
-  }
-  return false;
-}
-
-// ---------------------------------------------------------------------------
-// Main API
-// ---------------------------------------------------------------------------
-
-export function createBarList(
-  container: HTMLElement,
-  spec: BarListSpec,
-  options?: BarListMountOptions,
-): BarListInstance {
-  let currentSpec = spec;
-  let currentLayout: BarListLayout;
-  let destroyed = false;
-
-  let svgElement: SVGSVGElement | null = null;
-  let tooltipManager: TooltipManager | null = null;
-  let cleanupTooltipEvents: (() => void) | null = null;
-  let disconnectResize: (() => void) | null = null;
-  let animationCleanup: (() => void) | null = null;
-  let pendingResize = false;
-
-  // Set when webfonts have loaded and a recompile is owed. The next render()
-  // that recompiles flips data-oc-fonts-state to 'ready' and clears this, so
-  // the attribute stays honest when resize() defers to pendingResize during
-  // the entrance animation.
-  let fontsReloadPending = false;
-
-  // Apply the root class up front so getComputedStyle sees --oc-font-family
-  // before the text measurer is built.
-  container.classList.add('oc-barlist-root');
-
-  // Resolve the effective font the way compile() will: compile merges
-  // { ...spec.theme, ...options.theme }, so options.theme wins over the
-  // spec-level theme; fall back to the container's computed font. Measuring a
-  // different font than gets rendered desyncs layout metrics and the reload watcher.
-  function resolveEffectiveFont(): string {
-    return (
-      options?.theme?.fonts?.family ??
-      currentSpec.theme?.fonts?.family ??
-      resolveFontFamily(container)
-    );
-  }
-  let fontFamily = resolveEffectiveFont();
-  let measureText = createMeasureText(fontFamily);
-  let renderGen = 0;
-
-  function getContainerDimensions(): { width: number; height: number } {
-    const rect = container.getBoundingClientRect();
-    return {
-      width: Math.max(rect.width || 600, 100),
-      height: Math.max(rect.height || 400, 100),
-    };
-  }
-
-  function compile(): BarListLayout {
-    const { width, height } = getContainerDimensions();
-    const darkMode = resolveDarkMode(options?.darkMode);
-
-    const compileOpts: CompileOptions = {
-      width,
-      height,
-      theme: options?.theme,
-      darkMode,
-      watermark: options?.watermark,
-      measureText,
-    };
-
-    const layout = compileBarList(currentSpec, compileOpts);
-
-    // Auto-size height to content so few-row lists don't leave empty space.
-    if (layout.rows.length > 0) {
-      const lastRow = layout.rows[layout.rows.length - 1];
-      const contentBottom =
-        lastRow.y + lastRow.height + layout.chrome.bottomHeight + layout.theme.spacing.padding;
-      if (contentBottom < layout.height) {
-        layout.height = contentBottom;
-        layout.area.height =
-          contentBottom - layout.area.y - layout.chrome.bottomHeight - layout.theme.spacing.padding;
-      }
-    }
-
-    return layout;
-  }
-
-  function wireTooltipAndInteraction(svg: SVGSVGElement, layout: BarListLayout): () => void {
-    const cleanups: Array<() => void> = [];
-
-    const rowElements = svg.querySelectorAll('.oc-barlist-row');
-    for (const el of rowElements) {
-      const indexStr = el.getAttribute('data-row-index');
-      if (indexStr === null) continue;
-
-      const content = layout.tooltipDescriptors.get(indexStr);
-      const row = layout.rows[Number(indexStr)];
-
-      const handleMouseEnter = (e: Event) => {
-        const mouseEvent = e as MouseEvent;
-        if (content && tooltipManager && options?.tooltip !== false) {
-          const svgRect = svg.getBoundingClientRect();
-          const x = mouseEvent.clientX - svgRect.left;
-          const y = mouseEvent.clientY - svgRect.top;
-          tooltipManager.show(content, x, y);
-        }
-        if (row) {
-          options?.onRowHover?.({
-            label: row.label.text,
-            value: row.value,
-            data: row.data,
-          });
-        }
-      };
-
-      const handleMouseMove = (e: Event) => {
-        if (content && tooltipManager && options?.tooltip !== false) {
-          const mouseEvent = e as MouseEvent;
-          const svgRect = svg.getBoundingClientRect();
-          const x = mouseEvent.clientX - svgRect.left;
-          const y = mouseEvent.clientY - svgRect.top;
-          tooltipManager.show(content, x, y);
-        }
-      };
-
-      const handleMouseLeave = () => {
-        tooltipManager?.hide();
-        options?.onRowHover?.(null);
-      };
-
-      const handleClick = () => {
-        if (row) {
-          options?.onRowClick?.({
-            label: row.label.text,
-            value: row.value,
-            data: row.data,
-          });
-        }
-      };
-
-      el.addEventListener('mouseenter', handleMouseEnter);
-      el.addEventListener('mousemove', handleMouseMove);
-      el.addEventListener('mouseleave', handleMouseLeave);
-      el.addEventListener('click', handleClick);
-
-      cleanups.push(() => {
-        el.removeEventListener('mouseenter', handleMouseEnter);
-        el.removeEventListener('mousemove', handleMouseMove);
-        el.removeEventListener('mouseleave', handleMouseLeave);
-        el.removeEventListener('click', handleClick);
-      });
-    }
-
-    return () => {
-      for (const cleanup of cleanups) cleanup();
-    };
-  }
-
-  function render(animate = false): void {
-    if (animationCleanup) {
-      animationCleanup();
-      animationCleanup = null;
-    }
-
-    if (svgElement) {
-      if (cleanupTooltipEvents) {
-        cleanupTooltipEvents();
-        cleanupTooltipEvents = null;
-      }
-      svgElement.remove();
-    }
-
-    const newSvg = renderBarListSVG(currentLayout, { animate });
-    container.appendChild(newSvg);
-    svgElement = newSvg;
-
-    cleanupTooltipEvents = wireTooltipAndInteraction(newSvg, currentLayout);
-
-    if (options?.tooltip !== false) {
-      if (!tooltipManager) {
-        tooltipManager = createTooltipManager(container);
-      }
-    }
-
-    if (currentLayout.animation?.enter) {
-      animationCleanup = setupAnimationCleanup(newSvg, () => {
-        if (pendingResize && !destroyed) {
-          pendingResize = false;
-          resize();
-        }
-      });
-    }
-
-    renderGen += 1;
-    container.dataset.ocRenderGen = String(renderGen);
-
-    // This render recompiled with the loaded webfonts; publish 'ready' now
-    // rather than right after the fonts-ready resize() (which may have deferred
-    // to pendingResize during the entrance animation).
-    if (fontsReloadPending) {
-      fontsReloadPending = false;
-      container.dataset.ocFontsState = 'ready';
-    }
-  }
-
-  function update(newSpec: BarListSpec): void {
-    currentSpec = newSpec;
-    // A new spec can change theme.fonts.family; rebuild the measurer so layout
-    // measures the font compile will actually render with.
-    const nextFont = resolveEffectiveFont();
-    if (nextFont !== fontFamily) {
-      fontFamily = nextFont;
-      measureText = createMeasureText(fontFamily);
-    }
-    currentLayout = compile();
-    render();
-  }
-
-  function resize(): void {
-    if (destroyed) return;
-    if (animationCleanup) {
-      pendingResize = true;
-      return;
-    }
-    currentLayout = compile();
-    render();
-  }
-
-  function exportChart(
-    format: 'svg' | 'svg-with-fonts' | 'png' | 'jpg',
-    options_?: JPGExportOptions | SVGExportOptions,
-  ): string | Promise<Blob> | Promise<string> {
-    if (!svgElement) return '';
-    switch (format) {
-      case 'svg':
-        return exportSVG(svgElement);
-      case 'svg-with-fonts':
-        return exportSVGWithFonts(svgElement);
-      case 'png':
-        return exportPNG(svgElement, options_ as JPGExportOptions);
-      case 'jpg':
-        return exportJPG(svgElement, options_ as JPGExportOptions);
-      default:
-        return '';
-    }
-  }
-
-  function destroy(): void {
-    if (destroyed) return;
-    destroyed = true;
-
-    if (animationCleanup) {
-      cancelAnimations(svgElement);
-      animationCleanup();
-      animationCleanup = null;
-    }
-
-    if (cleanupTooltipEvents) {
-      cleanupTooltipEvents();
-      cleanupTooltipEvents = null;
-    }
-
-    if (svgElement) {
-      svgElement.remove();
-      svgElement = null;
-    }
-
-    if (tooltipManager) {
-      tooltipManager.destroy();
-      tooltipManager = null;
-    }
-
-    if (disconnectResize) {
-      disconnectResize();
-      disconnectResize = null;
-    }
-
-    container.classList.remove('oc-barlist-root', 'oc-dark');
-  }
-
-  // Initialize
-  if (resolveDarkMode(options?.darkMode)) {
-    container.classList.add('oc-dark');
-  }
-
-  currentLayout = compile();
-  render(true);
-
-  // Recompile once after webfonts load so row labels aren't stuck measured
-  // against fallback metrics on real devices.
-  const fontsPending = scheduleFontReload(
-    fontFamily,
-    () => !destroyed,
-    () => {
-      // Mark the reload owed, then recompile. render() flips the attribute to
-      // 'ready' once it actually recompiles, including the pendingResize replay
-      // after the entrance animation finishes.
-      fontsReloadPending = true;
-      resize();
-    },
-  );
-  container.dataset.ocFontsState = fontsPending ? 'pending' : 'ready';
-
-  if (options?.responsive !== false) {
-    disconnectResize = observeResize(container, () => resize());
-  }
-
-  return {
-    update,
-    resize,
-    export: exportChart,
-    destroy,
-    get layout(): BarListLayout {
-      return currentLayout;
-    },
-  };
-}

package/src/barlist-renderer.ts

@@ -1,267 +0,0 @@
-/**
- * BarList SVG renderer: converts a BarListLayout into SVG DOM elements.
- *
- * Creates an <svg> with rows of label + track + bar + value. Animation is
- * pure CSS, driven by data attributes and CSS custom properties.
- */
-
-import type { BarListLayout, BarListRowMark, ResolvedAnimation } from '@opendata-ai/openchart-core';
-import { textAscent } from '@opendata-ai/openchart-core';
-import { stampAnimationVars } from './animation-vars';
-
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const XLINK_NS = 'http://www.w3.org/1999/xlink';
-const BRAND_URL = 'https://tryopendata.ai';
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function createSVGElement(tag: string): SVGElement {
-  return document.createElementNS(SVG_NS, tag);
-}
-
-function setAttrs(el: SVGElement, attrs: Record<string, string | number>): void {
-  for (const [key, value] of Object.entries(attrs)) {
-    el.setAttribute(key, String(value));
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Chrome rendering
-// ---------------------------------------------------------------------------
-
-function renderChrome(parent: SVGElement, layout: BarListLayout): void {
-  const g = createSVGElement('g');
-  g.setAttribute('class', 'oc-chrome');
-
-  const { chrome } = layout;
-  const bottomOffset = layout.area.y + layout.area.height;
-
-  for (const key of ['title', 'subtitle', 'source', 'byline', 'footer'] as const) {
-    const el = chrome[key];
-    if (!el) continue;
-
-    const isBottom = key === 'source' || key === 'byline' || key === 'footer';
-    const text = createSVGElement('text');
-    // el.y is the TOP of the text box; convert to the alphabetic baseline
-    // (WebKit mishandles dominant-baseline:hanging, see renderers/chrome.ts).
-    setAttrs(text, {
-      x: el.x,
-      y: (isBottom ? bottomOffset + el.y : el.y) + textAscent(el.style.fontSize),
-    });
-    text.setAttribute('class', `oc-${key}`);
-    text.setAttribute('font-family', el.style.fontFamily);
-    text.setAttribute('font-size', String(el.style.fontSize));
-    text.setAttribute('font-weight', String(el.style.fontWeight));
-    (text as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', el.style.fill);
-    text.textContent = el.text;
-    g.appendChild(text);
-  }
-
-  parent.appendChild(g);
-}
-
-// ---------------------------------------------------------------------------
-// Watermark rendering
-// ---------------------------------------------------------------------------
-
-function renderWatermark(parent: SVGElement, layout: BarListLayout): void {
-  if (layout.width < 480) return;
-
-  const { width, height, theme } = layout;
-  const padding = theme.spacing.padding;
-  const rightEdge = width - padding;
-  const bottomEdge = height - padding;
-  const fill = theme.colors.axis;
-
-  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');
-
-  const text = createSVGElement('text');
-  setAttrs(text, {
-    x: rightEdge,
-    y: bottomEdge,
-    'dominant-baseline': 'alphabetic',
-    'text-anchor': 'end',
-    'font-family': theme.fonts.family,
-    'font-size': 12,
-    'fill-opacity': 0.55,
-  });
-  (text as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', fill);
-
-  const trySpan = createSVGElement('tspan');
-  setAttrs(trySpan, { 'font-weight': 500 });
-  trySpan.textContent = 'try';
-
-  const openDataSpan = createSVGElement('tspan');
-  setAttrs(openDataSpan, { 'font-weight': 600, 'font-size': 16 });
-  openDataSpan.textContent = 'OpenData';
-
-  const aiSpan = createSVGElement('tspan');
-  setAttrs(aiSpan, { 'font-weight': 500 });
-  aiSpan.textContent = '.ai';
-
-  text.appendChild(trySpan);
-  text.appendChild(openDataSpan);
-  text.appendChild(aiSpan);
-  a.appendChild(text);
-  parent.appendChild(a);
-}
-
-// ---------------------------------------------------------------------------
-// Row rendering
-// ---------------------------------------------------------------------------
-
-function renderRows(
-  parent: SVGElement,
-  rows: BarListRowMark[],
-  animation?: ResolvedAnimation,
-): void {
-  const g = createSVGElement('g');
-  g.setAttribute('class', 'oc-barlist-rows');
-  g.setAttribute('role', 'list');
-
-  for (const row of rows) {
-    const rowGroup = createSVGElement('g');
-    rowGroup.setAttribute('class', 'oc-barlist-row');
-    rowGroup.setAttribute('data-row-index', String(row.index));
-    rowGroup.setAttribute('role', 'listitem');
-    if (row.aria?.label) {
-      rowGroup.setAttribute('aria-label', row.aria.label);
-    }
-
-    if (animation?.enter) {
-      rowGroup.setAttribute('data-animation-index', String(row.animationIndex));
-      const style = (rowGroup as SVGElement & ElementCSSInlineStyle).style;
-      style.setProperty('--oc-mark-index', String(row.animationIndex));
-      style.setProperty('--oc-row-delay', `${row.animationIndex * 40}ms`);
-    }
-
-    // Label text
-    const labelEl = createSVGElement('text');
-    setAttrs(labelEl, {
-      x: row.label.x,
-      y: row.label.y,
-      'dominant-baseline': 'central',
-      'text-anchor': 'start',
-      'font-family': row.label.style.fontFamily,
-      'font-size': row.label.style.fontSize,
-      'font-weight': row.label.style.fontWeight,
-    });
-    (labelEl as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', row.label.style.fill);
-    labelEl.textContent = row.label.text;
-    rowGroup.appendChild(labelEl);
-
-    // Subtitle text (if present)
-    if (row.subtitle?.visible) {
-      const subEl = createSVGElement('text');
-      setAttrs(subEl, {
-        x: row.subtitle.x,
-        y: row.subtitle.y,
-        'dominant-baseline': 'central',
-        'text-anchor': 'start',
-        'font-family': row.subtitle.style.fontFamily,
-        'font-size': row.subtitle.style.fontSize,
-        'font-weight': row.subtitle.style.fontWeight,
-      });
-      (subEl as SVGElement & ElementCSSInlineStyle).style.setProperty(
-        'fill',
-        row.subtitle.style.fill,
-      );
-      subEl.textContent = row.subtitle.text;
-      rowGroup.appendChild(subEl);
-    }
-
-    // Track (muted background bar)
-    const trackRect = createSVGElement('rect');
-    setAttrs(trackRect, {
-      x: row.track.x,
-      y: row.track.y,
-      width: row.track.width,
-      height: row.track.height,
-      rx: row.track.cornerRadius,
-      fill: 'currentColor',
-      'fill-opacity': 0.06,
-    });
-    trackRect.setAttribute('class', 'oc-barlist-track');
-    rowGroup.appendChild(trackRect);
-
-    // Fill bar
-    const barRect = createSVGElement('rect');
-    setAttrs(barRect, {
-      x: row.bar.x,
-      y: row.bar.y,
-      width: row.bar.width,
-      height: row.bar.height,
-      rx: row.bar.cornerRadius,
-      fill: row.bar.fill,
-    });
-    barRect.setAttribute('class', 'oc-barlist-bar');
-    rowGroup.appendChild(barRect);
-
-    // Value label (right-aligned)
-    const valueEl = createSVGElement('text');
-    setAttrs(valueEl, {
-      x: row.valueLabel.x,
-      y: row.valueLabel.y,
-      'dominant-baseline': 'central',
-      'text-anchor': 'end',
-      'font-family': row.valueLabel.style.fontFamily,
-      'font-size': row.valueLabel.style.fontSize,
-      'font-weight': row.valueLabel.style.fontWeight,
-    });
-    (valueEl as SVGElement & ElementCSSInlineStyle).style.setProperty(
-      'fill',
-      row.valueLabel.style.fill,
-    );
-    valueEl.textContent = row.valueLabel.text;
-    rowGroup.appendChild(valueEl);
-
-    g.appendChild(rowGroup);
-  }
-
-  parent.appendChild(g);
-}
-
-// ---------------------------------------------------------------------------
-// Public API
-// ---------------------------------------------------------------------------
-
-export function renderBarListSVG(
-  layout: BarListLayout,
-  opts?: { animate?: boolean },
-): SVGSVGElement {
-  const { width, height, rows, a11y, watermark, animation } = layout;
-  const animate = opts?.animate && !!animation?.enter;
-
-  const svg = createSVGElement('svg') as SVGSVGElement;
-  svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
-  svg.setAttribute('role', 'list');
-  // No explicit width attribute — CSS width:100% on .oc-barlist-root handles it.
-  // Explicit pixel height via inline style avoids iOS Safari's height:100% quirk.
-  svg.style.height = `${height}px`;
-  if (a11y.altText) {
-    svg.setAttribute('aria-label', a11y.altText);
-  }
-
-  const classes = animate ? 'oc-barlist oc-animate' : 'oc-barlist';
-  svg.setAttribute('class', classes);
-
-  if (animate && animation?.enter) {
-    stampAnimationVars(svg, { duration: animation.enter.duration, stagger: 40 });
-  }
-
-  renderChrome(svg, layout);
-  renderRows(svg, rows, animate ? animation : undefined);
-
-  if (watermark) {
-    renderWatermark(svg, layout);
-  }
-
-  return svg;
-}

package/src/dom-helpers.ts

@@ -1,17 +0,0 @@
-/** Shared small DOM helpers used across vanilla renderers. */
-
-/**
- * Inline sr-only styles — mirrors .oc-sr-only in base.css but works without
- * the stylesheet (CDN / esm.sh usage).
- */
-export function applySrOnlyStyles(el: HTMLElement): void {
-  el.style.position = 'absolute';
-  el.style.width = '1px';
-  el.style.height = '1px';
-  el.style.padding = '0';
-  el.style.margin = '-1px';
-  el.style.overflow = 'hidden';
-  el.style.clipPath = 'inset(50%)';
-  el.style.whiteSpace = 'nowrap';
-  el.style.borderWidth = '0';
-}