@opendata-ai/openchart-vanilla 6.28.5 → 7.0.0

package/src/svg-renderer.ts

@@ -16,8 +16,10 @@ import { renderAnnotations } from './renderers/annotations';
 import { renderAxes } from './renderers/axes';
 import { renderBrand } from './renderers/brand';
 import { renderChrome } from './renderers/chrome';
+import { renderEndpointLabels } from './renderers/endpoint-labels';
 import { renderLegend } from './renderers/legend';
 import { renderMarks, resetMarkRenderState, setMarkRenderState } from './renderers/marks';
+import { renderMetrics } from './renderers/metrics';
 import { createSVGElement, SVG_NS, setAttrs } from './renderers/svg-dom';
 import { nextSvgId } from './svg-ids';
 
@@ -104,16 +106,22 @@ export function renderChartSVG(
     }
   }
 
-  // Background
-  const bg = createSVGElement('rect');
-  setAttrs(bg, {
-    x: 0,
-    y: 0,
-    width,
-    height,
-    fill: layout.theme.colors.background,
-  });
-  svg.appendChild(bg);
+  // Background. Sparkline mode skips the background rect entirely so the
+  // host page's surface color shows through — sparklines are drop-ins for
+  // KPI cards, table cells, and inline contexts where the consumer owns
+  // the background. Other display modes paint a fill so the chart is a
+  // self-contained visual on any host surface.
+  if (layout.display !== 'sparkline') {
+    const bg = createSVGElement('rect');
+    setAttrs(bg, {
+      x: 0,
+      y: 0,
+      width,
+      height,
+      fill: layout.theme.colors.background,
+    });
+    svg.appendChild(bg);
+  }
 
   // Clip path to prevent marks (especially area fills) from overflowing
   // into the chrome region (title/subtitle). Extends full width so
@@ -159,13 +167,21 @@ export function renderChartSVG(
     renderMarks(clippedGroup, layout);
 
     // Add transparent overlay rect for line/area charts to enable voronoi tooltip lookup.
-    // Only added when there are line or area marks with dataPoints, and no explicit
-    // PointMark objects (which use per-element event handling instead).
+    // Always emitted for line/area with dataPoints — the overlay-driven snap tooltip
+    // with crosshair is the canonical interaction for these chart types. When point
+    // marks coexist (e.g. mark.point: true), they still render decoratively but
+    // pointer events route to the overlay so the snap behavior wins.
     const hasLineOrAreaWithDataPoints = layout.marks.some(
       (m) => (m.type === 'line' || m.type === 'area') && m.dataPoints && m.dataPoints.length > 0,
     );
-    const hasPointMarks = layout.marks.some((m) => m.type === 'point');
-    if (hasLineOrAreaWithDataPoints && !hasPointMarks) {
+    if (hasLineOrAreaWithDataPoints) {
+      // Decorative point marks on line/area: route pointer events to the
+      // overlay so the snap-tooltip wins instead of competing per-point hover.
+      const pointEls = clippedGroup.querySelectorAll('circle.oc-mark-point');
+      for (const el of pointEls) {
+        el.setAttribute('pointer-events', 'none');
+      }
+
       const overlay = createSVGElement('rect');
       setAttrs(overlay, {
         x: layout.area.x,
@@ -178,7 +194,10 @@ export function renderChartSVG(
       overlay.setAttribute('data-voronoi-overlay', 'true');
       clippedGroup.appendChild(overlay);
 
-      // Crosshair line: opt-in vertical line that tracks the nearest data point
+      // Crosshair line: vertical line that tracks the snapped data point x.
+      // Gated on `opts.crosshair` because the dashed line is the optional bit;
+      // the snap-dots layer below ships regardless so the multi-series
+      // hover-tooltip stays useful even when the user opts out of the line.
       if (opts?.crosshair) {
         const crosshairLine = createSVGElement('line');
         crosshairLine.setAttribute('data-crosshair', 'true');
@@ -188,27 +207,68 @@ export function renderChartSVG(
           y1: layout.area.y,
           x2: 0,
           y2: layout.area.y + layout.area.height,
-          stroke: layout.theme.colors.gridline,
-          'stroke-opacity': '0.5',
-          'stroke-dasharray': '4,3',
+          stroke: layout.theme.colors.axis,
+          'stroke-opacity': '0.4',
+          'stroke-dasharray': '3,3',
           'stroke-width': '1',
           'pointer-events': 'none',
         });
         crosshairLine.style.display = 'none';
         clippedGroup.appendChild(crosshairLine);
       }
+
+      // Snap-dot layer: mount.ts populates one circle per series at the
+      // snapped x on hover. Always emitted so the merged tooltip has its
+      // anchors regardless of `opts.crosshair`.
+      const dotsGroup = createSVGElement('g');
+      dotsGroup.setAttribute('data-snap-dots', 'true');
+      dotsGroup.setAttribute('class', 'oc-snap-dots');
+      dotsGroup.setAttribute('pointer-events', 'none');
+      clippedGroup.appendChild(dotsGroup);
     }
 
     svg.appendChild(clippedGroup);
 
     renderAnnotations(svg, layout);
+
+    // Endpoint labels render after marks/annotations so they sit on top of any
+    // chart-edge content, but before the traditional legend so chrome wins on
+    // collision. The engine handles all suppression — when entries is empty,
+    // renderEndpointLabels is a no-op.
+    renderEndpointLabels(svg, layout);
+
+    // Suppress decorative point marks that sit underneath an endpoint marker
+    // (mark.point: true + endpoint marker on produces a double-circle at the
+    // line's right terminus). The endpoint marker is the canonical terminator
+    // when present, so the point mark hides via opacity (not removal) so the
+    // SVG DOM stays diff-friendly for animated re-renders.
+    const epEntries = layout.endpointLabels?.entries ?? [];
+    if (epEntries.length > 0) {
+      const pointEls = clippedGroup.querySelectorAll<SVGCircleElement>('circle.oc-mark-point');
+      for (const entry of epEntries) {
+        if (!entry.marker) continue;
+        const mx = entry.marker.x;
+        const my = entry.marker.y;
+        for (const el of pointEls) {
+          const cx = Number(el.getAttribute('cx'));
+          const cy = Number(el.getAttribute('cy'));
+          if (Math.abs(cx - mx) < 0.5 && Math.abs(cy - my) < 0.5) {
+            el.setAttribute('opacity', '0');
+          }
+        }
+      }
+    }
+
     renderLegend(svg, layout.legend);
 
     // Chrome renders on top so titles are never obscured by chart elements
     renderChrome(svg, layout);
+    renderMetrics(svg, layout);
 
-    // Brand renders as a footer item, right-aligned on the source/footer row
-    if (layout.watermark) {
+    // Brand renders as a footer item, right-aligned on the source/footer row.
+    // Suppressed when the spec supplies a custom chrome.brand so the two
+    // brand blocks don't stack.
+    if (layout.watermark && !layout.chrome.brand) {
       renderBrand(svg, layout);
     }
   } finally {

package/src/tilemap-mount.ts

@@ -126,10 +126,10 @@ export function createTileMap(
 
   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),
-    };
+    const width = Math.max(rect.width || 600, 100);
+    // Height is derived from content by the compiler (tight viewBox),
+    // so pass a large value to ensure width is the binding constraint.
+    return { width, height: width };
   }
 
   function compile(): TileMapLayout {
@@ -263,8 +263,8 @@ export function createTileMap(
       }
     }
 
-    // Setup animation cleanup
-    if (currentLayout.animation?.enabled) {
+    // Setup animation cleanup only when actually animating
+    if (animate && currentLayout.animation?.enabled) {
       animationCleanup = setupAnimationCleanup(newSvg, () => {
         // On animation complete, check if resize was pending
         if (pendingResize && !destroyed) {

package/src/tilemap-renderer.ts

@@ -392,8 +392,6 @@ export function renderTileMapSVG(
 
   const svg = createSVGElement('svg') as SVGSVGElement;
   svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
-  svg.setAttribute('width', String(width));
-  svg.setAttribute('height', String(height));
   svg.setAttribute('role', 'img');
   if (a11y.altText) {
     svg.setAttribute('aria-label', a11y.altText);

package/src/tooltip.ts

@@ -6,12 +6,23 @@
  * tap-outside-to-hide.
  */
 
+import type { Placement } from '@floating-ui/dom';
 import { computePosition, flip, offset, shift } from '@floating-ui/dom';
 import type { TooltipContent } from '@opendata-ai/openchart-core';
 
+export interface TooltipShowOptions {
+  /**
+   * Floating-ui placement. Defaults to 'bottom-start' for mark hover
+   * (the legacy behavior). Line/area snap-tooltips pass 'right-start'
+   * so the card sits beside the snapped point and flips to 'left-start'
+   * via the flip middleware when crowding the right edge.
+   */
+  placement?: Placement;
+}
+
 export interface TooltipManager {
   /** Show the tooltip with content at a given position. */
-  show(content: TooltipContent, x: number, y: number): void;
+  show(content: TooltipContent, x: number, y: number, opts?: TooltipShowOptions): void;
   /** Hide the tooltip. */
   hide(): void;
   /** Remove the tooltip element and clean up event listeners. */
@@ -51,7 +62,7 @@ export function createTooltipManager(container: HTMLElement): TooltipManager {
   };
   document.addEventListener('touchstart', handleDocumentTouch);
 
-  function show(content: TooltipContent, x: number, y: number): void {
+  function show(content: TooltipContent, x: number, y: number, opts?: TooltipShowOptions): void {
     // Fast content identity check: title + field count + first/last field values
     const contentKey = `${content.title}|${content.fields.length}|${content.fields[0]?.value}|${content.fields[content.fields.length - 1]?.value}`;
 
@@ -60,9 +71,14 @@ export function createTooltipManager(container: HTMLElement): TooltipManager {
 
       let html = '';
 
-      // Title row: optional color dot + title text
+      // Multi-series tooltips put a swatch on each row instead of in the
+      // header, so detect that case once.
+      const colorRowCount = content.fields.filter((f) => f.color).length;
+      const perRowSwatches = colorRowCount > 1;
+
+      // Title row: header dot only when there's a single color (single-series)
       if (content.title) {
-        const titleColor = content.fields.find((f) => f.color)?.color;
+        const titleColor = perRowSwatches ? undefined : content.fields.find((f) => f.color)?.color;
         html += '<div class="oc-tooltip-header">';
         if (titleColor) {
           html += `<span class="oc-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
@@ -76,7 +92,11 @@ export function createTooltipManager(container: HTMLElement): TooltipManager {
         html += '<div class="oc-tooltip-body">';
         for (const field of content.fields) {
           html += '<div class="oc-tooltip-row">';
-          html += `<span class="oc-tooltip-label">${esc(field.label)}</span>`;
+          html += '<span class="oc-tooltip-label">';
+          if (perRowSwatches && field.color) {
+            html += `<span class="oc-tooltip-row-swatch" style="background:${esc(field.color)}"></span>`;
+          }
+          html += `${esc(field.label)}</span>`;
           html += `<span class="oc-tooltip-value">${esc(field.value)}</span>`;
           html += '</div>';
         }
@@ -109,8 +129,8 @@ export function createTooltipManager(container: HTMLElement): TooltipManager {
     };
 
     computePosition(virtualRef, tooltip, {
-      placement: 'bottom-start',
-      middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 5 })],
+      placement: opts?.placement ?? 'bottom-start',
+      middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 8 })],
     }).then(({ x: fx, y: fy }) => {
       // Discard stale callbacks from earlier show() calls
       if (positionId !== currentPositionId) return;