vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-waffle-Cb7oJnIc.js

@@ -0,0 +1,1321 @@
+import { defineAsyncComponent as W, useSlots as ml, computed as i, ref as r, toRefs as bl, watch as de, shallowRef as Tt, onMounted as wl, onBeforeUnmount as kl, openBlock as s, createElementBlock as v, unref as d, normalizeStyle as he, normalizeClass as St, createElementVNode as C, toDisplayString as pe, createBlock as I, createCommentVNode as m, withCtx as h, renderSlot as p, normalizeProps as x, guardReactiveProps as $, createSlots as We, createVNode as Ce, Fragment as P, renderList as G, mergeProps as Ge, Teleport as Cl, resolveDynamicComponent as xl, createTextVNode as At, nextTick as It } from "vue";
+import { j as $l, t as Pt, m as Tl, p as Y, o as _t, q as je, r as Sl, n as Al, k as fe, l as z, X as Il, u as Pl, v as _l, W as Bl, s as Ol, a0 as Fl, a1 as Ll, a as Dl, T as Nl, U as Ml } from "./lib-DBptbyyI.js";
+import { b as zl } from "./labelUtils-CqTHa20R.js";
+import { t as Vl, u as Rl } from "./useResponsive-DfdjqQps.js";
+import { u as El } from "./useConfig-DO94Aj5s.js";
+import { u as Ul, B as Wl } from "./BaseScanner-BhhkKVoj.js";
+import { u as Gl } from "./usePrinter-CEpYU3r5.js";
+import { u as jl } from "./useSvgExport-ByUukOZt.js";
+import { u as He } from "./useNestedProp-Bf5XFbs8.js";
+import { u as Hl } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as ql } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Xl } from "./useChartAccessibility-9icAAmYg.js";
+import Yl from "./img-LXxMLmCg.js";
+import { _ as Kl } from "./Shape-BKRUOeKk.js";
+import Jl from "./Title-BeMKE1cj.js";
+import Ql from "./vue_ui_waffle-M2h-uJQ_.js";
+import Zl from "./Legend-CS7Xo5LK.js";
+import { A as ea } from "./A11yDataTable-KcVAX2cP.js";
+import { B as ta } from "./BaseLegendToggle-BQVIawmA.js";
+import { _ as la } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const aa = ["id"], oa = ["id"], na = ["id"], ua = { style: { position: "relative" } }, sa = ["xmlns", "aria-describedby", "viewBox"], ra = ["id"], ia = ["stop-color"], ca = ["stop-color"], va = ["id"], da = ["x", "y", "height", "width"], ha = ["height", "width"], pa = { key: 0 }, fa = ["rx", "x", "y", "height", "width", "stroke", "stroke-width", "filter"], ga = ["rx", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "filter"], ya = { key: 1 }, ma = ["rx", "x", "y", "height", "width", "fill", "filter"], ba = ["textContent", "x", "y", "font-size", "fill", "filter"], wa = ["x", "y", "height", "width", "onMouseover", "onMouseleave", "onClick"], ka = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Ca = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, xa = ["id"], $a = ["onClick"], Ta = ["innerHTML"], Sa = {
+  __name: "vue-ui-waffle",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "copyAlt"],
+  setup(Bt, { expose: Ot, emit: Ft }) {
+    const Lt = W(() => import("./Tooltip-Bf-kM3_A.js")), Dt = W(() => import("./BaseIcon-Cb3zzG6s.js")), Nt = W(() => import("./DataTable-DT2kIdQ6.js")), Mt = W(() => import("./vue-ui-accordion-nvggWcGN.js")), zt = W(() => import("./UserOptions-rW2fRf3V.js")), Vt = W(() => import("./PenAndPaper-Ct3qJ4lA.js")), Rt = W(() => import("./PackageVersion-DPO-OOVI.js")), Et = W(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_waffle: Ut } = El(), { isThemeValid: Wt, warnInvalidTheme: Gt } = Hl(), b = Bt, jt = ml(), xe = i({
+      get() {
+        return !!b.dataset && b.dataset.length;
+      },
+      set(e) {
+        return e;
+      }
+    }), y = r($l()), te = r(!1), $e = r(""), V = r(null), qe = r(0), _ = r(null), Xe = r(null), Ye = r(null), Ke = r(null), Je = r(null), Qe = r(0), Ze = r(0), et = r(0), tt = r(!1), le = r(null), Te = r(null), ge = r(!1), ye = r(!1), R = r(null), lt = r({ x: 0, y: 0 }), ae = r("pointer"), Se = r(!1), t = r(_e()), j = i(() => t.value.userOptions.useCursorPointer), Ht = i(() => Pt({
+      defaultConfig: {
+        useCustomCells: !1,
+        userOptions: { show: !1 },
+        table: { show: !1 },
+        style: {
+          chart: {
+            backgroundColor: "#99999930",
+            layout: {
+              labels: {
+                captions: { show: !1 }
+              },
+              rect: {
+                stroke: "#999999"
+              }
+            },
+            legend: {
+              backgroundColor: "transparent",
+              showValue: !1,
+              showPercentage: !1
+            }
+          }
+        }
+      },
+      userConfig: t.value.skeletonConfig ?? {}
+    })), { loading: Ae, FINAL_DATASET: K, manualLoading: Ie } = Ul({
+      ...bl(b),
+      FINAL_CONFIG: t,
+      prepareConfig: _e,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          w.value = Le();
+        });
+      },
+      skeletonDataset: b.config?.skeletonDataset ?? [
+        {
+          name: "",
+          values: [1],
+          color: "#AAAAAA"
+        },
+        {
+          name: "",
+          values: [1],
+          color: "#BABABA"
+        },
+        {
+          name: "",
+          values: [1],
+          color: "#CACACA"
+        }
+      ],
+      skeletonConfig: Pt({
+        defaultConfig: t.value,
+        userConfig: Ht.value
+      })
+    }), { userOptionsVisible: Pe, setUserOptionsVisibility: at, keepUserOptionState: ot } = ql({ config: t.value }), { svgRef: H } = Xl({ config: t.value.style.chart.title });
+    function _e() {
+      const e = He({
+        userConfig: b.config,
+        defaultConfig: Ut
+      }), a = e.theme;
+      if (!a) return e;
+      if (!Wt.value(e))
+        return Gt(e), e;
+      const l = He({
+        userConfig: Ql[a] || b.config,
+        defaultConfig: e
+      }), o = He({
+        userConfig: b.config,
+        defaultConfig: l
+      });
+      return {
+        ...o,
+        customPalette: o.customPalette.length ? o.customPalette : Tl[a] || Y
+      };
+    }
+    de(() => b.config, (e) => {
+      Ae.value || (t.value = _e()), Pe.value = !t.value.userOptions.showOnChartHover, ut(), Qe.value += 1, Ze.value += 1, et.value += 1, T.value.showTable = t.value.table.show, T.value.showTooltip = t.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const E = Tt(null), J = Tt(null), nt = i(() => !!t.value.debug);
+    function ut() {
+      if (_t(b.dataset) ? (je({
+        componentName: "VueUiWaffle",
+        type: "dataset",
+        debug: nt.value
+      }), xe.value = !1, Ie.value = !0) : b.dataset.forEach((e, a) => {
+        Sl({
+          datasetObject: e,
+          requiredAttributes: ["name", "values"]
+        }).forEach((l) => {
+          je({
+            componentName: "VueUiWaffle",
+            type: "datasetSerieAttribute",
+            property: l,
+            index: a,
+            debug: nt.value
+          });
+        });
+      }), _t(b.dataset) || (Ie.value = t.value.loading), t.value.responsive) {
+        const e = Vl(() => {
+          const { width: a, height: l } = Rl({
+            chart: _.value,
+            title: t.value.style.chart.title.text ? Xe.value : null,
+            legend: t.value.style.chart.legend.show ? Ye.value : null,
+            source: Ke.value,
+            noTitle: Je.value
+          });
+          requestAnimationFrame(() => {
+            B.value.width = a, B.value.height = l, O.value.width = a, O.value.height = l;
+          });
+        });
+        E.value && (J.value && E.value.unobserve(J.value), E.value.disconnect()), E.value = new ResizeObserver(e), J.value = _.value.parentNode, E.value.observe(J.value);
+      }
+    }
+    wl(() => {
+      tt.value = !0, ut();
+    }), kl(() => {
+      E.value && (J.value && E.value.unobserve(J.value), E.value.disconnect());
+    });
+    const { isPrinting: Be, isImaging: Oe, generatePdf: st, generateImage: rt } = Gl({
+      elementId: `vue-ui-waffle_${y.value}`,
+      fileName: t.value.style.chart.title.text || "vue-ui-waffle",
+      options: t.value.userOptions.print
+    }), qt = i(() => t.value.userOptions.show && !t.value.style.chart.title.text), it = i(() => Al(t.value.customPalette)), T = r({
+      showTable: t.value.table.show,
+      showTooltip: t.value.style.chart.tooltip.show
+    });
+    de(t, () => {
+      T.value = {
+        showTable: t.value.table.show,
+        showTooltip: t.value.style.chart.tooltip.show
+      };
+    }, { immediate: !0 });
+    const B = r({
+      height: 512,
+      width: 512
+    }), O = r({
+      top: 0,
+      left: 0,
+      height: 512,
+      width: 512
+    }), F = i(() => (O.value.width - t.value.style.chart.layout.grid.size * t.value.style.chart.layout.grid.spaceBetween) / t.value.style.chart.layout.grid.size), L = i(() => (O.value.height - t.value.style.chart.layout.grid.size * t.value.style.chart.layout.grid.spaceBetween) / t.value.style.chart.layout.grid.size), ct = i(() => Math.max(1e-4, O.value.width / t.value.style.chart.layout.grid.size)), Fe = i(() => Math.max(1e-4, O.value.height / t.value.style.chart.layout.grid.size));
+    function vt(e) {
+      const a = t.value.style.chart.layout.grid.size * t.value.style.chart.layout.grid.size, l = e.reduce((k, A) => k + A, 0), o = e.map((k) => k / l * a), n = o.map(Math.floor), u = o.map((k) => k % 1);
+      let g = a - n.reduce((k, A) => k + A, 0);
+      for (; g > 0; ) {
+        let k = u.indexOf(Math.max(...u));
+        n[k] += 1, u[k] = 0, g -= 1;
+      }
+      return n;
+    }
+    const oe = r(!1);
+    function Le() {
+      return oe.value = K.value.flatMap((e) => e.values.reduce((a, l) => a + l, 0)).reduce((e, a) => e + a, 0) === 0, K.value.map((e, a) => ({
+        ...e,
+        color: Ol(e.color) || it.value[a] || Y[a] || Y[a % Y.length],
+        uid: `serie_${a}`,
+        absoluteIndex: a
+      }));
+    }
+    const me = i(() => Le()), w = r(me.value);
+    de(() => b.dataset, (e) => {
+      Array.isArray(e) && e.length > 0 && (Ie.value = !1);
+    }, { immediate: !0 }), de(() => b.dataset, (e) => {
+      w.value = Le();
+    }, { deep: !0 });
+    const Xt = i(() => {
+      const e = w.value.filter((a, l) => !f.value.includes(a.uid)).map((a, l) => oe.value ? 1 : (a.values || []).reduce((o, n) => o + n, 0));
+      return vt(e);
+    }), Yt = i(() => {
+      const e = w.value.map((a, l) => oe.value ? 1 : (a.values || []).reduce((o, n) => o + n));
+      return vt(e);
+    }), Q = i(() => (K.value.forEach((e, a) => {
+      [null, void 0].includes(e.values) && je({
+        componentName: "VueUiWaffle",
+        type: "datasetSerieAttribute",
+        property: "values (number[])",
+        index: a
+      });
+    }), w.value.filter((e, a) => !f.value.includes(e.uid)).map((e, a) => ({
+      absoluteIndex: e.absoluteIndex,
+      uid: e.uid,
+      name: e.name,
+      color: e.color,
+      value: (e.values || []).reduce((l, o) => l + o, 0),
+      absoluteValues: e.values || [],
+      proportion: Xt.value[a]
+    })))), De = i(() => w.value.map((e, a) => ({
+      absoluteIndex: e.absoluteIndex,
+      uid: e.uid,
+      name: e.name,
+      color: e.color,
+      value: (e.values || []).reduce((l, o) => l + o, 0),
+      absoluteValues: e.values || [],
+      proportion: Yt.value[a]
+    })));
+    function Kt() {
+      return De.value.map((e) => ({
+        name: e.name,
+        color: e.color,
+        value: e.value,
+        proportion: e.proportion
+      }));
+    }
+    const Jt = i(() => {
+      let e = 0;
+      return Q.value.map((a, l) => {
+        const o = e, n = o + a.proportion, u = [];
+        for (let g = Math.floor(o); g < Math.floor(n); g += 1)
+          u.push(g);
+        return e = n, {
+          ...a,
+          start: o,
+          rects: u
+        };
+      });
+    }), c = i(() => Jt.value.flatMap((e, a) => e.rects.map((l, o) => ({
+      isFirst: o === 0,
+      isLongEnough: l.length > 2,
+      name: e.name,
+      color: e.color,
+      value: e.value,
+      serieIndex: a,
+      absoluteStartIndex: o < 3,
+      serieId: e.uid,
+      ...e
+    }))).map((e, a) => ({
+      ...e,
+      isAbsoluteFirst: a % t.value.style.chart.layout.grid.size === 0
+    }))), q = i(() => {
+      const e = [];
+      for (let a = 0; a < t.value.style.chart.layout.grid.size; a += 1)
+        for (let l = 0; l < t.value.style.chart.layout.grid.size; l += 1)
+          e.push({
+            isStartOfLine: l === 0,
+            position: t.value.style.chart.layout.grid.vertical ? a : l,
+            x: (t.value.style.chart.layout.grid.vertical ? a : l) * (F.value + t.value.style.chart.layout.grid.spaceBetween),
+            y: (t.value.style.chart.layout.grid.vertical ? l : a) * (L.value + t.value.style.chart.layout.grid.spaceBetween) + O.value.top
+          });
+      return e;
+    }), f = r([]), be = r(!1), ne = r(/* @__PURE__ */ Object.create(null)), ue = r(/* @__PURE__ */ Object.create(null)), se = r(0);
+    function re(e, a) {
+      w.value = w.value.map((l) => l.uid === e ? {
+        ...l,
+        values: [a]
+      } : l);
+    }
+    function dt(e, a) {
+      const l = a.find((o) => o.uid === e);
+      return l ? (l.values || []).reduce((o, n) => o + n, 0) : 0;
+    }
+    function Qt(e) {
+      ne.value[e] && (cancelAnimationFrame(ne.value[e]), delete ne.value[e]), ue.value[e] && (cancelAnimationFrame(ue.value[e]), delete ue.value[e]);
+    }
+    function ht({
+      seriesId: e,
+      fromValue: a,
+      toValue: l,
+      mode: o
+    }) {
+      Qt(e), se.value += 1, be.value = !0;
+      let n = a;
+      return new Promise((u) => {
+        function g() {
+          if (o === "increase") {
+            if (n >= l) {
+              re(e, l), se.value -= 1, se.value <= 0 && (be.value = !1), delete ne.value[e], u();
+              return;
+            }
+            n += l * 0.025, n > l && (n = l), re(e, n), ne.value[e] = requestAnimationFrame(g);
+          } else {
+            if (n <= a / 100) {
+              re(e, 0), se.value -= 1, se.value <= 0 && (be.value = !1), delete ue.value[e], u();
+              return;
+            }
+            n /= 1.15, re(e, n), ue.value[e] = requestAnimationFrame(g);
+          }
+        }
+        g();
+      });
+    }
+    function Zt() {
+      w.value = me.value;
+      const e = f.value.length > 0;
+      if (!t.value.useAnimation) {
+        e ? f.value = [] : f.value = U.value.map((a) => a.uid);
+        return;
+      }
+      e ? [...f.value].forEach((l) => {
+        Z(l, !0);
+      }) : U.value.map((l) => l.uid).forEach((l) => {
+        Z(l, !0);
+      });
+    }
+    function Z(e, a = !1) {
+      if (oe.value && !a) return;
+      const l = a || f.value.length < U.value.length - 1 && U.value.length > 1;
+      if (!t.value.useAnimation) {
+        f.value.includes(e) ? f.value = f.value.filter((u) => u !== e) : l && f.value.push(e);
+        return;
+      }
+      const o = dt(e, me.value), n = dt(e, w.value);
+      if (!(n === 0 && o === 0)) {
+        if (f.value.includes(e)) {
+          f.value = f.value.filter((u) => u !== e), ht({
+            seriesId: e,
+            fromValue: n,
+            toValue: o,
+            mode: "increase"
+          }).then(() => {
+            ze(
+              "selectLegend",
+              Q.value.map((u) => ({
+                name: u.name,
+                color: u.color,
+                value: u.value,
+                proportion: u.proportion / Math.pow(t.value.style.chart.layout.grid.size, 2)
+              }))
+            );
+          });
+          return;
+        }
+        l && ht({
+          seriesId: e,
+          fromValue: n,
+          toValue: 0,
+          mode: "decrease"
+        }).then(() => {
+          f.value.includes(e) || f.value.push(e), re(e, 0), ze(
+            "selectLegend",
+            Q.value.map((u) => ({
+              name: u.name,
+              color: u.color,
+              value: u.value,
+              proportion: u.proportion / Math.pow(t.value.style.chart.layout.grid.size, 2)
+            }))
+          );
+        });
+      }
+    }
+    function pt(e) {
+      if (!De.value.length)
+        return t.value.debug && console.warn("VueUiWaffle - There are no series to show."), null;
+      const a = De.value.find((l) => l.name === e);
+      return a || (t.value.debug && console.warn(`VueUiWaffle - Series name not found "${e}"`), null);
+    }
+    function el(e) {
+      const a = pt(e);
+      a !== null && f.value.includes(a.uid) && Z(a.uid);
+    }
+    function tl(e) {
+      const a = pt(e);
+      a !== null && (f.value.includes(a.uid) || Z(a.uid));
+    }
+    function Ne({
+      val: e,
+      percentage: a,
+      showVal: l,
+      showPercentage: o,
+      config: n
+    }) {
+      return zl({
+        config: n,
+        val: e,
+        percentage: a,
+        showVal: l,
+        showPercentage: o
+      });
+    }
+    const U = i(() => w.value.map((e, a) => {
+      const l = (e.values || []).reduce((n, u) => n + u, 0), o = l / w.value.map((n) => (n.values || []).reduce((u, g) => u + g, 0)).reduce((n, u) => n + u, 0);
+      return {
+        name: e.name,
+        color: e.color || it[a] || Y[a] || Y[a % Y.length],
+        value: l,
+        proportion: o,
+        uid: e.uid,
+        shape: "square"
+      };
+    }).map((e, a) => {
+      const l = fe(t.value.style.chart.layout.labels.dataLabels.formatter, e.value, z({
+        p: t.value.style.chart.layout.labels.dataLabels.prefix,
+        v: e.value,
+        s: t.value.style.chart.layout.labels.dataLabels.suffix,
+        r: t.value.style.chart.legend.roundingValue
+      }), { datapoint: e, index: a }), o = isNaN(e.value / D.value) ? "-" : z({ v: e.value / D.value * 100, s: "%", r: t.value.style.chart.legend.roundingPercentage }), n = Ne({
+        val: l,
+        percentage: o,
+        showVal: t.value.style.chart.legend.showValue,
+        showPercentage: t.value.style.chart.legend.showPercentage,
+        config: t.value.style.chart.legend
+      });
+      return {
+        ...e,
+        opacity: f.value.includes(e.uid) ? 0.5 : 1,
+        segregate: () => Z(e.uid),
+        isSegregated: f.value.includes(e.uid),
+        display: `${e.name}${t.value.style.chart.legend.showPercentage || t.value.style.chart.legend.showValue ? ": " : ""}${n}`
+      };
+    })), ll = i(() => ({
+      cy: "waffle-div-legend",
+      backgroundColor: t.value.style.chart.legend.backgroundColor,
+      color: t.value.style.chart.legend.color,
+      fontSize: t.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
+    })), D = i(() => Q.value.map((e) => e.value).reduce((e, a) => e + a, 0)), Me = r(null), ie = r(null), S = i(() => {
+      const e = /* @__PURE__ */ new Map();
+      return c.value.forEach((a, l) => {
+        e.has(a.serieIndex) ? e.get(a.serieIndex).rectIndexes.push(l) : e.set(a.serieIndex, {
+          serieIndex: a.serieIndex,
+          absoluteIndex: a.absoluteIndex,
+          serieId: a.serieId,
+          name: a.name,
+          color: a.color,
+          value: a.value,
+          proportion: a.proportion,
+          rectIndexes: [l]
+        });
+      }), Array.from(e.values()).sort((a, l) => a.serieIndex - l.serieIndex);
+    });
+    function ft(e) {
+      return S.value.find((a) => a.serieIndex === e) || null;
+    }
+    function gt(e) {
+      const a = ft(e);
+      return !a || !a.rectIndexes.length ? null : a.rectIndexes[0];
+    }
+    function yt(e) {
+      const a = c.value[e];
+      t.value.events.datapointClick && t.value.events.datapointClick({ datapoint: a, seriesIndex: a.serieIndex });
+    }
+    function al(e) {
+      const a = c.value[e];
+      t.value.events.datapointLeave && t.value.events.datapointLeave({ datapoint: a, seriesIndex: a.serieIndex }), ie.value = null, te.value = !1, V.value = null, R.value = null, ae.value = "pointer";
+    }
+    function mt(e, a = "pointer") {
+      if (f.value.length === b.dataset.length) return;
+      const l = c.value[e];
+      if (!l) return;
+      ae.value = a, R.value = l.serieIndex, Me.value = {
+        datapoint: l,
+        seriesIndex: l.absoluteIndex,
+        series: w.value,
+        config: t.value
+      }, t.value.events.datapointEnter && ie.value !== l.serieIndex && t.value.events.datapointEnter({
+        datapoint: l,
+        seriesIndex: l.serieIndex
+      }), ie.value = l.serieIndex, te.value = !0, V.value = l.serieIndex;
+      const o = t.value.style.chart.tooltip.customFormat;
+      if (Nl(o) && Ml(
+        () => o({
+          seriesIndex: l.absoluteIndex,
+          datapoint: l,
+          series: w.value,
+          config: t.value
+        })
+      ))
+        $e.value = o({
+          seriesIndex: l.absoluteIndex,
+          datapoint: l,
+          series: w.value,
+          config: t.value
+        });
+      else {
+        let n = "";
+        n += `<div style="width:100%;text-align:center;border-bottom:1px solid ${t.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l.name}</div>`, n += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><rect x="0" y="0" height="60" width="60" stroke="none" rx="1" fill="${l.color}" />${jt.pattern ? `<rect x="0" y="0" height="60" width="60" stroke="none" rx="1" stroke="none" fill="url(#pattern_${y.value}_${l.absoluteIndex})"/>` : ""}</svg>`, n += `<b>${Ne({
+          config: t.value.style.chart.tooltip,
+          showVal: t.value.style.chart.tooltip.showValue,
+          showPercentage: t.value.style.chart.tooltip.showPercentage,
+          val: `<span>${fe(
+            t.value.style.chart.layout.labels.dataLabels.formatter,
+            l.value,
+            z({
+              p: t.value.style.chart.layout.labels.dataLabels.prefix,
+              v: l.value,
+              s: t.value.style.chart.layout.labels.dataLabels.suffix,
+              r: t.value.style.chart.tooltip.roundingValue
+            }),
+            {
+              datapoint: l,
+              seriesIndex: l.absoluteIndex,
+              series: w.value
+            }
+          )}</span>`,
+          percentage: `<span>${z({
+            v: oe.value ? 1 / K.value.length * 100 : l.value / D.value * 100,
+            s: "%",
+            r: t.value.style.chart.tooltip.roundingPercentage
+          })}</span>`
+        })}</b></div>`, $e.value = n;
+      }
+    }
+    const ze = Ft, N = i(() => {
+      const e = Q.value.map((l) => ({
+        name: l.name,
+        color: l.color
+      })), a = Q.value.map((l) => l.value);
+      return { head: e, body: a };
+    });
+    function we(e) {
+      return t.value.useBlurOnHover && ![null, void 0].includes(V.value) && V.value !== e ? `url(#blur_${y.value})` : "";
+    }
+    function ol(e, a) {
+      return t.value.style.chart.layout.labels.captions.show ? c.value.length && !be.value && !t.value.style.chart.layout.grid.vertical && (c.value[e].isFirst && a.position < t.value.style.chart.layout.grid.size - 2 || c.value[e].isAbsoluteFirst && e % t.value.style.chart.layout.grid.size === 0 && c.value[e].absoluteStartIndex) : !1;
+    }
+    function nl(e, a = null) {
+      const l = fe(
+        t.value.style.chart.layout.labels.dataLabels.formatter,
+        c.value[e].value,
+        z({
+          p: t.value.style.chart.layout.labels.dataLabels.prefix,
+          v: c.value[e].value,
+          s: t.value.style.chart.layout.labels.dataLabels.suffix,
+          r: t.value.style.chart.layout.labels.captions.roundingValue
+        }),
+        { datapoint: c.value[e], position: a }
+      ), o = z({ v: c.value[e].proportion, s: "%", r: t.value.style.chart.layout.labels.captions.roundingPercentage }), n = (t.value.style.chart.layout.labels.captions.serieNameAbbreviation ? Dl({ source: c.value[e].name, length: t.value.style.chart.layout.labels.captions.serieNameMaxAbbreviationSize }) : c.value[e].name) + (t.value.style.chart.layout.labels.captions.showPercentage || t.value.style.chart.layout.labels.captions.showValue ? ":" : ""), u = t.value.style.chart.layout.labels.captions.showSerieName ? n : "", g = Ne({
+        val: l,
+        percentage: o,
+        showVal: t.value.style.chart.layout.labels.captions.showValue,
+        showPercentage: t.value.style.chart.layout.labels.captions.showPercentage,
+        config: t.value.style.chart.layout.labels.dataLabels
+      });
+      return `${u} ${g}`;
+    }
+    function Ve(e = null) {
+      It(() => {
+        const a = N.value.head.map((n, u) => [[
+          n.name
+        ], [N.value.body[u]], [isNaN(N.value.body[u] / D.value) ? "-" : N.value.body[u] / D.value * 100]]), l = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = Fl(l);
+        e ? e(o) : Ll({ csvContent: o, title: t.value.style.chart.title.text || "vue-ui-waffle" });
+      });
+    }
+    const ee = i(() => {
+      const e = [
+        ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
+        fe(
+          t.value.style.chart.layout.labels.dataLabels.formatter,
+          D.value,
+          z({
+            p: t.value.style.chart.layout.labels.dataLabels.prefix,
+            v: D.value,
+            s: t.value.style.chart.layout.labels.dataLabels.suffix,
+            r: t.value.table.td.roundingValue
+          })
+        ),
+        "100%"
+      ], a = N.value.head.map((n, u) => [
+        {
+          color: n.color,
+          name: n.name
+        },
+        fe(
+          t.value.style.chart.layout.labels.dataLabels.formatter,
+          N.value.body[u],
+          z({
+            p: t.value.style.chart.layout.labels.dataLabels.prefix,
+            v: N.value.body[u],
+            s: t.value.style.chart.layout.labels.dataLabels.suffix,
+            r: t.value.table.td.roundingValue
+          })
+        ),
+        isNaN(N.value.body[u] / D.value) ? "-" : z({
+          v: N.value.body[u] / D.value * 100,
+          s: "%",
+          r: t.value.table.td.roundingPercentage
+        })
+      ]), l = {
+        th: {
+          backgroundColor: t.value.table.th.backgroundColor,
+          color: t.value.table.th.color,
+          outline: t.value.table.th.outline
+        },
+        td: {
+          backgroundColor: t.value.table.td.backgroundColor,
+          color: t.value.table.td.color,
+          outline: t.value.table.td.outline
+        },
+        shape: "square",
+        breakpoint: t.value.table.responsiveBreakpoint
+      }, o = [
+        t.value.table.columnNames.series,
+        t.value.table.columnNames.value,
+        t.value.table.columnNames.percentage
+      ];
+      return {
+        head: e,
+        body: a,
+        config: l,
+        colNames: o
+      };
+    }), X = r(!1);
+    function bt(e) {
+      X.value = e, qe.value += 1;
+    }
+    function wt() {
+      T.value.showTable = !T.value.showTable;
+    }
+    function kt() {
+      T.value.showTooltip = !T.value.showTooltip;
+    }
+    const ce = r(!1);
+    function Re() {
+      ce.value = !ce.value;
+    }
+    async function ul({ scale: e = 2 } = {}) {
+      if (!_.value) return;
+      const { width: a, height: l } = _.value.getBoundingClientRect(), o = a / l, { imageUri: n, base64: u } = await Yl({ domElement: _.value, base64: !0, img: !0, scale: e });
+      return {
+        imageUri: n,
+        base64: u,
+        title: t.value.style.chart.title.text,
+        width: a,
+        height: l,
+        aspectRatio: o
+      };
+    }
+    const ve = i(() => {
+      const e = t.value.table.useDialog && !t.value.table.show, a = T.value.showTable;
+      return {
+        component: e ? Et : Mt,
+        title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? `: ${t.value.style.chart.title.subtitle.text}` : ""}`,
+        props: e ? {
+          backgroundColor: t.value.table.th.backgroundColor,
+          color: t.value.table.th.color,
+          headerColor: t.value.table.th.color,
+          headerBg: t.value.table.th.backgroundColor,
+          isFullscreen: X.value,
+          fullscreenParent: _.value,
+          forcedWidth: Math.min(500, window.innerWidth * 0.8),
+          isCursorPointer: j.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: t.value.style.chart.backgroundColor,
+              color: t.value.style.chart.color
+            },
+            head: {
+              backgroundColor: t.value.style.chart.backgroundColor,
+              color: t.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    de(() => T.value.showTable, (e) => {
+      t.value.table.show || (e && t.value.table.useDialog && le.value ? le.value.open() : "close" in le.value && le.value.close());
+    });
+    function Ct() {
+      T.value.showTable = !1, Te.value && Te.value.setTableIconState(!1);
+    }
+    const sl = i(() => U.value.map((e) => ({
+      ...e,
+      name: e.display
+    }))), rl = i(() => t.value.style.chart.backgroundColor), il = i(() => t.value.style.chart.legend), cl = i(() => t.value.style.chart.title), { exportSvg: vl, getSvg: dl } = jl({
+      svg: H,
+      title: cl,
+      legend: il,
+      legendItems: sl,
+      backgroundColor: rl
+    });
+    async function xt({ isCb: e }) {
+      ye.value = !0, await It();
+      try {
+        if (e) {
+          const { blob: a, url: l, text: o, dataUrl: n } = await dl();
+          await Promise.resolve(t.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: n }));
+        } else
+          await Promise.resolve(vl());
+      } finally {
+        ye.value = !1;
+      }
+    }
+    function hl(e) {
+      if (e?.stage === "start") {
+        ge.value = !0;
+        return;
+      }
+      if (e?.stage === "end") {
+        ge.value = !1;
+        return;
+      }
+      rt();
+    }
+    async function $t() {
+      if (ze("copyAlt", {
+        config: t.value,
+        dataset: K.value
+      }), !t.value.userOptions.callbacks.altCopy) {
+        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+        return;
+      }
+      await Promise.resolve(t.value.userOptions.callbacks.altCopy({
+        config: t.value,
+        dataset: K.value
+      }));
+    }
+    function pl() {
+      R.value = null, Se.value = !0;
+    }
+    function fl() {
+      R.value = null, ae.value = "pointer", te.value = !1, V.value = null, ie.value = null, Se.value = !1;
+    }
+    function gl(e) {
+      if (!H.value || ce.value || document.activeElement !== H.value || !S.value.length || f.value.length === b.dataset.length) return;
+      const a = ["ArrowLeft", "ArrowUp"].includes(e.key), l = ["ArrowRight", "ArrowDown"].includes(e.key), o = e.key === "Enter" || e.key === " ", n = e.key === "Escape";
+      if (!a && !l && !o && !n) return;
+      if (e.preventDefault(), e.stopPropagation(), n) {
+        R.value = null, ae.value = "pointer", te.value = !1, V.value = null, ie.value = null;
+        return;
+      }
+      if (o) {
+        if (R.value === null) return;
+        const A = gt(R.value);
+        if (A === null) return;
+        yt(A);
+        return;
+      }
+      const u = S.value.findIndex(
+        (A) => A.serieIndex === R.value
+      );
+      let g = null;
+      if (u === -1 ? g = l ? S.value[0] : S.value[S.value.length - 1] : l ? g = S.value[(u + 1) % S.value.length] : g = S.value[(u - 1 + S.value.length) % S.value.length], !g) return;
+      const k = gt(g.serieIndex);
+      k !== null && (yl(g.serieIndex), mt(k, "keyboard"));
+    }
+    function yl(e) {
+      if (!Number.isFinite(e) || !H.value) return;
+      const a = ft(e);
+      if (!a || !a.rectIndexes.length) return;
+      const l = a.rectIndexes.map((M) => {
+        const Ue = q.value[M];
+        return Ue ? {
+          x: Ue.x + t.value.style.chart.layout.grid.spaceBetween / 2 + ct.value / 2,
+          y: Ue.y + t.value.style.chart.layout.grid.spaceBetween / 2 + Fe.value / 2
+        } : null;
+      }).filter(Boolean);
+      if (!l.length) return;
+      const o = Math.min(...l.map((M) => M.x)), n = Math.max(...l.map((M) => M.x)), u = Math.min(...l.map((M) => M.y)), g = Math.max(...l.map((M) => M.y)), k = (o + n) / 2, A = (u + g) / 2, ke = H.value.getBoundingClientRect();
+      lt.value = {
+        x: ke.left + k / B.value.width * ke.width,
+        y: ke.top + A / B.value.height * ke.height
+      };
+    }
+    const Ee = i(() => {
+      const e = ee.value?.colNames ?? [], a = ee.value?.body ?? [];
+      return { headers: e, rows: a };
+    });
+    return Ot({
+      getData: Kt,
+      getImage: ul,
+      generatePdf: st,
+      generateCsv: Ve,
+      generateImage: rt,
+      generateSvg: xt,
+      hideSeries: tl,
+      showSeries: el,
+      toggleTable: wt,
+      toggleTooltip: kt,
+      toggleAnnotator: Re,
+      toggleFullscreen: bt,
+      copyAlt: $t
+    }), (e, a) => (s(), v("div", {
+      class: St(`vue-data-ui-component vue-ui-waffle ${X.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      ref_key: "waffleChart",
+      ref: _,
+      id: `vue-ui-waffle_${y.value}`,
+      style: he(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor};${t.value.responsive ? "height: 100%" : ""}`),
+      onMouseenter: a[2] || (a[2] = () => d(at)(!0)),
+      onMouseleave: a[3] || (a[3] = () => d(at)(!1))
+    }, [
+      C("div", {
+        id: `chart-instructions-${y.value}`,
+        class: "sr-only"
+      }, [
+        C("p", null, pe(t.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, oa),
+      Ee.value?.rows?.length ? (s(), I(ea, {
+        key: 0,
+        uid: y.value,
+        head: Ee.value.headers,
+        body: Ee.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.userOptions.buttons.annotator ? (s(), I(d(Vt), {
+        key: 1,
+        svgRef: d(H),
+        backgroundColor: t.value.style.chart.backgroundColor,
+        color: t.value.style.chart.color,
+        active: ce.value,
+        isCursorPointer: j.value,
+        onClose: Re
+      }, {
+        "annotator-action-close": h(() => [
+          p(e.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": h(({ color: l }) => [
+          p(e.$slots, "annotator-action-color", x($({ color: l })), void 0, !0)
+        ]),
+        "annotator-action-draw": h(({ mode: l }) => [
+          p(e.$slots, "annotator-action-draw", x($({ mode: l })), void 0, !0)
+        ]),
+        "annotator-action-undo": h(({ disabled: l }) => [
+          p(e.$slots, "annotator-action-undo", x($({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-redo": h(({ disabled: l }) => [
+          p(e.$slots, "annotator-action-redo", x($({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-delete": h(({ disabled: l }) => [
+          p(e.$slots, "annotator-action-delete", x($({ disabled: l })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : m("", !0),
+      qt.value ? (s(), v("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: Je,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : m("", !0),
+      t.value.style.chart.title.text ? (s(), v("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: Xe,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (s(), I(Jl, {
+          key: `title_${Qe.value}`,
+          config: {
+            title: {
+              cy: "waffle-title",
+              ...t.value.style.chart.title
+            },
+            subtitle: {
+              cy: "waffle-subtitle",
+              ...t.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : m("", !0),
+      C("div", {
+        id: `legend-top-${y.value}`
+      }, null, 8, na),
+      t.value.userOptions.show && xe.value && (d(ot) || d(Pe)) ? (s(), I(d(zt), {
+        ref_key: "userOptionsRef",
+        ref: Te,
+        key: `user_options_${qe.value}`,
+        backgroundColor: t.value.style.chart.backgroundColor,
+        color: t.value.style.chart.color,
+        isPrinting: d(Be),
+        isImaging: d(Oe),
+        uid: y.value,
+        hasTooltip: t.value.userOptions.buttons.tooltip && t.value.style.chart.tooltip.show,
+        hasPdf: t.value.userOptions.buttons.pdf,
+        hasImg: t.value.userOptions.buttons.img,
+        hasSvg: t.value.userOptions.buttons.svg,
+        hasXls: t.value.userOptions.buttons.csv,
+        hasTable: t.value.userOptions.buttons.table,
+        hasFullscreen: t.value.userOptions.buttons.fullscreen,
+        hasAltCopy: t.value.userOptions.buttons.altCopy,
+        isFullscreen: X.value,
+        isTooltip: T.value.showTooltip,
+        titles: { ...t.value.userOptions.buttonTitles },
+        chartElement: _.value,
+        position: t.value.userOptions.position,
+        hasAnnotator: t.value.userOptions.buttons.annotator,
+        isAnnotation: ce.value,
+        callbacks: t.value.userOptions.callbacks,
+        printScale: t.value.userOptions.print.scale,
+        tableDialog: t.value.table.useDialog,
+        isCursorPointer: j.value,
+        onToggleFullscreen: bt,
+        onGeneratePdf: d(st),
+        onGenerateCsv: Ve,
+        onGenerateImage: hl,
+        onGenerateSvg: xt,
+        onToggleTable: wt,
+        onToggleTooltip: kt,
+        onToggleAnnotator: Re,
+        onCopyAlt: $t,
+        style: he({
+          visibility: d(ot) ? d(Pe) ? "visible" : "hidden" : "visible"
+        })
+      }, We({ _: 2 }, [
+        e.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: h(({ isOpen: l, color: o }) => [
+            p(e.$slots, "menuIcon", x($({ isOpen: l, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: h(() => [
+            p(e.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: h(() => [
+            p(e.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        e.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: h(() => [
+            p(e.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        e.$slots.optionImg ? {
+          name: "optionImg",
+          fn: h(() => [
+            p(e.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        e.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: h(() => [
+            p(e.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        e.$slots.optionTable ? {
+          name: "optionTable",
+          fn: h(() => [
+            p(e.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        e.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: h(({ toggleFullscreen: l, isFullscreen: o }) => [
+            p(e.$slots, "optionFullscreen", x($({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        e.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: h(({ toggleAnnotator: l, isAnnotator: o }) => [
+            p(e.$slots, "optionAnnotator", x($({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        e.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: h(({ altCopy: l }) => [
+            p(e.$slots, "optionAltCopy", x($({ altCopy: l })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : m("", !0),
+      C("div", ua, [
+        (s(), v("svg", {
+          ref_key: "svgRef",
+          ref: H,
+          xmlns: d(Il),
+          "aria-describedby": `chart-instructions-${y.value}`,
+          class: St({ "vue-data-ui-fullscreen--on": X.value, "vue-data-ui-fulscreen--off": !X.value }),
+          tabindex: "0",
+          viewBox: `0 0 ${B.value.width <= 0 ? 10 : B.value.width} ${B.value.height <= 0 ? 10 : B.value.height}`,
+          style: he(`max-width:100%;overflow:visible;background:transparent;color:${t.value.style.chart.color}`),
+          onFocus: pl,
+          onBlur: fl,
+          onKeydown: gl
+        }, [
+          Ce(d(Rt)),
+          C("defs", null, [
+            (s(!0), v(P, null, G(c.value, (l, o) => (s(), v("radialGradient", {
+              cx: "50%",
+              cy: "50%",
+              r: "50%",
+              fx: "50%",
+              fy: "50%",
+              id: `gradient_${y.value}_${o}`
+            }, [
+              C("stop", {
+                offset: "0%",
+                "stop-color": d(Pl)(d(_l)(l.color, 0.05), 100 - t.value.style.chart.layout.rect.gradientIntensity)
+              }, null, 8, ia),
+              C("stop", {
+                offset: "100%",
+                "stop-color": l.color
+              }, null, 8, ca)
+            ], 8, ra))), 256))
+          ]),
+          C("defs", null, [
+            C("filter", {
+              id: `blur_${y.value}`,
+              x: "-50%",
+              y: "-50%",
+              width: "200%",
+              height: "200%"
+            }, [...a[4] || (a[4] = [
+              C("feGaussianBlur", {
+                in: "SourceGraphic",
+                stdDeviation: 2
+              }, null, -1),
+              C("feColorMatrix", {
+                type: "saturate",
+                values: "0"
+              }, null, -1)
+            ])], 8, va)
+          ]),
+          t.value.useCustomCells && c.value.length ? (s(!0), v(P, { key: 0 }, G(q.value, (l, o) => (s(), v("foreignObject", {
+            x: l.x,
+            y: l.y,
+            height: L.value <= 0 ? 1e-4 : L.value,
+            width: F.value <= 0 ? 1e-4 : F.value,
+            class: "vue-ui-waffle-custom-cell-foreignObject"
+          }, [
+            p(e.$slots, "cell", Ge({ ref_for: !0 }, { cell: { ...l, color: c.value[o].color, ...c.value[o] }, isSelected: [null, void 0].includes(V.value) ? !0 : c.value[o].serieIndex === V.value }), void 0, !0)
+          ], 8, da))), 256)) : m("", !0),
+          !c.value.length && !t.value.useCustomCells ? (s(), v("rect", {
+            key: 1,
+            x: 12,
+            y: 12,
+            height: O.value.height - 24,
+            width: O.value.width - 24,
+            rx: 3,
+            fill: "none",
+            stroke: "black"
+          }, null, 8, ha)) : c.value.length && !t.value.useCustomCells ? (s(), v(P, { key: 2 }, [
+            e.$slots.pattern ? (s(), v("g", pa, [
+              (s(!0), v(P, null, G(me.value, (l) => (s(), v("defs", null, [
+                p(e.$slots, "pattern", Ge({ ref_for: !0 }, { seriesIndex: l.absoluteIndex, patternId: `pattern_${y.value}_${l.absoluteIndex}` }), void 0, !0)
+              ]))), 256))
+            ])) : m("", !0),
+            (s(!0), v(P, null, G(q.value, (l, o) => (s(), v("rect", {
+              rx: t.value.style.chart.layout.rect.rounded ? t.value.style.chart.layout.rect.rounding : 0,
+              x: l.x + t.value.style.chart.layout.grid.spaceBetween / 2,
+              y: l.y + t.value.style.chart.layout.grid.spaceBetween / 2,
+              height: L.value <= 0 ? 1e-4 : L.value,
+              width: F.value <= 0 ? 1e-4 : F.value,
+              fill: "white",
+              stroke: t.value.style.chart.layout.rect.stroke,
+              "stroke-width": t.value.style.chart.layout.rect.strokeWidth,
+              filter: we(c.value[o].serieIndex)
+            }, null, 8, fa))), 256)),
+            (s(!0), v(P, null, G(q.value, (l, o) => (s(), v("rect", {
+              rx: t.value.style.chart.layout.rect.rounded ? t.value.style.chart.layout.rect.rounding : 0,
+              x: l.x + t.value.style.chart.layout.grid.spaceBetween / 2,
+              y: l.y + t.value.style.chart.layout.grid.spaceBetween / 2,
+              height: L.value <= 0 ? 1e-4 : L.value,
+              width: F.value <= 0 ? 1e-4 : F.value,
+              fill: t.value.style.chart.layout.rect.useGradient && t.value.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${y.value}_${o})` : c.value[o].color,
+              stroke: t.value.style.chart.layout.rect.stroke,
+              "stroke-width": t.value.style.chart.layout.rect.strokeWidth,
+              filter: we(c.value[o].serieIndex)
+            }, null, 8, ga))), 256)),
+            e.$slots.pattern ? (s(), v("g", ya, [
+              (s(!0), v(P, null, G(q.value, (l, o) => (s(), v("rect", {
+                rx: t.value.style.chart.layout.rect.rounded ? t.value.style.chart.layout.rect.rounding : 0,
+                x: l.x + t.value.style.chart.layout.grid.spaceBetween / 2,
+                y: l.y + t.value.style.chart.layout.grid.spaceBetween / 2,
+                height: L.value <= 0 ? 1e-4 : L.value,
+                width: F.value <= 0 ? 1e-4 : F.value,
+                fill: `url(#pattern_${y.value}_${c.value[o].absoluteIndex})`,
+                stroke: "none",
+                filter: we(c.value[o].serieIndex)
+              }, null, 8, ma))), 256))
+            ])) : m("", !0)
+          ], 64)) : m("", !0),
+          (s(!0), v(P, null, G(q.value, (l, o) => (s(), v(P, null, [
+            ol(o, l) ? (s(), v("text", {
+              key: `datalabel_${o}`,
+              textContent: pe(nl(o, l)),
+              x: l.x + t.value.style.chart.layout.labels.captions.offsetX + t.value.style.chart.layout.grid.spaceBetween / 2 + 6,
+              y: l.y + t.value.style.chart.layout.labels.captions.offsetY + t.value.style.chart.layout.grid.spaceBetween / 2 + Fe.value / 2 + t.value.style.chart.layout.labels.captions.fontSize / 3,
+              "font-size": t.value.style.chart.layout.labels.captions.fontSize,
+              fill: d(Bl)(c.value[o].color),
+              filter: we(c.value[o].serieIndex)
+            }, null, 8, ba)) : m("", !0)
+          ], 64))), 256)),
+          (s(!0), v(P, null, G(q.value, (l, o) => (s(), v("rect", {
+            x: l.x + t.value.style.chart.layout.grid.spaceBetween / 2,
+            y: l.y + t.value.style.chart.layout.grid.spaceBetween / 2,
+            height: Fe.value,
+            width: ct.value,
+            fill: "transparent",
+            stroke: "none",
+            onMouseover: (n) => mt(o),
+            onMouseleave: (n) => al(o),
+            onClick: (n) => yt(o)
+          }, null, 40, wa))), 256)),
+          p(e.$slots, "svg", {
+            svg: {
+              ...B.value,
+              isPrintingImg: d(Be) | d(Oe) | ge.value,
+              isPrintingSvg: ye.value
+            }
+          }, void 0, !0)
+        ], 46, sa)),
+        e.$slots.hint ? (s(), v("div", ka, [
+          p(e.$slots, "hint", x($({ hint: t.value.a11y.translations.keyboardNavigation, isVisible: Se.value })), void 0, !0)
+        ])) : m("", !0)
+      ]),
+      e.$slots.watermark ? (s(), v("div", Ca, [
+        p(e.$slots, "watermark", x($({ isPrinting: d(Be) || d(Oe) || ge.value || ye.value })), void 0, !0)
+      ])) : m("", !0),
+      C("div", {
+        id: `legend-bottom-${y.value}`
+      }, null, 8, xa),
+      tt.value ? (s(), I(Cl, {
+        key: 6,
+        to: t.value.style.chart.legend.position === "top" ? `#legend-top-${y.value}` : `#legend-bottom-${y.value}`
+      }, [
+        C("div", {
+          ref_key: "chartLegend",
+          ref: Ye
+        }, [
+          t.value.style.chart.legend.show ? (s(), I(Zl, {
+            key: `legend_${et.value}`,
+            legendSet: U.value,
+            config: ll.value,
+            isCursorPointer: j.value,
+            onClickMarker: a[0] || (a[0] = ({ legend: l }) => Z(l.uid))
+          }, We({
+            item: h(({ legend: l }) => [
+              C("div", {
+                onClick: (o) => l.segregate(),
+                style: he(`opacity:${f.value.includes(l.uid) ? 0.5 : 1}`)
+              }, pe(l.display), 13, $a)
+            ]),
+            legendToggle: h(() => [
+              U.value.length > 2 && t.value.style.chart.legend.selectAllToggle.show && !d(Ae) ? (s(), I(ta, {
+                key: 0,
+                backgroundColor: t.value.style.chart.legend.selectAllToggle.backgroundColor,
+                color: t.value.style.chart.legend.selectAllToggle.color,
+                fontSize: t.value.style.chart.legend.fontSize,
+                checked: f.value.length > 0,
+                isCursorPointer: j.value,
+                onToggle: Zt
+              }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : m("", !0)
+            ]),
+            _: 2
+          }, [
+            e.$slots.pattern ? {
+              name: "legend-pattern",
+              fn: h(({ legend: l, index: o }) => [
+                Ce(Kl, {
+                  shape: l.shape,
+                  radius: 30,
+                  stroke: "none",
+                  plot: { x: 30, y: 30 },
+                  fill: `url(#pattern_${y.value}_${o})`
+                }, null, 8, ["shape", "fill"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["legendSet", "config", "isCursorPointer"])) : p(e.$slots, "legend", {
+            key: 1,
+            legend: U.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : m("", !0),
+      e.$slots.source ? (s(), v("div", {
+        key: 7,
+        ref_key: "source",
+        ref: Ke,
+        dir: "auto"
+      }, [
+        p(e.$slots, "source", {}, void 0, !0)
+      ], 512)) : m("", !0),
+      Ce(d(Lt), {
+        teleportTo: t.value.style.chart.tooltip.teleportTo,
+        show: T.value.showTooltip && te.value && f.value.length < b.dataset.length,
+        backgroundColor: t.value.style.chart.tooltip.backgroundColor,
+        color: t.value.style.chart.tooltip.color,
+        borderRadius: t.value.style.chart.tooltip.borderRadius,
+        borderColor: t.value.style.chart.tooltip.borderColor,
+        borderWidth: t.value.style.chart.tooltip.borderWidth,
+        backgroundOpacity: t.value.style.chart.tooltip.backgroundOpacity,
+        position: t.value.style.chart.tooltip.position,
+        offsetY: t.value.style.chart.tooltip.offsetY,
+        parent: _.value,
+        content: $e.value,
+        isCustom: t.value.style.chart.tooltip.customFormat && typeof t.value.style.chart.tooltip.customFormat == "function",
+        fontSize: t.value.style.chart.tooltip.fontSize,
+        isFullscreen: X.value,
+        smooth: t.value.style.chart.tooltip.smooth,
+        backdropFilter: t.value.style.chart.tooltip.backdropFilter,
+        smoothForce: t.value.style.chart.tooltip.smoothForce,
+        smoothSnapThreshold: t.value.style.chart.tooltip.smoothSnapThreshold,
+        isA11yMode: ae.value === "keyboard",
+        a11yPosition: lt.value
+      }, {
+        "tooltip-before": h(() => [
+          p(e.$slots, "tooltip-before", x($({ ...Me.value })), void 0, !0)
+        ]),
+        "tooltip-after": h(() => [
+          p(e.$slots, "tooltip-after", x($({ ...Me.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "fontSize", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
+      xe.value && t.value.userOptions.buttons.table ? (s(), I(xl(ve.value.component), Ge({ key: 8 }, ve.value.props, {
+        ref_key: "tableUnit",
+        ref: le,
+        onClose: Ct
+      }), We({
+        content: h(() => [
+          (s(), I(d(Nt), {
+            key: `table_${Ze.value}`,
+            colNames: ee.value.colNames,
+            head: ee.value.head,
+            body: ee.value.body,
+            config: ee.value.config,
+            title: t.value.table.useDialog ? "" : ve.value.title,
+            withCloseButton: !t.value.table.useDialog,
+            isCursorPointer: j.value,
+            onClose: Ct
+          }, {
+            th: h(({ th: l }) => [
+              C("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Ta)
+            ]),
+            td: h(({ td: l }) => [
+              At(pe(l.name || l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        t.value.table.useDialog ? {
+          name: "title",
+          fn: h(() => [
+            At(pe(ve.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        t.value.table.useDialog ? {
+          name: "actions",
+          fn: h(() => [
+            C("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[1] || (a[1] = (l) => Ve(t.value.userOptions.callbacks.csv)),
+              style: he({ cursor: j.value ? "pointer" : "default" })
+            }, [
+              Ce(d(Dt), {
+                name: "fileCsv",
+                stroke: ve.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : m("", !0),
+      p(e.$slots, "skeleton", {}, () => [
+        d(Ae) ? (s(), I(Wl, { key: 0 })) : m("", !0)
+      ], !0)
+    ], 46, aa));
+  }
+}, qa = /* @__PURE__ */ la(Sa, [["__scopeId", "data-v-7a0b4694"]]);
+export {
+  qa as default
+};