@cfasim-ui/charts 0.3.3 → 0.3.4

package/dist/ChoroplethMap/ChoroplethMap.d.ts

@@ -56,6 +56,12 @@ type __VLS_Props = {
         name: string;
         value?: number | string;
     }) => string;
+    /**
+     * Boundary for tooltip flip/clamp. `"none"` always places to the right of
+     * the pointer with no clamping. `"chart"` (default) uses the map
+     * container's bounding box. `"window"` uses the viewport.
+     */
+    tooltipClamp?: "none" | "chart" | "window";
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     stateClick: (state: {
@@ -82,6 +88,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     legend: boolean;
     menu: boolean | string;
+    tooltipClamp: "none" | "chart" | "window";
     geoType: GeoType;
     noDataColor: string;
     strokeColor: string;

package/dist/LineChart/LineChart.d.ts

@@ -64,6 +64,12 @@ type __VLS_Props = {
     tooltipData?: unknown[];
     /** Tooltip activation mode. Default: 'hover' */
     tooltipTrigger?: "hover" | "click";
+    /**
+     * Boundary for tooltip flip/clamp. `"none"` always places to the right of
+     * the pointer with no clamping. `"chart"` (default) uses the chart
+     * container's bounding box. `"window"` uses the viewport.
+     */
+    tooltipClamp?: "none" | "chart" | "window";
     /**
      * Custom CSV content for the Download CSV menu item. Can be a raw CSV
      * string or a function returning one. When omitted, CSV is generated
@@ -123,6 +129,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }>, {
     menu: boolean | string;
     lineOpacity: number;
+    tooltipClamp: "none" | "chart" | "window";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
     svgRef: SVGSVGElement;

package/dist/index.css

@@ -1,2 +1,2 @@
-.chart-menu-trigger-area[data-v-fe2f6904]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-fe2f6904]{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;opacity:0;border-radius:.25em;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.chart-menu-button[data-state=open][data-v-fe2f6904]{opacity:1}.chart-menu-button[data-v-fe2f6904]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.chart-menu-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);border-radius:.25em;min-width:140px;padding:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.chart-menu-item{font-size:var(--font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:.25em;outline:none;align-items:center;padding:.375em .5em;display:flex}.chart-menu-item[data-highlighted]{background:var(--color-primary);color:#fff}.line-chart-wrapper[data-v-24787fb7]{width:100%;position:relative}.line-chart-wrapper[data-v-24787fb7]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-24787fb7]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-24787fb7]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-24787fb7]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-24787fb7]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-ffaf1671]{width:100%;position:relative}.choropleth-wrapper.pannable svg[data-v-ffaf1671]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-ffaf1671]:active{cursor:grabbing}.choropleth-wrapper[data-v-ffaf1671]:hover .chart-menu-button{opacity:1}.state-path[data-v-ffaf1671]{cursor:pointer}.chart-tooltip-anchor[data-v-44377f70]{pointer-events:none;width:1px;height:1px;position:absolute}.chart-tooltip-content{z-index:100;background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);font-size:var(--font-size-sm,.875rem);pointer-events:none;border-radius:.375em;padding:.5em .75em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.TableOuter[data-v-505e2187]{display:inline-block;position:relative}.TableOuter.has-menu[data-v-505e2187]{margin-top:32px}.TableOuter[data-v-505e2187] .chart-menu-trigger-area{top:-32px;right:0}.TableOuter[data-v-505e2187]:hover .chart-menu-button{opacity:1}.TableWrapper[data-v-505e2187]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-505e2187]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border);margin:0;display:table}.Table tr[data-v-505e2187],.Table th[data-v-505e2187],.Table td[data-v-505e2187]{background:0 0;border:none}.Table th[data-v-505e2187],.Table td[data-v-505e2187]{white-space:nowrap;padding:.75em 1.25em}.Table th[data-v-505e2187]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-505e2187]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-505e2187]{border-bottom:none}.data-table-download-link[data-v-505e2187]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}
+.chart-menu-trigger-area[data-v-fe2f6904]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-fe2f6904]{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;opacity:0;border-radius:.25em;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.chart-menu-button[data-state=open][data-v-fe2f6904]{opacity:1}.chart-menu-button[data-v-fe2f6904]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.chart-menu-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);border-radius:.25em;min-width:140px;padding:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.chart-menu-item{font-size:var(--font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:.25em;outline:none;align-items:center;padding:.375em .5em;display:flex}.chart-menu-item[data-highlighted]{background:var(--color-primary);color:#fff}.line-chart-wrapper[data-v-d1434a63]{width:100%;position:relative}.line-chart-wrapper[data-v-d1434a63]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-d1434a63]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-d1434a63]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-d1434a63]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-d1434a63]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-25a20d5b]{width:100%;position:relative}.choropleth-wrapper.pannable svg[data-v-25a20d5b]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-25a20d5b]:active{cursor:grabbing}.choropleth-wrapper[data-v-25a20d5b]:hover .chart-menu-button{opacity:1}.state-path[data-v-25a20d5b]{cursor:pointer}.chart-tooltip-anchor[data-v-44377f70]{pointer-events:none;width:1px;height:1px;position:absolute}.chart-tooltip-content{z-index:100;background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);font-size:var(--font-size-sm,.875rem);pointer-events:none;border-radius:.375em;padding:.5em .75em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.TableOuter[data-v-505e2187]{display:inline-block;position:relative}.TableOuter.has-menu[data-v-505e2187]{margin-top:32px}.TableOuter[data-v-505e2187] .chart-menu-trigger-area{top:-32px;right:0}.TableOuter[data-v-505e2187]:hover .chart-menu-button{opacity:1}.TableWrapper[data-v-505e2187]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-505e2187]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border);margin:0;display:table}.Table tr[data-v-505e2187],.Table th[data-v-505e2187],.Table td[data-v-505e2187]{background:0 0;border:none}.Table th[data-v-505e2187],.Table td[data-v-505e2187]{white-space:nowrap;padding:.75em 1.25em}.Table th[data-v-505e2187]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-505e2187]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-505e2187]{border-bottom:none}.data-table-download-link[data-v-505e2187]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}
 /*$vite$:1*/

package/dist/index.js

@@ -111,67 +111,91 @@ function B(e, t) {
 	z(new Blob([e], { type: "text/csv" }), `${t}.csv`);
 }
 //#endregion
+//#region src/tooltip-position.ts
+var V = 16, H = 8;
+function ue(e, t, n, r, i, a) {
+	if (i === "none") return {
+		left: e + V,
+		top: t
+	};
+	let o = i === "chart" && a ? {
+		left: a.left,
+		right: a.right,
+		top: a.top,
+		bottom: a.bottom
+	} : {
+		left: 0,
+		right: window.innerWidth,
+		top: 0,
+		bottom: window.innerHeight
+	}, s = e + V + n > o.right - H ? e - V - n : e + V, c = r / 2;
+	return {
+		left: s,
+		top: Math.min(Math.max(t, o.top + H + c), o.bottom - H - c)
+	};
+}
+//#endregion
 //#region src/LineChart/LineChart.vue?vue&type=script&setup=true&lang.ts
-var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
+var U = ["width", "height"], de = ["x"], fe = { key: 1 }, W = [
 	"x1",
 	"y1",
 	"x2",
 	"y2",
 	"stroke",
 	"stroke-dasharray"
-], pe = [
+], G = [
 	"cx",
 	"cy",
 	"fill",
 	"fill-opacity",
 	"stroke"
-], H = ["x", "y"], U = [
+], pe = ["x", "y"], me = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], me = [
+], he = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], he = [
+], ge = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], ge = [
+], _e = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], _e = ["x", "y"], ve = ["transform"], ye = ["x", "y"], be = ["x", "y"], W = [
+], ve = ["x", "y"], ye = ["transform"], K = ["x", "y"], q = ["x", "y"], be = [
 	"d",
 	"fill",
 	"fill-opacity"
-], G = [
+], xe = [
 	"d",
 	"stroke",
 	"stroke-width",
 	"stroke-opacity",
 	"stroke-dasharray"
-], xe = [
+], Se = [
 	"cx",
 	"cy",
 	"r",
 	"fill",
 	"fill-opacity",
 	"stroke"
-], Se = [
+], Ce = [
 	"d",
 	"fill",
 	"fill-opacity"
-], Ce = [
+], we = [
 	"d",
 	"stroke",
 	"stroke-width",
 	"stroke-dasharray"
-], we = [
+], Te = [
 	"x1",
 	"y1",
 	"x2",
@@ -179,7 +203,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 	"stroke",
 	"stroke-width",
 	"stroke-dasharray"
-], Te = [
+], J = [
 	"x1",
 	"y1",
 	"x2",
@@ -192,39 +216,39 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 	"y1",
 	"x2",
 	"y2"
-], K = [
+], De = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], De = [
+], Oe = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], Oe = [
+], ke = [
 	"cx",
 	"cy",
 	"fill"
-], ke = [
+], Ae = [
 	"x",
 	"y",
 	"width",
 	"height"
-], Ae = [
+], je = [
 	"cx",
 	"cy",
 	"fill",
 	"fill-opacity",
 	"stroke"
-], je = [
+], Me = [
 	"x",
 	"y",
 	"fill"
-], Me = ["x", "y"], Ne = { class: "line-chart-tooltip" }, q = {
+], Y = ["x", "y"], Ne = { class: "line-chart-tooltip" }, Pe = {
 	key: 0,
 	class: "line-chart-tooltip-label"
-}, Pe = ["href", "download"], J = 20, Y = 36, Fe = 12, X = 7, Ie = 16, Le = 50, Re = /* @__PURE__ */ R(/* @__PURE__ */ c({
+}, Fe = ["href", "download"], X = 20, Z = 36, Ie = 12, Le = 7, Re = 16, ze = 50, Be = /* @__PURE__ */ R(/* @__PURE__ */ c({
 	__name: "LineChart",
 	props: {
 		data: {},
@@ -249,6 +273,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 		yGrid: { type: Boolean },
 		tooltipData: {},
 		tooltipTrigger: {},
+		tooltipClamp: { default: "chart" },
 		csv: {},
 		filename: {},
 		downloadLink: { type: [Boolean, String] }
@@ -267,7 +292,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			C?.disconnect(), T && clearTimeout(T);
 		});
 		let E = t(() => u.width ?? (S.value || 400)), D = t(() => u.height ?? 200), O = t(() => M.value.some((e) => e.legend) || u.areaSections?.some((e) => e.legend === "inline" && (e.label || e.description))), k = t(() => ({
-			top: (u.title ? 30 : 10) + (O.value ? J : 0),
+			top: (u.title ? 30 : 10) + (O.value ? X : 0),
 			right: 10,
 			bottom: u.xLabel ? 46 : 30,
 			left: u.yLabel ? 66 : 50
@@ -352,7 +377,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			let t = P.value, n = A.value / (t - 1 || 1), r = [];
 			for (let t of e) {
 				if (!t.label && !t.description || t.legend === "inline" || t.legend === !1) continue;
-				let e = k.value.left + (t.startIndex + t.endIndex) / 2 * n, i = t.label ?? "", a = t.description ?? "", o = Math.max(i.length, a.length) * X, s = t.color ?? (t.seriesIndex == null ? "#999" : M.value[t.seriesIndex]?.color ?? "currentColor");
+				let e = k.value.left + (t.startIndex + t.endIndex) / 2 * n, i = t.label ?? "", a = t.description ?? "", o = Math.max(i.length, a.length) * Le, s = t.color ?? (t.seriesIndex == null ? "#999" : M.value[t.seriesIndex]?.color ?? "currentColor");
 				r.push({
 					cx: e,
 					labelText: i,
@@ -367,7 +392,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			let i = [];
 			for (let e of r) {
 				let t = e.cx - e.textWidth / 2, n = 0;
-				for (; n < i.length && !(t >= i[n] + Ie);) n++;
+				for (; n < i.length && !(t >= i[n] + Re);) n++;
 				e.row = n;
 				let r = e.cx + e.textWidth / 2;
 				i[n] = Math.max(i[n] ?? -Infinity, r);
@@ -377,7 +402,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 				extraHeight: 0
 			} : {
 				labels: r,
-				extraHeight: (Math.max(...r.map((e) => e.row)) + 1) * Y + Fe
+				extraHeight: (Math.max(...r.map((e) => e.row)) + 1) * Z + Ie
 			};
 		}), I = t(() => {
 			let e = [];
@@ -399,7 +424,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 				});
 			}
 			return e;
-		}), oe = t(() => D.value + ae.value.extraHeight), L = t(() => k.value.top + j.value + k.value.bottom + Fe);
+		}), oe = t(() => D.value + ae.value.extraHeight), L = t(() => k.value.top + j.value + k.value.bottom + Ie);
 		function R(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;
@@ -407,23 +432,23 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 		function z(e) {
 			return Math.round(e) + .5;
 		}
-		let Re = new Intl.NumberFormat();
-		function Z(e) {
-			return Math.abs(e) >= 1e3 ? Re.format(e) : Number.isInteger(e) ? e.toString() : e.toFixed(1);
+		let V = new Intl.NumberFormat();
+		function H(e) {
+			return Math.abs(e) >= 1e3 ? V.format(e) : Number.isInteger(e) ? e.toString() : e.toFixed(1);
 		}
-		let ze = t(() => {
+		let Be = t(() => {
 			let { min: e, max: t } = F.value;
 			if (e === t) return [{
-				value: Z(e),
+				value: H(e),
 				y: z(k.value.top + j.value / 2)
 			}];
 			let n = Math.max(3, Math.floor(j.value / 50)), r = R(t - e, n), i = Math.ceil(e / r) * r, a = [];
 			for (let n = i; n <= t; n += r) a.push({
-				value: Z(n),
+				value: H(n),
 				y: z(k.value.top + j.value - (n - e) / F.value.range * j.value)
 			});
 			return a;
-		}), Be = t(() => {
+		}), Ve = t(() => {
 			let e = P.value;
 			if (e <= 1) return [];
 			let t = u.xLabels;
@@ -439,19 +464,19 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			for (let t = 0; t <= e - 1; t += i) {
 				let r = Math.round(t);
 				a.push({
-					value: Z(r + n),
+					value: H(r + n),
 					x: z(k.value.left + r / (e - 1) * A.value)
 				});
 			}
 			return a;
 		});
-		function Ve() {
+		function He() {
 			return u.filename ? u.filename : typeof u.menu == "string" ? u.menu : "chart";
 		}
-		function He() {
+		function Ue() {
 			return x.value;
 		}
-		function Ue() {
+		function We() {
 			if (typeof u.csv == "function") return u.csv();
 			if (typeof u.csv == "string") return u.csv;
 			let e = M.value;
@@ -464,16 +489,16 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			}
 			return n.join("\n");
 		}
-		let Q = h(null), We = h(!1), Ge = h(null), Ke = t(() => !!u.tooltipData || !!u.tooltipTrigger), qe = t(() => {
+		let Q = h(null), Ge = h(!1), Ke = h(null), qe = t(() => !!u.tooltipData || !!u.tooltipTrigger), Je = t(() => {
 			if (Q.value === null) return 0;
 			let e = P.value, t = A.value / (e - 1 || 1);
 			return k.value.left + Q.value * t;
-		}), Je = t(() => {
+		}), Ye = t(() => {
 			let e = Q.value;
 			if (e === null) return [];
 			let { min: t, range: n } = F.value, r = j.value / n, i = k.value.top + j.value;
 			return M.value.filter((t) => e < t.data.length && isFinite(t.data[e])).map((n) => ({
-				x: qe.value,
+				x: Je.value,
 				y: i - (n.data[e] - t) * r,
 				color: n.color ?? "currentColor"
 			}));
@@ -490,10 +515,10 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 				data: u.tooltipData?.[e] ?? null
 			};
 		});
-		function Ye(e) {
+		function Xe(e) {
 			return "touches" in e ? e.touches[0] ?? null : e;
 		}
-		function Xe(e) {
+		function Ze(e) {
 			let t = b.value?.getBoundingClientRect();
 			if (!t) return null;
 			let n = P.value;
@@ -501,57 +526,57 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			let r = e - t.left, i = A.value / (n - 1 || 1), a = (r - k.value.left) / i;
 			return Math.round(Math.max(0, Math.min(n - 1, a)));
 		}
-		function Ze(e, t) {
-			let n = Ge.value;
+		function Qe(e, t) {
+			let n = Ke.value;
 			if (!n) return;
-			let r = b.value.getBoundingClientRect(), i = We.value ? Le : 0, a = e - r.left, o = Math.max(0, t - r.top - i);
-			n.style.left = `${a + 16}px`, n.style.top = `${o}px`;
+			let r = b.value.getBoundingClientRect(), { left: i, top: a } = ue(e, t - (Ge.value ? ze : 0), n.offsetWidth, n.offsetHeight, u.tooltipClamp, r);
+			n.style.left = `${i - r.left}px`, n.style.top = `${a - r.top}px`;
 		}
-		function Qe(e) {
-			let t = Ye(e);
+		function $e(e) {
+			let t = Xe(e);
 			if (!t) return;
-			let n = Xe(t.clientX);
-			n !== null && (Q.value = n, Ze(t.clientX, t.clientY), y("hover", { index: n }));
+			let n = Ze(t.clientX);
+			n !== null && (Q.value = n, Qe(t.clientX, t.clientY), y("hover", { index: n }));
 		}
-		function $e(e) {
-			Qe(e);
+		function et(e) {
+			$e(e);
 		}
-		function et() {
+		function tt() {
 			u.tooltipTrigger !== "click" && (Q.value = null, y("hover", null));
 		}
-		function tt(e) {
+		function nt(e) {
 			if (u.tooltipTrigger !== "click") return;
-			let t = Ye(e);
+			let t = Xe(e);
 			if (!t) return;
-			let n = Xe(t.clientX);
+			let n = Ze(t.clientX);
 			n !== null && (Q.value = Q.value === n ? null : n, y("hover", Q.value === null ? null : { index: n }));
 		}
-		function nt(e) {
-			We.value = !0, Qe(e);
-		}
 		function rt(e) {
-			Qe(e);
+			Ge.value = !0, $e(e);
+		}
+		function it(e) {
+			$e(e);
 		}
-		function it() {
-			We.value = !1, Q.value = null, y("hover", null);
+		function at() {
+			Ge.value = !1, Q.value = null, y("hover", null);
 		}
-		let at = t(() => u.downloadLink ? typeof u.downloadLink == "string" ? u.downloadLink : "Download data (CSV)" : null), ot = t(() => u.downloadLink ? `data:text/csv;charset=utf-8,${encodeURIComponent(Ue())}` : null), st = t(() => {
-			let e = Ve(), t = [{
+		let ot = t(() => u.downloadLink ? typeof u.downloadLink == "string" ? u.downloadLink : "Download data (CSV)" : null), st = t(() => u.downloadLink ? `data:text/csv;charset=utf-8,${encodeURIComponent(We())}` : null), ct = t(() => {
+			let e = He(), t = [{
 				label: "Save as SVG",
 				action: () => {
-					let t = He();
+					let t = Ue();
 					t && ce(t, e);
 				}
 			}, {
 				label: "Save as PNG",
 				action: () => {
-					let t = He();
+					let t = Ue();
 					t && le(t, e);
 				}
 			}];
 			return u.downloadLink || t.push({
 				label: "Download CSV",
-				action: () => B(Ue(), e)
+				action: () => B(We(), e)
 			}), t;
 		});
 		return (t, c) => (m(), i("div", {
@@ -561,7 +586,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 		}, [
 			s.menu ? (m(), n(se, {
 				key: 0,
-				items: st.value
+				items: ct.value
 			}, null, 8, ["items"])) : r("", !0),
 			(m(), i("svg", {
 				ref_key: "svgRef",
@@ -578,30 +603,30 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					"font-weight": "600",
 					fill: "currentColor"
 				}, v(s.title), 9, de)) : r("", !0),
-				I.value.length > 0 ? (m(), i("g", V, [(m(!0), i(e, null, g(I.value, (t, n) => (m(), i(e, { key: "ileg" + n }, [t.type === "series" ? (m(), i("line", {
+				I.value.length > 0 ? (m(), i("g", fe, [(m(!0), i(e, null, g(I.value, (t, n) => (m(), i(e, { key: "ileg" + n }, [t.type === "series" ? (m(), i("line", {
 					key: 0,
 					x1: k.value.left + n * 120,
-					y1: k.value.top - J / 2,
+					y1: k.value.top - X / 2,
 					x2: k.value.left + n * 120 + 12,
-					y2: k.value.top - J / 2,
+					y2: k.value.top - X / 2,
 					stroke: t.color,
 					"stroke-width": "2",
 					"stroke-dasharray": t.dashed ? "4 2" : void 0
-				}, null, 8, fe)) : (m(), i("circle", {
+				}, null, 8, W)) : (m(), i("circle", {
 					key: 1,
 					cx: k.value.left + n * 120 + 4,
-					cy: k.value.top - J / 2,
+					cy: k.value.top - X / 2,
 					r: "4",
 					fill: t.color,
 					"fill-opacity": t.fillOpacity,
 					stroke: t.color,
 					"stroke-width": "1.5"
-				}, null, 8, pe)), a("text", {
+				}, null, 8, G)), a("text", {
 					x: k.value.left + n * 120 + 18,
-					y: k.value.top - J / 2 + 4,
+					y: k.value.top - X / 2 + 4,
 					"font-size": "11",
 					fill: "currentColor"
-				}, v(t.label), 9, H)], 64))), 128))])) : r("", !0),
+				}, v(t.label), 9, pe)], 64))), 128))])) : r("", !0),
 				a("line", {
 					x1: z(k.value.left),
 					y1: z(k.value.top),
@@ -609,7 +634,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					y2: z(k.value.top + j.value),
 					stroke: "currentColor",
 					"stroke-opacity": "0.3"
-				}, null, 8, U),
+				}, null, 8, me),
 				a("line", {
 					x1: z(k.value.left),
 					y1: z(k.value.top + j.value),
@@ -617,8 +642,8 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					y2: z(k.value.top + j.value),
 					stroke: "currentColor",
 					"stroke-opacity": "0.3"
-				}, null, 8, me),
-				s.yGrid ? (m(!0), i(e, { key: 2 }, g(ze.value, (e, t) => (m(), i("line", {
+				}, null, 8, he),
+				s.yGrid ? (m(!0), i(e, { key: 2 }, g(Be.value, (e, t) => (m(), i("line", {
 					key: "yg" + t,
 					x1: k.value.left,
 					y1: e.y,
@@ -626,8 +651,8 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					y2: e.y,
 					stroke: "currentColor",
 					"stroke-opacity": "0.1"
-				}, null, 8, he))), 128)) : r("", !0),
-				s.xGrid ? (m(!0), i(e, { key: 3 }, g(Be.value, (e, t) => (m(), i("line", {
+				}, null, 8, ge))), 128)) : r("", !0),
+				s.xGrid ? (m(!0), i(e, { key: 3 }, g(Ve.value, (e, t) => (m(), i("line", {
 					key: "xg" + t,
 					x1: e.x,
 					y1: k.value.top,
@@ -635,8 +660,8 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					y2: k.value.top + j.value,
 					stroke: "currentColor",
 					"stroke-opacity": "0.1"
-				}, null, 8, ge))), 128)) : r("", !0),
-				(m(!0), i(e, null, g(ze.value, (e, t) => (m(), i("text", {
+				}, null, 8, _e))), 128)) : r("", !0),
+				(m(!0), i(e, null, g(Be.value, (e, t) => (m(), i("text", {
 					key: "y" + t,
 					x: k.value.left - 6,
 					y: e.y,
@@ -645,7 +670,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					"font-size": "10",
 					fill: "currentColor",
 					"fill-opacity": "0.6"
-				}, v(e.value), 9, _e))), 128)),
+				}, v(e.value), 9, ve))), 128)),
 				s.yLabel ? (m(), i("text", {
 					key: 4,
 					x: 0,
@@ -654,8 +679,8 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					"text-anchor": "middle",
 					"font-size": "13",
 					fill: "currentColor"
-				}, v(s.yLabel), 9, ve)) : r("", !0),
-				(m(!0), i(e, null, g(Be.value, (e, t) => (m(), i("text", {
+				}, v(s.yLabel), 9, ye)) : r("", !0),
+				(m(!0), i(e, null, g(Ve.value, (e, t) => (m(), i("text", {
 					key: "x" + t,
 					x: e.x,
 					y: k.value.top + j.value + 16,
@@ -663,7 +688,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					"font-size": "10",
 					fill: "currentColor",
 					"fill-opacity": "0.6"
-				}, v(e.value), 9, ye))), 128)),
+				}, v(e.value), 9, K))), 128)),
 				s.xLabel ? (m(), i("text", {
 					key: 5,
 					x: k.value.left + A.value / 2,
@@ -671,14 +696,14 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					"text-anchor": "middle",
 					"font-size": "13",
 					fill: "currentColor"
-				}, v(s.xLabel), 9, be)) : r("", !0),
+				}, v(s.xLabel), 9, q)) : r("", !0),
 				(m(!0), i(e, null, g(N.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, W))), 128)),
+				}, null, 8, be))), 128)),
 				(m(!0), i(e, null, g(M.value, (t, n) => (m(), i(e, { key: n }, [t.line === !1 ? r("", !0) : (m(), i("path", {
 					key: 0,
 					d: te(t.data),
@@ -687,7 +712,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					"stroke-width": t.strokeWidth ?? 1.5,
 					"stroke-opacity": t.lineOpacity ?? t.opacity ?? s.lineOpacity,
 					"stroke-dasharray": t.dashed ? "6 3" : void 0
-				}, null, 8, G)), t.dots ? (m(!0), i(e, { key: 1 }, g(ne(t.data), (e, n) => (m(), i("circle", {
+				}, null, 8, xe)), 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,
@@ -695,14 +720,14 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					fill: t.dotFill ?? t.color ?? "currentColor",
 					"fill-opacity": t.dotOpacity ?? t.opacity ?? s.lineOpacity,
 					stroke: t.dotStroke ?? "none"
-				}, null, 8, xe))), 128)) : r("", !0)], 64))), 128)),
+				}, null, 8, Se))), 128)) : r("", !0)], 64))), 128)),
 				(m(!0), i(e, null, g(s.areaSections ?? [], (t, n) => (m(), i(e, { key: "areasec" + n }, [
 					a("path", {
 						d: ie(t),
 						fill: t.color ?? (t.seriesIndex == null ? "#999" : M.value[t.seriesIndex]?.color ?? "currentColor"),
 						"fill-opacity": t.opacity ?? .15,
 						stroke: "none"
-					}, null, 8, Se),
+					}, null, 8, Ce),
 					t.seriesIndex == null ? r("", !0) : (m(), i("path", {
 						key: 0,
 						d: ie(t, !1),
@@ -710,7 +735,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 						stroke: t.color ?? M.value[t.seriesIndex]?.color ?? "currentColor",
 						"stroke-width": t.strokeWidth ?? 2,
 						"stroke-dasharray": t.dashed ? "6 3" : void 0
-					}, null, 8, Ce)),
+					}, null, 8, we)),
 					t.seriesIndex == null ? (m(), i(e, { key: 1 }, [a("line", {
 						x1: z(k.value.left + t.startIndex * (A.value / (P.value - 1 || 1))),
 						y1: k.value.top,
@@ -719,7 +744,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 						stroke: t.color ?? "#999",
 						"stroke-width": t.strokeWidth ?? 2,
 						"stroke-dasharray": t.dashed ? "6 3" : void 0
-					}, null, 8, we), a("line", {
+					}, null, 8, Te), a("line", {
 						x1: z(k.value.left + t.endIndex * (A.value / (P.value - 1 || 1))),
 						y1: k.value.top,
 						x2: z(k.value.left + t.endIndex * (A.value / (P.value - 1 || 1))),
@@ -727,7 +752,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 						stroke: t.color ?? "#999",
 						"stroke-width": t.strokeWidth ?? 2,
 						"stroke-dasharray": t.dashed ? "6 3" : void 0
-					}, null, 8, Te)], 64)) : r("", !0),
+					}, null, 8, J)], 64)) : r("", !0),
 					a("line", {
 						x1: z(k.value.left + t.startIndex * (A.value / (P.value - 1 || 1))),
 						y1: k.value.top + j.value - 4,
@@ -743,20 +768,20 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 						y2: k.value.top + j.value + 4,
 						stroke: "currentColor",
 						"stroke-opacity": "0.4"
-					}, null, 8, K)
+					}, null, 8, De)
 				], 64))), 128)),
-				Ke.value && Q.value !== null ? (m(), i("line", {
+				qe.value && Q.value !== null ? (m(), i("line", {
 					key: 6,
-					x1: z(qe.value),
+					x1: z(Je.value),
 					y1: k.value.top,
-					x2: z(qe.value),
+					x2: z(Je.value),
 					y2: k.value.top + j.value,
 					stroke: "currentColor",
 					"stroke-opacity": "0.3",
 					"stroke-dasharray": "4 2",
 					"pointer-events": "none"
-				}, null, 8, De)) : r("", !0),
-				(m(!0), i(e, null, g(Je.value, (e, t) => (m(), i("circle", {
+				}, null, 8, Oe)) : r("", !0),
+				(m(!0), i(e, null, g(Ye.value, (e, t) => (m(), i("circle", {
 					key: "hd" + t,
 					cx: e.x,
 					cy: e.y,
@@ -765,8 +790,8 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					stroke: "var(--color-bg-0, #fff)",
 					"stroke-width": "2",
 					"pointer-events": "none"
-				}, null, 8, Oe))), 128)),
-				Ke.value ? (m(), i("rect", {
+				}, null, 8, ke))), 128)),
+				qe.value ? (m(), i("rect", {
 					key: 7,
 					x: k.value.left,
 					y: k.value.top,
@@ -777,66 +802,66 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 						cursor: "crosshair",
 						"touch-action": "none"
 					},
-					onMousemove: $e,
-					onMouseleave: et,
-					onClick: tt,
-					onTouchstart: w(nt, ["prevent"]),
-					onTouchmove: w(rt, ["prevent"]),
-					onTouchend: it
-				}, null, 40, ke)) : r("", !0),
+					onMousemove: et,
+					onMouseleave: tt,
+					onClick: nt,
+					onTouchstart: w(rt, ["prevent"]),
+					onTouchmove: w(it, ["prevent"]),
+					onTouchend: at
+				}, null, 40, Ae)) : r("", !0),
 				(m(!0), i(e, null, g(ae.value.labels, (e, t) => (m(), i("g", { key: "seclab" + t }, [
 					a("circle", {
 						cx: e.cx - e.textWidth / 2 - 2,
-						cy: L.value + e.row * Y + 4,
+						cy: L.value + e.row * Z + 4,
 						r: "4",
 						fill: e.color,
 						"fill-opacity": e.fillOpacity,
 						stroke: e.color,
 						"stroke-width": "1.5"
-					}, null, 8, Ae),
+					}, null, 8, je),
 					e.labelText ? (m(), i("text", {
 						key: 0,
 						x: e.cx - e.textWidth / 2 + 8,
-						y: L.value + e.row * Y + 8,
+						y: L.value + e.row * Z + 8,
 						"font-size": "11",
 						"font-weight": "600",
 						fill: e.color
-					}, v(e.labelText), 9, je)) : r("", !0),
+					}, v(e.labelText), 9, Me)) : r("", !0),
 					e.descText ? (m(), i("text", {
 						key: 1,
 						x: e.cx - e.textWidth / 2 + 8,
-						y: L.value + e.row * Y + 22,
+						y: L.value + e.row * Z + 22,
 						"font-size": "11",
 						fill: "currentColor",
 						"fill-opacity": "0.6"
-					}, v(e.descText), 9, Me)) : r("", !0)
+					}, v(e.descText), 9, Y)) : r("", !0)
 				]))), 128))
-			], 8, ue)),
-			Ke.value && Q.value !== null && $.value ? (m(), i("div", {
+			], 8, U)),
+			qe.value && Q.value !== null && $.value ? (m(), i("div", {
 				key: 1,
 				ref_key: "tooltipRef",
-				ref: Ge,
+				ref: Ke,
 				class: "chart-tooltip-content",
 				style: {
 					position: "absolute",
 					transform: "translateY(-50%)"
 				}
-			}, [_(t.$slots, "tooltip", d(l($.value)), () => [a("div", Ne, [$.value.xLabel ? (m(), i("div", q, v($.value.xLabel), 1)) : r("", !0), (m(!0), i(e, null, g($.value.values, (e) => (m(), i("div", {
+			}, [_(t.$slots, "tooltip", d(l($.value)), () => [a("div", Ne, [$.value.xLabel ? (m(), i("div", Pe, v($.value.xLabel), 1)) : r("", !0), (m(!0), i(e, null, g($.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) ? Z(e.value) : "—"), 1)]))), 128))])], !0)], 512)) : r("", !0),
-			at.value ? (m(), i("a", {
+			}, null, 4), o(" " + v(isFinite(e.value) ? H(e.value) : "—"), 1)]))), 128))])], !0)], 512)) : r("", !0),
+			ot.value ? (m(), i("a", {
 				key: 2,
 				class: "line-chart-download-link",
-				href: ot.value,
-				download: `${Ve()}.csv`
-			}, v(at.value), 9, Pe)) : r("", !0)
+				href: st.value,
+				download: `${He()}.csv`
+			}, v(ot.value), 9, Fe)) : r("", !0)
 		], 512));
 	}
-}), [["__scopeId", "data-v-24787fb7"]]), Z = {
+}), [["__scopeId", "data-v-d1434a63"]]), Ve = {
 	"01013": "010259",
 	"01015": "010177",
 	"01029": "010177",
@@ -3997,7 +4022,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 	51019: "510014",
 	"02158": "020820",
 	46102: "460957"
-}, ze = {
+}, He = {
 	"010259": "Butler, AL",
 	"010177": "Calhoun (Anniston), AL - Cleburne, AL",
 	"010172": "Chambers, AL - Randolph, AL",
@@ -4947,25 +4972,25 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 	560775: "Teton, WY - Lincoln, WY",
 	560792: "Uinta, WY",
 	560804: "Weston, WY"
-}, Be = ["width", "height"], Ve = [
+}, Ue = ["width", "height"], We = [
 	"data-feat-id",
 	"d",
 	"fill",
 	"stroke",
 	"stroke-width"
-], He = { key: 0 }, Ue = ["d", "stroke"], Q = ["transform"], We = {
+], Q = { key: 0 }, Ge = ["d", "stroke"], Ke = ["transform"], qe = {
 	key: 0,
 	y: 5,
 	"font-size": "13",
 	"font-weight": "600",
 	fill: "currentColor"
-}, Ge = ["x", "fill"], Ke = ["x"], qe = {
+}, Je = ["x", "fill"], Ye = ["x"], $ = {
 	key: 0,
 	y: 5,
 	"font-size": "13",
 	"font-weight": "600",
 	fill: "currentColor"
-}, Je = ["offset", "stop-color"], $ = ["x", "fill"], Ye = ["x"], Xe = ["x"], Ze = /* @__PURE__ */ R(/* @__PURE__ */ c({
+}, Xe = ["offset", "stop-color"], Ze = ["x", "fill"], Qe = ["x"], $e = ["x"], et = /* @__PURE__ */ R(/* @__PURE__ */ c({
 	__name: "ChoroplethMap",
 	props: {
 		topology: {},
@@ -4996,7 +5021,8 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			default: !1
 		},
 		tooltipTrigger: {},
-		tooltipFormat: {}
+		tooltipFormat: {},
+		tooltipClamp: { default: "chart" }
 	},
 	emits: ["stateClick", "stateHover"],
 	setup(o, { emit: s }) {
@@ -5004,11 +5030,11 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 		function A() {
 			if (D) return;
 			let e = b.value;
-			e && (e.addEventListener("click", K), e.addEventListener("mouseover", K), e.addEventListener("mousemove", De), e.addEventListener("mouseout", Oe));
+			e && (e.addEventListener("click", J), e.addEventListener("mouseover", J), e.addEventListener("mousemove", Ee), e.addEventListener("mouseout", De));
 		}
 		function j() {
 			let e = b.value;
-			e && (e.removeEventListener("click", K), e.removeEventListener("mouseover", K), e.removeEventListener("mousemove", De), e.removeEventListener("mouseout", Oe));
+			e && (e.removeEventListener("click", J), e.removeEventListener("mouseover", J), e.removeEventListener("mousemove", Ee), e.removeEventListener("mouseout", De));
 		}
 		p(() => {
 			f.value && (C.value = f.value.clientWidth, O = new ResizeObserver((e) => {
@@ -5016,13 +5042,13 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 				t && (C.value = t.contentRect.width);
 			}), O.observe(f.value)), M(), A();
 		}), ee(() => {
-			O?.disconnect(), N(), j(), we();
+			O?.disconnect(), N(), j(), Ce();
 		});
 		function M() {
 			if (!_.value || !b.value || !c.zoom && !c.pan) return;
 			let e = ne(_.value);
 			k = te().scaleExtent(c.zoom ? [1, 12] : [1, 1]).on("start", () => {
-				E = !0, Ee();
+				E = !0, Te();
 			}).on("zoom", (e) => {
 				b.value && b.value.setAttribute("transform", e.transform);
 			}).on("end", () => {
@@ -5038,14 +5064,14 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 		let I = t(() => c.width ?? (C.value || 600)), oe = t(() => c.width && c.height ? c.height / c.width : .625), L = t(() => I.value * oe.value), R = t(() => {
 			let e = y(c.topology), t = e.objects.counties.geometries, n = /* @__PURE__ */ new Map();
 			for (let e of t) {
-				let t = Z[String(e.id).padStart(5, "0")];
+				let t = Ve[String(e.id).padStart(5, "0")];
 				t && (n.has(t) || n.set(t, []), n.get(t).push(e));
 			}
 			let r = [];
 			for (let [t, i] of n) r.push({
 				type: "Feature",
 				id: t,
-				properties: { name: ze[t] ?? t },
+				properties: { name: He[t] ?? t },
 				geometry: ie(e, i)
 			});
 			return {
@@ -5064,7 +5090,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			if (c.geoType !== "counties" && c.geoType !== "hsas") return null;
 			let e = y(c.topology);
 			return ae(e, e.objects.states, (e, t) => e !== t);
-		}), ue = t(() => P().fitExtent([[0, q.value], [I.value, L.value + q.value]], z.value)), de = t(() => F(ue.value)), V = t(() => c.geoType === "counties" || c.geoType === "hsas" ? c.strokeWidth * .5 : c.strokeWidth), fe = t(() => {
+		}), V = t(() => P().fitExtent([[0, Y.value], [I.value, L.value + Y.value]], z.value)), H = t(() => F(V.value)), U = t(() => c.geoType === "counties" || c.geoType === "hsas" ? c.strokeWidth * .5 : c.strokeWidth), de = t(() => {
 			let e = /* @__PURE__ */ new Map();
 			if (!c.data) return e;
 			for (let t of c.data) {
@@ -5073,7 +5099,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 				n?.id != null && e.set(String(n.id), t.value);
 			}
 			return e;
-		}), pe = t(() => {
+		}), fe = t(() => {
 			if (!c.data || c.data.length === 0) return {
 				min: 0,
 				max: 1
@@ -5090,8 +5116,8 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 				min: 0,
 				max: 1
 			};
-		}), H = t(() => Array.isArray(c.colorScale) && c.colorScale.length > 0 && "value" in c.colorScale[0]), U = t(() => Array.isArray(c.colorScale) && !H.value), me = t(() => U.value ? "" : c.colorScale?.min ?? "#e5f0fa"), he = t(() => U.value ? "" : c.colorScale?.max ?? "#08519c");
-		function ge(e) {
+		}), W = t(() => Array.isArray(c.colorScale) && c.colorScale.length > 0 && "value" in c.colorScale[0]), G = t(() => Array.isArray(c.colorScale) && !W.value), pe = t(() => G.value ? "" : c.colorScale?.min ?? "#e5f0fa"), me = t(() => G.value ? "" : c.colorScale?.max ?? "#08519c");
+		function he(e) {
 			let t = e.replace("#", "");
 			return [
 				parseInt(t.slice(0, 2), 16),
@@ -5099,101 +5125,103 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 				parseInt(t.slice(4, 6), 16)
 			];
 		}
-		function _e(e) {
-			let [t, n, r] = ge(me.value), [i, a, o] = ge(he.value);
+		function ge(e) {
+			let [t, n, r] = he(pe.value), [i, a, o] = he(me.value);
 			return `rgb(${Math.round(t + (i - t) * e)},${Math.round(n + (a - n) * e)},${Math.round(r + (o - r) * e)})`;
 		}
-		function ve(e) {
+		function _e(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 ye(e) {
+		function ve(e) {
 			let t = c.colorScale.find((t) => t.value === String(e));
 			return t ? t.color : c.noDataColor;
 		}
-		function be(e) {
-			let t = fe.value.get(String(e));
+		function ye(e) {
+			let t = de.value.get(String(e));
 			if (t == null) return c.noDataColor;
-			if (H.value) return ye(t);
-			if (U.value) return ve(t);
-			let { min: n, max: r } = pe.value;
-			return _e((t - n) / (r - n));
+			if (W.value) return ve(t);
+			if (G.value) return _e(t);
+			let { min: n, max: r } = fe.value;
+			return ge((t - n) / (r - n));
 		}
-		function W(e) {
+		function K(e) {
 			return e.properties?.name ?? String(e.id);
 		}
-		function G(e) {
-			return fe.value.get(String(e.id));
+		function q(e) {
+			return de.value.get(String(e.id));
 		}
-		let xe = t(() => {
+		let be = t(() => {
 			let e = /* @__PURE__ */ new Map();
 			for (let t of z.value.features) e.set(String(t.id), t);
 			return e;
 		});
-		function Se(e) {
+		function xe(e) {
 			let t = e;
 			for (; t && !t.dataset?.featId;) t = t.parentElement;
 			if (!t) return null;
-			let n = xe.value.get(t.dataset.featId);
+			let n = be.value.get(t.dataset.featId);
 			return n ? {
 				pathEl: t,
 				feat: n
 			} : null;
 		}
-		function Ce(e, t, n) {
+		function Se(e, t, n) {
 			T || (T = document.createElement("div"), T.className = "chart-tooltip-content", T.style.position = "fixed", T.style.transform = "translateY(-50%)", document.body.appendChild(T));
-			let r = W(e), i = G(e), a = {
+			let r = K(e), i = q(e), a = {
 				id: String(e.id),
 				name: r,
 				value: i
 			};
-			c.tooltipFormat ? T.innerHTML = c.tooltipFormat(a) : T.textContent = i == null ? r : `${r}: ${i}`, T.style.left = `${t + 16}px`, T.style.top = `${n}px`;
+			c.tooltipFormat ? T.innerHTML = c.tooltipFormat(a) : T.textContent = i == null ? r : `${r}: ${i}`;
+			let o = f.value?.getBoundingClientRect(), { left: s, top: l } = ue(t, n, T.offsetWidth, T.offsetHeight, c.tooltipClamp, o);
+			T.style.left = `${s}px`, T.style.top = `${l}px`;
 		}
-		function we() {
+		function Ce() {
 			T &&= (T.remove(), null);
 		}
-		function Te(e, t) {
-			w && w !== e && (w.setAttribute("stroke-width", String(V.value)), w.setAttribute("stroke", c.strokeColor)), w = e, e.parentNode?.appendChild(e), e.setAttribute("stroke-width", String(V.value + 1)), e.setAttribute("stroke", "#555");
+		function we(e, t) {
+			w && w !== e && (w.setAttribute("stroke-width", String(U.value)), w.setAttribute("stroke", c.strokeColor)), w = e, e.parentNode?.appendChild(e), e.setAttribute("stroke-width", String(U.value + 1)), e.setAttribute("stroke", "#555");
 		}
-		function Ee() {
-			w && (w.setAttribute("stroke-width", String(V.value)), w.setAttribute("stroke", c.strokeColor), w = null, l("stateHover", null)), we();
+		function Te() {
+			w && (w.setAttribute("stroke-width", String(U.value)), w.setAttribute("stroke", c.strokeColor), w = null, l("stateHover", null)), Ce();
 		}
-		function K(e) {
+		function J(e) {
 			if (E) return;
-			let t = e, n = Se(t.target);
+			let t = e, n = xe(t.target);
 			n && (e.type === "click" ? l("stateClick", {
 				id: String(n.feat.id),
-				name: W(n.feat),
-				value: G(n.feat)
-			}) : e.type === "mouseover" && (Te(n.pathEl, n.feat), c.tooltipTrigger && Ce(n.feat, t.clientX, t.clientY), l("stateHover", {
+				name: K(n.feat),
+				value: q(n.feat)
+			}) : e.type === "mouseover" && (we(n.pathEl, n.feat), c.tooltipTrigger && Se(n.feat, t.clientX, t.clientY), l("stateHover", {
 				id: String(n.feat.id),
-				name: W(n.feat),
-				value: G(n.feat)
+				name: K(n.feat),
+				value: q(n.feat)
 			})));
 		}
-		function De(e) {
+		function Ee(e) {
 			E || !T || (T.style.left = `${e.clientX + 16}px`, T.style.top = `${e.clientY}px`);
 		}
-		function Oe(e) {
+		function De(e) {
 			let t = e.relatedTarget;
-			t && b.value?.contains(t) || Ee();
+			t && b.value?.contains(t) || Te();
 		}
-		function ke() {
+		function Oe() {
 			return typeof c.menu == "string" ? c.menu : "choropleth";
 		}
-		let Ae = t(() => c.legend && (H.value || U.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), q = t(() => Me.value + Ne.value), Pe = t(() => L.value + q.value), J = t(() => Me.value + 18), Y = t(() => {
+		let ke = t(() => c.legend && (W.value || G.value || c.data)), Ae = t(() => c.colorScale.slice().sort((e, t) => e.min - t.min)), je = t(() => c.title ? 24 : 0), Me = t(() => ke.value ? 28 : 0), Y = t(() => je.value + Me.value), Ne = t(() => L.value + Y.value), Pe = t(() => je.value + 18), Fe = t(() => {
 			let e = [];
 			for (let t = 0; t <= 10; t++) {
 				let n = t / 10;
 				e.push({
 					offset: `${(n * 100).toFixed(0)}%`,
-					color: _e(n)
+					color: ge(n)
 				});
 			}
 			return e;
-		}), Fe = t(() => {
-			let { min: e, max: t } = pe.value, n = t - e, r = [];
+		}), X = t(() => {
+			let { min: e, max: t } = fe.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({
@@ -5202,14 +5230,14 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 				});
 			}
 			return r;
-		}), X = t(() => {
+		}), Z = t(() => {
 			let e = [];
-			if (H.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 (U.value) for (let t of je.value) e.push({
+			else if (G.value) for (let t of Ae.value) e.push({
 				key: String(t.min),
 				color: t.color,
 				label: t.label ?? String(t.min)
@@ -5217,20 +5245,20 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			return e;
 		}), Ie = t(() => {
 			let e = c.legendTitle ? c.legendTitle.length * 8 + 12 : 0;
-			for (let t of X.value) e += 16 + t.label.length * 7 + 12;
-			return e - (X.value.length > 0 ? 12 : 0);
+			for (let t of Z.value) e += 16 + t.label.length * 7 + 12;
+			return e - (Z.value.length > 0 ? 12 : 0);
 		}), Le = t(() => {
 			let e = c.legendTitle ? c.legendTitle.length * 8 + 12 : 0;
-			return X.value.map((t) => {
+			return Z.value.map((t) => {
 				let n = e;
 				return e += 16 + t.label.length * 7 + 12, n;
 			});
 		}), Re = t(() => {
-			if (H.value || U.value) return (I.value - Ie.value) / 2;
+			if (W.value || G.value) return (I.value - Ie.value) / 2;
 			let e = c.legendTitle ? c.legendTitle.length * 8 + 12 : 0;
 			return (I.value - e - 160) / 2;
-		}), Ze = t(() => {
-			let e = ke();
+		}), ze = t(() => {
+			let e = Oe();
 			return [{
 				label: "Save as SVG",
 				action: () => {
@@ -5249,12 +5277,12 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			class: u(["choropleth-wrapper", { pannable: o.pan }])
 		}, [o.menu ? (m(), n(se, {
 			key: 0,
-			items: Ze.value
+			items: ze.value
 		}, null, 8, ["items"])) : r("", !0), (m(), i("svg", {
 			ref_key: "svgRef",
 			ref: _,
 			width: I.value,
-			height: Pe.value
+			height: Ne.value
 		}, [
 			a("g", {
 				ref_key: "mapGroupRef",
@@ -5262,49 +5290,49 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			}, [(m(!0), i(e, null, g(z.value.features, (e) => (m(), i("path", {
 				key: String(e.id),
 				"data-feat-id": String(e.id),
-				d: de.value(e) ?? void 0,
-				fill: be(e.id),
+				d: H.value(e) ?? void 0,
+				fill: ye(e.id),
 				stroke: o.strokeColor,
-				"stroke-width": V.value,
+				"stroke-width": U.value,
 				class: "state-path"
-			}, [o.tooltipTrigger ? r("", !0) : (m(), i("title", He, v(W(e)) + v(G(e) == null ? "" : `: ${G(e)}`), 1))], 8, Ve))), 128)), B.value ? (m(), i("path", {
+			}, [o.tooltipTrigger ? r("", !0) : (m(), i("title", Q, v(K(e)) + v(q(e) == null ? "" : `: ${q(e)}`), 1))], 8, We))), 128)), B.value ? (m(), i("path", {
 				key: 0,
-				d: de.value(B.value) ?? void 0,
+				d: H.value(B.value) ?? void 0,
 				fill: "none",
 				stroke: o.strokeColor,
 				"stroke-width": 1,
 				"stroke-linejoin": "round",
 				"pointer-events": "none"
-			}, null, 8, Ue)) : r("", !0)], 512),
-			Ae.value ? (m(), i("g", {
+			}, null, 8, Ge)) : r("", !0)], 512),
+			ke.value ? (m(), i("g", {
 				key: 0,
 				class: "choropleth-legend",
-				transform: `translate(${Re.value},${J.value})`
-			}, [H.value || U.value ? (m(), i(e, { key: 0 }, [o.legendTitle ? (m(), i("text", We, v(o.legendTitle), 1)) : r("", !0), (m(!0), i(e, null, g(X.value, (t, n) => (m(), i(e, { key: t.key }, [a("rect", {
+				transform: `translate(${Re.value},${Pe.value})`
+			}, [W.value || G.value ? (m(), i(e, { key: 0 }, [o.legendTitle ? (m(), i("text", qe, v(o.legendTitle), 1)) : r("", !0), (m(!0), i(e, null, g(Z.value, (t, n) => (m(), i(e, { key: t.key }, [a("rect", {
 				x: Le.value[n],
 				y: -5,
 				width: "12",
 				height: "12",
 				rx: "3",
 				fill: t.color
-			}, null, 8, Ge), a("text", {
+			}, null, 8, Je), a("text", {
 				x: Le.value[n] + 16,
 				y: 5,
 				"font-size": "13",
 				fill: "currentColor"
-			}, v(t.label), 9, Ke)], 64))), 128))], 64)) : (m(), i(e, { key: 1 }, [
-				o.legendTitle ? (m(), i("text", qe, v(o.legendTitle), 1)) : r("", !0),
+			}, v(t.label), 9, Ye)], 64))), 128))], 64)) : (m(), i(e, { key: 1 }, [
+				o.legendTitle ? (m(), i("text", $, v(o.legendTitle), 1)) : r("", !0),
 				a("defs", null, [a("linearGradient", {
 					id: d,
 					x1: "0",
 					x2: "1",
 					y1: "0",
 					y2: "0"
-				}, [(m(!0), i(e, null, g(Y.value, (e) => (m(), i("stop", {
+				}, [(m(!0), i(e, null, g(Fe.value, (e) => (m(), i("stop", {
 					key: e.offset,
 					offset: e.offset,
 					"stop-color": e.color
-				}, null, 8, Je))), 128))])]),
+				}, null, 8, Xe))), 128))])]),
 				a("rect", {
 					x: o.legendTitle ? o.legendTitle.length * 8 + 12 : 0,
 					y: -6,
@@ -5312,8 +5340,8 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					height: 12,
 					rx: "2",
 					fill: `url(#${d})`
-				}, null, 8, $),
-				(m(!0), i(e, null, g(Fe.value, (e) => (m(), i("text", {
+				}, null, 8, Ze),
+				(m(!0), i(e, null, g(X.value, (e) => (m(), i("text", {
 					key: e.value,
 					x: (o.legendTitle ? o.legendTitle.length * 8 + 12 : 0) + e.pct / 100 * 160,
 					y: 20,
@@ -5321,8 +5349,8 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 					fill: "currentColor",
 					opacity: "0.7",
 					"text-anchor": "middle"
-				}, v(e.value), 9, Ye))), 128))
-			], 64))], 8, Q)) : r("", !0),
+				}, v(e.value), 9, Qe))), 128))
+			], 64))], 8, Ke)) : r("", !0),
 			o.title ? (m(), i("text", {
 				key: 1,
 				x: I.value / 2,
@@ -5331,10 +5359,10 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 				"font-size": "14",
 				"font-weight": "600",
 				fill: "currentColor"
-			}, v(o.title), 9, Xe)) : r("", !0)
-		], 8, Be))], 2));
+			}, v(o.title), 9, $e)) : r("", !0)
+		], 8, Ue))], 2));
 	}
-}), [["__scopeId", "data-v-ffaf1671"]]), Qe = /* @__PURE__ */ R(/* @__PURE__ */ c({
+}), [["__scopeId", "data-v-25a20d5b"]]), tt = /* @__PURE__ */ R(/* @__PURE__ */ c({
 	__name: "ChartTooltip",
 	props: {
 		x: {},
@@ -5385,7 +5413,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 			_: 3
 		}, 8, ["open"])) : r("", !0);
 	}
-}), [["__scopeId", "data-v-44377f70"]]), $e = { class: "TableWrapper" }, et = { class: "Table" }, tt = ["href", "download"], nt = /* @__PURE__ */ R(/* @__PURE__ */ c({
+}), [["__scopeId", "data-v-44377f70"]]), nt = { class: "TableWrapper" }, rt = { class: "Table" }, it = ["href", "download"], at = /* @__PURE__ */ R(/* @__PURE__ */ c({
 	__name: "DataTable",
 	props: {
 		data: {},
@@ -5470,7 +5498,7 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 				key: 0,
 				items: C.value
 			}, null, 8, ["items"])) : r("", !0),
-			a("div", $e, [a("table", et, [
+			a("div", nt, [a("table", rt, [
 				a("colgroup", null, [(m(!0), i(e, null, g(h.value, (e) => (m(), i("col", {
 					key: e.name,
 					style: f(d(e.name))
@@ -5490,9 +5518,9 @@ var ue = ["width", "height"], de = ["x"], V = { key: 1 }, fe = [
 				class: "data-table-download-link",
 				href: T.value,
 				download: `${b()}.csv`
-			}, v(w.value), 9, tt)) : r("", !0)
+			}, v(w.value), 9, it)) : r("", !0)
 		], 2));
 	}
 }), [["__scopeId", "data-v-505e2187"]]);
 //#endregion
-export { Qe as ChartTooltip, Ze as ChoroplethMap, nt as DataTable, Re as LineChart };
+export { tt as ChartTooltip, et as ChoroplethMap, at as DataTable, Be as LineChart };

package/dist/tooltip-position.d.ts

@@ -0,0 +1,13 @@
+export type TooltipClamp = "none" | "chart" | "window";
+/**
+ * Computes a tooltip position in client coordinates, flipping to the opposite
+ * side of the pointer and clamping vertically when the preferred placement
+ * would overflow the clamp boundary.
+ *
+ * The tooltip is assumed to be anchored with `transform: translateY(-50%)`,
+ * so `top` is the vertical center.
+ */
+export declare function placeTooltip(clientX: number, centerY: number, tipW: number, tipH: number, clamp: TooltipClamp, chartRect?: DOMRect): {
+    left: number;
+    top: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/charts",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "Chart visualization components for cfasim-ui",
   "license": "Apache-2.0",
@@ -33,7 +33,7 @@
     "d3-zoom": "^3.0.0",
     "reka-ui": "^2.9.2",
     "topojson-client": "^3.1.0",
-    "@cfasim-ui/shared": "0.3.3"
+    "@cfasim-ui/shared": "0.3.4"
   },
   "peerDependencies": {
     "vue": "^3.5.0"