@astrato-io/visualizations 0.0.0-stage → 0.6.4

package/chunks/standalone-DFPva_ku.js

@@ -0,0 +1,299 @@
+import { o as e } from "./rolldown-runtime-DleVn1XH.js";
+import { Fa as t, La as n, Na as r, No as i, Oi as a, Pa as o, Pn as s, Ta as c, Ti as l, os as u, pc as d, ss as f } from "./interfaces-VUY4_yVO.js";
+import { G as p, Ki as m, Wn as h, Zt as g, d as _, pn as v, wi as y } from "./utils-Ba9T0TqC.js";
+import { r as b } from "./ui-D1HQNIBy.js";
+import { s as x } from "./coloring-C16AUZEi.js";
+var S = /* @__PURE__ */ e(m()), C = (e, n) => {
+	switch (e.thresholdType) {
+		case t.Range: return T(n, e.rangeThresholds ?? []);
+		case t.Target: return w(n, e.targetThreshold);
+		case t.None: return {};
+	}
+}, w = (e, t) => {
+	let n = s(t?.target, 0), { belowTargetColorAndIcon: r, targetColorAndIcon: i, aboveTargetColorAndIcon: a } = t || {};
+	return e < n * (1 - t.targetTolerance) ? r : e > n * (1 + t.targetTolerance) ? a : i;
+}, T = (e, t) => [...t].sort((e, t) => s(t.rangeTo, 0) - s(e.rangeTo, 0)).reduce((t, n) => e < s(n.rangeTo, 0) ? n.colorAndIcon : t, {}), 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: u.Center,
+	horizontalAlign: u.Center,
+	verticalAlign: f.Middle,
+	numberStyle: {
+		fontSize: 12,
+		fontFamily: "Roboto",
+		bold: !1,
+		italic: !1,
+		underlined: !1,
+		strikethrough: !1
+	},
+	comparisonStyle: {
+		relativeFontSizePercentage: a.relativeFontSizePercentage,
+		fontFamily: "Roboto",
+		bold: !1,
+		italic: !1,
+		underlined: !1,
+		strikethrough: !1
+	},
+	comparisonGap: r.SmallGap,
+	...O
+}, A = (e, t, r) => {
+	if (!r?.length || !e) return k;
+	let i = t || c, a = i.fonts.general.fontFamily, o = F(r, e.measures.find((e) => l(e) && e.role === n.NUMBER_MEASURE), !0), { numberValue: s, numberFormat: u, comparisonNumberValue: d, comparisonFormat: f } = j(e, r);
+	return {
+		...N(e, i, o, d),
+		numberValue: s,
+		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, s = e.measures.filter(l), c = s.filter((e) => e.role === n.NUMBER_MEASURE), u = s.filter((e) => e.role === n.NUMBER_COMPARISON), d = c[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 r = e.measures.filter(l), i = r.filter((e) => e.role === n.NUMBER_MEASURE), a = r.filter((e) => e.role === n.NUMBER_COMPARISON), s = i[0], c = a[0];
+	if (!c) return;
+	let u = +F(t, s), d = +F(t, c), f = e.numberSettings?.data?.comparisonType, p = Math.abs(d);
+	return f === o.PercentageToComparison ? u === 0 && d === 0 ? 1 : u / p : f === o.PercentageAboveBelow ? u === 0 && d === 0 ? 0 : (u - d) / p : f === o.Difference ? u - d : d;
+}, N = (e, r, i, a) => {
+	let o = e.measures.filter(l), s = o.filter((e) => e.role === n.NUMBER_MEASURE), c = o.filter((e) => e.role === n.NUMBER_COMPARISON), u = s[0], d = c[0];
+	return (e.numberSettings?.thresholds ?? []).filter((e) => e.thresholdType !== t.None).reduce((e, t) => {
+		if (t.measureRule === "main" ? u : d) {
+			let n = C(t, t.measureRule === "main" ? i : a);
+			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, r));
+}, 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 = d(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(l).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 = p({
+	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 u.Left: return "flex-start";
+		case f.Bottom:
+		case u.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 === r.None ? {} : e === r.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: a, fontSize: o }) => {
+	let s = n.comparisonNumberValue != null && !!t && (n.comparisonPosition === i.Left || n.comparisonPosition === i.Right), c = !!n.icon && (n.iconPosition === i.Left || n.iconPosition === i.Right), l = s ? e.width + t.width : Math.max(e.width, t?.width ?? 0);
+	return s && n.comparisonGap === r.SmallGap && (l += V * o), c && (l += e.height), l <= a.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: o } = n;
+	if (r.width === 0) return i.fontSize;
+	let s = h(), c = (o.relativeFontSizePercentage ?? a.relativeFontSizePercentage) / 100, l = 1;
+	for (let a = i.fontSize; a >= 1; --a) {
+		let u, d;
+		if (e && (u = {
+			width: s.getTextSize({
+				size: a,
+				label: e,
+				fontFamily: i.fontFamily,
+				letterSpacing: "0.05em",
+				fontWeight: 400
+			}).width,
+			height: a * Y
+		}), t) {
+			let e = a * c;
+			d = {
+				width: s.getTextSize({
+					size: e,
+					label: t,
+					fontFamily: o.fontFamily,
+					letterSpacing: "0.05em",
+					fontWeight: 400
+				}).width,
+				height: e * Y
+			};
+		}
+		if (q({
+			numberSize: u,
+			comparisonNumberSize: d,
+			numberProps: n,
+			elementSize: r,
+			fontSize: a
+		}) && J({
+			numberSize: u,
+			comparisonNumberSize: d,
+			numberProps: n,
+			elementSize: r,
+			fontSize: a
+		})) {
+			l = a;
+			break;
+		}
+	}
+	return s.cleanDOM(), l;
+}, Z = y(), Q = g((0, S.memo)(({ vSpec: e, vTheme: t, elementSize: n, data: r, vizProperties: i }) => {
+	let [o, s] = (0, S.useState)(0), c = L(), l = _(), u = A(e, t, r), { numberValue: d, numberFormat: f, comparisonNumberValue: p, comparisonFormat: m, backgroundColor: h } = u, g = o, y = f ? v(f, o) : o, x = m ? v(m, p) : p, C = y === "" || y == null, w = C ? void 0 : `${y}`, 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" && (s(0), g = 0), e = B(d, g, s, !f)) : s(d), () => {
+			e && e();
+		};
+	}, [d]), (0, S.useEffect)(() => {
+		e && l();
+	}, [e]), /* @__PURE__ */ (0, Z.jsx)("div", {
+		className: c.mainContainer,
+		style: {
+			fontSize: `${E}px`,
+			alignItems: R(u.verticalAlign),
+			justifyContent: R(u.horizontalAlign),
+			backgroundColor: h
+		},
+		children: /* @__PURE__ */ (0, Z.jsxs)("div", {
+			className: c.numbersContainer,
+			style: {
+				alignItems: z(u),
+				flexDirection: G(u.comparisonPosition ?? u.iconPosition),
+				...U(u.comparisonGap, u.comparisonPosition)
+			},
+			children: [/* @__PURE__ */ (0, Z.jsxs)("div", {
+				className: c.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 ?? a.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: c.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 o == "number" ? v(f, o) : o
+			})]
+		})
+	});
+}));
+export { Q as Number };