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