import { computed as p, ref as m, onMounted as T, openBlock as n, createElementBlock as r, normalizeStyle as g, createElementVNode as u, toDisplayString as k, createCommentVNode as h, unref as b, Fragment as D, renderList as z, normalizeClass as A, createBlock as q } from "vue";
import { u as H, c as j, t as X, a as J, p as d, b as K, d as P, o as Q, e as E, g as R, f as I, X as W, v as Y, w as Z, i as ee } from "./index-CguVaFlt.js";
import { u as U } from "./useNestedProp-BbEbJmgv.js";
import te from "./vue-ui-skeleton-ChHLL5Hw.js";
import { _ as le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ae = ["xmlns", "viewBox"], oe = ["id"], se = ["stop-color"], ne = ["stop-color"], re = ["stop-color"], ue = {
  id: "stackPill",
  clipPathUnits: "objectBoundingBox"
}, ie = ["fill"], ce = { "clip-path": "url(#stackPill)" }, de = ["height", "width", "fill"], ve = ["onClick", "x", "width", "height", "fill", "stroke"], ge = ["onClick"], pe = { style: { display: "flex", "flex-direction": "row", "align-items": "center", gap: "4px", "justify-content": "center" } }, he = ["height", "width"], ye = ["fill"], fe = {
  __name: "vue-ui-sparkstackbar",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ["selectDatapoint"],
  setup(O, { emit: V }) {
    const i = O, { vue_ui_sparkstackbar: G } = H(), L = p(() => !!i.dataset && i.dataset.length), N = m(j()), e = p(() => {
      const t = U({
        userConfig: i.config,
        defaultConfig: G
      });
      return t.theme ? {
        ...U({
          userConfig: X.vue_ui_sparkstackbar[t.theme] || i.config,
          defaultConfig: t
        }),
        customPalette: J[t.theme] || d
      } : t;
    }), x = p(() => K(e.value.customPalette)), y = m(i.dataset.map((t, a) => ({
      ...t,
      value: e.value.style.animation.show ? 0 : t.value || 0,
      color: t.color ? P(t.color) : x.value[a] || d[a] || d[a % d.length]
    }))), _ = m(!0);
    T(() => {
      if (Q(i.dataset) ? E({
        componentName: "VueUiSparkStackbar",
        type: "dataset"
      }) : i.dataset.forEach((t, a) => {
        R({
          datasetObject: t,
          requiredAttributes: ["name", "value"]
        }).forEach((l) => {
          E({
            componentName: "VueUiSparkStackbar",
            type: "datasetSerieAttribute",
            property: l,
            index: a
          });
        });
      }), e.value.style.animation.show) {
        let S = function() {
          o += l / t, o < l ? (y.value = y.value.map((s, c) => ({
            ...s,
            value: s.value += a[c],
            color: s.color ? P(s.color) : x.value[c] || d[c] || d[c % d.length]
          })), requestAnimationFrame(S)) : (_.value = !1, y.value = i.dataset.map((s, c) => ({
            ...s,
            value: s.value || 0,
            color: s.color ? P(s.color) : x.value[c] || d[c] || d[c % d.length],
            id: j()
          })));
        };
        const t = e.value.style.animation.animationFrames, a = i.dataset.map((s, c) => s.value / t), l = i.dataset.map((s) => s.value || 0).reduce((s, c) => s + c, 0);
        let o = 0;
        _.value = !0, S();
      }
    });
    const f = m({
      width: 500,
      height: 16
    }), v = m([]), w = p(() => i.dataset.map((t) => t.value || 0).filter((t, a) => !v.value.includes(a)).reduce((t, a) => t + a, 0)), B = p(() => y.value.map((t, a) => ({
      ...t,
      value: t.value || 0,
      proportion: (t.value || 0) / w.value,
      width: (t.value || 0) / w.value * f.value.width,
      proportionLabel: I({
        v: (t.value || 0) / w.value * 100,
        s: "%",
        r: e.value.style.legend.percentage.rounding
      })
    }))), $ = p(() => B.value.filter((t, a) => !v.value.includes(a)));
    function M(t) {
      v.value.includes(t) ? v.value = v.value.filter((a) => a !== t) : v.value.length < y.value.length - 1 && v.value.push(t);
    }
    const C = p(() => {
      let t = 0;
      const a = [];
      for (let l = 0; l < $.value.length; l += 1)
        a.push({
          ...$.value[l],
          start: t
        }), t += $.value[l].width;
      return a;
    });
    function F(t, a) {
      V("selectDatapoint", { datapoint: t, index: a });
    }
    return (t, a) => (n(), r("div", {
      style: g(`width:100%; background:${e.value.style.backgroundColor}`)
    }, [
      e.value.style.title.text ? (n(), r("div", {
        key: 0,
        style: g(`width:calc(100% - 12px);background:${e.value.style.backgroundColor};margin:0 auto;margin:${e.value.style.title.margin};padding: 0 6px;text-align:${e.value.style.title.textAlign}`)
      }, [
        u("div", {
          style: g(`font-size:${e.value.style.title.fontSize}px;color:${e.value.style.title.color};font-weight:${e.value.style.title.bold ? "bold" : "normal"}`)
        }, k(e.value.style.title.text), 5),
        e.value.style.title.subtitle.text ? (n(), r("div", {
          key: 0,
          style: g(`font-size:${e.value.style.title.subtitle.fontSize}px;color:${e.value.style.title.subtitle.color};font-weight:${e.value.style.title.subtitle.bold ? "bold" : "normal"}`)
        }, k(e.value.style.title.subtitle.text), 5)) : h("", !0)
      ], 4)) : h("", !0),
      L.value ? (n(), r("svg", {
        key: 1,
        xmlns: b(W),
        width: "100%",
        viewBox: `0 0 ${f.value.width} ${f.value.height}`
      }, [
        u("defs", null, [
          (n(!0), r(D, null, z(C.value, (l, o) => (n(), r("linearGradient", {
            key: `stack_gradient_${o}`,
            gradientTransform: "rotate(90)",
            id: `stack_gradient_${o}_${N.value}`
          }, [
            u("stop", {
              offset: "0%",
              "stop-color": l.color
            }, null, 8, se),
            u("stop", {
              offset: "50%",
              "stop-color": `${b(Y)(l.color, 0.05)}${b(Z)[100 - e.value.style.bar.gradient.intensity]}`
            }, null, 8, ne),
            u("stop", {
              offset: "100%",
              "stop-color": l.color
            }, null, 8, re)
          ], 8, oe))), 128)),
          u("clipPath", ue, [
            u("rect", {
              x: "0.005",
              y: "-2",
              width: "0.99",
              height: "5",
              rx: "3",
              ry: "3",
              fill: e.value.style.backgroundColor
            }, null, 8, ie)
          ])
        ]),
        u("g", ce, [
          u("rect", {
            x: 0,
            y: 0,
            height: f.value.height,
            width: C.value.map((l) => l.width).reduce((l, o) => l + o, 0),
            fill: e.value.style.bar.gradient.underlayerColor,
            class: A({ animated: !_.value })
          }, null, 10, de),
          (n(!0), r(D, null, z(C.value, (l, o) => (n(), r("rect", {
            key: `stack_${o}`,
            onClick: () => F(l, o),
            x: l.start,
            y: 0,
            width: l.width,
            height: f.value.height,
            fill: e.value.style.bar.gradient.show ? `url(#stack_gradient_${o}_${N.value})` : l.color,
            stroke: e.value.style.backgroundColor,
            "stroke-linecap": "round",
            class: A({ animated: !_.value })
          }, null, 10, ve))), 128))
        ])
      ], 8, ae)) : h("", !0),
      L.value ? h("", !0) : (n(), q(te, {
        key: 2,
        config: {
          type: "sparkStackbar",
          style: {
            backgroundColor: e.value.style.backgroundColor,
            sparkStackbar: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"])),
      e.value.style.legend.show ? (n(), r("div", {
        key: 3,
        style: g(`background:${e.value.style.backgroundColor};margin:0 auto;margin:${e.value.style.legend.margin};justify-content:${e.value.style.legend.textAlign === "left" ? "flex-start" : e.value.style.legend.textAlign === "right" ? "flex-end" : "center"}`),
        class: "vue-ui-sparkstackbar-legend"
      }, [
        (n(!0), r(D, null, z(B.value, (l, o) => (n(), r("div", {
          style: g(`font-size:${e.value.style.legend.fontSize}px;`),
          class: A({ "vue-ui-sparkstackbar-legend-item": !0, "vue-ui-sparkstackbar-legend-item-unselected": v.value.includes(o) }),
          onClick: (S) => {
            M(o), F(l, o);
          }
        }, [
          u("div", pe, [
            (n(), r("svg", {
              height: `${e.value.style.legend.fontSize}px`,
              width: `${e.value.style.legend.fontSize}px`,
              viewBox: "0 0 10 10"
            }, [
              u("circle", {
                cx: 5,
                cy: 5,
                r: 5,
                fill: l.color
              }, null, 8, ye)
            ], 8, he)),
            u("span", {
              style: g(`color:${e.value.style.legend.name.color}; font-weight:${e.value.style.legend.name.bold ? "bold" : "normal"}`)
            }, k(l.name), 5),
            e.value.style.legend.percentage.show ? (n(), r("span", {
              key: 0,
              style: g(`font-weight:${e.value.style.legend.percentage.bold ? "bold" : "normal"};color:${e.value.style.legend.percentage.color}`)
            }, k(v.value.includes(o) ? " - " : l.proportionLabel), 5)) : h("", !0),
            e.value.style.legend.value.show ? (n(), r("span", {
              key: 1,
              style: g(`font-weight:${e.value.style.legend.value.bold ? "bold" : "normal"};color:${e.value.style.legend.value.color}`)
            }, " (" + k(b(ee)(
              e.value.style.legend.value.formatter,
              l.value,
              b(I)({
                p: e.value.style.legend.value.prefix,
                v: l.value,
                s: e.value.style.legend.value.suffix,
                r: e.value.style.legend.value.rounding
              }),
              { datapoint: l, seriesIndex: o }
            )) + ") ", 5)) : h("", !0)
          ])
        ], 14, ge))), 256))
      ], 4)) : h("", !0)
    ], 4));
  }
}, we = /* @__PURE__ */ le(fe, [["__scopeId", "data-v-86f11bbc"]]);
export {
  we as default
};
