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