@chartts/core 0.1.2 → 0.1.4

package/dist/{chunk-CJEMSKW3.js → chunk-7GLCJPV5.js}

@@ -1,5 +1,5 @@
-import { prepareNoAxes } from './chunk-GMLJDDHZ.js';
-import { path, text, circle, group } from './chunk-BMTVFAX2.js';
+import { prepareNoAxes } from './chunk-T7SCCACB.js';
+import { path, text, group, circle, rect } from './chunk-AEQXFDL7.js';
 
 // src/charts/geo/world-regions.ts
 var WORLD_REGIONS = [
@@ -228,6 +228,52 @@ var WORLD_REGIONS = [
 
 // src/charts/geo/geo-type.ts
 var WORLD_SIMPLE = WORLD_REGIONS;
+var centroidCache = /* @__PURE__ */ new WeakMap();
+var bboxCache = /* @__PURE__ */ new WeakMap();
+function getCentroids(regions) {
+  let cached = centroidCache.get(regions);
+  if (cached) return cached;
+  cached = /* @__PURE__ */ new Map();
+  for (const r of regions) {
+    const c = getPathCentroid(r.path);
+    if (c) cached.set(r.name, c);
+  }
+  centroidCache.set(regions, cached);
+  return cached;
+}
+function getBBoxes(regions) {
+  let cached = bboxCache.get(regions);
+  if (cached) return cached;
+  cached = /* @__PURE__ */ new Map();
+  for (const r of regions) {
+    const bb = getPathBBox(r.path);
+    if (bb) cached.set(r.name, bb);
+  }
+  bboxCache.set(regions, cached);
+  return cached;
+}
+var DEFAULT_VB = { x: 0, y: 0, width: 1e3, height: 430 };
+function computeMapTransform(area, vb, legendHeight, zp) {
+  const fitHeight = area.height - legendHeight;
+  const baseScale = Math.min(area.width / vb.width, fitHeight / vb.height) * 0.88;
+  const baseOX = area.x + area.width / 2 - (vb.x + vb.width / 2) * baseScale;
+  const baseOY = area.y + fitHeight / 2 - (vb.y + vb.height / 2) * baseScale;
+  const zoom = zp ? Math.max(zp.zoomX, zp.zoomY) : 1;
+  const scale = baseScale * zoom;
+  if (!zp || zoom === 1 && zp.panX === 0 && zp.panY === 0) {
+    return { scale, offsetX: baseOX, offsetY: baseOY };
+  }
+  const offsetX = baseOX * zoom + area.x * (1 - zoom) + zp.panX * area.width;
+  const offsetY = baseOY * zoom + area.y * (1 - zoom) + zp.panY * area.height;
+  return { scale, offsetX, offsetY };
+}
+function formatValue(v) {
+  if (Math.abs(v) >= 1e12) return (v / 1e12).toFixed(1) + "T";
+  if (Math.abs(v) >= 1e9) return (v / 1e9).toFixed(1) + "B";
+  if (Math.abs(v) >= 1e6) return (v / 1e6).toFixed(1) + "M";
+  if (Math.abs(v) >= 1e3) return (v / 1e3).toFixed(1) + "K";
+  return v % 1 === 0 ? String(v) : v.toFixed(1);
+}
 var geoChartType = {
   type: "geo",
   getScaleTypes() {
@@ -241,7 +287,8 @@ var geoChartType = {
     const nodes = [];
     const gOpts = options;
     const regions = gOpts.regions ?? WORLD_SIMPLE;
-    const showLabels = gOpts.showLabels === true;
+    const showLabels = gOpts.showLabels;
+    const showLegend = gOpts.legendPosition !== "none";
     if (regions.length === 0) return nodes;
     const valueMap = /* @__PURE__ */ new Map();
     const series = data.series[0];
@@ -254,103 +301,216 @@ var geoChartType = {
     const minVal = values.length > 0 ? Math.min(...values) : 0;
     const maxVal = values.length > 0 ? Math.max(...values) : 1;
     const range = maxVal - minVal || 1;
-    const vb = gOpts.viewBox ?? { x: 0, y: 0, width: 1e3, height: 430 };
-    const scaleX = area.width / vb.width;
-    const scaleY = area.height / vb.height;
-    const scale = Math.min(scaleX, scaleY) * 0.85;
-    const offsetX = area.x + (area.width - vb.width * scale) / 2 - vb.x * scale;
-    const offsetY = area.y + (area.height - vb.height * scale) / 2 - vb.y * scale;
+    const baseColor = options.colors[0] ?? "#3b82f6";
+    const legendH = showLegend && values.length > 0 ? 28 : 0;
+    const vb = gOpts.viewBox ?? DEFAULT_VB;
+    const { scale, offsetX, offsetY } = computeMapTransform(area, vb, legendH, ctx.zoomPan);
     const transform = `translate(${offsetX},${offsetY}) scale(${scale})`;
+    const centroids = getCentroids(regions);
     for (let i = 0; i < regions.length; i++) {
       const region = regions[i];
       const val = valueMap.get(region.name);
       const hasData = val !== void 0;
       const t = hasData ? (val - minVal) / range : 0;
-      const baseColor = options.colors[0] ?? "#3b82f6";
-      const fillOpacity = hasData ? 0.15 + t * 0.8 : 0.08;
+      const fillOpacity = hasData ? 0.2 + t * 0.75 : 0.06;
       nodes.push(path(region.path, {
         class: "chartts-geo-region",
         fill: hasData ? baseColor : theme.gridColor,
         fillOpacity,
         stroke: theme.textMuted,
-        strokeWidth: 0.5 / scale,
+        strokeWidth: 0.4 / scale,
         transform,
         "data-series": 0,
         "data-index": i,
-        tabindex: 0,
-        role: "img",
-        ariaLabel: `${region.name}: ${val ?? "no data"}`
+        "data-name": region.name
       }));
     }
-    if (showLabels) {
-      for (let i = 0; i < regions.length; i++) {
-        const region = regions[i];
-        const centroid = getPathCentroid(region.path);
+    const shouldLabel = showLabels === true ? "all" : showLabels === "data" || showLabels === void 0 ? "data" : "none";
+    if (shouldLabel !== "none" && values.length > 0) {
+      const labelNodes = [];
+      const fontSize = Math.max(6, Math.min(9, area.width / 80));
+      for (const [name] of valueMap) {
+        const centroid = centroids.get(name);
         if (!centroid) continue;
         const lx = offsetX + centroid.x * scale;
         const ly = offsetY + centroid.y * scale;
-        nodes.push(text(lx, ly, region.name, {
+        labelNodes.push(text(lx, ly, name, {
           class: "chartts-geo-label",
           fill: theme.textColor,
           textAnchor: "middle",
           dominantBaseline: "central",
-          fontSize: Math.max(7, theme.fontSizeSmall * 0.85),
+          fontSize,
           fontFamily: theme.fontFamily,
+          fontWeight: 600,
           pointerEvents: "none"
         }));
       }
+      if (shouldLabel === "all") {
+        for (const region of regions) {
+          if (valueMap.has(region.name)) continue;
+          const centroid = centroids.get(region.name);
+          if (!centroid) continue;
+          const lx = offsetX + centroid.x * scale;
+          const ly = offsetY + centroid.y * scale;
+          labelNodes.push(text(lx, ly, region.name, {
+            class: "chartts-geo-label",
+            fill: theme.textMuted,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            fontSize: fontSize * 0.85,
+            fontFamily: theme.fontFamily,
+            pointerEvents: "none"
+          }));
+        }
+      }
+      nodes.push(group(labelNodes, { class: "chartts-geo-labels", pointerEvents: "none" }));
     }
-    const scatterIdx = gOpts.scatterSeries ?? 1;
-    const scatterSeries = data.series[scatterIdx];
-    if (scatterSeries) {
-      const scatterNodes = [];
-      const maxScatter = Math.max(...scatterSeries.values.map(Math.abs), 1);
-      for (let i = 0; i < data.labels.length; i++) {
-        const name = String(data.labels[i]);
-        const val = scatterSeries.values[i] ?? 0;
-        if (val <= 0) continue;
-        const region = regions.find((r2) => r2.name === name);
-        if (!region) continue;
-        const centroid = getPathCentroid(region.path);
-        if (!centroid) continue;
-        const sx = offsetX + centroid.x * scale;
-        const sy = offsetY + centroid.y * scale;
-        const r = 3 + val / maxScatter * 12;
-        const color = options.colors[1 % options.colors.length];
-        scatterNodes.push(circle(sx, sy, r, {
-          class: "chartts-geo-scatter",
-          fill: color,
-          fillOpacity: 0.6,
-          stroke: color,
-          strokeWidth: 1,
-          "data-series": scatterIdx,
-          "data-index": i
+    if (gOpts.scatterSeries !== void 0) {
+      const scatterSeries = data.series[gOpts.scatterSeries];
+      if (scatterSeries) {
+        const scatterNodes = [];
+        const maxScatter = Math.max(...scatterSeries.values.map(Math.abs), 1);
+        for (let i = 0; i < data.labels.length; i++) {
+          const name = String(data.labels[i]);
+          const val = scatterSeries.values[i] ?? 0;
+          if (val <= 0) continue;
+          const centroid = centroids.get(name);
+          if (!centroid) continue;
+          const sx = offsetX + centroid.x * scale;
+          const sy = offsetY + centroid.y * scale;
+          const r = 3 + val / maxScatter * 12;
+          const color = options.colors[1 % options.colors.length];
+          scatterNodes.push(circle(sx, sy, r, {
+            class: "chartts-geo-scatter",
+            fill: color,
+            fillOpacity: 0.5,
+            stroke: color,
+            strokeWidth: 1,
+            "data-series": gOpts.scatterSeries,
+            "data-index": i
+          }));
+        }
+        if (scatterNodes.length > 0) {
+          nodes.push(group(scatterNodes, { class: "chartts-geo-scatter-layer" }));
+        }
+      }
+    }
+    if (showLegend && values.length > 0) {
+      const legendNodes = [];
+      const lw = Math.min(200, area.width * 0.4);
+      const lh = 8;
+      const lx = area.x + (area.width - lw) / 2;
+      const ly = area.y + area.height - 20;
+      const steps = 10;
+      const stepW = lw / steps;
+      for (let s = 0; s < steps; s++) {
+        const t = s / (steps - 1);
+        const opacity = 0.2 + t * 0.75;
+        legendNodes.push(rect(lx + s * stepW, ly, stepW + 0.5, lh, {
+          fill: baseColor,
+          fillOpacity: opacity,
+          stroke: "none"
         }));
       }
-      if (scatterNodes.length > 0) {
-        nodes.push(group(scatterNodes, { class: "chartts-geo-scatter-layer" }));
+      legendNodes.push(rect(lx, ly, lw, lh, {
+        fill: "none",
+        stroke: theme.textMuted,
+        strokeWidth: 0.5,
+        rx: 2
+      }));
+      const labelSize = Math.max(8, theme.fontSizeSmall * 0.8);
+      const seriesName = series?.name ?? "";
+      legendNodes.push(text(lx, ly + lh + labelSize + 2, formatValue(minVal), {
+        fill: theme.textMuted,
+        fontSize: labelSize,
+        fontFamily: theme.fontFamily,
+        textAnchor: "start"
+      }));
+      legendNodes.push(text(lx + lw, ly + lh + labelSize + 2, formatValue(maxVal), {
+        fill: theme.textMuted,
+        fontSize: labelSize,
+        fontFamily: theme.fontFamily,
+        textAnchor: "end"
+      }));
+      if (seriesName) {
+        legendNodes.push(text(lx + lw / 2, ly + lh + labelSize + 2, seriesName, {
+          fill: theme.textColor,
+          fontSize: labelSize,
+          fontFamily: theme.fontFamily,
+          textAnchor: "middle",
+          fontWeight: 600
+        }));
       }
+      nodes.push(group(legendNodes, { class: "chartts-geo-legend" }));
     }
     return nodes;
   },
-  hitTest(ctx, _mx, _my) {
-    const { data } = ctx;
+  hitTest(ctx, mx, my) {
+    const { data, area, options } = ctx;
     if (!data.series[0] || data.series[0].values.length === 0) return null;
-    return null;
+    const gOpts = options;
+    const regions = gOpts.regions ?? WORLD_SIMPLE;
+    const showLegend = gOpts.legendPosition !== "none";
+    const values = [...new Map(data.labels.map((l, i) => [String(l), data.series[0].values[i] ?? 0])).values()];
+    const legendH = showLegend && values.length > 0 ? 28 : 0;
+    const vb = gOpts.viewBox ?? DEFAULT_VB;
+    const { scale, offsetX, offsetY } = computeMapTransform(area, vb, legendH, ctx.zoomPan);
+    const mapX = (mx - offsetX) / scale;
+    const mapY = (my - offsetY) / scale;
+    if (mapX < vb.x || mapX > vb.x + vb.width || mapY < vb.y || mapY > vb.y + vb.height) return null;
+    const bboxes = getBBoxes(regions);
+    const centroids = getCentroids(regions);
+    const candidates = [];
+    for (let i = 0; i < data.labels.length; i++) {
+      const name = String(data.labels[i]);
+      const bb = bboxes.get(name);
+      if (!bb) continue;
+      const pad = 3;
+      if (mapX >= bb.minX - pad && mapX <= bb.maxX + pad && mapY >= bb.minY - pad && mapY <= bb.maxY + pad) {
+        const bboxArea = (bb.maxX - bb.minX) * (bb.maxY - bb.minY);
+        const centroid2 = centroids.get(name);
+        const dist = centroid2 ? Math.sqrt((mapX - centroid2.x) ** 2 + (mapY - centroid2.y) ** 2) : 999;
+        candidates.push({ idx: i, area: bboxArea, dist });
+      }
+    }
+    if (candidates.length === 0) return null;
+    candidates.sort((a, b) => a.area - b.area || a.dist - b.dist);
+    const best = candidates[0];
+    const centroid = centroids.get(String(data.labels[best.idx]));
+    const px = centroid ? offsetX + centroid.x * scale : mx;
+    const py = centroid ? offsetY + centroid.y * scale : my;
+    return { seriesIndex: 0, pointIndex: best.idx, distance: best.dist, x: px, y: py };
   }
 };
-function getPathCentroid(d) {
+function extractCoords(d) {
   const nums = d.match(/-?\d+(?:\.\d+)?/g);
-  if (!nums || nums.length < 2) return null;
+  return nums ? nums.map(Number) : [];
+}
+function getPathCentroid(d) {
+  const nums = extractCoords(d);
+  if (nums.length < 2) return null;
   let sx = 0, sy = 0, count = 0;
   for (let i = 0; i + 1 < nums.length; i += 2) {
-    sx += parseFloat(nums[i]);
-    sy += parseFloat(nums[i + 1]);
+    sx += nums[i];
+    sy += nums[i + 1];
     count++;
   }
   return count > 0 ? { x: sx / count, y: sy / count } : null;
 }
+function getPathBBox(d) {
+  const nums = extractCoords(d);
+  if (nums.length < 2) return null;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (let i = 0; i + 1 < nums.length; i += 2) {
+    const x = nums[i], y = nums[i + 1];
+    if (x < minX) minX = x;
+    if (x > maxX) maxX = x;
+    if (y < minY) minY = y;
+    if (y > maxY) maxY = y;
+  }
+  return { minX, minY, maxX, maxY };
+}
 
 export { WORLD_REGIONS, WORLD_SIMPLE, geoChartType };
-//# sourceMappingURL=chunk-CJEMSKW3.js.map
-//# sourceMappingURL=chunk-CJEMSKW3.js.map
+//# sourceMappingURL=chunk-7GLCJPV5.js.map
+//# sourceMappingURL=chunk-7GLCJPV5.js.map