@cfasim-ui/charts 0.2.2 → 0.3.0

package/dist/ChoroplethMap/ChoroplethMap.d.ts

@@ -1,3 +1,4 @@
+import { Topology } from 'topojson-specification';
 export type GeoType = "states" | "counties" | "hsas";
 export interface StateData {
     /** FIPS code (e.g. "06" for California, "04015" for a county) or name */
@@ -24,6 +25,10 @@ export interface CategoricalStop {
     color: string;
 }
 type __VLS_Props = {
+    /** TopoJSON topology object (e.g. from us-atlas/states-10m.json or us-atlas/counties-10m.json).
+     * Must contain a "states" object for geoType="states", or both "states" and "counties" objects
+     * for geoType="counties" or geoType="hsas". */
+    topology: Topology;
     data?: StateData[];
     /** Geographic type: "states" (default), "counties", or "hsas" (Health Service Areas) */
     geoType?: GeoType;

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-4ea55781]{width:100%;position:relative}.line-chart-wrapper[data-v-4ea55781]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-4ea55781]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-4ea55781]{align-items:center;gap:.375em;display:flex}.line-chart-tooltip-swatch[data-v-4ea55781]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-7f5b0832]{width:100%;position:relative}.choropleth-wrapper.pannable svg[data-v-7f5b0832]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-7f5b0832]:active{cursor:grabbing}.choropleth-wrapper[data-v-7f5b0832]:hover .chart-menu-button{opacity:1}.state-path[data-v-7f5b0832]{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-dbfb7c84]{display:inline-block;position:relative}.TableOuter.has-menu[data-v-dbfb7c84]{padding-top:32px}.TableOuter[data-v-dbfb7c84]:hover .chart-menu-button{opacity:1}.TableWrapper[data-v-dbfb7c84]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-dbfb7c84]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border)}.Table tr[data-v-dbfb7c84],.Table th[data-v-dbfb7c84],.Table td[data-v-dbfb7c84]{background:0 0;border:none}.Table th[data-v-dbfb7c84],.Table td[data-v-dbfb7c84]{white-space:nowrap;padding:.75em 1.25em}.Table th[data-v-dbfb7c84]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-dbfb7c84]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-dbfb7c84]{border-bottom:none}
+.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-4ea55781]{width:100%;position:relative}.line-chart-wrapper[data-v-4ea55781]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-4ea55781]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-4ea55781]{align-items:center;gap:.375em;display:flex}.line-chart-tooltip-swatch[data-v-4ea55781]{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-dbfb7c84]{display:inline-block;position:relative}.TableOuter.has-menu[data-v-dbfb7c84]{padding-top:32px}.TableOuter[data-v-dbfb7c84]:hover .chart-menu-button{opacity:1}.TableWrapper[data-v-dbfb7c84]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-dbfb7c84]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border)}.Table tr[data-v-dbfb7c84],.Table th[data-v-dbfb7c84],.Table td[data-v-dbfb7c84]{background:0 0;border:none}.Table th[data-v-dbfb7c84],.Table td[data-v-dbfb7c84]{white-space:nowrap;padding:.75em 1.25em}.Table th[data-v-dbfb7c84]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-dbfb7c84]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-dbfb7c84]{border-bottom:none}
 /*$vite$:1*/

package/dist/index.js

@@ -1,11 +1,9 @@
-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";
+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, toRaw as y, unref as b, useId as x, watch as S, withCtx as C, withModifiers as w } from "vue";
+import { DropdownMenuContent as T, DropdownMenuItem as E, DropdownMenuPortal as D, DropdownMenuRoot as O, DropdownMenuTrigger as k, PopoverAnchor as A, PopoverContent as j, PopoverPortal as M, PopoverRoot as N } from "reka-ui";
+import { geoAlbersUsa as P, geoPath as te } from "d3-geo";
+import { zoom as ne } from "d3-zoom";
+import { select as re } from "d3-selection";
+import { feature as F, merge as I, mesh as ie } from "topojson-client";
 //#region src/ChartMenu/ChartMenu.vue?vue&type=script&setup=true&lang.ts
 var L = { class: "chart-menu-trigger-area" }, R = ["aria-label"], z = /* @__PURE__ */ c({
 	__name: "ChartMenu",
@@ -26,15 +24,15 @@ var L = { class: "chart-menu-trigger-area" }, R = ["aria-label"], z = /* @__PURE
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round",
 			"aria-hidden": "true"
-		}, [a("path", { d: "M7 1v8M3 6l4 4 4-4M2 13h10" })], -1)]], 8, R)) : (m(), n(y(D), {
+		}, [a("path", { d: "M7 1v8M3 6l4 4 4-4M2 13h10" })], -1)]], 8, R)) : (m(), n(b(O), {
 			key: 1,
 			modal: !1
 		}, {
-			default: S(() => [s(y(O), {
+			default: C(() => [s(b(k), {
 				class: "chart-menu-button",
 				"aria-label": "Chart options"
 			}, {
-				default: S(() => [...c[2] ||= [a("svg", {
+				default: C(() => [...c[2] ||= [a("svg", {
 					width: "16",
 					height: "16",
 					viewBox: "0 0 16 16",
@@ -58,18 +56,18 @@ var L = { class: "chart-menu-trigger-area" }, R = ["aria-label"], z = /* @__PURE
 					})
 				], -1)]]),
 				_: 1
-			}), s(y(E), null, {
-				default: S(() => [s(y(w), {
+			}), s(b(D), null, {
+				default: C(() => [s(b(T), {
 					class: "chart-menu-content",
 					"side-offset": 4,
 					align: "end"
 				}, {
-					default: S(() => [(m(!0), i(e, null, g(t.items, (e) => (m(), n(y(T), {
+					default: C(() => [(m(!0), i(e, null, g(t.items, (e) => (m(), n(b(E), {
 						key: e.label,
 						class: "chart-menu-item",
 						onSelect: e.action
 					}, {
-						default: S(() => [o(v(e.label), 1)]),
+						default: C(() => [o(v(e.label), 1)]),
 						_: 2
 					}, 1032, ["onSelect"]))), 128))]),
 					_: 1
@@ -83,20 +81,20 @@ var L = { class: "chart-menu-trigger-area" }, R = ["aria-label"], z = /* @__PURE
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, oe = /* @__PURE__ */ B(z, [["__scopeId", "data-v-fe2f6904"]]);
+}, ae = /* @__PURE__ */ B(z, [["__scopeId", "data-v-fe2f6904"]]);
 //#endregion
 //#region src/ChartMenu/download.ts
 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 se(e, t) {
+function oe(e, t) {
 	let n = e.cloneNode(!0);
 	n.setAttribute("xmlns", "http://www.w3.org/2000/svg");
 	let r = new XMLSerializer().serializeToString(n);
 	V(new Blob([r], { type: "image/svg+xml" }), `${t}.svg`);
 }
-function ce(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), 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;
@@ -109,66 +107,66 @@ function ce(e, t) {
 		}), URL.revokeObjectURL(a);
 	}, o.src = a;
 }
-function le(e, t) {
+function H(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 H = ["width", "height"], ue = ["x"], de = [
+var ce = ["width", "height"], le = ["x"], U = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], fe = [
+], ue = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], U = [
+], de = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], pe = [
+], W = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], me = ["x", "y"], W = ["transform"], G = ["x", "y"], he = ["x", "y"], ge = [
+], G = ["x", "y"], fe = ["transform"], pe = ["x", "y"], me = ["x", "y"], he = [
 	"d",
 	"fill",
 	"fill-opacity"
-], _e = [
+], ge = [
 	"d",
 	"stroke",
 	"stroke-width",
 	"stroke-opacity",
 	"stroke-dasharray"
-], ve = [
+], _e = [
 	"cx",
 	"cy",
 	"r",
 	"fill",
 	"fill-opacity",
 	"stroke"
-], ye = [
+], ve = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], be = [
+], K = [
 	"cx",
 	"cy",
 	"fill"
-], xe = [
+], q = [
 	"x",
 	"y",
 	"width",
 	"height"
-], K = { class: "line-chart-tooltip" }, q = {
+], ye = { class: "line-chart-tooltip" }, be = {
 	key: 0,
 	class: "line-chart-tooltip-label"
-}, Se = 50, J = /* @__PURE__ */ B(/* @__PURE__ */ c({
+}, xe = 50, J = /* @__PURE__ */ B(/* @__PURE__ */ c({
 	__name: "LineChart",
 	props: {
 		data: {},
@@ -195,16 +193,16 @@ var H = ["width", "height"], ue = ["x"], de = [
 	},
 	emits: ["hover"],
 	setup(s, { emit: c }) {
-		let u = s, y = c, b = h(null), x = h(null), S = h(0), w = null, T = null;
+		let u = s, y = c, b = h(null), x = h(null), S = h(0), C = null, T = null;
 		p(() => {
-			b.value && (S.value = b.value.clientWidth, w = new ResizeObserver((e) => {
+			b.value && (S.value = b.value.clientWidth, C = new ResizeObserver((e) => {
 				let t = e[0];
 				t && (u.debounce ? (T && clearTimeout(T), T = setTimeout(() => {
 					S.value = t.contentRect.width;
 				}, u.debounce)) : S.value = t.contentRect.width);
-			}), w.observe(b.value));
+			}), C.observe(b.value));
 		}), ee(() => {
-			w?.disconnect(), T && clearTimeout(T);
+			C?.disconnect(), T && clearTimeout(T);
 		});
 		let E = t(() => u.width ?? (S.value || 400)), D = t(() => u.height ?? 200), O = t(() => ({
 			top: u.title ? 30 : 10,
@@ -269,30 +267,30 @@ var H = ["width", "height"], ue = ["x"], de = [
 			}
 			return p;
 		}
-		function ie(e, t) {
+		function F(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 F(e) {
+		function I(e) {
 			return Math.round(e) + .5;
 		}
-		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 ie = new Intl.NumberFormat();
+		function L(e) {
+			return Math.abs(e) >= 1e3 ? ie.format(e) : Number.isInteger(e) ? e.toString() : e.toFixed(1);
 		}
-		let L = t(() => {
+		let R = t(() => {
 			let { min: e, max: t } = P.value;
 			if (e === t) return [{
-				value: I(e),
-				y: F(O.value.top + A.value / 2)
+				value: L(e),
+				y: I(O.value.top + A.value / 2)
 			}];
-			let n = Math.max(3, Math.floor(A.value / 50)), r = ie(t - e, n), i = Math.ceil(e / r) * r, a = [];
+			let n = Math.max(3, Math.floor(A.value / 50)), r = F(t - e, n), i = Math.ceil(e / r) * r, a = [];
 			for (let n = i; n <= t; n += r) a.push({
-				value: I(n),
-				y: F(O.value.top + A.value - (n - e) / P.value.range * A.value)
+				value: L(n),
+				y: I(O.value.top + A.value - (n - e) / P.value.range * A.value)
 			});
 			return a;
-		}), R = t(() => {
+		}), z = t(() => {
 			let e = N.value;
 			if (e <= 1) return [];
 			let t = u.xLabels;
@@ -300,27 +298,27 @@ var H = ["width", "height"], ue = ["x"], de = [
 				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: F(O.value.left + n / (e - 1) * k.value)
+					x: I(O.value.left + n / (e - 1) * k.value)
 				});
 				return i;
 			}
-			let n = u.xMin ?? 0, r = Math.max(3, Math.floor(k.value / 80)), i = ie(e - 1, r), a = [];
+			let n = u.xMin ?? 0, r = Math.max(3, Math.floor(k.value / 80)), i = F(e - 1, r), a = [];
 			for (let t = 0; t <= e - 1; t += i) {
 				let r = Math.round(t);
 				a.push({
-					value: I(r + n),
-					x: F(O.value.left + r / (e - 1) * k.value)
+					value: L(r + n),
+					x: I(O.value.left + r / (e - 1) * k.value)
 				});
 			}
 			return a;
 		});
-		function z() {
+		function B() {
 			return typeof u.menu == "string" ? u.menu : "chart";
 		}
-		function B() {
+		function V() {
 			return x.value;
 		}
-		function V() {
+		function J() {
 			let e = j.value;
 			if (e.length === 0) return "";
 			let t = N.value, n = [(e.length === 1 ? ["index", "value"] : ["index", ...e.map((e, t) => `series_${t}`)]).join(",")];
@@ -331,21 +329,21 @@ var H = ["width", "height"], ue = ["x"], de = [
 			}
 			return n.join("\n");
 		}
-		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 Y = h(null), X = h(!1), Se = h(null), Z = t(() => !!u.tooltipData || !!u.tooltipTrigger), Ce = t(() => {
+			if (Y.value === null) return 0;
 			let e = N.value, t = k.value / (e - 1 || 1);
-			return O.value.left + J.value * t;
+			return O.value.left + Y.value * t;
 		}), we = t(() => {
-			let e = J.value;
+			let e = Y.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,
+				x: Ce.value,
 				y: i - (n.data[e] - t) * r,
 				color: n.color ?? "currentColor"
 			}));
 		}), Q = t(() => {
-			let e = J.value;
+			let e = Y.value;
 			return e === null ? null : {
 				index: e,
 				xLabel: u.xLabels?.[e],
@@ -369,59 +367,59 @@ var H = ["width", "height"], ue = ["x"], de = [
 			return Math.round(Math.max(0, Math.min(n - 1, a)));
 		}
 		function De(e, t) {
-			let n = Ce.value;
+			let n = Se.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);
+			let r = b.value.getBoundingClientRect(), i = X.value ? xe : 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 }));
+			n !== null && (Y.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));
+			u.tooltipTrigger !== "click" && (Y.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 }));
+			n !== null && (Y.value = Y.value === n ? null : n, y("hover", Y.value === null ? null : { index: n }));
 		}
 		function Me(e) {
-			Y.value = !0, Oe(e);
+			X.value = !0, Oe(e);
 		}
 		function Ne(e) {
 			Oe(e);
 		}
 		function Pe() {
-			Y.value = !1, J.value = null, y("hover", null);
+			X.value = !1, Y.value = null, y("hover", null);
 		}
-		let Fe = t(() => {
-			let e = z();
+		let $ = t(() => {
+			let e = B();
 			return [
 				{
 					label: "Save as SVG",
 					action: () => {
-						let t = B();
-						t && se(t, e);
+						let t = V();
+						t && oe(t, e);
 					}
 				},
 				{
 					label: "Save as PNG",
 					action: () => {
-						let t = B();
-						t && ce(t, e);
+						let t = V();
+						t && se(t, e);
 					}
 				},
 				{
 					label: "Download CSV",
-					action: () => le(V(), e)
+					action: () => H(J(), e)
 				}
 			];
 		});
@@ -430,9 +428,9 @@ var H = ["width", "height"], ue = ["x"], de = [
 			ref: b,
 			class: "line-chart-wrapper"
 		}, [
-			s.menu ? (m(), n(oe, {
+			s.menu ? (m(), n(ae, {
 				key: 0,
-				items: Fe.value
+				items: $.value
 			}, null, 8, ["items"])) : r("", !0),
 			(m(), i("svg", {
 				ref_key: "svgRef",
@@ -448,24 +446,24 @@ var H = ["width", "height"], ue = ["x"], de = [
 					"font-size": "14",
 					"font-weight": "600",
 					fill: "currentColor"
-				}, v(s.title), 9, ue)) : r("", !0),
+				}, v(s.title), 9, le)) : 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),
+					x1: I(O.value.left),
+					y1: I(O.value.top),
+					x2: I(O.value.left),
+					y2: I(O.value.top + A.value),
 					stroke: "currentColor",
 					"stroke-opacity": "0.3"
-				}, null, 8, de),
+				}, null, 8, U),
 				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),
+					x1: I(O.value.left),
+					y1: I(O.value.top + A.value),
+					x2: I(O.value.left + k.value),
+					y2: I(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", {
+				}, null, 8, ue),
+				s.yGrid ? (m(!0), i(e, { key: 1 }, g(R.value, (e, t) => (m(), i("line", {
 					key: "yg" + t,
 					x1: O.value.left,
 					y1: e.y,
@@ -473,8 +471,8 @@ var H = ["width", "height"], ue = ["x"], de = [
 					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", {
+				}, null, 8, de))), 128)) : r("", !0),
+				s.xGrid ? (m(!0), i(e, { key: 2 }, g(z.value, (e, t) => (m(), i("line", {
 					key: "xg" + t,
 					x1: e.x,
 					y1: O.value.top,
@@ -482,8 +480,8 @@ var H = ["width", "height"], ue = ["x"], de = [
 					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", {
+				}, null, 8, W))), 128)) : r("", !0),
+				(m(!0), i(e, null, g(R.value, (e, t) => (m(), i("text", {
 					key: "y" + t,
 					x: O.value.left - 6,
 					y: e.y,
@@ -492,7 +490,7 @@ var H = ["width", "height"], ue = ["x"], de = [
 					"font-size": "10",
 					fill: "currentColor",
 					"fill-opacity": "0.6"
-				}, v(e.value), 9, me))), 128)),
+				}, v(e.value), 9, G))), 128)),
 				s.yLabel ? (m(), i("text", {
 					key: 3,
 					x: 0,
@@ -501,8 +499,8 @@ var H = ["width", "height"], ue = ["x"], de = [
 					"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", {
+				}, v(s.yLabel), 9, fe)) : r("", !0),
+				(m(!0), i(e, null, g(z.value, (e, t) => (m(), i("text", {
 					key: "x" + t,
 					x: e.x,
 					y: O.value.top + A.value + 16,
@@ -510,7 +508,7 @@ var H = ["width", "height"], ue = ["x"], de = [
 					"font-size": "10",
 					fill: "currentColor",
 					"fill-opacity": "0.6"
-				}, v(e.value), 9, G))), 128)),
+				}, v(e.value), 9, pe))), 128)),
 				s.xLabel ? (m(), i("text", {
 					key: 4,
 					x: O.value.left + k.value / 2,
@@ -518,14 +516,14 @@ var H = ["width", "height"], ue = ["x"], de = [
 					"text-anchor": "middle",
 					"font-size": "13",
 					fill: "currentColor"
-				}, v(s.xLabel), 9, he)) : r("", !0),
+				}, v(s.xLabel), 9, me)) : 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)),
+				}, null, 8, he))), 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),
@@ -534,7 +532,7 @@ var H = ["width", "height"], ue = ["x"], de = [
 					"stroke-width": t.strokeWidth ?? 1.5,
 					"stroke-opacity": t.lineOpacity ?? 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", {
+				}, null, 8, ge)), 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,
@@ -542,18 +540,18 @@ var H = ["width", "height"], ue = ["x"], de = [
 					fill: t.dotFill ?? t.color ?? "currentColor",
 					"fill-opacity": t.dotOpacity ?? t.opacity ?? s.lineOpacity,
 					stroke: t.dotStroke ?? "none"
-				}, null, 8, ve))), 128)) : r("", !0)], 64))), 128)),
-				X.value && J.value !== null ? (m(), i("line", {
+				}, null, 8, _e))), 128)) : r("", !0)], 64))), 128)),
+				Z.value && Y.value !== null ? (m(), i("line", {
 					key: 5,
-					x1: F(Z.value),
+					x1: I(Ce.value),
 					y1: O.value.top,
-					x2: F(Z.value),
+					x2: I(Ce.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),
+				}, null, 8, ve)) : r("", !0),
 				(m(!0), i(e, null, g(we.value, (e, t) => (m(), i("circle", {
 					key: "hd" + t,
 					cx: e.x,
@@ -563,8 +561,8 @@ var H = ["width", "height"], ue = ["x"], de = [
 					stroke: "var(--color-bg-0, #fff)",
 					"stroke-width": "2",
 					"pointer-events": "none"
-				}, null, 8, be))), 128)),
-				X.value ? (m(), i("rect", {
+				}, null, 8, K))), 128)),
+				Z.value ? (m(), i("rect", {
 					key: 6,
 					x: O.value.left,
 					y: O.value.top,
@@ -578,27 +576,27 @@ var H = ["width", "height"], ue = ["x"], de = [
 					onMousemove: ke,
 					onMouseleave: Ae,
 					onClick: je,
-					onTouchstart: C(Me, ["prevent"]),
-					onTouchmove: C(Ne, ["prevent"]),
+					onTouchstart: w(Me, ["prevent"]),
+					onTouchmove: w(Ne, ["prevent"]),
 					onTouchend: Pe
-				}, null, 40, xe)) : r("", !0)
-			], 8, H)),
-			X.value && J.value !== null && Q.value ? (m(), i("div", {
+				}, null, 40, q)) : r("", !0)
+			], 8, ce)),
+			Z.value && Y.value !== null && Q.value ? (m(), i("div", {
 				key: 1,
 				ref_key: "tooltipRef",
-				ref: Ce,
+				ref: Se,
 				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", {
+			}, [_(t.$slots, "tooltip", d(l(Q.value)), () => [a("div", ye, [Q.value.xLabel ? (m(), i("div", be, 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)
+			}, null, 4), o(" " + v(isFinite(e.value) ? L(e.value) : "—"), 1)]))), 128))])], !0)], 512)) : r("", !0)
 		], 512));
 	}
 }), [["__scopeId", "data-v-4ea55781"]]), Y = {
@@ -3762,7 +3760,7 @@ var H = ["width", "height"], ue = ["x"], de = [
 	51019: "510014",
 	"02158": "020820",
 	46102: "460957"
-}, Ce = {
+}, X = {
 	"010259": "Butler, AL",
 	"010177": "Calhoun (Anniston), AL - Cleburne, AL",
 	"010172": "Chambers, AL - Randolph, AL",
@@ -4712,27 +4710,28 @@ var H = ["width", "height"], ue = ["x"], de = [
 	560775: "Teton, WY - Lincoln, WY",
 	560792: "Uinta, WY",
 	560804: "Weston, WY"
-}, X = ["width", "height"], Z = [
+}, Se = ["width", "height"], Z = [
 	"data-feat-id",
 	"d",
 	"fill",
 	"stroke",
 	"stroke-width"
-], we = { key: 0 }, Q = ["d", "stroke"], Te = ["transform"], Ee = {
+], Ce = { key: 0 }, we = ["d", "stroke"], Q = ["transform"], Te = {
 	key: 0,
 	y: 5,
 	"font-size": "13",
 	"font-weight": "600",
 	fill: "currentColor"
-}, De = ["x", "fill"], Oe = ["x"], ke = {
+}, Ee = ["x", "fill"], De = ["x"], Oe = {
 	key: 0,
 	y: 5,
 	"font-size": "13",
 	"font-weight": "600",
 	fill: "currentColor"
-}, Ae = ["offset", "stop-color"], je = ["x", "fill"], Me = ["x"], Ne = ["x"], Pe = /* @__PURE__ */ B(/* @__PURE__ */ c({
+}, ke = ["offset", "stop-color"], Ae = ["x", "fill"], je = ["x"], Me = ["x"], Ne = /* @__PURE__ */ B(/* @__PURE__ */ c({
 	__name: "ChoroplethMap",
 	props: {
+		topology: {},
 		data: {},
 		geoType: { default: "states" },
 		width: {},
@@ -4764,68 +4763,80 @@ var H = ["width", "height"], ue = ["x"], de = [
 	},
 	emits: ["stateClick", "stateHover"],
 	setup(o, { emit: s }) {
-		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));
-		}
+		let c = o, l = s, d = `choropleth-gradient-${x()}`, f = h(null), _ = h(null), b = h(null), C = h(0), w = null, T = null, E = !1, D = typeof window < "u" && "ontouchstart" in window, O = null, k = null;
 		function A() {
-			let e = y.value;
-			e && (e.removeEventListener("click", $), e.removeEventListener("mouseover", $), e.removeEventListener("mousemove", Re), e.removeEventListener("mouseout", ze));
+			if (D) return;
+			let e = b.value;
+			e && (e.addEventListener("click", $), e.addEventListener("mouseover", $), e.addEventListener("mousemove", Fe), e.addEventListener("mouseout", Ie));
+		}
+		function j() {
+			let e = b.value;
+			e && (e.removeEventListener("click", $), e.removeEventListener("mouseover", $), e.removeEventListener("mousemove", Fe), e.removeEventListener("mouseout", Ie));
 		}
 		p(() => {
-			f.value && (S.value = f.value.clientWidth, D = new ResizeObserver((e) => {
+			f.value && (C.value = f.value.clientWidth, O = new ResizeObserver((e) => {
 				let t = e[0];
-				t && (S.value = t.contentRect.width);
-			}), D.observe(f.value)), j(), k();
+				t && (C.value = t.contentRect.width);
+			}), O.observe(f.value)), M(), A();
 		}), ee(() => {
-			D?.disconnect(), M(), A(), Fe();
+			O?.disconnect(), N(), j(), J();
 		});
-		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();
+		function M() {
+			if (!_.value || !b.value || !c.zoom && !c.pan) return;
+			let e = re(_.value);
+			k = ne().scaleExtent(c.zoom ? [1, 12] : [1, 1]).on("start", () => {
+				E = !0, Pe();
 			}).on("zoom", (e) => {
-				y.value && y.value.setAttribute("transform", e.transform);
+				b.value && b.value.setAttribute("transform", e.transform);
 			}).on("end", () => {
-				T = !1;
-			}), c.pan || O.filter((e) => e.type === "wheel" || e.type === "dblclick"), e.call(O);
+				E = !1;
+			}), c.pan || k.filter((e) => e.type === "wheel" || e.type === "dblclick"), e.call(k);
 		}
-		function M() {
-			_.value && O && (ne(_.value).on(".zoom", null), O = null);
+		function N() {
+			_.value && k && (re(_.value).on(".zoom", null), k = null);
 		}
-		x(() => [c.zoom, c.pan], () => {
-			M(), A(), j(), k();
+		S(() => [c.zoom, c.pan], () => {
+			N(), j(), M(), A();
 		});
-		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 = Y[String(n.id).padStart(5, "0")];
-				e && (t.has(e) || t.set(e, []), t.get(e).push(n));
+		let L = t(() => c.width ?? (C.value || 600)), R = t(() => c.width && c.height ? c.height / c.width : .625), z = t(() => L.value * R.value), B = t(() => {
+			let e = y(c.topology), t = e.objects.counties.geometries, n = /* @__PURE__ */ new Map();
+			for (let e of t) {
+				let t = Y[String(e.id).padStart(5, "0")];
+				t && (n.has(t) || n.set(t, []), n.get(t).push(e));
 			}
-			let n = [];
-			for (let [e, r] of t) n.push({
+			let r = [];
+			for (let [t, i] of n) r.push({
 				type: "Feature",
-				id: e,
-				properties: { name: Ce[e] ?? e },
-				geometry: ie(V, r)
+				id: t,
+				properties: { name: X[t] ?? t },
+				geometry: I(e, i)
 			});
 			return {
 				type: "FeatureCollection",
-				features: n
+				features: r
 			};
-		}), 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(() => {
+		}), V = t(() => {
+			if (c.geoType === "hsas") return B.value;
+			if (c.geoType === "counties") {
+				let e = y(c.topology);
+				return F(e, e.objects.counties);
+			}
+			let e = y(c.topology);
+			return F(e, e.objects.states);
+		}), H = t(() => {
+			if (c.geoType !== "counties" && c.geoType !== "hsas") return null;
+			let e = y(c.topology);
+			return ie(e, e.objects.states, (e, t) => e !== t);
+		}), ce = t(() => P().fitExtent([[0, He.value], [L.value, z.value + He.value]], V.value)), le = t(() => te(ce.value)), U = t(() => c.geoType === "counties" || c.geoType === "hsas" ? c.strokeWidth * .5 : c.strokeWidth), ue = t(() => {
 			let e = /* @__PURE__ */ new Map();
 			if (!c.data) return e;
 			for (let t of c.data) {
 				e.set(t.id, t.value);
-				let n = H.value.features.find((e) => e.properties?.name === t.id);
+				let n = V.value.features.find((e) => e.properties?.name === t.id);
 				n?.id != null && e.set(String(n.id), t.value);
 			}
 			return e;
-		}), me = t(() => {
+		}), de = t(() => {
 			if (!c.data || c.data.length === 0) return {
 				min: 0,
 				max: 1
@@ -4842,8 +4853,8 @@ var H = ["width", "height"], ue = ["x"], de = [
 				min: 0,
 				max: 1
 			};
-		}), 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) {
+		}), W = t(() => Array.isArray(c.colorScale) && c.colorScale.length > 0 && "value" in c.colorScale[0]), G = t(() => Array.isArray(c.colorScale) && !W.value), fe = t(() => G.value ? "" : c.colorScale?.min ?? "#e5f0fa"), pe = t(() => G.value ? "" : c.colorScale?.max ?? "#08519c");
+		function me(e) {
 			let t = e.replace("#", "");
 			return [
 				parseInt(t.slice(0, 2), 16),
@@ -4851,101 +4862,101 @@ var H = ["width", "height"], ue = ["x"], de = [
 				parseInt(t.slice(4, 6), 16)
 			];
 		}
-		function ve(e) {
-			let [t, n, r] = _e(he.value), [i, a, o] = _e(ge.value);
+		function he(e) {
+			let [t, n, r] = me(fe.value), [i, a, o] = me(pe.value);
 			return `rgb(${Math.round(t + (i - t) * e)},${Math.round(n + (a - n) * e)},${Math.round(r + (o - r) * e)})`;
 		}
-		function ye(e) {
+		function ge(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 be(e) {
+		function _e(e) {
 			let t = c.colorScale.find((t) => t.value === String(e));
 			return t ? t.color : c.noDataColor;
 		}
-		function xe(e) {
-			let t = pe.value.get(String(e));
+		function ve(e) {
+			let t = ue.value.get(String(e));
 			if (t == null) return c.noDataColor;
-			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));
+			if (W.value) return _e(t);
+			if (G.value) return ge(t);
+			let { min: n, max: r } = de.value;
+			return he((t - n) / (r - n));
 		}
 		function K(e) {
 			return e.properties?.name ?? String(e.id);
 		}
 		function q(e) {
-			return pe.value.get(String(e.id));
+			return ue.value.get(String(e.id));
 		}
-		let Se = t(() => {
+		let ye = t(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of H.value.features) e.set(String(t.id), t);
+			for (let t of V.value.features) e.set(String(t.id), t);
 			return e;
 		});
-		function J(e) {
+		function be(e) {
 			let t = e;
 			for (; t && !t.dataset?.featId;) t = t.parentElement;
 			if (!t) return null;
-			let n = Se.value.get(t.dataset.featId);
+			let n = ye.value.get(t.dataset.featId);
 			return n ? {
 				pathEl: t,
 				feat: n
 			} : null;
 		}
-		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));
+		function xe(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 = K(e), i = q(e), a = {
 				id: String(e.id),
 				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`;
+			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`;
 		}
-		function Fe() {
-			w &&= (w.remove(), null);
+		function J() {
+			T &&= (T.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 Ne(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 Le() {
-			C && (C.setAttribute("stroke-width", String(U.value)), C.setAttribute("stroke", c.strokeColor), C = null, l("stateHover", null)), Fe();
+		function Pe() {
+			w && (w.setAttribute("stroke-width", String(U.value)), w.setAttribute("stroke", c.strokeColor), w = null, l("stateHover", null)), J();
 		}
 		function $(e) {
-			if (T) return;
-			let t = e, n = J(t.target);
+			if (E) return;
+			let t = e, n = be(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", {
+			}) : e.type === "mouseover" && (Ne(n.pathEl, n.feat), c.tooltipTrigger && xe(n.feat, t.clientX, t.clientY), l("stateHover", {
 				id: String(n.feat.id),
 				name: K(n.feat),
 				value: q(n.feat)
 			})));
 		}
-		function Re(e) {
-			T || !w || (w.style.left = `${e.clientX + 16}px`, w.style.top = `${e.clientY}px`);
+		function Fe(e) {
+			E || !T || (T.style.left = `${e.clientX + 16}px`, T.style.top = `${e.clientY}px`);
 		}
-		function ze(e) {
+		function Ie(e) {
 			let t = e.relatedTarget;
-			t && y.value?.contains(t) || Le();
+			t && b.value?.contains(t) || Pe();
 		}
-		function Be() {
+		function Le() {
 			return typeof c.menu == "string" ? c.menu : "choropleth";
 		}
-		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 Re = t(() => c.legend && (W.value || G.value || c.data)), ze = t(() => c.colorScale.slice().sort((e, t) => e.min - t.min)), Be = t(() => c.title ? 24 : 0), Ve = t(() => Re.value ? 28 : 0), He = t(() => Be.value + Ve.value), Ue = t(() => z.value + He.value), We = t(() => Be.value + 18), Ge = t(() => {
 			let e = [];
 			for (let t = 0; t <= 10; t++) {
 				let n = t / 10;
 				e.push({
 					offset: `${(n * 100).toFixed(0)}%`,
-					color: ve(n)
+					color: he(n)
 				});
 			}
 			return e;
-		}), Ye = t(() => {
-			let { min: e, max: t } = me.value, n = t - e, r = [];
+		}), Ke = t(() => {
+			let { min: e, max: t } = de.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({
@@ -4954,44 +4965,44 @@ var H = ["width", "height"], ue = ["x"], de = [
 				});
 			}
 			return r;
-		}), Xe = t(() => {
+		}), qe = t(() => {
 			let e = [];
 			if (W.value) for (let t of c.colorScale) e.push({
 				key: t.value,
 				color: t.color,
 				label: t.value
 			});
-			else if (G.value) for (let t of He.value) e.push({
+			else if (G.value) for (let t of ze.value) e.push({
 				key: String(t.min),
 				color: t.color,
 				label: t.label ?? String(t.min)
 			});
 			return e;
-		}), Ze = t(() => {
+		}), Je = t(() => {
 			let e = c.legendTitle ? c.legendTitle.length * 8 + 12 : 0;
-			for (let t of Xe.value) e += 16 + t.label.length * 7 + 12;
-			return e - (Xe.value.length > 0 ? 12 : 0);
-		}), Qe = t(() => {
+			for (let t of qe.value) e += 16 + t.label.length * 7 + 12;
+			return e - (qe.value.length > 0 ? 12 : 0);
+		}), Ye = t(() => {
 			let e = c.legendTitle ? c.legendTitle.length * 8 + 12 : 0;
-			return Xe.value.map((t) => {
+			return qe.value.map((t) => {
 				let n = e;
 				return e += 16 + t.label.length * 7 + 12, n;
 			});
-		}), $e = t(() => {
-			if (W.value || G.value) return (L.value - Ze.value) / 2;
+		}), Xe = t(() => {
+			if (W.value || G.value) return (L.value - Je.value) / 2;
 			let e = c.legendTitle ? c.legendTitle.length * 8 + 12 : 0;
 			return (L.value - e - 160) / 2;
-		}), et = t(() => {
-			let e = Be();
+		}), Ze = t(() => {
+			let e = Le();
 			return [{
 				label: "Save as SVG",
 				action: () => {
-					_.value && se(_.value, e);
+					_.value && oe(_.value, e);
 				}
 			}, {
 				label: "Save as PNG",
 				action: () => {
-					_.value && ce(_.value, e);
+					_.value && se(_.value, e);
 				}
 			}];
 		});
@@ -4999,64 +5010,64 @@ var H = ["width", "height"], ue = ["x"], de = [
 			ref_key: "containerRef",
 			ref: f,
 			class: u(["choropleth-wrapper", { pannable: o.pan }])
-		}, [o.menu ? (m(), n(oe, {
+		}, [o.menu ? (m(), n(ae, {
 			key: 0,
-			items: et.value
+			items: Ze.value
 		}, null, 8, ["items"])) : r("", !0), (m(), i("svg", {
 			ref_key: "svgRef",
 			ref: _,
 			width: L.value,
-			height: Ke.value
+			height: Ue.value
 		}, [
 			a("g", {
 				ref_key: "mapGroupRef",
-				ref: y
-			}, [(m(!0), i(e, null, g(H.value.features, (e) => (m(), i("path", {
+				ref: b
+			}, [(m(!0), i(e, null, g(V.value.features, (e) => (m(), i("path", {
 				key: String(e.id),
 				"data-feat-id": String(e.id),
-				d: fe.value(e) ?? void 0,
-				fill: xe(e.id),
+				d: le.value(e) ?? void 0,
+				fill: ve(e.id),
 				stroke: o.strokeColor,
 				"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", {
+			}, [o.tooltipTrigger ? r("", !0) : (m(), i("title", Ce, v(K(e)) + v(q(e) == null ? "" : `: ${q(e)}`), 1))], 8, Z))), 128)), H.value ? (m(), i("path", {
 				key: 0,
-				d: fe.value(ue.value) ?? void 0,
+				d: le.value(H.value) ?? void 0,
 				fill: "none",
 				stroke: o.strokeColor,
 				"stroke-width": 1,
 				"stroke-linejoin": "round",
 				"pointer-events": "none"
-			}, null, 8, Q)) : r("", !0)], 512),
-			Ve.value ? (m(), i("g", {
+			}, null, 8, we)) : r("", !0)], 512),
+			Re.value ? (m(), i("g", {
 				key: 0,
 				class: "choropleth-legend",
-				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],
+				transform: `translate(${Xe.value},${We.value})`
+			}, [W.value || G.value ? (m(), i(e, { key: 0 }, [o.legendTitle ? (m(), i("text", Te, v(o.legendTitle), 1)) : r("", !0), (m(!0), i(e, null, g(qe.value, (t, n) => (m(), i(e, { key: t.key }, [a("rect", {
+				x: Ye.value[n],
 				y: -5,
 				width: "12",
 				height: "12",
 				rx: "3",
 				fill: t.color
-			}, null, 8, De), a("text", {
-				x: Qe.value[n] + 16,
+			}, null, 8, Ee), a("text", {
+				x: Ye.value[n] + 16,
 				y: 5,
 				"font-size": "13",
 				fill: "currentColor"
-			}, 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),
+			}, v(t.label), 9, De)], 64))), 128))], 64)) : (m(), i(e, { key: 1 }, [
+				o.legendTitle ? (m(), i("text", Oe, 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(Je.value, (e) => (m(), i("stop", {
+				}, [(m(!0), i(e, null, g(Ge.value, (e) => (m(), i("stop", {
 					key: e.offset,
 					offset: e.offset,
 					"stop-color": e.color
-				}, null, 8, Ae))), 128))])]),
+				}, null, 8, ke))), 128))])]),
 				a("rect", {
 					x: o.legendTitle ? o.legendTitle.length * 8 + 12 : 0,
 					y: -6,
@@ -5064,8 +5075,8 @@ var H = ["width", "height"], ue = ["x"], de = [
 					height: 12,
 					rx: "2",
 					fill: `url(#${d})`
-				}, null, 8, je),
-				(m(!0), i(e, null, g(Ye.value, (e) => (m(), i("text", {
+				}, null, 8, Ae),
+				(m(!0), i(e, null, g(Ke.value, (e) => (m(), i("text", {
 					key: e.value,
 					x: (o.legendTitle ? o.legendTitle.length * 8 + 12 : 0) + e.pct / 100 * 160,
 					y: 20,
@@ -5073,8 +5084,8 @@ var H = ["width", "height"], ue = ["x"], de = [
 					fill: "currentColor",
 					opacity: "0.7",
 					"text-anchor": "middle"
-				}, v(e.value), 9, Me))), 128))
-			], 64))], 8, Te)) : r("", !0),
+				}, v(e.value), 9, je))), 128))
+			], 64))], 8, Q)) : r("", !0),
 			o.title ? (m(), i("text", {
 				key: 1,
 				x: L.value / 2,
@@ -5083,10 +5094,10 @@ var H = ["width", "height"], ue = ["x"], de = [
 				"font-size": "14",
 				"font-weight": "600",
 				fill: "currentColor"
-			}, v(o.title), 9, Ne)) : r("", !0)
-		], 8, X))], 2));
+			}, v(o.title), 9, Me)) : r("", !0)
+		], 8, Se))], 2));
 	}
-}), [["__scopeId", "data-v-7f5b0832"]]), Fe = /* @__PURE__ */ B(/* @__PURE__ */ c({
+}), [["__scopeId", "data-v-ffaf1671"]]), Pe = /* @__PURE__ */ B(/* @__PURE__ */ c({
 	__name: "ChartTooltip",
 	props: {
 		x: {},
@@ -5106,12 +5117,12 @@ var H = ["width", "height"], ue = ["x"], de = [
 				top: `${e.y}px`,
 				transform: "translateY(-50%)"
 			})
-		}, [_(t.$slots, "default", {}, void 0, !0)], 4)) : e.mode === "click" ? (m(), n(y(M), {
+		}, [_(t.$slots, "default", {}, void 0, !0)], 4)) : e.mode === "click" ? (m(), n(b(N), {
 			key: 1,
 			open: e.open
 		}, {
-			default: S(() => [s(y(k), { "as-child": "" }, {
-				default: S(() => [a("div", {
+			default: C(() => [s(b(A), { "as-child": "" }, {
+				default: C(() => [a("div", {
 					class: "chart-tooltip-anchor",
 					style: f({
 						left: `${e.x}px`,
@@ -5119,8 +5130,8 @@ var H = ["width", "height"], ue = ["x"], de = [
 					})
 				}, null, 4)]),
 				_: 1
-			}), s(y(j), null, {
-				default: S(() => [e.open ? (m(), n(y(A), {
+			}), s(b(M), null, {
+				default: C(() => [e.open ? (m(), n(b(j), {
 					key: 0,
 					class: "chart-tooltip-content",
 					side: "right",
@@ -5129,7 +5140,7 @@ var H = ["width", "height"], ue = ["x"], de = [
 					onPointerDownOutside: o[0] ||= (e) => t.$emit("close"),
 					onEscapeKeyDown: o[1] ||= (e) => t.$emit("close")
 				}, {
-					default: S(() => [_(t.$slots, "default", {}, void 0, !0)]),
+					default: C(() => [_(t.$slots, "default", {}, void 0, !0)]),
 					_: 3
 				}, 8, ["side-offset"])) : r("", !0)]),
 				_: 3
@@ -5137,7 +5148,7 @@ var H = ["width", "height"], ue = ["x"], de = [
 			_: 3
 		}, 8, ["open"])) : r("", !0);
 	}
-}), [["__scopeId", "data-v-44377f70"]]), Ie = { class: "TableWrapper" }, Le = { class: "Table" }, $ = /* @__PURE__ */ B(/* @__PURE__ */ c({
+}), [["__scopeId", "data-v-44377f70"]]), $ = { class: "TableWrapper" }, Fe = { class: "Table" }, Ie = /* @__PURE__ */ B(/* @__PURE__ */ c({
 	__name: "DataTable",
 	props: {
 		data: {},
@@ -5210,12 +5221,12 @@ var H = ["width", "height"], ue = ["x"], de = [
 		}
 		let C = t(() => [{
 			label: "Download CSV",
-			action: () => le(S(), b())
+			action: () => H(S(), b())
 		}]);
-		return (t, s) => (m(), i("div", { class: u(["TableOuter", { "has-menu": o.menu }]) }, [o.menu ? (m(), n(oe, {
+		return (t, s) => (m(), i("div", { class: u(["TableOuter", { "has-menu": o.menu }]) }, [o.menu ? (m(), n(ae, {
 			key: 0,
 			items: C.value
-		}, null, 8, ["items"])) : r("", !0), a("div", Ie, [a("table", Le, [
+		}, null, 8, ["items"])) : r("", !0), a("div", $, [a("table", Fe, [
 			a("colgroup", null, [(m(!0), i(e, null, g(h.value, (e) => (m(), i("col", {
 				key: e.name,
 				style: f(d(e.name))
@@ -5233,4 +5244,4 @@ var H = ["width", "height"], ue = ["x"], de = [
 	}
 }), [["__scopeId", "data-v-dbfb7c84"]]);
 //#endregion
-export { Fe as ChartTooltip, Pe as ChoroplethMap, $ as DataTable, J as LineChart };
+export { Pe as ChartTooltip, Ne as ChoroplethMap, Ie as DataTable, J as LineChart };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/charts",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "type": "module",
   "description": "Chart visualization components for cfasim-ui",
   "license": "Apache-2.0",
@@ -33,8 +33,7 @@
     "d3-zoom": "^3.0.0",
     "reka-ui": "^2.9.2",
     "topojson-client": "^3.1.0",
-    "us-atlas": "^3.0.1",
-    "@cfasim-ui/shared": "0.2.2"
+    "@cfasim-ui/shared": "0.3.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"
@@ -49,6 +48,7 @@
     "vite-plugin-dts": "^4.5.4",
     "@vue/test-utils": "^2.4.6",
     "happy-dom": "^20.8.9",
+    "us-atlas": "^3.0.1",
     "vitest": "^4.1.0"
   },
   "scripts": {