@opendata-ai/openchart-vanilla 6.28.6 → 7.0.2

package/src/interactions/keyboard-nav.ts

@@ -0,0 +1,111 @@
+import type { ChartLayout, TooltipContent } from '@opendata-ai/openchart-core';
+import type { TooltipManager } from '../tooltip';
+
+/**
+ * Wire keyboard navigation on the SVG element.
+ * Arrow keys move focus between mark elements. Enter/Space shows tooltip.
+ * Escape hides tooltip. Returns a cleanup function.
+ */
+export function wireKeyboardNav(
+  svg: SVGElement,
+  container: HTMLElement,
+  tooltipDescriptors: Map<string, TooltipContent>,
+  tooltipManager: TooltipManager,
+  layout: ChartLayout,
+): () => void {
+  container.setAttribute('tabindex', '0');
+  container.setAttribute('aria-roledescription', 'chart');
+  container.setAttribute('aria-label', layout.a11y.altText);
+
+  const markElements: SVGElement[] = [];
+  const allMarkEls = svg.querySelectorAll('[data-mark-id]');
+  for (const el of allMarkEls) {
+    const markId = el.getAttribute('data-mark-id');
+    if (markId && tooltipDescriptors.has(markId)) {
+      markElements.push(el as SVGElement);
+    }
+  }
+
+  let focusIndex = -1;
+
+  function highlightMark(index: number): void {
+    if (focusIndex >= 0 && focusIndex < markElements.length) {
+      markElements[focusIndex].classList.remove('oc-mark-focused');
+      markElements[focusIndex].removeAttribute('aria-selected');
+    }
+
+    focusIndex = index;
+
+    if (focusIndex >= 0 && focusIndex < markElements.length) {
+      const el = markElements[focusIndex];
+      el.classList.add('oc-mark-focused');
+      el.setAttribute('aria-selected', 'true');
+    }
+  }
+
+  function showTooltipForFocused(): void {
+    if (focusIndex < 0 || focusIndex >= markElements.length) return;
+
+    const el = markElements[focusIndex];
+    const markId = el.getAttribute('data-mark-id');
+    if (!markId) return;
+
+    const content = tooltipDescriptors.get(markId);
+    if (!content) return;
+
+    const bbox = el.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const x = bbox.left + bbox.width / 2 - containerRect.left;
+    const y = bbox.top - containerRect.top;
+    tooltipManager.show(content, x, y);
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (markElements.length === 0) return;
+
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown': {
+        e.preventDefault();
+        const next = focusIndex < markElements.length - 1 ? focusIndex + 1 : 0;
+        highlightMark(next);
+        showTooltipForFocused();
+        break;
+      }
+      case 'ArrowLeft':
+      case 'ArrowUp': {
+        e.preventDefault();
+        const prev = focusIndex > 0 ? focusIndex - 1 : markElements.length - 1;
+        highlightMark(prev);
+        showTooltipForFocused();
+        break;
+      }
+      case 'Enter':
+      case ' ': {
+        e.preventDefault();
+        if (focusIndex >= 0) {
+          showTooltipForFocused();
+        } else if (markElements.length > 0) {
+          highlightMark(0);
+          showTooltipForFocused();
+        }
+        break;
+      }
+      case 'Escape': {
+        e.preventDefault();
+        tooltipManager.hide();
+        highlightMark(-1);
+        break;
+      }
+    }
+  };
+
+  container.addEventListener('keydown', handleKeyDown);
+
+  return () => {
+    container.removeEventListener('keydown', handleKeyDown);
+    container.removeAttribute('tabindex');
+    container.removeAttribute('aria-roledescription');
+    container.removeAttribute('aria-label');
+  };
+}

package/src/interactions/legend-interaction.ts

@@ -0,0 +1,38 @@
+import type { ChartLayout, ElementEdit } from '@opendata-ai/openchart-core';
+
+/**
+ * Wire click handlers on legend entries to toggle series visibility.
+ * Returns a cleanup function.
+ */
+export function wireLegendInteraction(
+  svg: SVGElement,
+  _layout: ChartLayout,
+  toggleSeries: (series: string) => boolean,
+  onLegendToggle?: (series: string, visible: boolean) => void,
+  onEdit?: (edit: ElementEdit) => void,
+): () => void {
+  const legendEntries = svg.querySelectorAll('[data-legend-index]');
+  const cleanups: Array<() => void> = [];
+
+  for (const entry of legendEntries) {
+    if (entry.getAttribute('data-legend-overflow') === 'true') continue;
+
+    const handleClick = () => {
+      const label = entry.getAttribute('data-legend-label');
+      if (!label) return;
+
+      const nowHidden = toggleSeries(label);
+      onLegendToggle?.(label, !nowHidden);
+      onEdit?.({ type: 'legend-toggle', series: label, hidden: nowHidden });
+    };
+
+    entry.addEventListener('click', handleClick);
+    cleanups.push(() => entry.removeEventListener('click', handleClick));
+  }
+
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}

package/src/interactions/selection.ts

@@ -0,0 +1,271 @@
+import type {
+  Annotation,
+  ChartLayout,
+  ChartSpec,
+  ChromeKey,
+  ElementRef,
+  GraphSpec,
+  LayerSpec,
+  TextAnnotation,
+} from '@opendata-ai/openchart-core';
+import { elementRef } from '@opendata-ai/openchart-core';
+
+/**
+ * Find a DOM element inside the SVG that matches the given ElementRef.
+ */
+export function findElementByRef(svg: SVGElement, ref: ElementRef): SVGElement | null {
+  switch (ref.type) {
+    case 'annotation': {
+      if (ref.id) {
+        const byId = svg.querySelector(`[data-annotation-id="${ref.id}"]`);
+        if (byId) return byId as SVGElement;
+      }
+      return svg.querySelector(`[data-annotation-index="${ref.index}"]`) as SVGElement | null;
+    }
+    case 'chrome':
+      return svg.querySelector(`[data-chrome-key="${ref.key}"]`) as SVGElement | null;
+    case 'series-label':
+      return svg.querySelector(`.oc-mark-label[data-series="${ref.series}"]`) as SVGElement | null;
+    case 'legend':
+      return svg.querySelector('.oc-legend') as SVGElement | null;
+    case 'legend-entry':
+      return svg.querySelector(`[data-legend-index="${ref.index}"]`) as SVGElement | null;
+  }
+}
+
+/**
+ * Build an ElementRef from a DOM element's data attributes.
+ */
+export function buildElementRef(
+  element: Element,
+  _specAnnotations: Annotation[],
+): ElementRef | null {
+  const annotationEl = element.closest('[data-annotation-index]');
+  if (annotationEl) {
+    const index = Number(annotationEl.getAttribute('data-annotation-index'));
+    const id = annotationEl.getAttribute('data-annotation-id') ?? undefined;
+    return elementRef.annotation(index, id);
+  }
+
+  const chromeEl = element.closest('[data-chrome-key]');
+  if (chromeEl) {
+    const key = chromeEl.getAttribute('data-chrome-key') as ChromeKey;
+    if (key) return elementRef.chrome(key);
+  }
+
+  const seriesLabelEl = element.closest('.oc-mark-label[data-series]');
+  if (seriesLabelEl) {
+    const series = seriesLabelEl.getAttribute('data-series');
+    if (series) return elementRef.seriesLabel(series);
+  }
+
+  const legendEntryEl = element.closest('[data-legend-index]');
+  if (legendEntryEl) {
+    const index = Number(legendEntryEl.getAttribute('data-legend-index'));
+    const series = legendEntryEl.getAttribute('data-legend-label') ?? '';
+    return elementRef.legendEntry(series, index);
+  }
+
+  const legendEl = element.closest('.oc-legend');
+  if (legendEl) return elementRef.legend();
+
+  return null;
+}
+
+/**
+ * Get an ordered list of all editable ElementRefs from the current spec and layout.
+ */
+export function getEditableElements(
+  spec: ChartSpec | LayerSpec | GraphSpec,
+  layout: ChartLayout,
+): ElementRef[] {
+  const refs: ElementRef[] = [];
+
+  const chromeKeys: ChromeKey[] = ['title', 'subtitle', 'source', 'byline', 'footer'];
+  for (const key of chromeKeys) {
+    if (layout.chrome[key]) {
+      refs.push(elementRef.chrome(key));
+    }
+  }
+
+  const annotations: Annotation[] =
+    'annotations' in spec && Array.isArray(spec.annotations) ? spec.annotations : [];
+  for (let i = 0; i < annotations.length; i++) {
+    refs.push(elementRef.annotation(i, annotations[i].id));
+  }
+
+  const seriesLabels: string[] = [];
+  for (const mark of layout.marks) {
+    if (mark.type === 'line' && mark.label?.visible && mark.seriesKey) {
+      seriesLabels.push(mark.seriesKey);
+    }
+  }
+  seriesLabels.sort();
+  for (const series of seriesLabels) {
+    refs.push(elementRef.seriesLabel(series));
+  }
+
+  if ('entries' in layout.legend && layout.legend.entries.length > 0) {
+    refs.push(elementRef.legend());
+  }
+
+  return refs;
+}
+
+/**
+ * Check if an ElementRef points to a text-editable element.
+ */
+export function isTextEditable(ref: ElementRef, specAnnotations: Annotation[]): boolean {
+  if (ref.type === 'chrome') return true;
+  if (ref.type === 'annotation') {
+    const annotation = specAnnotations[ref.index];
+    return annotation?.type === 'text';
+  }
+  return false;
+}
+
+/**
+ * Get the current text content for an element ref.
+ */
+export function getElementText(
+  ref: ElementRef,
+  spec: ChartSpec | LayerSpec | GraphSpec,
+): string | null {
+  if (ref.type === 'chrome') {
+    const chromeConfig = 'chrome' in spec ? spec.chrome : undefined;
+    if (!chromeConfig) return null;
+    const entry = chromeConfig[ref.key];
+    if (typeof entry === 'string') return entry;
+    if (typeof entry === 'object' && entry !== null && 'text' in entry) {
+      return (entry as { text: string }).text;
+    }
+    return null;
+  }
+  if (ref.type === 'annotation') {
+    const annotations: Annotation[] =
+      'annotations' in spec && Array.isArray(spec.annotations) ? spec.annotations : [];
+    const annotation = annotations[ref.index];
+    if (annotation?.type === 'text') return (annotation as TextAnnotation).text ?? null;
+    if (annotation?.label) return annotation.label;
+    return null;
+  }
+  return null;
+}
+
+/**
+ * Compare two ElementRefs for equality.
+ */
+export function refsEqual(a: ElementRef | null, b: ElementRef | null): boolean {
+  if (a === null || b === null) return a === b;
+  if (a.type !== b.type) return false;
+  switch (a.type) {
+    case 'annotation': {
+      const bAnno = b as typeof a;
+      if (a.id && bAnno.id) return a.id === bAnno.id;
+      return a.index === bAnno.index;
+    }
+    case 'chrome':
+      return a.key === (b as typeof a).key;
+    case 'series-label':
+      return a.series === (b as typeof a).series;
+    case 'legend':
+      return true;
+    case 'legend-entry': {
+      const bEntry = b as typeof a;
+      return a.index === bEntry.index && a.series === bEntry.series;
+    }
+  }
+}
+
+/**
+ * Render a selection overlay rectangle around a target element.
+ */
+export function renderSelectionOverlay(
+  svg: SVGElement,
+  ref: ElementRef,
+  layout: ChartLayout,
+): SVGGElement | null {
+  const target = findElementByRef(svg, ref);
+  if (!target) return null;
+
+  const bbox = (target as SVGGraphicsElement).getBBox();
+  const padding = 4;
+
+  const accentColor = layout.theme.colors.categorical?.[0] ?? '#4f46e5';
+
+  const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  g.setAttribute('class', 'oc-selection-overlay');
+
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  rect.setAttribute('x', String(bbox.x - padding));
+  rect.setAttribute('y', String(bbox.y - padding));
+  rect.setAttribute('width', String(bbox.width + padding * 2));
+  rect.setAttribute('height', String(bbox.height + padding * 2));
+  rect.setAttribute('rx', '3');
+  rect.setAttribute('fill', 'transparent');
+  rect.setAttribute('stroke', accentColor);
+  rect.setAttribute('stroke-width', '1.5');
+  rect.setAttribute('pointer-events', 'none');
+
+  g.appendChild(rect);
+  svg.appendChild(g);
+
+  return g;
+}
+
+/**
+ * Create a visually-hidden data table from the chart's a11y fallback data.
+ */
+export function createScreenReaderTable(
+  layout: ChartLayout,
+  container: HTMLElement,
+): HTMLTableElement | null {
+  const data = layout.a11y.dataTableFallback;
+  if (!data || data.length === 0) return null;
+
+  const table = document.createElement('table');
+  table.className = 'oc-sr-only';
+  table.style.position = 'absolute';
+  table.style.width = '1px';
+  table.style.height = '1px';
+  table.style.padding = '0';
+  table.style.margin = '-1px';
+  table.style.overflow = 'hidden';
+  table.style.clipPath = 'inset(50%)';
+  table.style.whiteSpace = 'nowrap';
+  table.style.borderWidth = '0';
+  table.setAttribute('role', 'table');
+  table.setAttribute('aria-label', `Data table: ${layout.a11y.altText}`);
+
+  if (data.length > 0) {
+    const thead = document.createElement('thead');
+    const headerRow = document.createElement('tr');
+    const headers = data[0] as unknown[];
+    for (const header of headers) {
+      const th = document.createElement('th');
+      th.textContent = String(header ?? '');
+      th.setAttribute('scope', 'col');
+      headerRow.appendChild(th);
+    }
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+  }
+
+  if (data.length > 1) {
+    const tbody = document.createElement('tbody');
+    for (let i = 1; i < data.length; i++) {
+      const tr = document.createElement('tr');
+      const cells = data[i] as unknown[];
+      for (const cell of cells) {
+        const td = document.createElement('td');
+        td.textContent = String(cell ?? '');
+        tr.appendChild(td);
+      }
+      tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+  }
+
+  container.appendChild(table);
+  return table;
+}

package/src/interactions/tooltip-events.ts

@@ -0,0 +1,72 @@
+import type { TooltipContent } from '@opendata-ai/openchart-core';
+import type { TooltipManager } from '../tooltip';
+
+/**
+ * Wire tooltip events on mark elements inside an SVG.
+ * Returns a cleanup function to remove all listeners.
+ */
+export function wireTooltipEvents(
+  svg: SVGElement,
+  tooltipDescriptors: Map<string, TooltipContent>,
+  tooltipManager: TooltipManager,
+): () => void {
+  const markElements = svg.querySelectorAll('[data-mark-id]');
+  const cleanups: Array<() => void> = [];
+
+  for (const el of markElements) {
+    const markId = el.getAttribute('data-mark-id');
+    if (!markId) continue;
+
+    const content = tooltipDescriptors.get(markId);
+    if (!content) continue;
+
+    const handleMouseEnter = (e: Event) => {
+      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 handleMouseMove = (e: Event) => {
+      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();
+    };
+
+    const handleTouchStart = (e: Event) => {
+      const touchEvent = e as TouchEvent;
+      if (touchEvent.touches.length > 0) {
+        const touch = touchEvent.touches[0];
+        const svgRect = svg.getBoundingClientRect();
+        const x = touch.clientX - svgRect.left;
+        const y = touch.clientY - svgRect.top;
+        tooltipManager.show(content, x, y);
+      }
+    };
+
+    el.addEventListener('mouseenter', handleMouseEnter);
+    el.addEventListener('mousemove', handleMouseMove);
+    el.addEventListener('mouseleave', handleMouseLeave);
+    el.addEventListener('touchstart', handleTouchStart);
+
+    cleanups.push(() => {
+      el.removeEventListener('mouseenter', handleMouseEnter);
+      el.removeEventListener('mousemove', handleMouseMove);
+      el.removeEventListener('mouseleave', handleMouseLeave);
+      el.removeEventListener('touchstart', handleTouchStart);
+    });
+  }
+
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}