import { computed as m, ref as d, watch as Y, onMounted as se, openBlock as s, createElementBlock as r, normalizeStyle as v, createElementVNode as p, toDisplayString as w, createCommentVNode as y, unref as C, createVNode as G, Fragment as x, renderList as $, normalizeClass as F, createBlock as re, withCtx as q, renderSlot as j, normalizeProps as H, guardReactiveProps as X } from "vue";
import { u as ne, c as J, t as ue, a as ie, p as i, d as N, b as ce, o as de, e as K, g as ve, f as E, X as pe, s as ge, w as fe, i as Q, x as he } from "./index-Cm2_6s9o.js";
import { u as Z } from "./useNestedProp-BYPZJNhi.js";
import ye from "./vue-ui-skeleton-BUS6A44x.js";
import { _ as me } from "./PackageVersion-CTMY4zeY.js";
import { _ as be } from "./Tooltip-BBgfUr4a.js";
import { _ as ke } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const _e = ["xmlns", "viewBox"], we = ["id"], Ce = ["stop-color"], xe = ["stop-color"], $e = ["stop-color"], Se = {
  id: "stackPill",
  clipPathUnits: "objectBoundingBox"
}, ze = ["fill"], Pe = {
  key: 0,
  "clip-path": "url(#stackPill)"
}, De = ["x", "width", "height", "fill"], Fe = ["x", "width", "height", "fill", "stroke"], Ne = ["onClick", "x", "width", "height", "onMouseenter"], Ae = ["width", "height", "rx"], Le = ["onClick"], Be = { style: { display: "flex", "flex-direction": "row", "align-items": "center", gap: "4px", "justify-content": "center" } }, Oe = ["height", "width"], je = ["fill"], Ee = {
  key: 4,
  ref: "source",
  dir: "auto"
}, Me = {
  __name: "vue-ui-sparkstackbar",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ["selectDatapoint"],
  setup(ee, { emit: te }) {
    const u = ee, { vue_ui_sparkstackbar: le } = ne(), M = m(() => !!u.dataset && u.dataset.length), T = d(null), U = d(J()), A = d(!1), L = d(""), e = m({
      get: () => V(),
      set: (t) => t
    });
    function V() {
      const t = Z({
        userConfig: u.config,
        defaultConfig: le
      });
      return t.theme ? {
        ...Z({
          userConfig: ue.vue_ui_sparkstackbar[t.theme] || u.config,
          defaultConfig: t
        }),
        customPalette: ie[t.theme] || i
      } : t;
    }
    Y(() => u.config, (t) => {
      e.value = V(), I();
    }, { deep: !0 }), Y(() => u.dataset, (t) => {
      b.value = u.dataset.map((a, l) => ({
        ...a,
        color: a.color ? N(a.color) : S.value[l] || i[l] || i[l % i.length]
      }));
    }, { deep: !0 });
    const S = m(() => ce(e.value.customPalette)), b = d(u.dataset.map((t, a) => ({
      ...t,
      value: e.value.style.animation.show ? 0 : t.value || 0,
      color: t.color ? N(t.color) : S.value[a] || i[a] || i[a % i.length]
    }))), _ = d(!0);
    se(() => {
      if (I(), e.value.style.animation.show) {
        let h = function() {
          o += l / t, o < l ? (b.value = b.value.map((n, c) => ({
            ...n,
            value: n.value += a[c],
            color: n.color ? N(n.color) : S.value[c] || i[c] || i[c % i.length]
          })), requestAnimationFrame(h)) : (_.value = !1, b.value = u.dataset.map((n, c) => ({
            ...n,
            value: n.value || 0,
            color: n.color ? N(n.color) : S.value[c] || i[c] || i[c % i.length],
            id: J()
          })));
        };
        const t = e.value.style.animation.animationFrames, a = u.dataset.map((n, c) => n.value / t), l = u.dataset.map((n) => n.value || 0).reduce((n, c) => n + c, 0);
        let o = 0;
        _.value = !0, h();
      }
    });
    function I() {
      de(u.dataset) ? K({
        componentName: "VueUiSparkStackbar",
        type: "dataset"
      }) : u.dataset.forEach((t, a) => {
        ve({
          datasetObject: t,
          requiredAttributes: ["name", "value"]
        }).forEach((l) => {
          K({
            componentName: "VueUiSparkStackbar",
            type: "datasetSerieAttribute",
            property: l,
            index: a
          });
        });
      });
    }
    const g = d({
      width: 500,
      height: 16
    }), f = d([]), R = m(() => u.dataset.map((t) => t.value || 0).filter((t, a) => !f.value.includes(a)).reduce((t, a) => t + a, 0)), z = m(() => b.value.map((t, a) => {
      const l = t.value || 0, o = l / R.value, h = isNaN(o) ? 0 : o, n = h * g.value.width;
      return {
        ...t,
        value: l,
        proportion: h,
        width: n,
        proportionLabel: E({
          v: h * 100,
          s: "%",
          r: e.value.style.legend.percentage.rounding
        })
      };
    })), B = m(() => z.value.filter((t, a) => !f.value.includes(a)));
    function oe(t) {
      f.value.includes(t) ? f.value = f.value.filter((a) => a !== t) : f.value.length < b.value.length - 1 && f.value.push(t);
    }
    const P = m(() => {
      let t = 0;
      const a = [];
      for (let l = 0; l < B.value.length; l += 1)
        a.push({
          ...B.value[l],
          start: t
        }), t += B.value[l].width;
      return a;
    });
    function W(t, a) {
      te("selectDatapoint", { datapoint: t, index: a });
    }
    const O = d(null), D = d(!1), k = d(null);
    function ae({ datapoint: t, seriesIndex: a }) {
      if (!e.value.style.tooltip.show)
        return;
      O.value = { datapoint: t, seriesIndex: a, config: e.value, series: z.value }, A.value = !0, k.value = a;
      const l = e.value.style.tooltip.customFormat;
      if (he(l))
        try {
          const o = l({
            seriesIndex: a,
            datapoint: t,
            series: z.value,
            config: e.value
          });
          typeof o == "string" && (L.value = o, D.value = !0);
        } catch {
          console.warn("Custom format cannot be applied."), D.value = !1;
        }
      if (!D.value) {
        let o = "";
        o += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, o += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg>`, o += `<b>${t.proportionLabel}</b>`, o += `<span>(${Q(
          e.value.style.legend.value.formatter,
          t.value,
          E({
            p: e.value.style.legend.value.prefix,
            v: t.value,
            s: e.value.style.legend.value.suffix,
            r: e.value.style.legend.value.rounding
          }),
          {
            datapoint: t,
            seriesIndex: a
          }
        )})</span>`, L.value = `<div>${o}</div>`;
      }
    }
    return (t, a) => (s(), r("div", {
      ref_key: "sparkstackbarChart",
      ref: T,
      style: v(`width:100%; background:${e.value.style.backgroundColor}`)
    }, [
      e.value.style.title.text ? (s(), r("div", {
        key: 0,
        style: v(`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}`)
      }, [
        p("div", {
          style: v(`font-size:${e.value.style.title.fontSize}px;color:${e.value.style.title.color};font-weight:${e.value.style.title.bold ? "bold" : "normal"}`)
        }, w(e.value.style.title.text), 5),
        e.value.style.title.subtitle.text ? (s(), r("div", {
          key: 0,
          style: v(`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"}`)
        }, w(e.value.style.title.subtitle.text), 5)) : y("", !0)
      ], 4)) : y("", !0),
      M.value ? (s(), r("svg", {
        key: 1,
        xmlns: C(pe),
        width: "100%",
        viewBox: `0 0 ${g.value.width} ${g.value.height}`
      }, [
        G(me),
        p("defs", null, [
          (s(!0), r(x, null, $(P.value, (l, o) => (s(), r("linearGradient", {
            key: `stack_gradient_${o}`,
            gradientTransform: "rotate(90)",
            id: `stack_gradient_${o}_${U.value}`
          }, [
            p("stop", {
              offset: "0%",
              "stop-color": l.color
            }, null, 8, Ce),
            p("stop", {
              offset: "50%",
              "stop-color": C(ge)(C(fe)(l.color, 0.05), 100 - e.value.style.bar.gradient.intensity)
            }, null, 8, xe),
            p("stop", {
              offset: "100%",
              "stop-color": l.color
            }, null, 8, $e)
          ], 8, we))), 128)),
          p("clipPath", Se, [
            p("rect", {
              x: "0.005",
              y: "-2",
              width: "0.99",
              height: "5",
              rx: "3",
              ry: "3",
              fill: e.value.style.backgroundColor
            }, null, 8, ze)
          ])
        ]),
        R.value > 0 ? (s(), r("g", Pe, [
          (s(!0), r(x, null, $(P.value, (l, o) => (s(), r("rect", {
            key: `stack_underlayer_${o}`,
            x: l.start,
            y: 0,
            width: l.width,
            height: g.value.height,
            fill: e.value.style.bar.gradient.underlayerColor,
            class: F({ animated: !_.value }),
            style: v({
              opacity: k.value !== null && e.value.style.tooltip.show ? k.value === o ? 1 : 0.5 : 1
            })
          }, null, 14, De))), 128)),
          (s(!0), r(x, null, $(P.value, (l, o) => (s(), r("rect", {
            key: `stack_${o}`,
            x: l.start,
            y: 0,
            width: l.width,
            height: g.value.height,
            fill: e.value.style.bar.gradient.show ? `url(#stack_gradient_${o}_${U.value})` : l.color,
            stroke: e.value.style.backgroundColor,
            "stroke-linecap": "round",
            class: F({ animated: !_.value }),
            style: v({
              opacity: k.value !== null && e.value.style.tooltip.show ? k.value === o ? 1 : 0.5 : 1
            })
          }, null, 14, Fe))), 128)),
          (s(!0), r(x, null, $(P.value, (l, o) => (s(), r("rect", {
            key: `stack_trap_${o}`,
            onClick: () => W(l, o),
            x: l.start,
            y: 0,
            width: l.width,
            height: g.value.height,
            fill: "transparent",
            stroke: "none",
            class: F({ animated: !_.value }),
            onMouseenter: () => ae({ datapoint: l, seriesIndex: o }),
            onMouseleave: a[0] || (a[0] = (h) => {
              A.value = !1, k.value = null;
            })
          }, null, 42, Ne))), 128))
        ])) : (s(), r("rect", {
          key: 1,
          x: 2,
          y: 1,
          width: g.value.width - 4,
          height: g.value.height - 2,
          stroke: "#CCCCCC",
          "stroke-width": "2",
          fill: "transparent",
          rx: (g.value.height - 4) / 2
        }, null, 8, Ae))
      ], 8, _e)) : y("", !0),
      M.value ? y("", !0) : (s(), re(ye, {
        key: 2,
        config: {
          type: "sparkStackbar",
          style: {
            backgroundColor: e.value.style.backgroundColor,
            sparkStackbar: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"])),
      e.value.style.legend.show ? (s(), r("div", {
        key: 3,
        style: v(`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"
      }, [
        (s(!0), r(x, null, $(z.value, (l, o) => (s(), r("div", {
          style: v(`font-size:${e.value.style.legend.fontSize}px;`),
          class: F({ "vue-ui-sparkstackbar-legend-item": !0, "vue-ui-sparkstackbar-legend-item-unselected": f.value.includes(o) }),
          onClick: (h) => {
            oe(o), W(l, o);
          }
        }, [
          p("div", Be, [
            (s(), r("svg", {
              height: `${e.value.style.legend.fontSize}px`,
              width: `${e.value.style.legend.fontSize}px`,
              viewBox: "0 0 10 10"
            }, [
              p("circle", {
                cx: 5,
                cy: 5,
                r: 5,
                fill: l.color
              }, null, 8, je)
            ], 8, Oe)),
            p("span", {
              style: v(`color:${e.value.style.legend.name.color}; font-weight:${e.value.style.legend.name.bold ? "bold" : "normal"}`)
            }, w(l.name), 5),
            e.value.style.legend.percentage.show ? (s(), r("span", {
              key: 0,
              style: v(`font-weight:${e.value.style.legend.percentage.bold ? "bold" : "normal"};color:${e.value.style.legend.percentage.color}`)
            }, w(f.value.includes(o) ? " - " : l.proportionLabel), 5)) : y("", !0),
            e.value.style.legend.value.show ? (s(), r("span", {
              key: 1,
              style: v(`font-weight:${e.value.style.legend.value.bold ? "bold" : "normal"};color:${e.value.style.legend.value.color}`)
            }, " (" + w(C(Q)(
              e.value.style.legend.value.formatter,
              l.value,
              C(E)({
                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, Le))), 256))
      ], 4)) : y("", !0),
      G(be, {
        show: A.value && e.value.style.tooltip.show,
        parent: T.value,
        backgroundColor: e.value.style.tooltip.backgroundColor,
        color: e.value.style.tooltip.color,
        fontSize: e.value.style.tooltip.fontSize,
        borderRadius: e.value.style.tooltip.borderRadius,
        borderColor: e.value.style.tooltip.borderColor,
        borderWidth: e.value.style.tooltip.borderWidth,
        backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
        position: e.value.style.tooltip.position,
        content: L.value,
        isCustom: D.value,
        offsetY: -124 + e.value.style.tooltip.offsetY,
        blockShiftY: !0
      }, {
        "tooltip-before": q(() => [
          j(t.$slots, "tooltip-before", H(X({ ...O.value })), void 0, !0)
        ]),
        "tooltip-after": q(() => [
          j(t.$slots, "tooltip-after", H(X({ ...O.value })), void 0, !0)
        ]),
        _: 3
      }, 8, ["show", "parent", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "content", "isCustom", "offsetY"]),
      t.$slots.source ? (s(), r("div", Ee, [
        j(t.$slots, "source", {}, void 0, !0)
      ], 512)) : y("", !0)
    ], 4));
  }
}, Ge = /* @__PURE__ */ ke(Me, [["__scopeId", "data-v-233900f7"]]);
export {
  Ge as default
};
