@carto/ps-react-ui 5.3.0 → 6.1.0

package/dist/widgets/pie.js

@@ -1,133 +1,51 @@
-import { a as e } from "../shared-resize-observer-BEiP2rQt.js";
-import { t } from "../csv-modifiers-D6HGC24b.js";
-import { a as n, c as r, d as i, f as a, s as o, t as s, u as c } from "../chart-config-B_fdIcD3.js";
-import { t as l } from "../echart-BkaV3V5G.js";
-import { t as u } from "../styles-Y-qGBELO.js";
-import { c as d } from "react/compiler-runtime";
-import { Box as f, Skeleton as p } from "@mui/material";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-//#region src/widgets/pie/config.ts
-var g = s(t);
-function _(t) {
+import { n as e, t } from "../download-B4sykOFm.js";
+import { r as n, t as r } from "../utils-C-eWwOhE.js";
+import { a as i, i as a, n as o, o as s, r as c, s as l } from "../option-builders-DQivvvbb.js";
+import { c as u } from "react/compiler-runtime";
+import { Box as d, Skeleton as f } from "@mui/material";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import * as h from "echarts";
+//#region src/widgets/pie/options.ts
+var g = ["58%", "74%"];
+function _({ theme: e, formatter: t, labelFormatter: n }) {
 	return {
-		type: "pie",
-		option: e(l(t), v(t)),
-		formatter: t.formatter,
-		labelFormatter: t.labelFormatter
-	};
-}
-function v({ data: e = [], theme: t, formatter: s, labelFormatter: l }) {
-	if ((e?.length ?? 0) > 1) {
-		let u = 0, d = 1;
-		return {
-			legend: o({
+		legend: {
+			...c({
 				hasLegend: !0,
-				labelFormatter: l
+				labelFormatter: n
 			}),
-			grid: {
-				...n(!0, t),
-				right: parseInt(t.spacing(4))
-			},
-			xAxis: {
-				type: "value",
-				min: (e) => (u = e.min < 0 ? a(e.min) : 0, u),
-				max: (e) => (d = e.max <= 0 ? 1 : a(e.max), d),
-				axisLabel: {
-					fontSize: t.typography.overlineDelicate.fontSize,
-					fontFamily: t.typography.overlineDelicate.fontFamily,
-					margin: parseInt(t.spacing(1)),
-					show: !0,
-					showMaxLabel: !0,
-					showMinLabel: !0,
-					verticalAlign: "bottom",
-					inside: !0,
-					formatter: (e) => e !== d && e !== u || e === 0 ? "" : s ? s(e) : String(e)
-				},
-				axisLine: { show: !1 },
-				axisTick: { show: !1 },
-				splitLine: {
-					show: !0,
-					lineStyle: { color: t.palette.black[4] }
-				}
-			},
-			yAxis: {
-				type: "category",
-				axisLine: { show: !1 },
-				axisTick: { show: !1 },
-				axisLabel: {
-					padding: [
-						parseInt(t.spacing(.5)),
-						0,
-						0,
-						0
-					],
-					...l && { formatter: (e) => String(l(e)) }
-				}
-			},
-			tooltip: {
-				position: i(t),
-				formatter: c((e) => {
-					let t = e.value[e.dimensionNames?.[e.encode?.x?.at(0) ?? 1] ?? ""], n = typeof t == "number" && s ? s(t) : t ?? "", r = typeof e.marker == "string" ? e.marker : "", i = e.seriesName ? `${e.seriesName}: ` : "";
-					return {
-						name: l ? String(l(e.name ?? "")) : e.name ?? "",
-						seriesName: i,
-						marker: r,
-						value: n
-					};
-				})
-			},
-			series: e.map((e, t) => ({
-				datasetIndex: t,
-				type: "bar",
-				barMaxWidth: 100,
-				emphasis: { focus: "series" },
-				...r(s, "x")
-			}))
-		};
-	}
-	return {
-		legend: o({
-			hasLegend: !0,
-			labelFormatter: l
-		}),
-		grid: {
-			...n(!0, t),
-			left: 0,
-			top: 0,
-			right: 0
+			type: "scroll",
+			itemGap: 16,
+			selectedMode: !1
 		},
-		xAxis: { show: !1 },
-		yAxis: { show: !1 },
 		tooltip: {
 			trigger: "item",
-			formatter: c((e) => {
-				let t = (e.value && typeof e.value == "object" && !Array.isArray(e.value) ? Object.values(e.value) : [])[e.encode?.value?.at(0) ?? 0], n = typeof t == "number" && s ? s(t) : t ?? "", r = typeof e.marker == "string" ? e.marker : "";
-				return {
-					name: e.seriesName ? `${e.seriesName}: ` : "",
-					seriesName: l ? String(l(e.name ?? "")) : e.name ?? "",
-					marker: r,
-					value: n
-				};
-			})
+			backgroundColor: e.palette.grey[900],
+			borderWidth: 0,
+			padding: [parseInt(e.spacing(1)), parseInt(e.spacing(1))],
+			textStyle: {
+				color: e.palette.common.white,
+				fontSize: 11,
+				fontFamily: e.typography.caption.fontFamily
+			},
+			position: s(e),
+			formatter: C(t, n)
 		},
-		color: Object.values(t.palette.qualitative.bold),
-		series: e.map((e, n) => ({
-			datasetIndex: n,
+		color: Object.values(e.palette.qualitative?.bold ?? {}),
+		series: [{
 			type: "pie",
 			colorBy: "data",
-			radius: ["74%", "90%"],
 			avoidLabelOverlap: !0,
 			selectedOffset: 0,
-			bottom: parseInt(t.spacing(4)),
+			legendHoverLink: !1,
+			emphasis: { disabled: !0 },
+			itemStyle: {
+				borderColor: e.palette.background.paper,
+				borderWidth: 1
+			},
 			label: {
 				show: !0,
 				position: "center",
-				formatter: (e) => {
-					let { name: t } = e, n = e.encode?.value?.[0];
-					if (n === void 0) return "";
-					let r = Object.values(e.data ?? {}).at(n);
-					return `{c|${typeof r == "number" && s ? s(r) : r ?? ""}}\n\n{b|${l ? String(l(t ?? "")) : t ?? ""}}`;
-				},
 				rich: {
 					b: {
 						fontSize: 16,
@@ -140,114 +58,310 @@ function v({ data: e = [], theme: t, formatter: s, labelFormatter: l }) {
 						lineHeight: 27
 					}
 				}
+			}
+		}]
+	};
+}
+function v(e) {
+	let { theme: t, formatter: r, labelFormatter: i, optionsOverride: a, series: o } = e, s = e.radius ?? g, c = e.selection, l = c == null || c.length === 0 ? null : new Set(c);
+	return (e, c, u) => {
+		if (e == null) {
+			let e = _({
+				theme: t,
+				formatter: r,
+				labelFormatter: i
+			});
+			return a ? n(e, a) : e;
+		}
+		let d = Array.isArray(c) ? c : [];
+		return d.length === 0 ? {
+			...e,
+			dataset: [],
+			series: []
+		} : d.length > 1 ? b(e, d, t, o, u, l) : y(e, d, s, o, u, l);
+	};
+}
+function y(e, t, n, r, i, a) {
+	let o = Array.isArray(e.series) ? e.series : [], s = o[0] ?? {}, c = typeof e.tooltip == "object" && !Array.isArray(e.tooltip) ? e.tooltip : {}, l = typeof e.legend == "object" && !Array.isArray(e.legend) ? e.legend : {}, u = i?.formatter, d = i?.labelFormatter, f = Array.isArray(e.color) ? e.color : [], p = (e) => (f.length > 0 ? f[e.dataIndex % f.length] : void 0) ?? e.color, m = (e) => {
+		let t = p(e);
+		if (!a) return t;
+		let n = e.value?.name ?? e.name;
+		return n != null && a.has(n) ? t : h.color.modifyAlpha(t, .15);
+	}, g = s.label?.position, _ = g === void 0 || g === "center", v = t[0] ?? [], y, b = -Infinity;
+	for (let e of v) a && !a.has(e.name) || typeof e.value == "number" && e.value > b && (b = e.value, y = e.name);
+	let x = (e) => {
+		let { name: t } = e;
+		if (t == null || _ && t !== y) return "";
+		let n = e.encode?.value?.[0];
+		if (n === void 0) return "";
+		let r = Object.values(e.data ?? {}).at(n), i = typeof r == "number" ? u ? u(r) : String(r) : typeof r == "string" ? r : "", a = String(d ? d(t ?? "") : t ?? "");
+		return `{c|${i}}${_ ? "\n\n" : "\n"}{b|${a}}`;
+	};
+	return {
+		...e,
+		dataset: t.map((e) => ({ source: e })),
+		series: t.map((e, t) => {
+			let i = o[t] ?? s, a = typeof i == "object" ? i : {}, c = a.label ?? {}, l = a.itemStyle ?? {};
+			return {
+				...a,
+				type: "pie",
+				legendHoverLink: !1,
+				datasetIndex: t,
+				name: r?.[t]?.name ?? `Series ${t + 1}`,
+				radius: [...n],
+				center: ["50%", "38%"],
+				encode: {
+					itemName: "name",
+					value: "value"
+				},
+				label: {
+					...c,
+					formatter: x
+				},
+				itemStyle: {
+					...l,
+					color: m
+				}
+			};
+		}),
+		legend: {
+			...l,
+			show: !0,
+			selectedMode: !1,
+			selected: Object.fromEntries((t[0] ?? []).map((e) => [String(e.name), !0]))
+		},
+		tooltip: {
+			...c,
+			formatter: C(u, d)
+		}
+	};
+}
+function b(e, t, n, i, s, c) {
+	let l = typeof e.tooltip == "object" && !Array.isArray(e.tooltip) ? e.tooltip : {}, u = typeof e.legend == "object" && !Array.isArray(e.legend) ? e.legend : {}, d = typeof e.grid == "object" && !Array.isArray(e.grid) ? e.grid : {}, f = s?.formatter, p = s?.labelFormatter, { niceMinVal: m, niceMaxVal: g } = S(t), _ = Array.isArray(e.color) ? e.color : [], v = (e) => {
+		let t = e.seriesIndex ?? 0, n = (_.length > 0 ? _[t % _.length] : void 0) ?? e.color;
+		if (!c) return n;
+		let r = e.value?.name ?? e.name;
+		return r != null && c.has(r) ? n : h.color.modifyAlpha(n, .15);
+	};
+	return {
+		...e,
+		dataset: t.map((e) => ({ source: e })),
+		grid: {
+			...d,
+			...o(!0, n),
+			right: parseInt(n.spacing(4)),
+			containLabel: !0
+		},
+		series: t.map((e, t) => {
+			let o = r(n, i?.[t]?.color);
+			return {
+				datasetIndex: t,
+				type: "bar",
+				name: i?.[t]?.name ?? `Series ${t + 1}`,
+				barMaxWidth: 100,
+				legendHoverLink: !1,
+				emphasis: { focus: "series" },
+				...a(f, "x"),
+				itemStyle: { color: v },
+				...o ? { color: o } : {}
+			};
+		}),
+		xAxis: {
+			type: "value",
+			min: () => m,
+			max: () => g,
+			axisLine: { show: !1 },
+			axisTick: { show: !1 },
+			splitLine: {
+				show: !0,
+				lineStyle: { color: n.palette.black?.[4] ?? n.palette.divider }
 			},
-			emphasis: { disabled: !0 },
-			itemStyle: {
-				borderColor: t.palette.background.paper,
-				borderWidth: 1
+			axisLabel: {
+				fontSize: n.typography.overlineDelicate?.fontSize,
+				fontFamily: n.typography.overlineDelicate?.fontFamily,
+				margin: parseInt(n.spacing(1)),
+				showMaxLabel: !0,
+				showMinLabel: !0,
+				formatter: (e) => e !== g && e !== m || e === 0 ? "" : f ? f(e) : String(e)
+			}
+		},
+		yAxis: {
+			type: "category",
+			axisLine: { show: !1 },
+			axisTick: { show: !1 },
+			axisLabel: {
+				padding: [
+					parseInt(n.spacing(.5)),
+					0,
+					0,
+					0
+				],
+				...p && { formatter: (e) => String(p(e)) }
 			}
-		}))
+		},
+		legend: {
+			...u,
+			show: !0,
+			selectedMode: !1,
+			selected: Object.fromEntries(t.map((e, t) => [i?.[t]?.name ?? `Series ${t + 1}`, !0]))
+		},
+		tooltip: {
+			...l,
+			trigger: "axis",
+			formatter: x(f, p)
+		}
 	};
 }
+function x(e, t) {
+	return i((n) => {
+		let r = n.encode?.x?.at(0), i = r === void 0 ? void 0 : n.dimensionNames?.[r], a = n.value && typeof n.value == "object" && !Array.isArray(n.value) ? n.value : void 0, o = i && a ? a[i] : void 0, s = typeof o == "number" && e ? e(o) : o ?? "", c = typeof n.marker == "string" ? n.marker : "", l = n.seriesName ? `${n.seriesName}: ` : "";
+		return {
+			name: String(t ? t(n.name ?? "") : n.name ?? ""),
+			seriesName: l,
+			marker: c,
+			value: s
+		};
+	});
+}
+function S(e) {
+	let t = 0, n = -Infinity;
+	for (let r of e) for (let e of r) typeof e?.value != "number" || !Number.isFinite(e.value) || (e.value < t && (t = e.value), e.value > n && (n = e.value));
+	return {
+		niceMinVal: t < 0 ? l(t) : 0,
+		niceMaxVal: n <= 0 ? 1 : l(n)
+	};
+}
+function C(e, t) {
+	return i((n) => {
+		let r = n.encode?.value?.at(0) ?? 1, i = (n.value && typeof n.value == "object" && !Array.isArray(n.value) ? Object.values(n.value) : [])[r], a = typeof i == "number" && e ? e(i) : i ?? "", o = typeof n.marker == "string" ? n.marker : "", s = n.seriesName ? `${n.seriesName}: ` : "";
+		return {
+			name: String(t ? t(n.name ?? "") : n.name ?? ""),
+			seriesName: s,
+			marker: o,
+			value: a
+		};
+	});
+}
 //#endregion
-//#region src/widgets/pie/style.ts
-var y = { skeleton: { graph: u.graph } }, b = 262, x = 230;
-function S() {
-	let e = d(5), t, n;
-	e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = {
+//#region src/widgets/pie/skeleton.tsx
+var w = 160, T = 96, E = {
+	root: {
 		display: "flex",
+		flexDirection: "column",
 		alignItems: "center",
 		justifyContent: "center",
-		position: "relative"
-	}, n = /* @__PURE__ */ m(p, {
-		variant: "circular",
-		width: b,
-		height: b
-	}), e[0] = t, e[1] = n) : (t = e[0], n = e[1]);
-	let r;
-	e[2] === Symbol.for("react.memo_cache_sentinel") ? (r = /* @__PURE__ */ m(p, {
-		sx: {
-			position: "absolute",
-			zIndex: 1
-		},
+		minHeight: 200,
+		py: 1,
+		gap: ({ spacing: e }) => e(2)
+	},
+	donut: {
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	ring: {
+		width: w,
+		height: w
+	},
+	hole: {
+		position: "absolute",
+		zIndex: 1,
+		width: T,
+		height: T,
+		borderRadius: "50%",
+		bgcolor: "background.paper"
+	},
+	label: {
+		position: "absolute",
+		zIndex: 2,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: ({ spacing: e }) => e(.5)
+	},
+	legend: {
+		display: "flex",
+		alignItems: "center",
+		gap: ({ spacing: e }) => e(2)
+	},
+	legendItem: {
+		display: "flex",
+		alignItems: "center",
+		gap: ({ spacing: e }) => e(1.5)
+	}
+};
+function D(e) {
+	let t = u(4), n, r;
+	t[0] === Symbol.for("react.memo_cache_sentinel") ? (n = /* @__PURE__ */ p(f, {
 		variant: "circular",
-		width: x,
-		height: x
-	}), e[2] = r) : r = e[2];
+		sx: E.ring
+	}), r = /* @__PURE__ */ p(d, { sx: E.hole }), t[0] = n, t[1] = r) : (n = t[0], r = t[1]);
 	let i;
-	e[3] === Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ h(f, {
-		sx: t,
+	t[2] === Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ m(d, {
+		sx: E.donut,
 		children: [
 			n,
 			r,
-			/* @__PURE__ */ h(f, {
-				sx: {
-					position: "absolute",
-					zIndex: 2,
-					display: "flex",
-					flexDirection: "column",
-					alignItems: "center",
-					justifyContent: "center",
-					gap: D
-				},
-				children: [/* @__PURE__ */ m(p, {
-					height: 24,
-					width: 72
-				}), /* @__PURE__ */ m(p, {
-					height: 8,
-					width: 48
+			/* @__PURE__ */ m(d, {
+				sx: E.label,
+				children: [/* @__PURE__ */ p(f, {
+					width: 56,
+					height: 18
+				}), /* @__PURE__ */ p(f, {
+					width: 36,
+					height: 8
 				})]
 			})
 		]
-	}), e[3] = i) : i = e[3];
+	}), t[2] = i) : i = t[2];
 	let a;
-	return e[4] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ h(f, {
-		sx: y.skeleton.graph.container,
-		children: [i, /* @__PURE__ */ m(f, {
-			sx: {
-				display: "flex",
-				alignItems: "center",
-				gap: E,
-				height: T
-			},
-			children: [, ,].fill(0).map(C)
+	return t[3] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ m(d, {
+		sx: E.root,
+		children: [i, /* @__PURE__ */ p(d, {
+			sx: E.legend,
+			children: [0, 1].map(O)
 		})]
-	}), e[4] = a) : a = e[4], a;
+	}), t[3] = a) : a = t[3], a;
 }
-function C(e, t) {
-	return /* @__PURE__ */ h(f, {
-		sx: {
-			display: "flex",
-			alignItems: "center",
-			gap: w
-		},
-		children: [/* @__PURE__ */ m(p, {
+function O(e) {
+	return /* @__PURE__ */ m(d, {
+		sx: E.legendItem,
+		children: [/* @__PURE__ */ p(f, {
 			variant: "circular",
 			width: 8,
 			height: 8
-		}), /* @__PURE__ */ m(p, {
+		}), /* @__PURE__ */ p(f, {
 			width: 48,
 			height: 8
 		})]
-	}, `skeleton-${t}`);
-}
-function w(e) {
-	let { spacing: t } = e;
-	return t(1.5);
+	}, `legend-${e}`);
 }
-function T(e) {
-	let { spacing: t } = e;
-	return t(5);
-}
-function E(e) {
-	let { spacing: t } = e;
-	return t(2);
-}
-function D(e) {
-	let { spacing: t } = e;
-	return t(1);
+//#endregion
+//#region src/widgets/pie/download.ts
+function k(n) {
+	return t(n, e({
+		filename: n.filename,
+		getRows: (e) => {
+			let t = n.getData(e), r = [[
+				"series",
+				"name",
+				"value"
+			]];
+			for (let [e, i] of t.entries()) {
+				let t = n.seriesNames?.[e] ?? `series_${e + 1}`;
+				for (let e of i) r.push([
+					t,
+					e.name,
+					e.value
+				]);
+			}
+			return r;
+		}
+	}));
 }
 //#endregion
-export { S as PieSkeleton, _ as pieConfig, g as pieDownloadConfig };
+export { D as PieSkeleton, k as createPieDownloadConfig, v as createPieOptionFactory, _ as pieOptions };
 
 //# sourceMappingURL=pie.js.map