@cfasim-ui/charts 0.1.10 → 0.2.0

package/dist/index.js

@@ -1,17 +1,17 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, onMounted as d, onUnmounted as f, openBlock as p, ref as m, renderList as h, toDisplayString as g, unref as _, useId as v, watch as y, withCtx as b } from "vue";
-import { DropdownMenuContent as x, DropdownMenuItem as S, DropdownMenuPortal as C, DropdownMenuRoot as w, DropdownMenuTrigger as T } from "reka-ui";
-import { geoAlbersUsa as E, geoPath as D } from "d3-geo";
-import { zoom as ee } from "d3-zoom";
-import { select as O } from "d3-selection";
-import { feature as k, merge as A, mesh as te } from "topojson-client";
-import j from "us-atlas/states-10m.json";
-import M from "us-atlas/counties-10m.json";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, normalizeClass as u, normalizeProps as d, normalizeStyle as f, onMounted as p, onUnmounted as ee, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, useId as b, watch as x, withCtx as S, withModifiers as C } from "vue";
+import { DropdownMenuContent as w, DropdownMenuItem as T, DropdownMenuPortal as E, DropdownMenuRoot as D, DropdownMenuTrigger as O, PopoverAnchor as k, PopoverContent as A, PopoverPortal as j, PopoverRoot as M } from "reka-ui";
+import { geoAlbersUsa as N, geoPath as P } from "d3-geo";
+import { zoom as te } from "d3-zoom";
+import { select as ne } from "d3-selection";
+import { feature as re, merge as ie, mesh as F } from "topojson-client";
+import ae from "us-atlas/states-10m.json";
+import I from "us-atlas/counties-10m.json";
 //#region src/ChartMenu/ChartMenu.vue?vue&type=script&setup=true&lang.ts
-var N = { class: "chart-menu-trigger-area" }, P = ["aria-label"], F = /* @__PURE__ */ c({
+var L = { class: "chart-menu-trigger-area" }, R = ["aria-label"], z = /* @__PURE__ */ c({
 	__name: "ChartMenu",
 	props: { items: {} },
 	setup(t) {
-		return (r, c) => (p(), i("div", N, [t.items.length === 1 ? (p(), i("button", {
+		return (r, c) => (m(), i("div", L, [t.items.length === 1 ? (m(), i("button", {
 			key: 0,
 			class: "chart-menu-button chart-menu-single",
 			"aria-label": t.items[0].label,
@@ -26,12 +26,15 @@ var N = { class: "chart-menu-trigger-area" }, P = ["aria-label"], F = /* @__PURE
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round",
 			"aria-hidden": "true"
-		}, [a("path", { d: "M7 1v8M3 6l4 4 4-4M2 13h10" })], -1)]], 8, P)) : (p(), n(_(w), { key: 1 }, {
-			default: b(() => [s(_(T), {
+		}, [a("path", { d: "M7 1v8M3 6l4 4 4-4M2 13h10" })], -1)]], 8, R)) : (m(), n(y(D), {
+			key: 1,
+			modal: !1
+		}, {
+			default: S(() => [s(y(O), {
 				class: "chart-menu-button",
 				"aria-label": "Chart options"
 			}, {
-				default: b(() => [...c[2] ||= [a("svg", {
+				default: S(() => [...c[2] ||= [a("svg", {
 					width: "16",
 					height: "16",
 					viewBox: "0 0 16 16",
@@ -55,18 +58,18 @@ var N = { class: "chart-menu-trigger-area" }, P = ["aria-label"], F = /* @__PURE
 					})
 				], -1)]]),
 				_: 1
-			}), s(_(C), null, {
-				default: b(() => [s(_(x), {
+			}), s(y(E), null, {
+				default: S(() => [s(y(w), {
 					class: "chart-menu-content",
 					"side-offset": 4,
 					align: "end"
 				}, {
-					default: b(() => [(p(!0), i(e, null, h(t.items, (e) => (p(), n(_(S), {
+					default: S(() => [(m(!0), i(e, null, g(t.items, (e) => (m(), n(y(T), {
 						key: e.label,
 						class: "chart-menu-item",
 						onSelect: e.action
 					}, {
-						default: b(() => [o(g(e.label), 1)]),
+						default: S(() => [o(v(e.label), 1)]),
 						_: 2
 					}, 1032, ["onSelect"]))), 128))]),
 					_: 1
@@ -76,24 +79,24 @@ var N = { class: "chart-menu-trigger-area" }, P = ["aria-label"], F = /* @__PURE
 			_: 1
 		}))]));
 	}
-}), I = (e, t) => {
+}), B = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, L = /* @__PURE__ */ I(F, [["__scopeId", "data-v-adef2467"]]);
+}, oe = /* @__PURE__ */ B(z, [["__scopeId", "data-v-fe2f6904"]]);
 //#endregion
 //#region src/ChartMenu/download.ts
-function R(e, t) {
+function V(e, t) {
 	let n = URL.createObjectURL(e), r = document.createElement("a");
 	r.href = n, r.download = t, r.click(), URL.revokeObjectURL(n);
 }
-function ne(e, t) {
+function se(e, t) {
 	let n = e.cloneNode(!0);
 	n.setAttribute("xmlns", "http://www.w3.org/2000/svg");
 	let r = new XMLSerializer().serializeToString(n);
-	R(new Blob([r], { type: "image/svg+xml" }), `${t}.svg`);
+	V(new Blob([r], { type: "image/svg+xml" }), `${t}.svg`);
 }
-function re(e, t) {
+function ce(e, t) {
 	let n = e.cloneNode(!0);
 	n.setAttribute("xmlns", "http://www.w3.org/2000/svg");
 	let r = new XMLSerializer().serializeToString(n), i = new Blob([r], { type: "image/svg+xml;charset=utf-8" }), a = URL.createObjectURL(i), o = new Image(), s = e.width.baseVal.value || e.clientWidth, c = e.height.baseVal.value || e.clientHeight;
@@ -102,21 +105,21 @@ function re(e, t) {
 		e.width = s * 2, e.height = c * 2;
 		let n = e.getContext("2d");
 		n.scale(2, 2), n.drawImage(o, 0, 0, s, c), e.toBlob((e) => {
-			e && R(e, `${t}.png`);
+			e && V(e, `${t}.png`);
 		}), URL.revokeObjectURL(a);
 	}, o.src = a;
 }
-function z(e, t) {
-	R(new Blob([e], { type: "text/csv" }), `${t}.csv`);
+function le(e, t) {
+	V(new Blob([e], { type: "text/csv" }), `${t}.csv`);
 }
 //#endregion
 //#region src/LineChart/LineChart.vue?vue&type=script&setup=true&lang.ts
-var B = ["width", "height"], V = ["x"], ie = [
+var H = ["width", "height"], ue = ["x"], de = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], H = [
+], fe = [
 	"x1",
 	"y1",
 	"x2",
@@ -126,22 +129,46 @@ var B = ["width", "height"], V = ["x"], ie = [
 	"y1",
 	"x2",
 	"y2"
-], ae = [
+], pe = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], W = ["x", "y"], G = ["transform"], K = ["x", "y"], q = ["x", "y"], J = [
+], me = ["x", "y"], W = ["transform"], G = ["x", "y"], he = ["x", "y"], ge = [
 	"d",
 	"fill",
 	"fill-opacity"
-], Y = [
+], _e = [
 	"d",
 	"stroke",
 	"stroke-width",
 	"stroke-opacity",
 	"stroke-dasharray"
-], oe = /* @__PURE__ */ I(/* @__PURE__ */ c({
+], ve = [
+	"cx",
+	"cy",
+	"r",
+	"fill",
+	"fill-opacity",
+	"stroke"
+], ye = [
+	"x1",
+	"y1",
+	"x2",
+	"y2"
+], be = [
+	"cx",
+	"cy",
+	"fill"
+], xe = [
+	"x",
+	"y",
+	"width",
+	"height"
+], K = { class: "line-chart-tooltip" }, q = {
+	key: 0,
+	class: "line-chart-tooltip-label"
+}, Se = 50, J = /* @__PURE__ */ B(/* @__PURE__ */ c({
 	__name: "LineChart",
 	props: {
 		data: {},
@@ -162,38 +189,41 @@ var B = ["width", "height"], V = ["x"], ie = [
 			default: !0
 		},
 		xGrid: { type: Boolean },
-		yGrid: { type: Boolean }
+		yGrid: { type: Boolean },
+		tooltipData: {},
+		tooltipTrigger: {}
 	},
-	setup(o) {
-		let s = o, c = m(null), l = m(null), u = m(0), _ = null, v = null;
-		d(() => {
-			c.value && (u.value = c.value.clientWidth, _ = new ResizeObserver((e) => {
+	emits: ["hover"],
+	setup(s, { emit: c }) {
+		let u = s, y = c, b = h(null), x = h(null), S = h(0), w = null, T = null;
+		p(() => {
+			b.value && (S.value = b.value.clientWidth, w = new ResizeObserver((e) => {
 				let t = e[0];
-				t && (s.debounce ? (v && clearTimeout(v), v = setTimeout(() => {
-					u.value = t.contentRect.width;
-				}, s.debounce)) : u.value = t.contentRect.width);
-			}), _.observe(c.value));
-		}), f(() => {
-			_?.disconnect(), v && clearTimeout(v);
+				t && (u.debounce ? (T && clearTimeout(T), T = setTimeout(() => {
+					S.value = t.contentRect.width;
+				}, u.debounce)) : S.value = t.contentRect.width);
+			}), w.observe(b.value));
+		}), ee(() => {
+			w?.disconnect(), T && clearTimeout(T);
 		});
-		let y = t(() => s.width ?? (u.value || 400)), b = t(() => s.height ?? 200), x = t(() => ({
-			top: s.title ? 30 : 10,
+		let E = t(() => u.width ?? (S.value || 400)), D = t(() => u.height ?? 200), O = t(() => ({
+			top: u.title ? 30 : 10,
 			right: 10,
-			bottom: s.xLabel ? 46 : 30,
-			left: s.yLabel ? 66 : 50
-		})), S = t(() => y.value - x.value.left - x.value.right), C = t(() => b.value - x.value.top - x.value.bottom), w = t(() => s.series && s.series.length > 0 ? s.series : s.data ? [{ data: s.data }] : []), T = t(() => s.areas ?? []), E = t(() => {
+			bottom: u.xLabel ? 46 : 30,
+			left: u.yLabel ? 66 : 50
+		})), k = t(() => E.value - O.value.left - O.value.right), A = t(() => D.value - O.value.top - O.value.bottom), j = t(() => u.series && u.series.length > 0 ? u.series : u.data ? [{ data: u.data }] : []), M = t(() => u.areas ?? []), N = t(() => {
 			let e = 0;
-			for (let t of w.value) t.data.length > e && (e = t.data.length);
-			for (let t of T.value) t.upper.length > e && (e = t.upper.length), t.lower.length > e && (e = t.lower.length);
+			for (let t of j.value) t.data.length > e && (e = t.data.length);
+			for (let t of M.value) t.upper.length > e && (e = t.upper.length), t.lower.length > e && (e = t.lower.length);
 			return e;
-		}), D = t(() => {
+		}), P = t(() => {
 			let e = Infinity, t = -Infinity;
-			for (let n of w.value) for (let r of n.data) isFinite(r) && (r < e && (e = r), r > t && (t = r));
-			for (let n of T.value) {
+			for (let n of j.value) for (let r of n.data) isFinite(r) && (r < e && (e = r), r > t && (t = r));
+			for (let n of M.value) {
 				for (let r of n.upper) isFinite(r) && (r < e && (e = r), r > t && (t = r));
 				for (let r of n.lower) isFinite(r) && (r < e && (e = r), r > t && (t = r));
 			}
-			return isFinite(e) ? (s.yMin != null && s.yMin < e && (e = s.yMin), {
+			return isFinite(e) ? (u.yMin != null && u.yMin < e && (e = u.yMin), {
 				min: e,
 				max: t,
 				range: t - e || 1
@@ -203,23 +233,31 @@ var B = ["width", "height"], V = ["x"], ie = [
 				range: 1
 			};
 		});
-		function ee(e) {
+		function te(e) {
 			if (e.length === 0) return "";
-			let { min: t, range: n } = D.value, r = E.value, i = S.value / (r - 1 || 1), a = C.value / n, o = x.value.top + C.value, s = "", c = !1;
+			let { min: t, range: n } = P.value, r = N.value, i = k.value / (r - 1 || 1), a = A.value / n, o = O.value.top + A.value, s = "", c = !1;
 			for (let n = 0; n < e.length; n++) {
 				if (!isFinite(e[n])) {
 					c = !1;
 					continue;
 				}
-				let r = x.value.left + n * i, l = o - (e[n] - t) * a;
+				let r = O.value.left + n * i, l = o - (e[n] - t) * a;
 				s += c ? `L${r},${l}` : `M${r},${l}`, c = !0;
 			}
 			return s;
 		}
-		function O(e, t) {
+		function ne(e) {
+			let { min: t, range: n } = P.value, r = N.value, i = k.value / (r - 1 || 1), a = A.value / n, o = O.value.top + A.value, s = [];
+			for (let n = 0; n < e.length; n++) isFinite(e[n]) && s.push({
+				x: O.value.left + n * i,
+				y: o - (e[n] - t) * a
+			});
+			return s;
+		}
+		function re(e, t) {
 			let n = Math.min(e.length, t.length);
 			if (n === 0) return "";
-			let { min: r, range: i } = D.value, a = E.value, o = S.value / (a - 1 || 1), s = C.value / i, c = x.value.top + C.value, l = (e) => x.value.left + e * o, u = (e) => c - (e - r) * s, d = [], f = [];
+			let { min: r, range: i } = P.value, a = N.value, o = k.value / (a - 1 || 1), s = A.value / i, c = O.value.top + A.value, l = (e) => O.value.left + e * o, u = (e) => c - (e - r) * s, d = [], f = [];
 			for (let r = 0; r < n; r++) isFinite(e[r]) && isFinite(t[r]) ? f.push(r) : f.length && (d.push(f), f = []);
 			f.length && d.push(f);
 			let p = "";
@@ -231,61 +269,61 @@ var B = ["width", "height"], V = ["x"], ie = [
 			}
 			return p;
 		}
-		function k(e, t) {
+		function ie(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 A(e) {
+		function F(e) {
 			return Math.round(e) + .5;
 		}
-		let te = new Intl.NumberFormat();
-		function j(e) {
-			return Math.abs(e) >= 1e3 ? te.format(e) : Number.isInteger(e) ? e.toString() : e.toFixed(1);
+		let ae = new Intl.NumberFormat();
+		function I(e) {
+			return Math.abs(e) >= 1e3 ? ae.format(e) : Number.isInteger(e) ? e.toString() : e.toFixed(1);
 		}
-		let M = t(() => {
-			let { min: e, max: t } = D.value;
+		let L = t(() => {
+			let { min: e, max: t } = P.value;
 			if (e === t) return [{
-				value: j(e),
-				y: A(x.value.top + C.value / 2)
+				value: I(e),
+				y: F(O.value.top + A.value / 2)
 			}];
-			let n = Math.max(3, Math.floor(C.value / 50)), r = k(t - e, n), i = Math.ceil(e / r) * r, a = [];
+			let n = Math.max(3, Math.floor(A.value / 50)), r = ie(t - e, n), i = Math.ceil(e / r) * r, a = [];
 			for (let n = i; n <= t; n += r) a.push({
-				value: j(n),
-				y: A(x.value.top + C.value - (n - e) / D.value.range * C.value)
+				value: I(n),
+				y: F(O.value.top + A.value - (n - e) / P.value.range * A.value)
 			});
 			return a;
-		}), N = t(() => {
-			let e = E.value;
+		}), R = t(() => {
+			let e = N.value;
 			if (e <= 1) return [];
-			let t = s.xLabels;
+			let t = u.xLabels;
 			if (t && t.length === e) {
-				let n = Math.max(3, Math.floor(S.value / 80)), r = Math.max(1, Math.round((e - 1) / n)), i = [];
+				let n = Math.max(3, Math.floor(k.value / 80)), r = Math.max(1, Math.round((e - 1) / n)), i = [];
 				for (let n = 0; n < e; n += r) i.push({
 					value: t[n],
-					x: A(x.value.left + n / (e - 1) * S.value)
+					x: F(O.value.left + n / (e - 1) * k.value)
 				});
 				return i;
 			}
-			let n = s.xMin ?? 0, r = Math.max(3, Math.floor(S.value / 80)), i = k(e - 1, r), a = [];
+			let n = u.xMin ?? 0, r = Math.max(3, Math.floor(k.value / 80)), i = ie(e - 1, r), a = [];
 			for (let t = 0; t <= e - 1; t += i) {
 				let r = Math.round(t);
 				a.push({
-					value: j(r + n),
-					x: A(x.value.left + r / (e - 1) * S.value)
+					value: I(r + n),
+					x: F(O.value.left + r / (e - 1) * k.value)
 				});
 			}
 			return a;
 		});
-		function P() {
-			return typeof s.menu == "string" ? s.menu : "chart";
+		function z() {
+			return typeof u.menu == "string" ? u.menu : "chart";
 		}
-		function F() {
-			return l.value;
+		function B() {
+			return x.value;
 		}
-		function I() {
-			let e = w.value;
+		function V() {
+			let e = j.value;
 			if (e.length === 0) return "";
-			let t = E.value, n = [(e.length === 1 ? ["index", "value"] : ["index", ...e.map((e, t) => `series_${t}`)]).join(",")];
+			let t = N.value, n = [(e.length === 1 ? ["index", "value"] : ["index", ...e.map((e, t) => `series_${t}`)]).join(",")];
 			for (let r = 0; r < t; r++) {
 				let t = [r.toString()];
 				for (let n of e) t.push(r < n.data.length ? String(n.data[r]) : "");
@@ -293,140 +331,277 @@ var B = ["width", "height"], V = ["x"], ie = [
 			}
 			return n.join("\n");
 		}
-		let R = t(() => {
-			let e = P();
+		let J = h(null), Y = h(!1), Ce = h(null), X = t(() => !!u.tooltipData || !!u.tooltipTrigger), Z = t(() => {
+			if (J.value === null) return 0;
+			let e = N.value, t = k.value / (e - 1 || 1);
+			return O.value.left + J.value * t;
+		}), we = t(() => {
+			let e = J.value;
+			if (e === null) return [];
+			let { min: t, range: n } = P.value, r = A.value / n, i = O.value.top + A.value;
+			return j.value.filter((t) => e < t.data.length && isFinite(t.data[e])).map((n) => ({
+				x: Z.value,
+				y: i - (n.data[e] - t) * r,
+				color: n.color ?? "currentColor"
+			}));
+		}), Q = t(() => {
+			let e = J.value;
+			return e === null ? null : {
+				index: e,
+				xLabel: u.xLabels?.[e],
+				values: j.value.map((t, n) => ({
+					value: t.data[e],
+					color: t.color ?? "currentColor",
+					seriesIndex: n
+				})),
+				data: u.tooltipData?.[e] ?? null
+			};
+		});
+		function Te(e) {
+			return "touches" in e ? e.touches[0] ?? null : e;
+		}
+		function Ee(e) {
+			let t = b.value?.getBoundingClientRect();
+			if (!t) return null;
+			let n = N.value;
+			if (n <= 1) return null;
+			let r = e - t.left, i = k.value / (n - 1 || 1), a = (r - O.value.left) / i;
+			return Math.round(Math.max(0, Math.min(n - 1, a)));
+		}
+		function De(e, t) {
+			let n = Ce.value;
+			if (!n) return;
+			let r = b.value.getBoundingClientRect(), i = Y.value ? Se : 0, a = e - r.left, o = Math.max(0, t - r.top - i);
+			n.style.left = `${a + 16}px`, n.style.top = `${o}px`;
+		}
+		function Oe(e) {
+			let t = Te(e);
+			if (!t) return;
+			let n = Ee(t.clientX);
+			n !== null && (J.value = n, De(t.clientX, t.clientY), y("hover", { index: n }));
+		}
+		function ke(e) {
+			Oe(e);
+		}
+		function Ae() {
+			u.tooltipTrigger !== "click" && (J.value = null, y("hover", null));
+		}
+		function je(e) {
+			if (u.tooltipTrigger !== "click") return;
+			let t = Te(e);
+			if (!t) return;
+			let n = Ee(t.clientX);
+			n !== null && (J.value = J.value === n ? null : n, y("hover", J.value === null ? null : { index: n }));
+		}
+		function Me(e) {
+			Y.value = !0, Oe(e);
+		}
+		function Ne(e) {
+			Oe(e);
+		}
+		function Pe() {
+			Y.value = !1, J.value = null, y("hover", null);
+		}
+		let Fe = t(() => {
+			let e = z();
 			return [
 				{
 					label: "Save as SVG",
 					action: () => {
-						let t = F();
-						t && ne(t, e);
+						let t = B();
+						t && se(t, e);
 					}
 				},
 				{
 					label: "Save as PNG",
 					action: () => {
-						let t = F();
-						t && re(t, e);
+						let t = B();
+						t && ce(t, e);
 					}
 				},
 				{
 					label: "Download CSV",
-					action: () => z(I(), e)
+					action: () => le(V(), e)
 				}
 			];
 		});
-		return (t, s) => (p(), i("div", {
+		return (t, c) => (m(), i("div", {
 			ref_key: "containerRef",
-			ref: c,
+			ref: b,
 			class: "line-chart-wrapper"
-		}, [o.menu ? (p(), n(L, {
-			key: 0,
-			items: R.value
-		}, null, 8, ["items"])) : r("", !0), (p(), i("svg", {
-			ref_key: "svgRef",
-			ref: l,
-			width: y.value,
-			height: b.value
 		}, [
-			o.title ? (p(), i("text", {
+			s.menu ? (m(), n(oe, {
 				key: 0,
-				x: y.value / 2,
-				y: 18,
-				"text-anchor": "middle",
-				"font-size": "14",
-				"font-weight": "600",
-				fill: "currentColor"
-			}, g(o.title), 9, V)) : r("", !0),
-			a("line", {
-				x1: A(x.value.left),
-				y1: A(x.value.top),
-				x2: A(x.value.left),
-				y2: A(x.value.top + C.value),
-				stroke: "currentColor",
-				"stroke-opacity": "0.3"
-			}, null, 8, ie),
-			a("line", {
-				x1: A(x.value.left),
-				y1: A(x.value.top + C.value),
-				x2: A(x.value.left + S.value),
-				y2: A(x.value.top + C.value),
-				stroke: "currentColor",
-				"stroke-opacity": "0.3"
-			}, null, 8, H),
-			o.yGrid ? (p(!0), i(e, { key: 1 }, h(M.value, (e, t) => (p(), i("line", {
-				key: "yg" + t,
-				x1: x.value.left,
-				y1: e.y,
-				x2: x.value.left + S.value,
-				y2: e.y,
-				stroke: "currentColor",
-				"stroke-opacity": "0.1"
-			}, null, 8, U))), 128)) : r("", !0),
-			o.xGrid ? (p(!0), i(e, { key: 2 }, h(N.value, (e, t) => (p(), i("line", {
-				key: "xg" + t,
-				x1: e.x,
-				y1: x.value.top,
-				x2: e.x,
-				y2: x.value.top + C.value,
-				stroke: "currentColor",
-				"stroke-opacity": "0.1"
-			}, null, 8, ae))), 128)) : r("", !0),
-			(p(!0), i(e, null, h(M.value, (e, t) => (p(), i("text", {
-				key: "y" + t,
-				x: x.value.left - 6,
-				y: e.y,
-				"text-anchor": "end",
-				"dominant-baseline": "middle",
-				"font-size": "10",
-				fill: "currentColor",
-				"fill-opacity": "0.6"
-			}, g(e.value), 9, W))), 128)),
-			o.yLabel ? (p(), i("text", {
-				key: 3,
-				x: 0,
-				y: 0,
-				transform: `translate(14, ${x.value.top + C.value / 2}) rotate(-90)`,
-				"text-anchor": "middle",
-				"font-size": "13",
-				fill: "currentColor"
-			}, g(o.yLabel), 9, G)) : r("", !0),
-			(p(!0), i(e, null, h(N.value, (e, t) => (p(), i("text", {
-				key: "x" + t,
-				x: e.x,
-				y: x.value.top + C.value + 16,
-				"text-anchor": "middle",
-				"font-size": "10",
-				fill: "currentColor",
-				"fill-opacity": "0.6"
-			}, g(e.value), 9, K))), 128)),
-			o.xLabel ? (p(), i("text", {
-				key: 4,
-				x: x.value.left + S.value / 2,
-				y: b.value - 4,
-				"text-anchor": "middle",
-				"font-size": "13",
-				fill: "currentColor"
-			}, g(o.xLabel), 9, q)) : r("", !0),
-			(p(!0), i(e, null, h(T.value, (e, t) => (p(), i("path", {
-				key: "area" + t,
-				d: O(e.upper, e.lower),
-				fill: e.color ?? "currentColor",
-				"fill-opacity": e.opacity ?? .2,
-				stroke: "none"
-			}, null, 8, J))), 128)),
-			(p(!0), i(e, null, h(w.value, (e, t) => (p(), i("path", {
-				key: t,
-				d: ee(e.data),
-				fill: "none",
-				stroke: e.color ?? "currentColor",
-				"stroke-width": e.strokeWidth ?? 1.5,
-				"stroke-opacity": e.opacity ?? o.lineOpacity,
-				"stroke-dasharray": e.dashed ? "6 3" : void 0
-			}, null, 8, Y))), 128))
-		], 8, B))], 512));
+				items: Fe.value
+			}, null, 8, ["items"])) : r("", !0),
+			(m(), i("svg", {
+				ref_key: "svgRef",
+				ref: x,
+				width: E.value,
+				height: D.value
+			}, [
+				s.title ? (m(), i("text", {
+					key: 0,
+					x: E.value / 2,
+					y: 18,
+					"text-anchor": "middle",
+					"font-size": "14",
+					"font-weight": "600",
+					fill: "currentColor"
+				}, v(s.title), 9, ue)) : r("", !0),
+				a("line", {
+					x1: F(O.value.left),
+					y1: F(O.value.top),
+					x2: F(O.value.left),
+					y2: F(O.value.top + A.value),
+					stroke: "currentColor",
+					"stroke-opacity": "0.3"
+				}, null, 8, de),
+				a("line", {
+					x1: F(O.value.left),
+					y1: F(O.value.top + A.value),
+					x2: F(O.value.left + k.value),
+					y2: F(O.value.top + A.value),
+					stroke: "currentColor",
+					"stroke-opacity": "0.3"
+				}, null, 8, fe),
+				s.yGrid ? (m(!0), i(e, { key: 1 }, g(L.value, (e, t) => (m(), i("line", {
+					key: "yg" + t,
+					x1: O.value.left,
+					y1: e.y,
+					x2: O.value.left + k.value,
+					y2: e.y,
+					stroke: "currentColor",
+					"stroke-opacity": "0.1"
+				}, null, 8, U))), 128)) : r("", !0),
+				s.xGrid ? (m(!0), i(e, { key: 2 }, g(R.value, (e, t) => (m(), i("line", {
+					key: "xg" + t,
+					x1: e.x,
+					y1: O.value.top,
+					x2: e.x,
+					y2: O.value.top + A.value,
+					stroke: "currentColor",
+					"stroke-opacity": "0.1"
+				}, null, 8, pe))), 128)) : r("", !0),
+				(m(!0), i(e, null, g(L.value, (e, t) => (m(), i("text", {
+					key: "y" + t,
+					x: O.value.left - 6,
+					y: e.y,
+					"text-anchor": "end",
+					"dominant-baseline": "middle",
+					"font-size": "10",
+					fill: "currentColor",
+					"fill-opacity": "0.6"
+				}, v(e.value), 9, me))), 128)),
+				s.yLabel ? (m(), i("text", {
+					key: 3,
+					x: 0,
+					y: 0,
+					transform: `translate(14, ${O.value.top + A.value / 2}) rotate(-90)`,
+					"text-anchor": "middle",
+					"font-size": "13",
+					fill: "currentColor"
+				}, v(s.yLabel), 9, W)) : r("", !0),
+				(m(!0), i(e, null, g(R.value, (e, t) => (m(), i("text", {
+					key: "x" + t,
+					x: e.x,
+					y: O.value.top + A.value + 16,
+					"text-anchor": "middle",
+					"font-size": "10",
+					fill: "currentColor",
+					"fill-opacity": "0.6"
+				}, v(e.value), 9, G))), 128)),
+				s.xLabel ? (m(), i("text", {
+					key: 4,
+					x: O.value.left + k.value / 2,
+					y: D.value - 4,
+					"text-anchor": "middle",
+					"font-size": "13",
+					fill: "currentColor"
+				}, v(s.xLabel), 9, he)) : r("", !0),
+				(m(!0), i(e, null, g(M.value, (e, t) => (m(), i("path", {
+					key: "area" + t,
+					d: re(e.upper, e.lower),
+					fill: e.color ?? "currentColor",
+					"fill-opacity": e.opacity ?? .2,
+					stroke: "none"
+				}, null, 8, ge))), 128)),
+				(m(!0), i(e, null, g(j.value, (t, n) => (m(), i(e, { key: n }, [t.line === !1 ? r("", !0) : (m(), i("path", {
+					key: 0,
+					d: te(t.data),
+					fill: "none",
+					stroke: t.color ?? "currentColor",
+					"stroke-width": t.strokeWidth ?? 1.5,
+					"stroke-opacity": t.opacity ?? s.lineOpacity,
+					"stroke-dasharray": t.dashed ? "6 3" : void 0
+				}, null, 8, _e)), t.dots ? (m(!0), i(e, { key: 1 }, g(ne(t.data), (e, n) => (m(), i("circle", {
+					key: n,
+					cx: e.x,
+					cy: e.y,
+					r: t.dotRadius ?? (t.strokeWidth ?? 1.5) + 1,
+					fill: t.dotFill ?? t.color ?? "currentColor",
+					"fill-opacity": t.opacity ?? s.lineOpacity,
+					stroke: t.dotStroke ?? "none"
+				}, null, 8, ve))), 128)) : r("", !0)], 64))), 128)),
+				X.value && J.value !== null ? (m(), i("line", {
+					key: 5,
+					x1: F(Z.value),
+					y1: O.value.top,
+					x2: F(Z.value),
+					y2: O.value.top + A.value,
+					stroke: "currentColor",
+					"stroke-opacity": "0.3",
+					"stroke-dasharray": "4 2",
+					"pointer-events": "none"
+				}, null, 8, ye)) : r("", !0),
+				(m(!0), i(e, null, g(we.value, (e, t) => (m(), i("circle", {
+					key: "hd" + t,
+					cx: e.x,
+					cy: e.y,
+					r: "4",
+					fill: e.color,
+					stroke: "var(--color-bg-0, #fff)",
+					"stroke-width": "2",
+					"pointer-events": "none"
+				}, null, 8, be))), 128)),
+				X.value ? (m(), i("rect", {
+					key: 6,
+					x: O.value.left,
+					y: O.value.top,
+					width: k.value,
+					height: A.value,
+					fill: "transparent",
+					style: {
+						cursor: "crosshair",
+						"touch-action": "none"
+					},
+					onMousemove: ke,
+					onMouseleave: Ae,
+					onClick: je,
+					onTouchstart: C(Me, ["prevent"]),
+					onTouchmove: C(Ne, ["prevent"]),
+					onTouchend: Pe
+				}, null, 40, xe)) : r("", !0)
+			], 8, H)),
+			X.value && J.value !== null && Q.value ? (m(), i("div", {
+				key: 1,
+				ref_key: "tooltipRef",
+				ref: Ce,
+				class: "chart-tooltip-content",
+				style: {
+					position: "absolute",
+					transform: "translateY(-50%)"
+				}
+			}, [_(t.$slots, "tooltip", d(l(Q.value)), () => [a("div", K, [Q.value.xLabel ? (m(), i("div", q, v(Q.value.xLabel), 1)) : r("", !0), (m(!0), i(e, null, g(Q.value.values, (e) => (m(), i("div", {
+				key: e.seriesIndex,
+				class: "line-chart-tooltip-row"
+			}, [a("span", {
+				class: "line-chart-tooltip-swatch",
+				style: f({ background: e.color })
+			}, null, 4), o(" " + v(isFinite(e.value) ? I(e.value) : "—"), 1)]))), 128))])], !0)], 512)) : r("", !0)
+		], 512));
 	}
-}), [["__scopeId", "data-v-128f8091"]]), se = {
+}), [["__scopeId", "data-v-55a24433"]]), Y = {
 	"01013": "010259",
 	"01015": "010177",
 	"01029": "010177",
@@ -3587,7 +3762,7 @@ var B = ["width", "height"], V = ["x"], ie = [
 	51019: "510014",
 	"02158": "020820",
 	46102: "460957"
-}, ce = {
+}, Ce = {
 	"010259": "Butler, AL",
 	"010177": "Calhoun (Anniston), AL - Cleburne, AL",
 	"010172": "Chambers, AL - Randolph, AL",
@@ -4537,26 +4712,25 @@ var B = ["width", "height"], V = ["x"], ie = [
 	560775: "Teton, WY - Lincoln, WY",
 	560792: "Uinta, WY",
 	560804: "Weston, WY"
-}, le = ["width", "height"], ue = [
+}, X = ["width", "height"], Z = [
+	"data-feat-id",
 	"d",
 	"fill",
 	"stroke",
-	"stroke-width",
-	"onClick",
-	"onMouseenter"
-], de = ["d", "stroke"], fe = ["transform"], pe = {
+	"stroke-width"
+], we = { key: 0 }, Q = ["d", "stroke"], Te = ["transform"], Ee = {
 	key: 0,
 	y: 5,
 	"font-size": "13",
 	"font-weight": "600",
 	fill: "currentColor"
-}, me = ["x", "fill"], he = ["x"], ge = {
+}, De = ["x", "fill"], Oe = ["x"], ke = {
 	key: 0,
 	y: 5,
 	"font-size": "13",
 	"font-weight": "600",
 	fill: "currentColor"
-}, _e = ["offset", "stop-color"], ve = ["x", "fill"], ye = ["x"], be = ["x"], xe = /* @__PURE__ */ I(/* @__PURE__ */ c({
+}, Ae = ["offset", "stop-color"], je = ["x", "fill"], Me = ["x"], Ne = ["x"], Pe = /* @__PURE__ */ B(/* @__PURE__ */ c({
 	__name: "ChoroplethMap",
 	props: {
 		data: {},
@@ -4584,50 +4758,65 @@ var B = ["width", "height"], V = ["x"], ie = [
 		pan: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		tooltipTrigger: {},
+		tooltipFormat: {}
 	},
 	emits: ["stateClick", "stateHover"],
 	setup(o, { emit: s }) {
-		let c = o, u = s, _ = `choropleth-gradient-${v()}`, b = m(null), x = m(null), S = m(null), C = m(0), w = null, T = null, N = null;
-		d(() => {
-			b.value && (C.value = b.value.clientWidth, T = new ResizeObserver((e) => {
+		let c = o, l = s, d = `choropleth-gradient-${b()}`, f = h(null), _ = h(null), y = h(null), S = h(0), C = null, w = null, T = !1, E = typeof window < "u" && "ontouchstart" in window, D = null, O = null;
+		function k() {
+			if (E) return;
+			let e = y.value;
+			e && (e.addEventListener("click", $), e.addEventListener("mouseover", $), e.addEventListener("mousemove", Re), e.addEventListener("mouseout", ze));
+		}
+		function A() {
+			let e = y.value;
+			e && (e.removeEventListener("click", $), e.removeEventListener("mouseover", $), e.removeEventListener("mousemove", Re), e.removeEventListener("mouseout", ze));
+		}
+		p(() => {
+			f.value && (S.value = f.value.clientWidth, D = new ResizeObserver((e) => {
 				let t = e[0];
-				t && (C.value = t.contentRect.width);
-			}), T.observe(b.value)), P();
-		}), f(() => {
-			T?.disconnect(), F();
+				t && (S.value = t.contentRect.width);
+			}), D.observe(f.value)), j(), k();
+		}), ee(() => {
+			D?.disconnect(), M(), A(), Fe();
 		});
-		function P() {
-			if (!x.value || !S.value || !c.zoom && !c.pan) return;
-			let e = O(x.value);
-			N = ee().scaleExtent(c.zoom ? [1, 12] : [1, 1]).on("zoom", (e) => {
-				S.value && S.value.setAttribute("transform", e.transform);
-			}), c.pan || N.filter((e) => e.type === "wheel" || e.type === "dblclick"), e.call(N);
+		function j() {
+			if (!_.value || !y.value || !c.zoom && !c.pan) return;
+			let e = ne(_.value);
+			O = te().scaleExtent(c.zoom ? [1, 12] : [1, 1]).on("start", () => {
+				T = !0, Le();
+			}).on("zoom", (e) => {
+				y.value && y.value.setAttribute("transform", e.transform);
+			}).on("end", () => {
+				T = !1;
+			}), c.pan || O.filter((e) => e.type === "wheel" || e.type === "dblclick"), e.call(O);
 		}
-		function F() {
-			x.value && N && (O(x.value).on(".zoom", null), N = null);
+		function M() {
+			_.value && O && (ne(_.value).on(".zoom", null), O = null);
 		}
-		y(() => [c.zoom, c.pan], () => {
-			F(), P();
+		x(() => [c.zoom, c.pan], () => {
+			M(), A(), j(), k();
 		});
-		let I = t(() => c.width ?? (C.value || 600)), R = t(() => c.width && c.height ? c.height / c.width : .625), z = t(() => I.value * R.value), B = j, V = M, ie = t(() => {
+		let L = t(() => c.width ?? (S.value || 600)), R = t(() => c.width && c.height ? c.height / c.width : .625), z = t(() => L.value * R.value), B = ae, V = I, le = t(() => {
 			let e = V.objects.counties.geometries, t = /* @__PURE__ */ new Map();
 			for (let n of e) {
-				let e = se[String(n.id).padStart(5, "0")];
+				let e = Y[String(n.id).padStart(5, "0")];
 				e && (t.has(e) || t.set(e, []), t.get(e).push(n));
 			}
 			let n = [];
 			for (let [e, r] of t) n.push({
 				type: "Feature",
 				id: e,
-				properties: { name: ce[e] ?? e },
-				geometry: A(V, r)
+				properties: { name: Ce[e] ?? e },
+				geometry: ie(V, r)
 			});
 			return {
 				type: "FeatureCollection",
 				features: n
 			};
-		}), H = t(() => c.geoType === "hsas" ? ie.value : c.geoType === "counties" ? k(V, V.objects.counties) : k(B, B.objects.states)), U = t(() => c.geoType !== "counties" && c.geoType !== "hsas" ? null : te(V, V.objects.states, (e, t) => e !== t)), ae = t(() => E().fitExtent([[0, Pe.value], [I.value, z.value + Pe.value]], H.value)), W = t(() => D(ae.value)), G = t(() => c.geoType === "counties" || c.geoType === "hsas" ? c.strokeWidth * .5 : c.strokeWidth), K = t(() => {
+		}), H = t(() => c.geoType === "hsas" ? le.value : c.geoType === "counties" ? re(V, V.objects.counties) : re(B, B.objects.states)), ue = t(() => c.geoType !== "counties" && c.geoType !== "hsas" ? null : F(V, V.objects.states, (e, t) => e !== t)), de = t(() => N().fitExtent([[0, Ge.value], [L.value, z.value + Ge.value]], H.value)), fe = t(() => P(de.value)), U = t(() => c.geoType === "counties" || c.geoType === "hsas" ? c.strokeWidth * .5 : c.strokeWidth), pe = t(() => {
 			let e = /* @__PURE__ */ new Map();
 			if (!c.data) return e;
 			for (let t of c.data) {
@@ -4636,7 +4825,7 @@ var B = ["width", "height"], V = ["x"], ie = [
 				n?.id != null && e.set(String(n.id), t.value);
 			}
 			return e;
-		}), q = t(() => {
+		}), me = t(() => {
 			if (!c.data || c.data.length === 0) return {
 				min: 0,
 				max: 1
@@ -4653,8 +4842,8 @@ var B = ["width", "height"], V = ["x"], ie = [
 				min: 0,
 				max: 1
 			};
-		}), J = t(() => Array.isArray(c.colorScale) && c.colorScale.length > 0 && "value" in c.colorScale[0]), Y = t(() => Array.isArray(c.colorScale) && !J.value), oe = t(() => Y.value ? "" : c.colorScale?.min ?? "#e5f0fa"), xe = t(() => Y.value ? "" : c.colorScale?.max ?? "#08519c");
-		function X(e) {
+		}), W = t(() => Array.isArray(c.colorScale) && c.colorScale.length > 0 && "value" in c.colorScale[0]), G = t(() => Array.isArray(c.colorScale) && !W.value), he = t(() => G.value ? "" : c.colorScale?.min ?? "#e5f0fa"), ge = t(() => G.value ? "" : c.colorScale?.max ?? "#08519c");
+		function _e(e) {
 			let t = e.replace("#", "");
 			return [
 				parseInt(t.slice(0, 2), 16),
@@ -4662,66 +4851,101 @@ var B = ["width", "height"], V = ["x"], ie = [
 				parseInt(t.slice(4, 6), 16)
 			];
 		}
-		function Z(e) {
-			let [t, n, r] = X(oe.value), [i, a, o] = X(xe.value);
+		function ve(e) {
+			let [t, n, r] = _e(he.value), [i, a, o] = _e(ge.value);
 			return `rgb(${Math.round(t + (i - t) * e)},${Math.round(n + (a - n) * e)},${Math.round(r + (o - r) * e)})`;
 		}
-		function Se(e) {
+		function ye(e) {
 			let t = c.colorScale.slice().sort((e, t) => t.min - e.min);
 			for (let n of t) if (e >= n.min) return n.color;
 			return c.noDataColor;
 		}
-		function Ce(e) {
+		function be(e) {
 			let t = c.colorScale.find((t) => t.value === String(e));
 			return t ? t.color : c.noDataColor;
 		}
-		function we(e) {
-			let t = K.value.get(String(e));
+		function xe(e) {
+			let t = pe.value.get(String(e));
 			if (t == null) return c.noDataColor;
-			if (J.value) return Ce(t);
-			if (Y.value) return Se(t);
-			let { min: n, max: r } = q.value;
-			return Z((t - n) / (r - n));
+			if (W.value) return be(t);
+			if (G.value) return ye(t);
+			let { min: n, max: r } = me.value;
+			return ve((t - n) / (r - n));
 		}
-		function Te(e) {
+		function K(e) {
 			return e.properties?.name ?? String(e.id);
 		}
-		function Q(e) {
-			return K.value.get(String(e.id));
+		function q(e) {
+			return pe.value.get(String(e.id));
 		}
-		function Ee(e) {
-			u("stateClick", {
-				id: String(e.id),
-				name: Te(e),
-				value: Q(e)
-			});
+		let Se = t(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let t of H.value.features) e.set(String(t.id), t);
+			return e;
+		});
+		function J(e) {
+			let t = e;
+			for (; t && !t.dataset?.featId;) t = t.parentElement;
+			if (!t) return null;
+			let n = Se.value.get(t.dataset.featId);
+			return n ? {
+				pathEl: t,
+				feat: n
+			} : null;
 		}
-		function De(e, t) {
-			let n = t.currentTarget;
-			w = n, n.setAttribute("stroke-width", String(G.value + 1)), u("stateHover", {
+		function Pe(e, t, n) {
+			w || (w = document.createElement("div"), w.className = "chart-tooltip-content", w.style.position = "fixed", w.style.transform = "translateY(-50%)", document.body.appendChild(w));
+			let r = K(e), i = q(e), a = {
 				id: String(e.id),
-				name: Te(e),
-				value: Q(e)
-			});
+				name: r,
+				value: i
+			};
+			c.tooltipFormat ? w.innerHTML = c.tooltipFormat(a) : w.textContent = i == null ? r : `${r}: ${i}`, w.style.left = `${t + 16}px`, w.style.top = `${n}px`;
+		}
+		function Fe() {
+			w &&= (w.remove(), null);
+		}
+		function Ie(e, t) {
+			C && C !== e && (C.setAttribute("stroke-width", String(U.value)), C.setAttribute("stroke", c.strokeColor)), C = e, e.parentNode?.appendChild(e), e.setAttribute("stroke-width", String(U.value + 1)), e.setAttribute("stroke", "#555");
+		}
+		function Le() {
+			C && (C.setAttribute("stroke-width", String(U.value)), C.setAttribute("stroke", c.strokeColor), C = null, l("stateHover", null)), Fe();
 		}
-		function Oe() {
-			w &&= (w.setAttribute("stroke-width", String(G.value)), null), u("stateHover", null);
+		function $(e) {
+			if (T) return;
+			let t = e, n = J(t.target);
+			n && (e.type === "click" ? l("stateClick", {
+				id: String(n.feat.id),
+				name: K(n.feat),
+				value: q(n.feat)
+			}) : e.type === "mouseover" && (Ie(n.pathEl, n.feat), c.tooltipTrigger && Pe(n.feat, t.clientX, t.clientY), l("stateHover", {
+				id: String(n.feat.id),
+				name: K(n.feat),
+				value: q(n.feat)
+			})));
 		}
-		function ke() {
+		function Re(e) {
+			T || !w || (w.style.left = `${e.clientX + 16}px`, w.style.top = `${e.clientY}px`);
+		}
+		function ze(e) {
+			let t = e.relatedTarget;
+			t && y.value?.contains(t) || Le();
+		}
+		function Be() {
 			return typeof c.menu == "string" ? c.menu : "choropleth";
 		}
-		let Ae = t(() => c.legend && (J.value || Y.value || c.data)), je = t(() => c.colorScale.slice().sort((e, t) => e.min - t.min)), Me = t(() => c.title ? 24 : 0), Ne = t(() => Ae.value ? 28 : 0), Pe = t(() => Me.value + Ne.value), Fe = t(() => z.value + Pe.value), Ie = t(() => Me.value + 18), Le = t(() => {
+		let Ve = t(() => c.legend && (W.value || G.value || c.data)), He = t(() => c.colorScale.slice().sort((e, t) => e.min - t.min)), Ue = t(() => c.title ? 24 : 0), We = t(() => Ve.value ? 28 : 0), Ge = t(() => Ue.value + We.value), Ke = t(() => z.value + Ge.value), qe = t(() => Ue.value + 18), Je = t(() => {
 			let e = [];
 			for (let t = 0; t <= 10; t++) {
 				let n = t / 10;
 				e.push({
 					offset: `${(n * 100).toFixed(0)}%`,
-					color: Z(n)
+					color: ve(n)
 				});
 			}
 			return e;
-		}), Re = t(() => {
-			let { min: e, max: t } = q.value, n = t - e, r = [];
+		}), Ye = t(() => {
+			let { min: e, max: t } = me.value, n = t - e, r = [];
 			for (let t = 1; t <= 3; t++) {
 				let i = t / 4, a = e + n * i, o = Number.isInteger(a) ? String(a) : a.toFixed(1).replace(/\.0$/, "");
 				r.push({
@@ -4730,120 +4954,118 @@ var B = ["width", "height"], V = ["x"], ie = [
 				});
 			}
 			return r;
-		}), $ = t(() => {
+		}), Xe = t(() => {
 			let e = [];
-			if (J.value) for (let t of c.colorScale) e.push({
+			if (W.value) for (let t of c.colorScale) e.push({
 				key: t.value,
 				color: t.color,
 				label: t.value
 			});
-			else if (Y.value) for (let t of je.value) e.push({
+			else if (G.value) for (let t of He.value) e.push({
 				key: String(t.min),
 				color: t.color,
 				label: t.label ?? String(t.min)
 			});
 			return e;
-		}), ze = t(() => {
+		}), Ze = t(() => {
 			let e = c.legendTitle ? c.legendTitle.length * 8 + 12 : 0;
-			for (let t of $.value) e += 16 + t.label.length * 7 + 12;
-			return e - ($.value.length > 0 ? 12 : 0);
-		}), Be = t(() => {
+			for (let t of Xe.value) e += 16 + t.label.length * 7 + 12;
+			return e - (Xe.value.length > 0 ? 12 : 0);
+		}), Qe = t(() => {
 			let e = c.legendTitle ? c.legendTitle.length * 8 + 12 : 0;
-			return $.value.map((t) => {
+			return Xe.value.map((t) => {
 				let n = e;
 				return e += 16 + t.label.length * 7 + 12, n;
 			});
-		}), Ve = t(() => {
-			if (J.value || Y.value) return (I.value - ze.value) / 2;
+		}), $e = t(() => {
+			if (W.value || G.value) return (L.value - Ze.value) / 2;
 			let e = c.legendTitle ? c.legendTitle.length * 8 + 12 : 0;
-			return (I.value - e - 160) / 2;
-		}), He = t(() => {
-			let e = ke();
+			return (L.value - e - 160) / 2;
+		}), et = t(() => {
+			let e = Be();
 			return [{
 				label: "Save as SVG",
 				action: () => {
-					x.value && ne(x.value, e);
+					_.value && se(_.value, e);
 				}
 			}, {
 				label: "Save as PNG",
 				action: () => {
-					x.value && re(x.value, e);
+					_.value && ce(_.value, e);
 				}
 			}];
 		});
-		return (t, s) => (p(), i("div", {
+		return (t, s) => (m(), i("div", {
 			ref_key: "containerRef",
-			ref: b,
-			class: l(["choropleth-wrapper", { pannable: o.pan }])
-		}, [o.menu ? (p(), n(L, {
+			ref: f,
+			class: u(["choropleth-wrapper", { pannable: o.pan }])
+		}, [o.menu ? (m(), n(oe, {
 			key: 0,
-			items: He.value
-		}, null, 8, ["items"])) : r("", !0), (p(), i("svg", {
+			items: et.value
+		}, null, 8, ["items"])) : r("", !0), (m(), i("svg", {
 			ref_key: "svgRef",
-			ref: x,
-			width: I.value,
-			height: Fe.value
+			ref: _,
+			width: L.value,
+			height: Ke.value
 		}, [
 			a("g", {
 				ref_key: "mapGroupRef",
-				ref: S
-			}, [(p(!0), i(e, null, h(H.value.features, (e) => (p(), i("path", {
+				ref: y
+			}, [(m(!0), i(e, null, g(H.value.features, (e) => (m(), i("path", {
 				key: String(e.id),
-				d: W.value(e) ?? void 0,
-				fill: we(e.id),
+				"data-feat-id": String(e.id),
+				d: fe.value(e) ?? void 0,
+				fill: xe(e.id),
 				stroke: o.strokeColor,
-				"stroke-width": G.value,
-				class: "state-path",
-				onClick: (t) => Ee(e),
-				onMouseenter: (t) => De(e, t),
-				onMouseleave: Oe
-			}, [a("title", null, g(Te(e)) + g(Q(e) == null ? "" : `: ${Q(e)}`), 1)], 40, ue))), 128)), U.value ? (p(), i("path", {
+				"stroke-width": U.value,
+				class: "state-path"
+			}, [o.tooltipTrigger ? r("", !0) : (m(), i("title", we, v(K(e)) + v(q(e) == null ? "" : `: ${q(e)}`), 1))], 8, Z))), 128)), ue.value ? (m(), i("path", {
 				key: 0,
-				d: W.value(U.value) ?? void 0,
+				d: fe.value(ue.value) ?? void 0,
 				fill: "none",
 				stroke: o.strokeColor,
 				"stroke-width": 1,
 				"stroke-linejoin": "round",
 				"pointer-events": "none"
-			}, null, 8, de)) : r("", !0)], 512),
-			Ae.value ? (p(), i("g", {
+			}, null, 8, Q)) : r("", !0)], 512),
+			Ve.value ? (m(), i("g", {
 				key: 0,
 				class: "choropleth-legend",
-				transform: `translate(${Ve.value},${Ie.value})`
-			}, [J.value || Y.value ? (p(), i(e, { key: 0 }, [o.legendTitle ? (p(), i("text", pe, g(o.legendTitle), 1)) : r("", !0), (p(!0), i(e, null, h($.value, (t, n) => (p(), i(e, { key: t.key }, [a("rect", {
-				x: Be.value[n],
+				transform: `translate(${$e.value},${qe.value})`
+			}, [W.value || G.value ? (m(), i(e, { key: 0 }, [o.legendTitle ? (m(), i("text", Ee, v(o.legendTitle), 1)) : r("", !0), (m(!0), i(e, null, g(Xe.value, (t, n) => (m(), i(e, { key: t.key }, [a("rect", {
+				x: Qe.value[n],
 				y: -5,
 				width: "12",
 				height: "12",
 				rx: "3",
 				fill: t.color
-			}, null, 8, me), a("text", {
-				x: Be.value[n] + 16,
+			}, null, 8, De), a("text", {
+				x: Qe.value[n] + 16,
 				y: 5,
 				"font-size": "13",
 				fill: "currentColor"
-			}, g(t.label), 9, he)], 64))), 128))], 64)) : (p(), i(e, { key: 1 }, [
-				o.legendTitle ? (p(), i("text", ge, g(o.legendTitle), 1)) : r("", !0),
+			}, v(t.label), 9, Oe)], 64))), 128))], 64)) : (m(), i(e, { key: 1 }, [
+				o.legendTitle ? (m(), i("text", ke, v(o.legendTitle), 1)) : r("", !0),
 				a("defs", null, [a("linearGradient", {
-					id: _,
+					id: d,
 					x1: "0",
 					x2: "1",
 					y1: "0",
 					y2: "0"
-				}, [(p(!0), i(e, null, h(Le.value, (e) => (p(), i("stop", {
+				}, [(m(!0), i(e, null, g(Je.value, (e) => (m(), i("stop", {
 					key: e.offset,
 					offset: e.offset,
 					"stop-color": e.color
-				}, null, 8, _e))), 128))])]),
+				}, null, 8, Ae))), 128))])]),
 				a("rect", {
 					x: o.legendTitle ? o.legendTitle.length * 8 + 12 : 0,
 					y: -6,
 					width: 160,
 					height: 12,
 					rx: "2",
-					fill: `url(#${_})`
-				}, null, 8, ve),
-				(p(!0), i(e, null, h(Re.value, (e) => (p(), i("text", {
+					fill: `url(#${d})`
+				}, null, 8, je),
+				(m(!0), i(e, null, g(Ye.value, (e) => (m(), i("text", {
 					key: e.value,
 					x: (o.legendTitle ? o.legendTitle.length * 8 + 12 : 0) + e.pct / 100 * 160,
 					y: 20,
@@ -4851,20 +5073,71 @@ var B = ["width", "height"], V = ["x"], ie = [
 					fill: "currentColor",
 					opacity: "0.7",
 					"text-anchor": "middle"
-				}, g(e.value), 9, ye))), 128))
-			], 64))], 8, fe)) : r("", !0),
-			o.title ? (p(), i("text", {
+				}, v(e.value), 9, Me))), 128))
+			], 64))], 8, Te)) : r("", !0),
+			o.title ? (m(), i("text", {
 				key: 1,
-				x: I.value / 2,
+				x: L.value / 2,
 				y: 18,
 				"text-anchor": "middle",
 				"font-size": "14",
 				"font-weight": "600",
 				fill: "currentColor"
-			}, g(o.title), 9, be)) : r("", !0)
-		], 8, le))], 2));
+			}, v(o.title), 9, Ne)) : r("", !0)
+		], 8, X))], 2));
 	}
-}), [["__scopeId", "data-v-64b95aef"]]), X = { class: "TableWrapper" }, Z = { class: "Table" }, Se = /* @__PURE__ */ I(/* @__PURE__ */ c({
+}), [["__scopeId", "data-v-7f5b0832"]]), Fe = /* @__PURE__ */ B(/* @__PURE__ */ c({
+	__name: "ChartTooltip",
+	props: {
+		x: {},
+		y: {},
+		open: { type: Boolean },
+		mode: { default: "hover" },
+		sideOffset: { default: 16 }
+	},
+	emits: ["close"],
+	setup(e) {
+		return (t, o) => e.mode === "hover" && e.open ? (m(), i("div", {
+			key: 0,
+			class: "chart-tooltip-content",
+			style: f({
+				position: "absolute",
+				left: `${e.x + e.sideOffset}px`,
+				top: `${e.y}px`,
+				transform: "translateY(-50%)"
+			})
+		}, [_(t.$slots, "default", {}, void 0, !0)], 4)) : e.mode === "click" ? (m(), n(y(M), {
+			key: 1,
+			open: e.open
+		}, {
+			default: S(() => [s(y(k), { "as-child": "" }, {
+				default: S(() => [a("div", {
+					class: "chart-tooltip-anchor",
+					style: f({
+						left: `${e.x}px`,
+						top: `${e.y}px`
+					})
+				}, null, 4)]),
+				_: 1
+			}), s(y(j), null, {
+				default: S(() => [e.open ? (m(), n(y(A), {
+					key: 0,
+					class: "chart-tooltip-content",
+					side: "right",
+					"side-offset": e.sideOffset,
+					"update-position-strategy": "always",
+					onPointerDownOutside: o[0] ||= (e) => t.$emit("close"),
+					onEscapeKeyDown: o[1] ||= (e) => t.$emit("close")
+				}, {
+					default: S(() => [_(t.$slots, "default", {}, void 0, !0)]),
+					_: 3
+				}, 8, ["side-offset"])) : r("", !0)]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["open"])) : r("", !0);
+	}
+}), [["__scopeId", "data-v-44377f70"]]), Ie = { class: "TableWrapper" }, Le = { class: "Table" }, $ = /* @__PURE__ */ B(/* @__PURE__ */ c({
 	__name: "DataTable",
 	props: {
 		data: {},
@@ -4881,10 +5154,10 @@ var B = ["width", "height"], V = ["x"], ie = [
 			medium: "150px",
 			large: "250px"
 		}, c = o;
-		function d(e) {
+		function l(e) {
 			return c.columnConfig?.[e]?.label ?? e;
 		}
-		function f(e) {
+		function d(e) {
 			let t = c.columnConfig?.[e]?.width;
 			if (t == null) return;
 			let n = typeof t == "number" ? `${t}px` : s[t];
@@ -4893,16 +5166,16 @@ var B = ["width", "height"], V = ["x"], ie = [
 				minWidth: n
 			};
 		}
-		function m(e) {
+		function p(e) {
 			let t = c.columnConfig?.[e]?.align;
 			if (t) return { textAlign: t };
 		}
-		function _(e) {
+		function ee(e) {
 			return typeof e.column == "function";
 		}
-		let v = t(() => {
+		let h = t(() => {
 			let e = c.data;
-			return _(e) ? e.columns.map((t) => ({
+			return ee(e) ? e.columns.map((t) => ({
 				name: t.name,
 				values: e.column(t.name),
 				enumLabels: t.enumLabels
@@ -4910,54 +5183,54 @@ var B = ["width", "height"], V = ["x"], ie = [
 				name: e,
 				values: t
 			}));
-		}), y = t(() => {
-			let e = v.value;
+		}), _ = t(() => {
+			let e = h.value;
 			if (e.length === 0) return 0;
 			let t = 0;
 			for (let n of e) t = Math.max(t, n.values.length);
 			return c.maxRows ? Math.min(t, c.maxRows) : t;
 		});
-		function b(e, t) {
+		function y(e, t) {
 			let n = e.values[t];
 			return n == null ? "" : e.enumLabels && typeof n == "number" ? e.enumLabels[n] ?? String(n) : typeof n == "number" ? Number.isInteger(n) ? n.toString() : n.toFixed(4) : typeof n == "boolean" ? n ? "true" : "false" : String(n);
 		}
-		function x() {
+		function b() {
 			return typeof c.menu == "string" ? c.menu : "data";
 		}
-		function S(e) {
+		function x(e) {
 			return e.includes(",") || e.includes("\"") || e.includes("\n") ? `"${e.replace(/"/g, "\"\"")}"` : e;
 		}
-		function C() {
-			let e = v.value, t = y.value, n = [e.map((e) => S(d(e.name))).join(",")];
+		function S() {
+			let e = h.value, t = _.value, n = [e.map((e) => x(l(e.name))).join(",")];
 			for (let r = 0; r < t; r++) {
-				let t = e.map((e) => S(b(e, r)));
+				let t = e.map((e) => x(y(e, r)));
 				n.push(t.join(","));
 			}
 			return n.join("\n");
 		}
-		let w = t(() => [{
+		let C = t(() => [{
 			label: "Download CSV",
-			action: () => z(C(), x())
+			action: () => le(S(), b())
 		}]);
-		return (t, s) => (p(), i("div", { class: l(["TableOuter", { "has-menu": o.menu }]) }, [o.menu ? (p(), n(L, {
+		return (t, s) => (m(), i("div", { class: u(["TableOuter", { "has-menu": o.menu }]) }, [o.menu ? (m(), n(oe, {
 			key: 0,
-			items: w.value
-		}, null, 8, ["items"])) : r("", !0), a("div", X, [a("table", Z, [
-			a("colgroup", null, [(p(!0), i(e, null, h(v.value, (e) => (p(), i("col", {
+			items: C.value
+		}, null, 8, ["items"])) : r("", !0), a("div", Ie, [a("table", Le, [
+			a("colgroup", null, [(m(!0), i(e, null, g(h.value, (e) => (m(), i("col", {
 				key: e.name,
-				style: u(f(e.name))
+				style: f(d(e.name))
 			}, null, 4))), 128))]),
-			a("thead", null, [a("tr", null, [(p(!0), i(e, null, h(v.value, (e) => (p(), i("th", {
+			a("thead", null, [a("tr", null, [(m(!0), i(e, null, g(h.value, (e) => (m(), i("th", {
 				key: e.name,
-				style: u(m(e.name))
-			}, g(d(e.name)), 5))), 128))])]),
-			a("tbody", null, [(p(!0), i(e, null, h(y.value, (t) => (p(), i("tr", { key: t }, [(p(!0), i(e, null, h(v.value, (e) => (p(), i("td", {
+				style: f(p(e.name))
+			}, v(l(e.name)), 5))), 128))])]),
+			a("tbody", null, [(m(!0), i(e, null, g(_.value, (t) => (m(), i("tr", { key: t }, [(m(!0), i(e, null, g(h.value, (e) => (m(), i("td", {
 				key: e.name,
-				class: l(o.columnConfig?.[e.name]?.cellClass),
-				style: u(m(e.name))
-			}, g(b(e, t - 1)), 7))), 128))]))), 128))])
+				class: u(o.columnConfig?.[e.name]?.cellClass),
+				style: f(p(e.name))
+			}, v(y(e, t - 1)), 7))), 128))]))), 128))])
 		])])], 2));
 	}
 }), [["__scopeId", "data-v-dbfb7c84"]]);
 //#endregion
-export { xe as ChoroplethMap, Se as DataTable, oe as LineChart };
+export { Fe as ChartTooltip, Pe as ChoroplethMap, $ as DataTable, J as LineChart };