vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-horizontal-bar-BoBZOybC.js

@@ -0,0 +1,1637 @@
+import { useCssVars as Na, defineAsyncComponent as se, useSlots as Ia, computed as h, ref as v, toRefs as Va, watch as re, onBeforeUnmount as Oa, onMounted as Ye, openBlock as n, createElementBlock as r, unref as i, normalizeStyle as b, normalizeClass as te, createElementVNode as s, toDisplayString as k, createBlock as H, createCommentVNode as p, withCtx as f, renderSlot as y, normalizeProps as O, guardReactiveProps as F, createSlots as Te, createVNode as ie, Fragment as B, renderList as D, mergeProps as Ot, resolveDynamicComponent as Fa, withKeys as Ma, createTextVNode as Ft, nextTick as Le } from "vue";
+import { j as Ba, t as Mt, m as Da, p as ae, $ as qe, n as Ea, q as ye, o as Ze, K as N, s as Je, k as ge, l as M, X as Ra, u as Qe, v as Xa, Z as et, aq as Ha, a0 as Ua, a1 as Wa, T as Ga, U as Ka, a3 as ja } from "./lib-DBptbyyI.js";
+import { t as Ya, u as qa } from "./useResponsive-DfdjqQps.js";
+import { u as Za } from "./useConfig-DO94Aj5s.js";
+import { u as Ja, B as Qa } from "./BaseScanner-BhhkKVoj.js";
+import { u as el } from "./usePrinter-CEpYU3r5.js";
+import { u as tl } from "./useSvgExport-ByUukOZt.js";
+import { u as tt } from "./useNestedProp-Bf5XFbs8.js";
+import { u as al } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as ll } from "./useTableResponsive-Cbx-ACcP.js";
+import { u as ol } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as nl } from "./useChartAccessibility-9icAAmYg.js";
+import ul from "./img-LXxMLmCg.js";
+import { _ as Bt } from "./Shape-BKRUOeKk.js";
+import sl from "./Title-BeMKE1cj.js";
+import rl from "./vue_ui_horizontal_bar-BEagrV0T.js";
+import Dt from "./Legend-CS7Xo5LK.js";
+import il from "./vue-ui-accordion-nvggWcGN.js";
+import { B as Et } from "./BaseLegendToggle-BQVIawmA.js";
+import { A as vl } from "./A11yDataTable-KcVAX2cP.js";
+import { _ as cl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const dl = ["id"], hl = ["id"], pl = ["onClick"], fl = { style: { position: "relative" } }, yl = ["xmlns", "viewBox", "aria-describedby"], gl = ["width", "height"], bl = ["id"], ml = ["stop-color"], kl = ["stop-color"], Cl = { key: 1 }, xl = ["y", "width", "height", "fill", "rx"], wl = ["x", "y", "width", "height", "fill", "rx"], _l = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], $l = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], Tl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ll = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Sl = { class: "vue-ui-horizontal-bar-parent-label" }, Pl = ["y", "height", "width", "fill"], Al = ["y", "font-size", "fill", "x", "font-weight", "innerHTML"], zl = ["y", "font-size", "fill", "x", "font-weight"], Nl = { class: "vue-ui-horizontal-bar-child-label" }, Il = ["x", "y", "font-size", "font-weight", "innerHTML"], Vl = { class: "vue-ui-horizontal-bar-child-label" }, Ol = ["x", "y", "font-size", "fill", "font-weight", "innerHTML"], Fl = { class: "vue-ui-horizontal-bar-child-label" }, Ml = ["x", "y", "text-anchor", "font-size", "fill", "font-weight"], Bl = ["y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], Dl = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, El = {
+  key: 6,
+  class: "vue-data-ui-watermark"
+}, Rl = ["onClick"], Xl = { style: "width:100%;padding-top: 36px;position:relative" }, Hl = { class: "vue-ui-data-table" }, Ul = { key: 0 }, Wl = { style: { width: "100%" } }, Gl = ["data-cell"], Kl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, jl = ["data-cell"], Yl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ql = ["data-cell"], Zl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Jl = ["data-cell"], Ql = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, eo = ["data-cell"], to = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ao = ["data-cell"], lo = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, oo = ["data-cell"], no = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, uo = {
+  __name: "vue-ui-horizontal-bar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "copyAlt"],
+  setup(Rt, { expose: Xt, emit: Ht }) {
+    Na((t) => ({
+      v6c1e4e56: t.tdo
+    }));
+    const Ut = se(() => import("./Tooltip-Bf-kM3_A.js")), at = se(() => import("./BaseIcon-Cb3zzG6s.js")), Wt = se(() => import("./PenAndPaper-Ct3qJ4lA.js")), Gt = se(() => import("./UserOptions-rW2fRf3V.js")), Kt = se(() => import("./PackageVersion-DPO-OOVI.js")), jt = se(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_vertical_bar: Yt } = Za(), { isThemeValid: qt, warnInvalidTheme: Zt } = al(), Jt = Ia(), C = Rt, Se = h({
+      get() {
+        return !!C.dataset && C.dataset.length;
+      },
+      set(t) {
+        return t;
+      }
+    }), S = v(Ba()), be = v(!1), Pe = v(""), me = v(null), lt = v(0), R = v(null), ot = v(null), Ae = v(null), nt = v(null), ut = v(null), st = v(0), ze = v(0), Qt = v(null), ve = v(null), Ne = v(null), ea = v(null), Ie = v(null), _ = v([]), ta = v({ none: 0, asc: 1, desc: 2 }), G = v(0), ke = v(!1), ce = v(0), le = v(0), Ve = v(null), Ce = v(!1), xe = v(!1), z = v(null), rt = v({ x: 0, y: 0 }), Oe = v("pointer"), it = Ht, e = v(Be()), Y = h(() => e.value.userOptions.useCursorPointer), aa = h(() => {
+      const t = [
+        { name: "", value: 6, color: "#d9d9d9" },
+        { name: "", value: 5, color: "#d9d9d9" },
+        { name: "", value: 4, color: "#d9d9d9" },
+        { name: "", value: 3, color: "#d9d9d9" },
+        { name: "", value: 2, color: "#d9d9d9" },
+        { name: "", value: 1, color: "#d9d9d9" }
+      ];
+      return C.config?.skeletonDataset ?? t;
+    }), la = h(() => Mt({
+      defaultConfig: {
+        useCssAnimation: !1,
+        userOptions: { show: !1 },
+        table: { show: !1 },
+        style: {
+          chart: {
+            backgroundColor: "#99999930",
+            layout: {
+              bars: {
+                offsetX: 110,
+                dataLabels: {
+                  color: "transparent",
+                  value: { prefix: "", suffix: "", formatter: null }
+                },
+                nameLabels: { color: "transparent" }
+              },
+              separators: { color: "#7A7A7A" }
+            },
+            legend: {
+              show: !0,
+              backgroundColor: "transparent",
+              color: "transparent",
+              prefix: "",
+              suffix: "",
+              formatter: null
+            },
+            title: { color: "#1A1A1A", subtitle: { color: "#5A5A5A" } }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: we, FINAL_DATASET: vt, manualLoading: Fe } = Ja({
+      ...Va(C),
+      FINAL_CONFIG: e,
+      prepareConfig: Be,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          T.value.showTable = e.value.table.show, sa();
+        });
+      },
+      skeletonDataset: aa.value,
+      skeletonConfig: Mt({
+        defaultConfig: e.value,
+        userConfig: la.value
+      })
+    }), { userOptionsVisible: Me, setUserOptionsVisibility: ct, keepUserOptionState: dt } = ol({ config: e.value }), { svgRef: oe } = nl({
+      config: e.value.style.chart.title
+    });
+    function Be() {
+      const t = tt({
+        userConfig: C.config,
+        defaultConfig: Yt
+      });
+      let l = {};
+      const a = t.theme;
+      if (a)
+        if (!qt.value(t))
+          Zt(t), l = t;
+        else {
+          const o = tt({
+            userConfig: rl[a] || C.config,
+            defaultConfig: t
+          });
+          l = {
+            ...tt({ userConfig: C.config, defaultConfig: o }),
+            customPalette: t.customPalette.length ? t.customPalette : Da[a] || ae
+          };
+        }
+      else
+        l = t;
+      return C.config && qe(C.config, "events.datapointEnter") ? l.events.datapointEnter = C.config.events.datapointEnter : l.events.datapointEnter = null, C.config && qe(C.config, "events.datapointLeave") ? l.events.datapointLeave = C.config.events.datapointLeave : l.events.datapointLeave = null, C.config && qe(C.config, "events.datapointClick") ? l.events.datapointClick = C.config.events.datapointClick : l.events.datapointClick = null, l;
+    }
+    const E = v(e.value.style.chart.width), K = v(e.value.style.chart.height), x = v(e.value.style.chart.layout.bars.gap);
+    re(
+      () => C.config,
+      (t) => {
+        we.value || (e.value = Be()), Me.value = !e.value.userOptions.showOnChartHover, st.value += 1, ze.value += 1, T.value.showTable = e.value.table.show, T.value.sortDesc = e.value.style.chart.layout.bars.sort === "desc", T.value.showTooltip = e.value.style.chart.tooltip.show, E.value = e.value.style.chart.width, K.value = e.value.style.chart.height, x.value = e.value.style.chart.layout.bars.gap;
+      },
+      { deep: !0 }
+    ), re(
+      () => C.dataset,
+      (t) => {
+        Array.isArray(t) && t.length > 0 && (Fe.value = !1);
+      },
+      { deep: !0 }
+    );
+    const { isPrinting: De, isImaging: Ee, generatePdf: ht, generateImage: pt } = el({
+      elementId: `vue-ui-vertical-bar_${S.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-vertical-bar",
+      options: e.value.userOptions.print
+    }), oa = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), ft = h(() => Ea(e.value.customPalette)), yt = v(null), na = h(() => e.value.table.responsiveBreakpoint), _e = h(() => !!e.value.debug), ua = v(0), j = v(null), q = v(null);
+    function sa() {
+      if (R.value && (Ze(C.dataset) && (ye({
+        componentName: "VueUiVerticalBar",
+        type: "dataset",
+        debug: _e.value
+      }), Se.value = !1, Fe.value = !0), Ze(C.dataset) || (Fe.value = e.value.loading), e.value.responsive)) {
+        const t = Ya(() => {
+          const { width: l, height: a } = qa({
+            chart: R.value,
+            title: e.value.style.chart.title.text ? ot.value : null,
+            legend: e.value.style.chart.legend.show ? Ae.value : null,
+            source: nt.value,
+            noTitle: ut.value
+          });
+          ua.value = a / 3, requestAnimationFrame(async () => {
+            K.value = a, E.value = l;
+          });
+        });
+        j.value && (q.value && j.value.unobserve(q.value), j.value.disconnect()), j.value = new ResizeObserver(t), Le(() => {
+          q.value = R.value?.parentNode, q.value && j.value.observe(q.value);
+        });
+      }
+    }
+    Oa(() => {
+      j.value && (q.value && j.value.unobserve(q.value), j.value.disconnect());
+    });
+    const T = v({
+      showTable: e.value.table.show,
+      sortDesc: e.value.style.chart.layout.bars.sort === "desc",
+      showTooltip: e.value.style.chart.tooltip.show
+    }), gt = h(() => T.value.sortDesc), P = h(() => (vt.value.forEach((t, l) => {
+      !t.value && !t.children && ye({
+        componentName: "VueUiVerticalBar",
+        type: "datasetAttributeEmpty",
+        property: `value (index ${l})`,
+        debug: _e.value
+      }), t.children && (Ze(t.children) ? ye({
+        componentName: "VueUiVerticalBar",
+        type: "datasetAttributeEmpty",
+        property: `children (index ${l})`,
+        debug: _e.value
+      }) : t.children.forEach((a, o) => {
+        [null, void 0].includes(a.name) && ye({
+          componentName: "VueUiVerticalBar",
+          type: "datasetSerieAttribute",
+          property: "name",
+          key: "children",
+          index: o,
+          debug: _e.value
+        });
+      }));
+    }), vt.value.map((t, l) => {
+      const a = `vertical_parent_${l}_${S.value}`, o = t.children && t.children.length > 0, g = N(
+        t.value ? t.value : o ? t.children.map((u) => u.value || 0).reduce((u, $) => u + $, 0) : 0
+      ), m = g >= 0 ? 1 : -1;
+      return {
+        ...t,
+        id: a,
+        absoluteIndex: l,
+        shape: "square",
+        opacity: _.value.includes(a) ? 0.5 : 1,
+        value: Math.abs(g),
+        sign: m,
+        hasChildren: o,
+        isChild: !1,
+        segregate: () => Z(a),
+        isSegregated: _.value.includes(a),
+        color: Je(t.color) || ft.value[l] || ae[l] || ae[l % ae.length],
+        children: !t.children || !t.children.length ? [] : t.children.toSorted(
+          ke.value ? () => 0 : (u, $) => gt.value ? $.value - u.value : u.value - $.value
+        ).map((u, $) => ({
+          ...u,
+          value: N(Math.abs(u.value)),
+          absoluteIndex: l,
+          sign: u.value >= 0 ? 1 : -1,
+          isChild: !0,
+          parentId: a,
+          parentName: t.name,
+          parentValue: g,
+          parentSign: m,
+          id: `vertical_child_${l}_${$}_${S.value}`,
+          childIndex: $,
+          color: Je(u.color) || Je(t.color) || ft.value[l] || ae[l] || ae[l % ae.length]
+        })).map((u, $) => ({
+          ...u,
+          isFirstChild: $ === 0,
+          isLastChild: $ === t.children.length - 1
+        }))
+      };
+    }).toSorted(
+      ke.value ? () => 0 : (t, l) => gt.value ? l.value - t.value : t.value - l.value
+    ))), U = h(() => P.value.filter(
+      (t) => !_.value.includes(t.id)
+    )), w = h(() => U.value.flatMap((t) => t.hasChildren ? t.children : t)), ra = h(() => P.value.flatMap((t) => t.hasChildren ? t.children : t)), bt = h(() => U.value.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0)), mt = h(() => ({
+      cy: "vertical-bar-div-legend",
+      backgroundColor: e.value.style.chart.legend.backgroundColor,
+      color: e.value.style.chart.legend.color,
+      fontSize: e.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
+    })), L = h(() => e.value.style.chart.layout.bars.parentLabels.show ? e.value.style.chart.layout.bars.parentLabels.fontSize * 3 + e.value.style.chart.layout.bars.parentLabels.paddingBottom : 0), A = h(() => {
+      const t = [];
+      let l = 0;
+      return w.value.forEach((a, o) => {
+        a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show && (l += 1), t[o] = l;
+      }), t;
+    }), d = h(() => {
+      const l = Math.max(0, ...A.value) * L.value;
+      return (K.value - 24 - (bt.value - 1) * x.value - l) / bt.value;
+    }), W = h(() => ({
+      width: E.value,
+      height: K.value,
+      padding: {
+        top: 12,
+        left: 128 + e.value.style.chart.layout.bars.offsetX,
+        right: 64 + e.value.style.chart.layout.bars.paddingRight,
+        bottom: 12
+      }
+    })), Re = v(0);
+    function kt() {
+      Le(() => {
+        if (!Ie.value) {
+          Re.value = 0;
+          return;
+        }
+        const l = Array.from(Ie.value.querySelectorAll("text")).reduce((a, o) => {
+          const g = o.getBBox?.().width ?? o.getComputedTextLength();
+          return g > a ? g : a;
+        }, 0);
+        Re.value = l + 12;
+      });
+    }
+    re(
+      () => [
+        w.value,
+        E.value,
+        K.value,
+        e.value.style.chart.layout.bars.nameLabels,
+        e.value.style.chart.layout.bars.offsetX
+      ],
+      () => kt(),
+      { deep: !0 }
+    ), Ye(() => {
+      kt();
+    });
+    function de() {
+      Le(() => {
+        ce.value = 0, le.value = 0, requestAnimationFrame(() => {
+          if (!Ve.value) {
+            ce.value = 0, le.value = 0;
+            return;
+          }
+          const t = Array.from(
+            Ve.value.querySelectorAll("text")
+          );
+          if (!t.length) {
+            ce.value = 0, le.value = 0;
+            return;
+          }
+          let l = 1 / 0, a = 0;
+          t.forEach((je) => {
+            const fe = je.getBBox(), ue = fe.x, ee = fe.x + fe.width;
+            ue < l && (l = ue), ee > a && (a = ee);
+          });
+          const o = 0, g = E.value, m = 24, u = Math.max(0, o - l + m), $ = Math.max(0, a - g + m);
+          le.value = u, ce.value = $;
+        });
+      });
+    }
+    re(_, () => de(), { deep: !0 }), re(
+      () => [w.value, E.value, K.value],
+      () => de(),
+      { deep: !0 }
+    ), Ye(() => de());
+    const c = h(() => {
+      const t = Re.value + Math.abs(e.value.style.chart.layout.bars.nameLabels.offsetX) + le.value + e.value.style.chart.layout.bars.offsetX, l = W.value.width - W.value.padding.right, a = Math.max(0, l - t - ce.value - le.value - e.value.style.chart.layout.bars.offsetX);
+      return {
+        top: W.value.padding.top,
+        bottom: W.value.padding.top + W.value.height,
+        left: t,
+        right: l,
+        width: a,
+        fullHeight: W.value.padding.top + W.value.padding.bottom + W.value.height
+      };
+    });
+    function Ct() {
+      _.value.length ? _.value = [] : P.value.forEach((t) => {
+        _.value.push(t.id);
+      }), de();
+    }
+    async function Z(t) {
+      if (_.value.includes(t))
+        _.value = _.value.filter((l) => l !== t);
+      else {
+        if (_.value.length === P.value.length - 1) return;
+        _.value.push(t);
+      }
+      it("selectLegend", U.value), de();
+    }
+    function xt(t) {
+      if (!P.value.length)
+        return e.value.debug && console.warn("VueUiHorizontalBar - There are no series to show."), null;
+      const l = P.value.find((a) => a.name === t);
+      return l || (e.value.debug && console.warn(`VueUiHorizontalBar - Series name not found "${t}"`), null);
+    }
+    function ia(t) {
+      const l = xt(t);
+      l !== null && _.value.includes(l.id) && Z(l.id);
+    }
+    function va(t) {
+      const l = xt(t);
+      l !== null && (_.value.includes(l.id) || Z(l.id));
+    }
+    const X = h(() => U.value.map((t) => Math.abs(t.value)).reduce((t, l) => t + l, 0));
+    function wt(t, l = !1, a = 0) {
+      return l ? M({
+        v: N(Math.abs(t) / X.value * 100),
+        s: "%",
+        r: a
+      }) : Math.abs(t) / X.value;
+    }
+    const J = h(() => w.value.map((t) => t.sign).includes(-1)), ca = h(() => Math.max(
+      ...U.value.flatMap((t) => t.children && t.children.length ? Math.max(...t.children.map((l) => l.value)) : t.value)
+    ));
+    function I(t) {
+      const l = t / ca.value;
+      return N(c.value.width / (J.value ? 2 : 1) * l);
+    }
+    function da(t) {
+      return I(t) + c.value.left;
+    }
+    function ne(t, l) {
+      const a = U.value.find((u) => u.id === t.parentId);
+      return {
+        y: c.value.top + (x.value + d.value) * l + A.value[l] * L.value - L.value + e.value.style.chart.layout.bars.parentLabels.fontSize,
+        name: a.name,
+        value: [void 0, NaN, null].includes(a.value) ? "" : a.sign === 1 ? a.value : -a.value,
+        percentageToTotal: isNaN(a.value / X.value) ? "" : wt(
+          a.value,
+          !0,
+          e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage
+        ),
+        sign: a.sign
+      };
+    }
+    function ha() {
+      return U.value;
+    }
+    function _t(t, l) {
+      return ne(t, l).name;
+    }
+    function pa(t, l) {
+      const a = ne(t, l);
+      return St(a.value, a, l, t.parentSign || t.sign);
+    }
+    const Xe = v(null), He = v(null);
+    function $t({ datapoint: t, seriesIndex: l }) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: l });
+    }
+    function Tt({ datapoint: t, seriesIndex: l }) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: l }), me.value = null, be.value = !1, Xe.value = null, z.value === l && (z.value = null);
+    }
+    function Lt(t, l, a = "pointer") {
+      Oe.value = a, e.value.events.datapointEnter && e.value.events.datapointEnter({ datpoint: t, seriesIndex: l }), z.value = l, me.value = t, He.value = {
+        datapoint: t,
+        seriesIndex: l,
+        series: P.value,
+        config: e.value
+      }, be.value = !0, Xe.value = t.id;
+      let o = "";
+      const g = t.isChild ? t.parentName : t.name, m = t.isChild ? t.name : "", u = e.value.style.chart.tooltip.customFormat;
+      Ga(u) && Ka(
+        () => u({
+          datapoint: t,
+          series: P.value,
+          config: e.value,
+          seriesIndex: l
+        })
+      ) ? Pe.value = u({
+        datapoint: t,
+        series: P.value,
+        config: e.value,
+        seriesIndex: l
+      }) : (o += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;text-align:left;">
+                <div style="display:flex;align-items:center;gap:4px;"><svg viewBox="0 0 60 60" height="14" width="14"><rect x="0" y="0" height="60" width="60" rx="5" stroke="none" fill="${t.color}"/>${Jt.pattern ? `<rect x="0" y="0" height="60" width="60" rx="5" stroke="none" fill="url(#pattern_${S.value}_${t.absoluteIndex})"/>` : ""}</svg> ${g}</div>
+                ${m ? `<div>${m}</div>` : ""}
+            </div>`, e.value.style.chart.tooltip.showValue && (o += `<div>${e.value.translations.value}: <b>${ge(
+        e.value.style.chart.layout.bars.dataLabels.value.formatter,
+        t.sign === 1 ? t.value : -t.value,
+        M({
+          p: e.value.style.chart.tooltip.prefix,
+          v: t.sign === 1 ? t.value : -t.value,
+          s: e.value.style.chart.tooltip.suffix,
+          r: e.value.style.chart.tooltip.roundingValue
+        }),
+        { datapoint: t, seriesIndex: l }
+      )}</b></div>`), e.value.style.chart.tooltip.showPercentage && (o += `<div>${e.value.translations.percentageToTotal} : <b>${M({
+        v: Math.abs(t.value) / X.value * 100,
+        s: "%",
+        r: e.value.style.chart.tooltip.roundingPercentage
+      })}</b></div>`, t.isChild && (o += `<div>${e.value.translations.percentageToSerie}: <b>${M({
+        v: Math.abs(t.value) / Math.abs(t.parentValue) * 100,
+        s: "%",
+        r: e.value.style.chart.tooltip.roundingPercentage
+      })}</b></div>`)), Pe.value = `<div style="text-align:left">${o}</div>`);
+    }
+    function St(t, l, a, o) {
+      if (!e.value.style.chart.layout.bars.dataLabels.value.show)
+        return "";
+      const g = ge(
+        e.value.style.chart.layout.bars.dataLabels.value.formatter,
+        N(o === -1 && t >= 0 ? -t : t),
+        M({
+          p: e.value.style.chart.layout.bars.dataLabels.value.prefix,
+          v: N(o === -1 && t >= 0 ? -t : t),
+          s: e.value.style.chart.layout.bars.dataLabels.value.suffix,
+          r: e.value.style.chart.layout.bars.dataLabels.value.roundingValue
+        }),
+        { datapoint: l, seriesIndex: a }
+      ), m = `(${wt(
+        t,
+        !0,
+        e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage
+      )})`;
+      return `${g}${e.value.style.chart.layout.bars.dataLabels.percentage.show ? ` ${m}` : ""}`;
+    }
+    const V = h(() => {
+      const t = [
+        e.value.translations.parentName,
+        e.value.translations.value,
+        e.value.translations.percentageToTotal,
+        e.value.translations.childName,
+        e.value.translations.value,
+        e.value.translations.percentageToSerie,
+        e.value.translations.percentageToTotal
+      ], l = w.value.map((a) => a.isChild ? a.isFirstChild ? {
+        color: a.color,
+        parentName: a.parentName,
+        parentValue: a.parentValue,
+        percentageToTotal: a.parentValue / X.value,
+        childName: a.name,
+        childValue: a.sign === 1 ? a.value : -a.value,
+        childPercentageToParent: Math.abs(a.value) / Math.abs(a.parentValue),
+        childPercentageToTotal: Math.abs(a.value) / X.value
+      } : {
+        color: "",
+        parentName: "",
+        parentValue: "",
+        percentageToTotal: "",
+        childName: a.name,
+        childValue: a.sign === 1 ? a.value : -a.value,
+        childPercentageToParent: Math.abs(a.value) / Math.abs(a.parentValue),
+        childPercentageToTotal: Math.abs(a.value) / X.value
+      } : {
+        color: a.color,
+        parentName: a.name,
+        parentValue: a.sign === 1 ? a.value : -a.value,
+        percentageToTotal: Math.abs(a.value) / X.value,
+        childName: "",
+        childValue: "",
+        childPercentageToParent: "",
+        childPercentageToTotal: ""
+      });
+      return { head: t, body: l };
+    });
+    function Ue(t = null) {
+      const l = [
+        [e.value.style.chart.title.text],
+        [e.value.style.chart.title.subtitle.text],
+        [""]
+      ], a = V.value.head, o = V.value.body.map((u) => [
+        u.parentName,
+        u.parentValue,
+        u.percentageToTotal,
+        u.childName,
+        u.childValue,
+        u.childPercentageToParent,
+        u.childPercentageToTotal
+      ]), g = l.concat([a]).concat(o), m = Ua(g);
+      t ? t(m) : Wa({
+        csvContent: m,
+        title: e.value.style.chart.title.text || "vue-ui-vertical-bar"
+      });
+    }
+    const Q = v(!1);
+    function Pt(t) {
+      Q.value = t, lt.value += 1;
+    }
+    function At() {
+      T.value.showTable = !T.value.showTable;
+    }
+    Ye(() => {
+      ["none", "asc", "desc"].includes(
+        e.value.style.chart.layout.bars.sort
+      ) || ye({
+        componentName: "VueUiVerticalBar",
+        type: "attributeWrongValue",
+        property: "style.chart.layout.bars.sort",
+        key: e.value.style.chart.layout.bars.sort
+      }), G.value = ta.value[e.value.style.chart.layout.bars.sort], T.value.sortDesc = G.value === 2, ke.value = G.value === 0;
+    });
+    function fa() {
+      G.value += 1, G.value > 2 && (G.value = 0);
+    }
+    function zt() {
+      fa(), T.value.sortDesc = G.value === 2, ke.value = G.value === 0;
+    }
+    function Nt() {
+      T.value.showTooltip = !T.value.showTooltip;
+    }
+    const he = v(!1);
+    function We() {
+      he.value = !he.value;
+    }
+    async function ya({ scale: t = 2 } = {}) {
+      if (!R.value) return;
+      const { width: l, height: a } = R.value.getBoundingClientRect(), o = l / a, { imageUri: g, base64: m } = await ul({
+        domElement: R.value,
+        base64: !0,
+        img: !0,
+        scale: t
+      });
+      return {
+        imageUri: g,
+        base64: m,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: a,
+        aspectRatio: o
+      };
+    }
+    const $e = h(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, l = T.value.showTable;
+      return {
+        component: t ? jt : il,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: t ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: Q.value,
+          fullscreenParent: R.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: Y.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: l,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    re(
+      () => T.value.showTable,
+      (t) => {
+        e.value.table.show || (t && e.value.table.useDialog && ve.value ? ve.value.open() : "close" in ve.value && ve.value.close());
+      }
+    );
+    const { isResponsive: ga } = ll(yt, na);
+    function Ge() {
+      T.value.showTable = !1, Ne.value && Ne.value.setTableIconState(!1);
+    }
+    const ba = h(() => P.value.map((t, l) => ({
+      ...t,
+      shape: "square",
+      display: `${t.name}: ${ge(
+        e.value.style.chart.layout.bars.dataLabels.value.formatter,
+        t.value,
+        M({
+          p: e.value.style.chart.legend.prefix,
+          v: t.value,
+          s: e.value.style.chart.legend.suffix,
+          r: e.value.style.chart.legend.roundingValue
+        }),
+        { datapoint: t, seriesIndex: l }
+      )}`
+    }))), ma = h(() => e.value.style.chart.backgroundColor), ka = h(() => e.value.style.chart.legend), Ca = h(() => e.value.style.chart.title), xa = h(() => ba.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), { exportSvg: wa, getSvg: _a } = tl({
+      svg: oe,
+      title: Ca,
+      legend: ka,
+      legendItems: xa,
+      backgroundColor: ma
+    });
+    async function It({ isCb: t }) {
+      xe.value = !0, await Le();
+      try {
+        if (t) {
+          const { blob: l, url: a, text: o, dataUrl: g } = await _a();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: l, url: a, text: o, dataUrl: g }));
+        } else
+          await Promise.resolve(wa());
+      } finally {
+        xe.value = !1;
+      }
+    }
+    function $a(t) {
+      if (t?.stage === "start") {
+        Ce.value = !0;
+        return;
+      }
+      if (t?.stage === "end") {
+        Ce.value = !1;
+        return;
+      }
+      pt();
+    }
+    function Ta() {
+      console.warn("[autoSize]: this legacy method can be safely removed as it has no impact.");
+    }
+    async function Vt() {
+      if (it("copyAlt", {
+        config: e.value,
+        dataset: U.value
+      }), !e.value.userOptions.callbacks.altCopy) {
+        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+        return;
+      }
+      await Promise.resolve(e.value.userOptions.callbacks.altCopy({
+        config: e.value,
+        dataset: U.value
+      }));
+    }
+    const Ke = v(!1);
+    function La() {
+      z.value = null, Ke.value = !0;
+    }
+    function Sa() {
+      z.value = null, be.value = !1, Ke.value = !1;
+    }
+    function Pa() {
+      if (z.value === null) return;
+      const t = w.value[z.value];
+      t && Tt({
+        datapoint: t,
+        seriesIndex: z.value
+      }), z.value = null, Oe.value = "pointer";
+    }
+    function Aa(t) {
+      if (!oe.value || he.value || document.activeElement !== oe.value) return;
+      const l = t.key === "ArrowRight" || t.key === "ArrowDown", a = t.key === "ArrowLeft" || t.key === "ArrowUp", o = t.key === "Enter" || t.key === " ", g = t.key === "Escape";
+      if (!l && !a && !o && !g) return;
+      const m = w.value.length;
+      if (!m) return;
+      if (t.preventDefault(), t.stopPropagation(), g) {
+        Pa();
+        return;
+      }
+      if (o) {
+        if (z.value === null) return;
+        const ee = w.value[z.value];
+        if (!ee) return;
+        $t({
+          datapoint: ee,
+          seriesIndex: z.value
+        });
+        return;
+      }
+      let u = z.value;
+      const $ = me.value ? w.value.findIndex((ee) => ee.id === me.value.id) : null, je = u !== null && u >= 0 && u < m, fe = $ !== null && $ >= 0 && $ < m;
+      je ? l ? (u += 1, u >= m && (u = 0)) : a && (u -= 1, u < 0 && (u = m - 1)) : fe ? (u = l ? $ + 1 : $ - 1, u >= m && (u = 0), u < 0 && (u = m - 1)) : l ? u = 0 : u = m - 1;
+      const ue = w.value[u];
+      ue && (z.value = u, za(ue), Lt(ue, u, "keyboard"));
+    }
+    function za(t) {
+      if (!t) return;
+      let l = c.value.right, a = c.value.top + (x.value + d.value) * t.absoluteIndex + A.value[t.absoluteIndex] * L.value;
+      if (!Number.isFinite(l) || !Number.isFinite(a))
+        return;
+      const o = ja(l, a, oe.value);
+      o && (rt.value = o);
+    }
+    const pe = h(() => ({
+      head: V.value.head,
+      body: V.value.body.map((t) => [
+        t.parentName,
+        t.parentValue === "" ? "" : M({
+          v: t.parentValue,
+          r: e.value.style.chart.layout.bars.dataLabels.value.roundingValue,
+          p: e.value.style.chart.layout.bars.dataLabels.prefix,
+          s: e.value.style.chart.layout.bars.dataLabels.suffix
+        }),
+        t.percentageToTotal === "" ? "" : M({
+          v: t.percentageToTotal * 100,
+          r: e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage,
+          s: "%"
+        }),
+        t.childName,
+        t.childValue === "" ? "" : M({
+          v: t.childValue,
+          r: e.value.style.chart.layout.bars.dataLabels.value.roundingValue,
+          p: e.value.style.chart.layout.bars.dataLabels.prefix,
+          s: e.value.style.chart.layout.bars.dataLabels.suffix
+        }),
+        t.childPercentageToParent === "" ? "" : M({
+          v: t.childPercentageToParent * 100,
+          r: e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage,
+          s: "%"
+        }),
+        t.childPercentageToTotal === "" ? "" : M({
+          v: t.childPercentageToTotal * 100,
+          r: e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage,
+          s: "%"
+        })
+      ]),
+      caption: e.value.a11y.translations.tableCaption,
+      notice: e.value.a11y.translations.tableAvailable
+    }));
+    return Xt({
+      autoSize: Ta,
+      getData: ha,
+      getImage: ya,
+      generatePdf: ht,
+      generateCsv: Ue,
+      generateImage: pt,
+      generateSvg: It,
+      hideSeries: va,
+      showSeries: ia,
+      toggleTable: At,
+      toggleSort: zt,
+      toggleTooltip: Nt,
+      toggleAnnotator: We,
+      toggleFullscreen: Pt,
+      copyAlt: Vt
+    }), (t, l) => (n(), r("div", {
+      class: te(`vue-data-ui-component vue-ui-vertical-bar ${Q.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"} ${e.value.responsive ? "vue-ui-vertical-bar-autosize" : ""}`),
+      ref_key: "verticalBarChart",
+      ref: R,
+      id: `vue-ui-vertical-bar_${S.value}`,
+      style: b(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};height:100%`),
+      onMouseenter: l[3] || (l[3] = () => i(ct)(!0)),
+      onMouseleave: l[4] || (l[4] = () => i(ct)(!1))
+    }, [
+      s("p", {
+        id: `chart-instructions-${S.value}`,
+        class: "sr-only"
+      }, k(e.value.a11y.translations.keyboardNavigation), 9, hl),
+      pe.value.body.length ? (n(), H(vl, {
+        key: 0,
+        uid: S.value,
+        head: pe.value.head,
+        body: pe.value.body,
+        caption: pe.value.caption,
+        notice: pe.value.notice
+      }, null, 8, ["uid", "head", "body", "caption", "notice"])) : p("", !0),
+      e.value.userOptions.buttons.annotator ? (n(), H(i(Wt), {
+        key: 1,
+        svgRef: i(oe),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: he.value,
+        isCursorPointer: Y.value,
+        onClose: We
+      }, {
+        "annotator-action-close": f(() => [
+          y(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": f(({ color: a }) => [
+          y(t.$slots, "annotator-action-color", O(F({ color: a })), void 0, !0)
+        ]),
+        "annotator-action-draw": f(({ mode: a }) => [
+          y(t.$slots, "annotator-action-draw", O(F({ mode: a })), void 0, !0)
+        ]),
+        "annotator-action-undo": f(({ disabled: a }) => [
+          y(t.$slots, "annotator-action-undo", O(F({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-redo": f(({ disabled: a }) => [
+          y(t.$slots, "annotator-action-redo", O(F({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-delete": f(({ disabled: a }) => [
+          y(t.$slots, "annotator-action-delete", O(F({ disabled: a })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : p("", !0),
+      oa.value ? (n(), r("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: ut,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : p("", !0),
+      e.value.style.chart.title.text ? (n(), r("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: ot,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (n(), H(sl, {
+          key: `title_${st.value}`,
+          config: {
+            title: {
+              cy: "vertical-bar-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "vertical-bar-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : p("", !0),
+      e.value.userOptions.show && Se.value && (i(dt) || i(Me)) ? (n(), H(i(Gt), {
+        ref_key: "userOptionsRef",
+        ref: Ne,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        key: `user_options_${lt.value}`,
+        isImaging: i(Ee),
+        isPrinting: i(De),
+        uid: S.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasSort: e.value.userOptions.buttons.sort,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        hasAltCopy: e.value.userOptions.buttons.altCopy,
+        isFullscreen: Q.value,
+        isTooltip: T.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: R.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: he.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        isCursorPointer: Y.value,
+        onToggleFullscreen: Pt,
+        onGeneratePdf: i(ht),
+        onGenerateCsv: Ue,
+        onGenerateImage: $a,
+        onGenerateSvg: It,
+        onToggleTable: At,
+        onToggleSort: zt,
+        onToggleTooltip: Nt,
+        onToggleAnnotator: We,
+        onCopyAlt: Vt,
+        style: b({
+          visibility: i(dt) ? i(Me) ? "visible" : "hidden" : "visible"
+        })
+      }, Te({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: f(({ isOpen: a, color: o }) => [
+            y(t.$slots, "menuIcon", O(F({ isOpen: a, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: f(() => [
+            y(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: f(() => [
+            y(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: f(() => [
+            y(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: f(() => [
+            y(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: f(() => [
+            y(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: f(() => [
+            y(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: f(() => [
+            y(t.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionSort ? {
+          name: "optionSort",
+          fn: f(() => [
+            y(t.$slots, "optionSort", {}, void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: f(({ toggleFullscreen: a, isFullscreen: o }) => [
+            y(t.$slots, "optionFullscreen", O(F({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: f(({ toggleAnnotator: a, isAnnotator: o }) => [
+            y(t.$slots, "optionAnnotator", O(F({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "10"
+        } : void 0,
+        t.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: f(({ altCopy: a }) => [
+            y(t.$slots, "optionAltCopy", O(F({ altCopy: a })), void 0, !0)
+          ]),
+          key: "11"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasSort", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : p("", !0),
+      e.value.style.chart.legend.show && e.value.style.chart.legend.position === "top" ? (n(), r("div", {
+        key: 5,
+        ref_key: "chartLegend",
+        ref: Ae
+      }, [
+        (n(), H(Dt, {
+          key: `legend_top_${ze.value}`,
+          legendSet: P.value,
+          config: mt.value,
+          onClickMarker: l[0] || (l[0] = ({ legend: a }) => Z(a.id))
+        }, Te({
+          item: f(({ legend: a, index: o }) => [
+            s("div", {
+              onClick: (g) => Z(a.id),
+              style: b(`opacity:${_.value.includes(a.id) ? 0.5 : 1}`)
+            }, k(a.name) + ": " + k(i(ge)(
+              e.value.style.chart.layout.bars.dataLabels.value.formatter,
+              a.value,
+              i(M)({
+                p: e.value.style.chart.legend.prefix,
+                v: a.value,
+                s: e.value.style.chart.legend.suffix,
+                r: e.value.style.chart.legend.roundingValue
+              }),
+              { datapoint: a, seriesIndex: o }
+            )), 13, pl)
+          ]),
+          legendToggle: f(() => [
+            P.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !i(we) ? (n(), H(Et, {
+              key: 0,
+              backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
+              color: e.value.style.chart.legend.selectAllToggle.color,
+              fontSize: e.value.style.chart.legend.fontSize,
+              checked: _.value.length > 0,
+              onToggle: Ct
+            }, null, 8, ["backgroundColor", "color", "fontSize", "checked"])) : p("", !0)
+          ]),
+          _: 2
+        }, [
+          t.$slots.pattern ? {
+            name: "legend-pattern",
+            fn: f(({ legend: a, index: o }) => [
+              ie(Bt, {
+                shape: a.shape,
+                radius: 30,
+                stroke: "none",
+                plot: { x: 30, y: 30 },
+                fill: `url(#pattern_${S.value}_${o})`
+              }, null, 8, ["shape", "fill"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["legendSet", "config"]))
+      ], 512)) : p("", !0),
+      s("div", fl, [
+        (n(), r("svg", {
+          ref_key: "svgRef",
+          ref: oe,
+          xmlns: i(Ra),
+          class: te({
+            "vue-data-ui-fullscreen--on": Q.value,
+            "vue-data-ui-fulscreen--off": !Q.value
+          }),
+          viewBox: `0 0 ${E.value} ${K.value}`,
+          style: b(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`),
+          tabindex: "0",
+          "aria-describedby": `chart-instructions-${S.value}`,
+          onFocus: La,
+          onBlur: Sa,
+          onKeydown: Aa
+        }, [
+          s("g", {
+            ref_key: "G",
+            ref: Qt,
+            class: "vue-data-ui-g"
+          }, [
+            ie(i(Kt)),
+            t.$slots["chart-background"] ? (n(), r("foreignObject", {
+              key: 0,
+              x: 0,
+              y: 0,
+              width: E.value,
+              height: K.value,
+              style: {
+                pointerEvents: "none"
+              }
+            }, [
+              y(t.$slots, "chart-background", {}, void 0, !0)
+            ], 8, gl)) : p("", !0),
+            (n(!0), r(B, null, D(w.value, (a, o) => (n(), r("linearGradient", {
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "0%",
+              id: `vertical_bar_gradient_${S.value}_${o}`
+            }, [
+              s("stop", {
+                offset: "0%",
+                "stop-color": a.color
+              }, null, 8, ml),
+              s("stop", {
+                offset: "100%",
+                "stop-color": i(Qe)(
+                  i(Xa)(a.color, 0.03),
+                  100 - e.value.style.chart.layout.bars.gradientIntensity
+                )
+              }, null, 8, kl)
+            ], 8, bl))), 256)),
+            t.$slots.pattern ? (n(), r("g", Cl, [
+              (n(!0), r(B, null, D(w.value, (a) => (n(), r("defs", null, [
+                y(t.$slots, "pattern", Ot({ ref_for: !0 }, {
+                  seriesIndex: a.absoluteIndex,
+                  patternId: `pattern_${S.value}_${a.absoluteIndex}`
+                }), void 0, !0)
+              ]))), 256))
+            ])) : p("", !0),
+            e.value.style.chart.layout.bars.rowColor ? (n(!0), r(B, { key: 2 }, D(w.value, (a, o) => (n(), r("g", null, [
+              s("rect", {
+                x: 0,
+                y: c.value.top + (x.value + d.value) * o + A.value[o] * L.value,
+                width: E.value,
+                height: d.value <= 0 ? 1e-4 : d.value,
+                fill: e.value.style.chart.layout.bars.rowColor,
+                rx: e.value.style.chart.layout.bars.rowRadius,
+                style: { pointerEvents: "none" }
+              }, null, 8, xl)
+            ]))), 256)) : p("", !0),
+            (n(!0), r(B, null, D(w.value, (a, o) => (n(), r("g", null, [
+              s("rect", {
+                x: i(N)(
+                  J.value ? c.value.left + c.value.width / 2 - (a.sign === 1 ? 0 : I(a.value) <= 0 ? 1e-4 : I(a.value)) : c.value.left
+                ),
+                y: c.value.top + (x.value + d.value) * o + A.value[o] * L.value,
+                width: i(N)(
+                  I(a.value) <= 0 ? 1e-4 : I(a.value)
+                ),
+                height: d.value <= 0 ? 1e-4 : d.value,
+                fill: e.value.style.chart.layout.bars.underlayerColor,
+                rx: e.value.style.chart.layout.bars.borderRadius,
+                class: te({ animated: e.value.useCssAnimation })
+              }, null, 10, wl)
+            ]))), 256)),
+            (n(!0), r(B, null, D(w.value, (a, o) => (n(), r("g", null, [
+              s("rect", {
+                x: i(N)(
+                  J.value ? c.value.left + c.value.width / 2 - (a.sign === 1 ? 0 : I(a.value) <= 0 ? 1e-4 : I(a.value)) : c.value.left
+                ),
+                y: c.value.top + (x.value + d.value) * o + A.value[o] * L.value,
+                width: i(N)(
+                  I(a.value) <= 0 ? 1e-4 : I(a.value)
+                ),
+                height: d.value <= 0 ? 1e-4 : d.value,
+                fill: e.value.style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${S.value}_${o})` : i(Qe)(
+                  a.color,
+                  e.value.style.chart.layout.bars.fillOpacity
+                ),
+                rx: e.value.style.chart.layout.bars.borderRadius,
+                stroke: e.value.style.chart.layout.bars.useStroke ? a.color : "none",
+                "stroke-width": e.value.style.chart.layout.bars.useStroke ? e.value.style.chart.layout.bars.strokeWidth : 0,
+                class: te({ animated: e.value.useCssAnimation })
+              }, null, 10, _l),
+              t.$slots.pattern ? (n(), r("rect", {
+                key: 0,
+                x: i(N)(
+                  J.value ? c.value.left + c.value.width / 2 - (a.sign === 1 ? 0 : I(a.value) <= 0 ? 1e-4 : I(a.value)) : c.value.left
+                ),
+                y: c.value.top + (x.value + d.value) * o + A.value[o] * L.value,
+                width: i(N)(
+                  I(a.value) <= 0 ? 1e-4 : I(a.value)
+                ),
+                height: d.value <= 0 ? 1e-4 : d.value,
+                fill: `url(#pattern_${S.value}_${a.absoluteIndex})`,
+                rx: e.value.style.chart.layout.bars.borderRadius,
+                stroke: e.value.style.chart.layout.bars.useStroke ? a.color : "none",
+                "stroke-width": e.value.style.chart.layout.bars.useStroke ? e.value.style.chart.layout.bars.strokeWidth : 0,
+                class: te({ animated: e.value.useCssAnimation })
+              }, null, 10, $l)) : p("", !0),
+              (!a.isChild || a.isLastChild) && e.value.style.chart.layout.separators.show && o !== w.value.length - 1 ? (n(), r("line", {
+                key: 1,
+                x1: E.value,
+                x2: e.value.style.chart.layout.separators.fullWidth ? 0 : c.value.left,
+                y1: d.value + x.value / 2 + c.value.top + (x.value + d.value) * o + A.value[o] * L.value,
+                y2: d.value + x.value / 2 + c.value.top + (x.value + d.value) * o + A.value[o] * L.value,
+                stroke: e.value.style.chart.layout.separators.color,
+                "stroke-width": e.value.style.chart.layout.separators.strokeWidth,
+                "stroke-linecap": "round",
+                style: {
+                  transition: "none !important",
+                  animation: "none !important"
+                }
+              }, null, 8, Tl)) : p("", !0),
+              J.value && e.value.style.chart.layout.separators.show ? (n(), r("line", {
+                key: 2,
+                x1: c.value.left + c.value.width / 2,
+                x2: c.value.left + c.value.width / 2,
+                y1: c.value.top,
+                y2: c.value.bottom,
+                stroke: e.value.style.chart.layout.separators.color,
+                "stroke-width": e.value.style.chart.layout.separators.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, Ll)) : p("", !0)
+            ]))), 256)),
+            s("g", {
+              ref_key: "parentLabels",
+              ref: ea
+            }, [
+              (n(!0), r(B, null, D(w.value, (a, o) => (n(), r("g", Sl, [
+                a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (n(), r("rect", {
+                  key: 0,
+                  class: "vue-ui-horizontal-bar-parent-marker",
+                  x: 2,
+                  y: ne(a, o).y - e.value.style.chart.layout.bars.parentLabels.fontSize / 1.5,
+                  height: e.value.style.chart.layout.bars.parentLabels.fontSize / 1.5,
+                  width: e.value.style.chart.layout.bars.parentLabels.fontSize / 1.5,
+                  rx: 1,
+                  fill: a.color,
+                  style: { animation: "none !important", transition: "none !important" }
+                }, null, 8, Pl)) : p("", !0),
+                a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (n(), r("text", {
+                  key: 1,
+                  y: ne(a, o).y,
+                  "font-size": e.value.style.chart.layout.bars.parentLabels.fontSize,
+                  fill: e.value.style.chart.layout.bars.parentLabels.color,
+                  x: e.value.style.chart.layout.bars.parentLabels.offsetX + e.value.style.chart.layout.bars.parentLabels.fontSize,
+                  "font-weight": e.value.style.chart.layout.bars.parentLabels.bold ? "bold" : "normal",
+                  "text-anchor": "start",
+                  innerHTML: i(et)({
+                    content: `${_t(a, o)}`,
+                    fontSize: e.value.style.chart.layout.bars.parentLabels.fontSize,
+                    fill: e.value.style.chart.layout.bars.parentLabels.color,
+                    x: e.value.style.chart.layout.bars.parentLabels.offsetX + e.value.style.chart.layout.bars.parentLabels.fontSize,
+                    y: ne(a, o).y,
+                    translateY: !1
+                  })
+                }, null, 8, Al)) : p("", !0),
+                a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (n(), r("text", {
+                  key: 2,
+                  y: ne(a, o).y + i(Ha)(_t(a, o)) * e.value.style.chart.layout.bars.parentLabels.fontSize * 1.1,
+                  "font-size": e.value.style.chart.layout.bars.parentLabels.fontSize,
+                  fill: e.value.style.chart.layout.bars.parentLabels.color,
+                  x: e.value.style.chart.layout.bars.parentLabels.offsetX + e.value.style.chart.layout.bars.parentLabels.fontSize,
+                  "font-weight": e.value.style.chart.layout.bars.dataLabels.bold ? "bold" : "normal",
+                  "text-anchor": "start"
+                }, k(pa(a, o)), 9, zl)) : p("", !0)
+              ]))), 256))
+            ], 512),
+            s("g", {
+              ref_key: "childLabels",
+              ref: Ie
+            }, [
+              (n(!0), r(B, null, D(ra.value, (a, o) => (n(), r("g", Nl, [
+                (a.isChild || !a.hasChildren) && e.value.style.chart.layout.bars.nameLabels.show ? (n(), r("text", {
+                  key: 0,
+                  "text-anchor": "start",
+                  x: Math.abs(e.value.style.chart.layout.bars.nameLabels.offsetX),
+                  y: i(N)(c.value.top + (x.value + d.value) * o + d.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 2 + A.value[o] * L.value),
+                  "font-size": e.value.style.chart.layout.bars.nameLabels.fontSize,
+                  fill: "transparent",
+                  "font-weight": e.value.style.chart.layout.bars.nameLabels.bold ? "bold" : "normal",
+                  style: { "user-select": "none" },
+                  innerHTML: i(et)({
+                    content: a.name,
+                    fontSize: e.value.style.chart.layout.bars.nameLabels.fontSize,
+                    fill: "transparent",
+                    x: Math.abs(e.value.style.chart.layout.bars.nameLabels.offsetX),
+                    y: i(N)(c.value.top + (x.value + d.value) * o + d.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 2 + A.value[o] * L.value),
+                    translateY: !0
+                  })
+                }, null, 8, Il)) : p("", !0)
+              ]))), 256))
+            ], 512),
+            s("g", null, [
+              (n(!0), r(B, null, D(w.value, (a, o) => (n(), r("g", Vl, [
+                (a.isChild || !a.hasChildren) && e.value.style.chart.layout.bars.nameLabels.show ? (n(), r("text", {
+                  key: 0,
+                  "text-anchor": "end",
+                  x: c.value.left + e.value.style.chart.layout.bars.nameLabels.offsetX - 6,
+                  y: c.value.top + (x.value + d.value) * o + d.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 3 + A.value[o] * L.value,
+                  "font-size": e.value.style.chart.layout.bars.nameLabels.fontSize,
+                  fill: e.value.style.chart.layout.bars.nameLabels.color,
+                  "font-weight": e.value.style.chart.layout.bars.nameLabels.bold ? "bold" : "normal",
+                  innerHTML: i(et)({
+                    content: a.name,
+                    fontSize: e.value.style.chart.layout.bars.nameLabels.fontSize,
+                    fill: e.value.style.chart.layout.bars.nameLabels.color,
+                    x: c.value.left + e.value.style.chart.layout.bars.nameLabels.offsetX - 6,
+                    y: c.value.top + (x.value + d.value) * o + d.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 3 + A.value[o] * L.value,
+                    translateY: !0
+                  })
+                }, null, 8, Ol)) : p("", !0)
+              ]))), 256))
+            ]),
+            s("g", {
+              ref_key: "dataLabels",
+              ref: Ve
+            }, [
+              (n(!0), r(B, null, D(w.value, (a, o) => (n(), r("g", Fl, [
+                s("text", {
+                  x: J.value ? c.value.left + c.value.width / 2 + (a.sign === 1 ? -12 : 12) + (a.sign === 1 ? -e.value.style.chart.layout.bars.dataLabels.offsetX : e.value.style.chart.layout.bars.dataLabels.offsetX) : Math.min(
+                    da(a.value) + 3 + e.value.style.chart.layout.bars.dataLabels.offsetX,
+                    c.value.right - 2
+                  ),
+                  y: c.value.top + (x.value + d.value) * o + d.value / 2 + A.value[o] * L.value + e.value.style.chart.layout.bars.dataLabels.fontSize / 3,
+                  "text-anchor": !J.value || a.sign === -1 ? "start" : "end",
+                  "font-size": e.value.style.chart.layout.bars.dataLabels.fontSize,
+                  fill: e.value.style.chart.layout.bars.dataLabels.color,
+                  "font-weight": e.value.style.chart.layout.bars.dataLabels.bold ? "bold" : "normal"
+                }, k(St(a.value, a, o, a.sign)), 9, Ml)
+              ]))), 256))
+            ], 512),
+            (n(!0), r(B, null, D(w.value, (a, o) => (n(), r("g", null, [
+              s("rect", {
+                x: 0,
+                y: c.value.top + (x.value + d.value) * o - x.value / 2 + A.value[o] * L.value,
+                width: E.value,
+                height: d.value + x.value <= 0 ? 1e-4 : d.value + x.value,
+                fill: Xe.value === a.id ? i(Qe)(
+                  e.value.style.chart.layout.highlighter.color,
+                  e.value.style.chart.layout.highlighter.opacity
+                ) : "transparent",
+                onMouseenter: (g) => Lt(a, o, "pointer"),
+                onMouseleave: (g) => Tt({ datapoint: a, seriesIndex: o }),
+                onClick: (g) => $t({ datapoint: a, seriesIndex: o })
+              }, null, 40, Bl)
+            ]))), 256)),
+            y(t.$slots, "svg", {
+              svg: {
+                ...W.value,
+                isPrintingImg: i(De) | i(Ee) | Ce.value,
+                isPrintingSvg: xe.value
+              }
+            }, void 0, !0)
+          ], 512)
+        ], 46, yl)),
+        t.$slots.hint ? (n(), r("div", Dl, [
+          y(t.$slots, "hint", O(F({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: Ke.value })), void 0, !0)
+        ])) : p("", !0)
+      ]),
+      t.$slots.watermark ? (n(), r("div", El, [
+        y(t.$slots, "watermark", O(F({ isPrinting: i(De) || i(Ee) || Ce.value || xe.value })), void 0, !0)
+      ])) : p("", !0),
+      e.value.style.chart.legend.show && e.value.style.chart.legend.position === "bottom" ? (n(), r("div", {
+        key: 7,
+        ref_key: "chartLegend",
+        ref: Ae
+      }, [
+        (n(), H(Dt, {
+          key: `legend_bottom_${ze.value}`,
+          legendSet: P.value,
+          config: mt.value,
+          isCursorPointer: Y.value,
+          onClickMarker: l[1] || (l[1] = ({ legend: a }) => Z(a.id))
+        }, Te({
+          item: f(({ legend: a, index: o }) => [
+            s("div", {
+              onClick: (g) => Z(a.id),
+              style: b(`opacity:${_.value.includes(a.id) ? 0.5 : 1}`)
+            }, k(a.name) + ": " + k(i(ge)(
+              e.value.style.chart.layout.bars.dataLabels.value.formatter,
+              a.value,
+              i(M)({
+                p: e.value.style.chart.legend.prefix,
+                v: a.value,
+                s: e.value.style.chart.legend.suffix,
+                r: e.value.style.chart.legend.roundingValue
+              }),
+              { datapoint: a, seriesIndex: o }
+            )), 13, Rl)
+          ]),
+          legendToggle: f(() => [
+            P.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !i(we) ? (n(), H(Et, {
+              key: 0,
+              backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
+              color: e.value.style.chart.legend.selectAllToggle.color,
+              fontSize: e.value.style.chart.legend.fontSize,
+              checked: _.value.length > 0,
+              isCursorPointer: Y.value,
+              onToggle: Ct
+            }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : p("", !0)
+          ]),
+          _: 2
+        }, [
+          t.$slots.pattern ? {
+            name: "legend-pattern",
+            fn: f(({ legend: a, index: o }) => [
+              ie(Bt, {
+                shape: a.shape,
+                radius: 30,
+                stroke: "none",
+                plot: { x: 30, y: 30 },
+                fill: `url(#pattern_${S.value}_${o})`
+              }, null, 8, ["shape", "fill"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["legendSet", "config", "isCursorPointer"]))
+      ], 512)) : p("", !0),
+      y(t.$slots, "legend", { legend: P.value }, void 0, !0),
+      t.$slots.source ? (n(), r("div", {
+        key: 8,
+        ref_key: "source",
+        ref: nt,
+        dir: "auto"
+      }, [
+        y(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : p("", !0),
+      ie(i(Ut), {
+        teleportTo: e.value.style.chart.tooltip.teleportTo,
+        show: T.value.showTooltip && be.value && _.value.length < C.dataset.length,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: R.value,
+        content: Pe.value,
+        isFullscreen: Q.value,
+        isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter,
+        smoothForce: e.value.style.chart.tooltip.smoothForce,
+        smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold,
+        isA11yMode: Oe.value === "keyboard",
+        a11yPosition: rt.value
+      }, {
+        "tooltip-before": f(() => [
+          y(t.$slots, "tooltip-before", O(F({ ...He.value })), void 0, !0)
+        ]),
+        "tooltip-after": f(() => [
+          y(t.$slots, "tooltip-after", O(F({ ...He.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
+      Se.value && e.value.userOptions.buttons.table ? (n(), H(Fa($e.value.component), Ot({ key: 9 }, $e.value.props, {
+        ref_key: "tableUnit",
+        ref: ve,
+        onClose: Ge
+      }), Te({
+        content: f(() => [
+          s("div", {
+            ref_key: "tableContainer",
+            ref: yt,
+            class: "vue-ui-vertical-bar-table atom-data-table",
+            style: b(`${e.value.table.useDialog ? "" : "max-height: 300px; margin-top: 24px"}`)
+          }, [
+            s("div", Xl, [
+              e.value.table.useDialog ? p("", !0) : (n(), r("div", {
+                key: 0,
+                role: "button",
+                tabindex: "0",
+                style: b(`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:${Y.value ? "pointer" : "default"}; background:${e.value.table.th.backgroundColor};`),
+                onClick: Ge,
+                onKeypress: Ma(Ge, ["enter"])
+              }, [
+                ie(i(at), {
+                  name: "close",
+                  stroke: e.value.table.th.color,
+                  "stroke-width": 2
+                }, null, 8, ["stroke"])
+              ], 36)),
+              s("div", {
+                style: { width: "100%", "container-type": "inline-size" },
+                class: te({ "vue-ui-responsive": i(ga) })
+              }, [
+                s("table", Hl, [
+                  e.value.table.useDialog ? p("", !0) : (n(), r("caption", {
+                    key: 0,
+                    style: b({
+                      backgroundColor: e.value.table.th.backgroundColor,
+                      color: e.value.table.th.color,
+                      outline: e.value.table.th.outline
+                    }),
+                    class: "vue-ui-data-table__caption"
+                  }, [
+                    Ft(k(e.value.style.chart.title.text) + " ", 1),
+                    e.value.style.chart.title.subtitle.text ? (n(), r("span", Ul, k(e.value.style.chart.title.subtitle.text), 1)) : p("", !0)
+                  ], 4)),
+                  s("thead", null, [
+                    s("tr", {
+                      role: "row",
+                      style: b(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color}`)
+                    }, [
+                      (n(!0), r(B, null, D(V.value.head, (a) => (n(), r("th", {
+                        style: b(`outline:${e.value.table.th.outline}`)
+                      }, [
+                        s("div", Wl, k(a), 1)
+                      ], 4))), 256))
+                    ], 4),
+                    s("tr", null, [
+                      s("th", {
+                        style: b(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      s("th", {
+                        style: b(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`)
+                      }, " ∑ " + k(e.value.table.td.prefix) + k(isNaN(X.value) ? "" : X.value.toFixed(e.value.table.td.roundingValue)) + k(e.value.table.td.suffix), 5),
+                      s("th", {
+                        style: b(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`)
+                      }, " 100% ", 4),
+                      s("th", {
+                        style: b(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      s("th", {
+                        style: b(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      s("th", {
+                        style: b(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      s("th", {
+                        style: b(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4)
+                    ])
+                  ]),
+                  s("tbody", null, [
+                    (n(!0), r(B, null, D(V.value.body, (a, o) => (n(), r("tr", {
+                      class: te({
+                        "vue-ui-data-table__tbody__row": !0,
+                        "vue-ui-data-table__tbody__row-even": o % 2 === 0,
+                        "vue-ui-data-table__tbody__row-odd": o % 2 !== 0
+                      }),
+                      style: b(`background:${e.value.table.td.backgroundColor};color:${e.value.table.td.color}`)
+                    }, [
+                      s("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: b(`outline:${e.value.table.td.outline};font-variant-numeric: tabular-nums;`),
+                        "data-cell": V.value.head[0] ?? ""
+                      }, [
+                        s("div", Kl, [
+                          a.color ? (n(), r("span", {
+                            key: 0,
+                            style: b(`color:${a.color};margin-right:3px`)
+                          }, "⬤", 4)) : p("", !0),
+                          s("span", null, k(a.parentName), 1)
+                        ])
+                      ], 12, Gl),
+                      s("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: b(`outline:${e.value.table.td.outline}`),
+                        "data-cell": V.value.head[1] ?? ""
+                      }, [
+                        s("div", Yl, k(e.value.table.td.prefix) + k(["", NaN, void 0].includes(a.parentValue) ? "" : a.parentValue.toFixed(
+                          e.value.table.td.roundingValue
+                        )) + k(e.value.table.td.suffix), 1)
+                      ], 12, jl),
+                      s("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: b(`outline:${e.value.table.td.outline}`),
+                        "data-cell": V.value.head[2] ?? ""
+                      }, [
+                        s("div", Zl, k(["", NaN, void 0].includes(a.percentageToTotal) ? "" : `${(a.percentageToTotal * 100).toFixed(
+                          e.value.table.td.roundingPercentage
+                        )}%`), 1)
+                      ], 12, ql),
+                      s("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: b(`outline:${e.value.table.td.outline}`),
+                        "data-cell": V.value.head[3] ?? ""
+                      }, [
+                        s("div", Ql, k(a.childName), 1)
+                      ], 12, Jl),
+                      s("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: b(`outline:${e.value.table.td.outline}`),
+                        "data-cell": V.value.head[4] ?? ""
+                      }, [
+                        s("div", to, k(e.value.table.td.prefix) + k(["", NaN, void 0].includes(a.childValue) ? "" : a.childValue.toFixed(
+                          e.value.table.td.roundingValue
+                        )) + k(e.value.table.td.suffix), 1)
+                      ], 12, eo),
+                      s("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: b(`outline:${e.value.table.td.outline}`),
+                        "data-cell": V.value.head[5] ?? ""
+                      }, [
+                        s("div", lo, k(["", NaN, void 0].includes(
+                          a.childPercentageToParent
+                        ) ? "" : `${(a.childPercentageToParent * 100).toFixed(
+                          e.value.table.td.roundingPercentage
+                        )}%`), 1)
+                      ], 12, ao),
+                      s("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: b(`outline:${e.value.table.td.outline}`),
+                        "data-cell": V.value.head[6] ?? ""
+                      }, [
+                        s("div", no, k(["", NaN, void 0].includes(
+                          a.childPercentageToTotal
+                        ) ? "" : `${(a.childPercentageToTotal * 100).toFixed(
+                          e.value.table.td.roundingPercentage
+                        )}%`), 1)
+                      ], 12, oo)
+                    ], 6))), 256))
+                  ])
+                ])
+              ], 2)
+            ])
+          ], 4)
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: f(() => [
+            Ft(k($e.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: f(() => [
+            s("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[2] || (l[2] = (a) => Ue(e.value.userOptions.callbacks.csv)),
+              style: b({ cursor: Y.value ? "pointer" : "default" })
+            }, [
+              ie(i(at), {
+                name: "fileCsv",
+                stroke: $e.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : p("", !0),
+      y(t.$slots, "skeleton", {}, () => [
+        i(we) ? (n(), H(Qa, { key: 0 })) : p("", !0)
+      ], !0)
+    ], 46, dl));
+  }
+}, Po = /* @__PURE__ */ cl(uo, [["__scopeId", "data-v-927cf203"]]);
+export {
+  Po as default
+};