vue-data-ui 3.6.0 → 3.7.1

package/dist/{vue-ui-candlestick-BcChw-8c.js → vue-ui-candlestick-DIWeygxV.js}

@@ -1,23 +1,40 @@
-import { defineAsyncComponent as H, computed as c, ref as y, toRefs as Al, watch as se, shallowRef as bt, onMounted as $l, onBeforeUnmount as De, watchEffect as Cl, nextTick as kt, createElementBlock as i, openBlock as u, normalizeStyle as ue, normalizeClass as V, createBlock as Q, createCommentVNode as m, createElementVNode as p, createVNode as Pe, unref as h, withCtx as g, renderSlot as b, normalizeProps as F, guardReactiveProps as I, createSlots as wt, Fragment as S, renderList as M, toDisplayString as ie, mergeProps as At, resolveDynamicComponent as _l, createTextVNode as $t } from "vue";
-import { c as zl, t as Sl, O as pe, o as Ct, f as J, m as Ll, x as G, v as Tl, d as U, X as Fl, i as fe, s as Il, R as _t, P as Ml, Q as Rl, G as Ol, H as Dl } from "./lib-C_mNZmhD.js";
-import { t as zt, u as Pl } from "./useResponsive-DfdjqQps.js";
-import { u as Bl, a as St } from "./useNestedProp-CIoDlpHu.js";
-import { u as Nl } from "./usePrinter-DTzqpYKF.js";
-import { u as El, B as Vl } from "./BaseScanner-BgWxam9d.js";
-import { u as Lt, a as Ul, l as Wl } from "./useTimeLabels-BGFjWgrv.js";
-import { u as Xl } from "./useSvgExport-DrjCWun4.js";
-import { u as Hl } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Gl } from "./useChartAccessibility-9icAAmYg.js";
-import { u as jl } from "./useTimeLabelCollider-CIsgDrl9.js";
-import ql from "./img-BecE5qXd.js";
-import Yl from "./Title-Bb1VWCtR.js";
-import { t as Ql } from "./themes-DH-N_ePR.js";
-import { S as Jl } from "./SlicerPreview-wXjV4LWO.js";
-import { _ as Kl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "width", "height"], la = { key: 1 }, aa = ["id"], oa = ["stop-color"], sa = ["stop-color"], ua = ["stop-color"], ia = ["id"], na = ["stop-color"], ra = ["stop-color"], va = ["stop-color"], da = { key: 0 }, ca = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ya = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ha = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ma = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], pa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], fa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ga = ["x", "y", "font-size", "fill", "font-weight"], xa = ["transform", "text-anchor", "font-size", "fill", "font-weight"], ba = ["transform", "text-anchor", "font-size", "fill", "font-weight"], ka = ["x", "y", "width", "height", "fill", "rx"], wa = { key: 0 }, Aa = ["cx", "cy", "r", "fill"], $a = ["cx", "cy", "r", "fill"], Ca = { key: 1 }, _a = ["x", "y", "width", "height", "rx", "fill"], za = ["x", "y", "width", "height", "fill", "rx"], Sa = ["x", "y", "height", "width", "fill", "rx"], La = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width"], Ta = ["d", "stroke"], Fa = ["x", "y", "height", "width", "fill", "onMouseover", "onMouseleave", "onClick"], Ia = ["data-start", "data-end"], Ma = {
+import { defineAsyncComponent as j, computed as d, ref as y, toRefs as Dl, watch as se, shallowRef as kt, onMounted as Ml, onBeforeUnmount as Ee, watchEffect as Il, nextTick as wt, createElementBlock as i, openBlock as u, normalizeStyle as ue, normalizeClass as V, createBlock as K, createCommentVNode as m, createElementVNode as g, createVNode as Re, unref as h, withCtx as b, renderSlot as x, normalizeProps as T, guardReactiveProps as D, createSlots as Ct, Fragment as z, renderList as M, toDisplayString as ie, mergeProps as At, resolveDynamicComponent as Bl, createTextVNode as $t } from "vue";
+import { c as El, t as Rl, W as ge, o as Ft, g as J, F as Ol, M as H, K as Pl, d as U, X as Nl, h as fe, s as Vl, Y as _t, u as Ul, q as Wl, x as Xl, R as jl } from "./lib-C5BH09_g.js";
+import { t as zt, u as Hl } from "./useResponsive-DfdjqQps.js";
+import { u as Gl, a as Oe } from "./useNestedProp-CWo6bftQ.js";
+import { u as ql } from "./usePrinter-DCJzEiS8.js";
+import { u as Yl, B as Kl } from "./BaseScanner-BgWxam9d.js";
+import { u as Lt, a as Jl, l as Ql } from "./useTimeLabels-C5qMhpbe.js";
+import { u as Zl } from "./useSvgExport-DrjCWun4.js";
+import { u as eo } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as to } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as lo } from "./useChartAccessibility-9icAAmYg.js";
+import { u as oo } from "./useTimeLabelCollider-CIsgDrl9.js";
+import ao from "./img-DUzJeMlr.js";
+import so from "./Title-DfFUb9hd.js";
+import { S as uo } from "./SlicerPreview-D76aSViW.js";
+import { _ as io } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const St = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { selector: { color: "#CCCCCC" }, grid: { stroke: "#5A5A5A", xAxis: { dataLabels: { color: "#CCCCCC" } }, yAxis: { dataLabels: { color: "#CCCCCC" } } }, wick: { stroke: "#5A5A5A", extremity: { color: "#5A5A5A" } }, candle: { stroke: "#1A1A1A" } }, zoom: { color: "#4A4A4A", highlightColor: "#9A9A9A", minimap: { selectedColor: "#8A8A8A", lineColor: "#424242", indicatorColor: "#CCCCCC" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Tt = { style: { backgroundColor: "#FFF8E1", color: "#424242", layout: { selector: { color: "#424242" }, grid: { stroke: "#5D4037", xAxis: { dataLabels: { color: "#424242" } }, yAxis: { dataLabels: { color: "#424242" } } }, wick: { stroke: "#5D4037", extremity: { color: "#5D4037" } }, candle: { stroke: "#FFF8E1", colors: { bullish: "#D32F2F", bearish: "#F57C00" }, gradient: { show: !1 } } }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Dt = { style: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { selector: { color: "#FFF8E1" }, grid: { stroke: "#5D4037", xAxis: { dataLabels: { color: "#BDBDBD" } }, yAxis: { dataLabels: { color: "#BDBDBD" } } }, wick: { stroke: "#BDBDBD", extremity: { color: "#BDBDBD" } }, candle: { stroke: "#1E1E1E", colors: { bullish: "#D32F2F", bearish: "#F57C00" }, gradient: { show: !1 } } }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Mt = { style: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { selector: { color: "#7DA9B5" }, grid: { stroke: "#334C33", xAxis: { dataLabels: { color: "#99CC99" } }, yAxis: { dataLabels: { color: "#99CC99" } } }, wick: { stroke: "#334C33", extremity: { color: "#334C33" } }, candle: { stroke: "#1A1A1A", colors: { bullish: "#00FF00", bearish: "#334C33" }, gradient: { show: !1 } } }, zoom: { color: "#5F6A5F", highlightColor: "#66CC66" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, It = { style: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { selector: { color: "#8F837A" }, grid: { stroke: "transparent", xAxis: { dataLabels: { color: "#8A9892" } }, yAxis: { dataLabels: { color: "#8A9892" } } }, wick: { stroke: "#D7E0D2", extremity: { shape: "circle", size: 2, color: "#C5B8A7" } }, candle: { stroke: "#fbfafa", colors: { bullish: "#A0AC94", bearish: "#C09E85" }, gradient: { show: !0 } } }, zoom: { color: "#E0CFC3", highlightColor: "#8F837A" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Bt = { style: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { selector: { color: "#7DA9B5" }, grid: { stroke: "#334C33", xAxis: { dataLabels: { color: "#61747E" } }, yAxis: { dataLabels: { color: "#61747E" } } }, wick: { stroke: "#61747E", extremity: { color: "#61747E" } }, candle: { stroke: "#1A1A1A", colors: { bullish: "#92B0AB", bearish: "#EFECEC" }, gradient: { show: !1 } } }, zoom: { color: "#92B0AB", highlightColor: "#50606C" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Et = {
+  default: {},
+  dark: St,
+  celebration: Tt,
+  celebrationNight: Dt,
+  hack: Mt,
+  zen: It,
+  concrete: Bt
+}, va = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: Tt,
+  celebrationNight: Dt,
+  concrete: Bt,
+  dark: St,
+  default: Et,
+  hack: Mt,
+  zen: It
+}, Symbol.toStringTag, { value: "Module" })), no = ["id"], ro = ["xmlns", "aria-label", "viewBox"], co = ["x", "y", "width", "height"], vo = { key: 1 }, yo = ["id"], ho = ["stop-color"], mo = ["stop-color"], go = ["stop-color"], fo = ["id"], po = ["stop-color"], bo = ["stop-color"], xo = ["stop-color"], ko = { key: 0 }, wo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Co = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ao = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], $o = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Fo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], _o = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], zo = ["x", "y", "font-size", "fill", "font-weight"], Lo = ["transform", "text-anchor", "font-size", "fill", "font-weight"], So = ["transform", "text-anchor", "font-size", "fill", "font-weight"], To = ["x", "y", "width", "height", "fill", "rx"], Do = { key: 0 }, Mo = ["cx", "cy", "r", "fill"], Io = ["cx", "cy", "r", "fill"], Bo = { key: 1 }, Eo = ["x", "y", "width", "height", "rx", "fill"], Ro = ["x", "y", "width", "height", "fill", "rx"], Oo = ["x", "y", "height", "width", "fill", "rx"], Po = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width"], No = ["d", "stroke"], Vo = ["x", "y", "height", "width", "fill", "onMouseover", "onMouseleave", "onClick"], Uo = ["data-start", "data-end"], Wo = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Ra = ["d", "stroke"], Oa = ["d", "stroke", "stroke-width"], Da = ["innerHTML"], Pa = {
+}, Xo = ["d", "stroke"], jo = ["d", "stroke", "stroke-width"], Ho = ["innerHTML"], Go = {
   __name: "vue-ui-candlestick",
   props: {
     config: {
@@ -38,14 +55,14 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
     }
   },
   emits: ["selectX"],
-  setup(Tt, { expose: Ft, emit: It }) {
-    const Mt = H(() => import("./BaseIcon-DLFL0M4-.js")), Rt = H(() => import("./Tooltip-oWCO1HKy.js")), Ot = H(() => import("./vue-ui-accordion-SSLXLlNz.js")), Dt = H(() => import("./DataTable-UCyd_BQI.js")), Pt = H(() => import("./PenAndPaper-BJSMejV9.js")), Bt = H(() => import("./UserOptions-BqmUW9Kp.js")), Nt = H(() => import("./PackageVersion-D_4Hr4S4.js")), Et = H(() => import("./BaseDraggableDialog-DhKIof09.js")), { vue_ui_candlestick: Vt } = Bl(), x = Tt, Be = It, ge = c(() => !!x.dataset && x.dataset.length), D = y(!1), xe = y(null), R = y(zl()), be = y(!1), ke = y(""), P = y(void 0), Ne = y(0), B = y(null), Ee = y(null), Ve = y(null), Z = y(null), Ue = y(null), We = y(null), Ut = y(0), Xe = y(0), He = y(0), we = y(null), ee = y(null), te = y(null), Ae = y(null), Ge = y(null), e = y(ze()), { loading: N, FINAL_DATASET: k, manualLoading: $e } = El({
-      ...Al(x),
+  setup(Rt, { expose: Ot, emit: Pt }) {
+    const Nt = j(() => import("./BaseIcon-CofSxalQ.js")), Vt = j(() => import("./Tooltip-WD0Ros6G.js")), Ut = j(() => import("./vue-ui-accordion-DSdZUn2C.js")), Wt = j(() => import("./DataTable-CHaOCmsE.js")), Xt = j(() => import("./PenAndPaper-HCZQTkqi.js")), jt = j(() => import("./UserOptions-B3I-s3Lw.js")), Ht = j(() => import("./PackageVersion-C82JCJOX.js")), Gt = j(() => import("./BaseDraggableDialog-CRF94NJQ.js")), { vue_ui_candlestick: qt } = Gl(), { isThemeValid: Yt, warnInvalidTheme: Kt } = eo(), f = Rt, Pe = Pt, pe = d(() => !!f.dataset && f.dataset.length), E = y(!1), be = y(null), I = y(El()), xe = y(!1), ke = y(""), R = y(void 0), Ne = y(0), O = y(null), Ve = y(null), Ue = y(null), Z = y(null), We = y(null), Xe = y(null), Jt = y(0), je = y(0), He = y(0), we = y(null), ee = y(null), te = y(null), Ce = y(null), Ge = y(null), e = y(_e()), { loading: P, FINAL_DATASET: k, manualLoading: Ae } = Yl({
+      ...Dl(f),
       FINAL_CONFIG: e,
-      prepareConfig: ze,
+      prepareConfig: _e,
       callback: () => {
         Promise.resolve().then(async () => {
-          await ce();
+          await de();
         });
       },
       skeletonDataset: [
@@ -62,7 +79,7 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
         [17304192e5, 890, 2330, 550, 1950, 3770],
         [17330112e5, 1440, 3770, 890, 3200, 5100]
       ],
-      skeletonConfig: Sl({
+      skeletonConfig: Rl({
         defaultConfig: e.value,
         userConfig: {
           useCssAnimation: !1,
@@ -109,132 +126,145 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
           }
         }
       })
-    }), { userOptionsVisible: Ce, setUserOptionsVisibility: je, keepUserOptionState: qe } = Hl({ config: e.value }), { svgRef: _e } = Gl({ config: e.value.style.title });
-    function Wt() {
-      je(!0);
+    }), { userOptionsVisible: $e, setUserOptionsVisibility: qe, keepUserOptionState: Ye } = to({ config: e.value }), { svgRef: Fe } = lo({ config: e.value.style.title });
+    function Qt() {
+      qe(!0);
     }
-    function Xt() {
-      je(!1), Be("selectX", { seriesIndex: null, datapoint: null }), P.value = null;
+    function Zt() {
+      qe(!1), Pe("selectX", { seriesIndex: null, datapoint: null }), R.value = null;
     }
-    function ze() {
-      const t = St({
-        userConfig: x.config,
-        defaultConfig: Vt
+    function _e() {
+      const t = Oe({
+        userConfig: f.config,
+        defaultConfig: qt
       });
-      let a = {};
-      return t.theme ? a = {
-        ...St({
-          userConfig: Ql.vue_ui_candlestick[t.theme] || x.config,
-          defaultConfig: t
-        })
-      } : a = t, x.config && pe(x.config, "style.zoom.startIndex") ? a.style.zoom.startIndex = x.config.style.zoom.startIndex : a.style.zoom.startIndex = null, x.config && pe(x.config, "style.zoom.endIndex") ? a.style.zoom.endIndex = x.config.style.zoom.endIndex : a.style.zoom.endIndex = null, x.config && pe(x.config, "style.layout.grid.yAxis.scale.min") ? a.style.layout.grid.yAxis.scale.min = x.config.style.layout.grid.yAxis.scale.min : a.style.layout.grid.yAxis.scale.min = null, x.config && pe(x.config, "style.layout.grid.yAxis.scale.max") ? a.style.layout.grid.yAxis.scale.max = x.config.style.layout.grid.yAxis.scale.max : a.style.layout.grid.yAxis.scale.max = null, a;
+      let o = {};
+      const l = t.theme;
+      if (l)
+        if (!Yt.value(t))
+          Kt(t), o = t;
+        else {
+          const a = Oe({
+            userConfig: Et[l] || f.config,
+            defaultConfig: t
+          });
+          o = {
+            ...Oe({
+              userConfig: f.config,
+              defaultConfig: a
+            })
+          };
+        }
+      else
+        o = t;
+      return f.config && ge(f.config, "style.zoom.startIndex") ? o.style.zoom.startIndex = f.config.style.zoom.startIndex : o.style.zoom.startIndex = null, f.config && ge(f.config, "style.zoom.endIndex") ? o.style.zoom.endIndex = f.config.style.zoom.endIndex : o.style.zoom.endIndex = null, f.config && ge(f.config, "style.layout.grid.yAxis.scale.min") ? o.style.layout.grid.yAxis.scale.min = f.config.style.layout.grid.yAxis.scale.min : o.style.layout.grid.yAxis.scale.min = null, f.config && ge(f.config, "style.layout.grid.yAxis.scale.max") ? o.style.layout.grid.yAxis.scale.max = f.config.style.layout.grid.yAxis.scale.max : o.style.layout.grid.yAxis.scale.max = null, o;
     }
-    se(() => x.config, (t) => {
-      N.value || (e.value = ze()), Ce.value = !e.value.userOptions.showOnChartHover, Ye(), Ut.value += 1, He.value += 1, Xe.value += 1, L.value.showTable = e.value.table.show, L.value.showTooltip = e.value.style.tooltip.show, ne();
-    }, { deep: !0 }), se(() => x.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && ($e.value = !1), vt();
+    se(() => f.config, (t) => {
+      P.value || (e.value = _e()), $e.value = !e.value.userOptions.showOnChartHover, Ke(), Jt.value += 1, He.value += 1, je.value += 1, L.value.showTable = e.value.table.show, L.value.showTooltip = e.value.style.tooltip.show, ne();
+    }, { deep: !0 }), se(() => f.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (Ae.value = !1), vt();
     }, { deep: !0 });
-    const f = y({
+    const p = y({
       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
-    }), W = bt(null), K = bt(null);
-    $l(() => {
-      Ye();
+    }), W = kt(null), Q = kt(null);
+    Ml(() => {
+      Ke();
     });
-    const j = c(() => !!e.value.debug);
-    function Ye() {
-      if (Ct(x.dataset) && (J({
+    const G = d(() => !!e.value.debug);
+    function Ke() {
+      if (Ft(f.dataset) && (J({
         componentName: "VueUiCandlestick",
         type: "dataset",
-        debug: j.value
-      }), $e.value = !0), Ct(x.dataset) || ($e.value = e.value.loading), setTimeout(() => {
-        D.value = !0;
+        debug: G.value
+      }), Ae.value = !0), Ft(f.dataset) || (Ae.value = e.value.loading), setTimeout(() => {
+        E.value = !0;
       }, 10), e.value.responsive) {
-        const a = zt(() => {
-          D.value = !1;
-          const { width: l, height: o } = Pl({
-            chart: B.value,
-            title: e.value.style.title.text ? Ee.value : null,
-            slicer: e.value.style.zoom.show && $.value > 6 ? Z.value.$el : null,
-            legend: Ve.value,
-            source: Ue.value,
-            noTitle: We.value
+        const o = zt(() => {
+          E.value = !1;
+          const { width: l, height: a } = Hl({
+            chart: O.value,
+            title: e.value.style.title.text ? Ve.value : null,
+            slicer: e.value.style.zoom.show && A.value > 6 ? Z.value.$el : null,
+            legend: Ue.value,
+            source: We.value,
+            noTitle: Xe.value
           });
           requestAnimationFrame(() => {
-            f.value.width = l, f.value.height = o - 12, e.value.responsiveProportionalSizing ? (f.value.xAxisFontSize = _t({
-              relator: Math.min(l, o),
+            p.value.width = l, p.value.height = a - 12, e.value.responsiveProportionalSizing ? (p.value.xAxisFontSize = _t({
+              relator: Math.min(l, a),
               adjuster: e.value.style.width,
               source: e.value.style.layout.grid.xAxis.dataLabels.fontSize,
               threshold: 6,
               fallback: 6
-            }), f.value.yAxisFontSize = _t({
-              relator: Math.min(l, o),
+            }), p.value.yAxisFontSize = _t({
+              relator: Math.min(l, a),
               adjuster: e.value.style.width,
               source: e.value.style.layout.grid.yAxis.dataLabels.fontSize,
               threshold: 6,
               fallback: 6
-            })) : (f.value.xAxisFontSize = e.value.style.layout.grid.xAxis.dataLabels.fontSize, f.value.yAxisFontSize = e.value.style.layout.grid.yAxis.dataLabels.fontSize), xe.value && clearTimeout(xe.value), xe.value = setTimeout(() => {
-              D.value = !0;
+            })) : (p.value.xAxisFontSize = e.value.style.layout.grid.xAxis.dataLabels.fontSize, p.value.yAxisFontSize = e.value.style.layout.grid.yAxis.dataLabels.fontSize), be.value && clearTimeout(be.value), be.value = setTimeout(() => {
+              E.value = !0;
             }, 10);
           });
         });
-        W.value && (K.value && W.value.unobserve(K.value), W.value.disconnect()), W.value = new ResizeObserver(a), K.value = B.value.parentNode, W.value.observe(K.value);
+        W.value && (Q.value && W.value.unobserve(Q.value), W.value.disconnect()), W.value = new ResizeObserver(o), Q.value = O.value.parentNode, W.value.observe(Q.value);
       }
-      ce();
+      de();
     }
-    De(() => {
-      W.value && (K.value && W.value.unobserve(K.value), W.value.disconnect());
+    Ee(() => {
+      W.value && (Q.value && W.value.unobserve(Q.value), W.value.disconnect());
     });
-    const { isPrinting: Qe, isImaging: Je, generatePdf: Ke, generateImage: Ze } = Nl({
-      elementId: `vue-ui-candlestick_${R.value}`,
+    const { isPrinting: Je, isImaging: Qe, generatePdf: Ze, generateImage: et } = ql({
+      elementId: `vue-ui-candlestick_${I.value}`,
       fileName: e.value.style.title.text || "vue-ui-candlestick",
       options: e.value.userOptions.print
-    }), Ht = c(() => e.value.userOptions.show && !e.value.style.title.text), L = y({
+    }), el = d(() => e.value.userOptions.show && !e.value.style.title.text), L = y({
       showTable: e.value.table.show,
       showTooltip: e.value.style.tooltip.show
-    }), Se = y(0), Gt = zt((t) => {
-      Se.value = t;
+    }), ze = y(0), tl = zt((t) => {
+      ze.value = t;
     }, 100);
-    Cl((t) => {
-      const a = ee.value;
-      if (!a) return;
-      const l = new ResizeObserver((o) => {
-        Gt(o[0].contentRect.height);
+    Il((t) => {
+      const o = ee.value;
+      if (!o) return;
+      const l = new ResizeObserver((a) => {
+        tl(a[0].contentRect.height);
       });
-      l.observe(a), t(() => l.disconnect());
-    }), De(() => {
-      Se.value = 0;
+      l.observe(o), t(() => l.disconnect());
+    }), Ee(() => {
+      ze.value = 0;
     });
-    const et = c(() => {
+    const tt = d(() => {
       let t = 0;
-      return ee.value && (t = Se.value + f.value.xAxisFontSize), t;
+      return ee.value && (t = ze.value + p.value.xAxisFontSize), t;
     });
-    function jt() {
+    function ll() {
       let t = e.value.style.layout.grid.yAxis.dataLabels.offsetX;
-      return we.value && (t = Array.from(we.value.querySelectorAll("text")).reduce((o, s) => {
-        const v = s.getComputedTextLength();
-        return v > o ? v : o;
+      return we.value && (t = Array.from(we.value.querySelectorAll("text")).reduce((a, s) => {
+        const c = s.getComputedTextLength();
+        return c > a ? c : a;
       }, 0)), t + 13;
     }
-    const n = c(() => {
-      const { top: t, right: a, bottom: l, left: o } = e.value.style.layout.padding, s = jt(), v = 12;
+    const n = d(() => {
+      const { top: t, right: o, bottom: l, left: a } = e.value.style.layout.padding, s = ll(), c = 12;
       return {
-        top: t + v,
-        right: f.value.width - a,
-        left: o + s,
-        bottom: f.value.height - l - et.value,
-        width: f.value.width - o - a - s,
-        height: f.value.height - t - l - et.value - v
+        top: t + c,
+        right: p.value.width - o,
+        left: a + s,
+        bottom: p.value.height - l - tt.value,
+        width: p.value.width - a - o - s,
+        height: p.value.height - t - l - tt.value - c
       };
-    }), qt = c(() => {
-      const { left: t, top: a, width: l, height: o } = n.value, s = r.value.start, w = r.value.end - s, T = l / w, z = A.value.start - s, X = A.value.end - s, Y = Math.max(0, Math.min(w, z)), me = Math.max(0, Math.min(w, X));
+    }), ol = d(() => {
+      const { left: t, top: o, width: l, height: a } = n.value, s = r.value.start, w = r.value.end - s, S = l / w, _ = C.value.start - s, X = C.value.end - s, Y = Math.max(0, Math.min(w, _)), me = Math.max(0, Math.min(w, X));
       return {
-        x: t + Y * T,
-        y: a,
-        width: (me - Y) * T,
-        height: o,
+        x: t + Y * S,
+        y: o,
+        width: (me - Y) * S,
+        height: a,
         fill: e.value.style.zoom.preview.fill,
         stroke: e.value.style.zoom.preview.stroke,
         "stroke-width": e.value.style.zoom.preview.strokeWidth,
@@ -247,59 +277,59 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
           animation: "none !important"
         }
       };
-    }), $ = c(() => k.value.length), r = y({
+    }), A = d(() => k.value.length), r = y({
       start: 0,
-      end: $.value
-    }), A = y({ start: 0, end: $.value }), tt = c(() => e.value.style.zoom.preview.enable && (A.value.start !== r.value.start || A.value.end !== r.value.end));
-    function lt(t, a) {
-      A.value[t] = a;
+      end: A.value
+    }), C = y({ start: 0, end: A.value }), lt = d(() => e.value.style.zoom.preview.enable && (C.value.start !== r.value.start || C.value.end !== r.value.end));
+    function ot(t, o) {
+      C.value[t] = o;
     }
     function ne() {
-      let t = Math.max(0, Math.min(r.value.start ?? 0, $.value - 1)), a = Math.max(t + 1, Math.min(r.value.end ?? $.value, $.value));
-      (!Number.isFinite(t) || !Number.isFinite(a) || a <= t) && (t = 0, a = $.value), r.value.start = t, r.value.end = a, A.value.start = t, A.value.end = a, Z.value && (Z.value.setStartValue(t), Z.value.setEndValue(a));
+      let t = Math.max(0, Math.min(r.value.start ?? 0, A.value - 1)), o = Math.max(t + 1, Math.min(r.value.end ?? A.value, A.value));
+      (!Number.isFinite(t) || !Number.isFinite(o) || o <= t) && (t = 0, o = A.value), r.value.start = t, r.value.end = o, C.value.start = t, C.value.end = o, Z.value && (Z.value.setStartValue(t), Z.value.setEndValue(o));
     }
-    const at = c(() => k.value.map((t, a) => ({
+    const at = d(() => k.value.map((t, o) => ({
       ...t,
-      absoluteIndex: a
-    }))), ot = c(() => at.value.slice(r.value.start, r.value.end)), _ = c(() => (k.value.forEach((t, a) => {
+      absoluteIndex: o
+    }))), st = d(() => at.value.slice(r.value.start, r.value.end)), F = d(() => (k.value.forEach((t, o) => {
       [null, void 0].includes(t[0]) && J({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "period (index 0)",
-        index: a,
-        debug: j.value
+        index: o,
+        debug: G.value
       }), [null, void 0].includes(t[1]) && J({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "open (index 1)",
-        index: a,
-        debug: j.value
+        index: o,
+        debug: G.value
       }), [null, void 0].includes(t[2]) && J({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "high (index 2)",
-        index: a,
-        debug: j.value
+        index: o,
+        debug: G.value
       }), [null, void 0].includes(t[3]) && J({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "low (index 3)",
-        index: a,
-        debug: j.value
+        index: o,
+        debug: G.value
       }), [null, void 0].includes(t[4]) && J({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "close (index 4)",
-        index: a,
-        debug: j.value
+        index: o,
+        debug: G.value
       }), [null, void 0].includes(t[5]) && J({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "volume (index 5)",
-        index: a,
-        debug: j.value
+        index: o,
+        debug: G.value
       });
-    }), ot.value.map((t) => ({
+    }), st.value.map((t) => ({
       absoluteIndex: t.absoluteIndex,
       period: t[0],
       open: t[1],
@@ -307,7 +337,7 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
       low: t[3],
       close: t[4],
       volume: t[5]
-    })))), Yt = c(() => at.value.map((t) => ({
+    })))), al = d(() => at.value.map((t) => ({
       absoluteIndex: t.absoluteIndex,
       period: t[0],
       open: t[1],
@@ -315,42 +345,42 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
       low: t[3],
       close: t[4],
       volume: t[5]
-    }))), d = c(() => n.value.width / ot.value.length), st = c(() => {
-      const t = e.value.style.layout.grid.yAxis.scale.max === null ? Math.max(..._.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 = d(() => n.value.width / st.value.length), ut = d(() => {
+      const t = e.value.style.layout.grid.yAxis.scale.max === null ? Math.max(...F.value.map((l) => l.high)) : e.value.style.layout.grid.yAxis.scale.max, o = e.value.style.layout.grid.yAxis.scale.min === null ? 0 : e.value.style.layout.grid.yAxis.scale.min;
       return {
         max: t,
-        min: a
+        min: o
       };
-    }), O = c(() => Ll(st.value.min, st.value.max, e.value.style.layout.grid.yAxis.dataLabels.steps));
-    function re(t, a, l = null, o = null) {
+    }), B = d(() => Ol(ut.value.min, ut.value.max, e.value.style.layout.grid.yAxis.dataLabels.steps));
+    function re(t, o, l = null, a = null) {
       return {
         ...t,
-        x: G(n.value.left + a * d.value + d.value / 2),
-        y: G(n.value.top + (1 - (t - O.value.min) / (O.value.max - O.value.min)) * n.value.height),
-        value: G(t),
+        x: H(n.value.left + o * v.value + v.value / 2),
+        y: H(n.value.top + (1 - (t - B.value.min) / (B.value.max - B.value.min)) * n.value.height),
+        value: H(t),
         isMax: t === l,
-        isMin: t === o
+        isMin: t === a
       };
     }
-    const C = c(() => {
+    const $ = d(() => {
       const t = {
-        o: Math.max(..._.value.map((s) => s.open)),
-        h: Math.max(..._.value.map((s) => s.high)),
-        l: Math.max(..._.value.map((s) => s.low)),
-        c: Math.max(..._.value.map((s) => s.low))
-      }, a = {
-        o: Math.min(..._.value.map((s) => s.open)),
-        h: Math.min(..._.value.map((s) => s.high)),
-        l: Math.min(..._.value.map((s) => s.low)),
-        c: Math.min(..._.value.map((s) => s.low))
-      }, l = Math.max(..._.value.map((s) => s.volume)), o = Math.min(..._.value.map((s) => s.volume));
-      return _.value.map((s, v) => {
-        const w = re(s.open, v, t.o, a.o), T = re(s.high, v, t.h, a.h), z = re(s.low, v, t.l, a.l), X = re(s.close, v, t.c, a.c), Y = s.close > s.open, me = s.volume === l, Me = s.volume === o;
+        o: Math.max(...F.value.map((s) => s.open)),
+        h: Math.max(...F.value.map((s) => s.high)),
+        l: Math.max(...F.value.map((s) => s.low)),
+        c: Math.max(...F.value.map((s) => s.low))
+      }, o = {
+        o: Math.min(...F.value.map((s) => s.open)),
+        h: Math.min(...F.value.map((s) => s.high)),
+        l: Math.min(...F.value.map((s) => s.low)),
+        c: Math.min(...F.value.map((s) => s.low))
+      }, l = Math.max(...F.value.map((s) => s.volume)), a = Math.min(...F.value.map((s) => s.volume));
+      return F.value.map((s, c) => {
+        const w = re(s.open, c, t.o, o.o), S = re(s.high, c, t.h, o.h), _ = re(s.low, c, t.l, o.l), X = re(s.close, c, t.c, o.c), Y = s.close > s.open, me = s.volume === l, Me = s.volume === a;
         return {
           period: s.period,
           open: w,
-          high: T,
-          low: z,
+          high: S,
+          low: _,
           close: X,
           volume: s.volume,
           isBullish: Y,
@@ -360,250 +390,250 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
         };
       });
     });
-    function ve({ item: t, index: a, minimapH: l, unitW: o }) {
-      const s = e.value.style.layout.grid.yAxis.scale.min ?? 0, v = e.value.style.layout.grid.yAxis.scale.max ?? Math.max(...k.value.map((w) => w[2]));
+    function ce({ item: t, index: o, minimapH: l, unitW: a }) {
+      const s = e.value.style.layout.grid.yAxis.scale.min ?? 0, c = e.value.style.layout.grid.yAxis.scale.max ?? Math.max(...k.value.map((w) => w[2]));
       return {
         ...t,
-        x: G(a * o),
-        y: G((1 - (t - s) / (v - s)) * l),
-        value: G(t)
+        x: H(o * a),
+        y: H((1 - (t - s) / (c - s)) * l),
+        value: H(t)
       };
     }
-    const Qt = c(() => ({ minimapH: t, unitW: a }) => Yt.value.map((l, o) => {
-      const s = ve({ item: l.open, index: o, minimapH: t, unitW: a }), v = ve({ item: l.high, index: o, minimapH: t, unitW: a }), w = ve({ item: l.low, index: o, minimapH: t, unitW: a }), T = ve({ item: l.close, index: o, minimapH: t, unitW: a }), z = l.close > l.open;
+    const sl = d(() => ({ minimapH: t, unitW: o }) => al.value.map((l, a) => {
+      const s = ce({ item: l.open, index: a, minimapH: t, unitW: o }), c = ce({ item: l.high, index: a, minimapH: t, unitW: o }), w = ce({ item: l.low, index: a, minimapH: t, unitW: o }), S = ce({ item: l.close, index: a, minimapH: t, unitW: o }), _ = l.close > l.open;
       return {
         period: l.period,
         open: s,
-        high: v,
+        high: c,
         low: w,
-        close: T,
+        close: S,
         volume: l.volume,
-        isBullish: z,
+        isBullish: _,
         absoluteIndex: l.absoluteIndex
       };
-    })), Jt = c(() => e.value.style.zoom.minimap.show ? [{
+    })), ul = d(() => e.value.style.zoom.minimap.show ? [{
       name: "",
       series: k.value.map((t) => t[2]),
       color: "#000000",
       isVisible: !0
     }] : []);
-    function Kt(t) {
-      return G((t - O.value.min) / (O.value.max - O.value.min));
+    function il(t) {
+      return H((t - B.value.min) / (B.value.max - B.value.min));
     }
-    const ut = c(() => O.value.ticks.map((t) => ({
-      y: n.value.bottom - n.value.height * Kt(t),
-      value: G(t)
-    }))), Zt = c(() => _.value.map((t) => t.period)), E = c(() => Lt({
+    const it = d(() => B.value.ticks.map((t) => ({
+      y: n.value.bottom - n.value.height * il(t),
+      value: H(t)
+    }))), nl = d(() => F.value.map((t) => t.period)), N = d(() => Lt({
       values: k.value.map((t) => t[0]),
       maxDatapoints: k.value.length,
       formatter: e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter,
       start: r.value.start,
       end: r.value.end
-    })), it = c(() => Lt({
+    })), nt = d(() => Lt({
       values: k.value.map((t) => t[0]),
       maxDatapoints: k.value.length,
       formatter: e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter,
       start: 0,
-      end: $.value
-    })), el = c(() => {
+      end: A.value
+    })), rl = d(() => {
       const t = e.value.style.layout.grid.xAxis.dataLabels.modulo;
-      return E.value.length ? Math.min(t, [...new Set(E.value.map((a) => a.text))].length) : t;
-    }), nt = c(() => {
-      const t = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter, a = Ul({
+      return N.value.length ? Math.min(t, [...new Set(N.value.map((o) => o.text))].length) : t;
+    }), rt = d(() => {
+      const t = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter, o = Jl({
         useUTC: t.useUTC,
-        locale: Wl[t.locale] || { months: [], shortMonths: [], days: [], shortDays: [] },
+        locale: Ql[t.locale] || { months: [], shortMonths: [], days: [], shortDays: [] },
         januaryAsYear: t.januaryAsYear
       });
-      return (l, o) => {
-        const v = k.value.map((w) => w[0])?.[l];
-        return v == null ? "" : a.formatDate(new Date(v), o);
+      return (l, a) => {
+        const c = k.value.map((w) => w[0])?.[l];
+        return c == null ? "" : o.formatDate(new Date(c), a);
       };
-    }), tl = c(() => (k.value.map((a) => a[0]) || []).map((a, l) => ({
-      text: nt.value(l, e.value.style.tooltip.timeFormat),
+    }), cl = d(() => (k.value.map((o) => o[0]) || []).map((o, l) => ({
+      text: rt.value(l, e.value.style.tooltip.timeFormat),
       absoluteIndex: l
-    }))), ll = c(() => (k.value.map((a) => a[0]) || []).map((a, l) => ({
-      text: nt.value(l, e.value.style.zoom.timeFormat),
+    }))), vl = d(() => (k.value.map((o) => o[0]) || []).map((o, l) => ({
+      text: rt.value(l, e.value.style.zoom.timeFormat),
       absoluteIndex: l
-    }))), Le = c(() => {
-      const t = e.value.style.layout.grid.xAxis.dataLabels, a = E.value || [], l = it.value || [], o = r.value.start ?? 0, s = P.value, v = $.value, w = a.map((z) => z?.text ?? ""), T = l.map((z) => z?.text ?? "");
-      return Tl(
+    }))), Le = d(() => {
+      const t = e.value.style.layout.grid.xAxis.dataLabels, o = N.value || [], l = nt.value || [], a = r.value.start ?? 0, s = R.value, c = A.value, w = o.map((_) => _?.text ?? ""), S = l.map((_) => _?.text ?? "");
+      return Pl(
         !!t.showOnlyFirstAndLast,
         !!t.showOnlyAtModulo,
-        Math.max(1, el.value || 1),
+        Math.max(1, rl.value || 1),
         w,
-        T,
-        o,
+        S,
+        a,
         s,
-        v
+        c
       );
-    }), rt = c(() => e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? {
-      start: E.value.find((t) => t.absoluteIndex === r.value.start)?.text ?? "",
-      end: E.value.find((t) => t.absoluteIndex === r.value.end - 1)?.text ?? ""
+    }), ct = d(() => e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? {
+      start: N.value.find((t) => t.absoluteIndex === r.value.start)?.text ?? "",
+      end: N.value.find((t) => t.absoluteIndex === r.value.end - 1)?.text ?? ""
     } : {
       start: k.value[r.value.start] ? k.value[r.value.start][0] : k.value[0][0],
       end: k.value[r.value.end - 1] ? k.value[r.value.end - 1][0] : k.value.at(-1)[0]
-    }), Te = y(null);
-    function al(t, a) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: a, seriesIndex: t + r.value.start });
+    }), Se = y(null);
+    function dl(t, o) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: o, seriesIndex: t + r.value.start });
     }
-    function ol(t, a) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: t + r.value.start }), P.value = void 0, be.value = !1;
+    function yl(t, o) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: o, seriesIndex: t + r.value.start }), R.value = void 0, xe.value = !1;
     }
-    se(() => x.selectedXIndex, (t) => {
-      if ([null, void 0].includes(x.selectedXIndex)) {
-        P.value = null;
+    se(() => f.selectedXIndex, (t) => {
+      if ([null, void 0].includes(f.selectedXIndex)) {
+        R.value = null;
         return;
       }
-      const a = t - r.value.start;
-      a < 0 || t >= r.value.end ? P.value = null : P.value = a ?? null;
+      const o = t - r.value.start;
+      o < 0 || t >= r.value.end ? R.value = null : R.value = o ?? null;
     }, { immediate: !0 });
-    function sl(t, a) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: a, seriesIndex: t + r.value.start }), P.value = t, Te.value = {
-        datapoint: a,
+    function hl(t, o) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: o, seriesIndex: t + r.value.start }), R.value = t, Se.value = {
+        datapoint: o,
         seriesIndex: t,
-        series: C.value,
+        series: $.value,
         config: e.value
-      }, fl({ seriesIndex: t, datapoint: a });
+      }, Fl({ seriesIndex: t, datapoint: o });
       const l = e.value.style.tooltip.customFormat;
-      if (Ol(l) && Dl(() => l({
+      if (Xl(l) && jl(() => l({
         seriesIndex: t,
-        datapoint: a,
-        series: C.value,
+        datapoint: o,
+        series: $.value,
         config: e.value
       })))
         ke.value = l({
           seriesIndex: t,
-          datapoint: a,
-          series: C.value,
+          datapoint: o,
+          series: $.value,
           config: e.value
         });
       else if (e.value.style.tooltip.show) {
-        let o = "";
-        const { period: s, open: v, high: w, low: T, close: z, volume: X, isBullish: Y } = C.value[t], { period: me, open: Me, high: gl, low: xl, close: bl, volume: kl } = e.value.translations, wl = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? e.value.style.tooltip.useDefaultTimeFormat ? E.value[t].text : tl.value[t].text : s;
-        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 ? Y ? `url(#bullish_gradient_${R.value})` : `url(#bearish_gradient_${R.value})` : Y ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg>${wl}</div>`, o += `${kl} : <b>${isNaN(X) ? "-" : Number(X.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 Re = U({
+        let a = "";
+        const { period: s, open: c, high: w, low: S, close: _, volume: X, isBullish: Y } = $.value[t], { period: me, open: Me, high: _l, low: zl, close: Ll, volume: Sl } = e.value.translations, Tl = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? e.value.style.tooltip.useDefaultTimeFormat ? N.value[t].text : cl.value[t].text : s;
+        a += `<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 ? Y ? `url(#bullish_gradient_${I.value})` : `url(#bearish_gradient_${I.value})` : Y ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg>${Tl}</div>`, a += `${Sl} : <b>${isNaN(X) ? "-" : Number(X.toFixed(e.value.style.tooltip.roundingValue)).toLocaleString()}</b>`, a += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`;
+        const Ie = U({
           p: e.value.style.tooltip.prefix,
-          v: v.value,
+          v: c.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
-        }), gt = U({
+        }), bt = U({
           p: e.value.style.tooltip.prefix,
           v: w.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         }), xt = U({
           p: e.value.style.tooltip.prefix,
-          v: T.value,
+          v: S.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
-        }), Oe = U({
+        }), Be = U({
           p: e.value.style.tooltip.prefix,
-          v: z.value,
+          v: _.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        e.value.style.tooltip.showChart ? o += `<div style="width:100%;display:flex;align-items:center;justify-content:center;">
+        e.value.style.tooltip.showChart ? a += `<div style="width:100%;display:flex;align-items:center;justify-content:center;">
                     <svg viewBox="0 0 100 100" width="100px" style="background: transparent; overflow: visible">
                         <g>
-                            <line x1="50" x2="50" y1="20" y2="80" stroke="${a.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}" stroke-width="2" stroke-linecap="round" />
-                            ${a.isBullish ? `
+                            <line x1="50" x2="50" y1="20" y2="80" stroke="${o.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}" stroke-width="2" stroke-linecap="round" />
+                            ${o.isBullish ? `
                                 <line x1="45" x2="50" y1="65" y2="65" stroke="${e.value.style.layout.candle.colors.bullish}" stroke-width="1.5" stroke-linecap="round" />
                                 <line x1="50" x2="55" y1="35" y2="35" stroke="${e.value.style.layout.candle.colors.bullish}" stroke-width="1.5" stroke-linecap="round" />
-                                <text x="38" y="70" text-anchor="end" fill="${e.value.style.tooltip.color}">${Re}</text>
-                                <text x="62" y="40" text-anchor="start" fill="${e.value.style.tooltip.color}">${Oe}</text>
+                                <text x="38" y="70" text-anchor="end" fill="${e.value.style.tooltip.color}">${Ie}</text>
+                                <text x="62" y="40" text-anchor="start" fill="${e.value.style.tooltip.color}">${Be}</text>
                             ` : `
                                 <line x1="45" x2="50" y1="35" y2="35" stroke="${e.value.style.layout.candle.colors.bearish}" stroke-width="1.5" stroke-linecap="round" />
                                 <line x1="50" x2="55" y1="65" y2="65" stroke="${e.value.style.layout.candle.colors.bearish}" stroke-width="1.5" stroke-linecap="round" />
-                                <text x="40" y="40" text-anchor="end" fill="${e.value.style.tooltip.color}">${Re}</text>
-                                <text x="60" y="70" text-anchor="start" fill="${e.value.style.tooltip.color}">${Oe}</text>
+                                <text x="40" y="40" text-anchor="end" fill="${e.value.style.tooltip.color}">${Ie}</text>
+                                <text x="60" y="70" text-anchor="start" fill="${e.value.style.tooltip.color}">${Be}</text>
                             `}
-                            <text x="50" y="13" text-anchor="middle" fill="${e.value.style.tooltip.color}">${gt}</text>
+                            <text x="50" y="13" text-anchor="middle" fill="${e.value.style.tooltip.color}">${bt}</text>
                             <text x="50" y="97" text-anchor="middle" fill="${e.value.style.tooltip.color}">${xt}</text>
                         <g>
                     </svg>
                     <div>
-                ` : (o += `<div>${Me}: <b>${Re}</b></div>`, o += `<div>${gl}: <b>${gt}</b></div>`, o += `<div>${xl}: <b>${xt}</b></div>`, o += `<div>${bl}: <b>${Oe}</b></div>`), o += "</div>", ke.value = `<div style="text-align:right">${o}</div>`;
+                ` : (a += `<div>${Me}: <b>${Ie}</b></div>`, a += `<div>${_l}: <b>${bt}</b></div>`, a += `<div>${zl}: <b>${xt}</b></div>`, a += `<div>${Ll}: <b>${Be}</b></div>`), a += "</div>", ke.value = `<div style="text-align:right">${a}</div>`;
       }
-      be.value = !0;
+      xe.value = !0;
     }
     const le = y(null);
-    function ul() {
+    function ml() {
       return new Promise((t) => requestAnimationFrame(
         () => requestAnimationFrame(() => t())
       ));
     }
-    De(() => {
+    Ee(() => {
       le.value && cancelAnimationFrame(le.value);
     });
     async function vt() {
-      ce(), await kt(), le.value && cancelAnimationFrame(le.value), le.value = requestAnimationFrame(async () => {
-        await ul(), ce();
+      de(), await wt(), le.value && cancelAnimationFrame(le.value), le.value = requestAnimationFrame(async () => {
+        await ml(), de();
       });
     }
-    const ae = y(!1), dt = y(!1), de = y(!1);
-    function ce() {
-      if (!ae.value) {
-        ae.value = !0;
+    const oe = y(!1), dt = y(!1), ve = y(!1);
+    function de() {
+      if (!oe.value) {
+        oe.value = !0;
         try {
-          const { startIndex: t, endIndex: a } = e.value.style.zoom, l = $.value, o = t ?? 0, s = a != null ? Math.min(ct(a + 1), l) : l;
-          de.value = !0, r.value.start = o, r.value.end = s, A.value.start = o, A.value.end = s, ne(), dt.value = !0;
+          const { startIndex: t, endIndex: o } = e.value.style.zoom, l = A.value, a = t ?? 0, s = o != null ? Math.min(yt(o + 1), l) : l;
+          ve.value = !0, r.value.start = a, r.value.end = s, C.value.start = a, C.value.end = s, ne(), dt.value = !0;
         } finally {
           queueMicrotask(() => {
-            de.value = !1;
-          }), ae.value = !1;
+            ve.value = !1;
+          }), oe.value = !1;
         }
       }
     }
-    function ct(t) {
-      const a = $.value;
-      return t > a ? a : t < 0 || t < r.value.start ? e.value.style.zoom.startIndex !== null ? e.value.style.zoom.startIndex + 1 : 1 : t;
+    function yt(t) {
+      const o = A.value;
+      return t > o ? o : t < 0 || t < r.value.start ? e.value.style.zoom.startIndex !== null ? e.value.style.zoom.startIndex + 1 : 1 : t;
     }
-    function Fe(t = null) {
-      kt(() => {
-        const a = [e.value.translations.period, e.value.translations.open, e.value.translations.high, e.value.translations.low, e.value.translations.close, e.value.translations.volume], l = C.value.map((v, w) => [
-          e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? E.value[w].text : v.period,
-          v.open.value,
-          v.high.value,
-          v.low.value,
-          v.close.value,
-          v.volume
-        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), s = Ml(o);
-        t ? t(s) : Rl({ csvContent: s, title: e.value.style.title.text || "vue-ui-candlestick" });
+    function Te(t = null) {
+      wt(() => {
+        const o = [e.value.translations.period, e.value.translations.open, e.value.translations.high, e.value.translations.low, e.value.translations.close, e.value.translations.volume], l = $.value.map((c, w) => [
+          e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? N.value[w].text : c.period,
+          c.open.value,
+          c.high.value,
+          c.low.value,
+          c.close.value,
+          c.volume
+        ]), a = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([o]).concat(l), s = Ul(a);
+        t ? t(s) : Wl({ csvContent: s, title: e.value.style.title.text || "vue-ui-candlestick" });
       });
     }
-    const ye = c(() => {
-      const t = C.value.map((o, s) => {
-        const v = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? E.value[s].text : o.period, w = U({
+    const ye = d(() => {
+      const t = $.value.map((a, s) => {
+        const c = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? N.value[s].text : a.period, w = U({
           p: e.value.table.td.prefix,
-          v: o.open.value,
+          v: a.open.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
-        }), T = U({
+        }), S = U({
           p: e.value.table.td.prefix,
-          v: o.high.value,
+          v: a.high.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
-        }), z = U({
+        }), _ = U({
           p: e.value.table.td.prefix,
-          v: o.low.value,
+          v: a.low.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
         }), X = U({
           p: e.value.table.td.prefix,
-          v: o.close.value,
+          v: a.close.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
         });
         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_${R.value}` : `url(#bearish_gradient_${R.value})` : o.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg> ${v}`,
+          `<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 ? a.isBullish ? `url(#bullish_gradient_${I.value}` : `url(#bearish_gradient_${I.value})` : a.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg> ${c}`,
           w,
-          T,
-          z,
+          S,
+          _,
           X,
-          `${isNaN(o.volume) ? "-" : o.volume.toLocaleString()}`
+          `${isNaN(a.volume) ? "-" : a.volume.toLocaleString()}`
         ];
-      }), a = {
+      }), o = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
@@ -623,55 +653,55 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
         e.value.translations.last,
         e.value.translations.volume
       ];
-      return { head: l, body: t, config: a, colNames: l };
+      return { head: l, body: t, config: o, colNames: l };
     }), q = y(!1);
-    function yt(t) {
+    function ht(t) {
       q.value = t, Ne.value += 1;
     }
-    function ht() {
+    function mt() {
       L.value.showTable = !L.value.showTable;
     }
-    function mt() {
+    function gt() {
       L.value.showTooltip = !L.value.showTooltip;
     }
     const he = y(!1);
-    function Ie() {
+    function De() {
       he.value = !he.value;
     }
-    async function il({ scale: t = 2 } = {}) {
-      if (!B.value) return;
-      const { width: a, height: l } = B.value.getBoundingClientRect(), o = a / l, { imageUri: s, base64: v } = await ql({ domElement: B.value, base64: !0, img: !0, scale: t });
+    async function gl({ scale: t = 2 } = {}) {
+      if (!O.value) return;
+      const { width: o, height: l } = O.value.getBoundingClientRect(), a = o / l, { imageUri: s, base64: c } = await ao({ domElement: O.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: s,
-        base64: v,
+        base64: c,
         title: e.value.style.title.text,
-        width: a,
+        width: o,
         height: l,
-        aspectRatio: o
+        aspectRatio: a
       };
     }
-    const nl = c(() => f.value.width), rl = c(() => f.value.height);
-    jl({
+    const fl = d(() => p.value.width), pl = d(() => p.value.height);
+    oo({
       timeLabelsEls: ee,
-      timeLabels: E,
+      timeLabels: N,
       slicer: r,
       configRef: e,
       rotationPath: ["style", "layout", "grid", "xAxis", "dataLabels", "rotation"],
       autoRotatePath: ["style", "layout", "grid", "xAxis", "dataLabels", "autoRotate", "enable"],
       isAutoSize: !1,
       rotation: e.value.style.layout.grid.xAxis.dataLabels.autoRotate.angle,
-      width: nl,
-      height: rl
+      width: fl,
+      height: pl
     }), se(e, () => {
       L.value = {
         showTable: e.value.table.show,
         showTooltip: e.value.style.tooltip.show
       };
     }, { immediate: !0 });
-    const oe = c(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, a = L.value.showTable;
+    const ae = d(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, o = L.value.showTable;
       return {
-        component: t ? Et : Ot,
+        component: t ? Gt : Ut,
         title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? `: ${e.value.style.title.subtitle.text}` : ""}`,
         props: t ? {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -679,12 +709,12 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
           isFullscreen: q.value,
-          fullscreenParent: B.value,
+          fullscreenParent: O.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8)
         } : {
           hideDetails: !0,
           config: {
-            open: a,
+            open: o,
             maxHeight: 1e4,
             body: {
               backgroundColor: e.value.style.backgroundColor,
@@ -701,101 +731,101 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
     se(() => L.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && te.value ? te.value.open() : "close" in te.value && te.value.close());
     });
-    function pt() {
-      L.value.showTable = !1, Ae.value && Ae.value.setTableIconState(!1);
+    function ft() {
+      L.value.showTable = !1, Ce.value && Ce.value.setTableIconState(!1);
     }
-    const vl = c(() => e.value.style.backgroundColor), dl = c(() => e.value.style.title), { exportSvg: cl, getSvg: yl } = Xl({
-      svg: _e,
-      title: dl,
-      backgroundColor: vl
+    const bl = d(() => e.value.style.backgroundColor), xl = d(() => e.value.style.title), { exportSvg: kl, getSvg: wl } = Zl({
+      svg: Fe,
+      title: xl,
+      backgroundColor: bl
     });
-    async function ft({ isCb: t }) {
+    async function pt({ isCb: t }) {
       if (t) {
-        const { blob: a, url: l, text: o, dataUrl: s } = await yl();
-        e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: s });
+        const { blob: o, url: l, text: a, dataUrl: s } = await wl();
+        e.value.userOptions.callbacks.svg({ blob: o, url: l, text: a, dataUrl: s });
       } else
-        cl();
+        kl();
     }
-    function hl(t) {
+    function Cl(t) {
       Ge.value = t;
     }
-    function ml(t) {
-      ae.value || de.value || t !== r.value.start && (r.value.start = t, A.value.start = t, ne());
+    function Al(t) {
+      oe.value || ve.value || t !== r.value.start && (r.value.start = t, C.value.start = t, ne());
     }
-    function pl(t) {
-      if (ae.value || de.value) return;
-      const a = ct(t);
-      a !== r.value.end && (r.value.end = a, A.value.end = a, ne());
+    function $l(t) {
+      if (oe.value || ve.value) return;
+      const o = yt(t);
+      o !== r.value.end && (r.value.end = o, C.value.end = o, ne());
     }
-    function fl({ seriesIndex: t, datapoint: a }) {
+    function Fl({ seriesIndex: t, datapoint: o }) {
       const l = r.value.start + t;
-      Be("selectX", {
-        dataset: a,
+      Pe("selectX", {
+        dataset: o,
         index: l,
         indexLabel: ""
       });
     }
-    return Ft({
-      getImage: il,
-      generatePdf: Ke,
-      generateCsv: Fe,
-      generateImage: Ze,
-      generateSvg: ft,
-      toggleTable: ht,
-      toggleTooltip: mt,
-      toggleAnnotator: Ie,
-      toggleFullscreen: yt
-    }), (t, a) => (u(), i("div", {
+    return Ot({
+      getImage: gl,
+      generatePdf: Ze,
+      generateCsv: Te,
+      generateImage: et,
+      generateSvg: pt,
+      toggleTable: mt,
+      toggleTooltip: gt,
+      toggleAnnotator: De,
+      toggleFullscreen: ht
+    }), (t, o) => (u(), i("div", {
       ref_key: "candlestickChart",
-      ref: B,
+      ref: O,
       class: V(`vue-data-ui-component vue-ui-candlestick ${q.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: ue(`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_${R.value}`,
-      onMouseenter: Wt,
-      onMouseleave: Xt
+      id: `vue-ui-candlestick_${I.value}`,
+      onMouseenter: Qt,
+      onMouseleave: Zt
     }, [
-      e.value.userOptions.buttons.annotator ? (u(), Q(h(Pt), {
+      e.value.userOptions.buttons.annotator ? (u(), K(h(Xt), {
         key: 0,
-        svgRef: h(_e),
+        svgRef: h(Fe),
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
         active: he.value,
-        onClose: Ie
+        onClose: De
       }, {
-        "annotator-action-close": g(() => [
-          b(t.$slots, "annotator-action-close", {}, void 0, !0)
+        "annotator-action-close": b(() => [
+          x(t.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
-        "annotator-action-color": g(({ color: l }) => [
-          b(t.$slots, "annotator-action-color", F(I({ color: l })), void 0, !0)
+        "annotator-action-color": b(({ color: l }) => [
+          x(t.$slots, "annotator-action-color", T(D({ color: l })), void 0, !0)
         ]),
-        "annotator-action-draw": g(({ mode: l }) => [
-          b(t.$slots, "annotator-action-draw", F(I({ mode: l })), void 0, !0)
+        "annotator-action-draw": b(({ mode: l }) => [
+          x(t.$slots, "annotator-action-draw", T(D({ mode: l })), void 0, !0)
         ]),
-        "annotator-action-undo": g(({ disabled: l }) => [
-          b(t.$slots, "annotator-action-undo", F(I({ disabled: l })), void 0, !0)
+        "annotator-action-undo": b(({ disabled: l }) => [
+          x(t.$slots, "annotator-action-undo", T(D({ disabled: l })), void 0, !0)
         ]),
-        "annotator-action-redo": g(({ disabled: l }) => [
-          b(t.$slots, "annotator-action-redo", F(I({ disabled: l })), void 0, !0)
+        "annotator-action-redo": b(({ disabled: l }) => [
+          x(t.$slots, "annotator-action-redo", T(D({ disabled: l })), void 0, !0)
         ]),
-        "annotator-action-delete": g(({ disabled: l }) => [
-          b(t.$slots, "annotator-action-delete", F(I({ disabled: l })), void 0, !0)
+        "annotator-action-delete": b(({ disabled: l }) => [
+          x(t.$slots, "annotator-action-delete", T(D({ disabled: l })), void 0, !0)
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active"])) : m("", !0),
-      Ht.value ? (u(), i("div", {
+      el.value ? (u(), i("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: We,
+        ref: Xe,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : m("", !0),
       e.value.style.title.text ? (u(), i("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: Ee,
+        ref: Ve,
         style: "width:100%;background:transparent"
       }, [
-        (u(), Q(Yl, {
+        (u(), K(so, {
           key: `title_${He.value}`,
           config: {
             title: {
@@ -809,15 +839,15 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
           }
         }, null, 8, ["config"]))
       ], 512)) : m("", !0),
-      e.value.userOptions.show && ge.value && (h(qe) || h(Ce)) ? (u(), Q(h(Bt), {
+      e.value.userOptions.show && pe.value && (h(Ye) || h($e)) ? (u(), K(h(jt), {
         ref_key: "userOptionsRef",
-        ref: Ae,
+        ref: Ce,
         key: `user_options_${Ne.value}`,
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
-        isImaging: h(Je),
-        isPrinting: h(Qe),
-        uid: R.value,
+        isImaging: h(Qe),
+        isPrinting: h(Je),
+        uid: I.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -828,99 +858,99 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
         isFullscreen: q.value,
         isTooltip: L.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: B.value,
+        chartElement: O.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: he.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: yt,
-        onGeneratePdf: h(Ke),
-        onGenerateCsv: Fe,
-        onGenerateImage: h(Ze),
-        onGenerateSvg: ft,
-        onToggleTable: ht,
-        onToggleTooltip: mt,
-        onToggleAnnotator: Ie,
+        onToggleFullscreen: ht,
+        onGeneratePdf: h(Ze),
+        onGenerateCsv: Te,
+        onGenerateImage: h(et),
+        onGenerateSvg: pt,
+        onToggleTable: mt,
+        onToggleTooltip: gt,
+        onToggleAnnotator: De,
         style: ue({
-          visibility: h(qe) ? h(Ce) ? "visible" : "hidden" : "visible"
+          visibility: h(Ye) ? h($e) ? "visible" : "hidden" : "visible"
         })
-      }, wt({ _: 2 }, [
+      }, Ct({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: g(({ isOpen: l, color: o }) => [
-            b(t.$slots, "menuIcon", F(I({ isOpen: l, color: o })), void 0, !0)
+          fn: b(({ isOpen: l, color: a }) => [
+            x(t.$slots, "menuIcon", T(D({ isOpen: l, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: g(() => [
-            b(t.$slots, "optionTooltip", {}, void 0, !0)
+          fn: b(() => [
+            x(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: g(() => [
-            b(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: b(() => [
+            x(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: g(() => [
-            b(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: b(() => [
+            x(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: g(() => [
-            b(t.$slots, "optionImg", {}, void 0, !0)
+          fn: b(() => [
+            x(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionSvg ? {
           name: "optionSvg",
-          fn: g(() => [
-            b(t.$slots, "optionSvg", {}, void 0, !0)
+          fn: b(() => [
+            x(t.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: g(() => [
-            b(t.$slots, "optionTable", {}, void 0, !0)
+          fn: b(() => [
+            x(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: g(({ toggleFullscreen: l, isFullscreen: o }) => [
-            b(t.$slots, "optionFullscreen", F(I({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          fn: b(({ toggleFullscreen: l, isFullscreen: a }) => [
+            x(t.$slots, "optionFullscreen", T(D({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: g(({ toggleAnnotator: l, isAnnotator: o }) => [
-            b(t.$slots, "optionAnnotator", F(I({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          fn: b(({ toggleAnnotator: l, isAnnotator: a }) => [
+            x(t.$slots, "optionAnnotator", T(D({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
           ]),
           key: "8"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : m("", !0),
       (u(), i("svg", {
         ref_key: "svgRef",
-        ref: _e,
-        xmlns: h(Fl),
+        ref: Fe,
+        xmlns: h(Nl),
         "aria-label": e.value.style.title.text || "candlestick chart",
         class: V({ "vue-data-ui-fullscreen--on": q.value, "vue-data-ui-fulscreen--off": !q.value }),
-        viewBox: `0 0 ${f.value.width <= 0 ? 10 : f.value.width} ${f.value.height <= 0 ? 10 : f.value.height}`,
+        viewBox: `0 0 ${p.value.width <= 0 ? 10 : p.value.width} ${p.value.height <= 0 ? 10 : p.value.height}`,
         style: ue(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
       }, [
-        Pe(h(Nt)),
+        Re(h(Ht)),
         t.$slots["chart-background"] ? (u(), i("foreignObject", {
           key: 0,
           x: n.value.left,
@@ -931,49 +961,49 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
             pointerEvents: "none"
           }
         }, [
-          b(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, ta)) : m("", !0),
-        C.value.length > 0 ? (u(), i("g", la, [
-          p("defs", null, [
-            p("linearGradient", {
-              id: `bearish_gradient_${R.value}`,
+          x(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, co)) : m("", !0),
+        $.value.length > 0 ? (u(), i("g", vo, [
+          g("defs", null, [
+            g("linearGradient", {
+              id: `bearish_gradient_${I.value}`,
               x2: "0%",
               y2: "100%"
             }, [
-              p("stop", {
+              g("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.layout.candle.colors.bearish
-              }, null, 8, oa),
-              p("stop", {
+              }, null, 8, ho),
+              g("stop", {
                 offset: "50%",
                 "stop-color": `${h(fe)(e.value.style.layout.candle.colors.bearish, 0.02)}DE`
-              }, null, 8, sa),
-              p("stop", {
+              }, null, 8, mo),
+              g("stop", {
                 offset: "100%",
                 "stop-color": `${h(fe)(e.value.style.layout.candle.colors.bearish, 0.05)}66`
-              }, null, 8, ua)
-            ], 8, aa),
-            p("linearGradient", {
-              id: `bullish_gradient_${R.value}`,
+              }, null, 8, go)
+            ], 8, yo),
+            g("linearGradient", {
+              id: `bullish_gradient_${I.value}`,
               x2: "0%",
               y2: "100%"
             }, [
-              p("stop", {
+              g("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.layout.candle.colors.bullish
-              }, null, 8, na),
-              p("stop", {
+              }, null, 8, po),
+              g("stop", {
                 offset: "50%",
                 "stop-color": `${h(fe)(e.value.style.layout.candle.colors.bullish, 0.02)}DE`
-              }, null, 8, ra),
-              p("stop", {
+              }, null, 8, bo),
+              g("stop", {
                 offset: "100%",
                 "stop-color": `${h(fe)(e.value.style.layout.candle.colors.bullish, 0.05)}66`
-              }, null, 8, va)
-            ], 8, ia)
+              }, null, 8, xo)
+            ], 8, fo)
           ]),
-          e.value.style.layout.grid.show ? (u(), i("g", da, [
-            p("line", {
+          e.value.style.layout.grid.show ? (u(), i("g", ko, [
+            g("line", {
               x1: n.value.left,
               x2: n.value.left,
               y1: n.value.top,
@@ -981,8 +1011,8 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
               stroke: e.value.style.layout.grid.stroke,
               "stroke-width": e.value.style.layout.grid.strokeWidth,
               "stroke-linecap": "round"
-            }, null, 8, ca),
-            p("line", {
+            }, null, 8, wo),
+            g("line", {
               x1: n.value.left,
               x2: n.value.right,
               y1: n.value.bottom,
@@ -990,8 +1020,8 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
               stroke: e.value.style.layout.grid.stroke,
               "stroke-width": e.value.style.layout.grid.strokeWidth,
               "stroke-linecap": "round"
-            }, null, 8, ya),
-            e.value.style.layout.grid.horizontalLines.show ? (u(!0), i(S, { key: 0 }, M(ut.value, (l) => (u(), i("line", {
+            }, null, 8, Co),
+            e.value.style.layout.grid.horizontalLines.show ? (u(!0), i(z, { key: 0 }, M(it.value, (l) => (u(), i("line", {
               x1: n.value.left,
               x2: n.value.right,
               y1: l.y,
@@ -1000,31 +1030,31 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
               "stroke-width": e.value.style.layout.grid.horizontalLines.strokeWidth,
               "stroke-dasharray": e.value.style.layout.grid.horizontalLines.strokeDasharray,
               "stroke-linecap": "round"
-            }, null, 8, ha))), 256)) : m("", !0),
-            e.value.style.layout.grid.verticalLines.show ? (u(!0), i(S, { key: 1 }, M(Le.value, (l, o) => (u(), i("g", null, [
+            }, null, 8, Ao))), 256)) : m("", !0),
+            e.value.style.layout.grid.verticalLines.show ? (u(!0), i(z, { key: 1 }, M(Le.value, (l, a) => (u(), i("g", null, [
               l.text ? (u(), i("line", {
                 key: 0,
-                x1: n.value.left + d.value * o + d.value / 2,
-                x2: n.value.left + d.value * o + d.value / 2,
+                x1: n.value.left + v.value * a + v.value / 2,
+                x2: n.value.left + v.value * a + v.value / 2,
                 y1: n.value.top,
                 y2: n.value.bottom,
                 stroke: e.value.style.layout.grid.verticalLines.stroke,
                 "stroke-width": e.value.style.layout.grid.verticalLines.strokeWidth,
                 "stroke-dasharray": e.value.style.layout.grid.verticalLines.strokeDasharray,
                 "stroke-linecap": "round"
-              }, null, 8, ma)) : m("", !0)
+              }, null, 8, $o)) : m("", !0)
             ]))), 256)) : m("", !0),
-            e.value.style.layout.grid.xAxis.ticks.show ? (u(!0), i(S, { key: 2 }, M(Le.value, (l, o) => (u(), i("g", null, [
+            e.value.style.layout.grid.xAxis.ticks.show ? (u(!0), i(z, { key: 2 }, M(Le.value, (l, a) => (u(), i("g", null, [
               l.text ? (u(), i("line", {
                 key: 0,
-                x1: n.value.left + d.value * o + d.value / 2,
-                x2: n.value.left + d.value * o + d.value / 2,
+                x1: n.value.left + v.value * a + v.value / 2,
+                x2: n.value.left + v.value * a + v.value / 2,
                 y1: n.value.bottom,
                 y2: n.value.bottom + 3,
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, pa)) : m("", !0)
+              }, null, 8, Fo)) : m("", !0)
             ]))), 256)) : m("", !0)
           ])) : m("", !0),
           e.value.style.layout.grid.yAxis.dataLabels.show ? (u(), i("g", {
@@ -1032,8 +1062,8 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
             ref_key: "scaleLabels",
             ref: we
           }, [
-            (u(!0), i(S, null, M(ut.value, (l, o) => (u(), i("g", null, [
-              l.value >= O.value.min && l.value <= O.value.max ? (u(), i("line", {
+            (u(!0), i(z, null, M(it.value, (l, a) => (u(), i("g", null, [
+              l.value >= B.value.min && l.value <= B.value.max ? (u(), i("line", {
                 key: 0,
                 x1: n.value.left,
                 x2: n.value.left - 5,
@@ -1042,12 +1072,12 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, fa)) : m("", !0),
-              l.value >= O.value.min && l.value <= O.value.max ? (u(), i("text", {
+              }, null, 8, _o)) : m("", !0),
+              l.value >= B.value.min && l.value <= B.value.max ? (u(), i("text", {
                 key: 1,
                 x: n.value.left - 8 + e.value.style.layout.grid.yAxis.dataLabels.offsetX,
-                y: l.y + f.value.yAxisFontSize / 3,
-                "font-size": f.value.yAxisFontSize,
+                y: l.y + p.value.yAxisFontSize / 3,
+                "font-size": p.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"
@@ -1056,7 +1086,7 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
                 v: l.value,
                 s: e.value.style.layout.grid.yAxis.dataLabels.suffix,
                 r: e.value.style.layout.grid.yAxis.dataLabels.roundingValue
-              })), 9, ga)) : m("", !0)
+              })), 9, zo)) : m("", !0)
             ]))), 256))
           ], 512)) : m("", !0),
           e.value.style.layout.grid.xAxis.dataLabels.show && !e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (u(), i("g", {
@@ -1064,15 +1094,15 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
             ref_key: "timeLabelsEls",
             ref: ee
           }, [
-            (u(!0), i(S, null, M(Zt.value, (l, o) => (u(), i("g", null, [
-              p("text", {
+            (u(!0), i(z, null, M(nl.value, (l, a) => (u(), i("g", null, [
+              g("text", {
                 class: "vue-data-ui-time-label",
-                transform: `translate(${n.value.left + d.value * o + d.value / 2}, ${n.value.bottom + f.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
+                transform: `translate(${n.value.left + v.value * a + v.value / 2}, ${n.value.bottom + p.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": f.value.xAxisFontSize,
+                "font-size": p.value.xAxisFontSize,
                 fill: e.value.style.layout.grid.xAxis.dataLabels.color,
                 "font-weight": e.value.style.layout.grid.xAxis.dataLabels.bold ? "bold" : "normal"
-              }, ie(l), 9, xa)
+              }, ie(l), 9, Lo)
             ]))), 256))
           ], 512)) : m("", !0),
           e.value.style.layout.grid.xAxis.dataLabels.show && e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (u(), i("g", {
@@ -1080,21 +1110,21 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
             ref_key: "timeLabelsEls",
             ref: ee
           }, [
-            (u(!0), i(S, null, M(Le.value, (l, o) => (u(), i("g", null, [
-              p("text", {
+            (u(!0), i(z, null, M(Le.value, (l, a) => (u(), i("g", null, [
+              g("text", {
                 class: "vue-data-ui-time-label",
-                transform: `translate(${n.value.left + d.value * o + d.value / 2}, ${n.value.bottom + f.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
+                transform: `translate(${n.value.left + v.value * a + v.value / 2}, ${n.value.bottom + p.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": f.value.xAxisFontSize,
+                "font-size": p.value.xAxisFontSize,
                 fill: e.value.style.layout.grid.xAxis.dataLabels.color,
                 "font-weight": e.value.style.layout.grid.xAxis.dataLabels.bold ? "bold" : "normal"
-              }, ie(l.text), 9, ba)
+              }, ie(l.text), 9, So)
             ]))), 256))
           ], 512)) : m("", !0),
-          e.value.type === "candlestick" ? (u(), i(S, { key: 4 }, [
-            p("g", null, [
-              (u(!0), i(S, null, M(C.value, (l, o) => (u(), i("g", null, [
-                p("rect", {
+          e.value.type === "candlestick" ? (u(), i(z, { key: 4 }, [
+            g("g", null, [
+              (u(!0), i(z, null, M($.value, (l, a) => (u(), i("g", null, [
+                g("rect", {
                   x: l.open.x - e.value.style.layout.wick.strokeWidth / 2,
                   y: l.high.y,
                   width: e.value.style.layout.wick.strokeWidth,
@@ -1102,114 +1132,114 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
                   fill: e.value.style.layout.wick.stroke,
                   stroke: "none",
                   rx: e.value.style.layout.wick.strokeWidth / 2,
-                  class: V({ "vue-data-ui-transition": D.value && !h(N) })
-                }, null, 10, ka),
-                e.value.style.layout.wick.extremity.shape === "circle" ? (u(), i("g", wa, [
-                  p("circle", {
+                  class: V({ "vue-data-ui-transition": E.value && !h(P) })
+                }, null, 10, To),
+                e.value.style.layout.wick.extremity.shape === "circle" ? (u(), i("g", Do, [
+                  g("circle", {
                     cx: l.high.x,
                     cy: l.high.y,
-                    r: e.value.style.layout.wick.extremity.size === "auto" ? d.value / 20 : e.value.style.layout.wick.extremity.size,
+                    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,
-                    class: V({ "vue-data-ui-transition": D.value && !h(N) })
-                  }, null, 10, Aa),
-                  p("circle", {
+                    class: V({ "vue-data-ui-transition": E.value && !h(P) })
+                  }, null, 10, Mo),
+                  g("circle", {
                     cx: l.low.x,
                     cy: l.low.y,
-                    r: e.value.style.layout.wick.extremity.size === "auto" ? d.value / 20 : e.value.style.layout.wick.extremity.size,
+                    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,
-                    class: V({ "vue-data-ui-transition": D.value && !h(N) })
-                  }, null, 10, $a)
+                    class: V({ "vue-data-ui-transition": E.value && !h(P) })
+                  }, null, 10, Io)
                 ])) : m("", !0),
-                e.value.style.layout.wick.extremity.shape === "line" ? (u(), i("g", Ca, [
-                  p("rect", {
-                    x: l.high.x - (e.value.style.layout.wick.extremity.size === "auto" ? d.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
+                e.value.style.layout.wick.extremity.shape === "line" ? (u(), i("g", Bo, [
+                  g("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" ? d.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" ? d.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 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: V({ "vue-data-ui-transition": D.value && !h(N) })
-                  }, null, 10, _a),
-                  p("rect", {
-                    x: l.low.x - (e.value.style.layout.wick.extremity.size === "auto" ? d.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
+                    class: V({ "vue-data-ui-transition": E.value && !h(P) })
+                  }, null, 10, Eo),
+                  g("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" ? d.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" ? d.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 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: V({ "vue-data-ui-transition": D.value && !h(N) })
-                  }, null, 10, za)
+                    class: V({ "vue-data-ui-transition": E.value && !h(P) })
+                  }, null, 10, Ro)
                 ])) : m("", !0)
               ]))), 256))
             ]),
-            p("g", null, [
-              (u(!0), i(S, null, M(C.value, (l, o) => (u(), i("rect", {
-                x: l.open.x - d.value / 2 + d.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
+            g("g", null, [
+              (u(!0), i(z, null, M($.value, (l, a) => (u(), i("rect", {
+                x: l.open.x - v.value / 2 + v.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
                 y: l.isBullish ? l.close.y : l.open.y,
                 height: Math.abs(l.close.y - l.open.y) <= 0 ? 1e-4 : Math.abs(l.close.y - l.open.y),
-                width: d.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : d.value * e.value.style.layout.candle.widthRatio,
+                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",
-                class: V({ "vue-data-ui-transition": D.value && !h(N) })
-              }, null, 10, Sa))), 256)),
-              (u(!0), i(S, null, M(C.value, (l, o) => (u(), i("rect", {
-                x: l.open.x - d.value / 2 + d.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
+                class: V({ "vue-data-ui-transition": E.value && !h(P) })
+              }, null, 10, Oo))), 256)),
+              (u(!0), i(z, null, M($.value, (l, a) => (u(), i("rect", {
+                x: l.open.x - v.value / 2 + v.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
                 y: l.isBullish ? l.close.y : l.open.y,
                 height: Math.abs(l.close.y - l.open.y) <= 0 ? 1e-4 : Math.abs(l.close.y - l.open.y),
-                width: d.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : d.value * e.value.style.layout.candle.widthRatio,
-                fill: l.isBullish ? e.value.style.layout.candle.gradient.show ? `url(#bullish_gradient_${R.value})` : e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.gradient.show ? `url(#bearish_gradient_${R.value})` : e.value.style.layout.candle.colors.bearish,
+                width: v.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : v.value * e.value.style.layout.candle.widthRatio,
+                fill: l.isBullish ? e.value.style.layout.candle.gradient.show ? `url(#bullish_gradient_${I.value})` : e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.gradient.show ? `url(#bearish_gradient_${I.value})` : e.value.style.layout.candle.colors.bearish,
                 rx: e.value.style.layout.candle.borderRadius,
                 stroke: e.value.style.layout.candle.stroke,
                 "stroke-width": e.value.style.layout.candle.strokeWidth,
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
-                class: V({ "vue-data-ui-transition": D.value && !h(N) })
-              }, null, 10, La))), 256))
+                class: V({ "vue-data-ui-transition": E.value && !h(P) })
+              }, null, 10, Po))), 256))
             ])
           ], 64)) : m("", !0),
-          e.value.type === "ohlc" ? (u(!0), i(S, { key: 5 }, M(C.value, (l, o) => (u(), i("g", null, [
-            p("path", {
-              d: `M ${l.high.x},${l.high.y} ${l.low.x},${l.low.y} M${l.open.x - Math.min(6, d.value / 3)},${l.open.y} ${l.open.x},${l.open.y} M${l.close.x},${l.close.y} ${l.close.x + Math.min(6, d.value / 3)},${l.close.y}`,
+          e.value.type === "ohlc" ? (u(!0), i(z, { key: 5 }, M($.value, (l, a) => (u(), i("g", null, [
+            g("path", {
+              d: `M ${l.high.x},${l.high.y} ${l.low.x},${l.low.y} M${l.open.x - Math.min(6, v.value / 3)},${l.open.y} ${l.open.x},${l.open.y} M${l.close.x},${l.close.y} ${l.close.x + Math.min(6, v.value / 3)},${l.close.y}`,
               stroke: l.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish,
               "stroke-width": 1
-            }, null, 8, Ta)
+            }, null, 8, No)
           ]))), 256)) : m("", !0),
-          p("g", null, [
-            (u(!0), i(S, null, M(C.value, (l, o) => (u(), i("rect", {
-              x: n.value.left + o * d.value,
+          g("g", null, [
+            (u(!0), i(z, null, M($.value, (l, a) => (u(), i("rect", {
+              x: n.value.left + a * v.value,
               y: n.value.top,
               height: n.value.height <= 0 ? 1e-4 : n.value.height,
-              width: d.value <= 0 ? 1e-4 : d.value,
-              fill: P.value === o || Ge.value === o ? h(Il)(e.value.style.layout.selector.color, e.value.style.layout.selector.opacity) : "transparent",
-              onMouseover: () => sl(o, l),
-              onMouseleave: () => ol(o, l),
-              onClick: () => al(o, l)
-            }, null, 40, Fa))), 256))
+              width: v.value <= 0 ? 1e-4 : v.value,
+              fill: R.value === a || Ge.value === a ? h(Vl)(e.value.style.layout.selector.color, e.value.style.layout.selector.opacity) : "transparent",
+              onMouseover: () => hl(a, l),
+              onMouseleave: () => yl(a, l),
+              onClick: () => dl(a, l)
+            }, null, 40, Vo))), 256))
           ])
         ])) : m("", !0),
-        tt.value ? (u(), i("rect", At({ key: 2 }, qt.value, {
+        lt.value ? (u(), i("rect", At({ key: 2 }, ol.value, {
           "data-start": r.value.start,
           "data-end": r.value.end
-        }), null, 16, Ia)) : m("", !0),
-        b(t.$slots, "svg", {
+        }), null, 16, Uo)) : m("", !0),
+        x(t.$slots, "svg", {
           svg: {
-            ...f.value,
-            data: C.value,
+            ...p.value,
+            data: $.value,
             drawingArea: n.value
           }
         }, void 0, !0)
-      ], 14, ea)),
-      t.$slots.watermark ? (u(), i("div", Ma, [
-        b(t.$slots, "watermark", F(I({ isPrinting: h(Qe) || h(Je) })), void 0, !0)
+      ], 14, ro)),
+      t.$slots.watermark ? (u(), i("div", Wo, [
+        x(t.$slots, "watermark", T(D({ isPrinting: h(Je) || h(Qe) })), void 0, !0)
       ])) : m("", !0),
-      e.value.style.zoom.show && $.value > 6 && ge.value && dt.value ? (u(), Q(Jl, {
+      e.value.style.zoom.show && A.value > 6 && pe.value && dt.value ? (u(), K(uo, {
         key: 5,
         ref_key: "chartSlicer",
         ref: Z,
-        allMinimaps: Jt.value,
+        allMinimaps: ul.value,
         background: e.value.style.zoom.color,
         borderColor: e.value.style.backgroundColor,
         customFormat: e.value.style.zoom.customFormat,
@@ -1222,10 +1252,10 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
         fontSize: e.value.style.zoom.fontSize,
         immediate: !e.value.style.zoom.preview.enable,
         inputColor: e.value.style.zoom.color,
-        isPreview: tt.value,
-        labelLeft: rt.value.start || "",
-        labelRight: rt.value.end || "",
-        max: $.value,
+        isPreview: lt.value,
+        labelLeft: ct.value.start || "",
+        labelRight: ct.value.end || "",
+        max: A.value,
         min: 0,
         minimap: e.value.style.zoom.minimap.show ? h(k).map((l) => l[2]) : [],
         minimapCompact: e.value.style.zoom.minimap.compact,
@@ -1234,70 +1264,70 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
         minimapMerged: !1,
         minimapSelectedColor: e.value.style.zoom.minimap.selectedColor,
         minimapSelectedColorOpacity: e.value.style.zoom.minimap.selectedColorOpacity,
-        minimapSelectedIndex: P.value,
+        minimapSelectedIndex: R.value,
         minimapSelectionRadius: 1,
-        preciseLabels: ll.value,
-        refreshEndPoint: e.value.style.zoom.endIndex !== null ? e.value.style.zoom.endIndex + 1 : $.value,
+        preciseLabels: vl.value,
+        refreshEndPoint: e.value.style.zoom.endIndex !== null ? e.value.style.zoom.endIndex + 1 : A.value,
         refreshStartPoint: e.value.style.zoom.startIndex !== null ? e.value.style.zoom.startIndex : 0,
         selectColor: e.value.style.zoom.highlightColor,
         selectedSeries: h(k),
         smoothMinimap: !1,
         start: r.value.start,
         textColor: e.value.style.color,
-        timeLabels: it.value,
+        timeLabels: nt.value,
         usePreciseLabels: e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable && !e.value.style.zoom.useDefaultFormat,
         useResetSlot: e.value.style.zoom.useResetSlot,
         valueEnd: r.value.end,
         valueStart: r.value.start,
         verticalHandles: e.value.style.zoom.minimap.verticalHandles,
-        "onUpdate:end": pl,
-        "onUpdate:start": ml,
-        onTrapMouse: hl,
+        "onUpdate:end": $l,
+        "onUpdate:start": Al,
+        onTrapMouse: Cl,
         onReset: vt,
-        onFutureEnd: a[0] || (a[0] = (l) => lt("end", l)),
-        onFutureStart: a[1] || (a[1] = (l) => lt("start", l))
+        onFutureEnd: o[0] || (o[0] = (l) => ot("end", l)),
+        onFutureStart: o[1] || (o[1] = (l) => ot("start", l))
       }, {
-        "reset-action": g(({ reset: l }) => [
-          b(t.$slots, "reset-action", F(I({ reset: l })), void 0, !0)
+        "reset-action": b(({ reset: l }) => [
+          x(t.$slots, "reset-action", T(D({ reset: l })), void 0, !0)
         ]),
-        slotMap: g(({ height: l, unitW: o }) => [
-          (u(!0), i(S, null, M(Qt.value({ minimapH: l, unitW: o }), (s, v) => (u(), i("g", null, [
-            p("path", {
+        slotMap: b(({ height: l, unitW: a }) => [
+          (u(!0), i(z, null, M(sl.value({ minimapH: l, unitW: a }), (s, c) => (u(), i("g", null, [
+            g("path", {
               d: `M ${s.high.x},${s.high.y} ${s.low.x},${s.low.y}`,
               stroke: s.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish,
               "stroke-width": 1,
               style: ue({
-                opacity: v >= A.value.start && v <= A.value.end ? 1 : 0.6
+                opacity: c >= C.value.start && c <= C.value.end ? 1 : 0.6
               })
-            }, null, 12, Ra),
-            p("path", {
+            }, null, 12, Xo),
+            g("path", {
               d: `M ${s.open.x},${s.open.y} ${s.close.x},${s.close.y}`,
               stroke: s.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish,
-              "stroke-width": Math.min(6, o / 1.5),
+              "stroke-width": Math.min(6, a / 1.5),
               style: ue({
-                opacity: v >= A.value.start && v <= A.value.end ? 1 : 0.6
+                opacity: c >= C.value.start && c <= C.value.end ? 1 : 0.6
               })
-            }, null, 12, Oa)
+            }, null, 12, jo)
           ]))), 256))
         ]),
         _: 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", "useResetSlot", "valueEnd", "valueStart", "verticalHandles"])) : m("", !0),
-      p("div", {
+      g("div", {
         ref_key: "chartLegend",
-        ref: Ve
+        ref: Ue
       }, [
-        b(t.$slots, "legend", { legend: C.value }, void 0, !0)
+        x(t.$slots, "legend", { legend: $.value }, void 0, !0)
       ], 512),
       t.$slots.source ? (u(), i("div", {
         key: 6,
         ref_key: "source",
-        ref: Ue,
+        ref: We,
         dir: "auto"
       }, [
-        b(t.$slots, "source", {}, void 0, !0)
+        x(t.$slots, "source", {}, void 0, !0)
       ], 512)) : m("", !0),
-      Pe(h(Rt), {
-        show: L.value.showTooltip && be.value,
+      Re(h(Vt), {
+        show: L.value.showTooltip && xe.value,
         backgroundColor: e.value.style.tooltip.backgroundColor,
         color: e.value.style.tooltip.color,
         borderRadius: e.value.style.tooltip.borderRadius,
@@ -1307,7 +1337,7 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
         backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
         position: e.value.style.tooltip.position,
         offsetY: e.value.style.tooltip.offsetY,
-        parent: B.value,
+        parent: O.value,
         content: ke.value,
         isFullscreen: q.value,
         isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function",
@@ -1316,35 +1346,35 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
         smoothForce: e.value.style.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
       }, {
-        "tooltip-before": g(() => [
-          b(t.$slots, "tooltip-before", F(I({ ...Te.value })), void 0, !0)
+        "tooltip-before": b(() => [
+          x(t.$slots, "tooltip-before", T(D({ ...Se.value })), void 0, !0)
         ]),
-        "tooltip-after": g(() => [
-          b(t.$slots, "tooltip-after", F(I({ ...Te.value })), void 0, !0)
+        "tooltip-after": b(() => [
+          x(t.$slots, "tooltip-after", T(D({ ...Se.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      ge.value && e.value.userOptions.buttons.table ? (u(), Q(_l(oe.value.component), At({ key: 7 }, oe.value.props, {
+      pe.value && e.value.userOptions.buttons.table ? (u(), K(Bl(ae.value.component), At({ key: 7 }, ae.value.props, {
         ref_key: "tableUnit",
         ref: te,
-        onClose: pt
-      }), wt({
-        content: g(() => [
-          (u(), Q(h(Dt), {
-            key: `table_${Xe.value}`,
+        onClose: ft
+      }), Ct({
+        content: b(() => [
+          (u(), K(h(Wt), {
+            key: `table_${je.value}`,
             colNames: ye.value.colNames,
             head: ye.value.head,
             body: ye.value.body,
             config: ye.value.config,
-            title: e.value.table.useDialog ? "" : oe.value.title,
+            title: e.value.table.useDialog ? "" : ae.value.title,
             withCloseButton: !e.value.table.useDialog,
-            onClose: pt
+            onClose: ft
           }, {
-            th: g(({ th: l }) => [
+            th: b(({ th: l }) => [
               $t(ie(l), 1)
             ]),
-            td: g(({ td: l }) => [
-              p("div", { innerHTML: l }, null, 8, Da)
+            td: b(({ td: l }) => [
+              g("div", { innerHTML: l }, null, 8, Ho)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -1353,32 +1383,37 @@ const Zl = ["id"], ea = ["xmlns", "aria-label", "viewBox"], ta = ["x", "y", "wid
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: g(() => [
-            $t(ie(oe.value.title), 1)
+          fn: b(() => [
+            $t(ie(ae.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: g(() => [
-            p("button", {
+          fn: b(() => [
+            g("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: a[2] || (a[2] = (l) => Fe(e.value.userOptions.callbacks.csv))
+              onClick: o[2] || (o[2] = (l) => Te(e.value.userOptions.callbacks.csv))
             }, [
-              Pe(h(Mt), {
+              Re(h(Nt), {
                 name: "excel",
-                stroke: oe.value.props.color
+                stroke: ae.value.props.color
               }, null, 8, ["stroke"])
             ])
           ]),
           key: "1"
         } : void 0
       ]), 1040)) : m("", !0),
-      h(N) ? (u(), Q(Vl, { key: 8 })) : m("", !0)
-    ], 46, Zl));
+      h(P) ? (u(), K(Kl, { key: 8 })) : m("", !0)
+    ], 46, no));
   }
-}, eo = /* @__PURE__ */ Kl(Pa, [["__scopeId", "data-v-eec0be6e"]]);
+}, qo = /* @__PURE__ */ io(Go, [["__scopeId", "data-v-7a605f29"]]), da = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: qo
+}, Symbol.toStringTag, { value: "Module" }));
 export {
-  eo as default
+  va as a,
+  da as b,
+  qo as v
 };