@cfasim-ui/charts 0.3.0 → 0.3.1

package/dist/DataTable/DataTable.d.ts

@@ -14,6 +14,21 @@ type __VLS_Props = {
     maxRows?: number;
     columnConfig?: Record<string, ColumnConfig>;
     menu?: boolean | string;
+    /**
+     * Custom CSV content for the Download CSV menu item and download link.
+     * Can be a raw CSV string or a function returning one. When omitted, CSV
+     * is generated from the table data.
+     */
+    csv?: string | (() => string);
+    /** Filename (without extension) for downloaded CSV files. */
+    filename?: string;
+    /**
+     * Show a plain text link below the table to download the CSV data.
+     * Pass `true` for the default label ("Download data (CSV)") or a string
+     * to customize the link text. When set, the Download CSV menu item is
+     * hidden.
+     */
+    downloadLink?: boolean | string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     menu: boolean | string;

package/dist/LineChart/LineChart.d.ts

@@ -39,6 +39,20 @@ type __VLS_Props = {
     tooltipData?: unknown[];
     /** Tooltip activation mode. Default: 'hover' */
     tooltipTrigger?: "hover" | "click";
+    /**
+     * 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
+     * from the chart series.
+     */
+    csv?: string | (() => string);
+    /** Filename (without extension) for downloaded SVG, PNG and CSV files. */
+    filename?: string;
+    /**
+     * Show a plain text link below the chart to download the CSV data.
+     * Pass `true` for the default label ("Download data (CSV)") or a string
+     * to customize the link text.
+     */
+    downloadLink?: boolean | string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

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-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}
+.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-61fdeef2]{width:100%;position:relative}.line-chart-wrapper[data-v-61fdeef2]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-61fdeef2]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-61fdeef2]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-61fdeef2]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-61fdeef2]{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}
 /*$vite$:1*/

package/dist/index.js

@@ -166,7 +166,7 @@ var ce = ["width", "height"], le = ["x"], U = [
 ], ye = { class: "line-chart-tooltip" }, be = {
 	key: 0,
 	class: "line-chart-tooltip-label"
-}, xe = 50, J = /* @__PURE__ */ B(/* @__PURE__ */ c({
+}, xe = ["href", "download"], Se = 50, J = /* @__PURE__ */ B(/* @__PURE__ */ c({
 	__name: "LineChart",
 	props: {
 		data: {},
@@ -189,7 +189,10 @@ var ce = ["width", "height"], le = ["x"], U = [
 		xGrid: { type: Boolean },
 		yGrid: { type: Boolean },
 		tooltipData: {},
-		tooltipTrigger: {}
+		tooltipTrigger: {},
+		csv: {},
+		filename: {},
+		downloadLink: { type: [Boolean, String] }
 	},
 	emits: ["hover"],
 	setup(s, { emit: c }) {
@@ -313,12 +316,14 @@ var ce = ["width", "height"], le = ["x"], U = [
 			return a;
 		});
 		function B() {
-			return typeof u.menu == "string" ? u.menu : "chart";
+			return u.filename ? u.filename : typeof u.menu == "string" ? u.menu : "chart";
 		}
 		function V() {
 			return x.value;
 		}
 		function J() {
+			if (typeof u.csv == "function") return u.csv();
+			if (typeof u.csv == "string") return u.csv;
 			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(",")];
@@ -329,20 +334,20 @@ var ce = ["width", "height"], le = ["x"], U = [
 			}
 			return n.join("\n");
 		}
-		let Y = h(null), X = h(!1), Se = h(null), Z = t(() => !!u.tooltipData || !!u.tooltipTrigger), Ce = t(() => {
+		let Y = h(null), X = h(!1), Ce = h(null), we = t(() => !!u.tooltipData || !!u.tooltipTrigger), Te = t(() => {
 			if (Y.value === null) return 0;
 			let e = N.value, t = k.value / (e - 1 || 1);
 			return O.value.left + Y.value * t;
-		}), we = t(() => {
+		}), Ee = t(() => {
 			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: Ce.value,
+				x: Te.value,
 				y: i - (n.data[e] - t) * r,
 				color: n.color ?? "currentColor"
 			}));
-		}), Q = t(() => {
+		}), Z = t(() => {
 			let e = Y.value;
 			return e === null ? null : {
 				index: e,
@@ -355,10 +360,10 @@ var ce = ["width", "height"], le = ["x"], U = [
 				data: u.tooltipData?.[e] ?? null
 			};
 		});
-		function Te(e) {
+		function De(e) {
 			return "touches" in e ? e.touches[0] ?? null : e;
 		}
-		function Ee(e) {
+		function Oe(e) {
 			let t = b.value?.getBoundingClientRect();
 			if (!t) return null;
 			let n = N.value;
@@ -366,62 +371,58 @@ var ce = ["width", "height"], le = ["x"], U = [
 			let r = e - t.left, i = k.value / (n - 1 || 1), a = (r - O.value.left) / i;
 			return Math.round(Math.max(0, Math.min(n - 1, a)));
 		}
-		function De(e, t) {
-			let n = Se.value;
+		function ke(e, t) {
+			let n = Ce.value;
 			if (!n) return;
-			let r = b.value.getBoundingClientRect(), i = X.value ? xe : 0, a = e - r.left, o = Math.max(0, t - r.top - i);
+			let r = b.value.getBoundingClientRect(), i = X.value ? Se : 0, a = e - r.left, o = Math.max(0, t - r.top - i);
 			n.style.left = `${a + 16}px`, n.style.top = `${o}px`;
 		}
-		function Oe(e) {
-			let t = Te(e);
+		function Ae(e) {
+			let t = De(e);
 			if (!t) return;
-			let n = Ee(t.clientX);
-			n !== null && (Y.value = n, De(t.clientX, t.clientY), y("hover", { index: n }));
+			let n = Oe(t.clientX);
+			n !== null && (Y.value = n, ke(t.clientX, t.clientY), y("hover", { index: n }));
 		}
-		function ke(e) {
-			Oe(e);
+		function je(e) {
+			Ae(e);
 		}
-		function Ae() {
+		function Me() {
 			u.tooltipTrigger !== "click" && (Y.value = null, y("hover", null));
 		}
-		function je(e) {
+		function Ne(e) {
 			if (u.tooltipTrigger !== "click") return;
-			let t = Te(e);
+			let t = De(e);
 			if (!t) return;
-			let n = Ee(t.clientX);
+			let n = Oe(t.clientX);
 			n !== null && (Y.value = Y.value === n ? null : n, y("hover", Y.value === null ? null : { index: n }));
 		}
-		function Me(e) {
-			X.value = !0, Oe(e);
+		function Pe(e) {
+			X.value = !0, Ae(e);
 		}
-		function Ne(e) {
-			Oe(e);
+		function Fe(e) {
+			Ae(e);
 		}
-		function Pe() {
+		function Q() {
 			X.value = !1, Y.value = null, y("hover", null);
 		}
-		let $ = t(() => {
-			let e = B();
-			return [
-				{
-					label: "Save as SVG",
-					action: () => {
-						let t = V();
-						t && oe(t, e);
-					}
-				},
-				{
-					label: "Save as PNG",
-					action: () => {
-						let t = V();
-						t && se(t, e);
-					}
-				},
-				{
-					label: "Download CSV",
-					action: () => H(J(), e)
+		let $ = t(() => u.downloadLink ? typeof u.downloadLink == "string" ? u.downloadLink : "Download data (CSV)" : null), Ie = t(() => u.downloadLink ? `data:text/csv;charset=utf-8,${encodeURIComponent(J())}` : null), Le = t(() => {
+			let e = B(), t = [{
+				label: "Save as SVG",
+				action: () => {
+					let t = V();
+					t && oe(t, e);
 				}
-			];
+			}, {
+				label: "Save as PNG",
+				action: () => {
+					let t = V();
+					t && se(t, e);
+				}
+			}];
+			return u.downloadLink || t.push({
+				label: "Download CSV",
+				action: () => H(J(), e)
+			}), t;
 		});
 		return (t, c) => (m(), i("div", {
 			ref_key: "containerRef",
@@ -430,7 +431,7 @@ var ce = ["width", "height"], le = ["x"], U = [
 		}, [
 			s.menu ? (m(), n(ae, {
 				key: 0,
-				items: $.value
+				items: Le.value
 			}, null, 8, ["items"])) : r("", !0),
 			(m(), i("svg", {
 				ref_key: "svgRef",
@@ -541,18 +542,18 @@ var ce = ["width", "height"], le = ["x"], U = [
 					"fill-opacity": t.dotOpacity ?? t.opacity ?? s.lineOpacity,
 					stroke: t.dotStroke ?? "none"
 				}, null, 8, _e))), 128)) : r("", !0)], 64))), 128)),
-				Z.value && Y.value !== null ? (m(), i("line", {
+				we.value && Y.value !== null ? (m(), i("line", {
 					key: 5,
-					x1: I(Ce.value),
+					x1: I(Te.value),
 					y1: O.value.top,
-					x2: I(Ce.value),
+					x2: I(Te.value),
 					y2: O.value.top + A.value,
 					stroke: "currentColor",
 					"stroke-opacity": "0.3",
 					"stroke-dasharray": "4 2",
 					"pointer-events": "none"
 				}, null, 8, ve)) : r("", !0),
-				(m(!0), i(e, null, g(we.value, (e, t) => (m(), i("circle", {
+				(m(!0), i(e, null, g(Ee.value, (e, t) => (m(), i("circle", {
 					key: "hd" + t,
 					cx: e.x,
 					cy: e.y,
@@ -562,7 +563,7 @@ var ce = ["width", "height"], le = ["x"], U = [
 					"stroke-width": "2",
 					"pointer-events": "none"
 				}, null, 8, K))), 128)),
-				Z.value ? (m(), i("rect", {
+				we.value ? (m(), i("rect", {
 					key: 6,
 					x: O.value.left,
 					y: O.value.top,
@@ -573,33 +574,39 @@ var ce = ["width", "height"], le = ["x"], U = [
 						cursor: "crosshair",
 						"touch-action": "none"
 					},
-					onMousemove: ke,
-					onMouseleave: Ae,
-					onClick: je,
-					onTouchstart: w(Me, ["prevent"]),
-					onTouchmove: w(Ne, ["prevent"]),
-					onTouchend: Pe
+					onMousemove: je,
+					onMouseleave: Me,
+					onClick: Ne,
+					onTouchstart: w(Pe, ["prevent"]),
+					onTouchmove: w(Fe, ["prevent"]),
+					onTouchend: Q
 				}, null, 40, q)) : r("", !0)
 			], 8, ce)),
-			Z.value && Y.value !== null && Q.value ? (m(), i("div", {
+			we.value && Y.value !== null && Z.value ? (m(), i("div", {
 				key: 1,
 				ref_key: "tooltipRef",
-				ref: Se,
+				ref: Ce,
 				class: "chart-tooltip-content",
 				style: {
 					position: "absolute",
 					transform: "translateY(-50%)"
 				}
-			}, [_(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", {
+			}, [_(t.$slots, "tooltip", d(l(Z.value)), () => [a("div", ye, [Z.value.xLabel ? (m(), i("div", be, v(Z.value.xLabel), 1)) : r("", !0), (m(!0), i(e, null, g(Z.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) ? L(e.value) : "—"), 1)]))), 128))])], !0)], 512)) : r("", !0)
+			}, null, 4), o(" " + v(isFinite(e.value) ? L(e.value) : "—"), 1)]))), 128))])], !0)], 512)) : r("", !0),
+			$.value ? (m(), i("a", {
+				key: 2,
+				class: "line-chart-download-link",
+				href: Ie.value,
+				download: `${B()}.csv`
+			}, v($.value), 9, xe)) : r("", !0)
 		], 512));
 	}
-}), [["__scopeId", "data-v-4ea55781"]]), Y = {
+}), [["__scopeId", "data-v-61fdeef2"]]), Y = {
 	"01013": "010259",
 	"01015": "010177",
 	"01029": "010177",
@@ -4710,25 +4717,25 @@ var ce = ["width", "height"], le = ["x"], U = [
 	560775: "Teton, WY - Lincoln, WY",
 	560792: "Uinta, WY",
 	560804: "Weston, WY"
-}, Se = ["width", "height"], Z = [
+}, Ce = ["width", "height"], we = [
 	"data-feat-id",
 	"d",
 	"fill",
 	"stroke",
 	"stroke-width"
-], Ce = { key: 0 }, we = ["d", "stroke"], Q = ["transform"], Te = {
+], Te = { key: 0 }, Ee = ["d", "stroke"], Z = ["transform"], De = {
 	key: 0,
 	y: 5,
 	"font-size": "13",
 	"font-weight": "600",
 	fill: "currentColor"
-}, Ee = ["x", "fill"], De = ["x"], Oe = {
+}, Oe = ["x", "fill"], ke = ["x"], Ae = {
 	key: 0,
 	y: 5,
 	"font-size": "13",
 	"font-weight": "600",
 	fill: "currentColor"
-}, ke = ["offset", "stop-color"], Ae = ["x", "fill"], je = ["x"], Me = ["x"], Ne = /* @__PURE__ */ B(/* @__PURE__ */ c({
+}, je = ["offset", "stop-color"], Me = ["x", "fill"], Ne = ["x"], Pe = ["x"], Fe = /* @__PURE__ */ B(/* @__PURE__ */ c({
 	__name: "ChoroplethMap",
 	props: {
 		topology: {},
@@ -4767,11 +4774,11 @@ var ce = ["width", "height"], le = ["x"], U = [
 		function A() {
 			if (D) return;
 			let e = b.value;
-			e && (e.addEventListener("click", $), e.addEventListener("mouseover", $), e.addEventListener("mousemove", Fe), e.addEventListener("mouseout", Ie));
+			e && (e.addEventListener("click", Q), e.addEventListener("mouseover", Q), e.addEventListener("mousemove", $), 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));
+			e && (e.removeEventListener("click", Q), e.removeEventListener("mouseover", Q), e.removeEventListener("mousemove", $), e.removeEventListener("mouseout", Ie));
 		}
 		p(() => {
 			f.value && (C.value = f.value.clientWidth, O = new ResizeObserver((e) => {
@@ -4779,13 +4786,13 @@ var ce = ["width", "height"], le = ["x"], U = [
 				t && (C.value = t.contentRect.width);
 			}), O.observe(f.value)), M(), A();
 		}), ee(() => {
-			O?.disconnect(), N(), j(), J();
+			O?.disconnect(), N(), j(), Se();
 		});
 		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();
+				E = !0, Fe();
 			}).on("zoom", (e) => {
 				b.value && b.value.setAttribute("transform", e.transform);
 			}).on("end", () => {
@@ -4913,34 +4920,34 @@ var ce = ["width", "height"], le = ["x"], U = [
 			};
 			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 J() {
+		function Se() {
 			T &&= (T.remove(), null);
 		}
-		function Ne(e, t) {
+		function J(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 Pe() {
-			w && (w.setAttribute("stroke-width", String(U.value)), w.setAttribute("stroke", c.strokeColor), w = null, l("stateHover", null)), J();
+		function Fe() {
+			w && (w.setAttribute("stroke-width", String(U.value)), w.setAttribute("stroke", c.strokeColor), w = null, l("stateHover", null)), Se();
 		}
-		function $(e) {
+		function Q(e) {
 			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" && (Ne(n.pathEl, n.feat), c.tooltipTrigger && xe(n.feat, t.clientX, t.clientY), l("stateHover", {
+			}) : e.type === "mouseover" && (J(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 Fe(e) {
+		function $(e) {
 			E || !T || (T.style.left = `${e.clientX + 16}px`, T.style.top = `${e.clientY}px`);
 		}
 		function Ie(e) {
 			let t = e.relatedTarget;
-			t && b.value?.contains(t) || Pe();
+			t && b.value?.contains(t) || Fe();
 		}
 		function Le() {
 			return typeof c.menu == "string" ? c.menu : "choropleth";
@@ -5030,7 +5037,7 @@ var ce = ["width", "height"], le = ["x"], U = [
 				stroke: o.strokeColor,
 				"stroke-width": U.value,
 				class: "state-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", {
+			}, [o.tooltipTrigger ? r("", !0) : (m(), i("title", Te, v(K(e)) + v(q(e) == null ? "" : `: ${q(e)}`), 1))], 8, we))), 128)), H.value ? (m(), i("path", {
 				key: 0,
 				d: le.value(H.value) ?? void 0,
 				fill: "none",
@@ -5038,25 +5045,25 @@ var ce = ["width", "height"], le = ["x"], U = [
 				"stroke-width": 1,
 				"stroke-linejoin": "round",
 				"pointer-events": "none"
-			}, null, 8, we)) : r("", !0)], 512),
+			}, null, 8, Ee)) : r("", !0)], 512),
 			Re.value ? (m(), i("g", {
 				key: 0,
 				class: "choropleth-legend",
 				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", {
+			}, [W.value || G.value ? (m(), i(e, { key: 0 }, [o.legendTitle ? (m(), i("text", De, 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, Ee), a("text", {
+			}, null, 8, Oe), a("text", {
 				x: Ye.value[n] + 16,
 				y: 5,
 				"font-size": "13",
 				fill: "currentColor"
-			}, 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),
+			}, v(t.label), 9, ke)], 64))), 128))], 64)) : (m(), i(e, { key: 1 }, [
+				o.legendTitle ? (m(), i("text", Ae, v(o.legendTitle), 1)) : r("", !0),
 				a("defs", null, [a("linearGradient", {
 					id: d,
 					x1: "0",
@@ -5067,7 +5074,7 @@ var ce = ["width", "height"], le = ["x"], U = [
 					key: e.offset,
 					offset: e.offset,
 					"stop-color": e.color
-				}, null, 8, ke))), 128))])]),
+				}, null, 8, je))), 128))])]),
 				a("rect", {
 					x: o.legendTitle ? o.legendTitle.length * 8 + 12 : 0,
 					y: -6,
@@ -5075,7 +5082,7 @@ var ce = ["width", "height"], le = ["x"], U = [
 					height: 12,
 					rx: "2",
 					fill: `url(#${d})`
-				}, null, 8, Ae),
+				}, null, 8, Me),
 				(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,
@@ -5084,8 +5091,8 @@ var ce = ["width", "height"], le = ["x"], U = [
 					fill: "currentColor",
 					opacity: "0.7",
 					"text-anchor": "middle"
-				}, v(e.value), 9, je))), 128))
-			], 64))], 8, Q)) : r("", !0),
+				}, v(e.value), 9, Ne))), 128))
+			], 64))], 8, Z)) : r("", !0),
 			o.title ? (m(), i("text", {
 				key: 1,
 				x: L.value / 2,
@@ -5094,10 +5101,10 @@ var ce = ["width", "height"], le = ["x"], U = [
 				"font-size": "14",
 				"font-weight": "600",
 				fill: "currentColor"
-			}, v(o.title), 9, Me)) : r("", !0)
-		], 8, Se))], 2));
+			}, v(o.title), 9, Pe)) : r("", !0)
+		], 8, Ce))], 2));
 	}
-}), [["__scopeId", "data-v-ffaf1671"]]), Pe = /* @__PURE__ */ B(/* @__PURE__ */ c({
+}), [["__scopeId", "data-v-ffaf1671"]]), Q = /* @__PURE__ */ B(/* @__PURE__ */ c({
 	__name: "ChartTooltip",
 	props: {
 		x: {},
@@ -5148,7 +5155,7 @@ var ce = ["width", "height"], le = ["x"], U = [
 			_: 3
 		}, 8, ["open"])) : r("", !0);
 	}
-}), [["__scopeId", "data-v-44377f70"]]), $ = { class: "TableWrapper" }, Fe = { class: "Table" }, Ie = /* @__PURE__ */ B(/* @__PURE__ */ c({
+}), [["__scopeId", "data-v-44377f70"]]), $ = { class: "TableWrapper" }, Ie = { class: "Table" }, Le = ["href", "download"], Re = /* @__PURE__ */ B(/* @__PURE__ */ c({
 	__name: "DataTable",
 	props: {
 		data: {},
@@ -5157,7 +5164,10 @@ var ce = ["width", "height"], le = ["x"], U = [
 		menu: {
 			type: [Boolean, String],
 			default: !0
-		}
+		},
+		csv: {},
+		filename: {},
+		downloadLink: { type: [Boolean, String] }
 	},
 	setup(o) {
 		let s = {
@@ -5206,12 +5216,14 @@ var ce = ["width", "height"], le = ["x"], U = [
 			return n == null ? "" : e.enumLabels && typeof n == "number" ? e.enumLabels[n] ?? String(n) : typeof n == "number" ? Number.isInteger(n) ? n.toString() : n.toFixed(4) : typeof n == "boolean" ? n ? "true" : "false" : String(n);
 		}
 		function b() {
-			return typeof c.menu == "string" ? c.menu : "data";
+			return c.filename ? c.filename : typeof c.menu == "string" ? c.menu : "data";
 		}
 		function x(e) {
 			return e.includes(",") || e.includes("\"") || e.includes("\n") ? `"${e.replace(/"/g, "\"\"")}"` : e;
 		}
 		function S() {
+			if (typeof c.csv == "function") return c.csv();
+			if (typeof c.csv == "string") return c.csv;
 			let e = h.value, t = _.value, n = [e.map((e) => x(l(e.name))).join(",")];
 			for (let r = 0; r < t; r++) {
 				let t = e.map((e) => x(y(e, r)));
@@ -5219,29 +5231,38 @@ var ce = ["width", "height"], le = ["x"], U = [
 			}
 			return n.join("\n");
 		}
-		let C = t(() => [{
+		let C = t(() => c.downloadLink ? [] : [{
 			label: "Download CSV",
 			action: () => H(S(), b())
-		}]);
-		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", $, [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))
-			}, null, 4))), 128))]),
-			a("thead", null, [a("tr", null, [(m(!0), i(e, null, g(h.value, (e) => (m(), i("th", {
-				key: e.name,
-				style: f(p(e.name))
-			}, v(l(e.name)), 5))), 128))])]),
-			a("tbody", null, [(m(!0), i(e, null, g(_.value, (t) => (m(), i("tr", { key: t }, [(m(!0), i(e, null, g(h.value, (e) => (m(), i("td", {
-				key: e.name,
-				class: u(o.columnConfig?.[e.name]?.cellClass),
-				style: f(p(e.name))
-			}, v(y(e, t - 1)), 7))), 128))]))), 128))])
-		])])], 2));
+		}]), w = t(() => c.downloadLink ? typeof c.downloadLink == "string" ? c.downloadLink : "Download data (CSV)" : null), T = t(() => c.downloadLink ? `data:text/csv;charset=utf-8,${encodeURIComponent(S())}` : null), E = t(() => c.menu && C.value.length > 0);
+		return (t, s) => (m(), i("div", { class: u(["TableOuter", { "has-menu": E.value }]) }, [
+			E.value ? (m(), n(ae, {
+				key: 0,
+				items: C.value
+			}, null, 8, ["items"])) : r("", !0),
+			a("div", $, [a("table", Ie, [
+				a("colgroup", null, [(m(!0), i(e, null, g(h.value, (e) => (m(), i("col", {
+					key: e.name,
+					style: f(d(e.name))
+				}, null, 4))), 128))]),
+				a("thead", null, [a("tr", null, [(m(!0), i(e, null, g(h.value, (e) => (m(), i("th", {
+					key: e.name,
+					style: f(p(e.name))
+				}, v(l(e.name)), 5))), 128))])]),
+				a("tbody", null, [(m(!0), i(e, null, g(_.value, (t) => (m(), i("tr", { key: t }, [(m(!0), i(e, null, g(h.value, (e) => (m(), i("td", {
+					key: e.name,
+					class: u(o.columnConfig?.[e.name]?.cellClass),
+					style: f(p(e.name))
+				}, v(y(e, t - 1)), 7))), 128))]))), 128))])
+			])]),
+			w.value ? (m(), i("a", {
+				key: 1,
+				class: "data-table-download-link",
+				href: T.value,
+				download: `${b()}.csv`
+			}, v(w.value), 9, Le)) : r("", !0)
+		], 2));
 	}
-}), [["__scopeId", "data-v-dbfb7c84"]]);
+}), [["__scopeId", "data-v-505e2187"]]);
 //#endregion
-export { Pe as ChartTooltip, Ne as ChoroplethMap, Ie as DataTable, J as LineChart };
+export { Q as ChartTooltip, Fe as ChoroplethMap, Re as DataTable, J as LineChart };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/charts",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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.0"
+    "@cfasim-ui/shared": "0.3.1"
   },
   "peerDependencies": {
     "vue": "^3.5.0"