vue-data-ui 3.0.0-next.3 → 3.0.0-next.4

package/dist/vue-ui-vertical-bar-B5b5tXjT.js

@@ -0,0 +1,1029 @@
+import { useCssVars as Pt, defineAsyncComponent as j, useSlots as Vt, computed as k, ref as i, watch as Ke, shallowRef as Je, onMounted as Qe, nextTick as ie, onBeforeUnmount as zt, createElementBlock as d, openBlock as u, unref as r, normalizeStyle as h, normalizeClass as E, createBlock as R, createCommentVNode as g, renderSlot as x, createVNode as ee, createSlots as me, withCtx as w, normalizeProps as q, guardReactiveProps as Y, createElementVNode as n, toDisplayString as p, Fragment as K, renderList as J, mergeProps as At, withKeys as It, createTextVNode as Ot } from "vue";
+import { u as Mt, c as Bt, t as Ft, p as D, a as Et, C as ke, b as Rt, v as L, o as Ze, e as te, d as xe, i as de, f as U, X as Dt, s as _e, w as Ut, q as Xt, r as Gt, x as Ht, y as Wt } from "./index-BnnNoGGd.js";
+import { t as jt, u as qt } from "./useResponsive-DfdjqQps.js";
+import { u as et } from "./useNestedProp-B6Dz15k2.js";
+import { u as Yt } from "./usePrinter-Dd-RkmL8.js";
+import { u as Kt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Jt } from "./useChartAccessibility-9icAAmYg.js";
+import Qt from "./vue-ui-accordion-qNR0BQCP.js";
+import tt from "./Legend-Bow74t3d.js";
+import Zt from "./Title-FiH2Kirc.js";
+import { _ as at } from "./Shape-BsptIVCm.js";
+import ea from "./img-CP2uNkKq.js";
+import { _ as ta } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const aa = ["id"], la = ["onClick"], oa = ["xmlns", "viewBox"], na = ["width", "height"], ua = ["id"], sa = ["stop-color"], ra = ["stop-color"], ia = { key: 1 }, da = ["x", "y", "width", "height", "fill", "rx"], va = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], ca = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], ha = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], pa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ya = { class: "vue-ui-horizontal-bar-child-label" }, fa = ["x", "y", "text-anchor", "font-size", "fill", "font-weight"], ga = ["x", "y", "font-size", "fill", "font-weight"], ba = { class: "vue-ui-horizontal-bar-parent-label" }, ma = ["x", "y", "font-size", "fill", "font-weight"], ka = ["x", "y", "font-size", "fill", "font-weight"], xa = ["x", "y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], _a = {
+  key: 6,
+  class: "vue-data-ui-watermark"
+}, wa = ["onClick"], $a = { style: "width:100%;padding-top: 36px;position:relative" }, Ca = { class: "vue-ui-data-table" }, Ta = { key: 0 }, Sa = { style: { width: "100%" } }, La = ["data-cell"], Na = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Pa = ["data-cell"], Va = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, za = ["data-cell"], Aa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ia = ["data-cell"], Oa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ma = ["data-cell"], Ba = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Fa = ["data-cell"], Ea = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ra = ["data-cell"], Da = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ua = {
+  __name: "vue-ui-vertical-bar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend"],
+  setup(lt, { expose: ot, emit: nt }) {
+    Pt((a) => ({
+      "1bf7edfb": a.tdo
+    }));
+    const ut = j(() => import("./BaseIcon-C_m_NEgt.js")), st = j(() => import("./PackageVersion-3ZfzB951.js")), rt = j(() => import("./PenAndPaper-BZddJqUG.js")), it = j(() => import("./vue-ui-skeleton-gHkpLBcj.js")), dt = j(() => import("./Tooltip-BLtR7DBZ.js")), vt = j(() => import("./UserOptions-DOwmMJId.js")), { vue_ui_vertical_bar: ct } = Mt(), ht = Vt(), b = lt, ae = k(() => !!b.dataset && b.dataset.length), S = i(Bt()), pt = i(null), ve = i(!1), ce = i(""), le = i(0), yt = i(null), we = i(0), z = i(null), $e = i(null), he = i(null), Ce = i(null), Te = i(null), Se = i(0), pe = i(0), oe = i(null), ft = nt, e = k({
+      get: () => Ve(),
+      set: (a) => a
+    }), { userOptionsVisible: ye, setUserOptionsVisibility: Le, keepUserOptionState: Ne } = Kt({ config: e.value }), { svgRef: Pe } = Jt({ config: e.value.style.chart.title });
+    function Ve() {
+      const a = et({
+        userConfig: b.config,
+        defaultConfig: ct
+      });
+      let l = {};
+      return a.theme ? l = {
+        ...et({
+          userConfig: Et.vue_ui_vertical_bar[a.theme] || b.config,
+          defaultConfig: a
+        }),
+        customPalette: Ft[a.theme] || D
+      } : l = a, b.config && ke(b.config, "events.datapointEnter") ? l.events.datapointEnter = b.config.events.datapointEnter : l.events.datapointEnter = null, b.config && ke(b.config, "events.datapointLeave") ? l.events.datapointLeave = b.config.events.datapointLeave : l.events.datapointLeave = null, b.config && ke(b.config, "events.datapointClick") ? l.events.datapointClick = b.config.events.datapointClick : l.events.datapointClick = null, l;
+    }
+    Ke(() => b.config, (a) => {
+      e.value = Ve(), ye.value = !e.value.userOptions.showOnChartHover, Ee(), Se.value += 1, pe.value += 1, c.value = e.value.style.chart.layout.bars.height, m.value = e.value.style.chart.layout.bars.gap, $.value.showTable = e.value.table.show, $.value.sortDesc = e.value.style.chart.layout.bars.sort === "desc", $.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 }), Ke(() => b.dataset, ue, { deep: !0 });
+    const { isPrinting: ze, isImaging: Ae, generatePdf: Ie, generateImage: Oe } = Yt({
+      elementId: `vue-ui-vertical-bar_${S.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-vertical-bar",
+      options: e.value.userOptions.print
+    }), gt = k(() => e.value.userOptions.show && !e.value.style.chart.title.text), Me = k(() => Rt(e.value.customPalette)), Be = i(null), Fe = i(!1), bt = k(() => e.value.table.responsiveBreakpoint), A = Je(null), X = Je(null), ne = i("0 0 10 10"), G = k(() => {
+      const [a, l, t, o] = ne.value.split(" ").map(Number);
+      return { x: a, y: l, width: t, height: o };
+    });
+    Qe(async () => {
+      await ie(), Ee(), H();
+    });
+    async function H() {
+      if (ne.value = `0 0 ${C.value.width} ${s.value.fullHeight}`, !e.value.autoSize) return;
+      const a = oe.value.querySelectorAll(".vue-ui-horizontal-bar-parent-label"), l = oe.value.querySelectorAll(".vue-ui-horizontal-bar-child-label");
+      if (a.length) {
+        const o = Math.max(...Array.from(a).flatMap((f) => {
+          const v = f.querySelectorAll("text");
+          return v.length ? Array.from(v).map((_) => _.getBBox().width) : 0;
+        })), y = Math.max(...Array.from(l).flatMap((f) => {
+          const v = f.querySelectorAll("text");
+          return v.length ? Array.from(v).map((_) => _.getBBox().width) : 0;
+        }));
+        Array.from(a).forEach((f) => {
+          const v = f.querySelectorAll("text");
+          Array.from(v).forEach(async (_) => {
+            _.setAttribute("x", 0), _.setAttribute("x", L(-o - y / 4));
+          });
+        });
+      }
+      await ie();
+      const t = oe.value.getBBox();
+      ne.value = [
+        t.x,
+        0,
+        t.width + 12,
+        s.value.fullHeight
+      ].join(" ");
+    }
+    function Ee() {
+      if (Ze(b.dataset) && te({
+        componentName: "VueUiVerticalBar",
+        type: "dataset"
+      }), le.value = b.dataset.flatMap((a) => a.children && a.children.length > 0 ? a.children.length : 1).reduce((a, l) => a + l, 0), mt(), e.value.responsive) {
+        const a = jt(() => {
+          const { width: l, height: t } = qt({
+            chart: z.value,
+            title: e.value.style.chart.title.text ? $e.value : null,
+            legend: e.value.style.chart.legend.show ? he.value : null,
+            source: Ce.value,
+            noTitle: Te.value
+          });
+          requestAnimationFrame(async () => {
+            Ue.value = l, c.value = t / le.value - m.value * 2, await ie(), H();
+          });
+        });
+        A.value && (X.value && A.value.unobserve(X.value), A.value.disconnect()), A.value = new ResizeObserver(a), X.value = z.value.parentNode, A.value.observe(X.value), e.value.autoSize && H();
+      }
+    }
+    zt(() => {
+      A.value && (X.value && A.value.unobserve(X.value), A.value.disconnect());
+    });
+    function mt() {
+      new ResizeObserver((l) => {
+        l.forEach((t) => {
+          Fe.value = t.contentRect.width < bt.value;
+        });
+      }).observe(Be.value);
+    }
+    const $ = i({
+      showTable: e.value.table.show,
+      sortDesc: e.value.style.chart.layout.bars.sort === "desc",
+      showTooltip: e.value.style.chart.tooltip.show
+    }), Re = k(() => $.value.sortDesc), I = k(() => (b.dataset.forEach((a, l) => {
+      !a.value && !a.children && te({
+        componentName: "VueUiVerticalBar",
+        type: "datasetAttributeEmpty",
+        property: `value (index ${l})`
+      }), a.children && (Ze(a.children) ? te({
+        componentName: "VueUiVerticalBar",
+        type: "datasetAttributeEmpty",
+        property: `children (index ${l})`
+      }) : a.children.forEach((t, o) => {
+        [null, void 0].includes(t.name) && te({
+          componentName: "VueUiVerticalBar",
+          type: "datasetSerieAttribute",
+          property: "name",
+          key: "children",
+          index: o
+        });
+      }));
+    }), b.dataset.map((a, l) => {
+      const t = `vertical_parent_${l}_${S.value}`, o = a.children && a.children.length > 0, y = L(a.value ? a.value : o ? a.children.map((v) => v.value || 0).reduce((v, _) => v + _, 0) : 0), f = y >= 0 ? 1 : -1;
+      return {
+        ...a,
+        id: t,
+        absoluteIndex: l,
+        shape: "square",
+        opacity: N.value.includes(t) ? 0.5 : 1,
+        value: Math.abs(y),
+        sign: f,
+        hasChildren: o,
+        isChild: !1,
+        segregate: () => Q(t),
+        isSegregated: N.value.includes(t),
+        color: xe(a.color) || Me.value[l] || D[l] || D[l % D.length],
+        children: !a.children || !a.children.length ? [] : a.children.toSorted(se.value ? () => 0 : (v, _) => Re.value ? _.value - v.value : v.value - _.value).map((v, _) => ({
+          ...v,
+          value: L(Math.abs(v.value)),
+          absoluteIndex: l,
+          sign: v.value >= 0 ? 1 : -1,
+          isChild: !0,
+          parentId: t,
+          parentName: a.name,
+          parentValue: y,
+          parentSign: f,
+          id: `vertical_child_${l}_${_}_${S.value}`,
+          childIndex: _,
+          color: xe(v.color) || xe(a.color) || Me.value[l] || D[l] || D[l % D.length]
+        })).map((v, _) => ({
+          ...v,
+          isFirstChild: _ === 0,
+          isLastChild: _ === a.children.length - 1
+        }))
+      };
+    }).toSorted(se.value ? () => 0 : (a, l) => Re.value ? l.value - a.value : a.value - l.value))), De = k(() => ({
+      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" : ""
+    })), c = i(e.value.style.chart.layout.bars.height), m = i(e.value.style.chart.layout.bars.gap), kt = k(() => (c.value + m.value) * le.value), Ue = i(512), C = k(() => ({
+      width: Ue.value,
+      height: kt.value,
+      padding: {
+        top: 12,
+        left: (e.value.autoSize ? 0 : 128) + e.value.style.chart.layout.bars.offsetX,
+        right: (e.value.autoSize ? 0 : 64) + e.value.style.chart.layout.bars.paddingRight,
+        bottom: 12
+      }
+    })), s = k(() => ({
+      fullHeight: C.value.padding.top + C.value.padding.bottom + C.value.height,
+      top: C.value.padding.top,
+      left: C.value.padding.left,
+      right: C.value.width - C.value.padding.right,
+      bottom: C.value.padding.top + C.value.height,
+      width: C.value.width - (C.value.padding.left + C.value.padding.right)
+    }));
+    async function ue() {
+      le.value = M.value.flatMap((a) => a.children && a.children.length > 0 ? a.children.length : 1).reduce((a, l) => a + l, 0), e.value.autoSize && await H();
+    }
+    const N = i([]);
+    async function Q(a) {
+      if (N.value.includes(a))
+        N.value = N.value.filter((l) => l !== a);
+      else {
+        if (N.value.length === I.value.length - 1) return;
+        N.value.push(a);
+      }
+      ue(), await ie(), e.value.autoSize && H(), ft("selectLegend", M.value);
+    }
+    const M = k(() => I.value.filter((a) => !N.value.includes(a.id))), V = k(() => M.value.map((a) => Math.abs(a.value)).reduce((a, l) => a + l, 0));
+    function Xe(a, l = !1, t = 0) {
+      return l ? U({
+        v: L(Math.abs(a) / V.value * 100),
+        s: "%",
+        r: t
+      }) : Math.abs(a) / V.value;
+    }
+    const B = k(() => M.value.flatMap((a) => a.hasChildren ? a.children : a)), F = k(() => B.value.map((a) => a.sign).includes(-1)), xt = k(() => Math.max(...M.value.flatMap((a) => a.children && a.children.length ? Math.max(...a.children.map((l) => l.value)) : a.value)));
+    function T(a) {
+      const l = a / xt.value;
+      return s.value.width / (F.value ? 2 : 1) * l;
+    }
+    function _t(a) {
+      return T(a) + s.value.left;
+    }
+    function Z(a, l) {
+      const t = M.value.find((f) => f.id === a.parentId), o = s.value.top + (m.value + c.value) * l, y = t.children.length * (m.value + c.value);
+      return {
+        y: o + y / 2 - e.value.style.chart.layout.bars.parentLabels.fontSize,
+        name: t.name,
+        value: [void 0, NaN, null].includes(t.value) ? "" : t.sign === 1 ? t.value : -t.value,
+        percentageToTotal: isNaN(t.value / V.value) ? "" : Xe(t.value, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage),
+        sign: t.sign
+      };
+    }
+    function wt() {
+      return M.value;
+    }
+    const fe = i(null), ge = i(null);
+    function $t({ datapoint: a, seriesIndex: l }) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: a, seriesIndex: l });
+    }
+    function Ct({ datapoint: a, seriesIndex: l }) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: l }), yt.value = null, ve.value = !1, fe.value = null;
+    }
+    function Tt(a, l) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datpoint: a, seriesIndex: l }), ge.value = {
+        datapoint: a,
+        seriesIndex: l,
+        series: I.value,
+        config: e.value
+      }, ve.value = !0, fe.value = a.id;
+      let t = "";
+      const o = a.isChild ? a.parentName : a.name, y = a.isChild ? a.name : "", f = e.value.style.chart.tooltip.customFormat;
+      Ht(f) && Wt(() => f({
+        datapoint: a,
+        series: I.value,
+        config: e.value,
+        seriesIndex: l
+      })) ? ce.value = f({
+        datapoint: a,
+        series: I.value,
+        config: e.value,
+        seriesIndex: l
+      }) : (t += `<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="${a.color}"/>${ht.pattern ? `<rect x="0" y="0" height="60" width="60" rx="5" stroke="none" fill="url(#pattern_${S.value}_${a.absoluteIndex})"/>` : ""}</svg> ${o}</div>
+                ${y ? `<div>${y}</div>` : ""}
+            </div>`, e.value.style.chart.tooltip.showValue && (t += `<div>${e.value.translations.value}: <b>${de(
+        e.value.style.chart.layout.bars.dataLabels.value.formatter,
+        a.sign === 1 ? a.value : -a.value,
+        U({
+          p: e.value.style.chart.tooltip.prefix,
+          v: a.sign === 1 ? a.value : -a.value,
+          s: e.value.style.chart.tooltip.suffix,
+          r: e.value.style.chart.tooltip.roundingValue
+        }),
+        { datapoint: a, seriesIndex: l }
+      )}</b></div>`), e.value.style.chart.tooltip.showPercentage && (t += `<div>${e.value.translations.percentageToTotal} : <b>${U({
+        v: Math.abs(a.value) / V.value * 100,
+        s: "%",
+        r: e.value.style.chart.tooltip.roundingPercentage
+      })}</b></div>`, a.isChild && (t += `<div>${e.value.translations.percentageToSerie}: <b>${U({
+        v: Math.abs(a.value) / Math.abs(a.parentValue) * 100,
+        s: "%",
+        r: e.value.style.chart.tooltip.roundingPercentage
+      })}</b></div>`)), ce.value = `<div style="text-align:left">${t}</div>`);
+    }
+    function Ge(a, l, t, o) {
+      if (!e.value.style.chart.layout.bars.dataLabels.value.show)
+        return "";
+      const y = de(
+        e.value.style.chart.layout.bars.dataLabels.value.formatter,
+        L(o === -1 && a >= 0 ? -a : a),
+        U({
+          p: e.value.style.chart.layout.bars.dataLabels.value.prefix,
+          v: L(o === -1 && a >= 0 ? -a : a),
+          s: e.value.style.chart.layout.bars.dataLabels.value.suffix,
+          r: e.value.style.chart.layout.bars.dataLabels.value.roundingValue
+        }),
+        { datapoint: l, seriesIndex: t }
+      ), f = `(${Xe(a, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage)})`;
+      return `${y}${e.value.style.chart.layout.bars.dataLabels.percentage.show ? ` ${f}` : ""}`;
+    }
+    const P = k(() => {
+      const a = [
+        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 = B.value.map((t) => t.isChild ? t.isFirstChild ? {
+        color: t.color,
+        parentName: t.parentName,
+        parentValue: t.parentValue,
+        percentageToTotal: t.parentValue / V.value,
+        childName: t.name,
+        childValue: t.sign === 1 ? t.value : -t.value,
+        childPercentageToParent: Math.abs(t.value) / Math.abs(t.parentValue),
+        childPercentageToTotal: Math.abs(t.value) / V.value
+      } : {
+        color: "",
+        parentName: "",
+        parentValue: "",
+        percentageToTotal: "",
+        childName: t.name,
+        childValue: t.sign === 1 ? t.value : -t.value,
+        childPercentageToParent: Math.abs(t.value) / Math.abs(t.parentValue),
+        childPercentageToTotal: Math.abs(t.value) / V.value
+      } : {
+        color: t.color,
+        parentName: t.name,
+        parentValue: t.sign === 1 ? t.value : -t.value,
+        percentageToTotal: Math.abs(t.value) / V.value,
+        childName: "",
+        childValue: "",
+        childPercentageToParent: "",
+        childPercentageToTotal: ""
+      });
+      return { head: a, body: l };
+    });
+    function He(a = null) {
+      const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], t = P.value.head, o = P.value.body.map((v) => [
+        v.parentName,
+        v.parentValue,
+        v.percentageToTotal,
+        v.childName,
+        v.childValue,
+        v.childPercentageToParent,
+        v.childPercentageToTotal
+      ]), y = l.concat([t]).concat(o), f = Xt(y);
+      a ? a(f) : Gt({ csvContent: f, title: e.value.style.chart.title.text || "vue-ui-vertical-bar" });
+    }
+    const W = i(!1);
+    function We(a) {
+      W.value = a, we.value += 1;
+    }
+    function je() {
+      $.value.showTable = !$.value.showTable;
+    }
+    const St = i({
+      none: 0,
+      asc: 1,
+      desc: 2
+    }), O = i(0), se = i(!1);
+    Qe(() => {
+      ["none", "asc", "desc"].includes(e.value.style.chart.layout.bars.sort) || te({
+        componentName: "VueUiVerticalBar",
+        type: "attributeWrongValue",
+        property: "style.chart.layout.bars.sort",
+        key: e.value.style.chart.layout.bars.sort
+      }), O.value = St.value[e.value.style.chart.layout.bars.sort], $.value.sortDesc = O.value === 2, se.value = O.value === 0;
+    });
+    function Lt() {
+      O.value += 1, O.value > 2 && (O.value = 0);
+    }
+    function qe() {
+      Lt(), $.value.sortDesc = O.value === 2, se.value = O.value === 0, ue();
+    }
+    function Ye() {
+      $.value.showTooltip = !$.value.showTooltip;
+    }
+    const re = i(!1);
+    function be() {
+      re.value = !re.value;
+    }
+    async function Nt({ scale: a = 2 } = {}) {
+      if (!z.value) return;
+      const { width: l, height: t } = z.value.getBoundingClientRect(), o = l / t, { imageUri: y, base64: f } = await ea({ domElement: z.value, base64: !0, img: !0, scale: a });
+      return {
+        imageUri: y,
+        base64: f,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: t,
+        aspectRatio: o
+      };
+    }
+    return ot({
+      autoSize: H,
+      // v3
+      getData: wt,
+      getImage: Nt,
+      recalculateHeight: ue,
+      generatePdf: Ie,
+      generateCsv: He,
+      generateImage: Oe,
+      toggleTable: je,
+      toggleSort: qe,
+      toggleTooltip: Ye,
+      toggleAnnotator: be,
+      toggleFullscreen: We
+    }), (a, l) => (u(), d("div", {
+      class: E(`vue-ui-vertical-bar ${W.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref_key: "verticalBarChart",
+      ref: z,
+      id: `vue-ui-vertical-bar_${S.value}`,
+      style: h(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
+      onMouseenter: l[4] || (l[4] = () => r(Le)(!0)),
+      onMouseleave: l[5] || (l[5] = () => r(Le)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (u(), R(r(rt), {
+        key: 0,
+        svgRef: r(Pe),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: re.value,
+        onClose: be
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
+      gt.value ? (u(), d("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: Te,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : g("", !0),
+      e.value.style.chart.title.text ? (u(), d("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: $e,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (u(), R(Zt, {
+          key: `title_${Se.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)) : g("", !0),
+      e.value.userOptions.show && ae.value && (r(Ne) || r(ye)) ? (u(), R(r(vt), {
+        ref_key: "details",
+        ref: pt,
+        key: `user_options_${we.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isImaging: r(Ae),
+        isPrinting: r(ze),
+        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,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasSort: e.value.userOptions.buttons.sort,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: W.value,
+        isTooltip: $.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: z.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: re.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: We,
+        onGeneratePdf: r(Ie),
+        onGenerateCsv: He,
+        onGenerateImage: r(Oe),
+        onToggleTable: je,
+        onToggleSort: qe,
+        onToggleTooltip: Ye,
+        onToggleAnnotator: be,
+        style: h({
+          visibility: r(Ne) ? r(ye) ? "visible" : "hidden" : "visible"
+        })
+      }, me({ _: 2 }, [
+        a.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: w(({ isOpen: t, color: o }) => [
+            x(a.$slots, "menuIcon", q(Y({ isOpen: t, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        a.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: w(() => [
+            x(a.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        a.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: w(() => [
+            x(a.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        a.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: w(() => [
+            x(a.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        a.$slots.optionImg ? {
+          name: "optionImg",
+          fn: w(() => [
+            x(a.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        a.$slots.optionTable ? {
+          name: "optionTable",
+          fn: w(() => [
+            x(a.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        a.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: w(() => [
+            x(a.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        a.$slots.optionSort ? {
+          name: "optionSort",
+          fn: w(() => [
+            x(a.$slots, "optionSort", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        a.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: w(({ toggleFullscreen: t, isFullscreen: o }) => [
+            x(a.$slots, "optionFullscreen", q(Y({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        a.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: w(({ toggleAnnotator: t, isAnnotator: o }) => [
+            x(a.$slots, "optionAnnotator", q(Y({ toggleAnnotator: t, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasSort", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
+      e.value.style.chart.legend.show && e.value.style.chart.legend.position === "top" ? (u(), d("div", {
+        key: 4,
+        ref_key: "chartLegend",
+        ref: he
+      }, [
+        (u(), R(tt, {
+          key: `legend_top_${pe.value}`,
+          legendSet: I.value,
+          config: De.value,
+          onClickMarker: l[0] || (l[0] = ({ legend: t }) => Q(t.id))
+        }, me({
+          item: w(({ legend: t, index: o }) => [
+            n("div", {
+              onClick: (y) => Q(t.id),
+              style: h(`opacity:${N.value.includes(t.id) ? 0.5 : 1}`)
+            }, p(t.name) + ": " + p(r(de)(
+              e.value.style.chart.layout.bars.dataLabels.value.formatter,
+              t.value,
+              r(U)({
+                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: o }
+            )), 13, la)
+          ]),
+          _: 2
+        }, [
+          a.$slots.pattern ? {
+            name: "legend-pattern",
+            fn: w(({ legend: t, index: o }) => [
+              ee(at, {
+                shape: t.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)) : g("", !0),
+      ae.value ? (u(), d("svg", {
+        key: 5,
+        ref_key: "svgRef",
+        ref: Pe,
+        xmlns: r(Dt),
+        class: E({ "vue-data-ui-fullscreen--on": W.value, "vue-data-ui-fulscreen--off": !W.value }),
+        viewBox: ne.value,
+        style: h(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        n("g", {
+          ref_key: "G",
+          ref: oe,
+          class: "vue-data-ui-g"
+        }, [
+          ee(r(st)),
+          a.$slots["chart-background"] ? (u(), d("foreignObject", {
+            key: 0,
+            x: 0,
+            y: 0,
+            width: C.value.width <= 0 ? 10 : C.value.width,
+            height: s.value.fullHeight <= 0 ? 10 : s.value.fullHeight,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            x(a.$slots, "chart-background", {}, void 0, !0)
+          ], 8, na)) : g("", !0),
+          (u(!0), d(K, null, J(B.value, (t, o) => (u(), d("linearGradient", {
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%",
+            id: `vertical_bar_gradient_${S.value}_${o}`
+          }, [
+            n("stop", {
+              offset: "0%",
+              "stop-color": t.color
+            }, null, 8, sa),
+            n("stop", {
+              offset: "100%",
+              "stop-color": r(_e)(r(Ut)(t.color, 0.03), 100 - e.value.style.chart.layout.bars.gradientIntensity)
+            }, null, 8, ra)
+          ], 8, ua))), 256)),
+          a.$slots.pattern ? (u(), d("g", ia, [
+            (u(!0), d(K, null, J(B.value, (t) => (u(), d("defs", null, [
+              x(a.$slots, "pattern", At({ ref_for: !0 }, { seriesIndex: t.absoluteIndex, patternId: `pattern_${S.value}_${t.absoluteIndex}` }), void 0, !0)
+            ]))), 256))
+          ])) : g("", !0),
+          (u(!0), d(K, null, J(B.value, (t, o) => (u(), d("g", null, [
+            n("rect", {
+              x: r(L)(F.value ? s.value.left + s.value.width / 2 - (t.sign === 1 ? 0 : T(t.value) <= 0 ? 1e-4 : T(t.value)) : s.value.left),
+              y: s.value.top + (m.value + c.value) * o,
+              width: r(L)(T(t.value) <= 0 ? 1e-4 : T(t.value)),
+              height: c.value <= 0 ? 1e-4 : c.value,
+              fill: e.value.style.chart.layout.bars.underlayerColor,
+              rx: e.value.style.chart.layout.bars.borderRadius,
+              class: E({ animated: e.value.useCssAnimation })
+            }, null, 10, da)
+          ]))), 256)),
+          (u(!0), d(K, null, J(B.value, (t, o) => (u(), d("g", null, [
+            n("rect", {
+              x: r(L)(F.value ? s.value.left + s.value.width / 2 - (t.sign === 1 ? 0 : T(t.value) <= 0 ? 1e-4 : T(t.value)) : s.value.left),
+              y: s.value.top + (m.value + c.value) * o,
+              width: r(L)(T(t.value) <= 0 ? 1e-4 : T(t.value)),
+              height: c.value <= 0 ? 1e-4 : c.value,
+              fill: e.value.style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${S.value}_${o})` : r(_e)(t.color, e.value.style.chart.layout.bars.fillOpacity),
+              rx: e.value.style.chart.layout.bars.borderRadius,
+              stroke: e.value.style.chart.layout.bars.useStroke ? t.color : "none",
+              "stroke-width": e.value.style.chart.layout.bars.useStroke ? e.value.style.chart.layout.bars.strokeWidth : 0,
+              class: E({ animated: e.value.useCssAnimation })
+            }, null, 10, va),
+            a.$slots.pattern ? (u(), d("rect", {
+              key: 0,
+              x: r(L)(F.value ? s.value.left + s.value.width / 2 - (t.sign === 1 ? 0 : T(t.value) <= 0 ? 1e-4 : T(t.value)) : s.value.left),
+              y: s.value.top + (m.value + c.value) * o,
+              width: r(L)(T(t.value) <= 0 ? 1e-4 : T(t.value)),
+              height: c.value <= 0 ? 1e-4 : c.value,
+              fill: `url(#pattern_${S.value}_${t.absoluteIndex})`,
+              rx: e.value.style.chart.layout.bars.borderRadius,
+              stroke: e.value.style.chart.layout.bars.useStroke ? t.color : "none",
+              "stroke-width": e.value.style.chart.layout.bars.useStroke ? e.value.style.chart.layout.bars.strokeWidth : 0,
+              class: E({ animated: e.value.useCssAnimation })
+            }, null, 10, ca)) : g("", !0),
+            (!t.isChild || t.isLastChild) && e.value.style.chart.layout.separators.show && o !== B.value.length - 1 ? (u(), d("line", {
+              key: 1,
+              x1: G.value.x,
+              x2: s.value.left,
+              y1: c.value + m.value / 2 + s.value.top + (m.value + c.value) * o,
+              y2: c.value + m.value / 2 + s.value.top + (m.value + c.value) * o,
+              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, ha)) : g("", !0),
+            F.value && e.value.style.chart.layout.separators.show ? (u(), d("line", {
+              key: 2,
+              x1: s.value.left + s.value.width / 2,
+              x2: s.value.left + s.value.width / 2,
+              y1: s.value.top,
+              y2: s.value.bottom,
+              stroke: e.value.style.chart.layout.separators.color,
+              "stroke-width": e.value.style.chart.layout.separators.strokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, pa)) : g("", !0),
+            n("g", ya, [
+              n("text", {
+                x: F.value ? s.value.left + s.value.width / 2 + (t.sign === 1 ? -12 : 12) + (t.sign === 1 ? -e.value.style.chart.layout.bars.dataLabels.offsetX : e.value.style.chart.layout.bars.dataLabels.offsetX) : _t(t.value) + 3 + e.value.style.chart.layout.bars.dataLabels.offsetX,
+                y: s.value.top + (m.value + c.value) * o + c.value / 2 + e.value.style.chart.layout.bars.dataLabels.fontSize / 2,
+                "text-anchor": !F.value || t.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"
+              }, p(Ge(t.value, t, o, t.sign)), 9, fa),
+              (t.isChild || !t.hasChildren) && e.value.style.chart.layout.bars.nameLabels.show ? (u(), d("text", {
+                key: 0,
+                "text-anchor": "end",
+                x: s.value.left - 3 + e.value.style.chart.layout.bars.nameLabels.offsetX,
+                y: s.value.top + (m.value + c.value) * o + c.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 2,
+                "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"
+              }, p(t.name), 9, ga)) : g("", !0)
+            ]),
+            n("g", ba, [
+              t.isChild && t.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (u(), d("text", {
+                key: 0,
+                x: e.value.autoSize ? void 0 : G.value.x + e.value.style.chart.layout.bars.parentLabels.offsetX,
+                y: Z(t, o).y,
+                "font-size": e.value.style.chart.layout.bars.parentLabels.fontSize,
+                fill: e.value.style.chart.layout.bars.parentLabels.color,
+                "font-weight": e.value.style.chart.layout.bars.parentLabels.bold ? "bold" : "normal",
+                "text-anchor": "start"
+              }, p(Z(t, o).name), 9, ma)) : g("", !0),
+              t.isChild && t.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (u(), d("text", {
+                key: 1,
+                x: e.value.autoSize ? void 0 : G.value.x + e.value.style.chart.layout.bars.parentLabels.offsetX,
+                y: Z(t, o).y + e.value.style.chart.layout.bars.parentLabels.fontSize + 6,
+                "font-size": e.value.style.chart.layout.bars.parentLabels.fontSize,
+                fill: e.value.style.chart.layout.bars.parentLabels.color,
+                "font-weight": e.value.style.chart.layout.bars.dataLabels.bold ? "bold" : "normal",
+                "text-anchor": "start"
+              }, p(Ge(Z(t, o).value), Z(t, o), o, t.parentSign || t.sign), 9, ka)) : g("", !0)
+            ]),
+            n("rect", {
+              x: G.value.x,
+              y: s.value.top + (m.value + c.value) * o - m.value / 2,
+              width: G.value.width,
+              height: c.value + m.value <= 0 ? 1e-4 : c.value + m.value,
+              fill: fe.value === t.id ? r(_e)(e.value.style.chart.layout.highlighter.color, e.value.style.chart.layout.highlighter.opacity) : "transparent",
+              onMouseenter: (y) => Tt(t, o),
+              onMouseleave: (y) => Ct({ datapoint: t, seriesIndex: o }),
+              onClick: (y) => $t({ datapoint: t, seriesIndex: o })
+            }, null, 40, xa)
+          ]))), 256)),
+          x(a.$slots, "svg", { svg: G.value }, void 0, !0)
+        ], 512)
+      ], 14, oa)) : g("", !0),
+      a.$slots.watermark ? (u(), d("div", _a, [
+        x(a.$slots, "watermark", q(Y({ isPrinting: r(ze) || r(Ae) })), void 0, !0)
+      ])) : g("", !0),
+      ae.value ? g("", !0) : (u(), R(r(it), {
+        key: 7,
+        config: {
+          type: "verticalBar",
+          style: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            verticalBar: {
+              axis: {
+                color: "#CCCCCC"
+              },
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      e.value.style.chart.legend.show && e.value.style.chart.legend.position === "bottom" ? (u(), d("div", {
+        key: 8,
+        ref_key: "chartLegend",
+        ref: he
+      }, [
+        (u(), R(tt, {
+          key: `legend_bottom_${pe.value}`,
+          legendSet: I.value,
+          config: De.value,
+          onClickMarker: l[1] || (l[1] = ({ legend: t }) => Q(t.id))
+        }, me({
+          item: w(({ legend: t, index: o }) => [
+            n("div", {
+              onClick: (y) => Q(t.id),
+              style: h(`opacity:${N.value.includes(t.id) ? 0.5 : 1}`)
+            }, p(t.name) + ": " + p(r(de)(
+              e.value.style.chart.layout.bars.dataLabels.value.formatter,
+              t.value,
+              r(U)({
+                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: o }
+            )), 13, wa)
+          ]),
+          _: 2
+        }, [
+          a.$slots.pattern ? {
+            name: "legend-pattern",
+            fn: w(({ legend: t, index: o }) => [
+              ee(at, {
+                shape: t.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)) : g("", !0),
+      x(a.$slots, "legend", { legend: I.value }, void 0, !0),
+      a.$slots.source ? (u(), d("div", {
+        key: 9,
+        ref_key: "source",
+        ref: Ce,
+        dir: "auto"
+      }, [
+        x(a.$slots, "source", {}, void 0, !0)
+      ], 512)) : g("", !0),
+      ee(r(dt), {
+        show: $.value.showTooltip && ve.value && N.value.length < b.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: z.value,
+        content: ce.value,
+        isFullscreen: W.value,
+        isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function"
+      }, {
+        "tooltip-before": w(() => [
+          x(a.$slots, "tooltip-before", q(Y({ ...ge.value })), void 0, !0)
+        ]),
+        "tooltip-after": w(() => [
+          x(a.$slots, "tooltip-after", q(Y({ ...ge.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
+      ae.value ? (u(), R(Qt, {
+        key: 10,
+        hideDetails: "",
+        config: {
+          open: $.value.showTable,
+          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
+          }
+        }
+      }, {
+        content: w(() => [
+          n("div", {
+            ref_key: "tableContainer",
+            ref: Be,
+            class: "vue-ui-vertical-bar-table atom-data-table"
+          }, [
+            n("div", $a, [
+              n("div", {
+                role: "button",
+                tabindex: "0",
+                style: h(`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${e.value.table.th.backgroundColor};`),
+                onClick: l[2] || (l[2] = (t) => $.value.showTable = !1),
+                onKeypress: l[3] || (l[3] = It((t) => $.value.showTable = !1, ["enter"]))
+              }, [
+                ee(r(ut), {
+                  name: "close",
+                  stroke: e.value.table.th.color,
+                  "stroke-width": 2
+                }, null, 8, ["stroke"])
+              ], 36),
+              n("div", {
+                style: { width: "100%", "container-type": "inline-size" },
+                class: E({ "vue-ui-responsive": Fe.value })
+              }, [
+                n("table", Ca, [
+                  n("caption", {
+                    style: h({ backgroundColor: e.value.table.th.backgroundColor, color: e.value.table.th.color, outline: e.value.table.th.outline }),
+                    class: "vue-ui-data-table__caption"
+                  }, [
+                    Ot(p(e.value.style.chart.title.text) + " ", 1),
+                    e.value.style.chart.title.subtitle.text ? (u(), d("span", Ta, p(e.value.style.chart.title.subtitle.text), 1)) : g("", !0)
+                  ], 4),
+                  n("thead", null, [
+                    n("tr", {
+                      role: "row",
+                      style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color}`)
+                    }, [
+                      (u(!0), d(K, null, J(P.value.head, (t) => (u(), d("th", {
+                        style: h(`outline:${e.value.table.th.outline}`)
+                      }, [
+                        n("div", Sa, p(t), 1)
+                      ], 4))), 256))
+                    ], 4),
+                    n("tr", null, [
+                      n("th", {
+                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      n("th", {
+                        style: h(`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`)
+                      }, "∑ " + p(e.value.table.td.prefix) + p(isNaN(V.value) ? "" : V.value.toFixed(e.value.table.td.roundingValue)) + p(e.value.table.td.suffix), 5),
+                      n("th", {
+                        style: h(`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),
+                      n("th", {
+                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      n("th", {
+                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      n("th", {
+                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      n("th", {
+                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4)
+                    ])
+                  ]),
+                  n("tbody", null, [
+                    (u(!0), d(K, null, J(P.value.body, (t, o) => (u(), d("tr", {
+                      class: E({ "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: h(`background:${e.value.table.td.backgroundColor};color:${e.value.table.td.color}`)
+                    }, [
+                      n("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline};font-variant-numeric: tabular-nums;`),
+                        "data-cell": P.value.head[0] ?? ""
+                      }, [
+                        n("div", Na, [
+                          t.color ? (u(), d("span", {
+                            key: 0,
+                            style: h(`color:${t.color};margin-right:3px`)
+                          }, "⬤", 4)) : g("", !0),
+                          n("span", null, p(t.parentName), 1)
+                        ])
+                      ], 12, La),
+                      n("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": P.value.head[1] ?? ""
+                      }, [
+                        n("div", Va, p(e.value.table.td.prefix) + p(["", NaN, void 0].includes(t.parentValue) ? "" : t.parentValue.toFixed(e.value.table.td.roundingValue)) + p(e.value.table.td.suffix), 1)
+                      ], 12, Pa),
+                      n("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": P.value.head[2] ?? ""
+                      }, [
+                        n("div", Aa, p(["", NaN, void 0].includes(t.percentageToTotal) ? "" : `${(t.percentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, za),
+                      n("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": P.value.head[3] ?? ""
+                      }, [
+                        n("div", Oa, p(t.childName), 1)
+                      ], 12, Ia),
+                      n("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": P.value.head[4] ?? ""
+                      }, [
+                        n("div", Ba, p(e.value.table.td.prefix) + p(["", NaN, void 0].includes(t.childValue) ? "" : t.childValue.toFixed(e.value.table.td.roundingValue)) + p(e.value.table.td.suffix), 1)
+                      ], 12, Ma),
+                      n("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": P.value.head[5] ?? ""
+                      }, [
+                        n("div", Ea, p(["", NaN, void 0].includes(t.childPercentageToParent) ? "" : `${(t.childPercentageToParent * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, Fa),
+                      n("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": P.value.head[6] ?? ""
+                      }, [
+                        n("div", Da, p(["", NaN, void 0].includes(t.childPercentageToTotal) ? "" : `${(t.childPercentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, Ra)
+                    ], 6))), 256))
+                  ])
+                ])
+              ], 2)
+            ])
+          ], 512)
+        ]),
+        _: 1
+      }, 8, ["config"])) : g("", !0)
+    ], 46, aa));
+  }
+}, al = /* @__PURE__ */ ta(Ua, [["__scopeId", "data-v-5479e057"]]);
+export {
+  al as default
+};