vue-data-ui 3.7.2 → 3.7.3

package/dist/vue-ui-horizontal-bar-00ME25d_.js

@@ -0,0 +1,1429 @@
+import { useCssVars as ma, defineAsyncComponent as te, useSlots as Ca, computed as d, ref as s, toRefs as ka, watch as ae, onBeforeUnmount as _a, onMounted as Ne, createElementBlock as u, openBlock as n, unref as i, normalizeStyle as h, normalizeClass as J, createBlock as Q, createCommentVNode as y, renderSlot as g, createVNode as le, withCtx as p, normalizeProps as N, guardReactiveProps as O, createSlots as pe, createElementVNode as r, toDisplayString as v, Fragment as z, renderList as E, mergeProps as gt, resolveDynamicComponent as xa, withKeys as wa, createTextVNode as yt, nextTick as Oe } from "vue";
+import { c as $a, t as La, i as Aa, p as Z, W as ze, j as Ta, g as ue, o as Ee, M as P, l as Ie, a as se, d as W, X as Sa, s as Ve, h as Fa, u as Pa, q as Da, x as Ba, R as Na } from "./lib-C5BH09_g.js";
+import { t as Oa, u as za } from "./useResponsive-DfdjqQps.js";
+import { u as Ea, a as Me } from "./useNestedProp-BaGpMaAh.js";
+import { u as Ia, B as Va } from "./BaseScanner-BgWxam9d.js";
+import { u as Ma } from "./usePrinter-DCJzEiS8.js";
+import { u as Ra } from "./useSvgExport-DrjCWun4.js";
+import { u as Ua } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as Ga } from "./useTableResponsive-Cbx-ACcP.js";
+import { u as Wa } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Xa } from "./useChartAccessibility-9icAAmYg.js";
+import mt from "./Legend-Web3GjlR.js";
+import Ha from "./vue-ui-accordion-D5cPubW1.js";
+import ja from "./Title-C-XBwSUb.js";
+import { _ as Ct } from "./Shape-DE6X_t31.js";
+import qa from "./img-DUzJeMlr.js";
+import { _ as Ya } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const kt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { separators: { color: "#4A4A4A" }, bars: { dataLabels: { color: "#CCCCCC" }, nameLabels: { color: "#CCCCCC" }, parentLabels: { color: "#CCCCCC" } }, highlighter: { color: "#CCCCCC" } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, _t = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { bars: { borderRadius: 0, useGradient: !1, dataLabels: { color: "#424242" }, nameLabels: { color: "#424242" }, parentLabels: { color: "#424242" } }, highlighter: { color: "#FF8A65" }, separators: { show: !1 } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, xt = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { bars: { borderRadius: 0, useGradient: !1, dataLabels: { color: "#BDBDBD" }, nameLabels: { color: "#BDBDBD" }, parentLabels: { color: "#FFF8E1" } }, highlighter: { color: "#FF8A65" }, separators: { show: !1 } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, wt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { bars: { borderRadius: 0, useGradient: !1, dataLabels: { color: "#AACCAA" }, nameLabels: { color: "#99CC99" }, parentLabels: { color: "#99CC99" } }, highlighter: { color: "#66CC66" }, separators: { show: !1 } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, $t = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { bars: { borderRadius: 8, useGradient: !0, dataLabels: { color: "#A0AC94" }, nameLabels: { color: "#8A9892" }, parentLabels: { color: "#8A9892" } }, highlighter: { color: "#8F837A" }, separators: { show: !1 } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Lt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { bars: { borderRadius: 0, useGradient: !0, dataLabels: { color: "#61747E" }, nameLabels: { color: "#8A9892" }, parentLabels: { color: "#8A9892" } }, highlighter: { color: "#50606C" }, separators: { show: !0, color: "#DEE1DE" } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, At = {
+  default: {},
+  dark: kt,
+  celebration: _t,
+  celebrationNight: xt,
+  hack: wt,
+  zen: $t,
+  concrete: Lt
+}, no = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: _t,
+  celebrationNight: xt,
+  concrete: Lt,
+  dark: kt,
+  default: At,
+  hack: wt,
+  zen: $t
+}, Symbol.toStringTag, { value: "Module" })), Ka = ["id"], Ja = ["onClick"], Qa = ["xmlns", "viewBox"], Za = ["width", "height"], el = ["id"], tl = ["stop-color"], al = ["stop-color"], ll = { key: 1 }, ol = ["x", "y", "width", "height", "fill", "rx"], nl = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], rl = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], il = { class: "vue-ui-horizontal-bar-parent-label" }, cl = ["y", "height", "width", "fill"], dl = ["y", "font-size", "fill", "x", "font-weight"], vl = ["y", "font-size", "fill", "x", "font-weight"], hl = { class: "vue-ui-horizontal-bar-child-label" }, pl = ["x", "y", "font-size", "font-weight"], fl = { class: "vue-ui-horizontal-bar-child-label" }, bl = ["x", "y", "font-size", "fill", "font-weight"], gl = { class: "vue-ui-horizontal-bar-child-label" }, yl = ["x", "y", "text-anchor", "font-size", "fill", "font-weight"], ml = ["y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], Cl = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, kl = ["onClick"], _l = { style: "width:100%;padding-top: 36px;position:relative" }, xl = { class: "vue-ui-data-table" }, wl = { key: 0 }, $l = { style: { width: "100%" } }, Ll = ["data-cell"], Al = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Tl = ["data-cell"], Sl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Fl = ["data-cell"], Pl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Dl = ["data-cell"], Bl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Nl = ["data-cell"], Ol = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, zl = ["data-cell"], El = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Il = ["data-cell"], Vl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ml = {
+  __name: "vue-ui-horizontal-bar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend"],
+  setup(Tt, { expose: St, emit: Ft }) {
+    ma((t) => ({
+      f6c0c1f6: t.tdo
+    }));
+    const Pt = te(() => import("./Tooltip-WD0Ros6G.js")), Re = te(() => import("./BaseIcon-CofSxalQ.js")), Dt = te(
+      () => import("./PenAndPaper-HCZQTkqi.js")
+    ), Bt = te(
+      () => import("./UserOptions-B3I-s3Lw.js")
+    ), Nt = te(
+      () => import("./PackageVersion-BEYRLPkk.js")
+    ), Ot = te(
+      () => import("./BaseDraggableDialog-CRF94NJQ.js")
+    ), { vue_ui_vertical_bar: zt } = Ea(), { isThemeValid: Et, warnInvalidTheme: It } = Ua(), Vt = Ca(), C = Tt, fe = d({
+      get() {
+        return !!C.dataset && C.dataset.length;
+      },
+      set(t) {
+        return t;
+      }
+    }), A = s($a()), be = s(!1), ge = s(""), Mt = s(null), Ue = s(0), I = s(null), Ge = s(null), ye = s(null), We = s(null), Xe = s(null), He = s(0), me = s(0), Rt = s(null), oe = s(null), Ce = s(null), Ut = s(null), ke = s(null), w = s([]), Gt = s({ none: 0, asc: 1, desc: 2 }), U = s(0), ie = s(!1), ne = s(0), ee = s(0), _e = s(null), Wt = Ft, e = s(Le()), Xt = d(() => [
+      { 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" }
+    ]), { loading: je, FINAL_DATASET: qe, manualLoading: xe } = Ia({
+      ...ka(C),
+      FINAL_CONFIG: e,
+      prepareConfig: Le,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          x.value.showTable = e.value.table.show, Yt();
+        });
+      },
+      skeletonDataset: Xt.value,
+      skeletonConfig: La({
+        defaultConfig: e.value,
+        userConfig: {
+          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" } }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: we, setUserOptionsVisibility: Ye, keepUserOptionState: Ke } = Wa({ config: e.value }), { svgRef: $e } = Xa({
+      config: e.value.style.chart.title
+    });
+    function Le() {
+      const t = Me({
+        userConfig: C.config,
+        defaultConfig: zt
+      });
+      let l = {};
+      const a = t.theme;
+      if (a)
+        if (!Et.value(t))
+          It(t), l = t;
+        else {
+          const o = Me({
+            userConfig: At[a] || C.config,
+            defaultConfig: t
+          });
+          l = {
+            ...Me({ userConfig: C.config, defaultConfig: o }),
+            customPalette: t.customPalette.length ? t.customPalette : Aa[a] || Z
+          };
+        }
+      else
+        l = t;
+      return C.config && ze(C.config, "events.datapointEnter") ? l.events.datapointEnter = C.config.events.datapointEnter : l.events.datapointEnter = null, C.config && ze(C.config, "events.datapointLeave") ? l.events.datapointLeave = C.config.events.datapointLeave : l.events.datapointLeave = null, C.config && ze(C.config, "events.datapointClick") ? l.events.datapointClick = C.config.events.datapointClick : l.events.datapointClick = null, l;
+    }
+    const M = s(e.value.style.chart.width), X = s(e.value.style.chart.height), k = s(e.value.style.chart.layout.bars.gap);
+    ae(
+      () => C.config,
+      (t) => {
+        je.value || (e.value = Le()), we.value = !e.value.userOptions.showOnChartHover, He.value += 1, me.value += 1, x.value.showTable = e.value.table.show, x.value.sortDesc = e.value.style.chart.layout.bars.sort === "desc", x.value.showTooltip = e.value.style.chart.tooltip.show, M.value = e.value.style.chart.width, X.value = e.value.style.chart.height, k.value = e.value.style.chart.layout.bars.gap;
+      },
+      { deep: !0 }
+    ), ae(
+      () => C.dataset,
+      (t) => {
+        Array.isArray(t) && t.length > 0 && (xe.value = !1);
+      },
+      { deep: !0 }
+    );
+    const { isPrinting: Je, isImaging: Qe, generatePdf: Ze, generateImage: et } = Ma({
+      elementId: `vue-ui-vertical-bar_${A.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-vertical-bar",
+      options: e.value.userOptions.print
+    }), Ht = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), tt = d(() => Ta(e.value.customPalette)), at = s(null), jt = d(() => e.value.table.responsiveBreakpoint), ce = d(() => !!e.value.debug), qt = s(0), G = s(null), H = s(null);
+    function Yt() {
+      if (I.value && (Ee(C.dataset) && (ue({
+        componentName: "VueUiVerticalBar",
+        type: "dataset",
+        debug: ce.value
+      }), fe.value = !1, xe.value = !0), Ee(C.dataset) || (xe.value = e.value.loading), e.value.responsive)) {
+        const t = Oa(() => {
+          const { width: l, height: a } = za({
+            chart: I.value,
+            title: e.value.style.chart.title.text ? Ge.value : null,
+            legend: e.value.style.chart.legend.show ? ye.value : null,
+            source: We.value,
+            noTitle: Xe.value
+          });
+          qt.value = a / 3, requestAnimationFrame(async () => {
+            X.value = a, M.value = l;
+          });
+        });
+        G.value && (H.value && G.value.unobserve(H.value), G.value.disconnect()), G.value = new ResizeObserver(t), Oe(() => {
+          H.value = I.value?.parentNode, H.value && G.value.observe(H.value);
+        });
+      }
+    }
+    _a(() => {
+      G.value && (H.value && G.value.unobserve(H.value), G.value.disconnect());
+    });
+    const x = s({
+      showTable: e.value.table.show,
+      sortDesc: e.value.style.chart.layout.bars.sort === "desc",
+      showTooltip: e.value.style.chart.tooltip.show
+    }), lt = d(() => x.value.sortDesc), T = d(() => (qe.value.forEach((t, l) => {
+      !t.value && !t.children && ue({
+        componentName: "VueUiVerticalBar",
+        type: "datasetAttributeEmpty",
+        property: `value (index ${l})`,
+        debug: ce.value
+      }), t.children && (Ee(t.children) ? ue({
+        componentName: "VueUiVerticalBar",
+        type: "datasetAttributeEmpty",
+        property: `children (index ${l})`,
+        debug: ce.value
+      }) : t.children.forEach((a, o) => {
+        [null, void 0].includes(a.name) && ue({
+          componentName: "VueUiVerticalBar",
+          type: "datasetSerieAttribute",
+          property: "name",
+          key: "children",
+          index: o,
+          debug: ce.value
+        });
+      }));
+    }), qe.value.map((t, l) => {
+      const a = `vertical_parent_${l}_${A.value}`, o = t.children && t.children.length > 0, f = P(
+        t.value ? t.value : o ? t.children.map((b) => b.value || 0).reduce((b, F) => b + F, 0) : 0
+      ), _ = f >= 0 ? 1 : -1;
+      return {
+        ...t,
+        id: a,
+        absoluteIndex: l,
+        shape: "square",
+        opacity: w.value.includes(a) ? 0.5 : 1,
+        value: Math.abs(f),
+        sign: _,
+        hasChildren: o,
+        isChild: !1,
+        segregate: () => q(a),
+        isSegregated: w.value.includes(a),
+        color: Ie(t.color) || tt.value[l] || Z[l] || Z[l % Z.length],
+        children: !t.children || !t.children.length ? [] : t.children.toSorted(
+          ie.value ? () => 0 : (b, F) => lt.value ? F.value - b.value : b.value - F.value
+        ).map((b, F) => ({
+          ...b,
+          value: P(Math.abs(b.value)),
+          absoluteIndex: l,
+          sign: b.value >= 0 ? 1 : -1,
+          isChild: !0,
+          parentId: a,
+          parentName: t.name,
+          parentValue: f,
+          parentSign: _,
+          id: `vertical_child_${l}_${F}_${A.value}`,
+          childIndex: F,
+          color: Ie(b.color) || Ie(t.color) || tt.value[l] || Z[l] || Z[l % Z.length]
+        })).map((b, F) => ({
+          ...b,
+          isFirstChild: F === 0,
+          isLastChild: F === t.children.length - 1
+        }))
+      };
+    }).toSorted(
+      ie.value ? () => 0 : (t, l) => lt.value ? l.value - t.value : t.value - l.value
+    ))), j = d(() => T.value.filter(
+      (t) => !w.value.includes(t.id)
+    )), $ = d(() => j.value.flatMap((t) => t.hasChildren ? t.children : t)), Kt = d(() => T.value.flatMap((t) => t.hasChildren ? t.children : t)), ot = d(() => j.value.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0)), nt = d(() => ({
+      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" : ""
+    })), S = d(() => e.value.style.chart.layout.bars.parentLabels.show ? e.value.style.chart.layout.bars.parentLabels.fontSize * 2 + 10 : 0), D = d(() => {
+      const t = [];
+      let l = 0;
+      return $.value.forEach((a, o) => {
+        a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show && (l += 1), t[o] = l;
+      }), t;
+    }), m = d(() => {
+      const l = Math.max(0, ...D.value) * S.value;
+      return (X.value - ot.value * k.value - l) / ot.value;
+    }), R = d(() => ({
+      width: M.value,
+      height: X.value,
+      padding: {
+        top: 12,
+        left: 128 + e.value.style.chart.layout.bars.offsetX,
+        right: 64 + e.value.style.chart.layout.bars.paddingRight,
+        bottom: 12
+      }
+    })), Ae = s(0);
+    function rt() {
+      Oe(() => {
+        if (!ke.value) {
+          Ae.value = 0;
+          return;
+        }
+        const l = Array.from(ke.value.querySelectorAll("text")).reduce((a, o) => {
+          const f = o.getBBox?.().width ?? o.getComputedTextLength();
+          return f > a ? f : a;
+        }, 0);
+        Ae.value = l + 12;
+      });
+    }
+    ae(
+      () => [
+        $.value,
+        M.value,
+        X.value,
+        e.value.style.chart.layout.bars.nameLabels,
+        e.value.style.chart.layout.bars.offsetX
+      ],
+      () => rt(),
+      { deep: !0 }
+    ), Ne(() => {
+      rt();
+    });
+    function de() {
+      Oe(() => {
+        ne.value = 0, ee.value = 0, requestAnimationFrame(() => {
+          if (!_e.value) {
+            ne.value = 0, ee.value = 0;
+            return;
+          }
+          const t = Array.from(
+            _e.value.querySelectorAll("text")
+          );
+          if (!t.length) {
+            ne.value = 0, ee.value = 0;
+            return;
+          }
+          let l = 1 / 0, a = 0;
+          t.forEach((ya) => {
+            const Be = ya.getBBox(), ft = Be.x, bt = Be.x + Be.width;
+            ft < l && (l = ft), bt > a && (a = bt);
+          });
+          const o = 0, f = M.value, _ = 24, b = Math.max(0, o - l + _), F = Math.max(0, a - f + _);
+          ee.value = b, ne.value = F;
+        });
+      });
+    }
+    ae(w, () => de(), { deep: !0 }), ae(
+      () => [$.value, M.value, X.value],
+      () => de(),
+      { deep: !0 }
+    ), Ne(() => de());
+    const c = d(() => {
+      const t = Ae.value + Math.abs(e.value.style.chart.layout.bars.nameLabels.offsetX) + ee.value + e.value.style.chart.layout.bars.offsetX, l = R.value.width - R.value.padding.right, a = Math.max(0, l - t - ne.value - ee.value - e.value.style.chart.layout.bars.offsetX);
+      return {
+        top: R.value.padding.top,
+        bottom: R.value.padding.top + R.value.height,
+        left: t,
+        right: l,
+        width: a,
+        fullHeight: R.value.padding.top + R.value.padding.bottom + R.value.height
+      };
+    });
+    async function q(t) {
+      if (w.value.includes(t))
+        w.value = w.value.filter((l) => l !== t);
+      else {
+        if (w.value.length === T.value.length - 1) return;
+        w.value.push(t);
+      }
+      Wt("selectLegend", j.value), de();
+    }
+    function ut(t) {
+      if (!T.value.length)
+        return e.value.debug && console.warn("VueUiHorizontalBar - There are no series to show."), null;
+      const l = T.value.find((a) => a.name === t);
+      return l || (e.value.debug && console.warn(`VueUiHorizontalBar - Series name not found "${t}"`), null);
+    }
+    function Jt(t) {
+      const l = ut(t);
+      l !== null && w.value.includes(l.id) && q(l.id);
+    }
+    function Qt(t) {
+      const l = ut(t);
+      l !== null && (w.value.includes(l.id) || q(l.id));
+    }
+    const V = d(() => j.value.map((t) => Math.abs(t.value)).reduce((t, l) => t + l, 0));
+    function st(t, l = !1, a = 0) {
+      return l ? W({
+        v: P(Math.abs(t) / V.value * 100),
+        s: "%",
+        r: a
+      }) : Math.abs(t) / V.value;
+    }
+    const Y = d(() => $.value.map((t) => t.sign).includes(-1)), Zt = d(() => Math.max(
+      ...j.value.flatMap((t) => t.children && t.children.length ? Math.max(...t.children.map((l) => l.value)) : t.value)
+    ));
+    function L(t) {
+      const l = t / Zt.value;
+      return c.value.width / (Y.value ? 2 : 1) * l;
+    }
+    function ea(t) {
+      return L(t) + c.value.left;
+    }
+    function re(t, l) {
+      const a = j.value.find((b) => b.id === t.parentId);
+      return {
+        y: c.value.top + (k.value + m.value) * l + D.value[l] * S.value - S.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 / V.value) ? "" : st(
+          a.value,
+          !0,
+          e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage
+        ),
+        sign: a.sign
+      };
+    }
+    function ta() {
+      return j.value;
+    }
+    function aa(t, l) {
+      return re(t, l).name;
+    }
+    function la(t, l) {
+      const a = re(t, l);
+      return it(a.value, a, l, t.parentSign || t.sign);
+    }
+    const Te = s(null), Se = s(null);
+    function oa({ datapoint: t, seriesIndex: l }) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: l });
+    }
+    function na({ datapoint: t, seriesIndex: l }) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: l }), Mt.value = null, be.value = !1, Te.value = null;
+    }
+    function ra(t, l) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datpoint: t, seriesIndex: l }), Se.value = {
+        datapoint: t,
+        seriesIndex: l,
+        series: T.value,
+        config: e.value
+      }, be.value = !0, Te.value = t.id;
+      let a = "";
+      const o = t.isChild ? t.parentName : t.name, f = t.isChild ? t.name : "", _ = e.value.style.chart.tooltip.customFormat;
+      Ba(_) && Na(
+        () => _({
+          datapoint: t,
+          series: T.value,
+          config: e.value,
+          seriesIndex: l
+        })
+      ) ? ge.value = _({
+        datapoint: t,
+        series: T.value,
+        config: e.value,
+        seriesIndex: l
+      }) : (a += `<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}"/>${Vt.pattern ? `<rect x="0" y="0" height="60" width="60" rx="5" stroke="none" fill="url(#pattern_${A.value}_${t.absoluteIndex})"/>` : ""}</svg> ${o}</div>
+                ${f ? `<div>${f}</div>` : ""}
+            </div>`, e.value.style.chart.tooltip.showValue && (a += `<div>${e.value.translations.value}: <b>${se(
+        e.value.style.chart.layout.bars.dataLabels.value.formatter,
+        t.sign === 1 ? t.value : -t.value,
+        W({
+          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 && (a += `<div>${e.value.translations.percentageToTotal} : <b>${W({
+        v: Math.abs(t.value) / V.value * 100,
+        s: "%",
+        r: e.value.style.chart.tooltip.roundingPercentage
+      })}</b></div>`, t.isChild && (a += `<div>${e.value.translations.percentageToSerie}: <b>${W({
+        v: Math.abs(t.value) / Math.abs(t.parentValue) * 100,
+        s: "%",
+        r: e.value.style.chart.tooltip.roundingPercentage
+      })}</b></div>`)), ge.value = `<div style="text-align:left">${a}</div>`);
+    }
+    function it(t, l, a, o) {
+      if (!e.value.style.chart.layout.bars.dataLabels.value.show)
+        return "";
+      const f = se(
+        e.value.style.chart.layout.bars.dataLabels.value.formatter,
+        P(o === -1 && t >= 0 ? -t : t),
+        W({
+          p: e.value.style.chart.layout.bars.dataLabels.value.prefix,
+          v: P(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 }
+      ), _ = `(${st(
+        t,
+        !0,
+        e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage
+      )})`;
+      return `${f}${e.value.style.chart.layout.bars.dataLabels.percentage.show ? ` ${_}` : ""}`;
+    }
+    const B = d(() => {
+      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 = $.value.map((a) => a.isChild ? a.isFirstChild ? {
+        color: a.color,
+        parentName: a.parentName,
+        parentValue: a.parentValue,
+        percentageToTotal: a.parentValue / V.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) / V.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) / V.value
+      } : {
+        color: a.color,
+        parentName: a.name,
+        parentValue: a.sign === 1 ? a.value : -a.value,
+        percentageToTotal: Math.abs(a.value) / V.value,
+        childName: "",
+        childValue: "",
+        childPercentageToParent: "",
+        childPercentageToTotal: ""
+      });
+      return { head: t, body: l };
+    });
+    function Fe(t = null) {
+      const l = [
+        [e.value.style.chart.title.text],
+        [e.value.style.chart.title.subtitle.text],
+        [""]
+      ], a = B.value.head, o = B.value.body.map((b) => [
+        b.parentName,
+        b.parentValue,
+        b.percentageToTotal,
+        b.childName,
+        b.childValue,
+        b.childPercentageToParent,
+        b.childPercentageToTotal
+      ]), f = l.concat([a]).concat(o), _ = Pa(f);
+      t ? t(_) : Da({
+        csvContent: _,
+        title: e.value.style.chart.title.text || "vue-ui-vertical-bar"
+      });
+    }
+    const K = s(!1);
+    function ct(t) {
+      K.value = t, Ue.value += 1;
+    }
+    function dt() {
+      x.value.showTable = !x.value.showTable;
+    }
+    Ne(() => {
+      ["none", "asc", "desc"].includes(
+        e.value.style.chart.layout.bars.sort
+      ) || ue({
+        componentName: "VueUiVerticalBar",
+        type: "attributeWrongValue",
+        property: "style.chart.layout.bars.sort",
+        key: e.value.style.chart.layout.bars.sort
+      }), U.value = Gt.value[e.value.style.chart.layout.bars.sort], x.value.sortDesc = U.value === 2, ie.value = U.value === 0;
+    });
+    function ua() {
+      U.value += 1, U.value > 2 && (U.value = 0);
+    }
+    function vt() {
+      ua(), x.value.sortDesc = U.value === 2, ie.value = U.value === 0;
+    }
+    function ht() {
+      x.value.showTooltip = !x.value.showTooltip;
+    }
+    const ve = s(!1);
+    function Pe() {
+      ve.value = !ve.value;
+    }
+    async function sa({ scale: t = 2 } = {}) {
+      if (!I.value) return;
+      const { width: l, height: a } = I.value.getBoundingClientRect(), o = l / a, { imageUri: f, base64: _ } = await qa({
+        domElement: I.value,
+        base64: !0,
+        img: !0,
+        scale: t
+      });
+      return {
+        imageUri: f,
+        base64: _,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: a,
+        aspectRatio: o
+      };
+    }
+    const he = d(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, l = x.value.showTable;
+      return {
+        component: t ? Ot : Ha,
+        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: K.value,
+          fullscreenParent: I.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          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
+            }
+          }
+        }
+      };
+    });
+    ae(
+      () => x.value.showTable,
+      (t) => {
+        e.value.table.show || (t && e.value.table.useDialog && oe.value ? oe.value.open() : "close" in oe.value && oe.value.close());
+      }
+    );
+    const { isResponsive: ia } = Ga(at, jt);
+    function De() {
+      x.value.showTable = !1, Ce.value && Ce.value.setTableIconState(!1);
+    }
+    const ca = d(() => T.value.map((t, l) => ({
+      ...t,
+      shape: "square",
+      display: `${t.name}: ${se(
+        e.value.style.chart.layout.bars.dataLabels.value.formatter,
+        t.value,
+        W({
+          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 }
+      )}`
+    }))), da = d(() => e.value.style.chart.backgroundColor), va = d(() => e.value.style.chart.legend), ha = d(() => e.value.style.chart.title), pa = d(() => ca.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), { exportSvg: fa, getSvg: ba } = Ra({
+      svg: $e,
+      title: ha,
+      legend: va,
+      legendItems: pa,
+      backgroundColor: da
+    });
+    async function pt({ isCb: t }) {
+      if (t) {
+        const { blob: l, url: a, text: o, dataUrl: f } = await ba();
+        e.value.userOptions.callbacks.svg({ blob: l, url: a, text: o, dataUrl: f });
+      } else
+        fa();
+    }
+    function ga() {
+      console.warn("[autoSize]: this legacy method can be safely removed as it ha no impact.");
+    }
+    return St({
+      autoSize: ga,
+      getData: ta,
+      getImage: sa,
+      generatePdf: Ze,
+      generateCsv: Fe,
+      generateImage: et,
+      generateSvg: pt,
+      hideSeries: Qt,
+      showSeries: Jt,
+      toggleTable: dt,
+      toggleSort: vt,
+      toggleTooltip: ht,
+      toggleAnnotator: Pe,
+      toggleFullscreen: ct
+    }), (t, l) => (n(), u("div", {
+      class: J(`vue-data-ui-component vue-ui-vertical-bar ${K.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"} ${e.value.responsive ? "vue-ui-vertical-bar-autosize" : ""}`),
+      ref_key: "verticalBarChart",
+      ref: I,
+      id: `vue-ui-vertical-bar_${A.value}`,
+      style: h(`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(Ye)(!0)),
+      onMouseleave: l[4] || (l[4] = () => i(Ye)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (n(), Q(i(Dt), {
+        key: 0,
+        svgRef: i($e),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: ve.value,
+        onClose: Pe
+      }, {
+        "annotator-action-close": p(() => [
+          g(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": p(({ color: a }) => [
+          g(t.$slots, "annotator-action-color", N(O({ color: a })), void 0, !0)
+        ]),
+        "annotator-action-draw": p(({ mode: a }) => [
+          g(t.$slots, "annotator-action-draw", N(O({ mode: a })), void 0, !0)
+        ]),
+        "annotator-action-undo": p(({ disabled: a }) => [
+          g(t.$slots, "annotator-action-undo", N(O({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-redo": p(({ disabled: a }) => [
+          g(t.$slots, "annotator-action-redo", N(O({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-delete": p(({ disabled: a }) => [
+          g(t.$slots, "annotator-action-delete", N(O({ disabled: a })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
+      Ht.value ? (n(), u("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: Xe,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : y("", !0),
+      e.value.style.chart.title.text ? (n(), u("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: Ge,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (n(), Q(ja, {
+          key: `title_${He.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)) : y("", !0),
+      e.value.userOptions.show && fe.value && (i(Ke) || i(we)) ? (n(), Q(i(Bt), {
+        ref_key: "userOptionsRef",
+        ref: Ce,
+        key: `user_options_${Ue.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isImaging: i(Qe),
+        isPrinting: i(Je),
+        uid: A.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,
+        isFullscreen: K.value,
+        isTooltip: x.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: I.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: ve.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleFullscreen: ct,
+        onGeneratePdf: i(Ze),
+        onGenerateCsv: Fe,
+        onGenerateImage: i(et),
+        onGenerateSvg: pt,
+        onToggleTable: dt,
+        onToggleSort: vt,
+        onToggleTooltip: ht,
+        onToggleAnnotator: Pe,
+        style: h({
+          visibility: i(Ke) ? i(we) ? "visible" : "hidden" : "visible"
+        })
+      }, pe({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: p(({ isOpen: a, color: o }) => [
+            g(t.$slots, "menuIcon", N(O({ isOpen: a, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: p(() => [
+            g(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: p(() => [
+            g(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: p(() => [
+            g(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: p(() => [
+            g(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: p(() => [
+            g(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: p(() => [
+            g(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: p(() => [
+            g(t.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionSort ? {
+          name: "optionSort",
+          fn: p(() => [
+            g(t.$slots, "optionSort", {}, void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: p(({ toggleFullscreen: a, isFullscreen: o }) => [
+            g(t.$slots, "optionFullscreen", N(O({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: p(({ toggleAnnotator: a, isAnnotator: o }) => [
+            g(t.$slots, "optionAnnotator", N(O({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "10"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasSort", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
+      e.value.style.chart.legend.show && e.value.style.chart.legend.position === "top" ? (n(), u("div", {
+        key: 4,
+        ref_key: "chartLegend",
+        ref: ye
+      }, [
+        (n(), Q(mt, {
+          key: `legend_top_${me.value}`,
+          legendSet: T.value,
+          config: nt.value,
+          onClickMarker: l[0] || (l[0] = ({ legend: a }) => q(a.id))
+        }, pe({
+          item: p(({ legend: a, index: o }) => [
+            r("div", {
+              onClick: (f) => q(a.id),
+              style: h(`opacity:${w.value.includes(a.id) ? 0.5 : 1}`)
+            }, v(a.name) + ": " + v(i(se)(
+              e.value.style.chart.layout.bars.dataLabels.value.formatter,
+              a.value,
+              i(W)({
+                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, Ja)
+          ]),
+          _: 2
+        }, [
+          t.$slots.pattern ? {
+            name: "legend-pattern",
+            fn: p(({ legend: a, index: o }) => [
+              le(Ct, {
+                shape: a.shape,
+                radius: 30,
+                stroke: "none",
+                plot: { x: 30, y: 30 },
+                fill: `url(#pattern_${A.value}_${o})`
+              }, null, 8, ["shape", "fill"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["legendSet", "config"]))
+      ], 512)) : y("", !0),
+      (n(), u("svg", {
+        ref_key: "svgRef",
+        ref: $e,
+        xmlns: i(Sa),
+        class: J({
+          "vue-data-ui-fullscreen--on": K.value,
+          "vue-data-ui-fulscreen--off": !K.value
+        }),
+        viewBox: `0 0 ${M.value} ${X.value}`,
+        style: h(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        r("g", {
+          ref_key: "G",
+          ref: Rt,
+          class: "vue-data-ui-g"
+        }, [
+          le(i(Nt)),
+          t.$slots["chart-background"] ? (n(), u("foreignObject", {
+            key: 0,
+            x: 0,
+            y: 0,
+            width: c.value.width,
+            height: c.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            g(t.$slots, "chart-background", {}, void 0, !0)
+          ], 8, Za)) : y("", !0),
+          (n(!0), u(z, null, E($.value, (a, o) => (n(), u("linearGradient", {
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%",
+            id: `vertical_bar_gradient_${A.value}_${o}`
+          }, [
+            r("stop", {
+              offset: "0%",
+              "stop-color": a.color
+            }, null, 8, tl),
+            r("stop", {
+              offset: "100%",
+              "stop-color": i(Ve)(
+                i(Fa)(a.color, 0.03),
+                100 - e.value.style.chart.layout.bars.gradientIntensity
+              )
+            }, null, 8, al)
+          ], 8, el))), 256)),
+          t.$slots.pattern ? (n(), u("g", ll, [
+            (n(!0), u(z, null, E($.value, (a) => (n(), u("defs", null, [
+              g(t.$slots, "pattern", gt({ ref_for: !0 }, {
+                seriesIndex: a.absoluteIndex,
+                patternId: `pattern_${A.value}_${a.absoluteIndex}`
+              }), void 0, !0)
+            ]))), 256))
+          ])) : y("", !0),
+          (n(!0), u(z, null, E($.value, (a, o) => (n(), u("g", null, [
+            r("rect", {
+              x: i(P)(
+                Y.value ? c.value.left + c.value.width / 2 - (a.sign === 1 ? 0 : L(a.value) <= 0 ? 1e-4 : L(a.value)) : c.value.left
+              ),
+              y: c.value.top + (k.value + m.value) * o + D.value[o] * S.value,
+              width: i(P)(
+                L(a.value) <= 0 ? 1e-4 : L(a.value)
+              ),
+              height: m.value <= 0 ? 1e-4 : m.value,
+              fill: e.value.style.chart.layout.bars.underlayerColor,
+              rx: e.value.style.chart.layout.bars.borderRadius,
+              class: J({ animated: e.value.useCssAnimation })
+            }, null, 10, ol)
+          ]))), 256)),
+          (n(!0), u(z, null, E($.value, (a, o) => (n(), u("g", null, [
+            r("rect", {
+              x: i(P)(
+                Y.value ? c.value.left + c.value.width / 2 - (a.sign === 1 ? 0 : L(a.value) <= 0 ? 1e-4 : L(a.value)) : c.value.left
+              ),
+              y: c.value.top + (k.value + m.value) * o + D.value[o] * S.value,
+              width: i(P)(
+                L(a.value) <= 0 ? 1e-4 : L(a.value)
+              ),
+              height: m.value <= 0 ? 1e-4 : m.value,
+              fill: e.value.style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${A.value}_${o})` : i(Ve)(
+                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: J({ animated: e.value.useCssAnimation })
+            }, null, 10, nl),
+            t.$slots.pattern ? (n(), u("rect", {
+              key: 0,
+              x: i(P)(
+                Y.value ? c.value.left + c.value.width / 2 - (a.sign === 1 ? 0 : L(a.value) <= 0 ? 1e-4 : L(a.value)) : c.value.left
+              ),
+              y: c.value.top + (k.value + m.value) * o + D.value[o] * S.value,
+              width: i(P)(
+                L(a.value) <= 0 ? 1e-4 : L(a.value)
+              ),
+              height: m.value <= 0 ? 1e-4 : m.value,
+              fill: `url(#pattern_${A.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: J({ animated: e.value.useCssAnimation })
+            }, null, 10, rl)) : y("", !0),
+            (!a.isChild || a.isLastChild) && e.value.style.chart.layout.separators.show && o !== $.value.length - 1 ? (n(), u("line", {
+              key: 1,
+              x1: M.value,
+              x2: e.value.style.chart.layout.separators.fullWidth ? 0 : c.value.left,
+              y1: m.value + k.value / 2 + c.value.top + (k.value + m.value) * o + D.value[o] * S.value,
+              y2: m.value + k.value / 2 + c.value.top + (k.value + m.value) * o + D.value[o] * S.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, ul)) : y("", !0),
+            Y.value && e.value.style.chart.layout.separators.show ? (n(), u("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, sl)) : y("", !0)
+          ]))), 256)),
+          r("g", {
+            ref_key: "parentLabels",
+            ref: Ut
+          }, [
+            (n(!0), u(z, null, E($.value, (a, o) => (n(), u("g", il, [
+              a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (n(), u("rect", {
+                key: 0,
+                class: "vue-ui-horizontal-bar-parent-marker",
+                x: 2,
+                y: re(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, cl)) : y("", !0),
+              a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (n(), u("text", {
+                key: 1,
+                y: re(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"
+              }, v(aa(a, o)), 9, dl)) : y("", !0),
+              a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (n(), u("text", {
+                key: 2,
+                y: re(a, o).y + e.value.style.chart.layout.bars.parentLabels.fontSize * 1.2,
+                "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"
+              }, v(la(a, o)), 9, vl)) : y("", !0)
+            ]))), 256))
+          ], 512),
+          r("g", {
+            ref_key: "childLabels",
+            ref: ke
+          }, [
+            (n(!0), u(z, null, E(Kt.value, (a, o) => (n(), u("g", hl, [
+              (a.isChild || !a.hasChildren) && e.value.style.chart.layout.bars.nameLabels.show ? (n(), u("text", {
+                key: 0,
+                "text-anchor": "start",
+                x: Math.abs(e.value.style.chart.layout.bars.nameLabels.offsetX),
+                y: i(P)(c.value.top + (k.value + m.value) * o + m.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 2 + D.value[o] * S.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" }
+              }, v(a.name), 9, pl)) : y("", !0)
+            ]))), 256))
+          ], 512),
+          r("g", null, [
+            (n(!0), u(z, null, E($.value, (a, o) => (n(), u("g", fl, [
+              (a.isChild || !a.hasChildren) && e.value.style.chart.layout.bars.nameLabels.show ? (n(), u("text", {
+                key: 0,
+                "text-anchor": "end",
+                x: c.value.left + e.value.style.chart.layout.bars.nameLabels.offsetX - 6,
+                y: c.value.top + (k.value + m.value) * o + m.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 3 + D.value[o] * S.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"
+              }, v(a.name), 9, bl)) : y("", !0)
+            ]))), 256))
+          ]),
+          r("g", {
+            ref_key: "dataLabels",
+            ref: _e
+          }, [
+            (n(!0), u(z, null, E($.value, (a, o) => (n(), u("g", gl, [
+              r("text", {
+                x: Y.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(
+                  ea(a.value) + 3 + e.value.style.chart.layout.bars.dataLabels.offsetX,
+                  c.value.right - 2
+                ),
+                y: c.value.top + (k.value + m.value) * o + m.value / 2 + D.value[o] * S.value + e.value.style.chart.layout.bars.dataLabels.fontSize / 3,
+                "text-anchor": !Y.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"
+              }, v(it(a.value, a, o, a.sign)), 9, yl)
+            ]))), 256))
+          ], 512),
+          (n(!0), u(z, null, E($.value, (a, o) => (n(), u("g", null, [
+            r("rect", {
+              x: 0,
+              y: c.value.top + (k.value + m.value) * o - k.value / 2 + D.value[o] * S.value,
+              width: M.value,
+              height: m.value + k.value <= 0 ? 1e-4 : m.value + k.value,
+              fill: Te.value === a.id ? i(Ve)(
+                e.value.style.chart.layout.highlighter.color,
+                e.value.style.chart.layout.highlighter.opacity
+              ) : "transparent",
+              onMouseenter: (f) => ra(a, o),
+              onMouseleave: (f) => na({ datapoint: a, seriesIndex: o }),
+              onClick: (f) => oa({ datapoint: a, seriesIndex: o })
+            }, null, 40, ml)
+          ]))), 256)),
+          g(t.$slots, "svg", { svg: R.value }, void 0, !0)
+        ], 512)
+      ], 14, Qa)),
+      t.$slots.watermark ? (n(), u("div", Cl, [
+        g(t.$slots, "watermark", N(O({ isPrinting: i(Je) || i(Qe) })), void 0, !0)
+      ])) : y("", !0),
+      e.value.style.chart.legend.show && e.value.style.chart.legend.position === "bottom" ? (n(), u("div", {
+        key: 6,
+        ref_key: "chartLegend",
+        ref: ye
+      }, [
+        (n(), Q(mt, {
+          key: `legend_bottom_${me.value}`,
+          legendSet: T.value,
+          config: nt.value,
+          onClickMarker: l[1] || (l[1] = ({ legend: a }) => q(a.id))
+        }, pe({
+          item: p(({ legend: a, index: o }) => [
+            r("div", {
+              onClick: (f) => q(a.id),
+              style: h(`opacity:${w.value.includes(a.id) ? 0.5 : 1}`)
+            }, v(a.name) + ": " + v(i(se)(
+              e.value.style.chart.layout.bars.dataLabels.value.formatter,
+              a.value,
+              i(W)({
+                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, kl)
+          ]),
+          _: 2
+        }, [
+          t.$slots.pattern ? {
+            name: "legend-pattern",
+            fn: p(({ legend: a, index: o }) => [
+              le(Ct, {
+                shape: a.shape,
+                radius: 30,
+                stroke: "none",
+                plot: { x: 30, y: 30 },
+                fill: `url(#pattern_${A.value}_${o})`
+              }, null, 8, ["shape", "fill"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["legendSet", "config"]))
+      ], 512)) : y("", !0),
+      g(t.$slots, "legend", { legend: T.value }, void 0, !0),
+      t.$slots.source ? (n(), u("div", {
+        key: 7,
+        ref_key: "source",
+        ref: We,
+        dir: "auto"
+      }, [
+        g(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : y("", !0),
+      le(i(Pt), {
+        show: x.value.showTooltip && be.value && w.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: I.value,
+        content: ge.value,
+        isFullscreen: K.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
+      }, {
+        "tooltip-before": p(() => [
+          g(t.$slots, "tooltip-before", N(O({ ...Se.value })), void 0, !0)
+        ]),
+        "tooltip-after": p(() => [
+          g(t.$slots, "tooltip-after", N(O({ ...Se.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
+      fe.value && e.value.userOptions.buttons.table ? (n(), Q(xa(he.value.component), gt({ key: 8 }, he.value.props, {
+        ref_key: "tableUnit",
+        ref: oe,
+        onClose: De
+      }), pe({
+        content: p(() => [
+          r("div", {
+            ref_key: "tableContainer",
+            ref: at,
+            class: "vue-ui-vertical-bar-table atom-data-table",
+            style: h(`${e.value.table.useDialog ? "" : "max-height: 300px; margin-top: 24px"}`)
+          }, [
+            r("div", _l, [
+              e.value.table.useDialog ? y("", !0) : (n(), u("div", {
+                key: 0,
+                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: De,
+                onKeypress: wa(De, ["enter"])
+              }, [
+                le(i(Re), {
+                  name: "close",
+                  stroke: e.value.table.th.color,
+                  "stroke-width": 2
+                }, null, 8, ["stroke"])
+              ], 36)),
+              r("div", {
+                style: { width: "100%", "container-type": "inline-size" },
+                class: J({ "vue-ui-responsive": i(ia) })
+              }, [
+                r("table", xl, [
+                  e.value.table.useDialog ? y("", !0) : (n(), u("caption", {
+                    key: 0,
+                    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"
+                  }, [
+                    yt(v(e.value.style.chart.title.text) + " ", 1),
+                    e.value.style.chart.title.subtitle.text ? (n(), u("span", wl, v(e.value.style.chart.title.subtitle.text), 1)) : y("", !0)
+                  ], 4)),
+                  r("thead", null, [
+                    r("tr", {
+                      role: "row",
+                      style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color}`)
+                    }, [
+                      (n(!0), u(z, null, E(B.value.head, (a) => (n(), u("th", {
+                        style: h(`outline:${e.value.table.th.outline}`)
+                      }, [
+                        r("div", $l, v(a), 1)
+                      ], 4))), 256))
+                    ], 4),
+                    r("tr", null, [
+                      r("th", {
+                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      r("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`)
+                      }, " ∑ " + v(e.value.table.td.prefix) + v(isNaN(V.value) ? "" : V.value.toFixed(e.value.table.td.roundingValue)) + v(e.value.table.td.suffix), 5),
+                      r("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),
+                      r("th", {
+                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      r("th", {
+                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      r("th", {
+                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4),
+                      r("th", {
+                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                      }, null, 4)
+                    ])
+                  ]),
+                  r("tbody", null, [
+                    (n(!0), u(z, null, E(B.value.body, (a, o) => (n(), u("tr", {
+                      class: J({
+                        "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}`)
+                    }, [
+                      r("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline};font-variant-numeric: tabular-nums;`),
+                        "data-cell": B.value.head[0] ?? ""
+                      }, [
+                        r("div", Al, [
+                          a.color ? (n(), u("span", {
+                            key: 0,
+                            style: h(`color:${a.color};margin-right:3px`)
+                          }, "⬤", 4)) : y("", !0),
+                          r("span", null, v(a.parentName), 1)
+                        ])
+                      ], 12, Ll),
+                      r("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": B.value.head[1] ?? ""
+                      }, [
+                        r("div", Sl, v(e.value.table.td.prefix) + v(["", NaN, void 0].includes(a.parentValue) ? "" : a.parentValue.toFixed(
+                          e.value.table.td.roundingValue
+                        )) + v(e.value.table.td.suffix), 1)
+                      ], 12, Tl),
+                      r("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": B.value.head[2] ?? ""
+                      }, [
+                        r("div", Pl, v(["", NaN, void 0].includes(a.percentageToTotal) ? "" : `${(a.percentageToTotal * 100).toFixed(
+                          e.value.table.td.roundingPercentage
+                        )}%`), 1)
+                      ], 12, Fl),
+                      r("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": B.value.head[3] ?? ""
+                      }, [
+                        r("div", Bl, v(a.childName), 1)
+                      ], 12, Dl),
+                      r("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": B.value.head[4] ?? ""
+                      }, [
+                        r("div", Ol, v(e.value.table.td.prefix) + v(["", NaN, void 0].includes(a.childValue) ? "" : a.childValue.toFixed(
+                          e.value.table.td.roundingValue
+                        )) + v(e.value.table.td.suffix), 1)
+                      ], 12, Nl),
+                      r("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": B.value.head[5] ?? ""
+                      }, [
+                        r("div", El, v(["", NaN, void 0].includes(
+                          a.childPercentageToParent
+                        ) ? "" : `${(a.childPercentageToParent * 100).toFixed(
+                          e.value.table.td.roundingPercentage
+                        )}%`), 1)
+                      ], 12, zl),
+                      r("td", {
+                        class: "vue-ui-data-table__tbody__td",
+                        style: h(`outline:${e.value.table.td.outline}`),
+                        "data-cell": B.value.head[6] ?? ""
+                      }, [
+                        r("div", Vl, v(["", NaN, void 0].includes(
+                          a.childPercentageToTotal
+                        ) ? "" : `${(a.childPercentageToTotal * 100).toFixed(
+                          e.value.table.td.roundingPercentage
+                        )}%`), 1)
+                      ], 12, Il)
+                    ], 6))), 256))
+                  ])
+                ])
+              ], 2)
+            ])
+          ], 4)
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: p(() => [
+            yt(v(he.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: p(() => [
+            r("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[2] || (l[2] = (a) => Fe(e.value.userOptions.callbacks.csv))
+            }, [
+              le(i(Re), {
+                name: "excel",
+                stroke: he.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : y("", !0),
+      i(je) ? (n(), Q(Va, { key: 9 })) : y("", !0)
+    ], 46, Ka));
+  }
+}, Rl = /* @__PURE__ */ Ya(Ml, [["__scopeId", "data-v-f1ac0dad"]]), ro = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Rl
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  no as a,
+  ro as b,
+  Rl as v
+};