@opendata-ai/openchart-vanilla 8.1.1 → 8.2.1

package/dist/{chunk-RQNAZZJM.js → chunk-N5KDVZU7.js}

@@ -853,7 +853,7 @@ function keyAnnotations(annotations) {
 }
 
 // src/transition/gate.ts
-var TRANSITIONABLE_MARKS = /* @__PURE__ */ new Set(["bar", "line", "area", "point", "beeswarm"]);
+var TRANSITIONABLE_MARKS = /* @__PURE__ */ new Set(["bar", "line", "area", "point", "beeswarm", "arc"]);
 var DEFAULT_UPDATE_MAX_MARKS = 500;
 var CANVAS_DEFAULT_UPDATE_MAX_MARKS = 2e4;
 function canTransitionSpecShape(prevSpec, nextSpec) {
@@ -867,14 +867,13 @@ function canTransitionSpecShape(prevSpec, nextSpec) {
   const prevEnc = prev.encoding;
   const nextEnc = next.encoding;
   if (!prevEnc || !nextEnc) return false;
-  return !(prevEnc.x?.field !== nextEnc.x?.field || prevEnc.x?.type !== nextEnc.x?.type || prevEnc.y?.field !== nextEnc.y?.field || prevEnc.y?.type !== nextEnc.y?.type || prevEnc.color?.field !== nextEnc.color?.field || prevEnc.key?.field !== nextEnc.key?.field || prevEnc.facet?.field !== nextEnc.facet?.field || prevEnc.row?.field !== nextEnc.row?.field || prevEnc.column?.field !== nextEnc.column?.field);
+  return !(prevEnc.x?.field !== nextEnc.x?.field || prevEnc.x?.type !== nextEnc.x?.type || prevEnc.y?.field !== nextEnc.y?.field || prevEnc.y?.type !== nextEnc.y?.type || prevEnc.theta?.field !== nextEnc.theta?.field || prevEnc.theta?.type !== nextEnc.theta?.type || prevEnc.color?.field !== nextEnc.color?.field || prevEnc.key?.field !== nextEnc.key?.field || prevEnc.facet?.field !== nextEnc.facet?.field || prevEnc.row?.field !== nextEnc.row?.field || prevEnc.column?.field !== nextEnc.column?.field);
 }
 function canTransition(args) {
   const { prevLayout, nextLayout, prevSpec, nextSpec, isFirstRender, entranceInFlight } = args;
   if (!prevLayout || !prevSpec || isFirstRender) return false;
   if (!nextLayout.animation?.update) return false;
   if (!canTransitionSpecShape(prevSpec, nextSpec)) return false;
-  if (nextLayout.display === "sparkline") return false;
   if (entranceInFlight) return false;
   if (prevLayout.dimensions.width !== nextLayout.dimensions.width || prevLayout.dimensions.height !== nextLayout.dimensions.height) {
     return false;
@@ -936,6 +935,10 @@ function hasGeometryChanged(prevLayout, nextLayout) {
       }
     } else if (p.type === "area" && n.type === "area") {
       if (p.path !== n.path) return true;
+    } else if (p.type === "arc" && n.type === "arc") {
+      if (p.startAngle !== n.startAngle || p.endAngle !== n.endAngle || p.innerRadius !== n.innerRadius || p.outerRadius !== n.outerRadius || p.center.x !== n.center.x || p.center.y !== n.center.y) {
+        return true;
+      }
     } else if (p.type === "point" && n.type === "point") {
       if (p.cx !== n.cx || p.cy !== n.cy || p.r !== n.r) return true;
     } else if (p.type === "rule" && n.type === "rule") {
@@ -953,6 +956,9 @@ function hasGeometryChanged(prevLayout, nextLayout) {
 import { isGradientDef } from "@opendata-ai/openchart-core";
 import { buildAreaPath as buildAreaPath2, buildLinePath as buildLinePath2, EXIT_DEFAULTS } from "@opendata-ai/openchart-engine";
 
+// src/transition/apply.ts
+import { buildArcPath } from "@opendata-ai/openchart-engine";
+
 // ../../node_modules/.bun/d3-color@3.1.0/node_modules/d3-color/src/define.js
 function define_default(constructor, factory, prototype) {
   constructor.prototype = factory.prototype = prototype;
@@ -2129,6 +2135,24 @@ function applyFinalAreaPaths(el, mark) {
 }
 
 // src/transition/apply.ts
+function lerpArcGeom(from, to, t) {
+  return {
+    startAngle: from.startAngle + (to.startAngle - from.startAngle) * t,
+    endAngle: from.endAngle + (to.endAngle - from.endAngle) * t,
+    innerRadius: from.innerRadius + (to.innerRadius - from.innerRadius) * t,
+    outerRadius: from.outerRadius + (to.outerRadius - from.outerRadius) * t
+  };
+}
+function applyArcState(tw, eased) {
+  const geom = lerpArcGeom(tw.from, tw.to, eased);
+  const pathEl = tw.el.tagName === "path" ? tw.el : tw.el.querySelector("path");
+  pathEl?.setAttribute("d", buildArcPath(geom));
+  if (tw.fromCenter.x !== tw.toCenter.x || tw.fromCenter.y !== tw.toCenter.y) {
+    const cx = tw.fromCenter.x + (tw.toCenter.x - tw.fromCenter.x) * eased;
+    const cy = tw.fromCenter.y + (tw.toCenter.y - tw.fromCenter.y) * eased;
+    tw.el.setAttribute("transform", `translate(${cx},${cy})`);
+  }
+}
 function getKeyForTween(tw) {
   if (tw.tweenType === "canvasPoints" || tw.tweenType === "canvasGridlines") return null;
   if ("ghost" in tw && tw.ghost) return null;
@@ -2176,6 +2200,10 @@ function applyTweenState(tw, elapsed, update, exit, enterDelay, enterDuration) {
       applyAreaPaths(tw.el, top, bottom, tw.interpolate, tw.hasStroke);
       break;
     }
+    case "arc": {
+      applyArcState(tw, eased);
+      break;
+    }
     case "point": {
       const cx = tw.fromCx + (tw.toCx - tw.fromCx) * eased;
       const cy = tw.fromCy + (tw.toCy - tw.fromCy) * eased;
@@ -2263,6 +2291,12 @@ function snapTweenToFinal(tw) {
     case "area":
       applyAreaPaths(tw.el, tw.toTop, tw.toBottom, tw.interpolate, tw.hasStroke);
       break;
+    case "arc": {
+      const pathEl = tw.el.tagName === "path" ? tw.el : tw.el.querySelector("path");
+      pathEl?.setAttribute("d", tw.mark.path);
+      tw.el.setAttribute("transform", `translate(${tw.toCenter.x},${tw.toCenter.y})`);
+      break;
+    }
     case "point":
       tw.el.setAttribute("cx", String(tw.toCx));
       tw.el.setAttribute("cy", String(tw.toCy));
@@ -2754,6 +2788,97 @@ function buildAreaTweens(prevLayout, nextLayout, marksContainer, dom, tweens, gh
     });
   }
 }
+function arcGeomFromMark(m) {
+  return {
+    startAngle: m.startAngle,
+    endAngle: m.endAngle,
+    innerRadius: m.innerRadius,
+    outerRadius: m.outerRadius
+  };
+}
+function buildArcTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, ghostGradientMap, fromSnapshot) {
+  const prevArcs = prevLayout.marks.filter((m) => m.type === "arc");
+  const nextArcs = nextLayout.marks.filter((m) => m.type === "arc");
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (const m of prevArcs) {
+    if (m.key) prevByKey.set(m.key, m);
+  }
+  const nextByKey = /* @__PURE__ */ new Map();
+  for (const m of nextArcs) {
+    if (m.key) nextByKey.set(m.key, m);
+  }
+  for (const [key, next] of nextByKey) {
+    const prev = prevByKey.get(key);
+    if (!prev) continue;
+    const el = dom.any(key);
+    if (!el) continue;
+    let fromGeom = arcGeomFromMark(prev);
+    let fromCenter = prev.center;
+    const snap = fromSnapshot?.get(key);
+    if (snap && snap.type === "arc") {
+      fromGeom = {
+        startAngle: snap.startAngle,
+        endAngle: snap.endAngle,
+        innerRadius: snap.innerRadius,
+        outerRadius: snap.outerRadius
+      };
+      fromCenter = { x: snap.cx, y: snap.cy };
+    }
+    tweens.push({
+      tweenType: "arc",
+      kind: "update",
+      el,
+      from: fromGeom,
+      to: arcGeomFromMark(next),
+      fromCenter,
+      toCenter: next.center,
+      mark: next
+    });
+  }
+  for (const [key, next] of nextByKey) {
+    if (prevByKey.has(key)) continue;
+    const el = dom.any(key);
+    if (!el) continue;
+    tweens.push({
+      tweenType: "arc",
+      kind: "enter",
+      el,
+      from: { ...arcGeomFromMark(next), endAngle: next.startAngle },
+      to: arcGeomFromMark(next),
+      fromCenter: next.center,
+      toCenter: next.center,
+      mark: next,
+      fromOpacity: 0,
+      toOpacity: 1
+    });
+  }
+  for (const [key, prev] of prevByKey) {
+    if (nextByKey.has(key)) continue;
+    const ghostMark = resolveGhostGradientFill(prev, ghostGradientMap);
+    const ghost = renderSingleMark(ghostMark, 0);
+    if (!ghost) continue;
+    ghost.classList.add("oc-ghost");
+    ghost.setAttribute("aria-hidden", "true");
+    ghost.setAttribute("pointer-events", "none");
+    ghost.removeAttribute("data-key");
+    marksContainer.appendChild(ghost);
+    ghosts.push(ghost);
+    const mid = (prev.startAngle + prev.endAngle) / 2;
+    tweens.push({
+      tweenType: "arc",
+      kind: "exit",
+      el: ghost,
+      from: arcGeomFromMark(prev),
+      to: { ...arcGeomFromMark(prev), startAngle: mid, endAngle: mid },
+      fromCenter: prev.center,
+      toCenter: prev.center,
+      mark: prev,
+      ghost,
+      fromOpacity: 1,
+      toOpacity: 0
+    });
+  }
+}
 function buildPointTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, ghostGradientMap, fromSnapshot) {
   const prevPoints = prevLayout.marks.filter((m) => m.type === "point");
   const nextPoints = nextLayout.marks.filter((m) => m.type === "point");
@@ -3143,6 +3268,7 @@ function runTransition(args) {
   const hasRects = prevLayout.marks.some((m) => m.type === "rect") || nextLayout.marks.some((m) => m.type === "rect");
   const hasLines = prevLayout.marks.some((m) => m.type === "line") || nextLayout.marks.some((m) => m.type === "line");
   const hasAreas = prevLayout.marks.some((m) => m.type === "area") || nextLayout.marks.some((m) => m.type === "area");
+  const hasArcs = prevLayout.marks.some((m) => m.type === "arc") || nextLayout.marks.some((m) => m.type === "arc");
   const hasPoints = prevLayout.marks.some((m) => m.type === "point") || nextLayout.marks.some((m) => m.type === "point");
   const hasRules = prevLayout.marks.some((m) => m.type === "rule") || nextLayout.marks.some((m) => m.type === "rule");
   const hasTicks = prevLayout.marks.some((m) => m.type === "tick") || nextLayout.marks.some((m) => m.type === "tick");
@@ -3174,6 +3300,18 @@ function runTransition(args) {
       fromSnapshot
     );
   }
+  if (hasArcs) {
+    buildArcTweens(
+      prevLayout,
+      nextLayout,
+      marksContainer,
+      dom,
+      tweens,
+      ghosts,
+      ghostGradientMap,
+      fromSnapshot
+    );
+  }
   if (hasPoints) {
     if (canvas) {
       buildCanvasPointsTween(prevLayout, nextLayout, canvas, tweens, fromSnapshot);
@@ -3347,6 +3485,15 @@ function runTransition(args) {
           snap.set(key, { type: "area", d, topD });
           break;
         }
+        case "arc": {
+          snap.set(key, {
+            type: "arc",
+            ...lerpArcGeom(tw.from, tw.to, easedUpdate),
+            cx: tw.fromCenter.x + (tw.toCenter.x - tw.fromCenter.x) * easedUpdate,
+            cy: tw.fromCenter.y + (tw.toCenter.y - tw.fromCenter.y) * easedUpdate
+          });
+          break;
+        }
       }
     }
     return snap;
@@ -4859,6 +5006,21 @@ function wireLegendInteraction(svg, _layout, toggleSeries, onLegendToggle, onEdi
 
 // src/interactions/selection.ts
 import { elementRef as elementRef2 } from "@opendata-ai/openchart-core";
+
+// src/dom-helpers.ts
+function applySrOnlyStyles(el) {
+  el.style.position = "absolute";
+  el.style.width = "1px";
+  el.style.height = "1px";
+  el.style.padding = "0";
+  el.style.margin = "-1px";
+  el.style.overflow = "clip";
+  el.style.clipPath = "inset(50%)";
+  el.style.whiteSpace = "nowrap";
+  el.style.borderWidth = "0";
+}
+
+// src/interactions/selection.ts
 function findElementByRef(svg, ref) {
   switch (ref.type) {
     case "annotation": {
@@ -5017,17 +5179,10 @@ function renderSelectionOverlay(svg, ref, layout) {
 function createScreenReaderTable(layout, container) {
   const data = layout.a11y.dataTableFallback;
   if (!data || data.length === 0) return null;
+  const wrapper = document.createElement("div");
+  wrapper.className = "oc-sr-only";
+  applySrOnlyStyles(wrapper);
   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}`);
   const totalRows = layout.a11y.totalRows;
@@ -5063,8 +5218,9 @@ function createScreenReaderTable(layout, container) {
     }
     table.appendChild(tbody);
   }
-  container.appendChild(table);
-  return table;
+  wrapper.appendChild(table);
+  container.appendChild(wrapper);
+  return wrapper;
 }
 
 // src/interactions/tooltip-events.ts
@@ -6310,7 +6466,7 @@ function createChart(container, spec, options) {
   let cleanupEditDrags = null;
   let cleanupSelection = null;
   let cleanupKeyboardEdit = null;
-  let srTable = null;
+  let srTableWrapper = null;
   let destroyed = false;
   let isDragging = false;
   let pendingRender = false;
@@ -6770,9 +6926,9 @@ function createChart(container, spec, options) {
     if (tooltipManager) {
       tooltipManager.destroy();
     }
-    if (srTable?.parentNode) {
-      srTable.parentNode.removeChild(srTable);
-      srTable = null;
+    if (srTableWrapper?.parentNode) {
+      srTableWrapper.parentNode.removeChild(srTableWrapper);
+      srTableWrapper = null;
     }
     currentLayout = compile();
     lastRenderedWidth = currentLayout.dimensions.width;
@@ -6895,7 +7051,7 @@ function createChart(container, spec, options) {
       }
     }
     if (!currentLayout.a11y.hidden) {
-      srTable = createScreenReaderTable(currentLayout, container);
+      srTableWrapper = createScreenReaderTable(currentLayout, container);
     }
     if (currentLayout.seriesSearch) {
       if (!seriesSearch) {
@@ -7175,9 +7331,9 @@ function createChart(container, spec, options) {
       svgElement.parentNode.removeChild(svgElement);
       svgElement = null;
     }
-    if (srTable?.parentNode) {
-      srTable.parentNode.removeChild(srTable);
-      srTable = null;
+    if (srTableWrapper?.parentNode) {
+      srTableWrapper.parentNode.removeChild(srTableWrapper);
+      srTableWrapper = null;
     }
     container.classList.remove("oc-dark");
     container.classList.remove("oc-root");
@@ -8377,6 +8533,7 @@ export {
   createTooltipManager,
   VECTOR_EXPORT_MAX_POINTS,
   materializeCanvasModeSVG,
+  applySrOnlyStyles,
   AnimationScheduler,
   quadtree,
   SpatialIndex,
@@ -8405,4 +8562,4 @@ export {
   scrubCamera,
   createGeoMap
 };
-//# sourceMappingURL=chunk-RQNAZZJM.js.map
+//# sourceMappingURL=chunk-N5KDVZU7.js.map