vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-sparkstackbar-DK5n8IKP.js

@@ -0,0 +1,621 @@
+import { defineAsyncComponent as ge, useSlots as Ye, onMounted as pe, ref as d, computed as C, toRefs as Ge, watch as he, openBlock as r, createElementBlock as i, normalizeStyle as b, createElementVNode as f, toDisplayString as K, createBlock as Z, createCommentVNode as m, unref as g, createVNode as ye, Fragment as L, renderList as V, normalizeClass as H, renderSlot as R, normalizeProps as ee, guardReactiveProps as te, withCtx as me } from "vue";
+import { j as be, t as ke, m as We, p as c, s as N, n as qe, o as Xe, q as _e, r as Je, l as Y, k as le, X as Qe, u as we, v as xe, T as Ze } from "./lib-DBptbyyI.js";
+import { u as et } from "./useConfig-DO94Aj5s.js";
+import { u as tt, B as lt } from "./BaseScanner-BhhkKVoj.js";
+import { u as oe } from "./useNestedProp-Bf5XFbs8.js";
+import { u as ot } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as at } from "./useChartAccessibility-9icAAmYg.js";
+import st from "./vue_ui_sparkstackbar-BSexvOuM.js";
+import { B as nt } from "./BaseLegendToggle-BQVIawmA.js";
+import { A as rt } from "./A11yDataTable-KcVAX2cP.js";
+import { _ as ut } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const it = ["id"], ct = { style: { position: "relative" } }, vt = ["xmlns", "viewBox", "aria-describedby"], dt = ["id"], ft = ["stop-color"], gt = ["stop-color"], pt = ["stop-color"], ht = {
+  id: "stackPill",
+  clipPathUnits: "objectBoundingBox"
+}, yt = ["fill"], mt = {
+  key: 0,
+  "clip-path": "url(#stackPill)"
+}, bt = ["x", "width", "height", "fill"], kt = ["x", "width", "height", "fill", "stroke"], _t = ["x", "width", "height", "onClick", "onMouseenter", "onMouseleave"], wt = ["width", "height", "rx"], xt = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Ct = ["aria-pressed", "aria-label", "onClick", "onFocus", "onKeydown"], $t = { style: { display: "flex", "flex-direction": "row", "align-items": "center", gap: "4px", "justify-content": "center" } }, St = ["height", "width"], At = ["id"], It = ["stop-color"], Ft = ["stop-color"], Tt = ["fill"], Pt = {
+  key: 3,
+  ref: "source",
+  dir: "auto"
+}, Dt = {
+  __name: "vue-ui-sparkstackbar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(Ce, { expose: $e, emit: Se }) {
+    const Ae = ge(() => import("./PackageVersion-DPO-OOVI.js")), Ie = ge(() => import("./Tooltip-Bf-kM3_A.js")), { vue_ui_sparkstackbar: Fe } = et(), { isThemeValid: Te, warnInvalidTheme: Pe } = ot(), $ = Ce, De = Ye();
+    pe(() => {
+      De["chart-background"] && console.warn("VueUiSparkStackbar does not support the #chart-background slot.");
+    });
+    const ae = d(null), S = d(be()), A = d(!1), G = d(""), W = d(null), z = d(!1), k = d(null), se = d({ x: 0, y: 0 }), I = d("pointer"), q = d(!1), _ = d(null), Le = d([]), t = d(X()), ne = C(() => t.value.useCursorPointer), Be = C(() => ke({
+      defaultConfig: {
+        style: {
+          backgroundColor: "#99999930",
+          animation: { show: !1 },
+          bar: { gradient: { inderlayerColor: "#6A6A6A" } },
+          title: {
+            backgroundColor: "transparent"
+          }
+        }
+      },
+      userConfig: t.value.skeletonConfig ?? {}
+    })), { loading: F, FINAL_DATASET: x } = tt({
+      ...Ge($),
+      FINAL_CONFIG: t,
+      prepareConfig: X,
+      skeletonDataset: $.config?.skeletonDataset ?? [
+        { name: "_", value: 8, color: "#808080" },
+        { name: "_", value: 5, color: "#ADADAD" },
+        { name: "_", value: 3, color: "#DBDBDB" }
+      ],
+      skeletonConfig: ke({
+        defaultConfig: t.value,
+        userConfig: Be.value
+      })
+    }), { svgRef: M } = at({ config: t.value.style.title });
+    function X() {
+      const e = oe({
+        userConfig: $.config,
+        defaultConfig: Fe
+      }), l = e.theme;
+      if (!l) return e;
+      if (!Te.value(e))
+        return Pe(e), e;
+      const o = oe({
+        userConfig: st[l] || $.config,
+        defaultConfig: e
+      }), a = oe({
+        userConfig: $.config,
+        defaultConfig: o
+      });
+      return {
+        ...a,
+        customPalette: a.customPalette.length ? a.customPalette : We[l] || c
+      };
+    }
+    he(() => $.config, (e) => {
+      t.value = X(), ie();
+    }, { deep: !0 }), he(() => x.value, (e) => {
+      T.value = x.value.map((l, o) => ({
+        ...l,
+        color: l.color ? N(l.color) : B.value[o] || c[o] || c[o % c.length]
+      })), re();
+    }, { deep: !0 });
+    const B = C(() => qe(t.value.customPalette)), T = d(x.value.map((e, l) => ({
+      ...e,
+      value: t.value.style.animation.show ? 0 : e.value || 0,
+      color: e.color ? N(e.color) : B.value[l] || c[l] || c[l % c.length]
+    }))), P = d(!0);
+    function re() {
+      if (!t.value.style.animation.show) {
+        P.value = !1;
+        return;
+      }
+      const e = t.value.style.animation.animationFrames, l = x.value.map((u) => u.value || 0), o = l.map((u) => u / e), a = l.reduce((u, s) => u + s, 0);
+      let n = 0;
+      P.value = !0, T.value = x.value.map((u, s) => ({
+        ...u,
+        value: 0,
+        color: u.color ? N(u.color) : B.value[s] || c[s] || c[s % c.length]
+      }));
+      function w() {
+        n += a / e, n < a ? (T.value = T.value.map((u, s) => ({
+          ...u,
+          value: Math.min(u.value + o[s], l[s]),
+          color: u.color ? N(u.color) : B.value[s] || c[s] || c[s % c.length]
+        })), requestAnimationFrame(w)) : (P.value = !1, T.value = x.value.map((u, s) => ({
+          ...u,
+          value: l[s],
+          color: u.color ? N(u.color) : B.value[s] || c[s] || c[s % c.length],
+          id: be()
+        })));
+      }
+      w();
+    }
+    pe(() => {
+      ie();
+    });
+    const ue = C(() => t.value.debug);
+    function ie() {
+      Xe($.dataset) ? _e({
+        componentName: "VueUiSparkStackbar",
+        type: "dataset",
+        debug: ue.value
+      }) : $.dataset.forEach((e, l) => {
+        Je({
+          datasetObject: e,
+          requiredAttributes: ["name", "value"]
+        }).forEach((o) => {
+          _e({
+            componentName: "VueUiSparkStackbar",
+            type: "datasetSerieAttribute",
+            property: o,
+            index: l,
+            debug: ue.value
+          });
+        });
+      }), re();
+    }
+    const h = d({
+      width: 500,
+      height: 16
+    }), v = d([]), ce = C(() => x.value.map((e) => e.value || 0).filter((e, l) => !v.value.includes(l)).reduce((e, l) => e + l, 0)), y = C(() => T.value.map((e, l) => {
+      const o = e.value || 0, a = o / ce.value, n = isNaN(a) ? 0 : a, w = n * h.value.width;
+      return {
+        ...e,
+        color: N(x.value[l]?.color ? x.value[l]?.color : B.value[l] || c[l] || c[l % c.length]),
+        value: o,
+        proportion: n,
+        width: w,
+        seriesIndex: l,
+        proportionLabel: Y({
+          v: n * 100,
+          s: "%",
+          r: t.value.style.legend.percentage.rounding
+        })
+      };
+    })), J = C(() => y.value.filter((e, l) => !v.value.includes(l)));
+    function Ee() {
+      v.value.length ? v.value = [] : y.value.forEach((e, l) => {
+        v.value.push(l);
+      });
+    }
+    function U(e) {
+      v.value.includes(e) ? v.value = v.value.filter((l) => l !== e) : v.value.length < T.value.length - 1 && v.value.push(e);
+    }
+    function ve(e) {
+      if (!y.value.length)
+        return t.value.debug && console.warn("VueUiSparkStackbar - There are no series to show."), null;
+      const l = y.value.find((o) => o.name === e);
+      return l || (t.value.debug && console.warn(`VueUiSparkStackbar - Series name not found "${e}"`), null);
+    }
+    function Ke(e) {
+      const l = ve(e);
+      l !== null && v.value.includes(l.id) && U(l.seriesIndex);
+    }
+    function Ne(e) {
+      const l = ve(e);
+      l !== null && (v.value.includes(l.id) || U(l.seriesIndex));
+    }
+    const p = C(() => {
+      let e = 0;
+      const l = [];
+      for (let o = 0; o < J.value.length; o += 1)
+        l.push({
+          ...J.value[o],
+          start: e
+        }), e += J.value[o].width;
+      return l;
+    }), ze = Se;
+    function O(e, l, o = !1) {
+      ze("selectDatapoint", { datapoint: e, index: l }), t.value.events.datapointClick && !o && t.value.events.datapointClick({ datapoint: e, seriesIndex: e.seriesIndex });
+    }
+    function Me({ datapoint: e, seriesIndex: l }) {
+      A.value = !1, _.value = null, k.value = null, I.value = "pointer", t.value.events.datapointLeave && t.value.events.datapointLeave({ datapoint: e, seriesIndex: e.seriesIndex });
+    }
+    function de({ datapoint: e, seriesIndex: l, triggerMode: o = "pointer" }) {
+      if (z.value = !1, t.value.events.datapointEnter && t.value.events.datapointEnter({ datapoint: e, seriesIndex: e.seriesIndex }), !t.value.style.tooltip.show)
+        return;
+      I.value = o, W.value = { datapoint: e, seriesIndex: l, config: t.value, series: y.value }, A.value = !0, _.value = l;
+      const a = t.value.style.tooltip.customFormat;
+      if (Ze(a))
+        try {
+          const n = a({
+            seriesIndex: e.seriesIndex,
+            datapoint: e,
+            series: y.value,
+            config: t.value
+          });
+          typeof n == "string" && (G.value = n, z.value = !0);
+        } catch {
+          console.warn("Custom format cannot be applied."), z.value = !1;
+        }
+      if (!z.value) {
+        let n = "";
+        n += `<div style="width:100%;text-align:center;border-bottom:1px solid ${t.value.style.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${e.name}</div>`, n += `<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="${e.color}"/></svg>`, n += `<b>${e.proportionLabel}</b>`, n += `<span>(${le(
+          t.value.style.legend.value.formatter,
+          e.value,
+          Y({
+            p: t.value.style.legend.value.prefix,
+            v: e.value,
+            s: t.value.style.legend.value.suffix,
+            r: t.value.style.legend.value.rounding
+          }),
+          {
+            datapoint: e,
+            seriesIndex: l
+          }
+        )})</span>`, G.value = `<div>${n}</div>`;
+      }
+    }
+    function j(e) {
+      const l = Le.value[e];
+      l && typeof l.focus == "function" && l.focus();
+    }
+    function Ve(e) {
+      if (!Number.isFinite(e) || !M.value) return;
+      const l = p.value[e];
+      if (!l) return;
+      const o = M.value.getBoundingClientRect(), a = l.start + l.width / 2, n = h.value.height / 2;
+      se.value = {
+        x: o.left + a / h.value.width * o.width,
+        y: o.top + n / h.value.height * o.height
+      };
+    }
+    function Re() {
+      k.value = null, q.value = !0;
+    }
+    function Ue() {
+      k.value = null, I.value = "pointer", A.value = !1, _.value = null, q.value = !1;
+    }
+    function Oe(e) {
+      if (!M.value || document.activeElement !== M.value || !p.value.length) return;
+      const l = e.key === "ArrowLeft", o = e.key === "ArrowRight", a = e.key === "Enter" || e.key === " ", n = e.key === "Escape", w = e.key === "Home", u = e.key === "End";
+      if (!l && !o && !a && !n && !w && !u)
+        return;
+      if (e.preventDefault(), e.stopPropagation(), n) {
+        k.value = null, I.value = "pointer", A.value = !1, _.value = null;
+        return;
+      }
+      if (a) {
+        if (k.value === null) return;
+        const D = p.value[k.value];
+        if (!D) return;
+        O(D, D.seriesIndex);
+        return;
+      }
+      let s = k.value;
+      w ? s = 0 : u ? s = p.value.length - 1 : s === null || s < 0 || s >= p.value.length ? s = o ? 0 : p.value.length - 1 : o ? (s += 1, s >= p.value.length && (s = 0)) : l && (s -= 1, s < 0 && (s = p.value.length - 1));
+      const E = p.value[s];
+      E && (k.value = s, Ve(s), de({
+        datapoint: E,
+        seriesIndex: E.seriesIndex,
+        triggerMode: "keyboard"
+      }));
+    }
+    function je(e) {
+      A.value = !1, k.value = null, I.value = "pointer", _.value = e.seriesIndex;
+    }
+    function fe() {
+      k.value = null, I.value = "pointer", A.value = !1, _.value = null;
+    }
+    function He(e, l, o) {
+      const a = e.key === "Enter" || e.key === " ", n = e.key === "ArrowLeft" || e.key === "ArrowUp", w = e.key === "ArrowRight" || e.key === "ArrowDown", u = e.key === "Home", s = e.key === "End", E = e.key === "Escape";
+      if (!(!a && !n && !w && !u && !s && !E)) {
+        if (e.preventDefault(), e.stopPropagation(), E) {
+          fe();
+          return;
+        }
+        if (a) {
+          U(o), O(l, o, !0);
+          return;
+        }
+        if (u) {
+          j(0);
+          return;
+        }
+        if (s) {
+          j(y.value.length - 1);
+          return;
+        }
+        if (n) {
+          const D = o <= 0 ? y.value.length - 1 : o - 1;
+          j(D);
+          return;
+        }
+        if (w) {
+          const D = o >= y.value.length - 1 ? 0 : o + 1;
+          j(D);
+        }
+      }
+    }
+    const Q = C(() => ({
+      headers: [
+        t.value.a11y.translations.series,
+        t.value.a11y.translations.percentage,
+        t.value.a11y.translations.value
+      ],
+      rows: y.value.map((e, l) => [
+        e.name,
+        v.value.includes(l) ? " - " : e.proportionLabel,
+        le(
+          t.value.style.legend.value.formatter,
+          e.value,
+          Y({
+            p: t.value.style.legend.value.prefix,
+            v: e.value,
+            s: t.value.style.legend.value.suffix,
+            r: t.value.style.legend.value.rounding
+          }),
+          {
+            datapoint: e,
+            seriesIndex: l
+          }
+        )
+      ])
+    }));
+    return $e({
+      hideSeries: Ne,
+      showSeries: Ke
+    }), (e, l) => (r(), i("div", {
+      class: "vue-data-ui-component vue-ui-spark-stackbar",
+      ref_key: "sparkstackbarChart",
+      ref: ae,
+      style: b(`width:100%; background:${t.value.style.backgroundColor}`)
+    }, [
+      f("div", {
+        id: `chart-instructions-${S.value}`,
+        class: "sr-only"
+      }, [
+        f("p", null, K(t.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, it),
+      Q.value?.rows?.length ? (r(), Z(rt, {
+        key: 0,
+        uid: S.value,
+        head: Q.value.headers,
+        body: Q.value.rows,
+        notice: t.value.a11y.translations.tableAvailable,
+        caption: t.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : m("", !0),
+      t.value.style.title.text ? (r(), i("div", {
+        key: 1,
+        style: b(`width:calc(100% - 12px);background:transparent;margin:0 auto;margin:${t.value.style.title.margin};padding: 0 6px;text-align:${t.value.style.title.textAlign}`)
+      }, [
+        f("div", {
+          class: "atom-title",
+          style: b(`font-size:${t.value.style.title.fontSize}px;color:${t.value.style.title.color};font-weight:${t.value.style.title.bold ? "bold" : "normal"}`)
+        }, K(t.value.style.title.text), 5),
+        t.value.style.title.subtitle.text ? (r(), i("div", {
+          key: 0,
+          class: "atom-subtitle",
+          style: b(`font-size:${t.value.style.title.subtitle.fontSize}px;color:${t.value.style.title.subtitle.color};font-weight:${t.value.style.title.subtitle.bold ? "bold" : "normal"}`)
+        }, K(t.value.style.title.subtitle.text), 5)) : m("", !0)
+      ], 4)) : m("", !0),
+      f("div", ct, [
+        (r(), i("svg", {
+          ref_key: "svgRef",
+          ref: M,
+          xmlns: g(Qe),
+          width: "100%",
+          viewBox: `0 0 ${h.value.width} ${h.value.height}`,
+          "aria-describedby": `chart-instructions-${S.value}`,
+          tabindex: "0",
+          onFocus: Re,
+          onBlur: Ue,
+          onKeydown: Oe
+        }, [
+          ye(g(Ae)),
+          f("defs", null, [
+            (r(!0), i(L, null, V(p.value, (o, a) => (r(), i("linearGradient", {
+              key: `stack_gradient_${a}`,
+              gradientTransform: "rotate(90)",
+              id: `stack_gradient_${a}_${S.value}`
+            }, [
+              f("stop", {
+                offset: "0%",
+                "stop-color": o.color
+              }, null, 8, ft),
+              f("stop", {
+                offset: "50%",
+                "stop-color": g(we)(g(xe)(o.color, 0.05), 100 - t.value.style.bar.gradient.intensity)
+              }, null, 8, gt),
+              f("stop", {
+                offset: "100%",
+                "stop-color": o.color
+              }, null, 8, pt)
+            ], 8, dt))), 128)),
+            f("clipPath", ht, [
+              f("rect", {
+                x: "0.005",
+                y: "-2",
+                width: "0.99",
+                height: "5",
+                rx: "3",
+                ry: "3",
+                fill: t.value.style.backgroundColor
+              }, null, 8, yt)
+            ])
+          ]),
+          ce.value > 0 ? (r(), i("g", mt, [
+            (r(!0), i(L, null, V(p.value, (o, a) => (r(), i("rect", {
+              key: `stack_underlayer_${a}`,
+              x: o.start,
+              y: 0,
+              width: o.width,
+              height: h.value.height,
+              fill: t.value.style.bar.gradient.underlayerColor,
+              class: H({ animated: !P.value && !g(F) }),
+              style: b({
+                opacity: _.value !== null && t.value.style.tooltip.show ? _.value === a ? 1 : 0.5 : 1
+              })
+            }, null, 14, bt))), 128)),
+            (r(!0), i(L, null, V(p.value, (o, a) => (r(), i("rect", {
+              key: `stack_${a}`,
+              x: o.start,
+              y: 0,
+              width: o.width,
+              height: h.value.height,
+              fill: t.value.style.bar.gradient.show ? `url(#stack_gradient_${a}_${S.value})` : o.color,
+              stroke: t.value.style.backgroundColor,
+              "stroke-linecap": "round",
+              class: H({ animated: !P.value && !g(F) }),
+              style: b({
+                opacity: _.value !== null && t.value.style.tooltip.show ? _.value === a ? 1 : 0.5 : 1
+              })
+            }, null, 14, kt))), 128)),
+            (r(!0), i(L, null, V(p.value, (o, a) => (r(), i("rect", {
+              key: `stack_trap_${a}`,
+              x: o.start,
+              y: 0,
+              width: o.width,
+              height: h.value.height,
+              fill: "transparent",
+              stroke: "none",
+              class: H({ animated: !P.value && !g(F) }),
+              onClick: () => O(o, a),
+              onMouseenter: () => de({ datapoint: o, seriesIndex: a }),
+              onMouseleave: (n) => Me({ datapoint: o, seriesIndex: a })
+            }, null, 42, _t))), 128))
+          ])) : (r(), i("rect", {
+            key: 1,
+            x: 2,
+            y: 1,
+            width: h.value.width - 4,
+            height: h.value.height - 2,
+            stroke: "#CCCCCC",
+            "stroke-width": "2",
+            fill: "transparent",
+            rx: (h.value.height - 4) / 2
+          }, null, 8, wt))
+        ], 40, vt)),
+        e.$slots.hint ? (r(), i("div", xt, [
+          R(e.$slots, "hint", ee(te({ hint: t.value.a11y.translations.keyboardNavigation, isVisible: q.value })), void 0, !0)
+        ])) : m("", !0)
+      ]),
+      t.value.style.legend.show ? (r(), i("div", {
+        key: 2,
+        style: b(`background:transparent;margin:0 auto;margin:${t.value.style.legend.margin};justify-content:${t.value.style.legend.textAlign === "left" ? "flex-start" : t.value.style.legend.textAlign === "right" ? "flex-end" : "center"}`),
+        class: "vue-ui-sparkstackbar-legend",
+        "aria-label": "legend",
+        role: "toolbar"
+      }, [
+        t.value.style.legend.selectAllToggle.show && y.value.length > 2 && !g(F) ? (r(), Z(nt, {
+          key: 0,
+          backgroundColor: t.value.style.legend.selectAllToggle.backgroundColor,
+          color: t.value.style.legend.selectAllToggle.color,
+          fontSize: t.value.style.legend.fontSize,
+          checked: v.value.length > 0,
+          isCursorPointer: ne.value,
+          onToggle: Ee
+        }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : m("", !0),
+        (r(!0), i(L, null, V(y.value, (o, a) => (r(), i("div", {
+          role: "button",
+          tabindex: "0",
+          "aria-pressed": v.value.includes(a),
+          "aria-label": `${o.name}, ${v.value.includes(a) ? "hidden" : "visible"}, ${o.proportionLabel}`,
+          style: b(`font-size:${t.value.style.legend.fontSize}px;cursor:${ne.value ? "pointer" : "default"}`),
+          class: H({ "vue-ui-sparkstackbar-legend-item": !0, "vue-ui-sparkstackbar-legend-item-unselected": v.value.includes(a) }),
+          onClick: (n) => {
+            U(a), O(o, a, !0);
+          },
+          onFocus: (n) => je(o),
+          onBlur: fe,
+          onKeydown: (n) => He(n, o, a)
+        }, [
+          f("div", $t, [
+            (r(), i("svg", {
+              height: `${t.value.style.legend.fontSize}px`,
+              width: `${t.value.style.legend.fontSize}px`,
+              viewBox: "0 0 10 10"
+            }, [
+              f("defs", null, [
+                f("radialGradient", {
+                  id: `legend_grad_${a}-${S.value}`
+                }, [
+                  f("stop", {
+                    offset: "0%",
+                    "stop-color": g(F) ? "#FFFFFF" : g(we)(g(xe)(o.color, 0.05), 100 - t.value.style.bar.gradient.intensity)
+                  }, null, 8, It),
+                  f("stop", {
+                    offset: "100%",
+                    "stop-color": o.color
+                  }, null, 8, Ft)
+                ], 8, At)
+              ]),
+              f("circle", {
+                cx: 5,
+                cy: 5,
+                r: 5,
+                fill: t.value.style.bar.gradient.show ? `url(#legend_grad_${a}-${S.value})` : o.color
+              }, null, 8, Tt)
+            ], 8, St)),
+            g(F) ? m("", !0) : (r(), i(L, { key: 0 }, [
+              f("span", {
+                style: b(`color:${t.value.style.legend.name.color}; font-weight:${t.value.style.legend.name.bold ? "bold" : "normal"}`)
+              }, K(o.name), 5),
+              P.value ? m("", !0) : (r(), i(L, { key: 0 }, [
+                t.value.style.legend.percentage.show ? (r(), i("span", {
+                  key: 0,
+                  style: b(`font-weight:${t.value.style.legend.percentage.bold ? "bold" : "normal"};color:${t.value.style.legend.percentage.color}`)
+                }, K(v.value.includes(a) ? " - " : o.proportionLabel), 5)) : m("", !0),
+                t.value.style.legend.value.show ? (r(), i("span", {
+                  key: 1,
+                  style: b(`font-weight:${t.value.style.legend.value.bold ? "bold" : "normal"};color:${t.value.style.legend.value.color}`)
+                }, " (" + K(g(le)(
+                  t.value.style.legend.value.formatter,
+                  o.value,
+                  g(Y)({
+                    p: t.value.style.legend.value.prefix,
+                    v: o.value,
+                    s: t.value.style.legend.value.suffix,
+                    r: t.value.style.legend.value.rounding
+                  }),
+                  { datapoint: o, seriesIndex: a }
+                )) + ") ", 5)) : m("", !0)
+              ], 64))
+            ], 64))
+          ])
+        ], 46, Ct))), 256))
+      ], 4)) : m("", !0),
+      ye(g(Ie), {
+        teleportTo: t.value.style.tooltip.teleportTo,
+        show: A.value && t.value.style.tooltip.show,
+        parent: ae.value,
+        backgroundColor: t.value.style.tooltip.backgroundColor,
+        color: t.value.style.tooltip.color,
+        fontSize: t.value.style.tooltip.fontSize,
+        borderRadius: t.value.style.tooltip.borderRadius,
+        borderColor: t.value.style.tooltip.borderColor,
+        borderWidth: t.value.style.tooltip.borderWidth,
+        backgroundOpacity: t.value.style.tooltip.backgroundOpacity,
+        position: t.value.style.tooltip.position,
+        content: G.value,
+        isCustom: z.value,
+        offsetY: -124 + t.value.style.tooltip.offsetY,
+        blockShiftY: !0,
+        smooth: t.value.style.tooltip.smooth,
+        backdropFilter: t.value.style.tooltip.backdropFilter,
+        smoothForce: t.value.style.tooltip.smoothForce,
+        smoothSnapThreshold: t.value.style.tooltip.smoothSnapThreshold,
+        isA11yMode: I.value === "keyboard",
+        a11yPosition: se.value
+      }, {
+        "tooltip-before": me(() => [
+          R(e.$slots, "tooltip-before", ee(te({ ...W.value })), void 0, !0)
+        ]),
+        "tooltip-after": me(() => [
+          R(e.$slots, "tooltip-after", ee(te({ ...W.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["teleportTo", "show", "parent", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "content", "isCustom", "offsetY", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
+      e.$slots.source ? (r(), i("div", Pt, [
+        R(e.$slots, "source", {}, void 0, !0)
+      ], 512)) : m("", !0),
+      R(e.$slots, "skeleton", {}, () => [
+        g(F) ? (r(), Z(lt, { key: 0 })) : m("", !0)
+      ], !0)
+    ], 4));
+  }
+}, jt = /* @__PURE__ */ ut(Dt, [["__scopeId", "data-v-29f119a6"]]);
+export {
+  jt as default
+};