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