vue-data-ui 3.0.0-next.2 → 3.0.0-next.21

package/dist/vue-ui-stackbar-AKs4GMxY.js

@@ -0,0 +1,1354 @@
+import { defineAsyncComponent as ae, useSlots as ga, computed as k, ref as b, onMounted as zt, toRefs as ba, watch as Fe, shallowRef as Ct, onBeforeUnmount as St, watchEffect as _t, nextTick as Le, createElementBlock as o, openBlock as s, unref as v, normalizeStyle as Z, normalizeClass as le, createBlock as K, createCommentVNode as y, renderSlot as L, createElementVNode as Q, createVNode as ze, createSlots as $t, withCtx as C, normalizeProps as U, guardReactiveProps as H, Fragment as g, renderList as m, mergeProps as Ue, toDisplayString as M, createTextVNode as fa } from "vue";
+import { u as ma, c as Tt, A as pa, t as xa, p as Ce, a as ka, C as re, b as wa, o as Mt, e as At, g as La, d as za, am as Se, ab as Nt, D as It, X as Ca, l as Sa, aa as _e, F as Rt, i as $e, f as j, I as _a, a0 as $a, x as Ot, q as Ta, r as Ma, y as Aa } from "./index-DyWXkFFm.js";
+import { u as Pt } from "./useNestedProp-5rJrnAmD.js";
+import { t as He, u as Na } from "./useResponsive-DfdjqQps.js";
+import { u as Ia } from "./usePrinter-YV36Zq2L.js";
+import { u as Ra } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Oa } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Pa } from "./useTimeLabelCollider-V7AOiPLB.js";
+import Va from "./Legend-CX874XJp.js";
+import { S as Ea } from "./Slicer-D06CTSaX.js";
+import Da from "./Title-CItmidxn.js";
+import { _ as Fa } from "./Shape-Du8dC9QE.js";
+import { u as Ua } from "./useTimeLabels-DFkUfjfs.js";
+import Ha from "./img-2Cyzq02w.js";
+import { u as Ba, B as Wa } from "./BaseScanner-DIK2NTdp.js";
+import { _ as Ya } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Xa = ["id"], Ga = ["xmlns", "viewBox"], Ja = ["x", "y", "width", "height"], qa = { key: 1 }, Za = ["id"], Ka = ["stop-color"], Qa = ["stop-color"], ja = ["stop-color"], el = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], tl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], al = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ll = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], rl = { key: 0 }, sl = ["x", "y", "height", "rx", "width", "fill", "stroke", "stroke-width"], ol = { key: 0 }, il = ["x", "y", "height", "rx", "width", "fill", "stroke", "stroke-width"], nl = ["x", "y", "width", "rx", "height", "fill", "stroke", "stroke-width"], ul = { key: 0 }, cl = ["x", "y", "width", "rx", "height", "fill", "stroke", "stroke-width"], hl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], vl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], dl = ["x", "y", "font-size", "fill", "font-weight"], yl = ["transform", "font-size", "fill", "font-weight"], gl = ["x", "y", "font-size", "fill", "font-weight"], bl = ["x", "y", "font-size", "font-weight", "fill"], fl = ["x", "y", "font-size", "fill", "font-weight"], ml = ["x", "y", "font-size", "font-weight", "fill"], pl = ["x1", "x2", "y1", "y2", "stroke"], xl = ["x", "y", "font-size", "font-weight", "fill"], kl = ["x1", "x2", "y1", "y2", "stroke"], wl = ["font-size", "font-weight", "fill", "text-anchor", "transform"], Ll = { key: 0 }, zl = { key: 1 }, Cl = ["text-anchor", "font-size", "font-weight", "fill", "transform", "onClick"], Sl = ["text-anchor", "font-size", "fill", "transform", "innerHTML", "onClick"], _l = { key: 0 }, $l = { key: 1 }, Tl = ["font-size", "font-weight", "fill", "x", "y", "onClick"], Ml = ["font-size", "font-weight", "fill", "x", "y", "onClick", "innerHTML"], Al = ["x", "y", "width", "height", "onClick", "onMouseenter", "fill"], Nl = ["x", "y", "width", "height", "onClick", "onMouseenter", "fill"], Il = {
+  key: 3,
+  class: "vue-data-ui-watermark"
+}, Rl = ["onClick"], Ol = ["innerHTML"], Pl = {
+  __name: "vue-ui-stackbar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint", "selectLegend", "selectTimeLabel"],
+  setup(Te, { expose: Vt, emit: Et }) {
+    const Dt = ae(() => import("./vue-ui-accordion-_T76roov.js")), Ft = ae(() => import("./DataTable-C3ve--z6.js")), Ut = ae(() => import("./PackageVersion-5l2M4Zh4.js")), Ht = ae(() => import("./PenAndPaper-CYEXrj4q.js")), Bt = ae(() => import("./Tooltip-lhQXI9xT.js")), Wt = ae(() => import("./UserOptions-mGHinyKk.js")), { vue_ui_stackbar: Yt } = ma(), Xt = ga(), f = Te, Me = Et, ne = k({
+      get() {
+        return !!f.dataset && f.dataset.length;
+      },
+      set(a) {
+        return a;
+      }
+    }), P = b(null), V = b(Tt()), ue = b(!1), Ae = b(null), Ne = b(""), _ = b([]), Be = b(0), We = b(null), Ye = b(null), Xe = b(null), Ge = b(null), Je = b(0), ce = b(!1), se = b(null), B = b(!1), qe = b(0), Gt = b(0), Jt = b(0), ee = b(null), Ie = b(null), Re = b(null), W = b(null), Y = b(null), qt = b(null), Ze = b(null);
+    zt(() => {
+      Ee();
+    });
+    const e = b(Pe()), { loading: he, FINAL_DATASET: ve, manualLoading: de } = Ba({
+      ...ba(f),
+      FINAL_CONFIG: e,
+      prepareConfig: Pe,
+      skeletonDataset: [
+        {
+          name: "",
+          series: [2, 3, 5, 8, 13, 21],
+          color: "#BABABA"
+        },
+        {
+          name: "",
+          series: [1, 2, 3, 5, 8, 13],
+          color: "#CACACA"
+        }
+      ],
+      skeletonConfig: pa({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          useCssAnimation: !1,
+          table: { show: !1 },
+          tooltip: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              bars: {
+                totalValues: { show: !1 },
+                dataLabels: { show: !1 }
+              },
+              grid: {
+                scale: {
+                  scaleMin: 0,
+                  scaleMax: 40
+                },
+                x: {
+                  axisColor: "#6A6A6A",
+                  linesColor: "#6A6A6A",
+                  axisName: { show: !1 },
+                  timeLabels: { show: !1 }
+                },
+                y: {
+                  axisColor: "#6A6A6A",
+                  linesColor: "#6A6A6A",
+                  axisName: { show: !1 },
+                  axisLabels: { show: !1 }
+                }
+              },
+              legend: {
+                backgroundColor: "transparent"
+              },
+              padding: {
+                left: 24,
+                right: 24,
+                bottom: 12
+              },
+              zoom: {
+                show: !1,
+                startIndex: null,
+                endIndex: null
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: Oe, setUserOptionsVisibility: Ke, keepUserOptionState: Qe } = Ra({ config: e.value }), { svgRef: je } = Oa({ config: e.value.style.chart.title });
+    function Pe() {
+      const a = Pt({
+        userConfig: f.config,
+        defaultConfig: Yt
+      });
+      let r = {};
+      return a.theme ? r = {
+        ...Pt({
+          userConfig: ka.vue_ui_stackbar[a.theme] || f.config,
+          defaultConfig: a
+        }),
+        customPalette: xa[a.theme] || Ce
+      } : r = a, f.config && re(f.config, "style.chart.grid.scale.scaleMin") ? r.style.chart.grid.scale.scaleMin = f.config.style.chart.grid.scale.scaleMin : r.style.chart.grid.scale.scaleMin = null, f.config && re(f.config, "style.chart.grid.scale.scaleMax") ? r.style.chart.grid.scale.scaleMax = f.config.style.chart.grid.scale.scaleMax : r.style.chart.grid.scale.scaleMax = null, f.config && re(f.config, "style.chart.zoom.startIndex") ? r.style.chart.zoom.startIndex = f.config.style.chart.zoom.startIndex : r.style.chart.zoom.startIndex = null, f.config && re(f.config, "style.chart.zoom.endIndex") ? r.style.chart.zoom.endIndex = f.config.style.chart.zoom.endIndex : r.style.chart.zoom.endIndex = null, f.config && re(f.config, "style.chart.bars.dataLabels.hideUnderValue") ? r.style.chart.bars.dataLabels.hideUnderValue = f.config.style.chart.bars.dataLabels.hideUnderValue : r.style.chart.bars.dataLabels.hideUnderValue = null, f.config && re(f.config, "style.chart.bars.dataLabels.hideUnderPercentage") ? r.style.chart.bars.dataLabels.hideUnderPercentage = f.config.style.chart.bars.dataLabels.hideUnderPercentage : r.style.chart.bars.dataLabels.hideUnderPercentage = null, r;
+    }
+    const et = k(() => e.value.style.chart.bars.dataLabels.hideUnderValue !== null), tt = k(() => e.value.style.chart.bars.dataLabels.hideUnderPercentage !== null);
+    Fe(() => f.config, (a) => {
+      he.value || (e.value = Pe()), Oe.value = !e.value.userOptions.showOnChartHover, Ee(), qe.value += 1, Gt.value += 1, Jt.value += 1, z.value.dataLabels.show = e.value.style.chart.bars.dataLabels.show, z.value.showTable = e.value.table.show, z.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 }), Fe(() => f.dataset, (a) => {
+      Array.isArray(a) && a.length > 0 && (de.value = !1), nt();
+    }, { deep: !0 });
+    const z = b({
+      dataLabels: {
+        show: e.value.style.chart.bars.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    Fe(e, () => {
+      z.value = {
+        dataLabels: {
+          show: e.value.style.chart.bars.dataLabels.show
+        },
+        showTable: e.value.table.show,
+        showTooltip: e.value.style.chart.tooltip.show
+      };
+    }, { immediate: !0 });
+    const { isPrinting: at, isImaging: lt, generatePdf: rt, generateImage: st } = Ia({
+      elementId: `stackbar_${V.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-stackbar",
+      options: e.value.userOptions.print
+    }), ye = b({
+      width: e.value.style.chart.width,
+      height: e.value.style.chart.height,
+      paddingRatio: {
+        top: e.value.style.chart.padding.top / e.value.style.chart.height,
+        right: e.value.style.chart.padding.right / e.value.style.chart.width,
+        bottom: e.value.style.chart.padding.bottom / e.value.style.chart.height,
+        left: e.value.style.chart.padding.left / e.value.style.chart.width
+      }
+    }), Zt = k(() => wa(e.value.customPalette)), E = Ct(null), te = Ct(null), ot = b(null);
+    zt(() => {
+      Ee();
+    });
+    const Ve = k(() => !!e.value.debug);
+    function Ee() {
+      if (Mt(f.dataset) ? (At({
+        componentName: "VueUiStackbar",
+        type: "dataset",
+        debug: Ve.value
+      }), de.value = !0) : f.dataset.forEach((a, r) => {
+        La({
+          datasetObject: a,
+          requiredAttributes: ["name", "series"]
+        }).forEach((t) => {
+          ne.value = !1, At({
+            componentName: "VueUiStackbar",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: r,
+            debug: Ve.value
+          }), de.value = !0;
+        });
+      }), Mt(f.dataset) || (de.value = e.value.loading), setTimeout(() => {
+        B.value = !0;
+      }, 10), e.value.responsive) {
+        const a = He(() => {
+          B.value = !1;
+          const { width: r, height: t } = Na({
+            chart: P.value,
+            title: e.value.style.chart.title.text ? We.value : null,
+            legend: e.value.style.chart.legend.show ? Ye.value : null,
+            slicer: e.value.style.chart.zoom.show && F.value > 1 ? Xe.value : null,
+            source: Ge.value
+          });
+          requestAnimationFrame(() => {
+            ye.value.width = r, ye.value.height = t - 12, clearTimeout(ot.value), ot.value = setTimeout(() => {
+              B.value = !0;
+            }, 10);
+          });
+        });
+        E.value && (te.value && E.value.unobserve(te.value), E.value.disconnect()), E.value = new ResizeObserver(a), te.value = P.value.parentNode, E.value.observe(te.value);
+      }
+      ut();
+    }
+    St(() => {
+      E.value && (te.value && E.value.unobserve(te.value), E.value.disconnect());
+    });
+    function Kt() {
+      let a = 0;
+      e.value.orientation === "vertical" && W.value && (a = Array.from(W.value.querySelectorAll("text")).reduce((l, c) => {
+        const u = c.getComputedTextLength();
+        return u > l ? u : l;
+      }, 0)), e.value.orientation === "horizontal" && Y.value && (a = Array.from(Y.value.querySelectorAll("text")).reduce((l, c) => {
+        const u = c.getComputedTextLength();
+        return u > l ? u : l;
+      }, 0));
+      const r = Re.value ? Re.value.getBoundingClientRect().width : 0;
+      return a + r + (r ? 24 : 0);
+    }
+    const ge = b(0), be = b(0), Qt = He((a) => {
+      ge.value = a;
+    }, 100);
+    _t((a) => {
+      const r = e.value.orientation === "vertical" ? Y.value : W.value;
+      if (!r) return;
+      const t = new ResizeObserver((l) => {
+        Qt(l[0].contentRect.height);
+      });
+      t.observe(r), a(() => t.disconnect());
+    });
+    const jt = He((a) => {
+      be.value = a + e.value.style.chart.bars.totalValues.fontSize;
+    }, 100);
+    _t((a) => {
+      if (e.value.orientation === "vertical") return;
+      const r = Ze.value;
+      if (!r) return;
+      const t = new ResizeObserver((l) => {
+        jt(l[0].contentRect.width);
+      });
+      t.observe(r), a(() => t.disconnect());
+    }), St(() => {
+      ge.value = 0, be.value = 0;
+    });
+    const it = k(() => {
+      let a = 0;
+      Ie.value && (a = Ie.value.getBBox().height);
+      let r = 0;
+      return e.value.orientation === "vertical" && Y.value && (r = ge.value), e.value.orientation === "horizontal" && W.value && (r = ge.value), a + r;
+    }), n = k(() => {
+      const { height: a, width: r } = ye.value, { right: t } = ye.value.paddingRatio;
+      let l = e.value.style.chart.bars.totalValues.show && f.dataset && f.dataset.length > 1 ? e.value.style.chart.bars.totalValues.fontSize * 1.3 : 0, c = 0;
+      e.value.style.chart.grid.y.axisLabels.show && (c = Kt());
+      const u = e.value.style.chart.padding.top + l, S = r - r * t - be.value, X = a - e.value.style.chart.padding.bottom - it.value - l, G = e.value.style.chart.padding.left + c, J = r - G - r * t - be.value, R = a - u - e.value.style.chart.padding.bottom - it.value - l;
+      return {
+        chartHeight: a,
+        chartWidth: r,
+        top: u,
+        right: S,
+        bottom: X,
+        left: G,
+        width: Math.max(0, J),
+        height: Math.max(0, R)
+      };
+    }), D = k(() => ve.value.map((a, r) => {
+      const t = za(a.color) || Zt.value[r] || Ce[r] || Ce[r % Ce.length];
+      return {
+        ...a,
+        // In distributed mode, all values are converted to positive
+        series: JSON.parse(JSON.stringify(a.series)).map((l) => e.value.style.chart.bars.distributed ? Math.abs(l) : l),
+        // Store signs to manage display of neg values in distributed mode
+        signedSeries: a.series.map((l) => l >= 0 ? 1 : -1),
+        absoluteIndex: r,
+        id: Tt(),
+        color: t
+      };
+    })), F = k(() => Math.max(...D.value.filter((a) => !_.value.includes(a.id)).map((a) => a.series.length))), h = b({
+      start: 0,
+      end: Math.max(...ve.value.map((a) => a.series.length))
+    });
+    function nt() {
+      ut();
+    }
+    async function ut() {
+      (e.value.style.chart.zoom.startIndex !== null || e.value.style.chart.zoom.endIndex !== null) && ee.value ? (e.value.style.chart.zoom.startIndex !== null && (await Le(), await Le(), ee.value && ee.value.setStartValue(e.value.style.chart.zoom.startIndex)), e.value.style.chart.zoom.endIndex !== null && (await Le(), await Le(), ee.value && ee.value.setEndValue(ea(e.value.style.chart.zoom.endIndex + 1)))) : (h.value = {
+        start: 0,
+        end: Math.max(...ve.value.map((a) => a.series.length))
+      }, Je.value += 1);
+    }
+    function ea(a) {
+      const r = Math.max(...ve.value.map((t) => t.series.length));
+      return a > r ? r : a < 0 || e.value.style.chart.zoom.startIndex !== null && a < e.value.style.chart.zoom.startIndex ? e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex + 1 : 1 : a;
+    }
+    const d = k(() => {
+      let a;
+      return e.value.orientation === "vertical" ? a = n.value.width / (h.value.end - h.value.start) : a = n.value.height / (h.value.end - h.value.start), a <= 0 ? 0 : a;
+    }), oe = k(() => Se(D.value.filter((a) => !_.value.includes(a.id))).slice(h.value.start, h.value.end)), ta = k(() => Se(D.value.filter((a) => !_.value.includes(a.id)).map((a) => ({
+      ...a,
+      series: a.series.map((r, t) => a.signedSeries[t] === -1 && r >= 0 ? -r : r)
+    }))).slice(h.value.start, h.value.end)), fe = k(() => {
+      const a = D.value.filter((r) => !_.value.includes(r.id));
+      return {
+        positive: Se(a.map((r) => ({
+          ...r,
+          series: r.series.slice(h.value.start, h.value.end).map((t) => t >= 0 ? t : 0)
+        }))),
+        negative: Se(a.map((r) => ({
+          ...r,
+          series: r.series.slice(h.value.start, h.value.end).map((t) => t < 0 ? t : 0)
+        })))
+      };
+    }), I = k(() => {
+      const a = e.value.style.chart.grid.scale.scaleMax !== null && !e.value.style.chart.bars.distributed ? e.value.style.chart.grid.scale.scaleMax : Math.max(...fe.value.positive), r = Math.min(...fe.value.negative), t = e.value.style.chart.grid.scale.scaleMin !== null && !e.value.style.chart.bars.distributed ? e.value.style.chart.grid.scale.scaleMin : [-1 / 0, 1 / 0, NaN, void 0, null].includes(r) ? 0 : r, l = !e.value.style.chart.bars.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? Nt(t > 0 ? 0 : t, a < 0 ? 0 : a, e.value.style.chart.grid.scale.ticks) : It(t > 0 ? 0 : t, a < 0 ? 0 : a, e.value.style.chart.grid.scale.ticks);
+      return l.ticks.map((c) => ({
+        zero: n.value.bottom - n.value.height * (Math.abs(l.min) / (l.max + Math.abs(l.min))),
+        y: n.value.bottom - n.value.height * ((c + Math.abs(l.min)) / (l.max + Math.abs(l.min))),
+        x: n.value.left - 8,
+        horizontal_zero: n.value.left + n.value.width * (Math.abs(l.min) / (l.max + Math.abs(l.min))),
+        horizontal_x: n.value.left + n.value.width * ((c + Math.abs(l.min)) / (l.max + Math.abs(l.min))),
+        horizontal_y: n.value.bottom - 8,
+        value: c
+      }));
+    }), $ = k(() => Ua({
+      values: e.value.style.chart.grid.x.timeLabels.values,
+      maxDatapoints: F.value,
+      formatter: e.value.style.chart.grid.x.timeLabels.datetimeFormatter,
+      start: h.value.start,
+      end: h.value.end
+    })), w = k(() => {
+      if (!ne.value && !he.value) return [];
+      let a = Array(F.value).fill(0), r = Array(F.value).fill(0), t = Array(F.value).fill(0), l = Array(F.value).fill(0);
+      const c = Math.max(...fe.value.positive) || 0, u = Math.min(...fe.value.negative), S = [-1 / 0, 1 / 0, NaN, void 0, null].includes(u) ? 0 : u, X = !e.value.style.chart.bars.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? Nt(e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : S > 0 ? 0 : S, e.value.style.chart.grid.scale.scaleMax !== null ? e.value.style.chart.grid.scale.scaleMax : c < 0 ? 0 : c, e.value.style.chart.grid.scale.ticks) : It(e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : S > 0 ? 0 : S, e.value.style.chart.grid.scale.scaleMax !== null ? e.value.style.chart.grid.scale.scaleMax : c < 0 ? 0 : c, e.value.style.chart.grid.scale.ticks), { min: G, max: J } = X, R = J + (G >= 0 ? 0 : Math.abs(G)) || 1, T = n.value.height, we = n.value.width, wt = I.value[0] ? I.value[0].zero : n.value.bottom, Lt = I.value[0] ? I.value[0].horizontal_zero : n.value.left;
+      return D.value.filter((ie) => !_.value.includes(ie.id)).map((ie) => {
+        const O = ie.series.slice(h.value.start, h.value.end), ia = ie.signedSeries.slice(h.value.start, h.value.end), na = O.map((p, x) => n.value.left + d.value * x + d.value * e.value.style.chart.bars.gapRatio / 4), ua = O.map((p, x) => n.value.top + d.value * x + d.value * e.value.style.chart.bars.gapRatio / 4), ca = O.map((p, x) => {
+          const A = e.value.style.chart.bars.distributed ? (p || 0) / oe.value[x] : (p || 0) / R;
+          let q, N;
+          return p > 0 ? (N = T * A, q = wt - N - a[x], a[x] += N) : (N = T * A, q = wt + t[x], t[x] += Math.abs(N)), q;
+        }), ha = O.map((p, x) => {
+          const A = e.value.style.chart.bars.distributed ? (p || 0) / oe.value[x] : (p || 0) / R;
+          let q, N;
+          return p > 0 ? (N = we * A, q = Lt + r[x], r[x] += N) : (N = we * A, q = Lt - Math.abs(N) - l[x], l[x] += Math.abs(N)), q;
+        }), va = O.map((p, x) => {
+          const A = e.value.style.chart.bars.distributed ? (p || 0) / oe.value[x] : (p || 0) / R;
+          return p > 0 ? T * A : T * Math.abs(A);
+        }), da = O.map((p, x) => {
+          const A = e.value.style.chart.bars.distributed ? (p || 0) / oe.value[x] : (p || 0) / R;
+          return p > 0 ? we * A : we * Math.abs(A);
+        }), ya = O.map((p) => Math.abs(p)).reduce((p, x) => p + x, 0);
+        return {
+          ...ie,
+          proportions: O.map((p, x) => e.value.style.chart.bars.distributed ? (p || 0) / oe.value[x] : (p || 0) / ya),
+          series: O,
+          signedSeries: ia,
+          x: na,
+          y: ca,
+          height: va,
+          horizontal_width: da,
+          horizontal_y: ua,
+          horizontal_x: ha
+        };
+      });
+    }), ct = k(() => ta.value.map((a, r) => ({
+      value: a,
+      sign: a >= 0 ? 1 : -1
+    })));
+    function me(a, r, t, l, c) {
+      const u = c === -1 && a >= 0 ? -a : a;
+      return $e(
+        e.value.style.chart.bars.dataLabels.formatter,
+        u,
+        j({
+          p: e.value.style.chart.bars.dataLabels.prefix,
+          v: u,
+          s: e.value.style.chart.bars.dataLabels.suffix,
+          r: e.value.style.chart.bars.dataLabels.rounding
+        }),
+        { datapoint: r, seriesIndex: t, datapointIndex: l }
+      );
+    }
+    function ht(a, r, t, l) {
+      return $e(
+        e.value.style.chart.bars.dataLabels.formatter,
+        a,
+        j({
+          v: isNaN(a) ? 0 : a,
+          s: "%",
+          r: e.value.style.chart.bars.dataLabels.rounding
+        }),
+        { datapoint: r, seriesIndex: t, datapointIndex: l }
+      );
+    }
+    function vt(a) {
+      const r = JSON.parse(JSON.stringify(w.value)).map((t) => ({
+        name: t.name,
+        value: t.series[a] === 0 ? 0 : t.series[a] || null,
+        proportion: t.proportions[a] || null,
+        color: t.color,
+        id: t.id
+      }));
+      Me("selectDatapoint", { datapoint: r, period: $.value[a] });
+    }
+    function dt(a) {
+      se.value = a, ue.value = !0;
+      const r = e.value.style.chart.tooltip.customFormat, t = JSON.parse(JSON.stringify(w.value)).map((c) => ({
+        name: c.name,
+        absoluteIndex: c.absoluteIndex,
+        value: c.series[a] === 0 ? 0 : (c.signedSeries[a] === -1 && c.series[a] >= 0 ? -c.series[a] : c.series[a]) || null,
+        proportion: c.proportions[a] || null,
+        color: c.color,
+        id: c.id
+      }));
+      Ae.value = {
+        datapoint: t,
+        seriesIndex: a,
+        config: e.value,
+        series: w.value
+      };
+      const l = t.map((c) => Math.abs(c.value)).reduce((c, u) => c + u, 0);
+      if (Ot(r) && Aa(() => r({
+        seriesIndex: a,
+        datapoint: t,
+        series: w.value,
+        config: e.value
+      })))
+        Ne.value = r({
+          seriesIndex: a,
+          datapoint: t,
+          series: w.value,
+          config: e.value
+        });
+      else {
+        const {
+          showValue: c,
+          showPercentage: u,
+          borderColor: S,
+          roundingValue: X,
+          roundingPercentage: G
+        } = e.value.style.chart.tooltip;
+        let J = "";
+        $.value[a] && $.value[a].text && e.value.style.chart.tooltip.showTimeLabel && (J += `<div style="width:100%;text-align:center;border-bottom:1px solid ${S};padding-bottom:6px;margin-bottom:3px;">${$.value[a].text}</div>`);
+        const R = [
+          c && u ? "(" : "",
+          c && u ? ")" : ""
+        ];
+        t.reverse().forEach((T) => {
+          J += `
+                <div style="display:flex;flex-direction:row;align-items:center;gap:4px">
+                    <svg viewBox="0 0 60 60" height="14" width="14"><rect rx="5" x="0" y="0" height="60" width="60" stroke="none" fill="${e.value.style.chart.bars.gradient.show ? `url(#gradient_${T.id})` : T.color}"/>${Xt.pattern ? `<rect rx="5" x="0" y="0" height="60" width="60" stroke="none" fill="url(#pattern_${V.value}_${T.absoluteIndex})"/>` : ""}</svg>
+                    ${T.name}${c || u ? ":" : ""} ${c ? j({
+            p: e.value.style.chart.bars.dataLabels.prefix,
+            v: T.value,
+            s: e.value.style.chart.bars.dataLabels.suffix,
+            r: X
+          }) : ""} ${R[0]}${u ? j({
+            v: isNaN(T.value / l) ? 0 : Math.abs(T.value) / l * 100,
+            // Negs are absed to show relative proportion to absolute total. It's opinionated.
+            s: "%",
+            r: G
+          }) : ""}${R[1]}
+                </div>
+            `;
+        }), Ne.value = `<div>${J}</div>`;
+      }
+    }
+    Pa({
+      timeLabelsEls: e.value.orientation === "vertical" ? Y : W,
+      timeLabels: $,
+      slicer: h,
+      configRef: e,
+      rotationPath: ["style", "chart", "grid", "x", "timeLabels", "rotation"],
+      autoRotatePath: ["style", "chart", "grid", "x", "timeLabels", "autoRotate"],
+      isAutoSize: !1
+    });
+    function yt(a) {
+      ce.value = a, Be.value += 1;
+    }
+    function gt() {
+      z.value.showTable = !z.value.showTable;
+    }
+    function bt() {
+      z.value.dataLabels.show = !z.value.dataLabels.show;
+    }
+    function ft() {
+      z.value.showTooltip = !z.value.showTooltip;
+    }
+    function aa() {
+      return w.value;
+    }
+    const mt = k(() => {
+      if (w.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
+      const a = w.value.map(({ name: t, color: l }) => ({
+        label: t,
+        color: l
+      })), r = [];
+      return $.value.forEach((t) => {
+        const l = [e.value.style.chart.grid.x.timeLabels.values[t.absoluteIndex] ? t.text : i + 1];
+        D.value.forEach((c) => {
+          l.push(Number((c.series[t.absoluteIndex] || 0).toFixed(e.value.table.td.roundingValue)));
+        }), r.push(l);
+      }), { head: a, body: r };
+    });
+    function pt(a = null) {
+      const r = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], t = ["", ...mt.value.head.map((S) => S.label)], l = mt.value.body, c = r.concat([t]).concat(l), u = Ta(c);
+      a ? a(u) : Ma({ csvContent: u, title: e.value.style.chart.title.text || "vue-ui-stackbar" });
+    }
+    const pe = k(() => {
+      const a = [""].concat(w.value.map((c) => c.name)).concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>');
+      let r = [];
+      for (let c = 0; c < F.value; c += 1) {
+        const u = w.value.map((S) => S.series[c] ?? 0).reduce((S, X) => S + X, 0);
+        r.push([e.value.style.chart.grid.x.timeLabels.values.slice(h.value.start, h.value.end)[c] ? $.value[c].text : c + 1].concat(w.value.map((S) => (S.series[c] ?? 0).toFixed(e.value.table.td.roundingValue))).concat((u ?? 0).toFixed(e.value.table.td.roundingValue)));
+      }
+      const t = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      }, l = [e.value.table.columnNames.period].concat(w.value.map((c) => c.name)).concat(e.value.table.columnNames.total);
+      return { head: a, body: r.slice(0, h.value.end - h.value.start), config: t, colNames: l };
+    });
+    function la(a, r) {
+      if (Me("selectLegend", w.value.find((t) => t.absoluteIndex === a)), _.value.includes(r.id))
+        _.value = _.value.filter((t) => t !== r.id);
+      else {
+        if (_.value.length === D.value.length - 1) return;
+        _.value.push(r.id);
+      }
+    }
+    const xt = k(() => D.value.map((a, r) => ({
+      ...a,
+      shape: "square"
+    })).map((a) => ({
+      ...a,
+      opacity: _.value.includes(a.id) ? 0.5 : 1,
+      segregate: () => la(a.absoluteIndex, a),
+      isSegregated: _.value.includes(a.id)
+    }))), ra = k(() => ({
+      cy: "stackbar-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" : ""
+    })), xe = b(!1);
+    function De() {
+      xe.value = !xe.value;
+    }
+    function ke(a, r) {
+      const t = JSON.parse(JSON.stringify(w.value)).map((l) => ({
+        name: l.name,
+        value: l.series[r] === 0 ? 0 : (l.signedSeries[r] === -1 && l.series[r] >= 0 ? -l.series[r] : l.series[r]) || null,
+        proportion: l.proportions[r] || null,
+        color: l.color,
+        id: l.id
+      }));
+      Me("selectTimeLabel", {
+        datapoint: t,
+        absoluteIndex: a.absoluteIndex,
+        label: a.text
+      });
+    }
+    const sa = k(() => Math.max(...w.value.flatMap((a) => a.series)));
+    function kt(a, r) {
+      return e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? tt.value ? r * 100 >= e.value.style.chart.bars.dataLabels.hideUnderPercentage : e.value.style.chart.bars.dataLabels.hideEmptyPercentages ? r > 0 : !0 : tt.value ? (et.value && Ve.value && console.warn("Vue Data UI - VueUiStackbar - You cannot set both dataLabels.hideUnderPercentage and dataLabels.hideUnderValue. Note that dataLabels.hideUnderPercentage takes precedence in this case."), a > sa.value * e.value.style.chart.bars.dataLabels.hideUnderPercentage / 100) : et.value ? Math.abs(a) >= e.value.style.chart.bars.dataLabels.hideUnderValue : e.value.style.chart.bars.dataLabels.hideEmptyValues ? a !== 0 : !0;
+    }
+    async function oa({ scale: a = 2 } = {}) {
+      if (!P.value) return;
+      const { width: r, height: t } = P.value.getBoundingClientRect(), l = r / t, { imageUri: c, base64: u } = await Ha({ domElement: P.value, base64: !0, img: !0, scale: a });
+      return {
+        imageUri: c,
+        base64: u,
+        title: e.value.style.chart.title.text,
+        width: r,
+        height: t,
+        aspectRatio: l
+      };
+    }
+    return Vt({
+      getData: aa,
+      getImage: oa,
+      generatePdf: rt,
+      generateCsv: pt,
+      generateImage: st,
+      toggleTable: gt,
+      toggleLabels: bt,
+      toggleTooltip: ft,
+      toggleAnnotator: De,
+      toggleFullscreen: yt
+    }), (a, r) => (s(), o("div", {
+      id: `stackbar_${V.value}`,
+      ref_key: "stackbarChart",
+      ref: P,
+      class: le({ "vue-ui-stackbar": !0, "vue-data-ui-wrapper-fullscreen": ce.value }),
+      style: Z(`background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`),
+      onMouseenter: r[6] || (r[6] = () => v(Ke)(!0)),
+      onMouseleave: r[7] || (r[7] = () => v(Ke)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (s(), K(v(Ht), {
+        key: 0,
+        svgRef: v(je),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: xe.value,
+        onClose: De
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
+      L(a.$slots, "userConfig", {}, void 0, !0),
+      e.value.style.chart.title.text ? (s(), o("div", {
+        key: 1,
+        ref_key: "chartTitle",
+        ref: We,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (s(), K(Da, {
+          key: `title_${qe.value}`,
+          config: {
+            title: {
+              cy: "stackbar-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "stackbar-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : y("", !0),
+      e.value.userOptions.show && ne.value && (v(Qe) || v(Oe)) ? (s(), K(v(Wt), {
+        ref: "details",
+        key: `user_option_${Be.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: v(at),
+        isImaging: v(lt),
+        uid: V.value,
+        hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasLabel: e.value.userOptions.buttons.labels,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: ce.value,
+        chartElement: P.value,
+        position: e.value.userOptions.position,
+        isTooltip: z.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: xe.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: yt,
+        onGeneratePdf: v(rt),
+        onGenerateCsv: pt,
+        onGenerateImage: v(st),
+        onToggleTable: gt,
+        onToggleLabels: bt,
+        onToggleTooltip: ft,
+        onToggleAnnotator: De,
+        style: Z({
+          visibility: v(Qe) ? v(Oe) ? "visible" : "hidden" : "visible"
+        })
+      }, $t({ _: 2 }, [
+        a.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: C(({ isOpen: t, color: l }) => [
+            L(a.$slots, "menuIcon", U(H({ isOpen: t, color: l })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        a.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: C(() => [
+            L(a.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        a.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: C(() => [
+            L(a.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        a.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: C(() => [
+            L(a.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        a.$slots.optionImg ? {
+          name: "optionImg",
+          fn: C(() => [
+            L(a.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        a.$slots.optionTable ? {
+          name: "optionTable",
+          fn: C(() => [
+            L(a.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        a.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: C(() => [
+            L(a.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        a.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: C(({ toggleFullscreen: t, isFullscreen: l }) => [
+            L(a.$slots, "optionFullscreen", U(H({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        a.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: C(({ toggleAnnotator: t, isAnnotator: l }) => [
+            L(a.$slots, "optionAnnotator", U(H({ toggleAnnotator: t, isAnnotator: l })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
+      (s(), o("svg", {
+        ref_key: "svgRef",
+        ref: je,
+        xmlns: v(Ca),
+        viewBox: `0 0 ${n.value.chartWidth <= 0 ? 10 : n.value.chartWidth} ${n.value.chartHeight <= 0 ? 10 : n.value.chartHeight}`,
+        class: le({ "vue-data-ui-loading": v(he) }),
+        style: Z(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        ze(v(Ut)),
+        a.$slots["chart-background"] ? (s(), o("foreignObject", {
+          key: 0,
+          x: n.value.left,
+          y: n.value.top,
+          width: n.value.width <= 0 ? 10 : n.value.width,
+          height: n.value.height <= 0 ? 10 : n.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          L(a.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Ja)) : y("", !0),
+        e.value.style.chart.bars.gradient.show ? (s(), o("defs", qa, [
+          (s(!0), o(g, null, m(w.value, (t, l) => (s(), o("linearGradient", {
+            id: `gradient_${t.id}`,
+            x1: "0%",
+            y1: "0%",
+            x2: "0%",
+            y2: "100%"
+          }, [
+            Q("stop", {
+              offset: "0%",
+              "stop-color": t.color
+            }, null, 8, Ka),
+            Q("stop", {
+              offset: "61.8%",
+              "stop-color": v(Sa)(t.color, e.value.style.chart.bars.gradient.intensity / 100)
+            }, null, 8, Qa),
+            Q("stop", {
+              offset: "100%",
+              "stop-color": t.color
+            }, null, 8, ja)
+          ], 8, Za))), 256))
+        ])) : y("", !0),
+        e.value.style.chart.grid.x.showHorizontalLines && e.value.orientation === "vertical" ? (s(!0), o(g, { key: 2 }, m(I.value, (t, l) => (s(), o("line", {
+          x1: n.value.left,
+          x2: n.value.right,
+          y1: t.y,
+          y2: t.y,
+          stroke: e.value.style.chart.grid.x.linesColor,
+          "stroke-width": e.value.style.chart.grid.x.linesThickness,
+          "stroke-dasharray": e.value.style.chart.grid.x.linesStrokeDasharray,
+          "stroke-linecap": "round"
+        }, null, 8, el))), 256)) : y("", !0),
+        e.value.style.chart.grid.x.showHorizontalLines && e.value.orientation === "horizontal" ? (s(!0), o(g, { key: 3 }, m(h.value.end - h.value.start + 1, (t, l) => (s(), o("line", {
+          x1: n.value.left,
+          x2: n.value.right,
+          y1: n.value.top + d.value * l,
+          y2: n.value.top + d.value * l,
+          stroke: e.value.style.chart.grid.x.linesColor,
+          "stroke-width": e.value.style.chart.grid.x.linesThickness,
+          "stroke-dasharray": e.value.style.chart.grid.x.linesStrokeDasharray,
+          "stroke-linecap": "round"
+        }, null, 8, tl))), 256)) : y("", !0),
+        e.value.style.chart.grid.y.showVerticalLines && e.value.orientation === "vertical" ? (s(!0), o(g, { key: 4 }, m(h.value.end - h.value.start + 1, (t, l) => (s(), o("line", {
+          x1: n.value.left + d.value * l,
+          x2: n.value.left + d.value * l,
+          y1: n.value.top,
+          y2: n.value.bottom,
+          stroke: e.value.style.chart.grid.y.linesColor,
+          "stroke-width": e.value.style.chart.grid.y.linesThickness,
+          "stroke-dasharray": e.value.style.chart.grid.y.linesStrokeDasharray,
+          "stroke-linecap": "round"
+        }, null, 8, al))), 256)) : y("", !0),
+        e.value.style.chart.grid.y.showVerticalLines && e.value.orientation === "horizontal" ? (s(!0), o(g, { key: 5 }, m(I.value, (t, l) => (s(), o("line", {
+          x1: t.horizontal_x,
+          x2: t.horizontal_x,
+          y1: n.value.top,
+          y2: n.value.bottom,
+          stroke: e.value.style.chart.grid.y.linesColor,
+          "stroke-width": e.value.style.chart.grid.y.linesThickness,
+          "stroke-dasharray": e.value.style.chart.grid.y.linesStrokeDasharray,
+          "stroke-linecap": "round"
+        }, null, 8, ll))), 256)) : y("", !0),
+        (s(!0), o(g, null, m(w.value, (t, l) => (s(), o("g", null, [
+          a.$slots.pattern ? (s(), o("defs", rl, [
+            L(a.$slots, "pattern", Ue({ ref_for: !0 }, { seriesIndex: t.absoluteIndex, patternId: `pattern_${V.value}_${t.absoluteIndex}` }), void 0, !0)
+          ])) : y("", !0),
+          e.value.orientation === "vertical" ? (s(), o(g, { key: 1 }, [
+            (s(!0), o(g, null, m(t.x, (c, u) => (s(), o("rect", {
+              x: c,
+              y: t.y[u] < 0 ? 0 : t.y[u],
+              height: t.height[u] < 0 ? 1e-4 : t.height[u] || 0,
+              rx: e.value.style.chart.bars.borderRadius > t.height[u] / 2 ? (t.height[u] < 0 ? 0 : t.height[u]) / 2 : e.value.style.chart.bars.borderRadius,
+              width: d.value * (1 - e.value.style.chart.bars.gapRatio / 2),
+              fill: e.value.style.chart.bars.gradient.show ? `url(#gradient_${t.id})` : t.color,
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": e.value.style.chart.bars.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: le({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": B.value })
+            }, null, 10, sl))), 256)),
+            a.$slots.pattern ? (s(), o("g", ol, [
+              (s(!0), o(g, null, m(t.x, (c, u) => (s(), o("rect", {
+                x: c,
+                y: t.y[u] < 0 ? 0 : t.y[u],
+                height: t.height[u] < 0 ? 1e-4 : t.height[u] || 0,
+                rx: e.value.style.chart.bars.borderRadius > t.height[u] / 2 ? (t.height[u] < 0 ? 0 : t.height[u]) / 2 : e.value.style.chart.bars.borderRadius,
+                width: d.value * (1 - e.value.style.chart.bars.gapRatio / 2),
+                fill: `url(#pattern_${V.value}_${t.absoluteIndex})`,
+                stroke: e.value.style.chart.backgroundColor,
+                "stroke-width": e.value.style.chart.bars.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                class: le({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": B.value })
+              }, null, 10, il))), 256))
+            ])) : y("", !0)
+          ], 64)) : (s(), o(g, { key: 2 }, [
+            (s(!0), o(g, null, m(t.horizontal_x, (c, u) => (s(), o("rect", {
+              x: v(_e)(c, n.value.left),
+              y: t.horizontal_y[u] < 0 ? 0 : t.horizontal_y[u],
+              width: v(_e)(t.horizontal_width[u] < 0 ? 1e-4 : t.horizontal_width[u]),
+              rx: e.value.style.chart.bars.borderRadius > t.height[u] / 2 ? (t.height[u] < 0 ? 0 : t.height[u]) / 2 : e.value.style.chart.bars.borderRadius,
+              height: d.value * (1 - e.value.style.chart.bars.gapRatio / 2),
+              fill: e.value.style.chart.bars.gradient.show ? `url(#gradient_${t.id})` : t.color,
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": e.value.style.chart.bars.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: le({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": B.value })
+            }, null, 10, nl))), 256)),
+            a.$slots.pattern ? (s(), o("g", ul, [
+              (s(!0), o(g, null, m(t.horizontal_x, (c, u) => (s(), o("rect", {
+                x: v(_e)(c, n.value.left),
+                y: t.horizontal_y[u] < 0 ? 0 : t.horizontal_y[u],
+                width: v(_e)(t.horizontal_width[u] < 0 ? 1e-4 : t.horizontal_width[u]),
+                rx: e.value.style.chart.bars.borderRadius > t.height[u] / 2 ? (t.height[u] < 0 ? 0 : t.height[u]) / 2 : e.value.style.chart.bars.borderRadius,
+                height: d.value * (1 - e.value.style.chart.bars.gapRatio / 2),
+                fill: `url(#pattern_${V.value}_${t.absoluteIndex})`,
+                stroke: e.value.style.chart.backgroundColor,
+                "stroke-width": e.value.style.chart.bars.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                class: le({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": B.value })
+              }, null, 10, cl))), 256))
+            ])) : y("", !0)
+          ], 64))
+        ]))), 256)),
+        e.value.style.chart.grid.x.showAxis ? (s(), o("line", {
+          key: 6,
+          x1: n.value.left,
+          x2: n.value.right,
+          y1: n.value.bottom,
+          y2: n.value.bottom,
+          stroke: e.value.style.chart.grid.x.axisColor,
+          "stroke-width": e.value.style.chart.grid.x.axisThickness,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, hl)) : y("", !0),
+        e.value.style.chart.grid.y.showAxis && !e.value.style.chart.bars.distributed ? (s(), o("line", {
+          key: 7,
+          x1: n.value.left,
+          x2: n.value.left,
+          y1: n.value.top,
+          y2: n.value.bottom,
+          stroke: e.value.style.chart.grid.y.axisColor,
+          "stroke-width": e.value.style.chart.grid.y.axisThickness,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, vl)) : y("", !0),
+        e.value.style.chart.grid.x.axisName.show && e.value.style.chart.grid.x.axisName.text ? (s(), o("text", {
+          key: 8,
+          ref_key: "xAxisLabel",
+          ref: Ie,
+          x: n.value.left + n.value.width / 2,
+          y: n.value.chartHeight - 3,
+          "font-size": e.value.style.chart.grid.x.axisName.fontSize,
+          fill: e.value.style.chart.grid.x.axisName.color,
+          "font-weight": e.value.style.chart.grid.x.axisName.bold ? "bold" : "normal",
+          "text-anchor": "middle"
+        }, M(e.value.style.chart.grid.x.axisName.text), 9, dl)) : y("", !0),
+        e.value.style.chart.grid.y.axisName.show && e.value.style.chart.grid.y.axisName.text ? (s(), o("text", {
+          key: 9,
+          ref_key: "yAxisLabel",
+          ref: Re,
+          transform: `translate(${e.value.style.chart.grid.y.axisName.fontSize}, ${n.value.top + n.value.height / 2}) rotate(-90)`,
+          "font-size": e.value.style.chart.grid.y.axisName.fontSize,
+          fill: e.value.style.chart.grid.y.axisName.color,
+          "font-weight": e.value.style.chart.grid.y.axisName.bold ? "bold" : "normal",
+          "text-anchor": "middle"
+        }, M(e.value.style.chart.grid.y.axisName.text), 9, yl)) : y("", !0),
+        z.value.dataLabels.show && e.value.orientation === "vertical" ? (s(), o(g, { key: 10 }, [
+          (s(!0), o(g, null, m(w.value, (t, l) => (s(), o("g", null, [
+            (s(!0), o(g, null, m(t.x, (c, u) => (s(), o(g, null, [
+              kt(t.series[u], t.proportions[u]) ? (s(), o("text", {
+                key: 0,
+                x: c + d.value * (1 - e.value.style.chart.bars.gapRatio / 2) / 2,
+                y: t.y[u] + t.height[u] / 2 + e.value.style.chart.bars.dataLabels.fontSize / 3,
+                "font-size": e.value.style.chart.bars.dataLabels.fontSize,
+                fill: e.value.style.chart.bars.dataLabels.adaptColorToBackground ? v(Rt)(t.color) : e.value.style.chart.bars.dataLabels.color,
+                "font-weight": e.value.style.chart.bars.dataLabels.bold ? "bold" : "normal",
+                "text-anchor": "middle"
+              }, M(e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? ht(t.proportions[u] * 100, t, l, u) : me(t.series[u], t, l, u, t.signedSeries[u])), 9, gl)) : y("", !0)
+            ], 64))), 256))
+          ]))), 256)),
+          e.value.style.chart.bars.totalValues.show && w.value.length > 1 ? (s(), o("g", {
+            key: 0,
+            ref_key: "sumTop",
+            ref: qt
+          }, [
+            (s(!0), o(g, null, m(ct.value, (t, l) => (s(), o(g, null, [
+              !e.value.style.chart.bars.dataLabels.hideEmptyValues || t.value !== 0 ? (s(), o("text", {
+                key: 0,
+                x: n.value.left + d.value * l + d.value / 2,
+                y: e.value.style.chart.bars.totalValues.fontSize,
+                "text-anchor": "middle",
+                "font-size": e.value.style.chart.bars.totalValues.fontSize,
+                "font-weight": e.value.style.chart.bars.totalValues.bold ? "bold" : "normal",
+                fill: e.value.style.chart.bars.totalValues.color
+              }, M(me(t.value, t, l, t.sign)), 9, bl)) : y("", !0)
+            ], 64))), 256))
+          ], 512)) : y("", !0)
+        ], 64)) : y("", !0),
+        z.value.dataLabels.show && e.value.orientation === "horizontal" ? (s(), o(g, { key: 11 }, [
+          (s(!0), o(g, null, m(w.value, (t, l) => (s(), o("g", null, [
+            (s(!0), o(g, null, m(t.horizontal_x, (c, u) => (s(), o(g, null, [
+              kt(t.series[u], t.proportions[u]) ? (s(), o("text", {
+                key: 0,
+                x: c + (t.horizontal_width[u] < 0 ? 1e-4 : t.horizontal_width[u]) / 2,
+                y: t.horizontal_y[u] + d.value * (1 - e.value.style.chart.bars.gapRatio / 2) / 2 + e.value.style.chart.bars.dataLabels.fontSize / 3,
+                "font-size": e.value.style.chart.bars.dataLabels.fontSize,
+                fill: e.value.style.chart.bars.dataLabels.adaptColorToBackground ? v(Rt)(t.color) : e.value.style.chart.bars.dataLabels.color,
+                "font-weight": e.value.style.chart.bars.dataLabels.bold ? "bold" : "normal",
+                "text-anchor": "middle"
+              }, M(e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? ht(t.proportions[u] * 100, t, l, u) : me(t.series[u], t, l, u, t.signedSeries[u])), 9, fl)) : y("", !0)
+            ], 64))), 256))
+          ]))), 256)),
+          e.value.style.chart.bars.totalValues.show && w.value.length > 1 ? (s(), o("g", {
+            key: 0,
+            ref_key: "sumRight",
+            ref: Ze
+          }, [
+            (s(!0), o(g, null, m(ct.value, (t, l) => (s(), o(g, null, [
+              !e.value.style.chart.bars.dataLabels.hideEmptyValues || t.value !== 0 ? (s(), o("text", {
+                key: 0,
+                x: n.value.right + e.value.style.chart.bars.totalValues.fontSize / 3,
+                y: n.value.top + d.value * l + d.value / 2,
+                "text-anchor": "start",
+                "font-size": e.value.style.chart.bars.totalValues.fontSize,
+                "font-weight": e.value.style.chart.bars.totalValues.bold ? "bold" : "normal",
+                fill: e.value.style.chart.bars.totalValues.color
+              }, M(me(t.value, t, l, t.sign)), 9, ml)) : y("", !0)
+            ], 64))), 256))
+          ], 512)) : y("", !0)
+        ], 64)) : y("", !0),
+        e.value.style.chart.grid.y.axisLabels.show && !e.value.style.chart.bars.distributed && e.value.orientation === "vertical" ? (s(), o("g", {
+          key: 12,
+          ref_key: "scaleLabels",
+          ref: W
+        }, [
+          (s(!0), o(g, null, m(I.value, (t, l) => (s(), o("line", {
+            x1: n.value.left,
+            x2: n.value.left - 6,
+            y1: t.y,
+            y2: t.y,
+            stroke: e.value.style.chart.grid.x.axisColor,
+            "stroke-width": 1
+          }, null, 8, pl))), 256)),
+          (s(!0), o(g, null, m(I.value, (t, l) => (s(), o("text", {
+            x: t.x,
+            y: t.y + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
+            "font-size": e.value.style.chart.grid.y.axisLabels.fontSize,
+            "font-weight": e.value.style.chart.grid.y.axisLabels.bold ? "bold" : "normal",
+            fill: e.value.style.chart.grid.y.axisLabels.color,
+            "text-anchor": "end"
+          }, M(v($e)(
+            e.value.style.chart.grid.y.axisLabels.formatter,
+            t.value,
+            v(j)({
+              p: e.value.style.chart.bars.dataLabels.prefix,
+              v: t.value,
+              s: e.value.style.chart.bars.dataLabels.suffix,
+              r: e.value.style.chart.grid.y.axisLabels.rounding
+            }),
+            { datapoint: t }
+          )), 9, xl))), 256))
+        ], 512)) : y("", !0),
+        e.value.style.chart.grid.y.axisLabels.show && !e.value.style.chart.bars.distributed && e.value.orientation === "horizontal" ? (s(), o("g", {
+          key: 13,
+          ref_key: "scaleLabels",
+          ref: W
+        }, [
+          (s(!0), o(g, null, m(I.value, (t, l) => (s(), o("line", {
+            x1: t.horizontal_x,
+            x2: t.horizontal_x,
+            y1: n.value.bottom,
+            y2: n.value.bottom + 6,
+            stroke: e.value.style.chart.grid.x.axisColor,
+            "stroke-width": 1,
+            "stroke-linecap": "round"
+          }, null, 8, kl))), 256)),
+          (s(!0), o(g, null, m(I.value, (t, l) => (s(), o("text", {
+            class: "vue-data-ui-time-label",
+            "font-size": e.value.style.chart.grid.x.timeLabels.fontSize,
+            "font-weight": e.value.style.chart.grid.y.axisLabels.bold ? "bold" : "normal",
+            fill: e.value.style.chart.grid.y.axisLabels.color,
+            "text-anchor": e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
+            transform: `translate(${t.horizontal_x}, ${n.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}), rotate(${e.value.style.chart.grid.x.timeLabels.rotation})`
+          }, M(v($e)(
+            e.value.style.chart.grid.y.axisLabels.formatter,
+            t.value,
+            v(j)({
+              p: e.value.style.chart.bars.dataLabels.prefix,
+              v: t.value,
+              s: e.value.style.chart.bars.dataLabels.suffix,
+              r: e.value.style.chart.grid.y.axisLabels.rounding
+            }),
+            { datapoint: t }
+          )), 9, wl))), 256))
+        ], 512)) : y("", !0),
+        e.value.style.chart.grid.x.timeLabels.show && e.value.orientation === "vertical" ? (s(), o("g", {
+          key: 14,
+          ref_key: "timeLabelsEls",
+          ref: Y
+        }, [
+          a.$slots["time-label"] ? (s(), o("g", Ll, [
+            (s(!0), o(g, null, m($.value, (t, l) => (s(), o("g", null, [
+              L(a.$slots, "time-label", Ue({ ref_for: !0 }, {
+                x: n.value.left + d.value * l + d.value / 2,
+                y: n.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY,
+                fontSize: e.value.style.chart.grid.x.timeLabels.fontSize,
+                fill: e.value.style.chart.grid.x.timeLabels.color,
+                transform: `translate(${n.value.left + d.value * l + d.value / 2}, ${n.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}), rotate(${e.value.style.chart.grid.x.timeLabels.rotation})`,
+                absoluteIndex: t.absoluteIndex,
+                content: t.text,
+                textAnchor: e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
+                show: !0
+              }), void 0, !0)
+            ]))), 256))
+          ])) : (s(), o("g", zl, [
+            (s(!0), o(g, null, m($.value, (t, l) => (s(), o("g", null, [
+              String(t.text).includes(`
+`) ? (s(), o("text", {
+                key: l + "-multi",
+                "text-anchor": e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
+                "font-size": e.value.style.chart.grid.x.timeLabels.fontSize,
+                fill: e.value.style.chart.grid.x.timeLabels.color,
+                transform: `
+                                    translate(
+                                    ${n.value.left + d.value * l + d.value / 2},
+                                    ${n.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}
+                                    ),
+                                    rotate(${e.value.style.chart.grid.x.timeLabels.rotation})
+                                `,
+                style: { cursor: "pointer" },
+                innerHTML: v(_a)({
+                  content: String(t.text),
+                  fontSize: e.value.style.chart.grid.x.timeLabels.fontSize,
+                  fill: e.value.style.chart.grid.x.timeLabels.color,
+                  x: 0,
+                  y: 0
+                }),
+                onClick: () => ke(t, l)
+              }, null, 8, Sl)) : (s(), o("text", {
+                class: "vue-data-ui-time-label",
+                key: l,
+                "text-anchor": e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
+                "font-size": e.value.style.chart.grid.x.timeLabels.fontSize,
+                "font-weight": e.value.style.chart.grid.x.timeLabels.bold ? "bold" : "normal",
+                fill: e.value.style.chart.grid.x.timeLabels.color,
+                transform: `translate(${n.value.left + d.value * l + d.value / 2}, ${n.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}), rotate(${e.value.style.chart.grid.x.timeLabels.rotation})`,
+                style: { cursor: "pointer" },
+                onClick: () => ke(t, l)
+              }, M(t.text), 9, Cl))
+            ]))), 256))
+          ]))
+        ], 512)) : y("", !0),
+        e.value.style.chart.grid.x.timeLabels.show && e.value.orientation === "horizontal" ? (s(), o("g", {
+          key: 15,
+          ref_key: "timeLabelsEls",
+          ref: Y
+        }, [
+          a.$slots["time-label"] ? (s(), o("g", _l, [
+            (s(!0), o(g, null, m($.value, (t, l) => (s(), o("g", null, [
+              L(a.$slots, "time-label", Ue({ ref_for: !0 }, {
+                x: n.value.left - 8,
+                y: n.value.top + d.value * l + d.value / 2 + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
+                fontSize: e.value.style.chart.grid.x.timeLabels.fontSize,
+                fill: e.value.style.chart.grid.x.timeLabels.color,
+                transform: null,
+                absoluteIndex: t.absoluteIndex,
+                content: t.text,
+                textAnchor: "end",
+                show: !0
+              }), void 0, !0)
+            ]))), 256))
+          ])) : (s(), o("g", $l, [
+            (s(!0), o(g, null, m($.value, (t, l) => (s(), o("g", null, [
+              String(t.text).includes(`
+`) ? (s(), o("text", {
+                key: 1,
+                "text-anchor": "end",
+                "font-size": e.value.style.chart.grid.y.axisLabels.fontSize,
+                "font-weight": e.value.style.chart.grid.y.axisLabels.bold ? "bold" : "normal",
+                fill: e.value.style.chart.grid.y.axisLabels.color,
+                x: n.value.left - 8,
+                y: n.value.top + d.value * l + d.value / 2 + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
+                style: { cursor: "pointer" },
+                onClick: () => ke(t, l),
+                innerHTML: v($a)({
+                  content: String(t.text),
+                  fontSize: e.value.style.chart.grid.y.axisLabels.fontSize,
+                  fill: e.value.style.chart.grid.y.axisLabels.color,
+                  x: n.value.left - 8,
+                  y: 0
+                })
+              }, null, 8, Ml)) : (s(), o("text", {
+                key: 0,
+                "text-anchor": "end",
+                "font-size": e.value.style.chart.grid.y.axisLabels.fontSize,
+                "font-weight": e.value.style.chart.grid.y.axisLabels.bold ? "bold" : "normal",
+                fill: e.value.style.chart.grid.y.axisLabels.color,
+                x: n.value.left - 8,
+                y: n.value.top + d.value * l + d.value / 2 + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
+                style: {
+                  cursor: "pointer"
+                },
+                onClick: () => ke(t, l)
+              }, M(t.text), 9, Tl))
+            ]))), 256))
+          ]))
+        ], 512)) : y("", !0),
+        z.value.showTooltip && e.value.orientation === "vertical" ? (s(!0), o(g, { key: 16 }, m(h.value.end - h.value.start, (t, l) => (s(), o("rect", {
+          x: n.value.left + l * d.value,
+          y: n.value.top,
+          width: d.value,
+          height: n.value.height < 0 ? 0 : n.value.height,
+          onClick: (c) => vt(l),
+          onMouseenter: (c) => dt(l),
+          onMouseleave: r[0] || (r[0] = (c) => {
+            se.value = null, ue.value = !1;
+          }),
+          fill: l === se.value ? e.value.style.chart.highlighter.color : "transparent",
+          style: Z({ opacity: e.value.style.chart.highlighter.opacity / 100 })
+        }, null, 44, Al))), 256)) : y("", !0),
+        z.value.showTooltip && e.value.orientation === "horizontal" ? (s(!0), o(g, { key: 17 }, m(h.value.end - h.value.start, (t, l) => (s(), o("rect", {
+          x: n.value.left,
+          y: n.value.top + l * d.value,
+          width: n.value.width < 0 ? 0 : n.value.width,
+          height: d.value,
+          onClick: (c) => vt(l),
+          onMouseenter: (c) => dt(l),
+          onMouseleave: r[1] || (r[1] = (c) => {
+            se.value = null, ue.value = !1;
+          }),
+          fill: l === se.value ? e.value.style.chart.highlighter.color : "transparent",
+          style: Z({ opacity: e.value.style.chart.highlighter.opacity / 100 })
+        }, null, 44, Nl))), 256)) : y("", !0),
+        L(a.$slots, "svg", U(H({ ...n.value })), void 0, !0)
+      ], 14, Ga)),
+      a.$slots.watermark ? (s(), o("div", Il, [
+        L(a.$slots, "watermark", U(H({ isPrinting: v(at) || v(lt) })), void 0, !0)
+      ])) : y("", !0),
+      Q("div", {
+        ref_key: "chartSlicer",
+        ref: Xe,
+        style: Z(`width:100%;background:${e.value.style.chart.backgroundColor}`),
+        "data-dom-to-png-ignore": ""
+      }, [
+        e.value.style.chart.zoom.show && F.value > 1 ? (s(), K(Ea, {
+          ref_key: "slicerComponent",
+          ref: ee,
+          key: `slicer_${Je.value}`,
+          background: e.value.style.chart.zoom.color,
+          borderColor: e.value.style.chart.backgroundColor,
+          fontSize: e.value.style.chart.zoom.fontSize,
+          useResetSlot: e.value.style.chart.zoom.useResetSlot,
+          labelLeft: e.value.style.chart.grid.x.timeLabels.values[h.value.start] ? $.value[0].text : "",
+          labelRight: e.value.style.chart.grid.x.timeLabels.values[h.value.end - 1] ? $.value.at(-1).text : "",
+          textColor: e.value.style.chart.color,
+          inputColor: e.value.style.chart.zoom.color,
+          selectColor: e.value.style.chart.zoom.highlightColor,
+          max: Math.max(...Te.dataset.map((t) => t.series.length)),
+          min: 0,
+          valueStart: h.value.start,
+          valueEnd: h.value.end,
+          start: h.value.start,
+          "onUpdate:start": r[2] || (r[2] = (t) => h.value.start = t),
+          end: h.value.end,
+          "onUpdate:end": r[3] || (r[3] = (t) => h.value.end = t),
+          refreshStartPoint: e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex : 0,
+          refreshEndPoint: e.value.style.chart.zoom.endIndex !== null ? e.value.style.chart.zoom.endIndex + 1 : Math.max(...Te.dataset.map((t) => t.series.length)),
+          enableRangeHandles: e.value.style.chart.zoom.enableRangeHandles,
+          enableSelectionDrag: e.value.style.chart.zoom.enableSelectionDrag,
+          onReset: nt
+        }, {
+          "reset-action": C(({ reset: t }) => [
+            L(a.$slots, "reset-action", U(H({ reset: t })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag"])) : y("", !0)
+      ], 4),
+      ze(v(Bt), {
+        show: z.value.showTooltip && ue.value,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: P.value,
+        content: Ne.value,
+        isFullscreen: ce.value,
+        isCustom: v(Ot)(e.value.style.chart.tooltip.customFormat)
+      }, {
+        "tooltip-before": C(() => [
+          L(a.$slots, "tooltip-before", U(H({ ...Ae.value })), void 0, !0)
+        ]),
+        "tooltip-after": C(() => [
+          L(a.$slots, "tooltip-after", U(H({ ...Ae.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
+      Q("div", {
+        ref_key: "chartLegend",
+        ref: Ye
+      }, [
+        e.value.style.chart.legend.show && ne.value ? (s(), K(Va, {
+          key: 0,
+          legendSet: xt.value,
+          config: ra.value,
+          onClickMarker: r[4] || (r[4] = ({ legend: t }) => t.segregate())
+        }, $t({
+          item: C(({ legend: t }) => [
+            Q("div", {
+              onClick: (l) => t.segregate(),
+              style: Z(`opacity:${_.value.includes(t.id) ? 0.5 : 1}`)
+            }, M(t.name), 13, Rl)
+          ]),
+          _: 2
+        }, [
+          a.$slots.pattern ? {
+            name: "legend-pattern",
+            fn: C(({ legend: t, index: l }) => [
+              ze(Fa, {
+                shape: t.shape,
+                radius: 30,
+                stroke: "none",
+                plot: { x: 30, y: 30 },
+                fill: `url(#pattern_${V.value}_${l})`
+              }, null, 8, ["shape", "fill"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["legendSet", "config"])) : L(a.$slots, "legend", {
+          key: 1,
+          legend: xt.value
+        }, void 0, !0)
+      ], 512),
+      a.$slots.source ? (s(), o("div", {
+        key: 4,
+        ref_key: "source",
+        ref: Ge,
+        dir: "auto"
+      }, [
+        L(a.$slots, "source", {}, void 0, !0)
+      ], 512)) : y("", !0),
+      h.value.end - h.value.start < 200 ? (s(), K(v(Dt), {
+        key: 5,
+        hideDetails: "",
+        config: {
+          open: z.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: C(() => [
+          ze(v(Ft), {
+            colNames: pe.value.colNames,
+            head: pe.value.head,
+            body: pe.value.body,
+            config: pe.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: r[5] || (r[5] = (t) => z.value.showTable = !1)
+          }, {
+            th: C(({ th: t }) => [
+              Q("div", { innerHTML: t }, null, 8, Ol)
+            ]),
+            td: C(({ td: t }) => [
+              fa(M(isNaN(Number(t)) ? t : v(j)({
+                p: e.value.style.chart.bars.dataLabels.prefix,
+                v: t,
+                s: e.value.style.chart.bars.dataLabels.suffix,
+                r: e.value.table.td.roundingValue
+              })), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"])
+        ]),
+        _: 1
+      }, 8, ["config"])) : y("", !0),
+      v(he) ? (s(), K(Wa, { key: 6 })) : y("", !0)
+    ], 46, Xa));
+  }
+}, jl = /* @__PURE__ */ Ya(Pl, [["__scopeId", "data-v-4f72a346"]]);
+export {
+  jl as default
+};