@ac-design/design-system 2.6.1 → 2.7.0

package/dist/lib/components/AcMapChart.vue_vue_type_script_setup_true_lang.js

@@ -3,23 +3,32 @@ import { statusMeta as t } from "./status.js";
 import n from "../charts/ChartFrame.js";
 import { bindItemHover as r, loadOnce as i, useEChart as a } from "../charts/echarts.js";
 import { chartColor as o, formatCompact as s } from "../charts/shared.js";
-import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as ee, createVNode as m, defineComponent as h, getCurrentInstance as te, normalizeStyle as g, openBlock as _, ref as v, renderSlot as ne, shallowRef as re, toDisplayString as y, unref as b, useId as ie, watch as x, withCtx as S } from "vue";
-import { MapPinOff as ae, Minus as oe, Plus as se, RotateCcw as ce } from "@lucide/vue";
-import { registerMap as C, use as le } from "echarts/core";
-import { EffectScatterChart as ue, ScatterChart as de } from "echarts/charts";
-import { GeoComponent as fe } from "echarts/components";
-import { LabelLayout as pe } from "echarts/features";
+import { computed as c, createBlock as ee, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as te, createTextVNode as f, createVNode as p, defineComponent as m, getCurrentInstance as ne, normalizeStyle as h, openBlock as g, ref as _, renderSlot as re, shallowRef as ie, toDisplayString as v, unref as y, useId as ae, watch as b, withCtx as x } from "vue";
+import { MapPinOff as oe, Minus as se, Plus as ce, RotateCcw as le } from "@lucide/vue";
+import { registerMap as S, use as ue } from "echarts/core";
+import { EffectScatterChart as de, ScatterChart as fe } from "echarts/charts";
+import { GeoComponent as pe } from "echarts/components";
+import { LabelLayout as me } from "echarts/features";
 //#region src/lib/components/AcMapChart.vue?vue&type=script&setup=true&lang.ts
-var me = { class: "absolute top-2 right-2 flex flex-col gap-1" }, he = { class: "font-medium text-heading" }, ge = {
+var he = { class: "absolute top-2 right-2 flex flex-col gap-1" }, ge = { class: "flex items-center gap-1.5 font-medium text-heading" }, _e = {
 	key: 0,
 	class: "mt-0.5 text-muted"
-}, _e = {
+}, ve = { class: "font-medium text-heading" }, ye = {
+	key: 0,
+	class: "mt-0.5 text-muted"
+}, be = {
 	key: 2,
 	class: "mt-1.5 flex justify-between gap-4 border-t border-border pt-1.5"
-}, ve = { class: "text-muted" }, ye = { class: "font-medium text-heading tabular-nums" }, w = 2, be = 1.9, T = .75, E = 8, D = 8, xe = .7, O = /*@__PURE__*/ h({
+}, xe = { class: "text-muted" }, Se = { class: "font-medium text-heading tabular-nums" }, C = 2, Ce = 1.9, w = .75, T = 8, we = 8, Te = .7, Ee = 111.32, De = 4, Oe = /*@__PURE__*/ m({
 	__name: "AcMapChart",
 	props: {
 		points: {},
+		areas: { default: () => [] },
+		areaLabels: {
+			type: Boolean,
+			default: !0
+		},
+		selected: { default: void 0 },
 		height: { default: 360 },
 		pointSize: {
 			type: [Number, Function],
@@ -56,6 +65,7 @@ var me = { class: "absolute top-2 right-2 flex flex-col gap-1" }, he = { class:
 			default: void 0
 		},
 		pointsLabel: { default: "locations" },
+		areasLabel: { default: "areas" },
 		tooltip: {
 			type: Boolean,
 			default: !0
@@ -73,75 +83,115 @@ var me = { class: "absolute top-2 right-2 flex flex-col gap-1" }, he = { class:
 			default: !0
 		}
 	},
-	emits: ["point-click"],
-	setup(h, { emit: O }) {
-		le([
+	emits: ["point-click", "area-click"],
+	setup(m, { expose: Oe, emit: ke }) {
+		ue([
+			pe,
 			fe,
 			de,
-			ue,
-			pe
+			me
 		]);
-		let k = h, Se = O, A = [
+		let E = m, Ae = ke, D = [
 			"success",
 			"info",
 			"pending",
 			"warning",
 			"danger",
 			"neutral"
-		], Ce = {
+		], je = {
 			success: o("success", 0),
 			info: o("info", 0),
 			pending: o("pending", 0),
 			warning: o("warning", 0),
 			danger: o("danger", 0),
 			neutral: o("chart-7", 0)
-		}, we = {
+		}, Me = {
 			success: "Healthy",
 			info: "Info",
 			pending: "Pending",
 			warning: "Degraded",
 			danger: "Down",
 			neutral: "Unknown"
-		}, Te = ie(), Ee = !!te()?.vnode.props?.onPointClick, j = v(), M = v([]), N = v(0), P = v(null), F = v(), I = re(), De = 0, L = null;
-		function R(e) {
+		}, Ne = ae(), Pe = ne()?.vnode.props, Fe = !!Pe?.onPointClick, Ie = !!Pe?.onAreaClick, Le = _(), O = _([]), k = _(0), A = _(null), j = _("point"), M = _(), N = ie(), Re = 0, P = null;
+		function F(e) {
 			return e.status?.trim() || "neutral";
 		}
-		function z(e) {
-			if (A.includes(e)) return e;
+		function I(e) {
+			if (D.includes(e)) return e;
 			let n = t(e).tone;
 			return n === "default" ? "neutral" : n;
 		}
-		function B(e) {
-			return k.statusLabels?.[e] ?? we[e] ?? t(e).label;
+		function L(e) {
+			return E.statusLabels?.[e] ?? Me[e] ?? t(e).label;
 		}
-		function V(e) {
-			let t = k.statusColors?.[e];
-			return t ? o(t, 0) : Ce[z(e)];
+		function ze(e) {
+			let t = E.statusColors?.[e];
+			return t ? o(t, 0) : je[I(e)];
 		}
-		function H(e) {
-			return e.color ? o(e.color, 0) : V(R(e));
+		function Be(e) {
+			return e.color ? o(e.color, 0) : ze(F(e));
 		}
-		function Oe(e) {
-			return typeof k.pointSize == "function" ? k.pointSize(e) : k.pointSize;
+		function Ve(e) {
+			return typeof E.pointSize == "function" ? E.pointSize(e) : E.pointSize;
 		}
-		function U(e) {
-			return k.valueFormatter ? k.valueFormatter(e) : s(e);
+		function R(e) {
+			return E.valueFormatter ? E.valueFormatter(e) : s(e);
 		}
-		function ke(e) {
-			if (!k.pulse) return !1;
-			let t = R(e);
-			return k.pulse === !0 ? z(t) === "success" : k.pulse.includes(t) || k.pulse.includes(z(t));
+		function He(e) {
+			if (!E.pulse) return !1;
+			let t = F(e);
+			return E.pulse === !0 ? I(t) === "success" : E.pulse.includes(t) || E.pulse.includes(I(t));
 		}
-		function Ae(e) {
+		function Ue(e) {
 			return /^.[a-z]/.test(e) ? e.charAt(0).toLowerCase() + e.slice(1) : e;
 		}
-		function je(e) {
+		function z(e) {
 			return `${`${Math.abs(e.latitude).toFixed(2)}° ${e.latitude >= 0 ? "N" : "S"}`}, ${`${Math.abs(e.longitude).toFixed(2)}° ${e.longitude >= 0 ? "E" : "W"}`}`;
 		}
-		function W(e) {
-			return Math.min(k.zoomExtent[1], Math.max(k.zoomExtent[0], e));
+		function B(e) {
+			return Math.min(E.zoomExtent[1], Math.max(E.zoomExtent[0], e));
+		}
+		function V(e) {
+			let t = E.selected;
+			return Array.isArray(t) ? t.includes(e) : t === e;
+		}
+		function H(e) {
+			return o(e.color, E.areas.indexOf(e));
+		}
+		function U(e) {
+			return e.replace(/[{}]/g, "");
+		}
+		function W() {
+			let e = N.value;
+			if (!e || !k.value) return 0;
+			let t = k.value - 16, n = q.value - 16;
+			return Math.min(t / ((e[2] - e[0]) * w), n / (e[3] - e[1]));
 		}
 		function G(e) {
+			let t = e.radius / Ee, n = t / w;
+			return [
+				e.longitude - n,
+				e.longitude + n,
+				e.latitude - t,
+				e.latitude + t
+			];
+		}
+		function We(e, t) {
+			return 2 * e.radius * W() * t / Ee;
+		}
+		function K([e, t, n, r]) {
+			let i = [(e + t) / 2, (n + r) / 2], a = W();
+			if (!a) return {
+				zoom: B(1),
+				center: i
+			};
+			let o = k.value - 16, s = q.value - 16;
+			return {
+				zoom: B(Math.min(o / (Math.max(t - e, we) * a * w), s / (Math.max(r - n, we) * a)) * Te),
+				center: i
+			};
+		}
+		function Ge(e) {
 			let t = [
 				Infinity,
 				Infinity,
@@ -160,14 +210,14 @@ var me = { class: "absolute top-2 right-2 flex flex-col gap-1" }, he = { class:
 			for (let t of e.features) n(t.geometry?.coordinates);
 			return t;
 		}
-		function K(e, t, n) {
+		function Ke(e, t, n) {
 			let r = (e) => n ? e[0] >= t : e[0] <= t, i = [];
 			return e.forEach((n, a) => {
 				let o = e[(a + e.length - 1) % e.length];
 				r(o) !== r(n) && i.push([t, o[1] + (n[1] - o[1]) * (t - o[0]) / (n[0] - o[0])]), r(n) && i.push(n);
 			}), i;
 		}
-		function Me(e) {
+		function qe(e) {
 			if (!e.some((e) => e.some((t, n) => n > 0 && Math.abs(t[0] - e[n - 1][0]) > 180))) return [e];
 			let t = e.map((e) => {
 				let t = e[0][0];
@@ -183,11 +233,11 @@ var me = { class: "absolute top-2 right-2 flex flex-col gap-1" }, he = { class:
 				0,
 				360
 			].flatMap((e) => {
-				let n = t.map((t) => K(K(t.map((t) => [t[0] + e, t[1]]), -180, !0), 180, !1)).filter((e) => e.length >= 3);
+				let n = t.map((t) => Ke(Ke(t.map((t) => [t[0] + e, t[1]]), -180, !0), 180, !1)).filter((e) => e.length >= 3);
 				return n.length ? [n] : [];
 			});
 		}
-		async function Ne() {
+		async function Je() {
 			let [{ feature: e }, t] = await Promise.all([import("topojson-client"), import("world-atlas/countries-110m.json")]), n = t.default, r = {
 				type: "FeatureCollection",
 				features: e(n, n.objects.countries).features.filter((e) => e.properties?.name !== "Antarctica").map((e) => {
@@ -198,105 +248,187 @@ var me = { class: "absolute top-2 right-2 flex flex-col gap-1" }, he = { class:
 						...e,
 						geometry: {
 							type: "MultiPolygon",
-							coordinates: n.flatMap(Me)
+							coordinates: n.flatMap(qe)
 						}
 					};
 				})
 			};
-			return C("ac-world", r), r;
+			return S("ac-world", r), r;
 		}
-		async function q() {
-			let e = k.geoJson;
+		async function Ye() {
+			let e = E.geoJson;
 			if (e) {
-				let t = `ac-map-${Te}-${++De}`;
-				C(t, e), I.value = G(e), F.value = t;
+				let t = `ac-map-${Ne}-${++Re}`;
+				S(t, e), N.value = Ge(e), M.value = t;
 				return;
 			}
-			let t = await i("world-map", Ne);
-			k.geoJson || (I.value = G(t), F.value = "ac-world");
+			let t = await i("world-map", Je);
+			E.geoJson || (N.value = Ge(t), M.value = "ac-world");
 		}
-		let J = c(() => {
+		let Xe = c(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of k.points) e.set(R(t), (e.get(R(t)) ?? 0) + 1);
+			for (let t of E.points) e.set(F(t), (e.get(F(t)) ?? 0) + 1);
 			let t = [...e.keys()];
-			return t.sort((e, t) => A.indexOf(z(e)) - A.indexOf(z(t))), t.map((t) => ({
+			return t.sort((e, t) => D.indexOf(I(e)) - D.indexOf(I(t))), t.map((t) => ({
 				key: t,
-				label: B(t),
-				color: V(t),
+				label: L(t),
+				color: ze(t),
 				count: e.get(t)
 			}));
-		}), Pe = c(() => J.value.map((e) => ({
+		}), Ze = c(() => Xe.value.map((e) => ({
 			key: e.key,
 			name: e.label,
 			color: e.color,
-			value: k.legendValues ? String(e.count) : void 0
-		}))), Y = c(() => k.fitToPoints || !N.value ? k.height : Math.min(k.height, Math.round(N.value / be))), X = c(() => k.points.some((e) => e.status)), Z = c(() => k.points.some((e) => e.description)), Q = c(() => k.points.some((e) => typeof e.value == "number")), Fe = c(() => ({
+			value: E.legendValues ? String(e.count) : void 0
+		}))), q = c(() => E.fitToPoints || !k.value ? E.height : Math.min(E.height, Math.round(k.value / Ce))), J = c(() => E.points.some((e) => e.status)), Y = c(() => E.points.some((e) => e.description) || E.areas.some((e) => e.description)), X = c(() => E.points.some((e) => typeof e.value == "number")), Qe = c(() => ({
 			columns: [
 				"Name",
-				...X.value ? ["Status"] : [],
-				...Z.value ? ["Details"] : [],
-				...Q.value ? [k.valueLabel] : [],
-				"Coordinates"
+				...J.value ? ["Status"] : [],
+				...Y.value ? ["Details"] : [],
+				...X.value ? [E.valueLabel] : [],
+				"Coordinates",
+				...E.areas.length ? ["Radius"] : []
 			],
-			rows: k.points.map((e) => [
+			rows: [...E.areas.map((e) => [
 				e.label,
-				...X.value ? [B(R(e))] : [],
-				...Z.value ? [e.description ?? ""] : [],
-				...Q.value ? [typeof e.value == "number" ? U(e.value) : "–"] : [],
-				je(e)
-			])
-		})), Ie = c(() => {
-			let e = J.value.map((e) => `${e.count} ${Ae(e.label)}`).join(", "), t = `World map, ${k.points.length} ${k.pointsLabel}${X.value ? `: ${e}` : ""}.`;
-			return [k.title, k.description || t].filter(Boolean).join(". ");
-		}), Le = c(() => {
-			let e = I.value;
+				...J.value ? ["–"] : [],
+				...Y.value ? [e.description ?? ""] : [],
+				...X.value ? ["–"] : [],
+				z(e),
+				`${Math.round(e.radius).toLocaleString()} km`
+			]), ...E.points.map((e) => [
+				e.label,
+				...J.value ? [L(F(e))] : [],
+				...Y.value ? [e.description ?? ""] : [],
+				...X.value ? [typeof e.value == "number" ? R(e.value) : "–"] : [],
+				z(e),
+				...E.areas.length ? ["–"] : []
+			])]
+		})), $e = c(() => {
+			let e = Xe.value.map((e) => `${e.count} ${Ue(e.label)}`).join(", "), t = E.areas.length ? ` in ${E.areas.length} ${E.areasLabel}` : "", n = `World map, ${E.points.length} ${E.pointsLabel}${t}${J.value ? `: ${e}` : ""}.`;
+			return [E.title, E.description || n].filter(Boolean).join(". ");
+		}), Z = c(() => {
+			let e = N.value;
 			if (!e) return {
-				zoom: W(1),
+				zoom: B(1),
 				center: void 0
 			};
 			let t = {
-				zoom: W(1),
+				zoom: B(1),
 				center: [(e[0] + e[2]) / 2, (e[1] + e[3]) / 2]
-			};
-			if (!k.fitToPoints || !k.points.length || !N.value) return t;
-			let n = k.points.map((e) => e.longitude), r = k.points.map((e) => e.latitude), [i, a, o, s] = [
-				Math.min(...n),
-				Math.max(...n),
-				Math.min(...r),
-				Math.max(...r)
-			], c = N.value - 16, l = Y.value - 16, u = e[2] - e[0], d = e[3] - e[1], f = Math.min(c, u / d * l * T) / u, p = f / T;
-			return {
-				zoom: W(Math.min(c / (Math.max(a - i, D) * f), l / (Math.max(s - o, D) * p)) * xe),
-				center: [(i + a) / 2, (o + s) / 2]
-			};
+			}, n = [...E.points.map((e) => [
+				e.longitude,
+				e.longitude,
+				e.latitude,
+				e.latitude
+			]), ...E.areas.map(G)];
+			return !E.fitToPoints || !n.length || !k.value ? t : K([
+				Math.min(...n.map((e) => e[0])),
+				Math.max(...n.map((e) => e[1])),
+				Math.min(...n.map((e) => e[2])),
+				Math.max(...n.map((e) => e[3]))
+			]);
 		});
-		function Re(e, t) {
-			let n = H(t);
+		function et(e, t) {
+			let n = Be(t), r = V(t.id);
 			return {
 				name: t.label,
 				value: [t.longitude, t.latitude],
-				point: k.points.indexOf(t),
-				symbolSize: Oe(t),
-				itemStyle: { color: e.color(n) },
+				point: E.points.indexOf(t),
+				symbolSize: Ve(t) + (r ? De : 0),
+				itemStyle: r ? {
+					color: e.color(n),
+					borderColor: e.heading,
+					borderWidth: 2
+				} : { color: e.color(n) },
 				emphasis: { itemStyle: {
 					shadowBlur: 10,
 					shadowColor: e.alpha(n, .6)
 				} }
 			};
 		}
-		function ze(e) {
-			if (!F.value) return {};
-			let t = L ?? Le.value, n = k.animation && !e.reducedMotion, r = k.points.filter((e) => !M.value.includes(R(e))), i = e.reducedMotion ? [] : r.filter(ke), a = r.filter((e) => !i.includes(e)), o = {
+		function tt(e, t) {
+			return [...t.filter((e) => !V(e.id)), ...t.filter((e) => V(e.id))].map((t) => et(e, t));
+		}
+		function Q(e, t) {
+			return E.areas.map((n, r) => {
+				let i = H(n), a = V(n.id);
+				return {
+					name: n.label,
+					value: [n.longitude, n.latitude],
+					area: r,
+					symbolSize: We(n, t),
+					itemStyle: {
+						color: e.alpha(i, a ? .16 : .07),
+						borderColor: e.alpha(i, a ? 1 : .45),
+						borderWidth: a ? 2 : 1.5
+					},
+					emphasis: { itemStyle: {
+						color: e.alpha(i, .16),
+						borderColor: e.alpha(i, a ? 1 : .75),
+						borderWidth: 2
+					} }
+				};
+			});
+		}
+		function nt(e, t) {
+			let n = {
+				fontFamily: e.font,
+				textBorderColor: e.surface,
+				textBorderWidth: 2
+			};
+			return {
+				id: "areas",
+				type: "scatter",
 				coordinateSystem: "geo",
 				symbol: "circle",
-				cursor: Ee ? "pointer" : "default",
+				z: 1,
+				cursor: Ie ? "pointer" : "default",
+				animationDurationUpdate: 0,
+				emphasis: { scale: !1 },
+				data: Q(e, t),
+				label: {
+					show: E.areaLabels,
+					position: "bottom",
+					distance: 4,
+					align: "center",
+					formatter: (e) => {
+						let t = E.areas[e.data.area ?? -1];
+						return t ? t.description ? `{name|${U(t.label)}}\n{note|${U(t.description)}}` : `{name|${U(t.label)}}` : "";
+					},
+					rich: {
+						name: {
+							...n,
+							color: e.heading,
+							fontSize: 11,
+							fontWeight: 500,
+							lineHeight: 15
+						},
+						note: {
+							...n,
+							color: e.muted,
+							fontSize: 10,
+							lineHeight: 13
+						}
+					}
+				},
+				labelLayout: { hideOverlap: !0 }
+			};
+		}
+		function rt(e) {
+			if (!M.value) return {};
+			let t = P ?? Z.value, n = E.animation && !e.reducedMotion, r = E.points.filter((e) => !O.value.includes(F(e))), i = e.reducedMotion ? [] : r.filter(He), a = r.filter((e) => !i.includes(e)), o = {
+				coordinateSystem: "geo",
+				symbol: "circle",
+				cursor: Fe ? "pointer" : "default",
+				animationDurationUpdate: 0,
 				itemStyle: {
 					borderColor: e.surface,
 					borderWidth: 1.5
 				},
 				emphasis: { scale: 1.4 },
 				label: {
-					show: k.labels,
+					show: E.labels,
 					position: "bottom",
 					distance: 4,
 					formatter: "{b}",
@@ -311,20 +443,20 @@ var me = { class: "absolute top-2 right-2 flex flex-col gap-1" }, he = { class:
 			return {
 				animation: n,
 				geo: {
-					map: F.value,
-					roam: k.zoom,
+					map: M.value,
+					roam: E.zoom,
 					silent: !0,
 					zoom: t.zoom,
 					center: t.center,
 					scaleLimit: {
-						min: k.zoomExtent[0],
-						max: k.zoomExtent[1]
+						min: E.zoomExtent[0],
+						max: E.zoomExtent[1]
 					},
-					aspectScale: T,
-					left: E,
-					right: E,
-					top: E,
-					bottom: E,
+					aspectScale: w,
+					left: T,
+					right: T,
+					top: T,
+					bottom: T,
 					preserveAspect: "contain",
 					label: { show: !1 },
 					itemStyle: {
@@ -335,64 +467,92 @@ var me = { class: "absolute top-2 right-2 flex flex-col gap-1" }, he = { class:
 					emphasis: { disabled: !0 },
 					select: { disabled: !0 }
 				},
-				series: [{
-					...o,
-					id: "still",
-					type: "scatter",
-					data: a.map((t) => Re(e, t))
-				}, {
-					...o,
-					id: "pulsing",
-					type: "effectScatter",
-					data: i.map((t) => Re(e, t)),
-					showEffectOn: "render",
-					rippleEffect: {
-						brushType: "stroke",
-						scale: 3,
-						period: 2.5
+				series: [
+					nt(e, t.zoom),
+					{
+						...o,
+						id: "still",
+						type: "scatter",
+						data: tt(e, a)
+					},
+					{
+						...o,
+						id: "pulsing",
+						type: "effectScatter",
+						data: tt(e, i),
+						showEffectOn: "render",
+						rippleEffect: {
+							brushType: "stroke",
+							scale: 3,
+							period: 2.5
+						}
 					}
-				}]
+				]
 			};
 		}
-		function Be(e, t, n) {
-			let r = e ? k.points[e.point] : void 0;
-			if (!r || !k.tooltip) return;
-			let i = R(r), a = typeof r.value == "number" ? r.value : null;
-			P.value = {
+		function it(e, t, n) {
+			if (!E.tooltip || !e) return;
+			if (e.area !== void 0) return at(e.area, t, n);
+			let r = E.points[e.point ?? -1];
+			if (!r) return;
+			let i = F(r), a = typeof r.value == "number" ? r.value : null;
+			j.value = "point", A.value = {
 				clientX: t,
 				clientY: n,
 				title: r.label,
 				items: [{
 					key: i,
-					name: B(i),
-					color: H(r),
+					name: L(i),
+					color: Be(r),
 					value: a,
-					formatted: a === null ? "" : U(a)
+					formatted: a === null ? "" : R(a)
 				}],
 				datum: r,
 				index: e.point
 			};
 		}
-		let { chart: Ve } = a({
-			host: j,
-			renderer: () => k.renderer,
-			prepare: q,
-			option: ze,
+		function at(e, t, n) {
+			let r = E.areas[e];
+			r && (j.value = "area", A.value = {
+				clientX: t,
+				clientY: n,
+				title: r.label,
+				items: [{
+					key: r.id,
+					name: r.label,
+					color: H(r),
+					value: null,
+					formatted: ""
+				}],
+				datum: r,
+				index: e
+			});
+		}
+		let { chart: ot, theme: $ } = a({
+			host: Le,
+			renderer: () => E.renderer,
+			prepare: Ye,
+			option: rt,
 			setup: (e) => {
-				r(e, (e) => Be(e.data, e.clientX, e.clientY), () => P.value = null), e.on("click", (e) => {
-					let t = k.points[e.data?.point ?? -1];
-					t && Se("point-click", t);
+				r(e, (e) => it(e.data, e.clientX, e.clientY), () => A.value = null), e.on("click", (e) => {
+					let t = e.data, n = E.areas[t?.area ?? -1];
+					if (n) return Ae("area-click", n);
+					let r = E.points[t?.point ?? -1];
+					r && Ae("point-click", r);
 				}), e.on("georoam", () => {
 					let t = e.getOption().geo?.[0];
-					t?.zoom !== void 0 && t.center && (L = {
+					t?.zoom !== void 0 && t.center && (P = {
 						zoom: t.zoom,
 						center: [...t.center]
-					});
+					}, E.areas.length && $.value && e.setOption({ series: [{
+						id: "areas",
+						data: Q($.value, t.zoom)
+					}] }));
 				});
 			}
 		});
-		function $(e) {
-			let t = Ve.value;
+		function st(e) {
+			let t = ot.value;
 			t && t.dispatchAction({
 				type: "geoRoam",
 				geoIndex: 0,
@@ -401,96 +561,138 @@ var me = { class: "absolute top-2 right-2 flex flex-col gap-1" }, he = { class:
 				originY: t.getHeight() / 2
 			});
 		}
-		function He() {
-			$(w);
-		}
-		function Ue() {
-			$(1 / w);
-		}
-		function We() {
-			L = null;
-			let e = Le.value;
-			Ve.value?.setOption({ geo: [{
-				zoom: e.zoom,
-				center: e.center
-			}] });
-		}
-		return x(() => k.geoJson, () => void q()), x([() => k.zoom, () => k.fitToPoints], () => L = null), (t, r) => (_(), l(n, {
-			hidden: M.value,
-			"onUpdate:hidden": r[0] ||= (e) => M.value = e,
-			width: N.value,
-			"onUpdate:width": r[1] ||= (e) => N.value = e,
+		function ct() {
+			st(C);
+		}
+		function lt() {
+			st(1 / C);
+		}
+		function ut(e) {
+			let t = ot.value;
+			if (!t) return;
+			let n = $.value ? { series: [{
+				id: "areas",
+				data: Q($.value, e.zoom)
+			}] } : {};
+			t.setOption({
+				geo: [{
+					zoom: e.zoom,
+					center: e.center
+				}],
+				...n
+			});
+		}
+		function dt(e) {
+			let t = ft(e);
+			t && (P = t, ut(t));
+		}
+		function ft(e) {
+			if (!e) return;
+			if (typeof e != "string") return {
+				zoom: B(e.zoom ?? P?.zoom ?? Z.value.zoom),
+				center: [e.longitude, e.latitude]
+			};
+			let t = E.areas.find((t) => t.id === e);
+			if (t) return K(G(t));
+			let n = E.points.find((t) => t.id === e);
+			if (n) return K([
+				n.longitude,
+				n.longitude,
+				n.latitude,
+				n.latitude
+			]);
+		}
+		function pt() {
+			P = null, ut(Z.value);
+		}
+		return b(() => E.geoJson, () => void Ye()), b([() => E.zoom, () => E.fitToPoints], () => P = null), Oe({
+			focus: dt,
+			resetView: pt,
+			zoomIn: ct,
+			zoomOut: lt
+		}), (t, r) => (g(), ee(n, {
+			hidden: O.value,
+			"onUpdate:hidden": r[0] ||= (e) => O.value = e,
+			width: k.value,
+			"onUpdate:width": r[1] ||= (e) => k.value = e,
 			testid: "ac-map-chart",
-			height: Y.value,
-			loading: h.loading,
-			empty: !h.points.length,
-			"empty-text": h.emptyText,
-			"empty-icon": b(ae),
-			legend: h.legend,
-			"legend-items": Pe.value,
-			summary: Ie.value,
-			title: h.title,
-			description: h.description,
-			table: Fe.value,
-			tip: P.value,
-			tooltip: h.tooltip
-		}, p({
-			tooltip: S(({ datum: e, items: n }) => [ne(t.$slots, "tooltip", {
+			height: q.value,
+			loading: m.loading,
+			empty: !m.points.length && !m.areas.length,
+			"empty-text": m.emptyText,
+			"empty-icon": y(oe),
+			legend: m.legend,
+			"legend-items": Ze.value,
+			summary: $e.value,
+			title: m.title,
+			description: m.description,
+			table: Qe.value,
+			tip: A.value,
+			tooltip: m.tooltip
+		}, te({
+			tooltip: x(({ datum: e, items: n }) => [j.value === "area" ? re(t.$slots, "area-tooltip", {
+				area: e,
+				color: n[0]?.color ?? ""
+			}, () => [d("p", ge, [d("span", {
+				class: "size-2 shrink-0 rounded-full",
+				style: h({ backgroundColor: n[0]?.color }),
+				"aria-hidden": "true"
+			}, null, 4), f(" " + v(e.label), 1)]), e.description ? (g(), u("p", _e, v(e.description), 1)) : l("", !0)], void 0, 0) : re(t.$slots, "tooltip", {
 				point: e,
 				statusLabel: n[0]?.name ?? "",
 				color: n[0]?.color ?? "",
 				formattedValue: n[0]?.formatted ?? ""
 			}, () => [
-				f("p", he, y(e.label), 1),
-				e.description ? (_(), d("p", ge, y(e.description), 1)) : u("", !0),
-				e.status && n[0] ? (_(), d("p", {
+				d("p", ve, v(e.label), 1),
+				e.description ? (g(), u("p", ye, v(e.description), 1)) : l("", !0),
+				e.status && n[0] ? (g(), u("p", {
 					key: 1,
 					class: "mt-2 inline-flex h-5 items-center gap-1.5 rounded-full px-2 font-medium text-heading",
-					style: g({ backgroundColor: `color-mix(in srgb, ${n[0].color} 14%, transparent)` })
-				}, [f("span", {
+					style: h({ backgroundColor: `color-mix(in srgb, ${n[0].color} 14%, transparent)` })
+				}, [d("span", {
 					class: "size-1.5 shrink-0 rounded-full",
-					style: g({ backgroundColor: n[0].color }),
+					style: h({ backgroundColor: n[0].color }),
 					"aria-hidden": "true"
-				}, null, 4), ee(" " + y(n[0].name), 1)], 4)) : u("", !0),
-				n[0]?.formatted ? (_(), d("p", _e, [f("span", ve, y(h.valueLabel), 1), f("span", ye, y(n[0].formatted), 1)])) : u("", !0)
-			])]),
-			default: S(() => [f("div", {
+				}, null, 4), f(" " + v(n[0].name), 1)], 4)) : l("", !0),
+				n[0]?.formatted ? (g(), u("p", be, [d("span", xe, v(m.valueLabel), 1), d("span", Se, v(n[0].formatted), 1)])) : l("", !0)
+			], void 0, 1)]),
+			default: x(() => [d("div", {
 				ref_key: "host",
-				ref: j,
+				ref: Le,
 				class: "size-full"
 			}, null, 512)]),
 			_: 2
-		}, [h.zoom ? {
+		}, [m.zoom ? {
 			name: "controls",
-			fn: S(() => [f("div", me, [
-				m(e, {
+			fn: x(() => [d("div", he, [
+				p(e, {
 					color: "white",
 					size: "xs",
 					"icon-only": "",
 					title: "Zoom in",
-					onClick: He
+					onClick: ct
 				}, {
-					icon: S(() => [m(b(se), { "aria-hidden": "true" })]),
+					icon: x(() => [p(y(ce), { "aria-hidden": "true" })]),
 					_: 1
 				}),
-				m(e, {
+				p(e, {
 					color: "white",
 					size: "xs",
 					"icon-only": "",
 					title: "Zoom out",
-					onClick: Ue
+					onClick: lt
 				}, {
-					icon: S(() => [m(b(oe), { "aria-hidden": "true" })]),
+					icon: x(() => [p(y(se), { "aria-hidden": "true" })]),
 					_: 1
 				}),
-				m(e, {
+				p(e, {
 					color: "white",
 					size: "xs",
 					"icon-only": "",
 					title: "Reset view",
-					onClick: We
+					onClick: pt
 				}, {
-					icon: S(() => [m(b(ce), { "aria-hidden": "true" })]),
+					icon: x(() => [p(y(le), { "aria-hidden": "true" })]),
 					_: 1
 				})
 			])]),
@@ -515,4 +717,4 @@ var me = { class: "absolute top-2 right-2 flex flex-col gap-1" }, he = { class:
 	}
 });
 //#endregion
-export { O as default };
+export { Oe as default };