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

package/dist/{chunk-ENXSUXC5.js → chunk-43Y7EBT7.js}

@@ -552,6 +552,7 @@ function setupTableAnimationCleanup(wrapper) {
 }
 
 // src/map-camera.ts
+var FOCUS_DIM_OPACITY = 0.25;
 function focusTargetForFeatures(layout, ids, padding = 16) {
   const idSet = new Set(ids.map(String));
   let minX = Infinity;
@@ -588,12 +589,27 @@ 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));
+    }
   } 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");
+    }
   }
 }
 
@@ -720,7 +736,7 @@ function renderBorders(parent, borders) {
   }
   parent.appendChild(g);
 }
-function renderFeatures(parent, features, animation, staggerBudget = 0) {
+function renderFeatures(parent, features, animation, staggerBudget = 0, focusIds) {
   const g = createSVGElement2("g");
   g.setAttribute("class", "oc-map-features");
   g.setAttribute("role", "list");
@@ -763,12 +779,19 @@ function renderFeatures(parent, features, animation, staggerBudget = 0) {
     if (feature.aria?.label) {
       path.setAttribute("aria-label", feature.aria.label);
     }
+    const dimmed = focusIds ? !focusIds.has(String(feature.id)) : false;
+    const s = path.style;
+    if (dimmed) {
+      s.setProperty("opacity", String(FOCUS_DIM_OPACITY));
+    }
     if (!bulk && animation?.enter) {
       const idx = feature.animationIndex ?? i;
       path.setAttribute("data-animation-index", String(idx));
-      const s = path.style;
       s.setProperty("--oc-mark-index", String(idx));
       s.setProperty("--oc-feature-fill", feature.fill);
+      if (dimmed) {
+        s.setProperty("--oc-feature-target-opacity", String(FOCUS_DIM_OPACITY));
+      }
       if (staggerBudget > 0 && maxIdx > 0) {
         s.setProperty("--oc-map-delay", `${shuffledDelays[i]}ms`);
       }
@@ -777,6 +800,37 @@ 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");
+  for (const pt of points) {
+    const circle = createSVGElement2("circle");
+    circle.setAttribute("class", "oc-map-point");
+    setAttrs2(circle, {
+      cx: pt.cx,
+      cy: pt.cy,
+      r: pt.r,
+      fill: pt.fill,
+      "fill-opacity": pt.fillOpacity,
+      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) {
+      const s = circle.style;
+      s.setProperty("--oc-mark-index", String(pt.animationIndex));
+      s.setProperty("transform-origin", `${pt.cx}px ${pt.cy}px`);
+    }
+    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;
@@ -807,22 +861,65 @@ function renderMapSVG(layout, opts) {
   }
   const defs = createSVGElement2("defs");
   svg.appendChild(defs);
-  renderChrome(svg, layout);
   const mapGroup = createSVGElement2("g");
   mapGroup.setAttribute("class", "oc-map-group");
   mapGroup.setAttribute("transform", `translate(${layout.area.x},${layout.area.y})`);
   const cameraGroup = createSVGElement2("g");
   cameraGroup.setAttribute("class", "oc-map-camera");
   cameraGroup.setAttribute("data-oc-map-camera", "");
-  renderFeatures(cameraGroup, features, animate ? animation : void 0, mapStaggerBudget);
+  const focusIdSet = layout.focus ? new Set(layout.focus.ids.map(String)) : void 0;
+  renderFeatures(
+    cameraGroup,
+    features,
+    animate ? animation : void 0,
+    mapStaggerBudget,
+    focusIdSet
+  );
   renderBorders(cameraGroup, borders);
+  renderPointMarks(cameraGroup, layout.pointMarks, animate ? animation : void 0);
   mapGroup.appendChild(cameraGroup);
   svg.appendChild(mapGroup);
+  renderChrome(svg, layout);
   if (layout.continuousLegend) {
     renderLegend(svg, layout.continuousLegend);
   } else if (layout.categoricalLegend) {
     renderLegend(svg, layout.categoricalLegend);
   }
+  const ptLegend = layout.pointCategoricalLegend ?? layout.pointContinuousLegend;
+  if (ptLegend) {
+    const isDark = layout.theme.isDark;
+    const padX = 10;
+    const padY = 8;
+    const swatchSize = "swatchSize" in ptLegend ? ptLegend.swatchSize : 10;
+    const swatchGap = "swatchGap" in ptLegend ? ptLegend.swatchGap : 6;
+    const entryGap = "entryGap" in ptLegend ? ptLegend.entryGap : 16;
+    let contentWidth = ptLegend.bounds.width;
+    if ("entries" in ptLegend && ptLegend.entries) {
+      const cat = ptLegend;
+      if (cat && cat.entries.length > 0) {
+        const fontSize = ptLegend.labelStyle.fontSize;
+        let w = 0;
+        for (const entry of cat.entries) {
+          w += swatchSize + swatchGap + entry.label.length * fontSize * 0.6 + entryGap;
+        }
+        w -= entryGap;
+        contentWidth = Math.min(w, ptLegend.bounds.width);
+      }
+    }
+    const contentCenterY = ptLegend.bounds.y + swatchSize / 2;
+    const bgHeight = swatchSize + padY * 2;
+    const bg = createSVGElement2("rect");
+    setAttrs2(bg, {
+      x: ptLegend.bounds.x - padX,
+      y: contentCenterY - bgHeight / 2,
+      width: contentWidth + padX * 2,
+      height: bgHeight,
+      rx: 4,
+      fill: isDark ? "rgba(24,24,27,0.9)" : "rgba(255,255,255,0.9)"
+    });
+    svg.appendChild(bg);
+    renderLegend(svg, ptLegend);
+  }
   if (watermark) {
     renderWatermark(svg, layout);
   }
@@ -1484,6 +1581,7 @@ function createMap(container, spec, options) {
         }
         if (feature) {
           options?.onMarkHover?.({
+            kind: "feature",
             id: feature.id,
             name: feature.name,
             data: feature.data
@@ -1508,6 +1606,7 @@ function createMap(container, spec, options) {
       const handleClick = () => {
         if (feature) {
           options?.onMarkClick?.({
+            kind: "feature",
             id: feature.id,
             name: feature.name,
             data: feature.data
@@ -1525,6 +1624,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?.({
+            kind: "point",
+            id: 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?.({
+            kind: "point",
+            id: 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();
@@ -1592,7 +1751,7 @@ function createMap(container, spec, options) {
       const fid = el.getAttribute("data-feature-id");
       el.style.setProperty(
         "opacity",
-        fid && focusSet.has(fid) ? "1" : "0.25"
+        fid && focusSet.has(fid) ? "1" : String(FOCUS_DIM_OPACITY)
       );
     }
   }
@@ -1605,15 +1764,17 @@ function createMap(container, spec, options) {
       fillTransitionHandle.cancel();
       fillTransitionHandle = null;
     }
-    if (svgElement) {
+    const oldSvg = svgElement;
+    const newSvg = renderMapSVG(currentLayout, { animate });
+    if (oldSvg) {
       if (cleanupTooltipEvents) {
         cleanupTooltipEvents();
         cleanupTooltipEvents = null;
       }
-      svgElement.remove();
+      container.replaceChild(newSvg, oldSvg);
+    } else {
+      container.appendChild(newSvg);
     }
-    const newSvg = renderMapSVG(currentLayout, { animate });
-    container.appendChild(newSvg);
     svgElement = newSvg;
     cleanupTooltipEvents = wireTooltipAndInteraction(newSvg, currentLayout);
     if (options?.tooltip !== false) {
@@ -6510,4 +6671,4 @@ export {
   createYouDrawIt,
   createChart
 };
-//# sourceMappingURL=chunk-ENXSUXC5.js.map
+//# sourceMappingURL=chunk-43Y7EBT7.js.map