vue-data-ui 3.0.0-next.28 → 3.0.0-next.29

package/dist/{vue-ui-candlestick-HXpLcsDU.js → vue-ui-candlestick-D75PUpAs.js}

@@ -1,21 +1,21 @@
-import { defineAsyncComponent as M, computed as b, ref as r, toRefs as zt, watch as ce, shallowRef as He, onMounted as St, onBeforeUnmount as We, watchEffect as Lt, nextTick as he, createElementBlock as u, openBlock as s, unref as n, normalizeStyle as fe, normalizeClass as Ge, createBlock as F, createCommentVNode as g, createElementVNode as d, createVNode as Xe, createSlots as Tt, withCtx as x, renderSlot as m, normalizeProps as R, guardReactiveProps as O, Fragment as N, renderList as P, toDisplayString as q, createTextVNode as It } from "vue";
-import { u as Ft, c as Rt, A as Ot, a as Nt, C as J, o as je, e as V, D as Pt, v as H, f as $, X as Vt, w as K, s as Et, E as Ye, q as Bt, r as Mt, x as Ut, y as Dt } from "./index-DwurWOmm.js";
-import { t as qe, u as Ht } from "./useResponsive-DfdjqQps.js";
-import { u as Je } from "./useNestedProp-CFAjw-uI.js";
-import { u as Wt } from "./usePrinter-BvsDO5CU.js";
-import { u as Gt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Xt } from "./useChartAccessibility-9icAAmYg.js";
-import { u as jt, B as Yt } from "./BaseScanner-DIK2NTdp.js";
-import qt from "./Title-CGN9QiYI.js";
-import { S as Jt } from "./Slicer-DVW32UTi.js";
-import { u as Kt } from "./useTimeLabels-DFkUfjfs.js";
-import Qt from "./img-ChuzqrF3.js";
-import { u as Zt } from "./useTimeLabelCollider-V7AOiPLB.js";
-import { _ as el } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "width", "height"], ol = { key: 1 }, sl = ["id"], ul = ["stop-color"], il = ["stop-color"], nl = ["stop-color"], rl = ["id"], vl = ["stop-color"], dl = ["stop-color"], yl = ["stop-color"], cl = { key: 0 }, hl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], gl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], pl = ["x", "y", "font-size", "fill", "font-weight"], bl = ["transform", "text-anchor", "font-size", "fill", "font-weight"], ml = ["transform", "text-anchor", "font-size", "fill", "font-weight"], xl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], kl = { key: 0 }, wl = ["cx", "cy", "r", "fill"], Al = ["cx", "cy", "r", "fill"], _l = { key: 1 }, Cl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], $l = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], zl = ["x", "y", "height", "width", "fill", "rx"], Sl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width"], Ll = ["x", "y", "height", "width", "fill", "onMouseover"], Tl = {
+import { defineAsyncComponent as D, computed as b, ref as r, toRefs as Lt, watch as pe, shallowRef as Xe, onMounted as Tt, onBeforeUnmount as je, watchEffect as It, nextTick as be, createElementBlock as i, openBlock as s, unref as u, normalizeStyle as me, normalizeClass as S, createBlock as N, createCommentVNode as g, createElementVNode as d, createVNode as Ye, createSlots as Ft, withCtx as x, renderSlot as m, normalizeProps as P, guardReactiveProps as V, Fragment as E, renderList as B, toDisplayString as Q, createTextVNode as Rt } from "vue";
+import { u as Ot, c as Nt, A as Pt, a as Vt, C as Z, o as qe, e as M, D as Et, v as X, f as L, X as Bt, w as ee, s as Mt, E as Je, q as Ut, r as Wt, x as Dt, y as Ht } from "./index-Drw6d_8M.js";
+import { t as Ke, u as Gt } from "./useResponsive-DfdjqQps.js";
+import { u as Qe } from "./useNestedProp-DU20xu9g.js";
+import { u as Xt } from "./usePrinter-QRK7y9fG.js";
+import { u as jt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Yt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as qt, B as Jt } from "./BaseScanner-DIK2NTdp.js";
+import Kt from "./Title-DONRFCZQ.js";
+import { S as Qt } from "./Slicer-jLSY0Lnb.js";
+import { u as Zt } from "./useTimeLabels-DFkUfjfs.js";
+import el from "./img-D3r3OOFG.js";
+import { u as tl } from "./useTimeLabelCollider-V7AOiPLB.js";
+import { _ as ll } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const al = ["id"], ol = ["xmlns", "aria-label", "viewBox"], sl = ["x", "y", "width", "height"], ul = { key: 1 }, il = ["id"], nl = ["stop-color"], rl = ["stop-color"], vl = ["stop-color"], dl = ["id"], yl = ["stop-color"], cl = ["stop-color"], hl = ["stop-color"], fl = { key: 0 }, gl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], pl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], bl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ml = ["x", "y", "font-size", "fill", "font-weight"], xl = ["transform", "text-anchor", "font-size", "fill", "font-weight"], kl = ["transform", "text-anchor", "font-size", "fill", "font-weight"], wl = ["x", "y", "width", "height", "fill", "rx"], Al = { key: 0 }, _l = ["cx", "cy", "r", "fill"], Cl = ["cx", "cy", "r", "fill"], $l = { key: 1 }, zl = ["x", "y", "width", "height", "rx", "fill"], Sl = ["x", "y", "width", "height", "fill", "rx"], Ll = ["x", "y", "height", "width", "fill", "rx"], Tl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width"], Il = ["x", "y", "height", "width", "fill", "onMouseover"], Fl = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Il = ["innerHTML"], Fl = {
+}, Rl = ["innerHTML"], Ol = {
   __name: "vue-ui-candlestick",
   props: {
     config: {
@@ -31,14 +31,14 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
       }
     }
   },
-  setup(Ke, { expose: Qe }) {
-    const Ze = M(() => import("./vue-ui-accordion-C7ba8AVe.js")), et = M(() => import("./DataTable-BtWOpycK.js")), tt = M(() => import("./PackageVersion-BcAEQLLi.js")), lt = M(() => import("./PenAndPaper-CmO7bEfi.js")), at = M(() => import("./Tooltip-mMwokTkO.js")), ot = M(() => import("./UserOptions-DYn2297n.js")), { vue_ui_candlestick: st } = Ft(), c = Ke, Q = b(() => !!c.dataset && c.dataset.length), w = r(Rt()), ut = r(null), Z = r(!1), ee = r(""), te = r(void 0), ge = r(0), z = r(null), pe = r(null), be = r(null), me = r(null), xe = r(null), ke = r(null), W = r(0), we = r(0), Ae = r(0), le = r(null), U = r(null), e = r(se()), { loading: _e, FINAL_DATASET: A, manualLoading: ae } = jt({
-      ...zt(c),
+  setup(Ze, { expose: et }) {
+    const tt = D(() => import("./vue-ui-accordion-DFtpDmPO.js")), lt = D(() => import("./DataTable-BYNUm5Gf.js")), at = D(() => import("./PackageVersion-BzwYjMOW.js")), ot = D(() => import("./PenAndPaper-DTcaSmnI.js")), st = D(() => import("./Tooltip-cz9CUpDk.js")), ut = D(() => import("./UserOptions-By5PgYu0.js")), { vue_ui_candlestick: it } = Ot(), c = Ze, te = b(() => !!c.dataset && c.dataset.length), $ = r(!1), le = r(null), w = r(Nt()), nt = r(null), ae = r(!1), oe = r(""), se = r(void 0), xe = r(0), T = r(null), ke = r(null), we = r(null), Ae = r(null), _e = r(null), Ce = r(null), j = r(0), $e = r(0), ze = r(0), ue = r(null), H = r(null), e = r(re()), { loading: z, FINAL_DATASET: A, manualLoading: ie } = qt({
+      ...Lt(c),
       FINAL_CONFIG: e,
-      prepareConfig: se,
+      prepareConfig: re,
       callback: () => {
         Promise.resolve().then(async () => {
-          await re();
+          await ce();
         });
       },
       skeletonDataset: [
@@ -49,13 +49,13 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
         [17145216e5, 50, 130, 30, 100, 210],
         [17172e8, 80, 210, 50, 150, 340],
         [1719792e6, 130, 340, 80, 280, 550],
-        [17224704e5, 210, 550, 130, 50, 890],
+        [17224704e5, 210, 550, 130, 450, 890],
         [17251488e5, 340, 890, 210, 750, 1440],
         [17277408e5, 550, 1440, 340, 1230, 2330],
         [17304192e5, 890, 2330, 550, 1950, 3770],
         [17330112e5, 1440, 3770, 890, 3200, 5100]
       ],
-      skeletonConfig: Ot({
+      skeletonConfig: Pt({
         defaultConfig: e.value,
         userConfig: {
           useCssAnimation: !1,
@@ -96,159 +96,164 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
           }
         }
       })
-    }), { userOptionsVisible: oe, setUserOptionsVisibility: Ce, keepUserOptionState: $e } = Gt({ config: e.value }), { svgRef: ze } = Xt({ config: e.value.style.title });
-    function se() {
-      const t = Je({
+    }), { userOptionsVisible: ne, setUserOptionsVisibility: Se, keepUserOptionState: Le } = jt({ config: e.value }), { svgRef: Te } = Yt({ config: e.value.style.title });
+    function re() {
+      const t = Qe({
         userConfig: c.config,
-        defaultConfig: st
+        defaultConfig: it
       });
       let a = {};
       return t.theme ? a = {
-        ...Je({
-          userConfig: Nt.vue_ui_candlestick[t.theme] || c.config,
+        ...Qe({
+          userConfig: Vt.vue_ui_candlestick[t.theme] || c.config,
           defaultConfig: t
         })
-      } : a = t, c.config && J(c.config, "style.zoom.startIndex") ? a.style.zoom.startIndex = c.config.style.zoom.startIndex : a.style.zoom.startIndex = null, c.config && J(c.config, "style.zoom.endIndex") ? a.style.zoom.endIndex = c.config.style.zoom.endIndex : a.style.zoom.endIndex = null, c.config && J(c.config, "style.layout.grid.yAxis.scale.min") ? a.style.layout.grid.yAxis.scale.min = c.config.style.layout.grid.yAxis.scale.min : a.style.layout.grid.yAxis.scale.min = null, c.config && J(c.config, "style.layout.grid.yAxis.scale.max") ? a.style.layout.grid.yAxis.scale.max = c.config.style.layout.grid.yAxis.scale.max : a.style.layout.grid.yAxis.scale.max = null, a;
+      } : a = t, c.config && Z(c.config, "style.zoom.startIndex") ? a.style.zoom.startIndex = c.config.style.zoom.startIndex : a.style.zoom.startIndex = null, c.config && Z(c.config, "style.zoom.endIndex") ? a.style.zoom.endIndex = c.config.style.zoom.endIndex : a.style.zoom.endIndex = null, c.config && Z(c.config, "style.layout.grid.yAxis.scale.min") ? a.style.layout.grid.yAxis.scale.min = c.config.style.layout.grid.yAxis.scale.min : a.style.layout.grid.yAxis.scale.min = null, c.config && Z(c.config, "style.layout.grid.yAxis.scale.max") ? a.style.layout.grid.yAxis.scale.max = c.config.style.layout.grid.yAxis.scale.max : a.style.layout.grid.yAxis.scale.max = null, a;
     }
-    ce(() => c.config, (t) => {
-      _e.value || (e.value = se()), oe.value = !e.value.userOptions.showOnChartHover, Se(), W.value += 1, Ae.value += 1, we.value += 1, _.value.showTable = e.value.table.show, _.value.showTooltip = e.value.style.tooltip.show;
-    }, { deep: !0 }), ce(() => c.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (ae.value = !1), h.value.start = 0, h.value.end = t.length, W.value += 1;
+    pe(() => c.config, (t) => {
+      z.value || (e.value = re()), ne.value = !e.value.userOptions.showOnChartHover, Ie(), j.value += 1, ze.value += 1, $e.value += 1, _.value.showTable = e.value.table.show, _.value.showTooltip = e.value.style.tooltip.show;
+    }, { deep: !0 }), pe(() => c.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (ie.value = !1), h.value.start = 0, h.value.end = t.length, j.value += 1;
     }, { deep: !0 });
     const y = r({
       height: e.value.style.height,
       width: e.value.style.width,
       xAxisFontSize: e.value.style.layout.grid.xAxis.dataLabels.fontSize,
       yAxisFontSize: e.value.style.layout.grid.yAxis.dataLabels.fontSize
-    }), S = He(null), E = He(null);
-    St(() => {
-      Se();
+    }), I = Xe(null), U = Xe(null);
+    Tt(() => {
+      Ie();
     });
-    const L = b(() => !!e.value.debug);
-    function Se() {
-      if (je(c.dataset) && (V({
+    const F = b(() => !!e.value.debug);
+    function Ie() {
+      if (qe(c.dataset) && (M({
         componentName: "VueUiCandlestick",
         type: "dataset",
-        debug: L.value
-      }), ae.value = !0), je(c.dataset) || (ae.value = e.value.loading), e.value.responsive) {
-        const a = qe(() => {
-          const { width: l, height: o } = Ht({
-            chart: z.value,
-            title: e.value.style.title.text ? pe.value : null,
-            slicer: me.value,
-            legend: be.value,
-            source: xe.value,
-            noTitle: ke.value
+        debug: F.value
+      }), ie.value = !0), qe(c.dataset) || (ie.value = e.value.loading), setTimeout(() => {
+        $.value = !0;
+      }, 10), e.value.responsive) {
+        const a = Ke(() => {
+          $.value = !1;
+          const { width: l, height: o } = Gt({
+            chart: T.value,
+            title: e.value.style.title.text ? ke.value : null,
+            slicer: Ae.value,
+            legend: we.value,
+            source: _e.value,
+            noTitle: Ce.value
           });
           requestAnimationFrame(() => {
-            y.value.width = l, y.value.height = o - 12, e.value.responsiveProportionalSizing ? (y.value.xAxisFontSize = Ye({
+            y.value.width = l, y.value.height = o - 12, e.value.responsiveProportionalSizing ? (y.value.xAxisFontSize = Je({
               relator: Math.min(l, o),
               adjuster: e.value.style.width,
               source: e.value.style.layout.grid.xAxis.dataLabels.fontSize,
               threshold: 6,
               fallback: 6
-            }), y.value.yAxisFontSize = Ye({
+            }), y.value.yAxisFontSize = Je({
               relator: Math.min(l, o),
               adjuster: e.value.style.width,
               source: e.value.style.layout.grid.yAxis.dataLabels.fontSize,
               threshold: 6,
               fallback: 6
-            })) : (y.value.xAxisFontSize = e.value.style.layout.grid.xAxis.dataLabels.fontSize, y.value.yAxisFontSize = e.value.style.layout.grid.yAxis.dataLabels.fontSize);
+            })) : (y.value.xAxisFontSize = e.value.style.layout.grid.xAxis.dataLabels.fontSize, y.value.yAxisFontSize = e.value.style.layout.grid.yAxis.dataLabels.fontSize), le.value && clearTimeout(le.value), le.value = setTimeout(() => {
+              $.value = !0;
+            }, 10);
           });
         });
-        S.value && (E.value && S.value.unobserve(E.value), S.value.disconnect()), S.value = new ResizeObserver(a), E.value = z.value.parentNode, S.value.observe(E.value);
+        I.value && (U.value && I.value.unobserve(U.value), I.value.disconnect()), I.value = new ResizeObserver(a), U.value = T.value.parentNode, I.value.observe(U.value);
       }
-      re();
+      ce();
     }
-    We(() => {
-      S.value && (E.value && S.value.unobserve(E.value), S.value.disconnect());
+    je(() => {
+      I.value && (U.value && I.value.unobserve(U.value), I.value.disconnect());
     });
-    const { isPrinting: Le, isImaging: Te, generatePdf: Ie, generateImage: Fe } = Wt({
+    const { isPrinting: Fe, isImaging: Re, generatePdf: Oe, generateImage: Ne } = Xt({
       elementId: `vue-ui-candlestick_${w.value}`,
       fileName: e.value.style.title.text || "vue-ui-candlestick",
       options: e.value.userOptions.print
-    }), it = b(() => e.value.userOptions.show && !e.value.style.title.text), _ = r({
+    }), rt = b(() => e.value.userOptions.show && !e.value.style.title.text), _ = r({
       showTable: e.value.table.show,
       showTooltip: e.value.style.tooltip.show
-    }), ue = r(0), nt = qe((t) => {
-      ue.value = t;
+    }), ve = r(0), vt = Ke((t) => {
+      ve.value = t;
     }, 100);
-    Lt((t) => {
-      const a = U.value;
+    It((t) => {
+      const a = H.value;
       if (!a) return;
       const l = new ResizeObserver((o) => {
-        nt(o[0].contentRect.height);
+        vt(o[0].contentRect.height);
       });
       l.observe(a), t(() => l.disconnect());
-    }), We(() => {
-      ue.value = 0;
+    }), je(() => {
+      ve.value = 0;
     });
-    const Re = b(() => {
+    const Pe = b(() => {
       let t = 0;
-      return U.value && (t = ue.value + y.value.xAxisFontSize), t;
+      return H.value && (t = ve.value + y.value.xAxisFontSize), t;
     });
-    function rt() {
+    function dt() {
       let t = e.value.style.layout.grid.yAxis.dataLabels.offsetX;
-      return le.value && (t = Array.from(le.value.querySelectorAll("text")).reduce((o, p) => {
+      return ue.value && (t = Array.from(ue.value.querySelectorAll("text")).reduce((o, p) => {
         const f = p.getComputedTextLength();
         return f > o ? f : o;
       }, 0)), t + 13;
     }
-    const i = b(() => {
-      const { top: t, right: a, bottom: l, left: o } = e.value.style.layout.padding, p = rt(), f = 12;
+    const n = b(() => {
+      const { top: t, right: a, bottom: l, left: o } = e.value.style.layout.padding, p = dt(), f = 12;
       return {
         top: t + f,
         right: y.value.width - a,
         left: o + p,
-        bottom: y.value.height - l - Re.value,
+        bottom: y.value.height - l - Pe.value,
         width: y.value.width - o - a - p,
-        height: y.value.height - t - l - Re.value - f
+        height: y.value.height - t - l - Pe.value - f
       };
-    }), D = b(() => A.value.length), h = r({
+    }), G = b(() => A.value.length), h = r({
       start: 0,
-      end: D.value
-    }), Oe = b(() => A.value.map((t, a) => ({
+      end: G.value
+    }), Ve = b(() => A.value.map((t, a) => ({
       ...t,
       absoluteIndex: a
-    })).slice(h.value.start, h.value.end)), ie = b(() => (A.value.forEach((t, a) => {
-      [null, void 0].includes(t[0]) && V({
+    })).slice(h.value.start, h.value.end)), de = b(() => (A.value.forEach((t, a) => {
+      [null, void 0].includes(t[0]) && M({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "period (index 0)",
         index: a,
-        debug: L.value
-      }), [null, void 0].includes(t[1]) && V({
+        debug: F.value
+      }), [null, void 0].includes(t[1]) && M({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "open (index 1)",
         index: a,
-        debug: L.value
-      }), [null, void 0].includes(t[2]) && V({
+        debug: F.value
+      }), [null, void 0].includes(t[2]) && M({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "high (index 2)",
         index: a,
-        debug: L.value
-      }), [null, void 0].includes(t[3]) && V({
+        debug: F.value
+      }), [null, void 0].includes(t[3]) && M({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "low (index 3)",
         index: a,
-        debug: L.value
-      }), [null, void 0].includes(t[4]) && V({
+        debug: F.value
+      }), [null, void 0].includes(t[4]) && M({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "last (index 4)",
         index: a,
-        debug: L.value
-      }), [null, void 0].includes(t[5]) && V({
+        debug: F.value
+      }), [null, void 0].includes(t[5]) && M({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "volume (index 5)",
         index: a,
-        debug: L.value
+        debug: F.value
       });
-    }), Oe.value.map((t) => ({
+    }), Ve.value.map((t) => ({
       absoluteIndex: t.absoluteIndex,
       period: t[0],
       open: t[1],
@@ -256,23 +261,23 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
       low: t[3],
       last: t[4],
       volume: t[5]
-    })))), v = b(() => i.value.width / Oe.value.length), Ne = b(() => {
-      const t = e.value.style.layout.grid.yAxis.scale.max === null ? Math.max(...ie.value.map((l) => l.high)) : e.value.style.layout.grid.yAxis.scale.max, a = e.value.style.layout.grid.yAxis.scale.min === null ? 0 : e.value.style.layout.grid.yAxis.scale.min;
+    })))), v = b(() => n.value.width / Ve.value.length), Ee = b(() => {
+      const t = e.value.style.layout.grid.yAxis.scale.max === null ? Math.max(...de.value.map((l) => l.high)) : e.value.style.layout.grid.yAxis.scale.max, a = e.value.style.layout.grid.yAxis.scale.min === null ? 0 : e.value.style.layout.grid.yAxis.scale.min;
       return {
         max: t,
         min: a
       };
-    }), C = b(() => Pt(Ne.value.min, Ne.value.max, e.value.style.layout.grid.yAxis.dataLabels.steps));
-    function G(t, a) {
+    }), C = b(() => Et(Ee.value.min, Ee.value.max, e.value.style.layout.grid.yAxis.dataLabels.steps));
+    function Y(t, a) {
       return {
         ...t,
-        x: H(i.value.left + a * v.value + v.value / 2),
-        y: H(i.value.top + (1 - (t - C.value.min) / (C.value.max - C.value.min)) * i.value.height),
-        value: H(t)
+        x: X(n.value.left + a * v.value + v.value / 2),
+        y: X(n.value.top + (1 - (t - C.value.min) / (C.value.max - C.value.min)) * n.value.height),
+        value: X(t)
       };
     }
-    const k = b(() => ie.value.map((t, a) => {
-      const l = G(t.open, a), o = G(t.high, a), p = G(t.low, a), f = G(t.last, a), I = t.last > t.open;
+    const k = b(() => de.value.map((t, a) => {
+      const l = Y(t.open, a), o = Y(t.high, a), p = Y(t.low, a), f = Y(t.last, a), O = t.last > t.open;
       return {
         period: t.period,
         open: l,
@@ -280,44 +285,44 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
         low: p,
         last: f,
         volume: t.volume,
-        isBullish: I,
+        isBullish: O,
         absoluteIndex: t.absoluteIndex
       };
     }));
-    function vt(t) {
-      return H((t - C.value.min) / (C.value.max - C.value.min));
+    function yt(t) {
+      return X((t - C.value.min) / (C.value.max - C.value.min));
     }
-    const dt = b(() => C.value.ticks.map((t) => ({
-      y: i.value.bottom - i.value.height * vt(t),
-      value: H(t)
-    }))), yt = b(() => ie.value.map((t) => t.period)), T = b(() => Kt({
+    const ct = b(() => C.value.ticks.map((t) => ({
+      y: n.value.bottom - n.value.height * yt(t),
+      value: X(t)
+    }))), ht = b(() => de.value.map((t) => t.period)), R = b(() => Zt({
       values: A.value.map((t) => t[0]),
       maxDatapoints: A.value.length,
       formatter: e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter,
       start: h.value.start,
       end: h.value.end
-    })), Pe = b(() => e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? {
-      start: T.value.find((t) => t.absoluteIndex === h.value.start).text,
-      end: T.value.find((t) => t.absoluteIndex === h.value.end - 1).text
+    })), Be = b(() => e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? {
+      start: R.value.find((t) => t.absoluteIndex === h.value.start).text,
+      end: R.value.find((t) => t.absoluteIndex === h.value.end - 1).text
     } : {
       start: A.value[h.value.start] ? A.value[h.value.start][0] : A.value[0][0],
       end: A.value[h.value.end - 1] ? A.value[h.value.end - 1][0] : A.value.at(-1)[0]
-    }), ne = r(null);
-    function ct(t, a) {
-      te.value = t, ne.value = {
+    }), ye = r(null);
+    function ft(t, a) {
+      se.value = t, ye.value = {
         datapoint: a,
         seriesIndex: t,
         series: k.value,
         config: e.value
       };
       const l = e.value.style.tooltip.customFormat;
-      if (Ut(l) && Dt(() => l({
+      if (Dt(l) && Ht(() => l({
         seriesIndex: t,
         datapoint: a,
         series: k.value,
         config: e.value
       })))
-        ee.value = l({
+        oe.value = l({
           seriesIndex: t,
           datapoint: a,
           series: k.value,
@@ -325,84 +330,84 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
         });
       else if (e.value.style.tooltip.show) {
         let o = "";
-        const { period: p, open: f, high: I, low: de, last: ye, volume: Y, isBullish: De } = k.value[t], { period: Rl, open: pt, high: bt, low: mt, last: xt, volume: kt } = e.value.translations, wt = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? T.value[t].text : p;
+        const { period: p, open: f, high: O, low: fe, last: ge, volume: K, isBullish: Ge } = k.value[t], { period: Nl, open: mt, high: xt, low: kt, last: wt, volume: At } = e.value.translations, _t = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? R.value[t].text : p;
         o += `<div><svg style="margin-right:6px" viewBox="0 0 12 12" height="12" width="12"><rect x="0" y="0" height="12" width="12" rx="${e.value.style.layout.candle.borderRadius * 3}" stroke="${e.value.style.layout.candle.stroke}" stroke-width="${e.value.style.layout.candle.strokeWidth}" 
-                fill="${e.value.style.layout.candle.gradient.show ? De ? `url(#bullish_gradient_${w.value})` : `url(#bearish_gradient_${w.value})` : De ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg>${wt}</div>`, o += `${kt} : <b>${isNaN(Y) ? "-" : Number(Y.toFixed(e.value.style.tooltip.roundingValue)).toLocaleString()}</b>`, o += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`;
-        const At = $({
+                fill="${e.value.style.layout.candle.gradient.show ? Ge ? `url(#bullish_gradient_${w.value})` : `url(#bearish_gradient_${w.value})` : Ge ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg>${_t}</div>`, o += `${At} : <b>${isNaN(K) ? "-" : Number(K.toFixed(e.value.style.tooltip.roundingValue)).toLocaleString()}</b>`, o += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`;
+        const Ct = L({
           p: e.value.style.tooltip.prefix,
           v: f.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${pt}: <b>${At}</b></div>`;
-        const _t = $({
+        o += `<div>${mt}: <b>${Ct}</b></div>`;
+        const $t = L({
           p: e.value.style.tooltip.prefix,
-          v: I.value,
+          v: O.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${bt}: <b>${_t}</b></div>`;
-        const Ct = $({
+        o += `<div>${xt}: <b>${$t}</b></div>`;
+        const zt = L({
           p: e.value.style.tooltip.prefix,
-          v: de.value,
+          v: fe.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${mt}: <b>${Ct}</b></div>`;
-        const $t = $({
+        o += `<div>${kt}: <b>${zt}</b></div>`;
+        const St = L({
           p: e.value.style.tooltip.prefix,
-          v: ye.value,
+          v: ge.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${xt}: <b>${$t}</b></div>`, o += "</div>", ee.value = `<div style="text-align:right">${o}</div>`;
+        o += `<div>${wt}: <b>${St}</b></div>`, o += "</div>", oe.value = `<div style="text-align:right">${o}</div>`;
       }
-      Z.value = !0;
+      ae.value = !0;
     }
-    function ht() {
-      re();
+    function gt() {
+      ce();
     }
-    const Ve = r(null);
-    async function re() {
-      await he(), await he();
-      const { startIndex: t, endIndex: a } = e.value.style.zoom, l = Ve.value, o = D.value;
-      (t != null || a != null) && l ? (t != null && l.setStartValue(t), a != null && l.setEndValue(ft(a + 1))) : (h.value = { start: 0, end: o }, W.value += 1);
+    const Me = r(null);
+    async function ce() {
+      await be(), await be();
+      const { startIndex: t, endIndex: a } = e.value.style.zoom, l = Me.value, o = G.value;
+      (t != null || a != null) && l ? (t != null && l.setStartValue(t), a != null && l.setEndValue(pt(a + 1))) : (h.value = { start: 0, end: o }, j.value += 1);
     }
-    function ft(t) {
-      const a = D.value;
+    function pt(t) {
+      const a = G.value;
       return t > a ? a : t < 0 || e.value.style.zoom.startIndex !== null && t < e.value.style.zoom.startIndex ? e.value.style.zoom.startIndex !== null ? e.value.style.zoom.startIndex + 1 : 1 : t;
     }
-    function Ee(t = null) {
-      he(() => {
-        const a = [e.value.translations.period, e.value.translations.open, e.value.translations.high, e.value.translations.low, e.value.translations.last, e.value.translations.volume], l = k.value.map((f, I) => [
-          e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? T.value[I].text : f.period,
+    function Ue(t = null) {
+      be(() => {
+        const a = [e.value.translations.period, e.value.translations.open, e.value.translations.high, e.value.translations.low, e.value.translations.last, e.value.translations.volume], l = k.value.map((f, O) => [
+          e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? R.value[O].text : f.period,
           f.open.value,
           f.high.value,
           f.low.value,
           f.last.value,
           f.volume
-        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), p = Bt(o);
-        t ? t(p) : Mt({ csvContent: p, title: e.value.style.title.text || "vue-ui-candlestick" });
+        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), p = Ut(o);
+        t ? t(p) : Wt({ csvContent: p, title: e.value.style.title.text || "vue-ui-candlestick" });
       });
     }
-    const X = b(() => {
+    const q = b(() => {
       const t = k.value.map((o, p) => {
-        const f = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? T.value[p].text : o.period, I = $({
+        const f = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? R.value[p].text : o.period, O = L({
           p: e.value.table.td.prefix,
           v: o.open.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
-        }), de = $({
+        }), fe = L({
           p: e.value.table.td.prefix,
           v: o.high.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
-        }), ye = $({
+        }), ge = L({
           p: e.value.table.td.prefix,
           v: o.low.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
-        }), Y = $({
+        }), K = L({
           p: e.value.table.td.prefix,
           v: o.last.value,
           s: e.value.table.td.suffix,
@@ -410,10 +415,10 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
         });
         return [
           `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" height="12" width="12" style="margin-right: 6px"><rect x="0" y="0" height="12" width="12" rx="${e.value.style.layout.candle.borderRadius * 3}" fill="${e.value.style.layout.candle.gradient.show ? o.isBullish ? `url(#bullish_gradient_${w.value}` : `url(#bearish_gradient_${w.value})` : o.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg> ${f}`,
-          I,
-          de,
-          ye,
-          Y,
+          O,
+          fe,
+          ge,
+          K,
           `${isNaN(o.volume) ? "-" : o.volume.toLocaleString()}`
         ];
       }), a = {
@@ -437,23 +442,23 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
         e.value.translations.volume
       ];
       return { head: l, body: t, config: a, colNames: l };
-    }), B = r(!1);
-    function Be(t) {
-      B.value = t, ge.value += 1;
+    }), W = r(!1);
+    function We(t) {
+      W.value = t, xe.value += 1;
     }
-    function Me() {
+    function De() {
       _.value.showTable = !_.value.showTable;
     }
-    function Ue() {
+    function He() {
       _.value.showTooltip = !_.value.showTooltip;
     }
-    const j = r(!1);
-    function ve() {
-      j.value = !j.value;
+    const J = r(!1);
+    function he() {
+      J.value = !J.value;
     }
-    async function gt({ scale: t = 2 } = {}) {
-      if (!z.value) return;
-      const { width: a, height: l } = z.value.getBoundingClientRect(), o = a / l, { imageUri: p, base64: f } = await Qt({ domElement: z.value, base64: !0, img: !0, scale: t });
+    async function bt({ scale: t = 2 } = {}) {
+      if (!T.value) return;
+      const { width: a, height: l } = T.value.getBoundingClientRect(), o = a / l, { imageUri: p, base64: f } = await el({ domElement: T.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: p,
         base64: f,
@@ -463,60 +468,60 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
         aspectRatio: o
       };
     }
-    return Zt({
-      timeLabelsEls: U,
-      timeLabels: T,
+    return tl({
+      timeLabelsEls: H,
+      timeLabels: R,
       slicer: h,
       configRef: e,
       rotationPath: ["style", "layout", "grid", "xAxis", "dataLabels", "rotation"],
       autoRotatePath: ["style", "layout", "grid", "xAxis", "dataLabels", "autoRotate"],
       isAutoSize: !1
-    }), ce(e, () => {
+    }), pe(e, () => {
       _.value = {
         showTable: e.value.table.show,
         showTooltip: e.value.style.tooltip.show
       };
-    }, { immediate: !0 }), Qe({
-      getImage: gt,
-      generatePdf: Ie,
-      generateCsv: Ee,
-      generateImage: Fe,
-      toggleTable: Me,
-      toggleTooltip: Ue,
-      toggleAnnotator: ve,
-      toggleFullscreen: Be
-    }), (t, a) => (s(), u("div", {
+    }, { immediate: !0 }), et({
+      getImage: bt,
+      generatePdf: Oe,
+      generateCsv: Ue,
+      generateImage: Ne,
+      toggleTable: De,
+      toggleTooltip: He,
+      toggleAnnotator: he,
+      toggleFullscreen: We
+    }), (t, a) => (s(), i("div", {
       ref_key: "candlestickChart",
-      ref: z,
-      class: Ge(`vue-ui-candlestick ${B.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: fe(`position:relative;font-family:${e.value.style.fontFamily}; text-align:center;background:${e.value.style.backgroundColor}; ${e.value.responsive ? "height: 100%" : ""}`),
+      ref: T,
+      class: S(`vue-ui-candlestick ${W.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: me(`position:relative;font-family:${e.value.style.fontFamily}; text-align:center;background:${e.value.style.backgroundColor}; ${e.value.responsive ? "height: 100%" : ""}`),
       id: `vue-ui-candlestick_${w.value}`,
-      onMouseenter: a[4] || (a[4] = () => n(Ce)(!0)),
-      onMouseleave: a[5] || (a[5] = () => n(Ce)(!1))
+      onMouseenter: a[4] || (a[4] = () => u(Se)(!0)),
+      onMouseleave: a[5] || (a[5] = () => u(Se)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (s(), F(n(lt), {
+      e.value.userOptions.buttons.annotator ? (s(), N(u(ot), {
         key: 0,
-        svgRef: n(ze),
+        svgRef: u(Te),
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
-        active: j.value,
-        onClose: ve
+        active: J.value,
+        onClose: he
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
-      it.value ? (s(), u("div", {
+      rt.value ? (s(), i("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: ke,
+        ref: Ce,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : g("", !0),
-      e.value.style.title.text ? (s(), u("div", {
+      e.value.style.title.text ? (s(), i("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: pe,
+        ref: ke,
         style: "width:100%;background:transparent"
       }, [
-        (s(), F(qt, {
-          key: `title_${Ae.value}`,
+        (s(), N(Kt, {
+          key: `title_${ze.value}`,
           config: {
             title: {
               cy: "candlestick-div-title",
@@ -529,14 +534,14 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
           }
         }, null, 8, ["config"]))
       ], 512)) : g("", !0),
-      e.value.userOptions.show && Q.value && (n($e) || n(oe)) ? (s(), F(n(ot), {
+      e.value.userOptions.show && te.value && (u(Le) || u(ne)) ? (s(), N(u(ut), {
         ref_key: "details",
-        ref: ut,
-        key: `user_options_${ge.value}`,
+        ref: nt,
+        key: `user_options_${xe.value}`,
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
-        isImaging: n(Te),
-        isPrinting: n(Le),
+        isImaging: u(Re),
+        isPrinting: u(Fe),
         uid: w.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -544,30 +549,30 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
         hasXls: e.value.userOptions.buttons.csv,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: B.value,
+        isFullscreen: W.value,
         isTooltip: _.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: z.value,
+        chartElement: T.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: j.value,
+        isAnnotation: J.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: Be,
-        onGeneratePdf: n(Ie),
-        onGenerateCsv: Ee,
-        onGenerateImage: n(Fe),
-        onToggleTable: Me,
-        onToggleTooltip: Ue,
-        onToggleAnnotator: ve,
-        style: fe({
-          visibility: n($e) ? n(oe) ? "visible" : "hidden" : "visible"
+        onToggleFullscreen: We,
+        onGeneratePdf: u(Oe),
+        onGenerateCsv: Ue,
+        onGenerateImage: u(Ne),
+        onToggleTable: De,
+        onToggleTooltip: He,
+        onToggleAnnotator: he,
+        style: me({
+          visibility: u(Le) ? u(ne) ? "visible" : "hidden" : "visible"
         })
-      }, Tt({ _: 2 }, [
+      }, Ft({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: x(({ isOpen: l, color: o }) => [
-            m(t.$slots, "menuIcon", R(O({ isOpen: l, color: o })), void 0, !0)
+            m(t.$slots, "menuIcon", P(V({ isOpen: l, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -609,41 +614,41 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: x(({ toggleFullscreen: l, isFullscreen: o }) => [
-            m(t.$slots, "optionFullscreen", R(O({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+            m(t.$slots, "optionFullscreen", P(V({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: x(({ toggleAnnotator: l, isAnnotator: o }) => [
-            m(t.$slots, "optionAnnotator", R(O({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+            m(t.$slots, "optionAnnotator", P(V({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
           ]),
           key: "7"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
-      (s(), u("svg", {
+      (s(), i("svg", {
         ref_key: "svgRef",
-        ref: ze,
-        xmlns: n(Vt),
+        ref: Te,
+        xmlns: u(Bt),
         "aria-label": e.value.style.title.text || "candlestick chart",
-        class: Ge({ "vue-data-ui-fullscreen--on": B.value, "vue-data-ui-fulscreen--off": !B.value }),
+        class: S({ "vue-data-ui-fullscreen--on": W.value, "vue-data-ui-fulscreen--off": !W.value }),
         viewBox: `0 0 ${y.value.width <= 0 ? 10 : y.value.width} ${y.value.height <= 0 ? 10 : y.value.height}`,
-        style: fe(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
+        style: me(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
       }, [
-        Xe(n(tt)),
-        t.$slots["chart-background"] ? (s(), u("foreignObject", {
+        Ye(u(at)),
+        t.$slots["chart-background"] ? (s(), i("foreignObject", {
           key: 0,
-          x: i.value.left,
-          y: i.value.top,
-          width: Math.max(0.1, i.value.width),
-          height: Math.max(0.1, i.value.height),
+          x: n.value.left,
+          y: n.value.top,
+          width: Math.max(0.1, n.value.width),
+          height: Math.max(0.1, n.value.height),
           style: {
             pointerEvents: "none"
           }
         }, [
           m(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, al)) : g("", !0),
-        k.value.length > 0 ? (s(), u("g", ol, [
+        ], 8, sl)) : g("", !0),
+        k.value.length > 0 ? (s(), i("g", ul, [
           d("defs", null, [
             d("linearGradient", {
               id: `bearish_gradient_${w.value}`,
@@ -653,16 +658,16 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
               d("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.layout.candle.colors.bearish
-              }, null, 8, ul),
+              }, null, 8, nl),
               d("stop", {
                 offset: "50%",
-                "stop-color": `${n(K)(e.value.style.layout.candle.colors.bearish, 0.02)}DE`
-              }, null, 8, il),
+                "stop-color": `${u(ee)(e.value.style.layout.candle.colors.bearish, 0.02)}DE`
+              }, null, 8, rl),
               d("stop", {
                 offset: "100%",
-                "stop-color": `${n(K)(e.value.style.layout.candle.colors.bearish, 0.05)}66`
-              }, null, 8, nl)
-            ], 8, sl),
+                "stop-color": `${u(ee)(e.value.style.layout.candle.colors.bearish, 0.05)}66`
+              }, null, 8, vl)
+            ], 8, il),
             d("linearGradient", {
               id: `bullish_gradient_${w.value}`,
               x2: "0%",
@@ -671,159 +676,165 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
               d("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.layout.candle.colors.bullish
-              }, null, 8, vl),
+              }, null, 8, yl),
               d("stop", {
                 offset: "50%",
-                "stop-color": `${n(K)(e.value.style.layout.candle.colors.bullish, 0.02)}DE`
-              }, null, 8, dl),
+                "stop-color": `${u(ee)(e.value.style.layout.candle.colors.bullish, 0.02)}DE`
+              }, null, 8, cl),
               d("stop", {
                 offset: "100%",
-                "stop-color": `${n(K)(e.value.style.layout.candle.colors.bullish, 0.05)}66`
-              }, null, 8, yl)
-            ], 8, rl)
+                "stop-color": `${u(ee)(e.value.style.layout.candle.colors.bullish, 0.05)}66`
+              }, null, 8, hl)
+            ], 8, dl)
           ]),
-          e.value.style.layout.grid.show ? (s(), u("g", cl, [
+          e.value.style.layout.grid.show ? (s(), i("g", fl, [
             d("line", {
-              x1: i.value.left,
-              x2: i.value.left,
-              y1: i.value.top,
-              y2: i.value.bottom,
+              x1: n.value.left,
+              x2: n.value.left,
+              y1: n.value.top,
+              y2: n.value.bottom,
               stroke: e.value.style.layout.grid.stroke,
               "stroke-width": e.value.style.layout.grid.strokeWidth,
               "stroke-linecap": "round"
-            }, null, 8, hl),
+            }, null, 8, gl),
             d("line", {
-              x1: i.value.left,
-              x2: i.value.right,
-              y1: i.value.bottom,
-              y2: i.value.bottom,
+              x1: n.value.left,
+              x2: n.value.right,
+              y1: n.value.bottom,
+              y2: n.value.bottom,
               stroke: e.value.style.layout.grid.stroke,
               "stroke-width": e.value.style.layout.grid.strokeWidth,
               "stroke-linecap": "round"
-            }, null, 8, fl)
+            }, null, 8, pl)
           ])) : g("", !0),
-          e.value.style.layout.grid.yAxis.dataLabels.show ? (s(), u("g", {
+          e.value.style.layout.grid.yAxis.dataLabels.show ? (s(), i("g", {
             key: 1,
             ref_key: "scaleLabels",
-            ref: le
+            ref: ue
           }, [
-            (s(!0), u(N, null, P(dt.value, (l, o) => (s(), u("g", null, [
-              l.value >= C.value.min && l.value <= C.value.max ? (s(), u("line", {
+            (s(!0), i(E, null, B(ct.value, (l, o) => (s(), i("g", null, [
+              l.value >= C.value.min && l.value <= C.value.max ? (s(), i("line", {
                 key: 0,
-                x1: i.value.left,
-                x2: i.value.left - 5,
+                x1: n.value.left,
+                x2: n.value.left - 5,
                 y1: l.y,
                 y2: l.y,
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, gl)) : g("", !0),
-              l.value >= C.value.min && l.value <= C.value.max ? (s(), u("text", {
+              }, null, 8, bl)) : g("", !0),
+              l.value >= C.value.min && l.value <= C.value.max ? (s(), i("text", {
                 key: 1,
-                x: i.value.left - 8 + e.value.style.layout.grid.yAxis.dataLabels.offsetX,
+                x: n.value.left - 8 + e.value.style.layout.grid.yAxis.dataLabels.offsetX,
                 y: l.y + y.value.yAxisFontSize / 3,
                 "font-size": y.value.yAxisFontSize,
                 "text-anchor": "end",
                 fill: e.value.style.layout.grid.yAxis.dataLabels.color,
                 "font-weight": e.value.style.layout.grid.yAxis.dataLabels.bold ? "bold" : "normal"
-              }, q(n($)({
+              }, Q(u(L)({
                 p: e.value.style.layout.grid.yAxis.dataLabels.prefix,
                 v: l.value,
                 s: e.value.style.layout.grid.yAxis.dataLabels.suffix,
                 r: e.value.style.layout.grid.yAxis.dataLabels.roundingValue
-              })), 9, pl)) : g("", !0)
+              })), 9, ml)) : g("", !0)
             ]))), 256))
           ], 512)) : g("", !0),
-          e.value.style.layout.grid.xAxis.dataLabels.show && !e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), u("g", {
+          e.value.style.layout.grid.xAxis.dataLabels.show && !e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), i("g", {
             key: 2,
             ref_key: "timeLabelsEls",
-            ref: U
+            ref: H
           }, [
-            (s(!0), u(N, null, P(yt.value, (l, o) => (s(), u("g", null, [
+            (s(!0), i(E, null, B(ht.value, (l, o) => (s(), i("g", null, [
               d("text", {
                 class: "vue-data-ui-time-label",
-                transform: `translate(${i.value.left + v.value * o + v.value / 2}, ${i.value.bottom + y.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
+                transform: `translate(${n.value.left + v.value * o + v.value / 2}, ${n.value.bottom + y.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
                 "text-anchor": e.value.style.layout.grid.xAxis.dataLabels.rotation > 0 ? "start" : e.value.style.layout.grid.xAxis.dataLabels.rotation < 0 ? "end" : "middle",
                 "font-size": y.value.xAxisFontSize,
                 fill: e.value.style.layout.grid.xAxis.dataLabels.color,
                 "font-weight": e.value.style.layout.grid.xAxis.dataLabels.bold ? "bold" : "normal"
-              }, q(l), 9, bl)
+              }, Q(l), 9, xl)
             ]))), 256))
           ], 512)) : g("", !0),
-          e.value.style.layout.grid.xAxis.dataLabels.show && e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), u("g", {
+          e.value.style.layout.grid.xAxis.dataLabels.show && e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), i("g", {
             key: 3,
             ref_key: "timeLabelsEls",
-            ref: U
+            ref: H
           }, [
-            (s(!0), u(N, null, P(T.value, (l, o) => (s(), u("g", null, [
+            (s(!0), i(E, null, B(R.value, (l, o) => (s(), i("g", null, [
               d("text", {
                 class: "vue-data-ui-time-label",
-                transform: `translate(${i.value.left + v.value * o + v.value / 2}, ${i.value.bottom + y.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
+                transform: `translate(${n.value.left + v.value * o + v.value / 2}, ${n.value.bottom + y.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
                 "text-anchor": e.value.style.layout.grid.xAxis.dataLabels.rotation > 0 ? "start" : e.value.style.layout.grid.xAxis.dataLabels.rotation < 0 ? "end" : "middle",
                 "font-size": y.value.xAxisFontSize,
                 fill: e.value.style.layout.grid.xAxis.dataLabels.color,
                 "font-weight": e.value.style.layout.grid.xAxis.dataLabels.bold ? "bold" : "normal"
-              }, q(l.text), 9, ml)
+              }, Q(l.text), 9, kl)
             ]))), 256))
           ], 512)) : g("", !0),
           d("g", null, [
-            (s(!0), u(N, null, P(k.value, (l, o) => (s(), u("g", null, [
-              d("line", {
-                x1: l.open.x,
-                x2: l.open.x,
-                y1: l.high.y,
-                y2: l.low.y,
-                stroke: e.value.style.layout.wick.stroke,
-                "stroke-width": e.value.style.layout.wick.strokeWidth,
-                "stroke-linecap": "round"
-              }, null, 8, xl),
-              e.value.style.layout.wick.extremity.shape === "circle" ? (s(), u("g", kl, [
+            (s(!0), i(E, null, B(k.value, (l, o) => (s(), i("g", null, [
+              d("rect", {
+                x: l.open.x - e.value.style.layout.wick.strokeWidth / 2,
+                y: l.high.y,
+                width: e.value.style.layout.wick.strokeWidth,
+                height: Math.abs(l.high.y - l.low.y),
+                fill: e.value.style.layout.wick.stroke,
+                stroke: "none",
+                rx: e.value.style.layout.wick.strokeWidth / 2,
+                class: S({ "vue-data-ui-transition": $.value && !u(z) })
+              }, null, 10, wl),
+              e.value.style.layout.wick.extremity.shape === "circle" ? (s(), i("g", Al, [
                 d("circle", {
                   cx: l.high.x,
                   cy: l.high.y,
                   r: e.value.style.layout.wick.extremity.size === "auto" ? v.value / 20 : e.value.style.layout.wick.extremity.size,
-                  fill: e.value.style.layout.wick.extremity.color
-                }, null, 8, wl),
+                  fill: e.value.style.layout.wick.extremity.color,
+                  class: S({ "vue-data-ui-transition": $.value && !u(z) })
+                }, null, 10, _l),
                 d("circle", {
                   cx: l.low.x,
                   cy: l.low.y,
                   r: e.value.style.layout.wick.extremity.size === "auto" ? v.value / 20 : e.value.style.layout.wick.extremity.size,
-                  fill: e.value.style.layout.wick.extremity.color
-                }, null, 8, Al)
+                  fill: e.value.style.layout.wick.extremity.color,
+                  class: S({ "vue-data-ui-transition": $.value && !u(z) })
+                }, null, 10, Cl)
               ])) : g("", !0),
-              e.value.style.layout.wick.extremity.shape === "line" ? (s(), u("g", _l, [
-                d("line", {
-                  x1: l.high.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
-                  x2: l.high.x + (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
-                  y1: l.high.y,
-                  y2: l.high.y,
-                  stroke: e.value.style.layout.wick.extremity.color,
-                  "stroke-width": e.value.style.layout.wick.strokeWidth,
-                  "stroke-linecap": "round"
-                }, null, 8, Cl),
-                d("line", {
-                  x1: l.low.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
-                  x2: l.low.x + (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
-                  y1: l.low.y,
-                  y2: l.low.y,
-                  stroke: e.value.style.layout.wick.extremity.color,
-                  "stroke-width": e.value.style.layout.wick.strokeWidth,
-                  "stroke-linecap": "round"
-                }, null, 8, $l)
+              e.value.style.layout.wick.extremity.shape === "line" ? (s(), i("g", $l, [
+                d("rect", {
+                  x: l.high.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
+                  y: l.high.y - e.value.style.layout.wick.strokeWidth / 2,
+                  width: Math.abs(l.high.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2 - (l.high.x + (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2)),
+                  height: e.value.style.layout.wick.strokeWidth,
+                  rx: e.value.style.layout.wick.strokeWidth / 2,
+                  fill: e.value.style.layout.wick.extremity.color,
+                  stroke: "none",
+                  class: S({ "vue-data-ui-transition": $.value && !u(z) })
+                }, null, 10, zl),
+                d("rect", {
+                  x: l.low.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
+                  y: l.low.y - e.value.style.layout.wick.strokeWidth / 2,
+                  width: Math.abs(l.low.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2 - (l.low.x + (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2)),
+                  height: e.value.style.layout.wick.strokeWidth,
+                  fill: e.value.style.layout.wick.extremity.color,
+                  stroke: "none",
+                  rx: e.value.style.layout.wick.strokeWidth / 2,
+                  class: S({ "vue-data-ui-transition": $.value && !u(z) })
+                }, null, 10, Sl)
               ])) : g("", !0)
             ]))), 256))
           ]),
           d("g", null, [
-            (s(!0), u(N, null, P(k.value, (l, o) => (s(), u("rect", {
+            (s(!0), i(E, null, B(k.value, (l, o) => (s(), i("rect", {
               x: l.open.x - v.value / 2 + v.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
               y: l.isBullish ? l.last.y : l.open.y,
               height: Math.abs(l.last.y - l.open.y) <= 0 ? 1e-4 : Math.abs(l.last.y - l.open.y),
               width: v.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : v.value * e.value.style.layout.candle.widthRatio,
               fill: e.value.style.layout.candle.gradient.underlayer,
               rx: e.value.style.layout.candle.borderRadius,
-              stroke: "none"
-            }, null, 8, zl))), 256)),
-            (s(!0), u(N, null, P(k.value, (l, o) => (s(), u("rect", {
+              stroke: "none",
+              class: S({ "vue-data-ui-transition": $.value && !u(z) })
+            }, null, 10, Ll))), 256)),
+            (s(!0), i(E, null, B(k.value, (l, o) => (s(), i("rect", {
               x: l.open.x - v.value / 2 + v.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
               y: l.isBullish ? l.last.y : l.open.y,
               height: Math.abs(l.last.y - l.open.y) <= 0 ? 1e-4 : Math.abs(l.last.y - l.open.y),
@@ -833,47 +844,48 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
               stroke: e.value.style.layout.candle.stroke,
               "stroke-width": e.value.style.layout.candle.strokeWidth,
               "stroke-linecap": "round",
-              "stroke-linejoin": "round"
-            }, null, 8, Sl))), 256))
+              "stroke-linejoin": "round",
+              class: S({ "vue-data-ui-transition": $.value && !u(z) })
+            }, null, 10, Tl))), 256))
           ]),
           d("g", null, [
-            (s(!0), u(N, null, P(k.value, (l, o) => (s(), u("rect", {
-              x: i.value.left + o * v.value,
-              y: i.value.top,
-              height: i.value.height <= 0 ? 1e-4 : i.value.height,
+            (s(!0), i(E, null, B(k.value, (l, o) => (s(), i("rect", {
+              x: n.value.left + o * v.value,
+              y: n.value.top,
+              height: n.value.height <= 0 ? 1e-4 : n.value.height,
               width: v.value <= 0 ? 1e-4 : v.value,
-              fill: te.value === o ? n(Et)(e.value.style.layout.selector.color, e.value.style.layout.selector.opacity) : "transparent",
-              onMouseover: (p) => ct(o, l),
+              fill: se.value === o ? u(Mt)(e.value.style.layout.selector.color, e.value.style.layout.selector.opacity) : "transparent",
+              onMouseover: (p) => ft(o, l),
               onMouseleave: a[0] || (a[0] = (p) => {
-                te.value = void 0, Z.value = !1;
+                se.value = void 0, ae.value = !1;
               })
-            }, null, 40, Ll))), 256))
+            }, null, 40, Il))), 256))
           ])
         ])) : g("", !0),
         m(t.$slots, "svg", { svg: y.value }, void 0, !0)
-      ], 14, ll)),
-      t.$slots.watermark ? (s(), u("div", Tl, [
-        m(t.$slots, "watermark", R(O({ isPrinting: n(Le) || n(Te) })), void 0, !0)
+      ], 14, ol)),
+      t.$slots.watermark ? (s(), i("div", Fl, [
+        m(t.$slots, "watermark", P(V({ isPrinting: u(Fe) || u(Re) })), void 0, !0)
       ])) : g("", !0),
-      e.value.style.zoom.show && Q.value ? (s(), u("div", {
+      e.value.style.zoom.show && te.value ? (s(), i("div", {
         key: 5,
         ref_key: "chartSlicer",
-        ref: me
+        ref: Ae
       }, [
-        (s(), F(Jt, {
+        (s(), N(Qt, {
           ref_key: "slicerComponent",
-          ref: Ve,
-          key: `slicer_${W.value}`,
+          ref: Me,
+          key: `slicer_${j.value}`,
           background: e.value.style.zoom.color,
           borderColor: e.value.style.backgroundColor,
           fontSize: e.value.style.zoom.fontSize,
           useResetSlot: e.value.style.zoom.useResetSlot,
-          labelLeft: Pe.value.start,
-          labelRight: Pe.value.end,
+          labelLeft: Be.value.start,
+          labelRight: Be.value.end,
           textColor: e.value.style.color,
           inputColor: e.value.style.zoom.color,
           selectColor: e.value.style.zoom.highlightColor,
-          max: D.value,
+          max: G.value,
           min: 0,
           valueStart: h.value.start,
           valueEnd: h.value.end,
@@ -882,33 +894,33 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
           end: h.value.end,
           "onUpdate:end": a[2] || (a[2] = (l) => h.value.end = l),
           refreshStartPoint: e.value.style.zoom.startIndex !== null ? e.value.style.zoom.startIndex : 0,
-          refreshEndPoint: e.value.style.zoom.endIndex !== null ? e.value.style.zoom.endIndex + 1 : D.value,
+          refreshEndPoint: e.value.style.zoom.endIndex !== null ? e.value.style.zoom.endIndex + 1 : G.value,
           enableRangeHandles: e.value.style.zoom.enableRangeHandles,
           enableSelectionDrag: e.value.style.zoom.enableSelectionDrag,
-          onReset: ht
+          onReset: gt
         }, {
           "reset-action": x(({ reset: l }) => [
-            m(t.$slots, "reset-action", R(O({ reset: l })), void 0, !0)
+            m(t.$slots, "reset-action", P(V({ reset: l })), void 0, !0)
           ]),
           _: 3
         }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag"]))
       ], 512)) : g("", !0),
       d("div", {
         ref_key: "chartLegend",
-        ref: be
+        ref: we
       }, [
         m(t.$slots, "legend", { legend: k.value }, void 0, !0)
       ], 512),
-      t.$slots.source ? (s(), u("div", {
+      t.$slots.source ? (s(), i("div", {
         key: 6,
         ref_key: "source",
-        ref: xe,
+        ref: _e,
         dir: "auto"
       }, [
         m(t.$slots, "source", {}, void 0, !0)
       ], 512)) : g("", !0),
-      Xe(n(at), {
-        show: _.value.showTooltip && Z.value,
+      Ye(u(st), {
+        show: _.value.showTooltip && ae.value,
         backgroundColor: e.value.style.tooltip.backgroundColor,
         color: e.value.style.tooltip.color,
         borderRadius: e.value.style.tooltip.borderRadius,
@@ -918,20 +930,20 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
         backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
         position: e.value.style.tooltip.position,
         offsetY: e.value.style.tooltip.offsetY,
-        parent: z.value,
-        content: ee.value,
-        isFullscreen: B.value,
+        parent: T.value,
+        content: oe.value,
+        isFullscreen: W.value,
         isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function"
       }, {
         "tooltip-before": x(() => [
-          m(t.$slots, "tooltip-before", R(O({ ...ne.value })), void 0, !0)
+          m(t.$slots, "tooltip-before", P(V({ ...ye.value })), void 0, !0)
         ]),
         "tooltip-after": x(() => [
-          m(t.$slots, "tooltip-after", R(O({ ...ne.value })), void 0, !0)
+          m(t.$slots, "tooltip-after", P(V({ ...ye.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
-      Q.value ? (s(), F(n(Ze), {
+      te.value ? (s(), N(u(tt), {
         key: 7,
         hideDetails: "",
         config: {
@@ -948,30 +960,30 @@ const tl = ["id"], ll = ["xmlns", "aria-label", "viewBox"], al = ["x", "y", "wid
         }
       }, {
         content: x(() => [
-          (s(), F(n(et), {
-            key: `table_${we.value}`,
-            colNames: X.value.colNames,
-            head: X.value.head,
-            body: X.value.body,
-            config: X.value.config,
+          (s(), N(u(lt), {
+            key: `table_${$e.value}`,
+            colNames: q.value.colNames,
+            head: q.value.head,
+            body: q.value.body,
+            config: q.value.config,
             title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? ` : ${e.value.style.title.subtitle.text}` : ""}`,
             onClose: a[3] || (a[3] = (l) => _.value.showTable = !1)
           }, {
             th: x(({ th: l }) => [
-              It(q(l), 1)
+              Rt(Q(l), 1)
             ]),
             td: x(({ td: l }) => [
-              d("div", { innerHTML: l }, null, 8, Il)
+              d("div", { innerHTML: l }, null, 8, Rl)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : g("", !0),
-      n(_e) ? (s(), F(Yt, { key: 8 })) : g("", !0)
-    ], 46, tl));
+      u(z) ? (s(), N(Jt, { key: 8 })) : g("", !0)
+    ], 46, al));
   }
-}, Yl = /* @__PURE__ */ el(Fl, [["__scopeId", "data-v-84693509"]]);
+}, Jl = /* @__PURE__ */ ll(Ol, [["__scopeId", "data-v-85d19459"]]);
 export {
-  Yl as default
+  Jl as default
 };