@cfasim-ui/charts 0.4.2 → 0.4.3

package/dist/index.js

@@ -3,9 +3,10 @@ import { DropdownMenuContent as T, DropdownMenuItem as E, DropdownMenuPortal as
 import { geoAlbersUsa as P, geoPath as ie } from "d3-geo";
 import { zoom as F, zoomIdentity as I } from "d3-zoom";
 import { select as ae } from "d3-selection";
+import "d3-transition";
 import { feature as L, merge as oe, mesh as R } from "topojson-client";
 //#region src/ChartMenu/ChartMenu.vue?vue&type=script&setup=true&lang.ts
-var se = { class: "chart-menu-trigger-area" }, z = ["aria-label"], B = /* @__PURE__ */ l({
+var z = { class: "chart-menu-trigger-area" }, B = ["aria-label"], V = /* @__PURE__ */ l({
 	__name: "ChartMenu",
 	props: {
 		items: {},
@@ -16,7 +17,7 @@ var se = { class: "chart-menu-trigger-area" }, z = ["aria-label"], B = /* @__PUR
 	},
 	setup(t) {
 		let n = t, i = () => n.forceDropdown || n.items.length > 1;
-		return (n, l) => (g(), a("div", se, [i() ? (g(), r(x(O), {
+		return (n, l) => (g(), a("div", z, [i() ? (g(), r(x(O), {
 			key: 1,
 			modal: !1
 		}, {
@@ -82,42 +83,42 @@ var se = { class: "chart-menu-trigger-area" }, z = ["aria-label"], B = /* @__PUR
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round",
 			"aria-hidden": "true"
-		}, [o("path", { d: "M7 1v8M3 6l4 4 4-4M2 13h10" })], -1)]], 8, z))]));
+		}, [o("path", { d: "M7 1v8M3 6l4 4 4-4M2 13h10" })], -1)]], 8, B))]));
 	}
-}), V = (e, t) => {
+}), H = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, ce = /* @__PURE__ */ V(B, [["__scopeId", "data-v-b3c563e8"]]);
+}, se = /* @__PURE__ */ H(V, [["__scopeId", "data-v-b3c563e8"]]);
 //#endregion
 //#region src/_shared/axes.ts
-function H(e) {
+function U(e) {
 	return Math.round(e) + .5;
 }
-function U(e, t) {
+function W(e, t) {
 	let n = e / t, r = 10 ** Math.floor(Math.log10(n)), i = n / r, a;
 	return a = i <= 1.5 ? 1 : i <= 3 ? 2 : i <= 7 ? 5 : 10, a * r;
 }
-function W(e, t, n) {
+function G(e, t, n) {
 	if (!(n > 0) || !isFinite(n)) return [];
 	let r = [], i = Math.ceil(e / n) * n;
 	for (let e = 0, a = i; a <= t + 1e-9 && e < 1e3; e++, a = i + e * n) r.push(a);
 	return r;
 }
-var le = new Intl.NumberFormat();
-function G(e) {
-	return Math.abs(e) >= 1e3 ? le.format(e) : Number.isInteger(e) ? e.toString() : e.toFixed(1);
+var ce = new Intl.NumberFormat();
+function K(e) {
+	return Math.abs(e) >= 1e3 ? ce.format(e) : Number.isInteger(e) ? e.toString() : e.toFixed(1);
 }
 //#endregion
 //#region src/_shared/computeTicks.ts
-function K(e) {
+function le(e) {
 	let { min: t, max: n, ticks: r } = e;
 	if (t === n) return [];
 	let i = e.displayOffset ?? 0;
 	if (Array.isArray(r)) return r.map((e) => e - i).filter((e) => e >= t && e <= n);
-	if (typeof r == "number") return W(t + i, n + i, r).map((e) => e - i);
-	let a = Math.max(3, Math.floor(e.targetTickCount ?? 3)), o = U(n - t, a);
-	return W(t + i, n + i, o).map((e) => e - i);
+	if (typeof r == "number") return G(t + i, n + i, r).map((e) => e - i);
+	let a = Math.max(3, Math.floor(e.targetTickCount ?? 3)), o = W(n - t, a);
+	return G(t + i, n + i, o).map((e) => e - i);
 }
 //#endregion
 //#region src/_shared/useChartSize.ts
@@ -337,14 +338,14 @@ function Q(e) {
 }
 //#endregion
 //#region src/LineChart/LineChart.vue?vue&type=script&setup=true&lang.ts
-var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
+var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, xe = [
 	"x1",
 	"y1",
 	"x2",
 	"y2",
 	"stroke",
 	"stroke-dasharray"
-], xe = [
+], $ = [
 	"cx",
 	"cy",
 	"fill",
@@ -453,7 +454,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 ], Ge = ["x", "y"], Ke = { class: "line-chart-tooltip" }, qe = {
 	key: 0,
 	class: "line-chart-tooltip-label"
-}, Je = ["href", "download"], Ye = 36, Xe = 12, Ze = 7, Qe = 16, $e = /* @__PURE__ */ V(/* @__PURE__ */ l({
+}, Je = ["href", "download"], Ye = 36, Xe = 12, Ze = 7, Qe = 16, $e = /* @__PURE__ */ H(/* @__PURE__ */ l({
 	__name: "LineChart",
 	props: {
 		y: {},
@@ -507,7 +508,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 			};
 		}
 		function D(e) {
-			return l.tooltipValueFormat ? l.tooltipValueFormat(e) : l.yTickFormat ? l.yTickFormat(e) : G(e);
+			return l.tooltipValueFormat ? l.tooltipValueFormat(e) : l.yTickFormat ? l.yTickFormat(e) : K(e);
 		}
 		let O = n(() => {
 			if (l.series && l.series.length > 0) return l.series.map(E);
@@ -615,7 +616,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 			let n = t === "start" ? e.startIndex : e.endIndex, r = e.seriesIndex != null && O.value[e.seriesIndex] || O.value[0];
 			return F(r ? M(r, n) : n);
 		}
-		function se(e, t = !0) {
+		function z(e, t = !0) {
 			let n = S.value.top + w.value;
 			if (e.seriesIndex == null) {
 				let t = R(e, "start"), r = R(e, "end");
@@ -629,7 +630,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 			for (let e = c + 1; e <= l; e++) isFinite(r.data[e]) && (u += `L${F(M(r, e))},${s(r.data[e])}`);
 			return t && (u += `L${F(M(r, l))},${n}`, u += `L${F(M(r, c))},${n}`, u += "Z"), u;
 		}
-		let z = n(() => {
+		let B = n(() => {
 			let e = l.areaSections;
 			if (!e?.length) return {
 				labels: [],
@@ -665,7 +666,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				labels: t,
 				extraHeight: (Math.max(...t.map((e) => e.row)) + 1) * Ye + Xe
 			};
-		}), B = n(() => {
+		}), V = n(() => {
 			let e = [];
 			for (let t of O.value) t.legend && e.push({
 				label: t.legend,
@@ -685,12 +686,12 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				});
 			}
 			return e;
-		}), V = n(() => b.value + z.value.extraHeight), U = n(() => S.value.top + w.value + S.value.bottom + Xe), W = n(() => {
-			let { min: e, max: t } = I.value, n = (t) => H(S.value.top + w.value - (t - e) / I.value.range * w.value), r = (e) => l.yTickFormat ? l.yTickFormat(e) : G(e);
+		}), H = n(() => b.value + B.value.extraHeight), W = n(() => S.value.top + w.value + S.value.bottom + Xe), G = n(() => {
+			let { min: e, max: t } = I.value, n = (t) => U(S.value.top + w.value - (t - e) / I.value.range * w.value), r = (e) => l.yTickFormat ? l.yTickFormat(e) : K(e);
 			return e === t ? [{
 				value: r(e),
-				y: H(S.value.top + w.value / 2)
-			}] : K({
+				y: U(S.value.top + w.value / 2)
+			}] : le({
 				min: e,
 				max: t,
 				ticks: l.yTicks,
@@ -699,18 +700,18 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				value: r(e),
 				y: n(e)
 			}));
-		}), le = n(() => {
+		}), ce = n(() => {
 			let { min: e, max: t } = ie.value;
 			if (e === t) return [];
 			let n = P.value, r = A.value, i = (e, t) => {
 				let r = e + n;
-				return l.xTickFormat ? l.xTickFormat(r, t) : !j.value && l.xLabels && Number.isInteger(e) && e >= 0 && e < l.xLabels.length ? l.xLabels[e] : G(r);
+				return l.xTickFormat ? l.xTickFormat(r, t) : !j.value && l.xLabels && Number.isInteger(e) && e >= 0 && e < l.xLabels.length ? l.xLabels[e] : K(r);
 			}, a;
 			if (l.xTicks == null && !j.value && l.xLabels && l.xLabels.length === r) {
 				let e = Math.max(3, Math.floor(C.value / 80)), t = Math.max(1, Math.round((r - 1) / e));
 				a = [];
 				for (let e = 0; e < r; e += t) a.push(e);
-			} else a = K({
+			} else a = le({
 				min: e,
 				max: t,
 				ticks: l.xTicks,
@@ -719,7 +720,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 			});
 			let o = S.value.left, s = S.value.left + C.value;
 			return a.map((e, t) => {
-				let n = H(F(e)), r = "middle";
+				let n = U(F(e)), r = "middle";
 				return n - o <= 1 ? r = "start" : s - n <= 1 && (r = "end"), {
 					value: i(e, t),
 					x: n,
@@ -765,7 +766,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 			let e = Q.value, t = Y.value;
 			if (e === null || t === null) return null;
 			let n = t + P.value, r;
-			return r = l.xTickFormat ? l.xTickFormat(n, e) : j.value ? G(n) : l.xLabels?.[e], {
+			return r = l.xTickFormat ? l.xTickFormat(n, e) : j.value ? K(n) : l.xLabels?.[e], {
 				index: e,
 				xLabel: r,
 				values: O.value.map((e, n) => {
@@ -805,7 +806,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 			ref: h,
 			class: "line-chart-wrapper"
 		}, [
-			t.menu ? (g(), r(ce, {
+			t.menu ? (g(), r(se, {
 				key: 0,
 				items: x(rt)
 			}, null, 8, ["items"])) : i("", !0),
@@ -813,7 +814,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				ref_key: "svgRef",
 				ref: nt,
 				width: _.value,
-				height: V.value
+				height: H.value
 			}, [
 				t.title ? (g(), a("text", {
 					key: 0,
@@ -824,7 +825,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					"font-weight": "600",
 					fill: "currentColor"
 				}, y(t.title), 9, ye)) : i("", !0),
-				B.value.length > 0 ? (g(), a("g", be, [(g(!0), a(e, null, v(B.value, (t, n) => (g(), a(e, { key: "ileg" + n }, [t.type === "series" ? (g(), a("line", {
+				V.value.length > 0 ? (g(), a("g", be, [(g(!0), a(e, null, v(V.value, (t, n) => (g(), a(e, { key: "ileg" + n }, [t.type === "series" ? (g(), a("line", {
 					key: 0,
 					x1: x(S).left + n * 120,
 					y1: x(S).top - x(20) / 2,
@@ -833,7 +834,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					stroke: t.color,
 					"stroke-width": "2",
 					"stroke-dasharray": t.dashed ? "4 2" : void 0
-				}, null, 8, $)) : (g(), a("circle", {
+				}, null, 8, xe)) : (g(), a("circle", {
 					key: 1,
 					cx: x(S).left + n * 120 + 4,
 					cy: x(S).top - x(20) / 2,
@@ -842,29 +843,29 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					"fill-opacity": t.fillOpacity,
 					stroke: t.color,
 					"stroke-width": "1.5"
-				}, null, 8, xe)), o("text", {
+				}, null, 8, $)), o("text", {
 					x: x(S).left + n * 120 + 18,
 					y: x(S).top - x(20) / 2 + 4,
 					"font-size": "11",
 					fill: "currentColor"
 				}, y(t.label), 9, Se)], 64))), 128))])) : i("", !0),
 				o("line", {
-					x1: x(H)(x(S).left),
-					y1: x(H)(x(S).top),
-					x2: x(H)(x(S).left),
-					y2: x(H)(x(S).top + x(w)),
+					x1: x(U)(x(S).left),
+					y1: x(U)(x(S).top),
+					x2: x(U)(x(S).left),
+					y2: x(U)(x(S).top + x(w)),
 					stroke: "currentColor",
 					"stroke-opacity": "0.3"
 				}, null, 8, Ce),
 				o("line", {
-					x1: x(H)(x(S).left),
-					y1: x(H)(x(S).top + x(w)),
-					x2: x(H)(x(S).left + x(C)),
-					y2: x(H)(x(S).top + x(w)),
+					x1: x(U)(x(S).left),
+					y1: x(U)(x(S).top + x(w)),
+					x2: x(U)(x(S).left + x(C)),
+					y2: x(U)(x(S).top + x(w)),
 					stroke: "currentColor",
 					"stroke-opacity": "0.3"
 				}, null, 8, we),
-				t.yGrid ? (g(!0), a(e, { key: 2 }, v(W.value, (e, t) => (g(), a("line", {
+				t.yGrid ? (g(!0), a(e, { key: 2 }, v(G.value, (e, t) => (g(), a("line", {
 					key: "yg" + t,
 					x1: x(S).left,
 					y1: e.y,
@@ -873,7 +874,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					stroke: "currentColor",
 					"stroke-opacity": "0.1"
 				}, null, 8, Te))), 128)) : i("", !0),
-				t.xGrid ? (g(!0), a(e, { key: 3 }, v(le.value, (e, t) => (g(), a("line", {
+				t.xGrid ? (g(!0), a(e, { key: 3 }, v(ce.value, (e, t) => (g(), a("line", {
 					key: "xg" + t,
 					x1: e.x,
 					y1: x(S).top,
@@ -882,7 +883,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					stroke: "currentColor",
 					"stroke-opacity": "0.1"
 				}, null, 8, Ee))), 128)) : i("", !0),
-				(g(!0), a(e, null, v(W.value, (e, t) => (g(), a("text", {
+				(g(!0), a(e, null, v(G.value, (e, t) => (g(), a("text", {
 					key: "y" + t,
 					"data-testid": "y-tick",
 					x: x(S).left - 6,
@@ -902,7 +903,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					"font-size": "13",
 					fill: "currentColor"
 				}, y(t.yLabel), 9, Oe)) : i("", !0),
-				(g(!0), a(e, null, v(le.value, (e, t) => (g(), a("text", {
+				(g(!0), a(e, null, v(ce.value, (e, t) => (g(), a("text", {
 					key: "x" + t,
 					"data-testid": "x-tick",
 					x: e.x,
@@ -946,48 +947,48 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				}, null, 8, Ne))), 128)) : i("", !0)], 64))), 128)),
 				(g(!0), a(e, null, v(t.areaSections ?? [], (t, n) => (g(), a(e, { key: "areasec" + n }, [
 					o("path", {
-						d: se(t),
+						d: z(t),
 						fill: t.color ?? (t.seriesIndex == null ? "#999" : O.value[t.seriesIndex]?.color ?? "currentColor"),
 						"fill-opacity": t.opacity ?? .15,
 						stroke: "none"
 					}, null, 8, Pe),
 					t.seriesIndex == null ? i("", !0) : (g(), a("path", {
 						key: 0,
-						d: se(t, !1),
+						d: z(t, !1),
 						fill: "none",
 						stroke: t.color ?? O.value[t.seriesIndex]?.color ?? "currentColor",
 						"stroke-width": t.strokeWidth ?? 2,
 						"stroke-dasharray": t.dashed ? "6 3" : void 0
 					}, null, 8, Fe)),
 					t.seriesIndex == null ? (g(), a(e, { key: 1 }, [o("line", {
-						x1: x(H)(R(t, "start")),
+						x1: x(U)(R(t, "start")),
 						y1: x(S).top,
-						x2: x(H)(R(t, "start")),
+						x2: x(U)(R(t, "start")),
 						y2: x(S).top + x(w),
 						stroke: t.color ?? "#999",
 						"stroke-width": t.strokeWidth ?? 2,
 						"stroke-dasharray": t.dashed ? "6 3" : void 0
 					}, null, 8, Ie), o("line", {
-						x1: x(H)(R(t, "end")),
+						x1: x(U)(R(t, "end")),
 						y1: x(S).top,
-						x2: x(H)(R(t, "end")),
+						x2: x(U)(R(t, "end")),
 						y2: x(S).top + x(w),
 						stroke: t.color ?? "#999",
 						"stroke-width": t.strokeWidth ?? 2,
 						"stroke-dasharray": t.dashed ? "6 3" : void 0
 					}, null, 8, Le)], 64)) : i("", !0),
 					o("line", {
-						x1: x(H)(R(t, "start")),
+						x1: x(U)(R(t, "start")),
 						y1: x(S).top + x(w) - 4,
-						x2: x(H)(R(t, "start")),
+						x2: x(U)(R(t, "start")),
 						y2: x(S).top + x(w) + 4,
 						stroke: "currentColor",
 						"stroke-opacity": "0.4"
 					}, null, 8, Re),
 					o("line", {
-						x1: x(H)(R(t, "end")),
+						x1: x(U)(R(t, "end")),
 						y1: x(S).top + x(w) - 4,
-						x2: x(H)(R(t, "end")),
+						x2: x(U)(R(t, "end")),
 						y2: x(S).top + x(w) + 4,
 						stroke: "currentColor",
 						"stroke-opacity": "0.4"
@@ -995,9 +996,9 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				], 64))), 128)),
 				J.value && x(Q) !== null ? (g(), a("line", {
 					key: 6,
-					x1: x(H)(pe.value),
+					x1: x(U)(pe.value),
 					y1: x(S).top,
-					x2: x(H)(pe.value),
+					x2: x(U)(pe.value),
 					y2: x(S).top + x(w),
 					stroke: "currentColor",
 					"stroke-opacity": "0.3",
@@ -1026,10 +1027,10 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 						"touch-action": "none"
 					}
 				}, ne(x(tt), !0)), null, 16, He)) : i("", !0),
-				(g(!0), a(e, null, v(z.value.labels, (e, t) => (g(), a("g", { key: "seclab" + t }, [
+				(g(!0), a(e, null, v(B.value.labels, (e, t) => (g(), a("g", { key: "seclab" + t }, [
 					o("circle", {
 						cx: e.cx - e.textWidth / 2 - 2,
-						cy: U.value + e.row * Ye + 4,
+						cy: W.value + e.row * Ye + 4,
 						r: "4",
 						fill: e.color,
 						"fill-opacity": e.fillOpacity,
@@ -1039,7 +1040,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					e.labelText ? (g(), a("text", {
 						key: 0,
 						x: e.cx - e.textWidth / 2 + 8,
-						y: U.value + e.row * Ye + 8,
+						y: W.value + e.row * Ye + 8,
 						"font-size": "11",
 						"font-weight": "600",
 						fill: e.color
@@ -1047,7 +1048,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					e.descText ? (g(), a("text", {
 						key: 1,
 						x: e.cx - e.textWidth / 2 + 8,
-						y: U.value + e.row * Ye + 22,
+						y: W.value + e.row * Ye + 22,
 						"font-size": "11",
 						fill: "currentColor",
 						"fill-opacity": "0.6"
@@ -1127,7 +1128,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 ], _t = { class: "bar-chart-tooltip" }, vt = {
 	key: 0,
 	class: "bar-chart-tooltip-label"
-}, yt = ["href", "download"], bt = /* @__PURE__ */ V(/* @__PURE__ */ l({
+}, yt = ["href", "download"], bt = /* @__PURE__ */ H(/* @__PURE__ */ l({
 	__name: "BarChart",
 	props: {
 		data: {},
@@ -1277,17 +1278,17 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 						let n = t[c], l = Number(n.data[i] ?? NaN);
 						if (!isFinite(l)) continue;
 						let u = l >= 0 ? o : s, d = u + l;
-						e.push(oe(L(u), L(d), r, a, n.color ?? z(c), n.opacity ?? 1, l, i, c)), l >= 0 ? o = d : s = d;
+						e.push(oe(L(u), L(d), r, a, n.color ?? B(c), n.opacity ?? 1, l, i, c)), l >= 0 ? o = d : s = d;
 					}
 				} else for (let a = 0; a < n; a++) {
 					let s = t[a], u = Number(s.data[i] ?? NaN);
 					if (!isFinite(u)) continue;
 					let d = r + (n === 1 ? 0 : a * (o + l.groupGap));
-					e.push(oe(c, L(u), d, o, s.color ?? z(a), s.opacity ?? 1, u, i, a));
+					e.push(oe(c, L(u), d, o, s.color ?? B(a), s.opacity ?? 1, u, i, a));
 				}
 			}
 			return e;
-		}), se = [
+		}), z = [
 			"var(--color-primary, #3b82f6)",
 			"var(--color-accent, #f59e0b)",
 			"var(--color-success, #10b981)",
@@ -1295,29 +1296,29 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 			"var(--color-info, #6366f1)",
 			"var(--color-warning, #d97706)"
 		];
-		function z(e) {
-			return se[e % se.length];
-		}
 		function B(e) {
-			return l.tooltipValueFormat ? l.tooltipValueFormat(e) : l.valueTickFormat ? l.valueTickFormat(e) : G(e);
+			return z[e % z.length];
 		}
-		let V = n(() => {
-			let { min: e, max: t } = j.value, n = (e) => l.valueTickFormat ? l.valueTickFormat(e) : G(e);
+		function V(e) {
+			return l.tooltipValueFormat ? l.tooltipValueFormat(e) : l.valueTickFormat ? l.valueTickFormat(e) : K(e);
+		}
+		let H = n(() => {
+			let { min: e, max: t } = j.value, n = (e) => l.valueTickFormat ? l.valueTickFormat(e) : K(e);
 			if (e === t) return [{
 				value: n(e),
-				pos: H(L(e))
+				pos: U(L(e))
 			}];
 			let r = A.value ? 50 : 80;
-			return K({
+			return le({
 				min: e,
 				max: t,
 				ticks: l.valueTicks,
 				targetTickCount: N.value / r
 			}).map((e) => ({
 				value: n(e),
-				pos: H(L(e))
+				pos: U(L(e))
 			}));
-		}), U = n(() => {
+		}), W = n(() => {
 			let e = [], t = O.value, n = (e, t) => l.categoryFormat ? l.categoryFormat(e, t) : e;
 			for (let r = 0; r < t; r++) {
 				let t = I(r) + P.value / 2;
@@ -1328,16 +1329,16 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				});
 			}
 			return e;
-		}), W = n(() => {
+		}), G = n(() => {
 			let e = [];
 			return D.value.forEach((t, n) => {
 				t.legend && e.push({
 					label: t.legend,
-					color: t.color ?? z(n)
+					color: t.color ?? B(n)
 				});
 			}), e;
 		});
-		function le() {
+		function ce() {
 			if (typeof l.csv == "function") return l.csv();
 			if (typeof l.csv == "string") return l.csv;
 			let e = D.value.map((e) => ({
@@ -1365,24 +1366,24 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 		}), { svgRef: Z, items: ge, downloadLinkText: Q, csvHref: ve, resolvedFilename: ye } = he({
 			filename: () => l.filename,
 			legacyMenuLabel: () => l.menu,
-			getCsv: le,
+			getCsv: ce,
 			downloadLink: () => l.downloadLink
 		}), be = n(() => {
 			let e = Y.value;
 			if (e !== null) return k.value[e];
-		}), $ = n(() => {
+		}), xe = n(() => {
 			let e = Y.value;
 			return e === null ? null : {
 				index: e,
 				category: k.value[e] ?? String(e),
 				values: D.value.map((t, n) => ({
 					value: Number(t.data[e] ?? NaN),
-					color: t.color ?? z(n),
+					color: t.color ?? B(n),
 					seriesIndex: n
 				})),
 				data: l.tooltipData?.[e] ?? null
 			};
-		}), xe = n(() => {
+		}), $ = n(() => {
 			let e = Y.value;
 			if (e === null) return null;
 			let t = I(e);
@@ -1403,7 +1404,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 			ref: h,
 			class: "bar-chart-wrapper"
 		}, [
-			t.menu ? (g(), r(ce, {
+			t.menu ? (g(), r(se, {
 				key: 0,
 				items: x(ge)
 			}, null, 8, ["items"])) : i("", !0),
@@ -1422,7 +1423,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					"font-weight": "600",
 					fill: "currentColor"
 				}, y(t.title), 9, tt)) : i("", !0),
-				W.value.length > 0 ? (g(), a("g", nt, [(g(!0), a(e, null, v(W.value, (t, n) => (g(), a(e, { key: "ileg" + n }, [o("rect", {
+				G.value.length > 0 ? (g(), a("g", nt, [(g(!0), a(e, null, v(G.value, (t, n) => (g(), a(e, { key: "ileg" + n }, [o("rect", {
 					x: x(S).left + n * 120,
 					y: x(S).top - x(20) / 2 - 5,
 					width: "12",
@@ -1435,22 +1436,22 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					fill: "currentColor"
 				}, y(t.label), 9, it)], 64))), 128))])) : i("", !0),
 				o("line", {
-					x1: x(H)(x(S).left),
-					y1: x(H)(x(S).top),
-					x2: x(H)(x(S).left),
-					y2: x(H)(x(S).top + x(w)),
+					x1: x(U)(x(S).left),
+					y1: x(U)(x(S).top),
+					x2: x(U)(x(S).left),
+					y2: x(U)(x(S).top + x(w)),
 					stroke: "currentColor",
 					"stroke-opacity": "0.3"
 				}, null, 8, at),
 				o("line", {
-					x1: x(H)(x(S).left),
-					y1: x(H)(x(S).top + x(w)),
-					x2: x(H)(x(S).left + x(C)),
-					y2: x(H)(x(S).top + x(w)),
+					x1: x(U)(x(S).left),
+					y1: x(U)(x(S).top + x(w)),
+					x2: x(U)(x(S).left + x(C)),
+					y2: x(U)(x(S).top + x(w)),
 					stroke: "currentColor",
 					"stroke-opacity": "0.3"
 				}, null, 8, ot),
-				t.valueGrid ? (g(!0), a(e, { key: 2 }, v(V.value, (e, t) => (g(), a("line", {
+				t.valueGrid ? (g(!0), a(e, { key: 2 }, v(H.value, (e, t) => (g(), a("line", {
 					key: "vg" + t,
 					x1: A.value ? x(S).left : e.pos,
 					y1: A.value ? e.pos : x(S).top,
@@ -1459,17 +1460,17 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					stroke: "currentColor",
 					"stroke-opacity": "0.1"
 				}, null, 8, st))), 128)) : i("", !0),
-				xe.value && q.value ? (g(), a("rect", {
+				$.value && q.value ? (g(), a("rect", {
 					key: 3,
-					x: xe.value.x,
-					y: xe.value.y,
-					width: xe.value.w,
-					height: xe.value.h,
+					x: $.value.x,
+					y: $.value.y,
+					width: $.value.w,
+					height: $.value.h,
 					fill: "currentColor",
 					"fill-opacity": "0.06",
 					"pointer-events": "none"
 				}, null, 8, ct)) : i("", !0),
-				A.value ? (g(!0), a(e, { key: 4 }, v(V.value, (e, t) => (g(), a("text", {
+				A.value ? (g(!0), a(e, { key: 4 }, v(H.value, (e, t) => (g(), a("text", {
 					key: "vt" + t,
 					"data-testid": "value-tick",
 					x: x(S).left - 6,
@@ -1479,7 +1480,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					"font-size": "10",
 					fill: "currentColor",
 					"fill-opacity": "0.6"
-				}, y(e.value), 9, lt))), 128)) : (g(!0), a(e, { key: 5 }, v(V.value, (e, t) => (g(), a("text", {
+				}, y(e.value), 9, lt))), 128)) : (g(!0), a(e, { key: 5 }, v(H.value, (e, t) => (g(), a("text", {
 					key: "vt" + t,
 					"data-testid": "value-tick",
 					x: e.pos,
@@ -1498,7 +1499,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					"font-size": "13",
 					fill: "currentColor"
 				}, y(t.yLabel), 9, dt)) : i("", !0),
-				A.value ? (g(!0), a(e, { key: 7 }, v(U.value, (e, t) => (g(), a("text", {
+				A.value ? (g(!0), a(e, { key: 7 }, v(W.value, (e, t) => (g(), a("text", {
 					key: "ct" + t,
 					"data-testid": "category-tick",
 					x: e.pos,
@@ -1507,7 +1508,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					"font-size": "10",
 					fill: "currentColor",
 					"fill-opacity": "0.6"
-				}, y(e.label), 9, ft))), 128)) : (g(!0), a(e, { key: 8 }, v(U.value, (e, t) => (g(), a("text", {
+				}, y(e.label), 9, ft))), 128)) : (g(!0), a(e, { key: 8 }, v(W.value, (e, t) => (g(), a("text", {
 					key: "ct" + t,
 					"data-testid": "category-tick",
 					x: x(S).left - 6,
@@ -1551,7 +1552,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					}
 				}, ne(x(me), !0)), null, 16, gt)) : i("", !0)
 			], 8, et)),
-			q.value && x(Y) !== null && $.value ? (g(), a("div", {
+			q.value && x(Y) !== null && xe.value ? (g(), a("div", {
 				key: 1,
 				ref_key: "tooltipRef",
 				ref: pe,
@@ -1564,13 +1565,13 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					transform: x(X) ? `translate3d(${x(X).left}px, ${x(X).top}px, 0) translateY(-50%)` : "translateY(-50%)",
 					visibility: x(X) ? "visible" : "hidden"
 				})
-			}, [te(n.$slots, "tooltip", p(u($.value)), () => [o("div", _t, [be.value ? (g(), a("div", vt, y(be.value), 1)) : i("", !0), (g(!0), a(e, null, v($.value.values, (e) => (g(), a("div", {
+			}, [te(n.$slots, "tooltip", p(u(xe.value)), () => [o("div", _t, [be.value ? (g(), a("div", vt, y(be.value), 1)) : i("", !0), (g(!0), a(e, null, v(xe.value.values, (e) => (g(), a("div", {
 				key: e.seriesIndex,
 				class: "bar-chart-tooltip-row"
 			}, [o("span", {
 				class: "bar-chart-tooltip-swatch",
 				style: m({ background: e.color })
-			}, null, 4), s(" " + y(isFinite(e.value) ? B(e.value) : "—"), 1)]))), 128))])], !0)], 4)) : i("", !0),
+			}, null, 4), s(" " + y(isFinite(e.value) ? V(e.value) : "—"), 1)]))), 128))])], !0)], 4)) : i("", !0),
 			x(Q) ? (g(), a("a", {
 				key: 2,
 				class: "bar-chart-download-link",
@@ -5730,7 +5731,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 }, kt = {
 	key: 2,
 	class: "choropleth-legend-continuous"
-}, At = { class: "choropleth-legend-ticks" }, jt = ["viewBox"], Mt = ["innerHTML"], Nt = "http://www.w3.org/2000/svg", Pt = 1e3, Ft = /* @__PURE__ */ V(/* @__PURE__ */ l({
+}, At = { class: "choropleth-legend-ticks" }, jt = ["viewBox"], Mt = ["innerHTML"], Nt = "http://www.w3.org/2000/svg", Pt = 450, Ft = 1e3, It = /* @__PURE__ */ H(/* @__PURE__ */ l({
 	__name: "ChoroplethMap",
 	props: {
 		topology: {},
@@ -5763,57 +5764,120 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 		tooltipTrigger: {},
 		tooltipFormat: {},
 		tooltipValueFormat: {},
-		tooltipClamp: { default: "chart" }
+		tooltipClamp: { default: "chart" },
+		focus: {},
+		focusZoomLevel: { default: 4 }
 	},
-	emits: ["stateClick", "stateHover"],
+	emits: [
+		"stateClick",
+		"stateHover",
+		"update:focus"
+	],
 	setup(t, { emit: c }) {
-		let l = t, d = c, ne = (e) => e, x = _(null), S = _(null), T = _(null), E = _(null), D = re(), O = n(() => !!l.tooltipTrigger || !!l.tooltipFormat || !!D.tooltip), k = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map(), j = null, M = null, N = !1, se = typeof window < "u" && "ontouchstart" in window, z = null, B = {
+		let l = t, d = c, ne = (e) => e, x = _(null), S = _(null), T = _(null), E = _(null), D = re(), O = n(() => !!l.tooltipTrigger || !!l.tooltipFormat || !!D.tooltip), k = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map(), j = null, M = null, N = /* @__PURE__ */ new Set(), z = !1, B = typeof window < "u" && "ontouchstart" in window, V = null, H = {
 			width: 0,
 			height: 0
-		}, V = null, H = !1, U = null, W = _(!1), le = 0, G = 0, K = 0;
-		function ue() {
-			if (se) return;
-			let e = T.value;
-			e && (e.addEventListener("click", We), e.addEventListener("mouseover", We), e.addEventListener("mousemove", Ge), e.addEventListener("mouseout", Ke));
-		}
+		}, U = null, W = !1, G = null, ce = _(!1), K = 0, le = 0, ue = 0;
 		function de() {
+			if (B) return;
 			let e = T.value;
-			e && (e.removeEventListener("click", We), e.removeEventListener("mouseover", We), e.removeEventListener("mousemove", Ge), e.removeEventListener("mouseout", Ke));
+			e && (e.addEventListener("click", $e), e.addEventListener("mouseover", $e), e.addEventListener("mousemove", et), e.addEventListener("mouseout", tt));
 		}
 		function q() {
-			He();
+			let e = T.value;
+			e && (e.removeEventListener("click", $e), e.removeEventListener("mouseover", $e), e.removeEventListener("mousemove", et), e.removeEventListener("mouseout", tt));
+		}
+		function J() {
+			Ze();
 		}
 		h(() => {
-			J(), ue(), Je(), Ie(), window.addEventListener("scroll", q, {
+			fe(), de(), rt(), _e(), Ue(), window.addEventListener("scroll", J, {
 				passive: !0,
 				capture: !0
-			}), window.addEventListener("resize", q, { passive: !0 });
+			}), window.addEventListener("resize", J, { passive: !0 });
 		}), ee(() => {
-			z?.disconnect(), K && cancelAnimationFrame(K), fe(), de(), window.removeEventListener("scroll", q, { capture: !0 }), window.removeEventListener("resize", q);
+			V?.disconnect(), ue && cancelAnimationFrame(ue), pe(), q(), window.removeEventListener("scroll", J, { capture: !0 }), window.removeEventListener("resize", J);
 		});
-		function J() {
-			if (!S.value || !T.value || !l.zoom && !l.pan) return;
-			let e = ae(S.value);
-			U = F().scaleExtent(l.zoom ? [1, 12] : [1, 1]).on("start", () => {
-				N = !0, He();
+		function fe() {
+			if (!S.value || !T.value) return;
+			let e = ae(S.value), t = Math.max(12, l.focusZoomLevel);
+			G = F().scaleExtent([1, t]).on("start", () => {
+				z = !0, Ze();
 			}).on("zoom", (e) => {
 				T.value && T.value.setAttribute("transform", e.transform);
 				let t = e.transform;
-				W.value = t.k !== 1 || t.x !== 0 || t.y !== 0;
+				ce.value = t.k !== 1 || t.x !== 0 || t.y !== 0;
 			}).on("end", () => {
-				N = !1;
-			}), l.pan || U.filter((e) => e.type === "wheel" || e.type === "dblclick"), e.call(U);
-		}
-		function fe() {
-			S.value && U && (ae(S.value).on(".zoom", null), U = null);
+				z = !1;
+			}), G.filter((e) => {
+				let t = Oe.value.length > 0, n = !!l.zoom || t, r = !!l.pan || t;
+				if (e.type === "wheel" || e.type === "dblclick") {
+					if (!n) return !1;
+				} else if (e.type === "mousedown" || e.type === "touchstart") {
+					if (!r) return !1;
+				} else if (!n && !r) return !1;
+				return (!e.ctrlKey || e.type === "wheel") && !e.button;
+			}), e.call(G);
 		}
 		function pe() {
-			!S.value || !U || U.transform(ae(S.value), I);
+			S.value && G && (ae(S.value).on(".zoom", null), G = null);
 		}
-		C(() => [l.zoom, l.pan], () => {
-			fe(), de(), J(), ue();
+		function Z(e) {
+			let t = De.value, n = Ee.value, r = /* @__PURE__ */ new Set();
+			for (let i of e) {
+				let e = t.has(i) ? i : n.get(i);
+				e != null && r.add(e);
+			}
+			return r;
+		}
+		function he(e) {
+			let t = De.value, n = [];
+			for (let r of Z(e)) {
+				let e = t.get(r);
+				e && n.push(e);
+			}
+			return n;
+		}
+		let ge = !1;
+		function _e() {
+			if (!S.value || !G) return;
+			let e = Oe.value, t = e.length > 0 ? he(e) : [], n = /* @__PURE__ */ new Set();
+			for (let e of t) {
+				let t = k.get(String(e.id));
+				t && n.add(t);
+			}
+			for (let e of N) n.has(e) || e === M || Ye(e);
+			for (let e of n) !N.has(e) && e !== M && Je(e);
+			N.clear();
+			for (let e of n) N.add(e);
+			let r = ae(S.value);
+			r.interrupt();
+			let i = ge && t.length > 0;
+			if (ge = !0, t.length === 0) {
+				G.transform(r, I), Ze();
+				return;
+			}
+			let [[a, o], [s, c]] = we.value.bounds({
+				type: "FeatureCollection",
+				features: t
+			}), u = (a + s) / 2, d = (o + c) / 2, f = l.focusZoomLevel, p = I.translate(ye.value / 2 - f * u, be.value / 2 - f * d).scale(f), m = () => {
+				if (!O.value) return;
+				let e = String(t[0].id), n = k.get(e);
+				if (!n) return;
+				let r = n.getBoundingClientRect();
+				Ge(e, r.left + r.width / 2, r.top + r.height / 2);
+			};
+			i ? (qe(), r.transition().duration(Pt).call(G.transform, p).on("end", m)) : (G.transform(r, p), m());
+		}
+		function Q() {
+			if (!S.value || !G) return;
+			let e = ae(S.value);
+			e.interrupt(), G.transform(e, I), Oe.value.length > 0 && d("update:focus", null);
+		}
+		C(() => l.focusZoomLevel, () => {
+			G && G.scaleExtent([1, Math.max(12, l.focusZoomLevel)]), _e();
 		});
-		let Z = n(() => l.width && l.height ? l.height / l.width : .625), he = n(() => Pt), ge = n(() => Pt * Z.value), _e = n(() => {
+		let ve = n(() => l.width && l.height ? l.height / l.width : .625), ye = n(() => Ft), be = n(() => Ft * ve.value), xe = n(() => {
 			let e = b(l.topology), t = e.objects.counties.geometries, n = /* @__PURE__ */ new Map();
 			for (let e of t) {
 				let t = xt[String(e.id).padStart(5, "0")];
@@ -5830,33 +5894,40 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				type: "FeatureCollection",
 				features: r
 			};
-		}), Q = n(() => {
-			if (l.geoType === "hsas") return _e.value;
+		}), $ = n(() => {
+			if (l.geoType === "hsas") return xe.value;
 			if (l.geoType === "counties") {
 				let e = b(l.topology);
 				return L(e, e.objects.counties);
 			}
 			let e = b(l.topology);
 			return L(e, e.objects.states);
-		}), ve = n(() => {
+		}), Se = n(() => {
 			if (l.geoType !== "counties" && l.geoType !== "hsas") return null;
 			let e = b(l.topology);
 			return R(e, e.objects.states, (e, t) => e !== t);
-		}), ye = n(() => P().fitExtent([[0, 0], [he.value, ge.value]], Q.value)), be = n(() => ie(ye.value)), $ = n(() => l.geoType === "counties" || l.geoType === "hsas" ? l.strokeWidth * .5 : l.strokeWidth), xe = n(() => {
+		}), Ce = n(() => P().fitExtent([[0, 0], [ye.value, be.value]], $.value)), we = n(() => ie(Ce.value)), Te = n(() => l.geoType === "counties" || l.geoType === "hsas" ? l.strokeWidth * .5 : l.strokeWidth), Ee = n(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of Q.value.features) t.properties?.name != null && t.id != null && e.set(t.properties.name, String(t.id));
+			for (let t of $.value.features) t.properties?.name != null && t.id != null && e.set(t.properties.name, String(t.id));
 			return e;
-		}), Se = n(() => {
+		}), De = n(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let t of $.value.features) t.id != null && e.set(String(t.id), t);
+			return e;
+		}), Oe = n(() => {
+			let e = l.focus;
+			return e == null ? [] : Array.isArray(e) ? e : [e];
+		}), ke = n(() => {
 			let e = /* @__PURE__ */ new Map();
 			if (!l.data) return e;
-			let t = xe.value;
+			let t = Ee.value;
 			for (let n of l.data) {
 				e.set(n.id, n.value);
 				let r = t.get(n.id);
 				r && e.set(r, n.value);
 			}
 			return e;
-		}), Ce = n(() => {
+		}), Ae = n(() => {
 			if (!l.data || l.data.length === 0) return {
 				min: 0,
 				max: 1
@@ -5873,8 +5944,8 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				min: 0,
 				max: 1
 			};
-		}), we = n(() => Array.isArray(l.colorScale) && l.colorScale.length > 0 && "value" in l.colorScale[0]), Te = n(() => Array.isArray(l.colorScale) && !we.value), Ee = n(() => Te.value ? "" : l.colorScale?.min ?? "#e5f0fa"), De = n(() => Te.value ? "" : l.colorScale?.max ?? "#08519c");
-		function Oe(e) {
+		}), je = n(() => Array.isArray(l.colorScale) && l.colorScale.length > 0 && "value" in l.colorScale[0]), Me = n(() => Array.isArray(l.colorScale) && !je.value), Ne = n(() => Me.value ? "" : l.colorScale?.min ?? "#e5f0fa"), Pe = n(() => Me.value ? "" : l.colorScale?.max ?? "#08519c");
+		function Fe(e) {
 			let t = e.replace("#", "");
 			return [
 				parseInt(t.slice(0, 2), 16),
@@ -5882,92 +5953,98 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				parseInt(t.slice(4, 6), 16)
 			];
 		}
-		function ke(e) {
-			let [t, n, r] = Oe(Ee.value), [i, a, o] = Oe(De.value);
+		function Ie(e) {
+			let [t, n, r] = Fe(Ne.value), [i, a, o] = Fe(Pe.value);
 			return `rgb(${Math.round(t + (i - t) * e)},${Math.round(n + (a - n) * e)},${Math.round(r + (o - r) * e)})`;
 		}
-		let Ae = n(() => Te.value ? l.colorScale.slice().sort((e, t) => t.min - e.min) : null), je = n(() => {
-			if (!we.value) return null;
+		let Le = n(() => Me.value ? l.colorScale.slice().sort((e, t) => t.min - e.min) : null), Re = n(() => {
+			if (!je.value) return null;
 			let e = /* @__PURE__ */ new Map();
 			for (let t of l.colorScale) e.set(t.value, t.color);
 			return e;
 		});
-		function Me(e) {
-			let t = Se.value.get(e), n = l.noDataColor;
+		function ze(e) {
+			let t = ke.value.get(e), n = l.noDataColor;
 			if (t == null) return n;
-			let r = je.value;
+			let r = Re.value;
 			if (r) return r.get(String(t)) ?? n;
-			let i = Ae.value;
+			let i = Le.value;
 			if (i) {
 				let e = t;
 				for (let t of i) if (e >= t.min) return t.color;
 				return n;
 			}
-			let { min: a, max: o } = Ce.value;
-			return ke((t - a) / (o - a));
+			let { min: a, max: o } = Ae.value;
+			return Ie((t - a) / (o - a));
 		}
-		let Ne = (e) => e.properties?.name ?? String(e.id);
-		function Pe(e) {
+		let Be = (e) => e.properties?.name ?? String(e.id);
+		function Ve(e) {
 			return e == null ? "" : typeof e == "number" && l.tooltipValueFormat ? l.tooltipValueFormat(e) : String(e);
 		}
-		function Fe(e, t) {
-			return t == null ? e : `${e}: ${Pe(t)}`;
+		function He(e, t) {
+			return t == null ? e : `${e}: ${Ve(t)}`;
 		}
-		function Ie() {
+		function Ue() {
 			let e = E.value?.getEl();
 			if (!e) return;
-			z?.disconnect();
+			V?.disconnect();
 			let t = !1;
-			z = new ResizeObserver((e) => {
+			V = new ResizeObserver((e) => {
 				let n = e[0]?.contentRect;
-				n && (B.width = n.width, B.height = n.height, !t && H && V ? (t = !0, Le(V.x, V.y)) : t = !0);
-			}), z.observe(e);
+				n && (H.width = n.width, H.height = n.height, !t && W && U ? (t = !0, We(U.x, U.y)) : t = !0);
+			}), V.observe(e);
 		}
-		function Le(e, t) {
+		function We(e, t) {
 			let n = E.value?.getEl();
 			if (!n) return;
-			let r = x.value?.getBoundingClientRect(), { left: i, top: a } = Y(e, t, B.width, B.height, l.tooltipClamp, r);
+			let r = x.value?.getBoundingClientRect(), { left: i, top: a } = Y(e, t, H.width, H.height, l.tooltipClamp, r);
 			n.style.transform = `translate3d(${i}px, ${a}px, 0) translateY(-50%)`;
 		}
-		function Re(e, t, n) {
+		function Ge(e, t, n) {
 			let r = A.get(e);
 			if (!r) return;
 			let i = E.value, a = i?.getEl();
-			!i || !a || (i.setData(r), V = {
+			!i || !a || (i.setData(r), U = {
 				x: t,
 				y: n
-			}, H = !0, Le(t, n), a.style.visibility = "visible");
+			}, W = !0, We(t, n), a.style.visibility = "visible");
 		}
-		function ze(e, t) {
-			H && (le = e, G = t, !K && (K = requestAnimationFrame(() => {
-				K = 0;
+		function Ke(e, t) {
+			W && (K = e, le = t, !ue && (ue = requestAnimationFrame(() => {
+				ue = 0;
 				let e = E.value?.getEl();
-				!e || !H || (V = {
-					x: le,
-					y: G
-				}, e.style.transform = `translate3d(${le + 16}px, ${G}px, 0) translateY(-50%)`);
+				!e || !W || (U = {
+					x: K,
+					y: le
+				}, e.style.transform = `translate3d(${K + 16}px, ${le}px, 0) translateY(-50%)`);
 			})));
 		}
-		function Be() {
-			if (!H) return;
-			H = !1, V = null;
+		function qe() {
+			if (!W) return;
+			W = !1, U = null;
 			let e = E.value?.getEl();
 			e && (e.style.visibility = "hidden");
 		}
-		function Ve(e) {
-			M !== e && (M && (M.setAttribute("stroke-width", String($.value)), M.setAttribute("stroke", l.strokeColor)), M = e, e.parentNode?.appendChild(e), e.setAttribute("stroke-width", String($.value + 1)), e.setAttribute("stroke", "#555"));
+		function Je(e) {
+			e.parentNode?.appendChild(e), e.setAttribute("stroke-width", String(Te.value + 1)), e.setAttribute("stroke", "#555");
+		}
+		function Ye(e) {
+			e.setAttribute("stroke-width", String(Te.value)), e.setAttribute("stroke", l.strokeColor);
 		}
-		function He() {
-			M && (M.setAttribute("stroke-width", String($.value)), M.setAttribute("stroke", l.strokeColor), M = null, d("stateHover", null)), Be();
+		function Xe(e) {
+			M !== e && (M && !N.has(M) && Ye(M), M = e, Je(e));
 		}
-		function Ue(e) {
+		function Ze() {
+			M && (N.has(M) || Ye(M), M = null, d("stateHover", null)), qe();
+		}
+		function Qe(e) {
 			let t = e;
 			for (; t && !t.dataset?.featId;) t = t.parentElement;
 			return t ? t.dataset.featId ?? null : null;
 		}
-		function We(e) {
-			if (N) return;
-			let t = e, n = Ue(t.target);
+		function $e(e) {
+			if (z) return;
+			let t = e, n = Qe(t.target);
 			if (!n) return;
 			let r = A.get(n);
 			if (!r) return;
@@ -5976,30 +6053,30 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				name: r.name,
 				value: r.value
 			};
-			e.type === "click" ? d("stateClick", i) : e.type === "mouseover" && (Ve(k.get(n)), O.value && Re(n, t.clientX, t.clientY), d("stateHover", i));
+			e.type === "click" ? (d("stateClick", i), d("update:focus", Z(Oe.value).has(r.id) ? null : r.id)) : e.type === "mouseover" && (Xe(k.get(n)), O.value && Ge(n, t.clientX, t.clientY), d("stateHover", i));
 		}
-		function Ge(e) {
-			N || ze(e.clientX, e.clientY);
+		function et(e) {
+			z || Ke(e.clientX, e.clientY);
 		}
-		function Ke(e) {
+		function tt(e) {
 			let t = e.relatedTarget;
-			t && T.value?.contains(t) || He();
+			t && T.value?.contains(t) || Ze();
 		}
-		function qe(e) {
+		function nt(e) {
 			let t = document.createElementNS(Nt, "path");
 			return e && t.setAttribute("d", e), t;
 		}
-		function Je() {
+		function rt() {
 			let e = T.value;
 			if (!e) return;
 			for (; e.firstChild;) e.removeChild(e.firstChild);
-			k.clear(), A.clear(), j = null, M = null;
-			let t = be.value, n = Q.value.features, r = l.strokeColor, i = String($.value), a = !O.value, o = document.createDocumentFragment();
+			k.clear(), A.clear(), j = null, M = null, N.clear();
+			let t = we.value, n = $.value.features, r = l.strokeColor, i = String(Te.value), a = !O.value, o = document.createDocumentFragment();
 			for (let e of n) {
-				let n = String(e.id), s = Ne(e), c = Se.value.get(n), l = qe(t(e));
-				if (l.setAttribute("class", "state-path"), l.setAttribute("data-feat-id", n), l.setAttribute("fill", Me(n)), l.setAttribute("stroke", r), l.setAttribute("stroke-width", i), l.setAttribute("vector-effect", "non-scaling-stroke"), a) {
+				let n = String(e.id), s = Be(e), c = ke.value.get(n), l = nt(t(e));
+				if (l.setAttribute("class", "state-path"), l.setAttribute("data-feat-id", n), l.setAttribute("fill", ze(n)), l.setAttribute("stroke", r), l.setAttribute("stroke-width", i), l.setAttribute("vector-effect", "non-scaling-stroke"), a) {
 					let e = document.createElementNS(Nt, "title");
-					e.textContent = Fe(s, c), l.appendChild(e);
+					e.textContent = He(s, c), l.appendChild(e);
 				}
 				o.appendChild(l), k.set(n, l), A.set(n, {
 					id: n,
@@ -6008,69 +6085,68 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 					feature: e
 				});
 			}
-			let s = ve.value;
+			let s = Se.value;
 			if (s) {
-				let e = qe(t(s));
+				let e = nt(t(s));
 				e.setAttribute("fill", "none"), e.setAttribute("stroke", r), e.setAttribute("stroke-width", "1"), e.setAttribute("stroke-linejoin", "round"), e.setAttribute("pointer-events", "none"), e.setAttribute("vector-effect", "non-scaling-stroke"), o.appendChild(e), j = e;
 			}
 			e.appendChild(o);
 		}
-		function Ye() {
+		function it() {
 			let e = !O.value;
 			for (let [t, n] of k) {
-				let r = Se.value.get(t), i = A.get(t);
-				if (n.setAttribute("fill", Me(t)), i && (i.value = r), e && i) {
+				let r = ke.value.get(t), i = A.get(t);
+				if (n.setAttribute("fill", ze(t)), i && (i.value = r), e && i) {
 					let e = n.firstElementChild;
-					e && (e.textContent = Fe(i.name, r));
+					e && (e.textContent = He(i.name, r));
 				}
 			}
 		}
-		function Xe() {
-			let e = l.strokeColor, t = String($.value);
-			for (let n of k.values()) n !== M && (n.setAttribute("stroke", e), n.setAttribute("stroke-width", t));
-			j && j.setAttribute("stroke", e);
+		function at() {
+			for (let e of k.values()) e === M || N.has(e) || Ye(e);
+			j && j.setAttribute("stroke", l.strokeColor);
 		}
-		function Ze() {
+		function ot() {
 			return typeof l.menu == "string" ? l.menu : "choropleth";
 		}
-		let Qe = n(() => l.legend && (we.value || Te.value || l.data)), $e = n(() => l.colorScale.slice().sort((e, t) => e.min - t.min)), et = n(() => {
+		let st = n(() => l.legend && (je.value || Me.value || l.data)), ct = n(() => l.colorScale.slice().sort((e, t) => e.min - t.min)), lt = n(() => {
 			let e = [];
 			for (let t = 0; t <= 10; t++) {
 				let n = t / 10;
 				e.push({
 					offset: `${(n * 100).toFixed(0)}%`,
-					color: ke(n)
+					color: Ie(n)
 				});
 			}
 			return e;
-		}), tt = new Intl.NumberFormat("en-US", {
+		}), ut = new Intl.NumberFormat("en-US", {
 			notation: "compact",
 			maximumFractionDigits: 1
-		}), nt = n(() => {
-			let { min: e, max: t } = Ce.value, n = t - e, r = [];
+		}), dt = n(() => {
+			let { min: e, max: t } = Ae.value, n = t - e, r = [];
 			for (let t = 1; t <= 3; t++) {
-				let i = t / 4, a = e + n * i, o = Math.abs(a) >= 1e3 ? tt.format(a) : Number.isInteger(a) ? String(a) : a.toFixed(1).replace(/\.0$/, "");
+				let i = t / 4, a = e + n * i, o = Math.abs(a) >= 1e3 ? ut.format(a) : Number.isInteger(a) ? String(a) : a.toFixed(1).replace(/\.0$/, "");
 				r.push({
 					value: o,
 					pct: i * 100
 				});
 			}
 			return r;
-		}), rt = n(() => {
+		}), ft = n(() => {
 			let e = [];
-			if (we.value) for (let t of l.colorScale) e.push({
+			if (je.value) for (let t of l.colorScale) e.push({
 				key: t.value,
 				color: t.color,
 				label: t.value
 			});
-			else if (Te.value) for (let t of $e.value) e.push({
+			else if (Me.value) for (let t of ct.value) e.push({
 				key: String(t.min),
 				color: t.color,
 				label: t.label ?? String(t.min)
 			});
 			return e;
-		}), it = n(() => `linear-gradient(to right, ${et.value.map((e) => `${e.color} ${e.offset}`).join(", ")})`), at = n(() => {
-			let e = Ze();
+		}), pt = n(() => `linear-gradient(to right, ${lt.value.map((e) => `${e.color} ${e.offset}`).join(", ")})`), mt = n(() => {
+			let e = ot();
 			return [{
 				label: "Save as SVG",
 				action: () => {
@@ -6083,20 +6159,20 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				}
 			}];
 		});
-		return C(() => [be.value, O.value], () => Je()), C(() => [
-			Se.value,
+		return C(() => [we.value, O.value], () => rt()), C(() => [
+			ke.value,
 			l.colorScale,
 			l.noDataColor
-		], () => Ye()), C(() => [l.strokeColor, $.value], () => Xe()), (n, c) => (g(), a("div", {
+		], () => it()), C(() => [l.strokeColor, Te.value], () => at()), C(() => [Oe.value, we.value], () => _e(), { flush: "post" }), (n, c) => (g(), a("div", {
 			ref_key: "containerRef",
 			ref: x,
 			class: f(["choropleth-wrapper", { pannable: t.pan }])
 		}, [
-			t.menu ? (g(), r(ce, {
+			t.menu ? (g(), r(se, {
 				key: 0,
-				items: at.value
+				items: mt.value
 			}, null, 8, ["items"])) : i("", !0),
-			t.title || Qe.value ? (g(), a("div", Tt, [t.title ? (g(), a("div", Et, y(t.title), 1)) : i("", !0), Qe.value ? (g(), a("div", Dt, [t.legendTitle ? (g(), a("span", Ot, y(t.legendTitle), 1)) : i("", !0), we.value || Te.value ? (g(!0), a(e, { key: 1 }, v(rt.value, (e) => (g(), a("span", {
+			t.title || st.value ? (g(), a("div", Tt, [t.title ? (g(), a("div", Et, y(t.title), 1)) : i("", !0), st.value ? (g(), a("div", Dt, [t.legendTitle ? (g(), a("span", Ot, y(t.legendTitle), 1)) : i("", !0), je.value || Me.value ? (g(!0), a(e, { key: 1 }, v(ft.value, (e) => (g(), a("span", {
 				key: e.key,
 				class: "choropleth-legend-item"
 			}, [o("span", {
@@ -6104,26 +6180,26 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				style: m({ background: e.color })
 			}, null, 4), s(" " + y(e.label), 1)]))), 128)) : (g(), a("div", kt, [o("div", {
 				class: "choropleth-legend-gradient",
-				style: m({ background: it.value })
-			}, null, 4), o("div", At, [(g(!0), a(e, null, v(nt.value, (e) => (g(), a("span", {
+				style: m({ background: pt.value })
+			}, null, 4), o("div", At, [(g(!0), a(e, null, v(dt.value, (e) => (g(), a("span", {
 				key: e.value,
 				style: m({ left: e.pct + "%" })
 			}, y(e.value), 5))), 128))])]))])) : i("", !0)])) : i("", !0),
 			(g(), a("svg", {
 				ref_key: "svgRef",
 				ref: S,
-				viewBox: `0 0 ${he.value} ${ge.value}`,
+				viewBox: `0 0 ${ye.value} ${be.value}`,
 				preserveAspectRatio: "xMidYMid meet"
 			}, [o("g", {
 				ref_key: "mapGroupRef",
 				ref: T
 			}, null, 512)], 8, jt)),
-			(t.zoom || t.pan) && W.value ? (g(), a("button", {
+			ce.value ? (g(), a("button", {
 				key: 2,
 				type: "button",
 				class: "choropleth-reset",
 				"aria-label": "Reset zoom",
-				onClick: pe
+				onClick: Q
 			}, " Reset ")) : i("", !0),
 			O.value ? (g(), r(wt, {
 				key: 3,
@@ -6133,12 +6209,12 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 				default: w((r) => [te(n.$slots, "tooltip", p(u(ne(r))), () => [t.tooltipFormat ? (g(), a("span", {
 					key: 0,
 					innerHTML: t.tooltipFormat(r)
-				}, null, 8, Mt)) : r.value == null ? (g(), a(e, { key: 1 }, [s(y(r.name), 1)], 64)) : (g(), a(e, { key: 2 }, [s(y(r.name) + ": " + y(Pe(r.value)), 1)], 64))], !0)]),
+				}, null, 8, Mt)) : r.value == null ? (g(), a(e, { key: 1 }, [s(y(r.name), 1)], 64)) : (g(), a(e, { key: 2 }, [s(y(r.name) + ": " + y(Ve(r.value)), 1)], 64))], !0)]),
 				_: 3
 			}, 512)) : i("", !0)
 		], 2));
 	}
-}), [["__scopeId", "data-v-ecaa9e15"]]), It = /* @__PURE__ */ V(/* @__PURE__ */ l({
+}), [["__scopeId", "data-v-62648243"]]), Lt = /* @__PURE__ */ H(/* @__PURE__ */ l({
 	__name: "ChartTooltip",
 	props: {
 		x: {},
@@ -6189,7 +6265,7 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 			_: 3
 		}, 8, ["open"])) : i("", !0);
 	}
-}), [["__scopeId", "data-v-44377f70"]]), Lt = { class: "TableWrapper" }, Rt = /* @__PURE__ */ V(/* @__PURE__ */ l({
+}), [["__scopeId", "data-v-44377f70"]]), Rt = { class: "TableWrapper" }, zt = /* @__PURE__ */ H(/* @__PURE__ */ l({
 	__name: "DataTable",
 	props: {
 		data: {},
@@ -6279,11 +6355,11 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 		return (n, s) => (g(), a("div", { class: f(["TableOuter", {
 			"full-width": t.fullWidth,
 			"has-menu": re.value
-		}]) }, [re.value ? (g(), r(ce, {
+		}]) }, [re.value ? (g(), r(se, {
 			key: 0,
 			items: x.value,
 			"force-dropdown": ""
-		}, null, 8, ["items"])) : i("", !0), o("div", Lt, [o("table", { class: f(["Table", { "full-width": t.fullWidth }]) }, [
+		}, null, 8, ["items"])) : i("", !0), o("div", Rt, [o("table", { class: f(["Table", { "full-width": t.fullWidth }]) }, [
 			o("colgroup", null, [(g(!0), a(e, null, v(h.value, (e) => (g(), a("col", {
 				key: e.name,
 				style: m(u(e.name))
@@ -6301,4 +6377,4 @@ var ve = ["width", "height"], ye = ["x"], be = { key: 1 }, $ = [
 	}
 }), [["__scopeId", "data-v-d5c290dc"]]);
 //#endregion
-export { bt as BarChart, It as ChartTooltip, Ft as ChoroplethMap, Rt as DataTable, $e as LineChart };
+export { bt as BarChart, Lt as ChartTooltip, It as ChoroplethMap, zt as DataTable, $e as LineChart };