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

package/dist/{chunk-ENXSUXC5.js → chunk-SBIGNRAH.js}

@@ -588,12 +588,28 @@ function applyMapCamera(svg, camera, layout) {
     for (const p of paths) {
       p.setAttribute("vector-effect", "non-scaling-stroke");
     }
+    const points = svg.querySelectorAll(".oc-map-point");
+    for (const p of points) {
+      const baseR = Number(p.getAttribute("data-base-r") ?? 5);
+      const baseSW = Number(p.getAttribute("data-base-stroke-width") ?? 1);
+      p.setAttribute("r", String(baseR / camera.k));
+      p.setAttribute("stroke-width", String(baseSW / camera.k));
+      p.setAttribute("vector-effect", "non-scaling-stroke");
+    }
   } else {
     cameraGroup.removeAttribute("transform");
     const paths = svg.querySelectorAll(".oc-map-feature, .oc-map-borders path");
     for (const p of paths) {
       p.removeAttribute("vector-effect");
     }
+    const points = svg.querySelectorAll(".oc-map-point");
+    for (const p of points) {
+      const baseR = Number(p.getAttribute("data-base-r") ?? 5);
+      const baseSW = Number(p.getAttribute("data-base-stroke-width") ?? 1);
+      p.setAttribute("r", String(baseR));
+      p.setAttribute("stroke-width", String(baseSW));
+      p.removeAttribute("vector-effect");
+    }
   }
 }
 
@@ -777,6 +793,39 @@ function renderFeatures(parent, features, animation, staggerBudget = 0) {
   }
   parent.appendChild(g);
 }
+function renderPointMarks(parent, points, animation) {
+  if (points.length === 0) return;
+  const g = createSVGElement2("g");
+  g.setAttribute("class", "oc-map-points");
+  g.setAttribute("role", "list");
+  for (const pt of points) {
+    const circle = createSVGElement2("circle");
+    circle.setAttribute("class", "oc-map-point");
+    circle.setAttribute("role", "listitem");
+    setAttrs2(circle, {
+      cx: pt.cx,
+      cy: pt.cy,
+      r: pt.r,
+      fill: pt.fill,
+      stroke: pt.stroke,
+      "stroke-width": pt.strokeWidth
+    });
+    circle.setAttribute("data-point-key", pt.key);
+    circle.setAttribute("data-base-r", String(pt.r));
+    circle.setAttribute("data-base-stroke-width", String(pt.strokeWidth));
+    if (pt.aria?.label) {
+      circle.setAttribute("aria-label", pt.aria.label);
+    }
+    if (animation?.enter) {
+      circle.style.setProperty(
+        "--oc-mark-index",
+        String(pt.animationIndex)
+      );
+    }
+    g.appendChild(circle);
+  }
+  parent.appendChild(g);
+}
 function renderMapSVG(layout, opts) {
   const { width, height, features, borders, a11y, watermark, animation } = layout;
   const animate = opts?.animate && !!animation?.enter;
@@ -816,6 +865,7 @@ function renderMapSVG(layout, opts) {
   cameraGroup.setAttribute("data-oc-map-camera", "");
   renderFeatures(cameraGroup, features, animate ? animation : void 0, mapStaggerBudget);
   renderBorders(cameraGroup, borders);
+  renderPointMarks(cameraGroup, layout.pointMarks, animate ? animation : void 0);
   mapGroup.appendChild(cameraGroup);
   svg.appendChild(mapGroup);
   if (layout.continuousLegend) {
@@ -823,6 +873,12 @@ function renderMapSVG(layout, opts) {
   } else if (layout.categoricalLegend) {
     renderLegend(svg, layout.categoricalLegend);
   }
+  if (layout.pointCategoricalLegend) {
+    renderLegend(svg, layout.pointCategoricalLegend);
+  }
+  if (layout.pointContinuousLegend) {
+    renderLegend(svg, layout.pointContinuousLegend);
+  }
   if (watermark) {
     renderWatermark(svg, layout);
   }
@@ -1525,6 +1581,66 @@ function createMap(container, spec, options) {
         el.removeEventListener("click", handleClick);
       });
     }
+    const pointMarksByKey = new Map(layout.pointMarks.map((p) => [p.key, p]));
+    const pointElements = svg.querySelectorAll(".oc-map-point");
+    for (const el of pointElements) {
+      const pointKey = el.getAttribute("data-point-key");
+      if (!pointKey) continue;
+      const content = layout.tooltipDescriptors.get(`point:${pointKey}`);
+      const pointMark = pointMarksByKey.get(pointKey);
+      const handlePointMouseEnter = (e) => {
+        const mouseEvent = e;
+        el.style.setProperty("cursor", "pointer");
+        el.style.setProperty("filter", "brightness(1.15)");
+        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 (pointMark) {
+          options?.onMarkHover?.({
+            id: pointKey,
+            name: pointKey,
+            data: pointMark.data
+          });
+        }
+      };
+      const handlePointMouseMove = (e) => {
+        if (content && tooltipManager && options?.tooltip !== false) {
+          const mouseEvent = e;
+          const svgRect = svg.getBoundingClientRect();
+          const x = mouseEvent.clientX - svgRect.left;
+          const y = mouseEvent.clientY - svgRect.top;
+          tooltipManager.show(content, x, y);
+        }
+      };
+      const handlePointMouseLeave = () => {
+        el.style.removeProperty("cursor");
+        el.style.removeProperty("filter");
+        tooltipManager?.hide();
+        options?.onMarkHover?.(null);
+      };
+      const handlePointClick = () => {
+        if (pointMark) {
+          options?.onMarkClick?.({
+            id: pointKey,
+            name: pointKey,
+            data: pointMark.data
+          });
+        }
+      };
+      el.addEventListener("mouseenter", handlePointMouseEnter);
+      el.addEventListener("mousemove", handlePointMouseMove);
+      el.addEventListener("mouseleave", handlePointMouseLeave);
+      el.addEventListener("click", handlePointClick);
+      cleanups.push(() => {
+        el.removeEventListener("mouseenter", handlePointMouseEnter);
+        el.removeEventListener("mousemove", handlePointMouseMove);
+        el.removeEventListener("mouseleave", handlePointMouseLeave);
+        el.removeEventListener("click", handlePointClick);
+      });
+    }
     return () => {
       for (const cleanup of cleanups) {
         cleanup();
@@ -6510,4 +6626,4 @@ export {
   createYouDrawIt,
   createChart
 };
-//# sourceMappingURL=chunk-ENXSUXC5.js.map
+//# sourceMappingURL=chunk-SBIGNRAH.js.map