@astrato-io/visualizations 0.0.0-stage → 0.6.5

package/chunks/standalone-CC1VUjO32.js

@@ -0,0 +1,299 @@
+import { o as e } from "./rolldown-runtime-DleVn1XH.js";
+import { An as t, Fa as n, Ma as r, Mo as i, Na as a, Sa as o, Si as s, Ti as c, as as l, fc as u, ja as d, os as f } from "./isEqual-BDxAhUo8.js";
+import { $t as p, Ei as m, G as h, Kn as g, Yi as _, d as v, hn as y } from "./utils-Bg7K-t6K.js";
+import { u as b } from "./ui-DQWtv2iM.js";
+import { _ as x } from "./coloring-B1XAfg6b.js";
+var S = /* @__PURE__ */ e(_()), C = (e, t) => {
+	switch (e.thresholdType) {
+		case a.Range: return T(t, e.rangeThresholds ?? []);
+		case a.Target: return w(t, e.targetThreshold);
+		case a.None: return {};
+	}
+}, w = (e, n) => {
+	let r = t(n?.target, 0), { belowTargetColorAndIcon: i, targetColorAndIcon: a, aboveTargetColorAndIcon: o } = n || {};
+	return e < r * (1 - n.targetTolerance) ? i : e > r * (1 + n.targetTolerance) ? o : a;
+}, T = (e, n) => [...n].sort((e, n) => t(n.rangeTo, 0) - t(e.rangeTo, 0)).reduce((n, r) => e < t(r.rangeTo, 0) ? r.colorAndIcon : n, {}), E = (e) => {
+	let t = ["numberColor"], n = ["comparisonColor"];
+	switch (e) {
+		case "main": return t;
+		case "comparison": return n;
+		case "both": return [...t, ...n];
+	}
+}, D = (e, t, n) => n.reduce((n, r) => t in e ? {
+	...n,
+	[r]: e[t]
+} : n, {}), O = {
+	numberColor: "#1f1c3b",
+	iconColor: "#1f1c3b",
+	iconPosition: i.Left,
+	comparisonColor: "#1f1c3b",
+	comparisonPosition: i.Bottom
+}, k = {
+	numberValue: 0,
+	textAlign: l.Center,
+	horizontalAlign: l.Center,
+	verticalAlign: f.Middle,
+	numberStyle: {
+		fontSize: 12,
+		fontFamily: "Roboto",
+		bold: !1,
+		italic: !1,
+		underlined: !1,
+		strikethrough: !1
+	},
+	comparisonStyle: {
+		relativeFontSizePercentage: c.relativeFontSizePercentage,
+		fontFamily: "Roboto",
+		bold: !1,
+		italic: !1,
+		underlined: !1,
+		strikethrough: !1
+	},
+	comparisonGap: d.SmallGap,
+	...O
+}, A = (e, t, r) => {
+	if (!r?.length || !e) return k;
+	let i = t || o, a = i.fonts.general.fontFamily, c = F(r, e.measures.find((e) => s(e) && e.role === n.NUMBER_MEASURE), !0), { numberValue: l, numberFormat: u, comparisonNumberValue: d, comparisonFormat: f } = j(e, r);
+	return {
+		...N(e, i, c, d),
+		numberValue: l,
+		numberFormat: u,
+		comparisonNumberValue: d,
+		comparisonFormat: f,
+		numberStyle: {
+			fontSize: e.numberSettings?.numberStyle?.fontSize ?? k.numberStyle.fontSize,
+			fontFamily: e.numberSettings?.numberStyle?.fontFamily ?? a,
+			bold: e.numberSettings?.numberStyle?.bold ?? k.numberStyle.bold,
+			weight: e.numberSettings?.numberStyle?.weight,
+			italic: e.numberSettings?.numberStyle?.italic ?? k.numberStyle.italic,
+			underlined: e.numberSettings?.numberStyle?.underlined ?? k.numberStyle.underlined,
+			strikethrough: e.numberSettings?.numberStyle?.strikethrough ?? k.numberStyle.strikethrough
+		},
+		comparisonStyle: {
+			relativeFontSizePercentage: e.numberSettings?.comparisonStyle?.relativeFontSizePercentage ?? k.comparisonStyle.relativeFontSizePercentage,
+			fontFamily: e.numberSettings?.comparisonStyle?.fontFamily ?? a,
+			bold: e.numberSettings?.comparisonStyle?.bold ?? k.comparisonStyle.bold,
+			weight: e.numberSettings?.comparisonStyle?.weight,
+			italic: e.numberSettings?.comparisonStyle?.italic ?? k.comparisonStyle.italic,
+			underlined: e.numberSettings?.comparisonStyle?.underlined ?? k.comparisonStyle.underlined,
+			strikethrough: e.numberSettings?.comparisonStyle?.strikethrough ?? k.comparisonStyle.strikethrough
+		},
+		textAlign: e.numberSettings?.position?.textAlign ?? k.textAlign,
+		horizontalAlign: e.numberSettings?.position?.numberHorizontalAlign ?? k.horizontalAlign,
+		verticalAlign: e.numberSettings?.position?.numberVerticalAlign ?? k.verticalAlign,
+		comparisonGap: e.numberSettings?.position?.comparisonGap ?? k.comparisonGap
+	};
+}, j = (e, t) => {
+	let r, i, a, o, c = e.measures.filter(s), l = c.filter((e) => e.role === n.NUMBER_MEASURE), u = c.filter((e) => e.role === n.NUMBER_COMPARISON), d = l[0], f = u[0];
+	return r = F(t, d, !0), a = M(e, t), d?.formatter && typeof d?.formatter?.format != "string" && (i = d.formatter), f?.formatter && typeof f?.formatter?.format != "string" && (o = f.formatter), f && e.numberSettings?.data?.showOnlyComparison && (r = a, i = o, a = void 0, o = void 0), {
+		numberValue: r,
+		numberFormat: i,
+		comparisonNumberValue: a,
+		comparisonFormat: o
+	};
+}, M = (e, t) => {
+	let i = e.measures.filter(s), a = i.filter((e) => e.role === n.NUMBER_MEASURE), o = i.filter((e) => e.role === n.NUMBER_COMPARISON), c = a[0], l = o[0];
+	if (!l) return;
+	let u = +F(t, c), d = +F(t, l), f = e.numberSettings?.data?.comparisonType, p = Math.abs(d);
+	return f === r.PercentageToComparison ? u === 0 && d === 0 ? 1 : u / p : f === r.PercentageAboveBelow ? u === 0 && d === 0 ? 0 : (u - d) / p : f === r.Difference ? u - d : d;
+}, N = (e, t, r, i) => {
+	let o = e.measures.filter(s), c = o.filter((e) => e.role === n.NUMBER_MEASURE), l = o.filter((e) => e.role === n.NUMBER_COMPARISON), u = c[0], d = l[0];
+	return (e.numberSettings?.thresholds ?? []).filter((e) => e.thresholdType !== a.None).reduce((e, t) => {
+		if (t.measureRule === "main" ? u : d) {
+			let n = C(t, t.measureRule === "main" ? r : i);
+			return {
+				...e,
+				...D(n, "icon", ["icon"]),
+				...D(n, "iconColor", ["iconColor"]),
+				...D(n, "numberColor", E(t.colorRule)),
+				backgroundColor: n.backgroundColor ?? e.backgroundColor
+			};
+		}
+		return e;
+	}, P(e, t));
+}, P = (e, t) => {
+	let { icon: n, iconColor: r } = e.numberSettings?.colorAndIcon || {};
+	return {
+		icon: n,
+		iconColor: x(t, r ?? "black"),
+		iconPosition: e?.numberSettings?.position?.iconPosition ?? i.Left,
+		numberColor: x(t, e?.numberSettings?.numberStyle?.fontColor ?? t.fonts.general.color),
+		...I(e, t, e.numberSettings?.comparisonStyle?.fontColor)
+	};
+}, F = (e, t, n = !1) => {
+	let r = u(t?.dataItem), i = (e?.[0])?.items?.[0]?.[r], a = +`${i}`, o = n && (!t?.formatter || t?.formatter?.format === "string") ? `${i}` : 0;
+	return isNaN(a) ? o : a;
+}, I = (e, t, r) => !e.measures.filter(s).filter((e) => e.role === n.NUMBER_COMPARISON)[0] || e.numberSettings.data?.showOnlyComparison ? {
+	comparisonPosition: void 0,
+	comparisonColor: void 0
+} : {
+	comparisonColor: x(t, r ?? t.fonts.general.color),
+	comparisonPosition: e.numberSettings?.position?.comparisonPosition ?? i.Left
+}, L = h({
+	mainContainer: {
+		width: "100%",
+		height: "100%",
+		display: "flex",
+		lineHeight: 1,
+		overflow: "hidden"
+	},
+	numbersContainer: {
+		display: "flex",
+		justifyContent: "center",
+		letterSpacing: "0.05em"
+	},
+	number: { fontSize: "1em" },
+	comparisonIconContainer: {
+		display: "flex",
+		justifyContent: "center"
+	}
+}), R = (e) => {
+	switch (e) {
+		case f.Top:
+		case l.Left: return "flex-start";
+		case f.Bottom:
+		case l.Right: return "flex-end";
+		default: return "center";
+	}
+}, z = (e) => {
+	let t = e.comparisonPosition ?? e.iconPosition;
+	return t === i.Top || t === i.Bottom ? R(e.textAlign) : "center";
+}, B = (e, t, n, r = !1) => {
+	let i, a, o = 0;
+	r && Math.floor(e) !== e && (o = e.toString().split(".")[1].length || 0);
+	let s = async (c) => {
+		a === void 0 && (a = c);
+		let l = c - a, u = Math.min(l / 500, 1), d = t + (e - t) * u;
+		r && (d = Number(d.toFixed(o))), n(d), l < 500 ? i = requestAnimationFrame(s) : (n(e), cancelAnimationFrame(i));
+	};
+	return e !== t && (i = requestAnimationFrame(s)), () => cancelAnimationFrame(i);
+}, V = .5, H = `${V}em`, U = (e, t) => !(t === i.Left || t === i.Right) || !e || e === d.None ? {} : e === d.SmallGap ? { gap: H } : {
+	width: "100%",
+	justifyContent: e
+}, W = (e, t) => e ? t === i.Top || t === i.Bottom ? "0.33em" : "0.5em" : t === i.Top || t === i.Bottom ? "0.5em" : "1.0em", G = (e) => {
+	switch (e) {
+		case i.Top: return "column";
+		case i.Bottom: return "column-reverse";
+		case i.Right: return "row-reverse";
+		default: return "row";
+	}
+}, K = (e, t) => !e && !t ? "inherit" : `${e ? "underline" : ""} ${t ? "line-through" : ""}`, q = ({ numberSize: e, comparisonNumberSize: t, numberProps: n, elementSize: r, fontSize: a }) => {
+	let o = n.comparisonNumberValue != null && !!t && (n.comparisonPosition === i.Left || n.comparisonPosition === i.Right), s = !!n.icon && (n.iconPosition === i.Left || n.iconPosition === i.Right), c = o ? e.width + t.width : Math.max(e.width, t?.width ?? 0);
+	return o && n.comparisonGap === d.SmallGap && (c += V * a), s && (c += e.height), c <= r.width;
+}, J = ({ numberSize: e, comparisonNumberSize: t, numberProps: n, elementSize: r }) => {
+	let a = n.comparisonNumberValue != null && !!t && (n.comparisonPosition === i.Top || n.comparisonPosition === i.Bottom), o = !!n.icon && (n.iconPosition === i.Top || n.iconPosition === i.Bottom), s = a ? e.height + t.height : Math.max(e.height, t?.height ?? 0);
+	return o && (s += e.height), s <= r.height;
+}, Y = 1.2, X = ({ number: e, comparisonNumber: t }, n, r) => {
+	let { numberStyle: i, comparisonStyle: a } = n;
+	if (r.width === 0) return i.fontSize;
+	let o = g(), s = (a.relativeFontSizePercentage ?? c.relativeFontSizePercentage) / 100, l = 1;
+	for (let c = i.fontSize; c >= 1; --c) {
+		let u, d;
+		if (e && (u = {
+			width: o.getTextSize({
+				size: c,
+				label: e,
+				fontFamily: i.fontFamily,
+				letterSpacing: "0.05em",
+				fontWeight: 400
+			}).width,
+			height: c * Y
+		}), t) {
+			let e = c * s;
+			d = {
+				width: o.getTextSize({
+					size: e,
+					label: t,
+					fontFamily: a.fontFamily,
+					letterSpacing: "0.05em",
+					fontWeight: 400
+				}).width,
+				height: e * Y
+			};
+		}
+		if (q({
+			numberSize: u,
+			comparisonNumberSize: d,
+			numberProps: n,
+			elementSize: r,
+			fontSize: c
+		}) && J({
+			numberSize: u,
+			comparisonNumberSize: d,
+			numberProps: n,
+			elementSize: r,
+			fontSize: c
+		})) {
+			l = c;
+			break;
+		}
+	}
+	return o.cleanDOM(), l;
+}, Z = m(), Q = p((0, S.memo)(({ vSpec: e, vTheme: t, elementSize: n, data: r, vizProperties: i }) => {
+	let [a, o] = (0, S.useState)(0), s = L(), l = v(), u = A(e, t, r), { numberValue: d, numberFormat: f, comparisonNumberValue: p, comparisonFormat: m, backgroundColor: h } = u, g = a, _ = f ? y(f, a) : a, x = m ? y(m, p) : p, C = _ === "" || _ == null, w = C ? void 0 : `${_}`, T = x === "" || x == null ? void 0 : `${x}`, E = C ? u.numberStyle.fontSize || 14 : X({
+		number: w,
+		comparisonNumber: T
+	}, u, n);
+	return (0, S.useEffect)(() => {
+		let e;
+		return !i?.disable?.animations && typeof d == "number" ? (typeof g != "number" && (o(0), g = 0), e = B(d, g, o, !f)) : o(d), () => {
+			e && e();
+		};
+	}, [d]), (0, S.useEffect)(() => {
+		e && l();
+	}, [e]), /* @__PURE__ */ (0, Z.jsx)("div", {
+		className: s.mainContainer,
+		style: {
+			fontSize: `${E}px`,
+			alignItems: R(u.verticalAlign),
+			justifyContent: R(u.horizontalAlign),
+			backgroundColor: h
+		},
+		children: /* @__PURE__ */ (0, Z.jsxs)("div", {
+			className: s.numbersContainer,
+			style: {
+				alignItems: z(u),
+				flexDirection: G(u.comparisonPosition ?? u.iconPosition),
+				...U(u.comparisonGap, u.comparisonPosition)
+			},
+			children: [/* @__PURE__ */ (0, Z.jsxs)("div", {
+				className: s.comparisonIconContainer,
+				style: {
+					alignItems: R(u.textAlign),
+					flexDirection: G(u.iconPosition)
+				},
+				children: [/* @__PURE__ */ (0, Z.jsx)(b, {
+					name: u.icon,
+					testId: "indicator-icon",
+					style: {
+						fontSize: W(u.comparisonPosition, u.iconPosition),
+						color: u.iconColor ?? "inherit"
+					}
+				}), /* @__PURE__ */ (0, Z.jsx)("div", {
+					"data-testid": "number-comparison",
+					style: {
+						fontSize: `${(u.comparisonStyle.relativeFontSizePercentage ?? c.relativeFontSizePercentage) / 100}em`,
+						fontFamily: u.comparisonStyle.fontFamily,
+						fontStyle: u.comparisonStyle.italic ? "italic" : "normal",
+						fontWeight: u.comparisonStyle.weight || (u.comparisonStyle.bold ? "bold" : "normal"),
+						textDecoration: K(u.comparisonStyle.underlined, u.comparisonStyle.strikethrough),
+						color: u.comparisonColor ?? "inherit"
+					},
+					children: T
+				})]
+			}), /* @__PURE__ */ (0, Z.jsx)("div", {
+				className: s.number,
+				"data-testid": "number-base",
+				style: {
+					fontFamily: u.numberStyle.fontFamily,
+					fontStyle: u.numberStyle.italic ? "italic" : "normal",
+					fontWeight: u.numberStyle.weight || (u.numberStyle.bold ? "bold" : "normal"),
+					textDecoration: K(u.numberStyle.underlined, u.numberStyle.strikethrough),
+					color: u.numberColor
+				},
+				children: f && typeof a == "number" ? y(f, a) : a
+			})]
+		})
+	});
+}));
+export { Q as Number };