vue-data-ui 3.3.3 → 3.4.1

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

@@ -0,0 +1,1695 @@
+import { defineAsyncComponent as J, useSlots as pl, computed as g, ref as d, onMounted as sa, toRefs as xl, watch as we, shallowRef as ra, onBeforeUnmount as ct, watchEffect as oa, nextTick as kl, createElementBlock as n, openBlock as r, normalizeStyle as se, normalizeClass as ue, createBlock as Z, createCommentVNode as b, renderSlot as _, createElementVNode as Q, createVNode as Le, unref as f, createSlots as vt, withCtx as M, normalizeProps as K, guardReactiveProps as j, Fragment as p, renderList as k, mergeProps as Se, toDisplayString as F, Teleport as wl, resolveDynamicComponent as Ll, createTextVNode as na } from "vue";
+import { u as Sl, a as ia } from "./useNestedProp-B7CiTRDS.js";
+import { c as ua, t as zl, b as Cl, p as Ee, O as ce, e as _l, o as ca, f as va, g as Ml, h as Tl, aj as ze, n as ha, m as da, v as $l, X as Al, S as Pl, r as Ve, J as ya, a as Ue, d as re, M as Nl, $ as Rl, G as ga, P as Ol, Q as Il, H as Fl } from "./lib-BcBZIm6u.js";
+import { t as ht, u as Dl } from "./useResponsive-DfdjqQps.js";
+import { u as El } from "./usePrinter-C1GiglOH.js";
+import { u as Vl, B as Ul } from "./BaseScanner-BgWxam9d.js";
+import { u as ba, a as Bl, l as Hl } from "./useTimeLabels-BGFjWgrv.js";
+import { u as Xl } from "./useSvgExport-DrjCWun4.js";
+import { u as Wl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Yl } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Gl } from "./useTimeLabelCollider-CIsgDrl9.js";
+import ql from "./img-CFY3JivG.js";
+import Jl from "./Title-CFmv95In.js";
+import { _ as Zl } from "./Shape-BhNvlGIN.js";
+import { t as Ql } from "./themes-Dw-dDudK.js";
+import Kl from "./Legend-C8u37J42.js";
+import { S as jl } from "./SlicerPreview-Cobmb_1S.js";
+import { _ as es } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ts = ["id"], as = ["id"], ls = ["xmlns", "viewBox"], ss = ["x", "y", "width", "height"], rs = { key: 1 }, os = ["id"], ns = ["stop-color"], is = ["stop-color"], us = ["stop-color"], cs = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], vs = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], hs = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ds = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ys = { key: 0 }, gs = ["x", "y", "height", "rx", "width", "fill", "stroke", "stroke-width"], bs = { key: 0 }, ms = ["x", "y", "height", "rx", "width", "fill", "stroke", "stroke-width"], fs = ["x", "y", "width", "rx", "height", "fill", "stroke", "stroke-width"], ps = { key: 0 }, xs = ["x", "y", "width", "rx", "height", "fill", "stroke", "stroke-width"], ks = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ws = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ls = ["x", "y", "font-size", "fill", "font-weight"], Ss = ["transform", "font-size", "fill", "font-weight"], zs = ["x", "y", "font-size", "fill", "font-weight"], Cs = ["x", "y", "font-size", "font-weight", "fill"], _s = ["x", "y", "font-size", "fill", "font-weight"], Ms = ["x", "y", "font-size", "font-weight", "fill"], Ts = ["x1", "x2", "y1", "y2", "stroke"], $s = ["x", "y", "font-size", "font-weight", "fill"], As = ["x1", "x2", "y1", "y2", "stroke"], Ps = ["font-size", "font-weight", "fill", "text-anchor", "transform"], Ns = { key: 0 }, Rs = { key: 1 }, Os = ["text-anchor", "font-size", "font-weight", "fill", "transform", "onClick"], Is = ["text-anchor", "font-size", "fill", "transform", "innerHTML", "onClick"], Fs = { key: 0 }, Ds = { key: 1 }, Es = ["font-size", "font-weight", "fill", "x", "y", "onClick"], Vs = ["font-size", "font-weight", "fill", "x", "y", "onClick", "innerHTML"], Us = ["x", "y", "width", "height", "onClick", "onMouseenter", "onMouseleave", "fill"], Bs = ["x", "y", "width", "height", "onClick", "onMouseenter", "onMouseleave", "fill"], Hs = ["data-start", "data-end"], Xs = {
+  key: 3,
+  class: "vue-data-ui-watermark"
+}, Ws = ["x", "y", "height", "width", "fill", "stroke"], Ys = ["id"], Gs = ["onClick"], qs = ["innerHTML"], Js = {
+  __name: "vue-ui-stackbar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    selectedXIndex: {
+      type: Number,
+      default: void 0
+    }
+  },
+  emits: ["selectDatapoint", "selectLegend", "selectTimeLabel", "selectX"],
+  setup(Be, { expose: ma, emit: fa }) {
+    const pa = J(() => import("./Tooltip-Cs4v8OnI.js")), xa = J(() => import("./BaseIcon-B5KaGWWC.js")), ka = J(() => import("./vue-ui-accordion-BKkTS12x.js")), wa = J(() => import("./DataTable-DOx3zgih.js")), La = J(() => import("./PenAndPaper-Dj2diYr0.js")), Sa = J(() => import("./UserOptions-C0YT60JN.js")), za = J(() => import("./PackageVersion-VpPtLYhK.js")), Ca = J(() => import("./BaseDraggableDialog-CbuLbfrc.js")), { vue_ui_stackbar: _a } = Sl(), Ma = pl(), x = Be, ve = fa, he = g({
+      get() {
+        return !!x.dataset && x.dataset.length;
+      },
+      set(a) {
+        return a;
+      }
+    }), X = d(null), D = d(ua()), He = d(!1), Xe = d(null), We = d(""), N = d([]), dt = d(0), yt = d(null), gt = d(null), de = d(null), bt = d(null), ye = d(!1), U = d(null), ee = d(!1), mt = d(0), Ta = d(0), $a = d(0), ft = d(!1), ge = d(null), Ye = d(null), Ge = d(null), qe = d(null), te = d(null), ae = d(null), Aa = d(null), pt = d(null), Je = d(null);
+    sa(() => {
+      ft.value = !0, tt();
+    });
+    const e = d(je()), { loading: be, FINAL_DATASET: Ze, manualLoading: Ce } = Vl({
+      ...xl(x),
+      FINAL_CONFIG: e,
+      prepareConfig: je,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Oe();
+        });
+      },
+      skeletonDataset: [
+        {
+          name: "",
+          series: [2, 3, 5, 8, 13, 21],
+          color: "#BABABA"
+        },
+        {
+          name: "",
+          series: [1, 2, 3, 5, 8, 13],
+          color: "#CACACA"
+        }
+      ],
+      skeletonConfig: zl({
+        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: Qe, setUserOptionsVisibility: xt, keepUserOptionState: kt } = Wl({ config: e.value }), { svgRef: Ke } = Yl({ config: e.value.style.chart.title });
+    function Pa() {
+      xt(!0);
+    }
+    function Na() {
+      xt(!1), ve("selectX", { seriesIndex: null, datapoint: null }), U.value = null;
+    }
+    function je() {
+      const a = ia({
+        userConfig: x.config,
+        defaultConfig: _a
+      });
+      let l = {};
+      return a.theme ? l = {
+        ...ia({
+          userConfig: Ql.vue_ui_stackbar[a.theme] || x.config,
+          defaultConfig: a
+        }),
+        customPalette: Cl[a.theme] || Ee
+      } : l = a, x.config && ce(x.config, "style.chart.grid.scale.scaleMin") ? l.style.chart.grid.scale.scaleMin = x.config.style.chart.grid.scale.scaleMin : l.style.chart.grid.scale.scaleMin = null, x.config && ce(x.config, "style.chart.grid.scale.scaleMax") ? l.style.chart.grid.scale.scaleMax = x.config.style.chart.grid.scale.scaleMax : l.style.chart.grid.scale.scaleMax = null, x.config && ce(x.config, "style.chart.zoom.startIndex") ? l.style.chart.zoom.startIndex = x.config.style.chart.zoom.startIndex : l.style.chart.zoom.startIndex = null, x.config && ce(x.config, "style.chart.zoom.endIndex") ? l.style.chart.zoom.endIndex = x.config.style.chart.zoom.endIndex : l.style.chart.zoom.endIndex = null, x.config && ce(x.config, "style.chart.bars.dataLabels.hideUnderValue") ? l.style.chart.bars.dataLabels.hideUnderValue = x.config.style.chart.bars.dataLabels.hideUnderValue : l.style.chart.bars.dataLabels.hideUnderValue = null, x.config && ce(x.config, "style.chart.bars.dataLabels.hideUnderPercentage") ? l.style.chart.bars.dataLabels.hideUnderPercentage = x.config.style.chart.bars.dataLabels.hideUnderPercentage : l.style.chart.bars.dataLabels.hideUnderPercentage = null, l;
+    }
+    const wt = g(() => e.value.style.chart.bars.dataLabels.hideUnderValue !== null), Lt = g(() => e.value.style.chart.bars.dataLabels.hideUnderPercentage !== null);
+    we(() => x.config, (a) => {
+      be.value || (e.value = je()), Qe.value = !e.value.userOptions.showOnChartHover, tt(), mt.value += 1, Ta.value += 1, $a.value += 1, T.value.dataLabels.show = e.value.style.chart.bars.dataLabels.show, T.value.showTable = e.value.table.show, T.value.showTooltip = e.value.style.chart.tooltip.show, Te();
+    }, { deep: !0 }), we(() => x.dataset, (a) => {
+      Array.isArray(a) && a.length > 0 && (Ce.value = !1), Pt();
+    }, { deep: !0 });
+    const T = d({
+      dataLabels: {
+        show: e.value.style.chart.bars.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    we(e, () => {
+      T.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: St, isImaging: zt, generatePdf: Ct, generateImage: _t } = El({
+      elementId: `stackbar_${D.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-stackbar",
+      options: e.value.userOptions.print
+    }), oe = d({
+      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
+      }
+    }), Ra = g(() => _l(e.value.customPalette)), G = ra(null), ne = ra(null), Mt = d(null);
+    sa(() => {
+      tt();
+    });
+    const et = g(() => !!e.value.debug);
+    function tt() {
+      if (ca(x.dataset) ? (va({
+        componentName: "VueUiStackbar",
+        type: "dataset",
+        debug: et.value
+      }), Ce.value = !0) : x.dataset.forEach((a, l) => {
+        Ml({
+          datasetObject: a,
+          requiredAttributes: ["name", "series"]
+        }).forEach((t) => {
+          he.value = !1, va({
+            componentName: "VueUiStackbar",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: l,
+            debug: et.value
+          }), Ce.value = !0;
+        });
+      }), ca(x.dataset) || (Ce.value = e.value.loading), setTimeout(() => {
+        ee.value = !0;
+      }, 10), e.value.responsive) {
+        const a = ht(() => {
+          ee.value = !1;
+          const { width: l, height: t } = Dl({
+            chart: X.value,
+            title: e.value.style.chart.title.text ? yt.value : null,
+            legend: e.value.style.chart.legend.show ? gt.value : null,
+            slicer: e.value.style.chart.zoom.show && A.value > 6 ? de.value.$el : null,
+            source: bt.value
+          });
+          requestAnimationFrame(() => {
+            oe.value.width = l, oe.value.height = t - 12, clearTimeout(Mt.value), Mt.value = setTimeout(() => {
+              ee.value = !0;
+            }, 10);
+          });
+        });
+        G.value && (ne.value && G.value.unobserve(ne.value), G.value.disconnect()), G.value = new ResizeObserver(a), ne.value = X.value.parentNode, G.value.observe(ne.value);
+      }
+      Oe();
+    }
+    ct(() => {
+      G.value && (ne.value && G.value.unobserve(ne.value), G.value.disconnect());
+    });
+    function Oa() {
+      let a = 0;
+      e.value.orientation === "vertical" && te.value && (a = Array.from(te.value.querySelectorAll("text")).reduce((s, c) => {
+        const o = c.getComputedTextLength();
+        return o > s ? o : s;
+      }, 0)), e.value.orientation === "horizontal" && ae.value && (a = Array.from(ae.value.querySelectorAll("text")).reduce((s, c) => {
+        const o = c.getComputedTextLength();
+        return o > s ? o : s;
+      }, 0));
+      const l = qe.value ? qe.value.getBoundingClientRect().width : 0;
+      return a + l + (l ? 24 : 0);
+    }
+    const _e = d(0), Me = d(0), Ia = ht((a) => {
+      _e.value = a;
+    }, 100);
+    oa((a) => {
+      const l = e.value.orientation === "vertical" ? ae.value : te.value;
+      if (!l) return;
+      const t = new ResizeObserver((s) => {
+        Ia(s[0].contentRect.height);
+      });
+      t.observe(l), a(() => t.disconnect());
+    });
+    const Fa = ht((a) => {
+      Me.value = a + e.value.style.chart.bars.totalValues.fontSize;
+    }, 100);
+    oa((a) => {
+      if (e.value.orientation === "vertical") return;
+      const l = pt.value;
+      if (!l) return;
+      const t = new ResizeObserver((s) => {
+        Fa(s[0].contentRect.width);
+      });
+      t.observe(l), a(() => t.disconnect());
+    }), ct(() => {
+      _e.value = 0, Me.value = 0;
+    });
+    const Tt = g(() => {
+      let a = 0;
+      Ge.value && (a = Ge.value.getBBox().height);
+      let l = 0;
+      return e.value.orientation === "vertical" && ae.value && (l = _e.value), e.value.orientation === "horizontal" && te.value && (l = _e.value), a + l;
+    }), u = g(() => {
+      const { height: a, width: l } = oe.value, { right: t } = oe.value.paddingRatio;
+      let s = e.value.style.chart.bars.totalValues.show && x.dataset && x.dataset.length > 1 ? e.value.style.chart.bars.totalValues.fontSize * 1.3 : 0, c = 0;
+      e.value.style.chart.grid.y.axisLabels.show && (c = Oa());
+      const o = e.value.style.chart.padding.top + s, w = l - l * t - Me.value, C = a - e.value.style.chart.padding.bottom - Tt.value - s, I = e.value.style.chart.padding.left + c, H = l - I - l * t - Me.value, E = a - o - e.value.style.chart.padding.bottom - Tt.value - s;
+      return {
+        chartHeight: a,
+        chartWidth: l,
+        top: o,
+        right: w,
+        bottom: C,
+        left: I,
+        width: Math.max(0, H),
+        height: Math.max(0, E)
+      };
+    }), Da = g(() => {
+      const { left: a, top: l, width: t, height: s } = u.value, c = v.value.start, o = v.value.end, w = Math.max(1, o - c), C = Math.max(0, Math.min(w, (O.value.start ?? c) - c)), I = Math.max(0, Math.min(w, (O.value.end ?? o) - c)), H = Math.max(0, I - C), E = {
+        fill: e.value.style.chart.zoom.preview.fill,
+        stroke: e.value.style.chart.zoom.preview.stroke,
+        "stroke-width": e.value.style.chart.zoom.preview.strokeWidth,
+        "stroke-dasharray": e.value.style.chart.zoom.preview.strokeDasharray,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        style: {
+          pointerEvents: "none",
+          transition: "none !important",
+          animation: "none !important"
+        }
+      };
+      if (e.value.orientation === "horizontal") {
+        const $ = s / w;
+        return {
+          x: a,
+          y: l + C * $,
+          width: t,
+          height: H * $,
+          ...E
+        };
+      } else {
+        const $ = t / w;
+        return {
+          x: a + C * $,
+          y: l,
+          width: H * $,
+          height: s,
+          ...E
+        };
+      }
+    }), W = g(() => Ze.value.map((a, l) => {
+      const t = Tl(a.color) || Ra.value[l] || Ee[l] || Ee[l % Ee.length];
+      return {
+        ...a,
+        // In distributed mode, all values are converted to positive
+        series: JSON.parse(JSON.stringify(a.series)).map((s) => e.value.style.chart.bars.distributed ? Math.abs(s) : s),
+        // Store signs to manage display of neg values in distributed mode
+        signedSeries: a.series.map((s) => s >= 0 ? 1 : -1),
+        absoluteIndex: l,
+        id: ua(),
+        color: t
+      };
+    })), A = g(() => Math.max(...W.value.filter((a) => !N.value.includes(a.id)).map((a) => a.series.length)));
+    function Ea(a) {
+      Je.value = a;
+    }
+    const v = d({
+      start: 0,
+      end: Math.max(...Ze.value.map((a) => a.series.length))
+    }), O = d({ start: 0, end: Math.max(...Ze.value.map((a) => a.series.length)) }), $t = g(() => e.value.style.chart.zoom.preview.enable && (O.value.start !== v.value.start || O.value.end !== v.value.end));
+    function At(a, l) {
+      O.value[a] = l;
+    }
+    function Te() {
+      const a = A.value;
+      let l = Math.max(0, Math.min(v.value.start ?? 0, a - 1)), t = Math.max(l + 1, Math.min(v.value.end ?? a, a));
+      (!Number.isFinite(l) || !Number.isFinite(t) || t <= l) && (l = 0, t = a), v.value.start = l, v.value.end = t, O.value.start = l, O.value.end = t, de.value && (de.value.setStartValue(l), de.value.setEndValue(t));
+    }
+    const me = d(null);
+    function Va() {
+      return new Promise((a) => requestAnimationFrame(
+        () => requestAnimationFrame(() => a())
+      ));
+    }
+    ct(() => {
+      me.value && cancelAnimationFrame(me.value);
+    });
+    async function Pt() {
+      Oe(), await kl(), me.value && cancelAnimationFrame(me.value), me.value = requestAnimationFrame(async () => {
+        await Va(), Oe();
+      });
+    }
+    const m = g(() => {
+      let a;
+      return e.value.orientation === "vertical" ? a = u.value.width / (v.value.end - v.value.start) : a = u.value.height / (v.value.end - v.value.start), a <= 0 ? 0 : a;
+    }), fe = g(() => ze(W.value.filter((a) => !N.value.includes(a.id))).slice(v.value.start, v.value.end)), le = g(() => e.value.style.chart.zoom.minimap.show ? ze(W.value.filter((a) => !N.value.includes(a.id))) : []), Ua = g(() => e.value.style.chart.zoom.minimap.show ? [{
+      name: "",
+      series: le.value,
+      color: "#000000",
+      isVisible: !0
+    }] : []), Ba = g(() => ze(W.value.filter((a) => !N.value.includes(a.id)).map((a) => ({
+      ...a,
+      series: a.series.map((l, t) => a.signedSeries[t] === -1 && l >= 0 ? -l : l)
+    }))).slice(v.value.start, v.value.end)), $e = g(() => {
+      const a = W.value.filter((l) => !N.value.includes(l.id));
+      return {
+        positive: ze(a.map((l) => ({
+          ...l,
+          series: l.series.slice(v.value.start, v.value.end).map((t) => t >= 0 ? t : 0)
+        }))),
+        negative: ze(a.map((l) => ({
+          ...l,
+          series: l.series.slice(v.value.start, v.value.end).map((t) => t < 0 ? t : 0)
+        })))
+      };
+    }), B = g(() => {
+      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(...$e.value.positive), l = Math.min(...$e.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(l) ? 0 : l, s = !e.value.style.chart.bars.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? ha(t > 0 ? 0 : t, a < 0 ? 0 : a, e.value.style.chart.grid.scale.ticks) : da(t > 0 ? 0 : t, a < 0 ? 0 : a, e.value.style.chart.grid.scale.ticks);
+      return s.ticks.map((c) => ({
+        zero: u.value.bottom - u.value.height * (Math.abs(s.min) / (s.max + Math.abs(s.min))),
+        y: u.value.bottom - u.value.height * ((c + Math.abs(s.min)) / (s.max + Math.abs(s.min))),
+        x: u.value.left - 8,
+        horizontal_zero: u.value.left + u.value.width * (Math.abs(s.min) / (s.max + Math.abs(s.min))),
+        horizontal_x: u.value.left + u.value.width * ((c + Math.abs(s.min)) / (s.max + Math.abs(s.min))),
+        horizontal_y: u.value.bottom - 8,
+        value: c
+      }));
+    }), R = g(() => ba({
+      values: e.value.style.chart.grid.x.timeLabels.values,
+      maxDatapoints: A.value,
+      formatter: e.value.style.chart.grid.x.timeLabels.datetimeFormatter,
+      start: v.value.start,
+      end: v.value.end
+    })), pe = g(() => ba({
+      values: e.value.style.chart.grid.x.timeLabels.values,
+      maxDatapoints: A.value,
+      formatter: e.value.style.chart.grid.x.timeLabels.datetimeFormatter,
+      start: 0,
+      end: A.value
+    })), Ha = g(() => {
+      const a = e.value.style.chart.grid.x.timeLabels.modulo;
+      return R.value.length ? Math.min(a, [...new Set(R.value.map((l) => l.text))].length) : a;
+    }), Nt = g(() => {
+      const a = e.value.style.chart.grid.x.timeLabels, l = R.value || [], t = pe.value || [], s = v.value.start ?? 0, c = U.value, o = A.value, w = l.map((I) => I?.text ?? ""), C = t.map((I) => I?.text ?? "");
+      return $l(
+        !!a.showOnlyFirstAndLast,
+        !!a.showOnlyAtModulo,
+        Math.max(1, Ha.value || 1),
+        w,
+        C,
+        s,
+        c,
+        o
+      );
+    }), Rt = g(() => {
+      const a = e.value.style.chart.grid.x.timeLabels.datetimeFormatter, l = Bl({
+        useUTC: a.useUTC,
+        locale: Hl[a.locale] || { months: [], shortMonths: [], days: [], shortDays: [] },
+        januaryAsYear: a.januaryAsYear
+      });
+      return (t, s) => {
+        const o = e.value.style.chart.grid.x.timeLabels.values?.[t];
+        return o == null ? "" : (l.formatDate(new Date(o), s), l.formatDate(new Date(o), s));
+      };
+    }), Ot = g(() => (e.value.style.chart.grid.x.timeLabels.values || []).map((l, t) => ({
+      text: Rt.value(t, e.value.style.chart.zoom.timeFormat),
+      absoluteIndex: t
+    }))), at = g(() => (e.value.style.chart.grid.x.timeLabels.values || []).map((l, t) => ({
+      text: Rt.value(t, e.value.style.chart.tooltip.timeFormat),
+      absoluteIndex: t
+    }))), L = g(() => {
+      if (!he.value && !be.value) return [];
+      let a = Array(A.value).fill(0), l = Array(A.value).fill(0), t = Array(A.value).fill(0), s = Array(A.value).fill(0);
+      const c = Math.max(...$e.value.positive) || 0, o = Math.min(...$e.value.negative), w = [-1 / 0, 1 / 0, NaN, void 0, null].includes(o) ? 0 : o, C = !e.value.style.chart.bars.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? ha(e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : w > 0 ? 0 : w, 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) : da(e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : w > 0 ? 0 : w, 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: I, max: H } = C, E = H + (I >= 0 ? 0 : Math.abs(I)) || 1, $ = u.value.height, Fe = u.value.width, Qt = B.value[0] ? B.value[0].zero : u.value.bottom, Kt = B.value[0] ? B.value[0].horizontal_zero : u.value.left;
+      let jt = Array(le.value.length).fill(0), ea = Array(le.value.length).fill(0);
+      return W.value.filter((ie) => !N.value.includes(ie.id)).map((ie) => {
+        const q = ie.series.slice(), ta = q.map((h, y) => jt[y]), ol = q.map((h, y) => ea[y]);
+        q.forEach((h, y) => {
+          (Number(h) || 0) >= 0 ? jt[y] += Number(h) || 0 : ea[y] += Math.abs(Number(h) || 0);
+        });
+        const Y = ie.series.slice(v.value.start, v.value.end), nl = ie.signedSeries.slice(v.value.start, v.value.end), il = Y.map((h, y) => u.value.left + m.value * y + m.value * e.value.style.chart.bars.gapRatio / 4), De = (le.value || []).filter(Number.isFinite), nt = De.length ? Math.max(...De) : 0, it = De.length ? Math.min(...De) : 0;
+        function aa({ minimapH: h }) {
+          const S = nt > 0, P = it < 0;
+          if (S && P) {
+            const V = Math.max(nt, Math.abs(it)) || 1e-9;
+            return {
+              pxPerUnit: h / 2 / V,
+              zero: h / 2
+            };
+          }
+          if (S) {
+            const V = Math.max(1e-9, nt);
+            return {
+              pxPerUnit: h / V,
+              zero: h
+            };
+          }
+          const z = Math.max(1e-9, Math.abs(it));
+          return {
+            pxPerUnit: h / z,
+            zero: 0
+          };
+        }
+        const ul = ({ left: h, unitW: y }) => {
+          const S = y * (e.value.style.chart.bars.gapRatio / 4);
+          return q.map((P, z) => h + y * z + S);
+        }, cl = Y.map((h, y) => u.value.top + m.value * y + m.value * e.value.style.chart.bars.gapRatio / 4), vl = Y.map((h, y) => {
+          const S = e.value.style.chart.bars.distributed ? (h || 0) / fe.value[y] : (h || 0) / E;
+          let P, z;
+          return h > 0 ? (z = $ * S, P = Qt - z - a[y], a[y] += z) : (z = $ * S, P = Qt + t[y], t[y] += Math.abs(z)), P;
+        }), hl = ({ minimapH: h }) => {
+          if (e.value.style.chart.bars.distributed)
+            return q.map((z, V) => {
+              const ut = Math.abs(Number(z) || 0), la = Math.abs(le.value?.[V] || 0) || 1e-9, fl = (ta[V] + ut) / la;
+              return h - fl * h;
+            });
+          const { pxPerUnit: y, zero: S } = aa({ minimapH: h });
+          return q.map((P, z) => {
+            const V = Number(P) || 0;
+            return V >= 0 ? S - (ta[z] + V) * y : S + ol[z] * y;
+          });
+        }, dl = Y.map((h, y) => {
+          const S = e.value.style.chart.bars.distributed ? (h || 0) / fe.value[y] : (h || 0) / E;
+          let P, z;
+          return h > 0 ? (z = Fe * S, P = Kt + l[y], l[y] += z) : (z = Fe * S, P = Kt - Math.abs(z) - s[y], s[y] += Math.abs(z)), P;
+        }), yl = Y.map((h, y) => {
+          const S = e.value.style.chart.bars.distributed ? (h || 0) / fe.value[y] : (h || 0) / E;
+          return h > 0 ? $ * S : $ * Math.abs(S);
+        }), gl = ({ minimapH: h }) => {
+          if (e.value.style.chart.bars.distributed)
+            return q.map((P, z) => {
+              const V = Math.abs(Number(P) || 0), ut = Math.abs(le.value?.[z] || 0) || 1e-9;
+              return V / ut * h;
+            });
+          const { pxPerUnit: y } = aa({ minimapH: h });
+          return q.map((S) => Math.abs(Number(S) || 0) * y);
+        }, bl = Y.map((h, y) => {
+          const S = e.value.style.chart.bars.distributed ? (h || 0) / fe.value[y] : (h || 0) / E;
+          return h > 0 ? Fe * S : Fe * Math.abs(S);
+        }), ml = Y.map((h) => Math.abs(h)).reduce((h, y) => h + y, 0);
+        return {
+          ...ie,
+          proportions: Y.map((h, y) => e.value.style.chart.bars.distributed ? (h || 0) / fe.value[y] : (h || 0) / ml),
+          series: Y,
+          signedSeries: nl,
+          x: il,
+          y: vl,
+          height: yl,
+          horizontal_width: bl,
+          horizontal_y: cl,
+          horizontal_x: dl,
+          xMinimap: ul,
+          yMinimap: hl,
+          heightMinimap: gl
+        };
+      });
+    }), It = g(() => Ba.value.map((a, l) => ({
+      value: a,
+      sign: a >= 0 ? 1 : -1
+    })));
+    function Ae(a, l, t, s, c) {
+      const o = c === -1 && a >= 0 ? -a : a;
+      return Ue(
+        e.value.style.chart.bars.dataLabels.formatter,
+        o,
+        re({
+          p: e.value.style.chart.bars.dataLabels.prefix,
+          v: o,
+          s: e.value.style.chart.bars.dataLabels.suffix,
+          r: e.value.style.chart.bars.dataLabels.rounding
+        }),
+        { datapoint: l, seriesIndex: t, datapointIndex: s }
+      );
+    }
+    function Ft(a, l, t, s) {
+      return Ue(
+        e.value.style.chart.bars.dataLabels.formatter,
+        a,
+        re({
+          v: isNaN(a) ? 0 : a,
+          s: "%",
+          r: e.value.style.chart.bars.dataLabels.rounding
+        }),
+        { datapoint: l, seriesIndex: t, datapointIndex: s }
+      );
+    }
+    function Dt(a) {
+      const l = JSON.parse(JSON.stringify(L.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
+      }));
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: a + v.value.start }), ve("selectDatapoint", { datapoint: l, period: R.value[a] });
+    }
+    function lt(a) {
+      return JSON.parse(JSON.stringify(L.value)).map((l) => ({
+        name: l.name,
+        absoluteIndex: l.absoluteIndex,
+        value: l.series[a] === 0 ? 0 : (l.signedSeries[a] === -1 && l.series[a] >= 0 ? -l.series[a] : l.series[a]) || null,
+        proportion: l.proportions[a] || null,
+        color: l.color,
+        id: l.id,
+        timeLabel: pe.value[a]
+      }));
+    }
+    function Et(a) {
+      if (e.value.events.datapointLeave) {
+        const l = lt(a);
+        e.value.events.datapointLeave({ datapoint: l, seriesIndex: a + v.value.start });
+      }
+      He.value = null, U.value = null;
+    }
+    const Xa = g(() => Array(A.value).fill(0).map((a, l) => lt(l)));
+    we(() => x.selectedXIndex, (a) => {
+      if ([null, void 0].includes(x.selectedXIndex)) {
+        U.value = null;
+        return;
+      }
+      const l = a - v.value.start;
+      l < 0 || a >= v.value.end ? U.value = null : U.value = l ?? null;
+    }, { immediate: !0 });
+    function Vt(a) {
+      U.value = a, He.value = !0;
+      const l = e.value.style.chart.tooltip.customFormat, t = lt(a);
+      rl({ seriesIndex: a, datapoint: t }), e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a + v.value.start }), Xe.value = {
+        datapoint: t,
+        seriesIndex: a,
+        config: e.value,
+        series: L.value
+      };
+      const s = t.map((c) => Math.abs(c.value)).reduce((c, o) => c + o, 0);
+      if (ga(l) && Fl(() => l({
+        seriesIndex: a,
+        datapoint: t,
+        series: L.value,
+        config: e.value
+      })))
+        We.value = l({
+          seriesIndex: a,
+          datapoint: t,
+          series: L.value,
+          config: e.value
+        });
+      else {
+        const {
+          showValue: c,
+          showPercentage: o,
+          borderColor: w,
+          roundingValue: C,
+          roundingPercentage: I
+        } = e.value.style.chart.tooltip;
+        let H = "";
+        (R.value[a] && R.value[a].text || at.value[a] && at.value[a].text && e.value.style.chart.tooltip.showTimeLabel) && (H += `<div style="width:100%;text-align:center;border-bottom:1px solid ${w};padding-bottom:6px;margin-bottom:3px;">${e.value.style.chart.tooltip.useDefaultTimeFormat ? R.value[a]?.text : at.value[a]?.text || pe.value[a]?.text || ""}</div>`);
+        const E = [
+          c && o ? "(" : "",
+          c && o ? ")" : ""
+        ];
+        t.reverse().forEach(($) => {
+          H += `
+                <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_${$.id})` : $.color}"/>${Ma.pattern ? `<rect rx="5" x="0" y="0" height="60" width="60" stroke="none" fill="url(#pattern_${D.value}_${$.absoluteIndex})"/>` : ""}</svg>
+                    ${$.name}${c || o ? ":" : ""} ${c ? re({
+            p: e.value.style.chart.bars.dataLabels.prefix,
+            v: $.value,
+            s: e.value.style.chart.bars.dataLabels.suffix,
+            r: C
+          }) : ""} ${E[0]}${o ? re({
+            v: isNaN($.value / s) ? 0 : Math.abs($.value) / s * 100,
+            // Negs are absed to show relative proportion to absolute total. It's opinionated.
+            s: "%",
+            r: I
+          }) : ""}${E[1]}
+                </div>
+            `;
+        }), We.value = `<div>${H}</div>`;
+      }
+    }
+    const Wa = g(() => oe.value.width), Ya = g(() => oe.value.height);
+    Gl({
+      timeLabelsEls: e.value.orientation === "vertical" ? ae : te,
+      timeLabels: R,
+      slicer: v,
+      configRef: e,
+      rotationPath: ["style", "chart", "grid", "x", "timeLabels", "rotation"],
+      autoRotatePath: ["style", "chart", "grid", "x", "timeLabels", "autoRotate", "enable"],
+      isAutoSize: !1,
+      width: Wa,
+      height: Ya,
+      rotation: e.value.style.chart.grid.x.timeLabels.autoRotate.angle
+    });
+    function Ut(a) {
+      ye.value = a, dt.value += 1;
+    }
+    function Bt() {
+      T.value.showTable = !T.value.showTable;
+    }
+    function Ht() {
+      T.value.dataLabels.show = !T.value.dataLabels.show;
+    }
+    function Xt() {
+      T.value.showTooltip = !T.value.showTooltip;
+    }
+    function Ga() {
+      return L.value;
+    }
+    const Wt = g(() => {
+      if (L.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
+      const a = L.value.map(({ name: t, color: s }) => ({
+        label: t,
+        color: s
+      })), l = [];
+      return R.value.forEach((t) => {
+        const s = [e.value.style.chart.grid.x.timeLabels.values[t.absoluteIndex] ? t.text : i + 1];
+        W.value.forEach((c) => {
+          s.push(Number((c.series[t.absoluteIndex] || 0).toFixed(e.value.table.td.roundingValue)));
+        }), l.push(s);
+      }), { head: a, body: l };
+    });
+    function st(a = null) {
+      const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], t = ["", ...Wt.value.head.map((w) => w.label)], s = Wt.value.body, c = l.concat([t]).concat(s), o = Ol(c);
+      a ? a(o) : Il({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-stackbar" });
+    }
+    const Pe = g(() => {
+      const a = [""].concat(L.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 l = [];
+      for (let c = 0; c < A.value; c += 1) {
+        const o = L.value.map((w) => w.series[c] ?? 0).reduce((w, C) => w + C, 0);
+        l.push([e.value.style.chart.grid.x.timeLabels.values.slice(v.value.start, v.value.end)[c] ? R.value[c].text : c + 1].concat(L.value.map((w) => (w.series[c] ?? 0).toFixed(e.value.table.td.roundingValue))).concat((o ?? 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
+      }, s = [e.value.table.columnNames.period].concat(L.value.map((c) => c.name)).concat(e.value.table.columnNames.total);
+      return { head: a, body: l.slice(0, v.value.end - v.value.start), config: t, colNames: s };
+    });
+    function qa(a, l) {
+      if (ve("selectLegend", L.value.find((t) => t.absoluteIndex === a)), N.value.includes(l.id))
+        N.value = N.value.filter((t) => t !== l.id);
+      else {
+        if (N.value.length === W.value.length - 1) return;
+        N.value.push(l.id);
+      }
+    }
+    const rt = g(() => W.value.map((a, l) => ({
+      ...a,
+      shape: "square"
+    })).map((a) => ({
+      ...a,
+      opacity: N.value.includes(a.id) ? 0.5 : 1,
+      segregate: () => qa(a.absoluteIndex, a),
+      isSegregated: N.value.includes(a.id)
+    }))), Ja = g(() => ({
+      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" : ""
+    })), Ne = d(!1);
+    function ot() {
+      Ne.value = !Ne.value;
+    }
+    function Re(a, l) {
+      const t = JSON.parse(JSON.stringify(L.value)).map((s) => ({
+        name: s.name,
+        value: s.series[l] === 0 ? 0 : (s.signedSeries[l] === -1 && s.series[l] >= 0 ? -s.series[l] : s.series[l]) || null,
+        proportion: s.proportions[l] || null,
+        color: s.color,
+        id: s.id
+      }));
+      ve("selectTimeLabel", {
+        datapoint: t,
+        absoluteIndex: a.absoluteIndex,
+        label: a.text
+      });
+    }
+    const Za = g(() => Math.max(...L.value.flatMap((a) => a.series)));
+    function Yt(a, l) {
+      return e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? Lt.value ? l * 100 >= e.value.style.chart.bars.dataLabels.hideUnderPercentage : e.value.style.chart.bars.dataLabels.hideEmptyPercentages ? l > 0 : !0 : Lt.value ? (wt.value && et.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 > Za.value * e.value.style.chart.bars.dataLabels.hideUnderPercentage / 100) : wt.value ? Math.abs(a) >= e.value.style.chart.bars.dataLabels.hideUnderValue : e.value.style.chart.bars.dataLabels.hideEmptyValues ? a !== 0 : !0;
+    }
+    async function Qa({ scale: a = 2 } = {}) {
+      if (!X.value) return;
+      const { width: l, height: t } = X.value.getBoundingClientRect(), s = l / t, { imageUri: c, base64: o } = await ql({ domElement: X.value, base64: !0, img: !0, scale: a });
+      return {
+        imageUri: c,
+        base64: o,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: t,
+        aspectRatio: s
+      };
+    }
+    const xe = g(() => {
+      const a = e.value.table.useDialog && !e.value.table.show, l = T.value.showTable;
+      return {
+        component: a ? Ca : ka,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: a ? {
+          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: ye.value,
+          fullscreenParent: X.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
+            }
+          }
+        }
+      };
+    });
+    we(() => T.value.showTable, (a) => {
+      e.value.table.show || (a && e.value.table.useDialog && ge.value ? ge.value.open() : "close" in ge.value && ge.value.close());
+    });
+    function Gt() {
+      T.value.showTable = !1, Ye.value && Ye.value.setTableIconState(!1);
+    }
+    const Ka = g(() => e.value.style.chart.backgroundColor), ja = g(() => e.value.style.chart.legend), el = g(() => e.value.style.chart.title), { exportSvg: tl, getSvg: al } = Xl({
+      svg: Ke,
+      title: el,
+      legend: ja,
+      legendItems: rt,
+      backgroundColor: Ka
+    });
+    async function qt({ isCb: a }) {
+      if (a) {
+        const { blob: l, url: t, text: s, dataUrl: c } = await al();
+        e.value.userOptions.callbacks.svg({ blob: l, url: t, text: s, dataUrl: c });
+      } else
+        tl();
+    }
+    function Jt(a) {
+      const l = A.value;
+      return a > l ? l : a < 0 || a < v.value.start ? e.value.style.chart.zoom.startIndex !== null ? v.value.start + 1 : 1 : a;
+    }
+    const ke = d(!1), Zt = d(!1);
+    function Oe() {
+      if (!ke.value) {
+        ke.value = !0;
+        try {
+          const { startIndex: a, endIndex: l } = e.value.style.chart.zoom, t = A.value, s = a ?? 0, c = l != null ? Math.min(Jt(l + 1), t) : t;
+          Ie.value = !0, v.value.start = s, v.value.end = c, O.value.start = s, O.value.end = c, Te(), Zt.value = !0;
+        } finally {
+          queueMicrotask(() => {
+            Ie.value = !1;
+          }), ke.value = !1;
+        }
+      }
+    }
+    const Ie = d(!1);
+    function ll(a) {
+      ke.value || Ie.value || a !== v.value.start && (v.value.start = a, O.value.start = a, Te());
+    }
+    function sl(a) {
+      if (ke.value || Ie.value) return;
+      const l = Jt(a);
+      l !== v.value.end && (v.value.end = l, O.value.end = l, Te());
+    }
+    function rl({ seriesIndex: a, datapoint: l }) {
+      const t = v.value.start + a;
+      ve("selectX", {
+        dataset: l,
+        index: t,
+        indexLabel: e.value.style.chart.grid.x.timeLabels.values[t]
+      });
+    }
+    return ma({
+      getData: Ga,
+      getImage: Qa,
+      generatePdf: Ct,
+      generateCsv: st,
+      generateImage: _t,
+      generateSvg: qt,
+      toggleTable: Bt,
+      toggleLabels: Ht,
+      toggleTooltip: Xt,
+      toggleAnnotator: ot,
+      toggleFullscreen: Ut
+    }), (a, l) => (r(), n("div", {
+      id: `stackbar_${D.value}`,
+      ref_key: "stackbarChart",
+      ref: X,
+      class: ue({ "vue-data-ui-component": !0, "vue-ui-stackbar": !0, "vue-data-ui-wrapper-fullscreen": ye.value }),
+      style: se(`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: Pa,
+      onMouseleave: Na
+    }, [
+      e.value.userOptions.buttons.annotator ? (r(), Z(f(La), {
+        key: 0,
+        svgRef: f(Ke),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: Ne.value,
+        onClose: ot
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : b("", !0),
+      _(a.$slots, "userConfig", {}, void 0, !0),
+      e.value.style.chart.title.text ? (r(), n("div", {
+        key: 1,
+        ref_key: "chartTitle",
+        ref: yt,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (r(), Z(Jl, {
+          key: `title_${mt.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)) : b("", !0),
+      Q("div", {
+        id: `legend-top-${D.value}`
+      }, null, 8, as),
+      e.value.userOptions.show && he.value && (f(kt) || f(Qe)) ? (r(), Z(f(Sa), {
+        ref_key: "userOptionsRef",
+        ref: Ye,
+        key: `user_option_${dt.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: f(St),
+        isImaging: f(zt),
+        uid: D.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,
+        hasSvg: e.value.userOptions.buttons.svg,
+        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: ye.value,
+        chartElement: X.value,
+        position: e.value.userOptions.position,
+        isTooltip: T.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: Ne.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleFullscreen: Ut,
+        onGeneratePdf: f(Ct),
+        onGenerateCsv: st,
+        onGenerateImage: f(_t),
+        onGenerateSvg: qt,
+        onToggleTable: Bt,
+        onToggleLabels: Ht,
+        onToggleTooltip: Xt,
+        onToggleAnnotator: ot,
+        style: se({
+          visibility: f(kt) ? f(Qe) ? "visible" : "hidden" : "visible"
+        })
+      }, vt({ _: 2 }, [
+        a.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: M(({ isOpen: t, color: s }) => [
+            _(a.$slots, "menuIcon", K(j({ isOpen: t, color: s })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        a.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: M(() => [
+            _(a.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        a.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: M(() => [
+            _(a.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        a.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: M(() => [
+            _(a.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        a.$slots.optionImg ? {
+          name: "optionImg",
+          fn: M(() => [
+            _(a.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        a.$slots.optionTable ? {
+          name: "optionTable",
+          fn: M(() => [
+            _(a.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        a.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: M(() => [
+            _(a.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        a.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: M(({ toggleFullscreen: t, isFullscreen: s }) => [
+            _(a.$slots, "optionFullscreen", K(j({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        a.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: M(({ toggleAnnotator: t, isAnnotator: s }) => [
+            _(a.$slots, "optionAnnotator", K(j({ toggleAnnotator: t, isAnnotator: s })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : b("", !0),
+      (r(), n("svg", {
+        ref_key: "svgRef",
+        ref: Ke,
+        xmlns: f(Al),
+        viewBox: `0 0 ${u.value.chartWidth <= 0 ? 10 : u.value.chartWidth} ${u.value.chartHeight <= 0 ? 10 : u.value.chartHeight}`,
+        class: ue({ "vue-data-ui-loading": f(be) }),
+        style: se(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        Le(f(za)),
+        a.$slots["chart-background"] ? (r(), n("foreignObject", {
+          key: 0,
+          x: u.value.left,
+          y: u.value.top,
+          width: u.value.width <= 0 ? 10 : u.value.width,
+          height: u.value.height <= 0 ? 10 : u.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          _(a.$slots, "chart-background", {}, void 0, !0)
+        ], 8, ss)) : b("", !0),
+        e.value.style.chart.bars.gradient.show ? (r(), n("defs", rs, [
+          (r(!0), n(p, null, k(L.value, (t, s) => (r(), n("linearGradient", {
+            id: `gradient_${t.id}`,
+            x1: "0%",
+            y1: "0%",
+            x2: "0%",
+            y2: "100%"
+          }, [
+            Q("stop", {
+              offset: "0%",
+              "stop-color": t.color
+            }, null, 8, ns),
+            Q("stop", {
+              offset: "61.8%",
+              "stop-color": f(Pl)(t.color, e.value.style.chart.bars.gradient.intensity / 100)
+            }, null, 8, is),
+            Q("stop", {
+              offset: "100%",
+              "stop-color": t.color
+            }, null, 8, us)
+          ], 8, os))), 256))
+        ])) : b("", !0),
+        e.value.style.chart.grid.x.showHorizontalLines && e.value.orientation === "vertical" ? (r(!0), n(p, { key: 2 }, k(B.value, (t, s) => (r(), n("line", {
+          x1: u.value.left,
+          x2: u.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, cs))), 256)) : b("", !0),
+        e.value.style.chart.grid.x.showHorizontalLines && e.value.orientation === "horizontal" ? (r(!0), n(p, { key: 3 }, k(v.value.end - v.value.start + 1, (t, s) => (r(), n("line", {
+          x1: u.value.left,
+          x2: u.value.right,
+          y1: u.value.top + m.value * s,
+          y2: u.value.top + m.value * s,
+          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, vs))), 256)) : b("", !0),
+        e.value.style.chart.grid.y.showVerticalLines && e.value.orientation === "vertical" ? (r(!0), n(p, { key: 4 }, k(v.value.end - v.value.start + 1, (t, s) => (r(), n("line", {
+          x1: u.value.left + m.value * s,
+          x2: u.value.left + m.value * s,
+          y1: u.value.top,
+          y2: u.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, hs))), 256)) : b("", !0),
+        e.value.style.chart.grid.y.showVerticalLines && e.value.orientation === "horizontal" ? (r(!0), n(p, { key: 5 }, k(B.value, (t, s) => (r(), n("line", {
+          x1: t.horizontal_x,
+          x2: t.horizontal_x,
+          y1: u.value.top,
+          y2: u.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, ds))), 256)) : b("", !0),
+        (r(!0), n(p, null, k(L.value, (t, s) => (r(), n("g", null, [
+          a.$slots.pattern ? (r(), n("defs", ys, [
+            _(a.$slots, "pattern", Se({ ref_for: !0 }, { seriesIndex: t.absoluteIndex, patternId: `pattern_${D.value}_${t.absoluteIndex}` }), void 0, !0)
+          ])) : b("", !0),
+          e.value.orientation === "vertical" ? (r(), n(p, { key: 1 }, [
+            (r(!0), n(p, null, k(t.x, (c, o) => (r(), n("rect", {
+              x: c,
+              y: t.y[o] < 0 ? 0 : t.y[o],
+              height: t.height[o] < 0 ? 1e-4 : t.height[o] || 0,
+              rx: e.value.style.chart.bars.borderRadius > t.height[o] / 2 ? (t.height[o] < 0 ? 0 : t.height[o]) / 2 : e.value.style.chart.bars.borderRadius,
+              width: m.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: ue({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": ee.value })
+            }, null, 10, gs))), 256)),
+            a.$slots.pattern ? (r(), n("g", bs, [
+              (r(!0), n(p, null, k(t.x, (c, o) => (r(), n("rect", {
+                x: c,
+                y: t.y[o] < 0 ? 0 : t.y[o],
+                height: t.height[o] < 0 ? 1e-4 : t.height[o] || 0,
+                rx: e.value.style.chart.bars.borderRadius > t.height[o] / 2 ? (t.height[o] < 0 ? 0 : t.height[o]) / 2 : e.value.style.chart.bars.borderRadius,
+                width: m.value * (1 - e.value.style.chart.bars.gapRatio / 2),
+                fill: `url(#pattern_${D.value}_${t.absoluteIndex})`,
+                stroke: e.value.style.chart.backgroundColor,
+                "stroke-width": e.value.style.chart.bars.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                class: ue({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": ee.value })
+              }, null, 10, ms))), 256))
+            ])) : b("", !0)
+          ], 64)) : (r(), n(p, { key: 2 }, [
+            (r(!0), n(p, null, k(t.horizontal_x, (c, o) => (r(), n("rect", {
+              x: f(Ve)(c, u.value.left),
+              y: t.horizontal_y[o] < 0 ? 0 : t.horizontal_y[o],
+              width: f(Ve)(t.horizontal_width[o] < 0 ? 1e-4 : t.horizontal_width[o]),
+              rx: e.value.style.chart.bars.borderRadius > t.height[o] / 2 ? (t.height[o] < 0 ? 0 : t.height[o]) / 2 : e.value.style.chart.bars.borderRadius,
+              height: m.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: ue({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": ee.value })
+            }, null, 10, fs))), 256)),
+            a.$slots.pattern ? (r(), n("g", ps, [
+              (r(!0), n(p, null, k(t.horizontal_x, (c, o) => (r(), n("rect", {
+                x: f(Ve)(c, u.value.left),
+                y: t.horizontal_y[o] < 0 ? 0 : t.horizontal_y[o],
+                width: f(Ve)(t.horizontal_width[o] < 0 ? 1e-4 : t.horizontal_width[o]),
+                rx: e.value.style.chart.bars.borderRadius > t.height[o] / 2 ? (t.height[o] < 0 ? 0 : t.height[o]) / 2 : e.value.style.chart.bars.borderRadius,
+                height: m.value * (1 - e.value.style.chart.bars.gapRatio / 2),
+                fill: `url(#pattern_${D.value}_${t.absoluteIndex})`,
+                stroke: e.value.style.chart.backgroundColor,
+                "stroke-width": e.value.style.chart.bars.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                class: ue({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": ee.value })
+              }, null, 10, xs))), 256))
+            ])) : b("", !0)
+          ], 64))
+        ]))), 256)),
+        e.value.style.chart.grid.x.showAxis ? (r(), n("line", {
+          key: 6,
+          x1: u.value.left,
+          x2: u.value.right,
+          y1: u.value.bottom,
+          y2: u.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, ks)) : b("", !0),
+        e.value.style.chart.grid.y.showAxis && !e.value.style.chart.bars.distributed ? (r(), n("line", {
+          key: 7,
+          x1: u.value.left,
+          x2: u.value.left,
+          y1: u.value.top,
+          y2: u.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, ws)) : b("", !0),
+        e.value.style.chart.grid.x.axisName.show && e.value.style.chart.grid.x.axisName.text ? (r(), n("text", {
+          key: 8,
+          ref_key: "xAxisLabel",
+          ref: Ge,
+          x: u.value.left + u.value.width / 2,
+          y: u.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"
+        }, F(e.value.style.chart.grid.x.axisName.text), 9, Ls)) : b("", !0),
+        e.value.style.chart.grid.y.axisName.show && e.value.style.chart.grid.y.axisName.text ? (r(), n("text", {
+          key: 9,
+          ref_key: "yAxisLabel",
+          ref: qe,
+          transform: `translate(${e.value.style.chart.grid.y.axisName.fontSize}, ${u.value.top + u.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"
+        }, F(e.value.style.chart.grid.y.axisName.text), 9, Ss)) : b("", !0),
+        T.value.dataLabels.show && e.value.orientation === "vertical" ? (r(), n(p, { key: 10 }, [
+          (r(!0), n(p, null, k(L.value, (t, s) => (r(), n("g", null, [
+            (r(!0), n(p, null, k(t.x, (c, o) => (r(), n(p, null, [
+              Yt(t.series[o], t.proportions[o]) ? (r(), n("text", {
+                key: 0,
+                x: c + m.value * (1 - e.value.style.chart.bars.gapRatio / 2) / 2,
+                y: t.y[o] + t.height[o] / 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 ? f(ya)(t.color) : e.value.style.chart.bars.dataLabels.color,
+                "font-weight": e.value.style.chart.bars.dataLabels.bold ? "bold" : "normal",
+                "text-anchor": "middle"
+              }, F(e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? Ft(t.proportions[o] * 100, t, s, o) : Ae(t.series[o], t, s, o, t.signedSeries[o])), 9, zs)) : b("", !0)
+            ], 64))), 256))
+          ]))), 256)),
+          e.value.style.chart.bars.totalValues.show && L.value.length > 1 ? (r(), n("g", {
+            key: 0,
+            ref_key: "sumTop",
+            ref: Aa
+          }, [
+            (r(!0), n(p, null, k(It.value, (t, s) => (r(), n(p, null, [
+              !e.value.style.chart.bars.dataLabels.hideEmptyValues || t.value !== 0 ? (r(), n("text", {
+                key: 0,
+                x: u.value.left + m.value * s + m.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
+              }, F(Ae(t.value, t, s, t.sign)), 9, Cs)) : b("", !0)
+            ], 64))), 256))
+          ], 512)) : b("", !0)
+        ], 64)) : b("", !0),
+        T.value.dataLabels.show && e.value.orientation === "horizontal" ? (r(), n(p, { key: 11 }, [
+          (r(!0), n(p, null, k(L.value, (t, s) => (r(), n("g", null, [
+            (r(!0), n(p, null, k(t.horizontal_x, (c, o) => (r(), n(p, null, [
+              Yt(t.series[o], t.proportions[o]) ? (r(), n("text", {
+                key: 0,
+                x: c + (t.horizontal_width[o] < 0 ? 1e-4 : t.horizontal_width[o]) / 2,
+                y: t.horizontal_y[o] + m.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 ? f(ya)(t.color) : e.value.style.chart.bars.dataLabels.color,
+                "font-weight": e.value.style.chart.bars.dataLabels.bold ? "bold" : "normal",
+                "text-anchor": "middle"
+              }, F(e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? Ft(t.proportions[o] * 100, t, s, o) : Ae(t.series[o], t, s, o, t.signedSeries[o])), 9, _s)) : b("", !0)
+            ], 64))), 256))
+          ]))), 256)),
+          e.value.style.chart.bars.totalValues.show && L.value.length > 1 ? (r(), n("g", {
+            key: 0,
+            ref_key: "sumRight",
+            ref: pt
+          }, [
+            (r(!0), n(p, null, k(It.value, (t, s) => (r(), n(p, null, [
+              !e.value.style.chart.bars.dataLabels.hideEmptyValues || t.value !== 0 ? (r(), n("text", {
+                key: 0,
+                x: u.value.right + e.value.style.chart.bars.totalValues.fontSize / 3,
+                y: u.value.top + m.value * s + m.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
+              }, F(Ae(t.value, t, s, t.sign)), 9, Ms)) : b("", !0)
+            ], 64))), 256))
+          ], 512)) : b("", !0)
+        ], 64)) : b("", !0),
+        e.value.style.chart.grid.y.axisLabels.show && !e.value.style.chart.bars.distributed && e.value.orientation === "vertical" ? (r(), n("g", {
+          key: 12,
+          ref_key: "scaleLabels",
+          ref: te
+        }, [
+          (r(!0), n(p, null, k(B.value, (t, s) => (r(), n("line", {
+            x1: u.value.left,
+            x2: u.value.left - 6,
+            y1: t.y,
+            y2: t.y,
+            stroke: e.value.style.chart.grid.x.axisColor,
+            "stroke-width": 1
+          }, null, 8, Ts))), 256)),
+          (r(!0), n(p, null, k(B.value, (t, s) => (r(), n("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"
+          }, F(f(Ue)(
+            e.value.style.chart.grid.y.axisLabels.formatter,
+            t.value,
+            f(re)({
+              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, $s))), 256))
+        ], 512)) : b("", !0),
+        e.value.style.chart.grid.y.axisLabels.show && !e.value.style.chart.bars.distributed && e.value.orientation === "horizontal" ? (r(), n("g", {
+          key: 13,
+          ref_key: "scaleLabels",
+          ref: te
+        }, [
+          (r(!0), n(p, null, k(B.value, (t, s) => (r(), n("line", {
+            x1: t.horizontal_x,
+            x2: t.horizontal_x,
+            y1: u.value.bottom,
+            y2: u.value.bottom + 6,
+            stroke: e.value.style.chart.grid.x.axisColor,
+            "stroke-width": 1,
+            "stroke-linecap": "round"
+          }, null, 8, As))), 256)),
+          (r(!0), n(p, null, k(B.value, (t, s) => (r(), n("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}, ${u.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})`
+          }, F(f(Ue)(
+            e.value.style.chart.grid.y.axisLabels.formatter,
+            t.value,
+            f(re)({
+              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, Ps))), 256))
+        ], 512)) : b("", !0),
+        e.value.style.chart.grid.x.timeLabels.show && e.value.orientation === "vertical" ? (r(), n("g", {
+          key: 14,
+          ref_key: "timeLabelsEls",
+          ref: ae
+        }, [
+          a.$slots["time-label"] ? (r(), n("g", Ns, [
+            (r(!0), n(p, null, k(Nt.value, (t, s) => (r(), n("g", null, [
+              _(a.$slots, "time-label", Se({ ref_for: !0 }, {
+                x: u.value.left + m.value * s + m.value / 2,
+                y: u.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(${u.value.left + m.value * s + m.value / 2}, ${u.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))
+          ])) : (r(), n("g", Rs, [
+            (r(!0), n(p, null, k(Nt.value, (t, s) => (r(), n("g", null, [
+              String(t.text).includes(`
+`) ? (r(), n("text", {
+                key: s + "-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(
+                                    ${u.value.left + m.value * s + m.value / 2},
+                                    ${u.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: f(Nl)({
+                  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: () => Re(t, s)
+              }, null, 8, Is)) : (r(), n("text", {
+                class: "vue-data-ui-time-label",
+                key: s,
+                "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(${u.value.left + m.value * s + m.value / 2}, ${u.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: () => Re(t, s)
+              }, F(t.text), 9, Os))
+            ]))), 256))
+          ]))
+        ], 512)) : b("", !0),
+        e.value.style.chart.grid.x.timeLabels.show && e.value.orientation === "horizontal" ? (r(), n("g", {
+          key: 15,
+          ref_key: "timeLabelsEls",
+          ref: ae
+        }, [
+          a.$slots["time-label"] ? (r(), n("g", Fs, [
+            (r(!0), n(p, null, k(R.value, (t, s) => (r(), n("g", null, [
+              _(a.$slots, "time-label", Se({ ref_for: !0 }, {
+                x: u.value.left - 8,
+                y: u.value.top + m.value * s + m.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))
+          ])) : (r(), n("g", Ds, [
+            (r(!0), n(p, null, k(R.value, (t, s) => (r(), n("g", null, [
+              String(t.text).includes(`
+`) ? (r(), n("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: u.value.left - 8,
+                y: u.value.top + m.value * s + m.value / 2 + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
+                style: { cursor: "pointer" },
+                onClick: () => Re(t, s),
+                innerHTML: f(Rl)({
+                  content: String(t.text),
+                  fontSize: e.value.style.chart.grid.y.axisLabels.fontSize,
+                  fill: e.value.style.chart.grid.y.axisLabels.color,
+                  x: u.value.left - 8,
+                  y: 0
+                })
+              }, null, 8, Vs)) : (r(), n("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: u.value.left - 8,
+                y: u.value.top + m.value * s + m.value / 2 + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
+                style: {
+                  cursor: "pointer"
+                },
+                onClick: () => Re(t, s)
+              }, F(t.text), 9, Es))
+            ]))), 256))
+          ]))
+        ], 512)) : b("", !0),
+        T.value.showTooltip && e.value.orientation === "vertical" ? (r(!0), n(p, { key: 16 }, k(v.value.end - v.value.start, (t, s) => (r(), n("rect", {
+          x: u.value.left + s * m.value,
+          y: u.value.top,
+          width: m.value,
+          height: u.value.height < 0 ? 0 : u.value.height,
+          onClick: () => Dt(s),
+          onMouseenter: () => Vt(s),
+          onMouseleave: () => Et(s),
+          fill: s === U.value || s === Je.value ? e.value.style.chart.highlighter.color : "transparent",
+          style: se({ opacity: e.value.style.chart.highlighter.opacity / 100 })
+        }, null, 44, Us))), 256)) : b("", !0),
+        T.value.showTooltip && e.value.orientation === "horizontal" ? (r(!0), n(p, { key: 17 }, k(v.value.end - v.value.start, (t, s) => (r(), n("rect", {
+          x: u.value.left,
+          y: u.value.top + s * m.value,
+          width: u.value.width < 0 ? 0 : u.value.width,
+          height: m.value,
+          onClick: () => Dt(s),
+          onMouseenter: () => Vt(s),
+          onMouseleave: () => Et(s),
+          fill: s === U.value || s === Je.value ? e.value.style.chart.highlighter.color : "transparent",
+          style: se({ opacity: e.value.style.chart.highlighter.opacity / 100 })
+        }, null, 44, Bs))), 256)) : b("", !0),
+        $t.value ? (r(), n("rect", Se({ key: 18 }, Da.value, {
+          "data-start": v.value.start,
+          "data-end": v.value.end
+        }), null, 16, Hs)) : b("", !0),
+        _(a.$slots, "svg", K(j({ ...u.value })), void 0, !0)
+      ], 14, ls)),
+      a.$slots.watermark ? (r(), n("div", Xs, [
+        _(a.$slots, "watermark", K(j({ isPrinting: f(St) || f(zt) })), void 0, !0)
+      ])) : b("", !0),
+      e.value.style.chart.zoom.show && A.value > 6 && he.value && Zt.value ? (r(), Z(jl, {
+        key: 4,
+        ref_key: "chartSlicer",
+        ref: de,
+        allMinimaps: Ua.value,
+        background: e.value.style.chart.zoom.color,
+        borderColor: e.value.style.chart.backgroundColor,
+        customFormat: e.value.style.chart.zoom.customFormat,
+        cutNullValues: !1,
+        enableRangeHandles: e.value.style.chart.zoom.enableRangeHandles,
+        enableSelectionDrag: e.value.style.chart.zoom.enableSelectionDrag,
+        end: v.value.end,
+        focusOnDrag: e.value.style.chart.zoom.focusOnDrag,
+        focusRangeRatio: e.value.style.chart.zoom.focusRangeRatio,
+        fontSize: e.value.style.chart.zoom.fontSize,
+        immediate: !e.value.style.chart.zoom.preview.enable,
+        inputColor: e.value.style.chart.zoom.color,
+        isPreview: $t.value,
+        labelLeft: e.value.style.chart.grid.x.timeLabels.values[v.value.start] ? R.value[0].text : "",
+        labelRight: e.value.style.chart.grid.x.timeLabels.values[v.value.end - 1] ? R.value.at(-1).text : "",
+        max: Math.max(...Be.dataset.map((t) => t.series.length)),
+        min: 0,
+        minimap: le.value,
+        minimapCompact: e.value.style.chart.zoom.minimap.compact,
+        minimapFrameColor: e.value.style.chart.zoom.minimap.frameColor,
+        minimapIndicatorColor: e.value.style.chart.zoom.minimap.indicatorColor,
+        minimapMerged: !1,
+        minimapSelectedColor: e.value.style.chart.zoom.minimap.selectedColor,
+        minimapSelectedColorOpacity: e.value.style.chart.zoom.minimap.selectedColorOpacity,
+        minimapSelectedIndex: U.value,
+        minimapSelectionRadius: 1,
+        preciseLabels: Ot.value.length ? Ot.value : pe.value,
+        refreshEndPoint: e.value.style.chart.zoom.endIndex !== null ? e.value.style.chart.zoom.endIndex + 1 : Math.max(...Be.dataset.map((t) => t.series.length)),
+        refreshStartPoint: e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex : 0,
+        selectColor: e.value.style.chart.zoom.highlightColor,
+        selectedSeries: Xa.value,
+        smoothMinimap: !1,
+        start: v.value.start,
+        textColor: e.value.style.chart.color,
+        timeLabels: pe.value,
+        usePreciseLabels: e.value.style.chart.grid.x.timeLabels.datetimeFormatter.enable && !e.value.style.chart.zoom.useDefaultFormat,
+        valueEnd: v.value.end,
+        valueStart: v.value.start,
+        verticalHandles: e.value.style.chart.zoom.minimap.verticalHandles,
+        "onUpdate:end": sl,
+        "onUpdate:start": ll,
+        onTrapMouse: Ea,
+        onReset: Pt,
+        onFutureEnd: l[0] || (l[0] = (t) => At("end", t)),
+        onFutureStart: l[1] || (l[1] = (t) => At("start", t))
+      }, {
+        "reset-action": M(({ reset: t }) => [
+          _(a.$slots, "reset-action", K(j({ reset: t })), void 0, !0)
+        ]),
+        slotMap: M(({ width: t, height: s, unitW: c }) => [
+          (r(!0), n(p, null, k(L.value, (o) => (r(), n("g", {
+            key: o.id
+          }, [
+            (r(!0), n(p, null, k(o.xMinimap({ left: 0, unitW: c }), (w, C) => (r(), n("rect", {
+              key: C,
+              x: C === 0 ? w - c * (e.value.style.chart.bars.gapRatio / 4) : w - c / 2,
+              y: Math.max(0, Math.min(s, o.yMinimap({ minimapH: s })[C])),
+              height: o.heightMinimap({ minimapH: s })[C],
+              width: [0, A.value - 1].includes(C) ? c * (1 - e.value.style.chart.bars.gapRatio / 2) / 2 : c * (1 - e.value.style.chart.bars.gapRatio / 2),
+              fill: e.value.style.chart.bars.gradient.show ? `url(#gradient_${o.id})` : o.color,
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": 0.5,
+              rx: "0",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              style: se({
+                opacity: C >= O.value.start && C <= O.value.end ? 1 : 0.62
+              })
+            }, null, 12, Ws))), 128))
+          ]))), 128))
+        ]),
+        _: 3
+      }, 8, ["allMinimaps", "background", "borderColor", "customFormat", "enableRangeHandles", "enableSelectionDrag", "end", "focusOnDrag", "focusRangeRatio", "fontSize", "immediate", "inputColor", "isPreview", "labelLeft", "labelRight", "max", "minimap", "minimapCompact", "minimapFrameColor", "minimapIndicatorColor", "minimapSelectedColor", "minimapSelectedColorOpacity", "minimapSelectedIndex", "preciseLabels", "refreshEndPoint", "refreshStartPoint", "selectColor", "selectedSeries", "start", "textColor", "timeLabels", "usePreciseLabels", "valueEnd", "valueStart", "verticalHandles"])) : b("", !0),
+      Le(f(pa), {
+        show: T.value.showTooltip && He.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: X.value,
+        content: We.value,
+        isFullscreen: ye.value,
+        isCustom: f(ga)(e.value.style.chart.tooltip.customFormat),
+        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": M(() => [
+          _(a.$slots, "tooltip-before", K(j({ ...Xe.value })), void 0, !0)
+        ]),
+        "tooltip-after": M(() => [
+          _(a.$slots, "tooltip-after", K(j({ ...Xe.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
+      Q("div", {
+        id: `legend-bottom-${D.value}`
+      }, null, 8, Ys),
+      ft.value ? (r(), Z(wl, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${D.value}` : `#legend-bottom-${D.value}`
+      }, [
+        Q("div", {
+          ref_key: "chartLegend",
+          ref: gt
+        }, [
+          e.value.style.chart.legend.show ? (r(), Z(Kl, {
+            key: 0,
+            legendSet: rt.value,
+            config: Ja.value,
+            onClickMarker: l[2] || (l[2] = ({ legend: t }) => t.segregate())
+          }, vt({
+            item: M(({ legend: t }) => [
+              f(be) ? b("", !0) : (r(), n("div", {
+                key: 0,
+                onClick: (s) => t.segregate(),
+                style: se(`opacity:${N.value.includes(t.id) ? 0.5 : 1}`)
+              }, F(t.name), 13, Gs))
+            ]),
+            _: 2
+          }, [
+            a.$slots.pattern ? {
+              name: "legend-pattern",
+              fn: M(({ legend: t, index: s }) => [
+                Le(Zl, {
+                  shape: t.shape,
+                  radius: 30,
+                  stroke: "none",
+                  plot: { x: 30, y: 30 },
+                  fill: `url(#pattern_${D.value}_${s})`
+                }, null, 8, ["shape", "fill"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["legendSet", "config"])) : _(a.$slots, "legend", {
+            key: 1,
+            legend: rt.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : b("", !0),
+      a.$slots.source ? (r(), n("div", {
+        key: 6,
+        ref_key: "source",
+        ref: bt,
+        dir: "auto"
+      }, [
+        _(a.$slots, "source", {}, void 0, !0)
+      ], 512)) : b("", !0),
+      he.value && e.value.userOptions.buttons.table ? (r(), Z(Ll(xe.value.component), Se({ key: 7 }, xe.value.props, {
+        ref_key: "tableUnit",
+        ref: ge,
+        onClose: Gt
+      }), vt({
+        content: M(() => [
+          Le(f(wa), {
+            colNames: Pe.value.colNames,
+            head: Pe.value.head,
+            body: Pe.value.body,
+            config: Pe.value.config,
+            title: e.value.table.useDialog ? "" : xe.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: Gt
+          }, {
+            th: M(({ th: t }) => [
+              Q("div", { innerHTML: t }, null, 8, qs)
+            ]),
+            td: M(({ td: t }) => [
+              na(F(isNaN(Number(t)) ? t : f(re)({
+                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", "withCloseButton"])
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: M(() => [
+            na(F(xe.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: M(() => [
+            Q("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[3] || (l[3] = (t) => st(e.value.userOptions.callbacks.csv))
+            }, [
+              Le(f(xa), {
+                name: "excel",
+                stroke: xe.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : b("", !0),
+      f(be) ? (r(), Z(Ul, { key: 8 })) : b("", !0)
+    ], 46, ts));
+  }
+}, gr = /* @__PURE__ */ es(Js, [["__scopeId", "data-v-587f99fc"]]);
+export {
+  gr as default
+};