vue-data-ui 3.5.2 → 3.7.0

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

@@ -0,0 +1,1867 @@
+import { defineAsyncComponent as j, useSlots as Pl, computed as b, ref as d, onMounted as ia, toRefs as Ol, watch as ze, shallowRef as ua, onBeforeUnmount as gt, watchEffect as ca, nextTick as El, createElementBlock as n, openBlock as s, normalizeStyle as ne, normalizeClass as ve, createBlock as ee, createCommentVNode as y, renderSlot as C, createElementVNode as te, createVNode as _e, unref as m, withCtx as L, normalizeProps as U, guardReactiveProps as H, createSlots as bt, Fragment as x, renderList as w, mergeProps as Me, toDisplayString as B, Teleport as Rl, resolveDynamicComponent as Il, createTextVNode as ha } from "vue";
+import { u as Bl, a as yt } from "./useNestedProp-CWo6bftQ.js";
+import { c as va, t as Vl, i as Ul, p as He, W as de, j as Hl, o as da, g as ga, k as Xl, l as Yl, am as Te, G as ba, F as ya, K as Wl, X as ql, n as Gl, I as ie, w as fa, a as ge, d as ae, U as Jl, a3 as Zl, x as ma, u as Kl, q as Ql, R as jl } from "./lib-C5BH09_g.js";
+import { t as ft, u as eo } from "./useResponsive-DfdjqQps.js";
+import { u as to } from "./usePrinter-DCJzEiS8.js";
+import { u as ao, B as lo } from "./BaseScanner-BgWxam9d.js";
+import { u as pa, a as oo, l as ro } from "./useTimeLabels-C5qMhpbe.js";
+import { u as so } from "./useSvgExport-DrjCWun4.js";
+import { u as no } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as io } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as uo } from "./useChartAccessibility-9icAAmYg.js";
+import { u as co } from "./useTimeLabelCollider-CIsgDrl9.js";
+import ho from "./img-DUzJeMlr.js";
+import vo from "./Title-DfFUb9hd.js";
+import { _ as go } from "./Shape-DE6X_t31.js";
+import bo from "./Legend-Web3GjlR.js";
+import { S as yo } from "./SlicerPreview-D76aSViW.js";
+import { _ as fo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const xa = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, zoom: { color: "#4A4A4A", highlightColor: "#9A9A9A", minimap: { selectedColor: "#8A8A8A", lineColor: "#424242", indicatorColor: "#CCCCCC" } }, highlighter: { color: "#CCCCCC" }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" }, bars: { totalValues: { color: "#CCCCCC" } }, grid: { frame: { stroke: "#5A5A5A" }, x: { axisColor: "#5A5A5A", linesColor: "#4A4A4A", axisName: { color: "#CCCCCC" }, timeLabels: { color: "#CCCCCC" } }, y: { axisColor: "#5A5A5A", linesColor: "#4A4A4A", axisName: { color: "#CCCCCC" }, axisLabels: { color: "#CCCCCC" } } } } } }, ka = { table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } }, style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", title: { color: "#424242", subtitle: { color: "#757575" } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, highlighter: { color: "#424242" }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, bars: { totalValues: { color: "#424242" } }, grid: { x: { axisColor: "#5D403780", axisName: { color: "#424242" }, timeLabels: { color: "#424242" } }, y: { axisColor: "#5D403780", axisName: { color: "#424242" }, axisLabels: { color: "#424242" } } } } } }, Ca = { table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } }, style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, highlighter: { color: "#FFF8E1" }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, bars: { totalValues: { color: "#BDBDBD" } }, grid: { x: { axisColor: "#5D403740", axisName: { color: "#BDBDBD" }, timeLabels: { color: "#BDBDBD" } }, y: { axisColor: "#5D4037", axisName: { color: "#BDBDBD" }, axisLabels: { color: "#BDBDBD" } } } } } }, wa = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, zoom: { color: "#5F6A5F", highlightColor: "#66CC66" }, highlighter: { color: "#66CC66" }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" }, bars: { totalValues: { color: "#99AA99" } }, grid: { x: { axisColor: "#5F6A5F", axisName: { color: "#66CC66" }, timeLabels: { color: "#99AA99" } }, y: { axisColor: "#5F6A5F", axisName: { color: "#66CC66" }, axisLabels: { color: "#99AA99" } } } } } }, La = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, zoom: { color: "#E0CFC3", highlightColor: "#8F837A" }, highlighter: { color: "#8F837A" }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" }, bars: { borderRadius: 4, totalValues: { show: !1 }, dataLabels: { show: !1 } }, grid: { x: { showAxis: !1, axisName: { color: "#8F837A" }, timeLabels: { show: !1 } }, y: { showAxis: !1, axisName: { color: "#8F837A" }, axisLabels: { show: !1 } } } } } }, Aa = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", title: { color: "#50606C", subtitle: { color: "#718890" } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, zoom: { color: "#92B0AB", highlightColor: "#50606C" }, highlighter: { color: "#7DA9B5" }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" }, bars: { totalValues: { color: "#50606C" } }, grid: { x: { showHorizontalLines: !0, axisColor: "#829C98", axisName: { color: "#50606C" }, timeLabels: { color: "#61747E" } }, y: { showVerticalLines: !0, axisColor: "#829C98", axisName: { color: "#50606C" }, axisLabels: { color: "#61747E" } } } } } }, Sa = {
+  default: {},
+  dark: xa,
+  celebration: ka,
+  celebrationNight: Ca,
+  hack: wa,
+  zen: La,
+  concrete: Aa
+}, Nr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: ka,
+  celebrationNight: Ca,
+  concrete: Aa,
+  dark: xa,
+  default: Sa,
+  hack: wa,
+  zen: La
+}, Symbol.toStringTag, { value: "Module" })), mo = ["id"], po = ["id"], xo = ["xmlns", "viewBox"], ko = ["x", "y", "width", "height"], Co = { key: 1 }, wo = ["id"], Lo = ["stop-color"], Ao = ["stop-color"], So = ["stop-color"], zo = ["x", "y", "width", "height", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-dasharray"], _o = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Mo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], To = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], $o = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Fo = { key: 0 }, Do = ["x", "y", "height", "rx", "width", "fill", "stroke", "stroke-width"], No = { key: 0 }, Po = ["x", "y", "height", "rx", "width", "fill", "stroke", "stroke-width"], Oo = ["x", "y", "width", "rx", "height", "fill", "stroke", "stroke-width"], Eo = { key: 0 }, Ro = ["x", "y", "width", "rx", "height", "fill", "stroke", "stroke-width"], Io = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Bo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Vo = ["x", "y", "font-size", "fill", "font-weight"], Uo = ["transform", "font-size", "fill", "font-weight"], Ho = ["x", "y", "font-size", "fill", "font-weight"], Xo = ["x", "y", "font-size", "font-weight", "fill"], Yo = ["x", "y", "font-size", "fill", "font-weight"], Wo = ["x", "y", "font-size", "font-weight", "fill"], qo = ["x1", "x2", "y1", "y2", "stroke"], Go = ["x", "y", "font-size", "font-weight", "fill"], Jo = ["x1", "x2", "y1", "y2", "stroke"], Zo = ["font-size", "font-weight", "fill", "text-anchor", "transform"], Ko = { key: 0 }, Qo = { key: 1 }, jo = ["text-anchor", "font-size", "font-weight", "fill", "transform", "onClick"], er = ["text-anchor", "font-size", "fill", "transform", "innerHTML", "onClick"], tr = { key: 0 }, ar = { key: 1 }, lr = ["font-size", "font-weight", "fill", "x", "y", "onClick"], or = ["font-size", "font-weight", "fill", "x", "y", "onClick", "innerHTML"], rr = ["x", "y", "width", "height", "onClick", "onMouseenter", "onMouseleave", "fill"], sr = ["x", "y", "width", "height", "onClick", "onMouseenter", "onMouseleave", "fill"], nr = ["data-start", "data-end"], ir = {
+  key: 3,
+  class: "vue-data-ui-watermark"
+}, ur = ["x", "y", "height", "width", "fill", "stroke"], cr = ["id"], hr = ["onClick"], vr = ["innerHTML"], dr = {
+  __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(Xe, { expose: za, emit: _a }) {
+    const Ma = j(() => import("./Tooltip-WD0Ros6G.js")), Ta = j(() => import("./BaseIcon-CofSxalQ.js")), $a = j(() => import("./vue-ui-accordion-DSdZUn2C.js")), Fa = j(() => import("./DataTable-CHaOCmsE.js")), Da = j(() => import("./PenAndPaper-HCZQTkqi.js")), Na = j(() => import("./UserOptions-B3I-s3Lw.js")), Pa = j(() => import("./PackageVersion-Bq_mtsqr.js")), Oa = j(() => import("./BaseDraggableDialog-CRF94NJQ.js")), { vue_ui_stackbar: Ea } = Bl(), { isThemeValid: Ra, warnInvalidTheme: Ia } = no(), Ba = Pl(), k = Xe, be = _a, ye = b({
+      get() {
+        return !!k.dataset && k.dataset.length;
+      },
+      set(a) {
+        return a;
+      }
+    }), J = d(null), V = d(va()), Ye = d(!1), We = d(null), qe = d(""), F = d([]), mt = d(0), pt = d(null), xt = d(null), fe = d(null), kt = d(null), me = d(!1), G = d(null), le = d(!1), Ct = d(0), Va = d(0), Ua = d(0), wt = d(!1), pe = d(null), Ge = d(null), Je = d(null), Ze = d(null), oe = d(null), re = d(null), Ha = d(null), Ke = d(null), Qe = d(null);
+    ia(() => {
+      wt.value = !0, ot();
+    });
+    const e = d(at()), { loading: xe, FINAL_DATASET: je, manualLoading: $e } = ao({
+      ...Ol(k),
+      FINAL_CONFIG: e,
+      prepareConfig: at,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Be();
+        });
+      },
+      skeletonDataset: [
+        {
+          name: "",
+          series: [2, 3, 5, 8, 13, 21],
+          color: "#BABABA"
+        },
+        {
+          name: "",
+          series: [1, 2, 3, 5, 8, 13],
+          color: "#CACACA"
+        }
+      ],
+      skeletonConfig: Vl({
+        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: {
+                frame: {
+                  stroke: "#6A6A6A"
+                },
+                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: et, setUserOptionsVisibility: Lt, keepUserOptionState: At } = io({ config: e.value }), { svgRef: tt } = uo({ config: e.value.style.chart.title });
+    function Xa() {
+      Lt(!0);
+    }
+    function Ya() {
+      Lt(!1), be("selectX", { seriesIndex: null, datapoint: null }), G.value = null;
+    }
+    function at() {
+      const a = yt({
+        userConfig: k.config,
+        defaultConfig: Ea
+      });
+      let l = {};
+      const t = a.theme;
+      if (t)
+        if (!Ra.value(a))
+          Ia(a), l = a;
+        else {
+          const o = yt({
+            userConfig: Sa[t] || k.config,
+            defaultConfig: a
+          });
+          l = {
+            ...yt({
+              userConfig: k.config,
+              defaultConfig: o
+            }),
+            customPalette: a.customPalette.length ? a.customPalette : Ul[t] || He
+          };
+        }
+      else
+        l = a;
+      return k.config && de(k.config, "style.chart.grid.scale.scaleMin") ? l.style.chart.grid.scale.scaleMin = k.config.style.chart.grid.scale.scaleMin : l.style.chart.grid.scale.scaleMin = null, k.config && de(k.config, "style.chart.grid.scale.scaleMax") ? l.style.chart.grid.scale.scaleMax = k.config.style.chart.grid.scale.scaleMax : l.style.chart.grid.scale.scaleMax = null, k.config && de(k.config, "style.chart.zoom.startIndex") ? l.style.chart.zoom.startIndex = k.config.style.chart.zoom.startIndex : l.style.chart.zoom.startIndex = null, k.config && de(k.config, "style.chart.zoom.endIndex") ? l.style.chart.zoom.endIndex = k.config.style.chart.zoom.endIndex : l.style.chart.zoom.endIndex = null, k.config && de(k.config, "style.chart.bars.dataLabels.hideUnderValue") ? l.style.chart.bars.dataLabels.hideUnderValue = k.config.style.chart.bars.dataLabels.hideUnderValue : l.style.chart.bars.dataLabels.hideUnderValue = null, k.config && de(k.config, "style.chart.bars.dataLabels.hideUnderPercentage") ? l.style.chart.bars.dataLabels.hideUnderPercentage = k.config.style.chart.bars.dataLabels.hideUnderPercentage : l.style.chart.bars.dataLabels.hideUnderPercentage = null, l;
+    }
+    const St = b(() => e.value.style.chart.bars.dataLabels.hideUnderValue !== null), zt = b(() => e.value.style.chart.bars.dataLabels.hideUnderPercentage !== null);
+    ze(() => k.config, (a) => {
+      xe.value || (e.value = at()), et.value = !e.value.userOptions.showOnChartHover, ot(), Ct.value += 1, Va.value += 1, Ua.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, Ne();
+    }, { deep: !0 }), ze(() => k.dataset, (a) => {
+      Array.isArray(a) && a.length > 0 && ($e.value = !1), Ot();
+    }, { 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
+    });
+    ze(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: _t, isImaging: Mt, generatePdf: Tt, generateImage: $t } = to({
+      elementId: `stackbar_${V.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-stackbar",
+      options: e.value.userOptions.print
+    }), ue = 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
+      }
+    }), Wa = b(() => Hl(e.value.customPalette)), K = ua(null), ce = ua(null), Ft = d(null);
+    ia(() => {
+      ot();
+    });
+    const lt = b(() => !!e.value.debug);
+    function ot() {
+      if (da(k.dataset) ? (ga({
+        componentName: "VueUiStackbar",
+        type: "dataset",
+        debug: lt.value
+      }), $e.value = !0) : k.dataset.forEach((a, l) => {
+        Xl({
+          datasetObject: a,
+          requiredAttributes: ["name", "series"]
+        }).forEach((t) => {
+          ye.value = !1, ga({
+            componentName: "VueUiStackbar",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: l,
+            debug: lt.value
+          }), $e.value = !0;
+        });
+      }), da(k.dataset) || ($e.value = e.value.loading), setTimeout(() => {
+        le.value = !0;
+      }, 10), e.value.responsive) {
+        const a = ft(() => {
+          le.value = !1;
+          const { width: l, height: t } = eo({
+            chart: J.value,
+            title: e.value.style.chart.title.text ? pt.value : null,
+            legend: e.value.style.chart.legend.show ? xt.value : null,
+            slicer: e.value.style.chart.zoom.show && D.value > 6 ? fe.value.$el : null,
+            source: kt.value
+          });
+          requestAnimationFrame(() => {
+            ue.value.width = l, ue.value.height = t - 12, clearTimeout(Ft.value), Ft.value = setTimeout(() => {
+              le.value = !0;
+            }, 10);
+          });
+        });
+        K.value && (ce.value && K.value.unobserve(ce.value), K.value.disconnect()), K.value = new ResizeObserver(a), ce.value = J.value.parentNode, K.value.observe(ce.value);
+      }
+      Be();
+    }
+    gt(() => {
+      K.value && (ce.value && K.value.unobserve(ce.value), K.value.disconnect());
+    });
+    function qa() {
+      let a = 0;
+      e.value.orientation === "vertical" && oe.value && (a = Array.from(oe.value.querySelectorAll("text")).reduce((o, c) => {
+        const r = c.getComputedTextLength();
+        return r > o ? r : o;
+      }, 0)), e.value.orientation === "horizontal" && re.value && (a = Array.from(re.value.querySelectorAll("text")).reduce((o, c) => {
+        const r = c.getComputedTextLength();
+        return r > o ? r : o;
+      }, 0));
+      const l = Ze.value ? Ze.value.getBoundingClientRect().width : 0;
+      return a + l + (l ? 24 : 0);
+    }
+    const Fe = d(0), De = d(0), Ga = ft((a) => {
+      Fe.value = a;
+    }, 100);
+    ca((a) => {
+      const l = e.value.orientation === "vertical" ? re.value : oe.value;
+      if (!l) return;
+      const t = new ResizeObserver((o) => {
+        Ga(o[0].contentRect.height);
+      });
+      t.observe(l), a(() => t.disconnect());
+    });
+    const Ja = ft((a) => {
+      De.value = a + e.value.style.chart.bars.totalValues.fontSize;
+    }, 100);
+    function Za() {
+      if (e.value.orientation !== "horizontal") return 0;
+      const a = Ke.value;
+      if (!a) return 0;
+      const l = Array.from(a.querySelectorAll("text"));
+      if (!l.length) return 0;
+      let t = -1 / 0;
+      for (const c of l)
+        try {
+          const r = c.getBBox(), f = r.x + r.width;
+          f > t && (t = f);
+        } catch {
+        }
+      return Math.max(0, t - (u.value?.right ?? 0));
+    }
+    ca((a) => {
+      if (e.value.orientation !== "horizontal") return;
+      const l = Ke.value;
+      if (!l) return;
+      const t = () => {
+        const r = Za();
+        Ja(r);
+      };
+      t();
+      const o = new ResizeObserver(t);
+      o.observe(l);
+      const c = new MutationObserver(t);
+      c.observe(l, { childList: !0, subtree: !0, characterData: !0 }), a(() => {
+        o.disconnect(), c.disconnect();
+      });
+    }), gt(() => {
+      Fe.value = 0, De.value = 0;
+    });
+    const Dt = b(() => {
+      let a = 0;
+      Je.value && (a = Je.value.getBBox().height);
+      let l = 0;
+      return e.value.orientation === "vertical" && re.value && (l = Fe.value), e.value.orientation === "horizontal" && oe.value && (l = Fe.value), a + l;
+    }), u = b(() => {
+      const { height: a, width: l } = ue.value, { right: t } = ue.value.paddingRatio;
+      let o = e.value.style.chart.bars.totalValues.show && k.dataset && k.dataset.length > 1 ? e.value.style.chart.bars.totalValues.fontSize * 1.3 : 0, c = 0;
+      e.value.style.chart.grid.y.axisLabels.show && (c = qa());
+      const r = e.value.style.chart.padding.top + o, f = l - l * t - De.value, A = a - e.value.style.chart.padding.bottom - Dt.value - o, M = e.value.style.chart.padding.left + c, N = l - M - l * t - De.value, $ = a - r - e.value.style.chart.padding.bottom - Dt.value - o;
+      return {
+        chartHeight: a,
+        chartWidth: l,
+        top: r,
+        right: f,
+        bottom: A,
+        left: M,
+        width: Math.max(0, N),
+        height: Math.max(0, $)
+      };
+    }), Ka = b(() => {
+      const { left: a, top: l, width: t, height: o } = u.value, c = h.value.start, r = h.value.end, f = Math.max(1, r - c), A = Math.max(0, Math.min(f, (R.value.start ?? c) - c)), M = Math.max(0, Math.min(f, (R.value.end ?? r) - c)), N = Math.max(0, M - A), $ = {
+        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 E = o / f;
+        return {
+          x: a,
+          y: l + A * E,
+          width: t,
+          height: N * E,
+          ...$
+        };
+      } else {
+        const E = t / f;
+        return {
+          x: a + A * E,
+          y: l,
+          width: N * E,
+          height: o,
+          ...$
+        };
+      }
+    }), X = b(() => je.value.map((a, l) => {
+      const t = Yl(a.color) || Wa.value[l] || He[l] || He[l % He.length];
+      return {
+        ...a,
+        // In distributed mode, all values are converted to positive
+        series: JSON.parse(JSON.stringify(a.series)).map((o) => e.value.style.chart.bars.distributed ? Math.abs(o) : o),
+        // Store signs to manage display of neg values in distributed mode
+        signedSeries: a.series.map((o) => o >= 0 ? 1 : -1),
+        absoluteIndex: l,
+        id: va(),
+        color: t
+      };
+    })), D = b(() => Math.max(...X.value.filter((a) => !F.value.includes(a.id)).map((a) => a.series.length)));
+    function Qa(a) {
+      Qe.value = a;
+    }
+    const h = d({
+      start: 0,
+      end: Math.max(...je.value.map((a) => a.series.length))
+    }), R = d({ start: 0, end: Math.max(...je.value.map((a) => a.series.length)) }), Nt = b(() => e.value.style.chart.zoom.preview.enable && (R.value.start !== h.value.start || R.value.end !== h.value.end));
+    function Pt(a, l) {
+      R.value[a] = l;
+    }
+    function Ne() {
+      const a = D.value;
+      let l = Math.max(0, Math.min(h.value.start ?? 0, a - 1)), t = Math.max(l + 1, Math.min(h.value.end ?? a, a));
+      (!Number.isFinite(l) || !Number.isFinite(t) || t <= l) && (l = 0, t = a), h.value.start = l, h.value.end = t, R.value.start = l, R.value.end = t, fe.value && (fe.value.setStartValue(l), fe.value.setEndValue(t));
+    }
+    const ke = d(null);
+    function ja() {
+      return new Promise((a) => requestAnimationFrame(
+        () => requestAnimationFrame(() => a())
+      ));
+    }
+    gt(() => {
+      ke.value && cancelAnimationFrame(ke.value);
+    });
+    async function Ot() {
+      Be(), await El(), ke.value && cancelAnimationFrame(ke.value), ke.value = requestAnimationFrame(async () => {
+        await ja(), Be();
+      });
+    }
+    const p = b(() => {
+      let a;
+      return e.value.orientation === "vertical" ? a = u.value.width / (h.value.end - h.value.start) : a = u.value.height / (h.value.end - h.value.start), a <= 0 ? 0 : a;
+    }), Ce = b(() => Te(X.value.filter((a) => !F.value.includes(a.id))).slice(h.value.start, h.value.end)), se = b(() => e.value.style.chart.zoom.minimap.show ? Te(X.value.map((a) => ({
+      ...a,
+      series: a.series.map((l) => l ?? 0)
+    })).filter((a) => !F.value.includes(a.id))) : []), el = b(() => e.value.style.chart.zoom.minimap.show ? [{
+      name: "",
+      series: se.value,
+      color: "#000000",
+      isVisible: !0
+    }] : []), tl = b(() => Te(X.value.filter((a) => !F.value.includes(a.id)).map((a) => ({
+      ...a,
+      series: a.series.map((l, t) => a.signedSeries[t] === -1 && l >= 0 ? -l : l)
+    }))).slice(h.value.start, h.value.end)), Pe = b(() => {
+      const a = X.value.filter((l) => !F.value.includes(l.id));
+      return {
+        positive: Te(a.map((l) => ({
+          ...l,
+          series: l.series.slice(h.value.start, h.value.end).map((t) => t >= 0 ? t : 0)
+        }))),
+        negative: Te(a.map((l) => ({
+          ...l,
+          series: l.series.slice(h.value.start, h.value.end).map((t) => t < 0 ? t : 0)
+        })))
+      };
+    }), Y = b(() => {
+      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(...Pe.value.positive), l = Math.min(...Pe.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, o = !e.value.style.chart.bars.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? ba(t > 0 ? 0 : t, a < 0 ? 0 : a, e.value.style.chart.grid.scale.ticks) : ya(t > 0 ? 0 : t, a < 0 ? 0 : a, e.value.style.chart.grid.scale.ticks);
+      return o.ticks.map((c) => ({
+        zero: u.value.bottom - u.value.height * (Math.abs(o.min) / (o.max + Math.abs(o.min))),
+        y: u.value.bottom - u.value.height * ((c + Math.abs(o.min)) / (o.max + Math.abs(o.min))),
+        x: u.value.left - 8,
+        horizontal_zero: u.value.left + u.value.width * (Math.abs(o.min) / (o.max + Math.abs(o.min))),
+        horizontal_x: u.value.left + u.value.width * ((c + Math.abs(o.min)) / (o.max + Math.abs(o.min))),
+        horizontal_y: u.value.bottom - 8,
+        value: c
+      }));
+    }), O = b(() => pa({
+      values: e.value.style.chart.grid.x.timeLabels.values,
+      maxDatapoints: D.value,
+      formatter: e.value.style.chart.grid.x.timeLabels.datetimeFormatter,
+      start: h.value.start,
+      end: h.value.end
+    })), we = b(() => pa({
+      values: e.value.style.chart.grid.x.timeLabels.values,
+      maxDatapoints: D.value,
+      formatter: e.value.style.chart.grid.x.timeLabels.datetimeFormatter,
+      start: 0,
+      end: D.value
+    })), al = b(() => {
+      const a = e.value.style.chart.grid.x.timeLabels.modulo;
+      return O.value.length ? Math.min(a, [...new Set(O.value.map((l) => l.text))].length) : a;
+    }), Et = b(() => {
+      const a = e.value.style.chart.grid.x.timeLabels, l = O.value || [], t = we.value || [], o = h.value.start ?? 0, c = G.value, r = D.value, f = l.map((M) => M?.text ?? ""), A = t.map((M) => M?.text ?? "");
+      return Wl(
+        !!a.showOnlyFirstAndLast,
+        !!a.showOnlyAtModulo,
+        Math.max(1, al.value || 1),
+        f,
+        A,
+        o,
+        c,
+        r
+      );
+    }), Rt = b(() => {
+      const a = e.value.style.chart.grid.x.timeLabels.datetimeFormatter, l = oo({
+        useUTC: a.useUTC,
+        locale: ro[a.locale] || { months: [], shortMonths: [], days: [], shortDays: [] },
+        januaryAsYear: a.januaryAsYear
+      });
+      return (t, o) => {
+        const r = e.value.style.chart.grid.x.timeLabels.values?.[t];
+        return r == null ? "" : (l.formatDate(new Date(r), o), l.formatDate(new Date(r), o));
+      };
+    }), It = b(() => (e.value.style.chart.grid.x.timeLabels.values || []).map((l, t) => ({
+      text: Rt.value(t, e.value.style.chart.zoom.timeFormat),
+      absoluteIndex: t
+    }))), rt = b(() => (e.value.style.chart.grid.x.timeLabels.values || []).map((l, t) => ({
+      text: Rt.value(t, e.value.style.chart.tooltip.timeFormat),
+      absoluteIndex: t
+    }))), S = b(() => {
+      if (!ye.value && !xe.value) return [];
+      let a = Array(D.value).fill(0), l = Array(D.value).fill(0), t = Array(D.value).fill(0), o = Array(D.value).fill(0);
+      const c = Math.max(...Pe.value.positive) || 0, r = Math.min(...Pe.value.negative), f = [-1 / 0, 1 / 0, NaN, void 0, null].includes(r) ? 0 : r, A = !e.value.style.chart.bars.distributed && (e.value.style.chart.grid.scale.scaleMax !== null || e.value.style.chart.grid.scale.scaleMin !== null) ? ba(e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : f > 0 ? 0 : f, 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) : ya(e.value.style.chart.grid.scale.scaleMin !== null ? e.value.style.chart.grid.scale.scaleMin : f > 0 ? 0 : f, 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: M, max: N } = A, $ = N + (M >= 0 ? 0 : Math.abs(M)) || 1, E = u.value.height, I = u.value.width, Se = Y.value[0] ? Y.value[0].zero : u.value.bottom, W = Y.value[0] ? Y.value[0].horizontal_zero : u.value.left;
+      let la = Array(se.value.length).fill(0), oa = Array(se.value.length).fill(0);
+      return X.value.filter((he) => !F.value.includes(he.id)).map((he) => {
+        const Q = he.series.slice(), ra = Q.map((v, g) => la[g]), Cl = Q.map((v, g) => oa[g]);
+        Q.forEach((v, g) => {
+          (Number(v) || 0) >= 0 ? la[g] += Number(v) || 0 : oa[g] += Math.abs(Number(v) || 0);
+        });
+        const Z = he.series.slice(h.value.start, h.value.end), wl = he.signedSeries.slice(h.value.start, h.value.end), Ll = Z.map((v, g) => u.value.left + p.value * g + p.value * e.value.style.chart.bars.gapRatio / 4), Ue = (se.value || []).filter(Number.isFinite), ht = Ue.length ? Math.max(...Ue) : 0, vt = Ue.length ? Math.min(...Ue) : 0;
+        function sa({ minimapH: v }) {
+          const z = ht > 0, P = vt < 0;
+          if (z && P) {
+            const q = Math.max(ht, Math.abs(vt)) || 1e-9;
+            return {
+              pxPerUnit: v / 2 / q,
+              zero: v / 2
+            };
+          }
+          if (z) {
+            const q = Math.max(1e-9, ht);
+            return {
+              pxPerUnit: v / q,
+              zero: v
+            };
+          }
+          const _ = Math.max(1e-9, Math.abs(vt));
+          return {
+            pxPerUnit: v / _,
+            zero: 0
+          };
+        }
+        const Al = ({ left: v, unitW: g }) => {
+          const z = g * (e.value.style.chart.bars.gapRatio / 4);
+          return Q.map((P, _) => v + g * _ + z);
+        }, Sl = Z.map((v, g) => u.value.top + p.value * g + p.value * e.value.style.chart.bars.gapRatio / 4), zl = Z.map((v, g) => {
+          const z = e.value.style.chart.bars.distributed ? (v || 0) / Ce.value[g] : (v || 0) / $;
+          let P, _;
+          return v > 0 ? (_ = E * z, P = Se - _ - a[g], a[g] += _) : (_ = E * z, P = Se + t[g], t[g] += Math.abs(_)), P;
+        }), _l = ({ minimapH: v }) => {
+          if (e.value.style.chart.bars.distributed)
+            return Q.map((_, q) => {
+              const dt = Math.abs(Number(_) || 0), na = Math.abs(se.value?.[q] || 0) || 1e-9, Nl = (ra[q] + dt) / na;
+              return v - Nl * v;
+            });
+          const { pxPerUnit: g, zero: z } = sa({ minimapH: v });
+          return Q.map((P, _) => {
+            const q = Number(P) || 0;
+            return q >= 0 ? z - (ra[_] + q) * g : z + Cl[_] * g;
+          });
+        }, Ml = Z.map((v, g) => {
+          const z = e.value.style.chart.bars.distributed ? (v || 0) / Ce.value[g] : (v || 0) / $;
+          let P, _;
+          return v > 0 ? (_ = I * z, P = W + l[g], l[g] += _) : (_ = I * z, P = W - Math.abs(_) - o[g], o[g] += Math.abs(_)), P;
+        }), Tl = Z.map((v, g) => {
+          const z = e.value.style.chart.bars.distributed ? (v || 0) / Ce.value[g] : (v || 0) / $;
+          return v > 0 ? E * z : E * Math.abs(z);
+        }), $l = ({ minimapH: v }) => {
+          if (e.value.style.chart.bars.distributed)
+            return Q.map((P, _) => {
+              const q = Math.abs(Number(P) || 0), dt = Math.abs(se.value?.[_] || 0) || 1e-9;
+              return q / dt * v;
+            });
+          const { pxPerUnit: g } = sa({ minimapH: v });
+          return Q.map((z) => Math.abs(Number(z) || 0) * g);
+        }, Fl = Z.map((v, g) => {
+          const z = e.value.style.chart.bars.distributed ? (v || 0) / Ce.value[g] : (v || 0) / $;
+          return v > 0 ? I * z : I * Math.abs(z);
+        }), Dl = Z.map((v) => Math.abs(v)).reduce((v, g) => v + g, 0);
+        return {
+          ...he,
+          proportions: Z.map((v, g) => e.value.style.chart.bars.distributed ? (v || 0) / Ce.value[g] : (v || 0) / Dl),
+          series: Z,
+          signedSeries: wl,
+          x: Ll,
+          y: zl,
+          height: Tl,
+          horizontal_width: Fl,
+          horizontal_y: Sl,
+          horizontal_x: Ml,
+          xMinimap: Al,
+          yMinimap: _l,
+          heightMinimap: $l
+        };
+      });
+    }), Bt = b(() => tl.value.map((a, l) => ({
+      value: a,
+      sign: a >= 0 ? 1 : -1
+    })));
+    function Oe(a, l, t, o, c) {
+      const r = c === -1 && a >= 0 ? -a : a;
+      return ge(
+        e.value.style.chart.bars.dataLabels.formatter,
+        r,
+        ae({
+          p: e.value.style.chart.bars.dataLabels.prefix,
+          v: r,
+          s: e.value.style.chart.bars.dataLabels.suffix,
+          r: e.value.style.chart.bars.dataLabels.rounding
+        }),
+        { datapoint: l, seriesIndex: t, datapointIndex: o }
+      );
+    }
+    function Vt(a, l, t, o) {
+      return ge(
+        e.value.style.chart.bars.dataLabels.formatter,
+        a,
+        ae({
+          v: isNaN(a) ? 0 : a,
+          s: "%",
+          r: e.value.style.chart.bars.dataLabels.rounding
+        }),
+        { datapoint: l, seriesIndex: t, datapointIndex: o }
+      );
+    }
+    function Ut(a) {
+      const l = JSON.parse(JSON.stringify(S.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 + h.value.start }), be("selectDatapoint", { datapoint: l, period: O.value[a] });
+    }
+    function st(a) {
+      return JSON.parse(JSON.stringify(S.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: we.value[a]
+      }));
+    }
+    function Ht(a) {
+      if (e.value.events.datapointLeave) {
+        const l = st(a);
+        e.value.events.datapointLeave({ datapoint: l, seriesIndex: a + h.value.start });
+      }
+      Ye.value = null, G.value = null;
+    }
+    const ll = b(() => Array(D.value).fill(0).map((a, l) => st(l)));
+    ze(() => k.selectedXIndex, (a) => {
+      if ([null, void 0].includes(k.selectedXIndex)) {
+        G.value = null;
+        return;
+      }
+      const l = a - h.value.start;
+      l < 0 || a >= h.value.end ? G.value = null : G.value = l ?? null;
+    }, { immediate: !0 });
+    function Xt(a) {
+      G.value = a, Ye.value = !0;
+      const l = e.value.style.chart.tooltip.customFormat, t = st(a);
+      pl({ seriesIndex: a, datapoint: t }), e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a + h.value.start }), We.value = {
+        datapoint: t,
+        seriesIndex: a,
+        config: e.value,
+        series: S.value
+      };
+      const o = t.map((r) => Math.abs(r.value)).reduce((r, f) => r + f, 0), c = t.map((r) => ie(r.value)).reduce((r, f) => r + f, 0);
+      if (ma(l) && jl(() => l({
+        seriesIndex: a,
+        datapoint: t,
+        series: S.value,
+        config: e.value
+      })))
+        qe.value = l({
+          seriesIndex: a,
+          datapoint: t,
+          series: S.value,
+          config: e.value
+        });
+      else {
+        const {
+          showValue: r,
+          showTotal: f,
+          totalTranslation: A,
+          showPercentage: M,
+          borderColor: N,
+          roundingValue: $,
+          roundingPercentage: E
+        } = e.value.style.chart.tooltip;
+        let I = "";
+        (O.value[a] && O.value[a].text || rt.value[a] && rt.value[a].text && e.value.style.chart.tooltip.showTimeLabel) && (I += `<div style="width:100%;text-align:center;border-bottom:1px solid ${N};padding-bottom:6px;margin-bottom:3px;">${e.value.style.chart.tooltip.useDefaultTimeFormat ? O.value[a]?.text : rt.value[a]?.text || we.value[a]?.text || ""}</div>`), f && (I += `<div class="vue-data-ui-tooltip-total" style="display:flex;flex-direction:row;align-items:center;gap:4px">
+                <span>${A}:</span>
+                <span>
+                    ${ge(
+          e.value.style.chart.bars.dataLabels.formatter,
+          c,
+          ae({
+            p: e.value.style.chart.bars.dataLabels.prefix,
+            v: c,
+            s: e.value.style.chart.bars.dataLabels.suffix,
+            r: $
+          }),
+          { datapoint: { name: A, value: c } }
+        )}
+                </span>
+            </div>`);
+        const Se = [
+          r && M ? "(" : "",
+          r && M ? ")" : ""
+        ];
+        t.reverse().forEach((W) => {
+          I += `
+                <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_${W.id})` : W.color}"/>${Ba.pattern ? `<rect rx="5" x="0" y="0" height="60" width="60" stroke="none" fill="url(#pattern_${V.value}_${W.absoluteIndex})"/>` : ""}</svg>
+                    ${W.name}${r || M ? ":" : ""} ${r ? ge(
+            e.value.style.chart.bars.dataLabels.formatter,
+            W.value,
+            ae({
+              p: e.value.style.chart.bars.dataLabels.prefix,
+              v: W.value,
+              s: e.value.style.chart.bars.dataLabels.suffix,
+              r: $
+            })
+          ) : ""} ${Se[0]}${M ? ae({
+            v: isNaN(W.value / o) ? 0 : Math.abs(W.value) / o * 100,
+            // Negs are absed to show relative proportion to absolute total. It's opinionated.
+            s: "%",
+            r: E
+          }) : ""}${Se[1]}
+                </div>
+            `;
+        }), qe.value = `<div>${I}</div>`;
+      }
+    }
+    const ol = b(() => ue.value.width), rl = b(() => ue.value.height);
+    co({
+      timeLabelsEls: e.value.orientation === "vertical" ? re : oe,
+      timeLabels: O,
+      slicer: h,
+      configRef: e,
+      rotationPath: ["style", "chart", "grid", "x", "timeLabels", "rotation"],
+      autoRotatePath: ["style", "chart", "grid", "x", "timeLabels", "autoRotate", "enable"],
+      isAutoSize: !1,
+      width: ol,
+      height: rl,
+      rotation: e.value.style.chart.grid.x.timeLabels.autoRotate.angle
+    });
+    function Yt(a) {
+      me.value = a, mt.value += 1;
+    }
+    function Wt() {
+      T.value.showTable = !T.value.showTable;
+    }
+    function qt() {
+      T.value.dataLabels.show = !T.value.dataLabels.show;
+    }
+    function Gt() {
+      T.value.showTooltip = !T.value.showTooltip;
+    }
+    function sl() {
+      return S.value;
+    }
+    const Jt = b(() => {
+      if (S.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
+      const a = S.value.map(({ name: t, color: o }) => ({
+        label: t,
+        color: o
+      })), l = [];
+      return O.value.forEach((t) => {
+        const o = [e.value.style.chart.grid.x.timeLabels.values[t.absoluteIndex] ? t.text : i + 1];
+        X.value.forEach((c) => {
+          o.push(Number((c.series[t.absoluteIndex] || 0).toFixed(e.value.table.td.roundingValue)));
+        }), l.push(o);
+      }), { head: a, body: l };
+    });
+    function nt(a = null) {
+      const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], t = ["", ...Jt.value.head.map((f) => f.label)], o = Jt.value.body, c = l.concat([t]).concat(o), r = Kl(c);
+      a ? a(r) : Ql({ csvContent: r, title: e.value.style.chart.title.text || "vue-ui-stackbar" });
+    }
+    const Ee = b(() => {
+      const a = [""].concat(S.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 < D.value; c += 1) {
+        const r = S.value.map((f) => f.series[c] ?? 0).reduce((f, A) => f + A, 0);
+        l.push([e.value.style.chart.grid.x.timeLabels.values.slice(h.value.start, h.value.end)[c] ? O.value[c].text : c + 1].concat(S.value.map((f) => (f.series[c] ?? 0).toFixed(e.value.table.td.roundingValue))).concat((r ?? 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
+      }, o = [e.value.table.columnNames.period].concat(S.value.map((c) => c.name)).concat(e.value.table.columnNames.total);
+      return { head: a, body: l.slice(0, h.value.end - h.value.start), config: t, colNames: o };
+    });
+    function it(a) {
+      if (F.value.includes(a.id))
+        F.value = F.value.filter((l) => l !== a.id);
+      else {
+        if (F.value.length === X.value.length - 1) return;
+        F.value.push(a.id);
+      }
+      be("selectLegend", S.value);
+    }
+    function Zt(a) {
+      if (!X.value.length)
+        return e.value.debug && console.warn("VueUiStackbar - There are no series to show."), null;
+      const l = X.value.find((t) => t.name === a);
+      return l || (e.value.debug && console.warn(`VueUiStackbar - Series name not found "${a}"`), null);
+    }
+    function nl(a) {
+      const l = Zt(a);
+      l !== null && F.value.includes(l.id) && it({ id: l.id });
+    }
+    function il(a) {
+      const l = Zt(a);
+      l !== null && (F.value.includes(l.id) || it({ id: l.id }));
+    }
+    const ut = b(() => X.value.map((a, l) => ({
+      ...a,
+      shape: "square"
+    })).map((a) => ({
+      ...a,
+      opacity: F.value.includes(a.id) ? 0.5 : 1,
+      segregate: () => it(a),
+      isSegregated: F.value.includes(a.id)
+    }))), ul = b(() => ({
+      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" : ""
+    })), Re = d(!1);
+    function ct() {
+      Re.value = !Re.value;
+    }
+    function Ie(a, l) {
+      const t = JSON.parse(JSON.stringify(S.value)).map((o) => ({
+        name: o.name,
+        value: o.series[l] === 0 ? 0 : (o.signedSeries[l] === -1 && o.series[l] >= 0 ? -o.series[l] : o.series[l]) || null,
+        proportion: o.proportions[l] || null,
+        color: o.color,
+        id: o.id
+      }));
+      be("selectTimeLabel", {
+        datapoint: t,
+        absoluteIndex: a.absoluteIndex,
+        label: a.text
+      });
+    }
+    const cl = b(() => Math.max(...S.value.flatMap((a) => a.series)));
+    function Kt(a, l) {
+      return e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? zt.value ? l * 100 >= e.value.style.chart.bars.dataLabels.hideUnderPercentage : e.value.style.chart.bars.dataLabels.hideEmptyPercentages ? l > 0 : !0 : zt.value ? (St.value && lt.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 > cl.value * e.value.style.chart.bars.dataLabels.hideUnderPercentage / 100) : St.value ? Math.abs(a) >= e.value.style.chart.bars.dataLabels.hideUnderValue : e.value.style.chart.bars.dataLabels.hideEmptyValues ? a !== 0 : !0;
+    }
+    async function hl({ scale: a = 2 } = {}) {
+      if (!J.value) return;
+      const { width: l, height: t } = J.value.getBoundingClientRect(), o = l / t, { imageUri: c, base64: r } = await ho({ domElement: J.value, base64: !0, img: !0, scale: a });
+      return {
+        imageUri: c,
+        base64: r,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: t,
+        aspectRatio: o
+      };
+    }
+    const Le = b(() => {
+      const a = e.value.table.useDialog && !e.value.table.show, l = T.value.showTable;
+      return {
+        component: a ? Oa : $a,
+        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: me.value,
+          fullscreenParent: J.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
+            }
+          }
+        }
+      };
+    });
+    ze(() => T.value.showTable, (a) => {
+      e.value.table.show || (a && e.value.table.useDialog && pe.value ? pe.value.open() : "close" in pe.value && pe.value.close());
+    });
+    function Qt() {
+      T.value.showTable = !1, Ge.value && Ge.value.setTableIconState(!1);
+    }
+    const vl = b(() => e.value.style.chart.backgroundColor), dl = b(() => e.value.style.chart.legend), gl = b(() => e.value.style.chart.title), { exportSvg: bl, getSvg: yl } = so({
+      svg: tt,
+      title: gl,
+      legend: dl,
+      legendItems: ut,
+      backgroundColor: vl
+    });
+    async function jt({ isCb: a }) {
+      if (a) {
+        const { blob: l, url: t, text: o, dataUrl: c } = await yl();
+        e.value.userOptions.callbacks.svg({ blob: l, url: t, text: o, dataUrl: c });
+      } else
+        bl();
+    }
+    function ea(a) {
+      const l = D.value;
+      return a > l ? l : a < 0 || a < h.value.start ? e.value.style.chart.zoom.startIndex !== null ? h.value.start + 1 : 1 : a;
+    }
+    const Ae = d(!1), ta = d(!1);
+    function Be() {
+      if (!Ae.value) {
+        Ae.value = !0;
+        try {
+          const { startIndex: a, endIndex: l } = e.value.style.chart.zoom, t = D.value, o = a ?? 0, c = l != null ? Math.min(ea(l + 1), t) : t;
+          Ve.value = !0, h.value.start = o, h.value.end = c, R.value.start = o, R.value.end = c, Ne(), ta.value = !0;
+        } finally {
+          queueMicrotask(() => {
+            Ve.value = !1;
+          }), Ae.value = !1;
+        }
+      }
+    }
+    const Ve = d(!1);
+    function fl(a) {
+      Ae.value || Ve.value || a !== h.value.start && (h.value.start = a, R.value.start = a, Ne());
+    }
+    function ml(a) {
+      if (Ae.value || Ve.value) return;
+      const l = ea(a);
+      l !== h.value.end && (h.value.end = l, R.value.end = l, Ne());
+    }
+    function pl({ seriesIndex: a, datapoint: l }) {
+      const t = h.value.start + a;
+      be("selectX", {
+        dataset: l,
+        index: t,
+        indexLabel: e.value.style.chart.grid.x.timeLabels.values[t]
+      });
+    }
+    function aa() {
+      return { y0: Y.value?.[0]?.zero ?? u.value.bottom };
+    }
+    function xl(a) {
+      const { y0: l } = aa(), t = e.value.style.chart.bars.totalValues, o = Math.max(2, t.fontSize * 0.3 + t.offsetY);
+      let c = 1 / 0, r = !1;
+      for (const N of S.value || []) {
+        const $ = N?.series?.[a] ?? 0, E = N?.height?.[a] ?? 0, I = N?.y?.[a];
+        $ > 0 && E > 0 && Number.isFinite(I) && (r = !0, I < c && (c = I));
+      }
+      const A = (r && Number.isFinite(c) ? c : l) - o;
+      return Math.min(
+        Math.max(A, 0),
+        u.value.bottom
+      );
+    }
+    function kl(a) {
+      const { x0: l } = aa(), t = Math.max(2, e.value.style.chart.bars.totalValues.fontSize * 0.3 + e.value.style.chart.bars.totalValues.offsetX);
+      let o = -1 / 0, c = !1;
+      for (const f of S.value || []) {
+        const A = f?.series?.[a] ?? 0, M = f?.horizontal_x?.[a], N = f?.horizontal_width?.[a], $ = Number.isFinite(N) ? Math.max(0, N) : 0;
+        Number.isFinite(M) && A > 0 && $ > 0 && (c = !0, o = Math.max(o, M + $));
+      }
+      return (c && Number.isFinite(o) ? o : l) + t;
+    }
+    return za({
+      getData: sl,
+      getImage: hl,
+      generatePdf: Tt,
+      generateCsv: nt,
+      generateImage: $t,
+      generateSvg: jt,
+      hideSeries: il,
+      showSeries: nl,
+      toggleTable: Wt,
+      toggleLabels: qt,
+      toggleTooltip: Gt,
+      toggleAnnotator: ct,
+      toggleFullscreen: Yt
+    }), (a, l) => (s(), n("div", {
+      id: `stackbar_${V.value}`,
+      ref_key: "stackbarChart",
+      ref: J,
+      class: ve({ "vue-data-ui-component": !0, "vue-ui-stackbar": !0, "vue-data-ui-wrapper-fullscreen": me.value }),
+      style: ne(`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: Xa,
+      onMouseleave: Ya
+    }, [
+      e.value.userOptions.buttons.annotator ? (s(), ee(m(Da), {
+        key: 0,
+        svgRef: m(tt),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: Re.value,
+        onClose: ct
+      }, {
+        "annotator-action-close": L(() => [
+          C(a.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": L(({ color: t }) => [
+          C(a.$slots, "annotator-action-color", U(H({ color: t })), void 0, !0)
+        ]),
+        "annotator-action-draw": L(({ mode: t }) => [
+          C(a.$slots, "annotator-action-draw", U(H({ mode: t })), void 0, !0)
+        ]),
+        "annotator-action-undo": L(({ disabled: t }) => [
+          C(a.$slots, "annotator-action-undo", U(H({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-redo": L(({ disabled: t }) => [
+          C(a.$slots, "annotator-action-redo", U(H({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-delete": L(({ disabled: t }) => [
+          C(a.$slots, "annotator-action-delete", U(H({ disabled: t })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
+      C(a.$slots, "userConfig", {}, void 0, !0),
+      e.value.style.chart.title.text ? (s(), n("div", {
+        key: 1,
+        ref_key: "chartTitle",
+        ref: pt,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (s(), ee(vo, {
+          key: `title_${Ct.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),
+      te("div", {
+        id: `legend-top-${V.value}`
+      }, null, 8, po),
+      e.value.userOptions.show && ye.value && (m(At) || m(et)) ? (s(), ee(m(Na), {
+        ref_key: "userOptionsRef",
+        ref: Ge,
+        key: `user_option_${mt.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: m(_t),
+        isImaging: m(Mt),
+        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,
+        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: me.value,
+        chartElement: J.value,
+        position: e.value.userOptions.position,
+        isTooltip: T.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: Re.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleFullscreen: Yt,
+        onGeneratePdf: m(Tt),
+        onGenerateCsv: nt,
+        onGenerateImage: m($t),
+        onGenerateSvg: jt,
+        onToggleTable: Wt,
+        onToggleLabels: qt,
+        onToggleTooltip: Gt,
+        onToggleAnnotator: ct,
+        style: ne({
+          visibility: m(At) ? m(et) ? "visible" : "hidden" : "visible"
+        })
+      }, bt({ _: 2 }, [
+        a.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: L(({ isOpen: t, color: o }) => [
+            C(a.$slots, "menuIcon", U(H({ isOpen: t, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        a.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: L(() => [
+            C(a.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        a.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: L(() => [
+            C(a.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        a.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: L(() => [
+            C(a.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        a.$slots.optionImg ? {
+          name: "optionImg",
+          fn: L(() => [
+            C(a.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        a.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: L(() => [
+            C(a.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        a.$slots.optionTable ? {
+          name: "optionTable",
+          fn: L(() => [
+            C(a.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        a.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: L(() => [
+            C(a.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        a.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: L(({ toggleFullscreen: t, isFullscreen: o }) => [
+            C(a.$slots, "optionFullscreen", U(H({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        a.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: L(({ toggleAnnotator: t, isAnnotator: o }) => [
+            C(a.$slots, "optionAnnotator", U(H({ toggleAnnotator: t, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "9"
+        } : 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"])) : y("", !0),
+      (s(), n("svg", {
+        ref_key: "svgRef",
+        ref: tt,
+        xmlns: m(ql),
+        viewBox: `0 0 ${u.value.chartWidth <= 0 ? 10 : u.value.chartWidth} ${u.value.chartHeight <= 0 ? 10 : u.value.chartHeight}`,
+        class: ve({ "vue-data-ui-loading": m(xe) }),
+        style: ne(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        _e(m(Pa)),
+        a.$slots["chart-background"] ? (s(), 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"
+          }
+        }, [
+          C(a.$slots, "chart-background", {}, void 0, !0)
+        ], 8, ko)) : y("", !0),
+        e.value.style.chart.bars.gradient.show ? (s(), n("defs", Co, [
+          (s(!0), n(x, null, w(S.value, (t, o) => (s(), n("linearGradient", {
+            id: `gradient_${t.id}`,
+            x1: "0%",
+            y1: "0%",
+            x2: "0%",
+            y2: "100%"
+          }, [
+            te("stop", {
+              offset: "0%",
+              "stop-color": t.color
+            }, null, 8, Lo),
+            te("stop", {
+              offset: "61.8%",
+              "stop-color": m(Gl)(t.color, e.value.style.chart.bars.gradient.intensity / 100)
+            }, null, 8, Ao),
+            te("stop", {
+              offset: "100%",
+              "stop-color": t.color
+            }, null, 8, So)
+          ], 8, wo))), 256))
+        ])) : y("", !0),
+        e.value.style.chart.grid.frame.show ? (s(), n("rect", {
+          key: 2,
+          style: { pointerEvents: "none", transition: "none", animation: "none !important" },
+          x: Math.max(0, u.value.left),
+          y: Math.max(0, u.value.top),
+          width: Math.max(0, u.value.width),
+          height: Math.max(0, u.value.height),
+          fill: "transparent",
+          stroke: e.value.style.chart.grid.frame.stroke,
+          "stroke-width": e.value.style.chart.grid.frame.strokeWidth,
+          "stroke-linecap": e.value.style.chart.grid.frame.strokeLinecap,
+          "stroke-linejoin": e.value.style.chart.grid.frame.strokeLinejoin,
+          "stroke-dasharray": e.value.style.chart.grid.frame.strokeDasharray
+        }, null, 8, zo)) : y("", !0),
+        e.value.style.chart.grid.x.showHorizontalLines && e.value.orientation === "vertical" ? (s(!0), n(x, { key: 3 }, w(Y.value, (t, o) => (s(), 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, _o))), 256)) : y("", !0),
+        e.value.style.chart.grid.x.showHorizontalLines && e.value.orientation === "horizontal" ? (s(!0), n(x, { key: 4 }, w(h.value.end - h.value.start + 1, (t, o) => (s(), n("line", {
+          x1: u.value.left,
+          x2: u.value.right,
+          y1: u.value.top + p.value * o,
+          y2: u.value.top + p.value * o,
+          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, Mo))), 256)) : y("", !0),
+        e.value.style.chart.grid.y.showVerticalLines && e.value.orientation === "vertical" ? (s(!0), n(x, { key: 5 }, w(h.value.end - h.value.start + 1, (t, o) => (s(), n("line", {
+          x1: u.value.left + p.value * o,
+          x2: u.value.left + p.value * o,
+          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, To))), 256)) : y("", !0),
+        e.value.style.chart.grid.y.showVerticalLines && e.value.orientation === "horizontal" ? (s(!0), n(x, { key: 6 }, w(Y.value, (t, o) => (s(), 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, $o))), 256)) : y("", !0),
+        (s(!0), n(x, null, w(S.value, (t, o) => (s(), n("g", null, [
+          a.$slots.pattern ? (s(), n("defs", Fo, [
+            C(a.$slots, "pattern", Me({ ref_for: !0 }, { seriesIndex: t.absoluteIndex, patternId: `pattern_${V.value}_${t.absoluteIndex}` }), void 0, !0)
+          ])) : y("", !0),
+          e.value.orientation === "vertical" ? (s(), n(x, { key: 1 }, [
+            (s(!0), n(x, null, w(t.x, (c, r) => (s(), n("rect", {
+              x: c,
+              y: m(ie)(t.y[r]),
+              height: t.height[r] < 0 ? 1e-4 : t.height[r] || 0,
+              rx: e.value.style.chart.bars.borderRadius > t.height[r] / 2 ? (t.height[r] < 0 ? 0 : t.height[r]) / 2 : e.value.style.chart.bars.borderRadius,
+              width: p.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: ve({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": le.value })
+            }, null, 10, Do))), 256)),
+            a.$slots.pattern ? (s(), n("g", No, [
+              (s(!0), n(x, null, w(t.x, (c, r) => (s(), n("rect", {
+                x: c,
+                y: m(ie)(t.y[r]),
+                height: t.height[r] < 0 ? 1e-4 : t.height[r] || 0,
+                rx: e.value.style.chart.bars.borderRadius > t.height[r] / 2 ? (t.height[r] < 0 ? 0 : t.height[r]) / 2 : e.value.style.chart.bars.borderRadius,
+                width: p.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: ve({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": le.value })
+              }, null, 10, Po))), 256))
+            ])) : y("", !0)
+          ], 64)) : (s(), n(x, { key: 2 }, [
+            (s(!0), n(x, null, w(t.horizontal_x, (c, r) => (s(), n("rect", {
+              x: m(ie)(c, u.value.left),
+              y: t.horizontal_y[r] < 0 ? 0 : t.horizontal_y[r],
+              width: m(ie)(t.horizontal_width[r] < 0 ? 1e-4 : t.horizontal_width[r]),
+              rx: e.value.style.chart.bars.borderRadius > t.height[r] / 2 ? (t.height[r] < 0 ? 0 : t.height[r]) / 2 : e.value.style.chart.bars.borderRadius,
+              height: p.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: ve({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": le.value })
+            }, null, 10, Oo))), 256)),
+            a.$slots.pattern ? (s(), n("g", Eo, [
+              (s(!0), n(x, null, w(t.horizontal_x, (c, r) => (s(), n("rect", {
+                x: m(ie)(c, u.value.left),
+                y: t.horizontal_y[r] < 0 ? 0 : t.horizontal_y[r],
+                width: m(ie)(t.horizontal_width[r] < 0 ? 1e-4 : t.horizontal_width[r]),
+                rx: e.value.style.chart.bars.borderRadius > t.height[r] / 2 ? (t.height[r] < 0 ? 0 : t.height[r]) / 2 : e.value.style.chart.bars.borderRadius,
+                height: p.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: ve({ "vue-data-ui-bar-animated": e.value.useCssAnimation, "vue-data-ui-bar-transition": le.value })
+              }, null, 10, Ro))), 256))
+            ])) : y("", !0)
+          ], 64))
+        ]))), 256)),
+        e.value.style.chart.grid.x.showAxis ? (s(), n("line", {
+          key: 7,
+          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, Io)) : y("", !0),
+        e.value.style.chart.grid.y.showAxis && !e.value.style.chart.bars.distributed ? (s(), n("line", {
+          key: 8,
+          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, Bo)) : y("", !0),
+        e.value.style.chart.grid.x.axisName.show && e.value.style.chart.grid.x.axisName.text ? (s(), n("text", {
+          key: 9,
+          ref_key: "xAxisLabel",
+          ref: Je,
+          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"
+        }, B(e.value.style.chart.grid.x.axisName.text), 9, Vo)) : y("", !0),
+        e.value.style.chart.grid.y.axisName.show && e.value.style.chart.grid.y.axisName.text ? (s(), n("text", {
+          key: 10,
+          ref_key: "yAxisLabel",
+          ref: Ze,
+          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"
+        }, B(e.value.style.chart.grid.y.axisName.text), 9, Uo)) : y("", !0),
+        T.value.dataLabels.show && e.value.orientation === "vertical" ? (s(), n(x, { key: 11 }, [
+          (s(!0), n(x, null, w(S.value, (t, o) => (s(), n("g", null, [
+            (s(!0), n(x, null, w(t.x, (c, r) => (s(), n(x, null, [
+              Kt(t.series[r], t.proportions[r]) ? (s(), n("text", {
+                key: 0,
+                x: c + p.value * (1 - e.value.style.chart.bars.gapRatio / 2) / 2,
+                y: t.y[r] + t.height[r] / 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 ? m(fa)(t.color) : e.value.style.chart.bars.dataLabels.color,
+                "font-weight": e.value.style.chart.bars.dataLabels.bold ? "bold" : "normal",
+                "text-anchor": "middle"
+              }, B(e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? Vt(t.proportions[r] * 100, t, o, r) : Oe(t.series[r], t, o, r, t.signedSeries[r])), 9, Ho)) : y("", !0)
+            ], 64))), 256))
+          ]))), 256)),
+          e.value.style.chart.bars.totalValues.show && S.value.length > 1 ? (s(), n("g", {
+            key: 0,
+            ref_key: "sumTop",
+            ref: Ha
+          }, [
+            (s(!0), n(x, null, w(Bt.value, (t, o) => (s(), n(x, null, [
+              !e.value.style.chart.bars.dataLabels.hideEmptyValues || t.value !== 0 ? (s(), n("text", {
+                key: 0,
+                x: u.value.left + p.value * o + p.value / 2,
+                y: xl(o),
+                "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
+              }, B(Oe(t.value, t, o, t.sign)), 9, Xo)) : y("", !0)
+            ], 64))), 256))
+          ], 512)) : y("", !0)
+        ], 64)) : y("", !0),
+        T.value.dataLabels.show && e.value.orientation === "horizontal" ? (s(), n(x, { key: 12 }, [
+          (s(!0), n(x, null, w(S.value, (t, o) => (s(), n("g", null, [
+            (s(!0), n(x, null, w(t.horizontal_x, (c, r) => (s(), n(x, null, [
+              Kt(t.series[r], t.proportions[r]) ? (s(), n("text", {
+                key: 0,
+                x: c + (t.horizontal_width[r] < 0 ? 1e-4 : t.horizontal_width[r]) / 2,
+                y: t.horizontal_y[r] + p.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 ? m(fa)(t.color) : e.value.style.chart.bars.dataLabels.color,
+                "font-weight": e.value.style.chart.bars.dataLabels.bold ? "bold" : "normal",
+                "text-anchor": "middle"
+              }, B(e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? Vt(t.proportions[r] * 100, t, o, r) : Oe(t.series[r], t, o, r, t.signedSeries[r])), 9, Yo)) : y("", !0)
+            ], 64))), 256))
+          ]))), 256)),
+          e.value.style.chart.bars.totalValues.show && S.value.length > 1 ? (s(), n("g", {
+            key: 0,
+            ref_key: "sumRight",
+            ref: Ke
+          }, [
+            (s(!0), n(x, null, w(Bt.value, (t, o) => (s(), n(x, null, [
+              !e.value.style.chart.bars.dataLabels.hideEmptyValues || t.value !== 0 ? (s(), n("text", {
+                key: 0,
+                x: kl(o),
+                y: u.value.top + p.value * o + p.value / 2 + e.value.style.chart.bars.totalValues.fontSize / 3,
+                "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
+              }, B(Oe(t.value, t, o, t.sign)), 9, Wo)) : 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(), n("g", {
+          key: 13,
+          ref_key: "scaleLabels",
+          ref: oe
+        }, [
+          (s(!0), n(x, null, w(Y.value, (t, o) => (s(), 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, qo))), 256)),
+          (s(!0), n(x, null, w(Y.value, (t, o) => (s(), 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"
+          }, B(m(ge)(
+            e.value.style.chart.grid.y.axisLabels.formatter,
+            t.value,
+            m(ae)({
+              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, Go))), 256))
+        ], 512)) : y("", !0),
+        e.value.style.chart.grid.y.axisLabels.show && !e.value.style.chart.bars.distributed && e.value.orientation === "horizontal" ? (s(), n("g", {
+          key: 14,
+          ref_key: "scaleLabels",
+          ref: oe
+        }, [
+          (s(!0), n(x, null, w(Y.value, (t, o) => (s(), 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, Jo))), 256)),
+          (s(!0), n(x, null, w(Y.value, (t, o) => (s(), 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})`
+          }, B(m(ge)(
+            e.value.style.chart.grid.y.axisLabels.formatter,
+            t.value,
+            m(ae)({
+              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, Zo))), 256))
+        ], 512)) : y("", !0),
+        e.value.style.chart.grid.x.timeLabels.show && e.value.orientation === "vertical" ? (s(), n("g", {
+          key: 15,
+          ref_key: "timeLabelsEls",
+          ref: re
+        }, [
+          a.$slots["time-label"] ? (s(), n("g", Ko, [
+            (s(!0), n(x, null, w(Et.value, (t, o) => (s(), n("g", null, [
+              C(a.$slots, "time-label", Me({ ref_for: !0 }, {
+                x: u.value.left + p.value * o + p.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 + p.value * o + p.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))
+          ])) : (s(), n("g", Qo, [
+            (s(!0), n(x, null, w(Et.value, (t, o) => (s(), n("g", null, [
+              String(t.text).includes(`
+`) ? (s(), n("text", {
+                key: o + "-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 + p.value * o + p.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: m(Jl)({
+                  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: () => Ie(t, o)
+              }, null, 8, er)) : (s(), n("text", {
+                class: "vue-data-ui-time-label",
+                key: o,
+                "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 + p.value * o + p.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: () => Ie(t, o)
+              }, B(t.text), 9, jo))
+            ]))), 256))
+          ]))
+        ], 512)) : y("", !0),
+        e.value.style.chart.grid.x.timeLabels.show && e.value.orientation === "horizontal" ? (s(), n("g", {
+          key: 16,
+          ref_key: "timeLabelsEls",
+          ref: re
+        }, [
+          a.$slots["time-label"] ? (s(), n("g", tr, [
+            (s(!0), n(x, null, w(O.value, (t, o) => (s(), n("g", null, [
+              C(a.$slots, "time-label", Me({ ref_for: !0 }, {
+                x: u.value.left - 8,
+                y: u.value.top + p.value * o + p.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(), n("g", ar, [
+            (s(!0), n(x, null, w(O.value, (t, o) => (s(), n("g", null, [
+              String(t.text).includes(`
+`) ? (s(), 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 + p.value * o + p.value / 2 + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
+                style: { cursor: "pointer" },
+                onClick: () => Ie(t, o),
+                innerHTML: m(Zl)({
+                  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, or)) : (s(), 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 + p.value * o + p.value / 2 + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
+                style: {
+                  cursor: "pointer"
+                },
+                onClick: () => Ie(t, o)
+              }, B(t.text), 9, lr))
+            ]))), 256))
+          ]))
+        ], 512)) : y("", !0),
+        T.value.showTooltip && e.value.orientation === "vertical" ? (s(!0), n(x, { key: 17 }, w(h.value.end - h.value.start, (t, o) => (s(), n("rect", {
+          x: u.value.left + o * p.value,
+          y: u.value.top,
+          width: p.value,
+          height: u.value.height < 0 ? 0 : u.value.height,
+          onClick: () => Ut(o),
+          onMouseenter: () => Xt(o),
+          onMouseleave: () => Ht(o),
+          fill: o === G.value || o === Qe.value ? e.value.style.chart.highlighter.color : "transparent",
+          style: ne({ opacity: e.value.style.chart.highlighter.opacity / 100 })
+        }, null, 44, rr))), 256)) : y("", !0),
+        T.value.showTooltip && e.value.orientation === "horizontal" ? (s(!0), n(x, { key: 18 }, w(h.value.end - h.value.start, (t, o) => (s(), n("rect", {
+          x: u.value.left,
+          y: u.value.top + o * p.value,
+          width: u.value.width < 0 ? 0 : u.value.width,
+          height: p.value,
+          onClick: () => Ut(o),
+          onMouseenter: () => Xt(o),
+          onMouseleave: () => Ht(o),
+          fill: o === G.value || o === Qe.value ? e.value.style.chart.highlighter.color : "transparent",
+          style: ne({ opacity: e.value.style.chart.highlighter.opacity / 100 })
+        }, null, 44, sr))), 256)) : y("", !0),
+        Nt.value ? (s(), n("rect", Me({ key: 19 }, Ka.value, {
+          "data-start": h.value.start,
+          "data-end": h.value.end
+        }), null, 16, nr)) : y("", !0),
+        C(a.$slots, "svg", {
+          svg: {
+            drawingArea: u.value,
+            data: S.value
+          }
+        }, void 0, !0)
+      ], 14, xo)),
+      a.$slots.watermark ? (s(), n("div", ir, [
+        C(a.$slots, "watermark", U(H({ isPrinting: m(_t) || m(Mt) })), void 0, !0)
+      ])) : y("", !0),
+      e.value.style.chart.zoom.show && D.value > 6 && ye.value && ta.value ? (s(), ee(yo, {
+        key: 4,
+        ref_key: "chartSlicer",
+        ref: fe,
+        allMinimaps: el.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: h.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: Nt.value,
+        labelLeft: e.value.style.chart.grid.x.timeLabels.values[h.value.start] ? O.value[0].text : "",
+        labelRight: e.value.style.chart.grid.x.timeLabels.values[h.value.end - 1] ? O.value.at(-1).text : "",
+        max: Math.max(...Xe.dataset.map((t) => t.series.length)),
+        min: 0,
+        minimap: se.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: G.value,
+        minimapSelectionRadius: 1,
+        preciseLabels: It.value.length ? It.value : we.value,
+        refreshEndPoint: e.value.style.chart.zoom.endIndex !== null ? e.value.style.chart.zoom.endIndex + 1 : Math.max(...Xe.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: ll.value,
+        smoothMinimap: !1,
+        start: h.value.start,
+        textColor: e.value.style.chart.color,
+        timeLabels: we.value,
+        usePreciseLabels: e.value.style.chart.grid.x.timeLabels.datetimeFormatter.enable && !e.value.style.chart.zoom.useDefaultFormat,
+        valueEnd: h.value.end,
+        valueStart: h.value.start,
+        verticalHandles: e.value.style.chart.zoom.minimap.verticalHandles,
+        "onUpdate:end": ml,
+        "onUpdate:start": fl,
+        onTrapMouse: Qa,
+        onReset: Ot,
+        onFutureEnd: l[0] || (l[0] = (t) => Pt("end", t)),
+        onFutureStart: l[1] || (l[1] = (t) => Pt("start", t))
+      }, {
+        "reset-action": L(({ reset: t }) => [
+          C(a.$slots, "reset-action", U(H({ reset: t })), void 0, !0)
+        ]),
+        slotMap: L(({ width: t, height: o, unitW: c }) => [
+          (s(!0), n(x, null, w(S.value, (r) => (s(), n("g", {
+            key: r.id
+          }, [
+            (s(!0), n(x, null, w(r.xMinimap({ left: 0, unitW: c }), (f, A) => (s(), n("rect", {
+              key: A,
+              x: A === 0 ? f - c * (e.value.style.chart.bars.gapRatio / 4) : f - c / 2,
+              y: Math.max(0, Math.min(o, r.yMinimap({ minimapH: o })[A])),
+              height: r.heightMinimap({ minimapH: o })[A],
+              width: [0, D.value - 1].includes(A) ? 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_${r.id})` : r.color,
+              stroke: e.value.style.chart.backgroundColor,
+              "stroke-width": 0.5,
+              rx: "0",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              style: ne({
+                opacity: A >= R.value.start && A <= R.value.end ? 1 : 0.62
+              })
+            }, null, 12, ur))), 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"])) : y("", !0),
+      _e(m(Ma), {
+        show: T.value.showTooltip && Ye.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: J.value,
+        content: qe.value,
+        isFullscreen: me.value,
+        isCustom: m(ma)(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": L(() => [
+          C(a.$slots, "tooltip-before", U(H({ ...We.value })), void 0, !0)
+        ]),
+        "tooltip-after": L(() => [
+          C(a.$slots, "tooltip-after", U(H({ ...We.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
+      te("div", {
+        id: `legend-bottom-${V.value}`
+      }, null, 8, cr),
+      wt.value ? (s(), ee(Rl, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${V.value}` : `#legend-bottom-${V.value}`
+      }, [
+        te("div", {
+          ref_key: "chartLegend",
+          ref: xt
+        }, [
+          e.value.style.chart.legend.show ? (s(), ee(bo, {
+            key: 0,
+            legendSet: ut.value,
+            config: ul.value,
+            onClickMarker: l[2] || (l[2] = ({ legend: t }) => t.segregate())
+          }, bt({
+            item: L(({ legend: t }) => [
+              m(xe) ? y("", !0) : (s(), n("div", {
+                key: 0,
+                onClick: (o) => t.segregate(),
+                style: ne(`opacity:${F.value.includes(t.id) ? 0.5 : 1}`)
+              }, B(t.name), 13, hr))
+            ]),
+            _: 2
+          }, [
+            a.$slots.pattern ? {
+              name: "legend-pattern",
+              fn: L(({ legend: t, index: o }) => [
+                _e(go, {
+                  shape: t.shape,
+                  radius: 30,
+                  stroke: "none",
+                  plot: { x: 30, y: 30 },
+                  fill: `url(#pattern_${V.value}_${o})`
+                }, null, 8, ["shape", "fill"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["legendSet", "config"])) : C(a.$slots, "legend", {
+            key: 1,
+            legend: ut.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : y("", !0),
+      a.$slots.source ? (s(), n("div", {
+        key: 6,
+        ref_key: "source",
+        ref: kt,
+        dir: "auto"
+      }, [
+        C(a.$slots, "source", {}, void 0, !0)
+      ], 512)) : y("", !0),
+      ye.value && e.value.userOptions.buttons.table ? (s(), ee(Il(Le.value.component), Me({ key: 7 }, Le.value.props, {
+        ref_key: "tableUnit",
+        ref: pe,
+        onClose: Qt
+      }), bt({
+        content: L(() => [
+          _e(m(Fa), {
+            colNames: Ee.value.colNames,
+            head: Ee.value.head,
+            body: Ee.value.body,
+            config: Ee.value.config,
+            title: e.value.table.useDialog ? "" : Le.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: Qt
+          }, {
+            th: L(({ th: t }) => [
+              te("div", { innerHTML: t }, null, 8, vr)
+            ]),
+            td: L(({ td: t }) => [
+              ha(B(isNaN(Number(t)) ? t : m(ae)({
+                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: L(() => [
+            ha(B(Le.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: L(() => [
+            te("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[3] || (l[3] = (t) => nt(e.value.userOptions.callbacks.csv))
+            }, [
+              _e(m(Ta), {
+                name: "excel",
+                stroke: Le.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : y("", !0),
+      m(xe) ? (s(), ee(lo, { key: 8 })) : y("", !0)
+    ], 46, mo));
+  }
+}, gr = /* @__PURE__ */ fo(dr, [["__scopeId", "data-v-9cdb5942"]]), Pr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: gr
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Nr as a,
+  Pr as b,
+  gr as v
+};