import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderList as l } from "vue";
var u = ["data-content"], d = [".title"], f = /* @__PURE__ */ a({
	__name: "StackedRow",
	props: {
		value: {},
		height: {}
	},
	setup(a) {
		let f = a, p = t(() => ({
			height: f.height ?? "100%",
			minHeight: "82px"
		})), m = t(() => {
			let e = f.value || [], t = e.reduce((e, t) => e + t.value, 0);
			return e.map((e) => {
				let n = e.value / t * 100, r = e.label;
				return {
					color: e.color.toString(),
					description: e.description,
					fraction: n,
					label: r
				};
			});
		}), h = [
			-40,
			-50,
			-50,
			-50,
			-80
		];
		return (t, a) => (c(), r("div", {
			class: o([t.$style.component]),
			style: s(p.value)
		}, [i("div", { class: o(t.$style.track) }, [(c(), r(e, null, l([
			0,
			25,
			50,
			75,
			100
		], (e, t) => i("div", {
			key: t,
			style: s({
				left: `${e}%`,
				"--transform": `translateX(${h[t]}%)`
			}),
			"data-content": `${e}%`
		}, null, 12, u)), 64))], 2), i("div", { class: o(t.$style.container) }, [m.value.length ? n("", !0) : (c(), r("div", {
			key: 0,
			class: o(t.$style.notReady)
		}, "Not ready", 2)), (c(!0), r(e, null, l(m.value, (e, t) => (c(), r("div", {
			key: t,
			".title": e.description ?? e.label,
			style: s({
				width: `${e.fraction}%`,
				backgroundColor: e.color
			})
		}, null, 44, d))), 128))], 2)], 6));
	}
});
export { f as default };

//# sourceMappingURL=StackedRow.vue2.js.map