vue-data-ui 3.3.3 → 3.4.0

package/dist/vue-ui-candlestick-DfbP87Cr.js

@@ -0,0 +1,1334 @@
+import { defineAsyncComponent as V, computed as c, ref as y, toRefs as Al, watch as oe, shallowRef as xt, onMounted as Cl, onBeforeUnmount as Me, watchEffect as $l, nextTick as bt, createElementBlock as u, openBlock as s, normalizeStyle as se, normalizeClass as B, createBlock as H, createCommentVNode as m, createElementVNode as p, createVNode as Oe, unref as h, createSlots as kt, withCtx as k, renderSlot as w, normalizeProps as G, guardReactiveProps as j, Fragment as _, renderList as S, toDisplayString as ue, mergeProps as wt, resolveDynamicComponent as _l, createTextVNode as At } from "vue";
+import { c as zl, t as Sl, O as he, o as Ct, f as q, m as Ll, x as U, v as Tl, d as N, X as Fl, i as me, s as Il, R as $t, P as Rl, Q as Ml, G as Ol, H as Dl } from "./lib-BcBZIm6u.js";
+import { t as _t, u as Pl } from "./useResponsive-DfdjqQps.js";
+import { u as Bl, a as zt } from "./useNestedProp-B7CiTRDS.js";
+import { u as Nl } from "./usePrinter-C1GiglOH.js";
+import { u as El, B as Vl } from "./BaseScanner-BgWxam9d.js";
+import { u as St, 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-CFY3JivG.js";
+import Yl from "./Title-CFmv95In.js";
+import { t as Ql } from "./themes-Dw-dDudK.js";
+import { S as Jl } from "./SlicerPreview-Cobmb_1S.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"], Ca = ["cx", "cy", "r", "fill"], $a = { 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"], Ra = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, Ma = ["d", "stroke"], Oa = ["d", "stroke", "stroke-width"], Da = ["innerHTML"], Pa = {
+  __name: "vue-ui-candlestick",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    selectedXIndex: {
+      type: Number,
+      default: void 0
+    }
+  },
+  emits: ["selectX"],
+  setup(Lt, { expose: Tt, emit: Ft }) {
+    const It = V(() => import("./BaseIcon-B5KaGWWC.js")), Rt = V(() => import("./Tooltip-Cs4v8OnI.js")), Mt = V(() => import("./vue-ui-accordion-BKkTS12x.js")), Ot = V(() => import("./DataTable-DOx3zgih.js")), Dt = V(() => import("./PenAndPaper-Dj2diYr0.js")), Pt = V(() => import("./UserOptions-C0YT60JN.js")), Bt = V(() => import("./PackageVersion-DyDViSOy.js")), Nt = V(() => import("./BaseDraggableDialog-CbuLbfrc.js")), { vue_ui_candlestick: Et } = Bl(), g = Lt, De = Ft, pe = c(() => !!g.dataset && g.dataset.length), I = y(!1), fe = y(null), L = y(zl()), ge = y(!1), xe = y(""), M = y(void 0), Pe = y(0), O = y(null), Be = y(null), Ne = y(null), J = y(null), Ee = y(null), Ve = y(null), Vt = y(0), Ue = y(0), We = y(0), be = y(null), K = y(null), Z = y(null), ke = y(null), Xe = y(null), e = y($e()), { loading: D, FINAL_DATASET: x, manualLoading: we } = El({
+      ...Al(g),
+      FINAL_CONFIG: e,
+      prepareConfig: $e,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await de();
+        });
+      },
+      skeletonDataset: [
+        [17040672e5, 10, 20, 2, 10, 30],
+        [17067456e5, 10, 30, 5, 20, 50],
+        [17092512e5, 20, 50, 10, 30, 80],
+        [17119296e5, 30, 80, 20, 50, 130],
+        [17145216e5, 50, 130, 30, 100, 210],
+        [17172e8, 80, 210, 50, 150, 340],
+        [1719792e6, 130, 340, 80, 280, 550],
+        [17224704e5, 210, 550, 130, 450, 890],
+        [17251488e5, 340, 890, 210, 750, 1440],
+        [17277408e5, 550, 1440, 340, 1230, 2330],
+        [17304192e5, 890, 2330, 550, 1950, 3770],
+        [17330112e5, 1440, 3770, 890, 3200, 5100]
+      ],
+      skeletonConfig: Sl({
+        defaultConfig: e.value,
+        userConfig: {
+          useCssAnimation: !1,
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            backgroundColor: "#99999930",
+            layout: {
+              candle: {
+                colors: {
+                  bearish: "#BABABA",
+                  bullish: "#CACACA"
+                }
+              },
+              grid: {
+                stroke: "#6A6A6A",
+                verticalLines: {
+                  stroke: "#6A6A6A"
+                },
+                horizontalLines: {
+                  stroke: "#6A6A6A"
+                },
+                yAxis: {
+                  dataLabels: { show: !1 },
+                  scale: {
+                    min: null,
+                    max: null
+                  }
+                }
+              },
+              wick: {
+                stroke: "#6A6A6A",
+                extremity: {
+                  color: "#6A6A6A"
+                }
+              }
+            },
+            tooltip: { show: !1 },
+            zoom: {
+              show: !1,
+              startIndex: null,
+              endIndex: null
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: Ae, setUserOptionsVisibility: He, keepUserOptionState: Ge } = Hl({ config: e.value }), { svgRef: Ce } = Gl({ config: e.value.style.title });
+    function Ut() {
+      He(!0);
+    }
+    function Wt() {
+      He(!1), De("selectX", { seriesIndex: null, datapoint: null }), M.value = null;
+    }
+    function $e() {
+      const t = zt({
+        userConfig: g.config,
+        defaultConfig: Et
+      });
+      let a = {};
+      return t.theme ? a = {
+        ...zt({
+          userConfig: Ql.vue_ui_candlestick[t.theme] || g.config,
+          defaultConfig: t
+        })
+      } : a = t, g.config && he(g.config, "style.zoom.startIndex") ? a.style.zoom.startIndex = g.config.style.zoom.startIndex : a.style.zoom.startIndex = null, g.config && he(g.config, "style.zoom.endIndex") ? a.style.zoom.endIndex = g.config.style.zoom.endIndex : a.style.zoom.endIndex = null, g.config && he(g.config, "style.layout.grid.yAxis.scale.min") ? a.style.layout.grid.yAxis.scale.min = g.config.style.layout.grid.yAxis.scale.min : a.style.layout.grid.yAxis.scale.min = null, g.config && he(g.config, "style.layout.grid.yAxis.scale.max") ? a.style.layout.grid.yAxis.scale.max = g.config.style.layout.grid.yAxis.scale.max : a.style.layout.grid.yAxis.scale.max = null, a;
+    }
+    oe(() => g.config, (t) => {
+      D.value || (e.value = $e()), Ae.value = !e.value.userOptions.showOnChartHover, je(), Vt.value += 1, We.value += 1, Ue.value += 1, z.value.showTable = e.value.table.show, z.value.showTooltip = e.value.style.tooltip.show, ie();
+    }, { deep: !0 }), oe(() => g.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (we.value = !1), nt();
+    }, { deep: !0 });
+    const f = 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
+    }), E = xt(null), Y = xt(null);
+    Cl(() => {
+      je();
+    });
+    const W = c(() => !!e.value.debug);
+    function je() {
+      if (Ct(g.dataset) && (q({
+        componentName: "VueUiCandlestick",
+        type: "dataset",
+        debug: W.value
+      }), we.value = !0), Ct(g.dataset) || (we.value = e.value.loading), setTimeout(() => {
+        I.value = !0;
+      }, 10), e.value.responsive) {
+        const a = _t(() => {
+          I.value = !1;
+          const { width: l, height: o } = Pl({
+            chart: O.value,
+            title: e.value.style.title.text ? Be.value : null,
+            slicer: e.value.style.zoom.show && C.value > 6 ? J.value.$el : null,
+            legend: Ne.value,
+            source: Ee.value,
+            noTitle: Ve.value
+          });
+          requestAnimationFrame(() => {
+            f.value.width = l, f.value.height = o - 12, e.value.responsiveProportionalSizing ? (f.value.xAxisFontSize = $t({
+              relator: Math.min(l, o),
+              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),
+              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), fe.value && clearTimeout(fe.value), fe.value = setTimeout(() => {
+              I.value = !0;
+            }, 10);
+          });
+        });
+        E.value && (Y.value && E.value.unobserve(Y.value), E.value.disconnect()), E.value = new ResizeObserver(a), Y.value = O.value.parentNode, E.value.observe(Y.value);
+      }
+      de();
+    }
+    Me(() => {
+      E.value && (Y.value && E.value.unobserve(Y.value), E.value.disconnect());
+    });
+    const { isPrinting: qe, isImaging: Ye, generatePdf: Qe, generateImage: Je } = Nl({
+      elementId: `vue-ui-candlestick_${L.value}`,
+      fileName: e.value.style.title.text || "vue-ui-candlestick",
+      options: e.value.userOptions.print
+    }), Xt = c(() => e.value.userOptions.show && !e.value.style.title.text), z = y({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.tooltip.show
+    }), _e = y(0), Ht = _t((t) => {
+      _e.value = t;
+    }, 100);
+    $l((t) => {
+      const a = K.value;
+      if (!a) return;
+      const l = new ResizeObserver((o) => {
+        Ht(o[0].contentRect.height);
+      });
+      l.observe(a), t(() => l.disconnect());
+    }), Me(() => {
+      _e.value = 0;
+    });
+    const Ke = c(() => {
+      let t = 0;
+      return K.value && (t = _e.value + f.value.xAxisFontSize), t;
+    });
+    function Gt() {
+      let t = e.value.style.layout.grid.yAxis.dataLabels.offsetX;
+      return be.value && (t = Array.from(be.value.querySelectorAll("text")).reduce((o, i) => {
+        const d = i.getComputedTextLength();
+        return d > o ? d : o;
+      }, 0)), t + 13;
+    }
+    const n = c(() => {
+      const { top: t, right: a, bottom: l, left: o } = e.value.style.layout.padding, i = Gt(), d = 12;
+      return {
+        top: t + d,
+        right: f.value.width - a,
+        left: o + i,
+        bottom: f.value.height - l - Ke.value,
+        width: f.value.width - o - a - i,
+        height: f.value.height - t - l - Ke.value - d
+      };
+    }), jt = c(() => {
+      const { left: t, top: a, width: l, height: o } = n.value, i = r.value.start, b = r.value.end - i, R = l / b, F = A.value.start - i, Q = A.value.end - i, ae = Math.max(0, Math.min(b, F)), pt = Math.max(0, Math.min(b, Q));
+      return {
+        x: t + ae * R,
+        y: a,
+        width: (pt - ae) * R,
+        height: o,
+        fill: e.value.style.zoom.preview.fill,
+        stroke: e.value.style.zoom.preview.stroke,
+        "stroke-width": e.value.style.zoom.preview.strokeWidth,
+        "stroke-dasharray": e.value.style.zoom.preview.strokeDasharray,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        style: {
+          pointerEvents: "none",
+          transition: "none !important",
+          animation: "none !important"
+        }
+      };
+    }), C = c(() => x.value.length), r = y({
+      start: 0,
+      end: C.value
+    }), A = y({ start: 0, end: C.value }), Ze = c(() => e.value.style.zoom.preview.enable && (A.value.start !== r.value.start || A.value.end !== r.value.end));
+    function et(t, a) {
+      A.value[t] = a;
+    }
+    function ie() {
+      let t = Math.max(0, Math.min(r.value.start ?? 0, C.value - 1)), a = Math.max(t + 1, Math.min(r.value.end ?? C.value, C.value));
+      (!Number.isFinite(t) || !Number.isFinite(a) || a <= t) && (t = 0, a = C.value), r.value.start = t, r.value.end = a, A.value.start = t, A.value.end = a, J.value && (J.value.setStartValue(t), J.value.setEndValue(a));
+    }
+    const tt = c(() => x.value.map((t, a) => ({
+      ...t,
+      absoluteIndex: a
+    }))), lt = c(() => tt.value.slice(r.value.start, r.value.end)), ze = c(() => (x.value.forEach((t, a) => {
+      [null, void 0].includes(t[0]) && q({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "period (index 0)",
+        index: a,
+        debug: W.value
+      }), [null, void 0].includes(t[1]) && q({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "open (index 1)",
+        index: a,
+        debug: W.value
+      }), [null, void 0].includes(t[2]) && q({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "high (index 2)",
+        index: a,
+        debug: W.value
+      }), [null, void 0].includes(t[3]) && q({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "low (index 3)",
+        index: a,
+        debug: W.value
+      }), [null, void 0].includes(t[4]) && q({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "last (index 4)",
+        index: a,
+        debug: W.value
+      }), [null, void 0].includes(t[5]) && q({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "volume (index 5)",
+        index: a,
+        debug: W.value
+      });
+    }), lt.value.map((t) => ({
+      absoluteIndex: t.absoluteIndex,
+      period: t[0],
+      open: t[1],
+      high: t[2],
+      low: t[3],
+      last: t[4],
+      volume: t[5]
+    })))), qt = c(() => tt.value.map((t) => ({
+      absoluteIndex: t.absoluteIndex,
+      period: t[0],
+      open: t[1],
+      high: t[2],
+      low: t[3],
+      last: t[4],
+      volume: t[5]
+    }))), v = c(() => n.value.width / lt.value.length), at = c(() => {
+      const t = e.value.style.layout.grid.yAxis.scale.max === null ? Math.max(...ze.value.map((l) => l.high)) : e.value.style.layout.grid.yAxis.scale.max, a = e.value.style.layout.grid.yAxis.scale.min === null ? 0 : e.value.style.layout.grid.yAxis.scale.min;
+      return {
+        max: t,
+        min: a
+      };
+    }), T = c(() => Ll(at.value.min, at.value.max, e.value.style.layout.grid.yAxis.dataLabels.steps));
+    function ne(t, a) {
+      return {
+        ...t,
+        x: U(n.value.left + a * v.value + v.value / 2),
+        y: U(n.value.top + (1 - (t - T.value.min) / (T.value.max - T.value.min)) * n.value.height),
+        value: U(t)
+      };
+    }
+    const $ = c(() => ze.value.map((t, a) => {
+      const l = ne(t.open, a), o = ne(t.high, a), i = ne(t.low, a), d = ne(t.last, a), b = t.last > t.open;
+      return {
+        period: t.period,
+        open: l,
+        high: o,
+        low: i,
+        last: d,
+        volume: t.volume,
+        isBullish: b,
+        absoluteIndex: t.absoluteIndex
+      };
+    }));
+    function re({ item: t, index: a, minimapH: l, unitW: o }) {
+      const i = e.value.style.layout.grid.yAxis.scale.min ?? 0, d = e.value.style.layout.grid.yAxis.scale.max ?? Math.max(...x.value.map((b) => b[2]));
+      return {
+        ...t,
+        x: U(a * o),
+        y: U((1 - (t - i) / (d - i)) * l),
+        value: U(t)
+      };
+    }
+    const Yt = c(() => ({ minimapH: t, unitW: a }) => qt.value.map((l, o) => {
+      const i = re({ item: l.open, index: o, minimapH: t, unitW: a }), d = re({ item: l.high, index: o, minimapH: t, unitW: a }), b = re({ item: l.low, index: o, minimapH: t, unitW: a }), R = re({ item: l.last, index: o, minimapH: t, unitW: a }), F = l.last > l.open;
+      return {
+        period: l.period,
+        open: i,
+        high: d,
+        low: b,
+        last: R,
+        volume: l.volume,
+        isBullish: F,
+        absoluteIndex: l.absoluteIndex
+      };
+    })), Qt = c(() => e.value.style.zoom.minimap.show ? [{
+      name: "",
+      series: x.value.map((t) => t[2]),
+      color: "#000000",
+      isVisible: !0
+    }] : []);
+    function Jt(t) {
+      return U((t - T.value.min) / (T.value.max - T.value.min));
+    }
+    const ot = c(() => T.value.ticks.map((t) => ({
+      y: n.value.bottom - n.value.height * Jt(t),
+      value: U(t)
+    }))), Kt = c(() => ze.value.map((t) => t.period)), P = c(() => St({
+      values: x.value.map((t) => t[0]),
+      maxDatapoints: x.value.length,
+      formatter: e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter,
+      start: r.value.start,
+      end: r.value.end
+    })), st = c(() => St({
+      values: x.value.map((t) => t[0]),
+      maxDatapoints: x.value.length,
+      formatter: e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter,
+      start: 0,
+      end: C.value
+    })), Zt = c(() => {
+      const t = e.value.style.layout.grid.xAxis.dataLabels.modulo;
+      return P.value.length ? Math.min(t, [...new Set(P.value.map((a) => a.text))].length) : t;
+    }), ut = c(() => {
+      const t = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter, a = Ul({
+        useUTC: t.useUTC,
+        locale: Wl[t.locale] || { months: [], shortMonths: [], days: [], shortDays: [] },
+        januaryAsYear: t.januaryAsYear
+      });
+      return (l, o) => {
+        const d = x.value.map((b) => b[0])?.[l];
+        return d == null ? "" : a.formatDate(new Date(d), o);
+      };
+    }), el = c(() => (x.value.map((a) => a[0]) || []).map((a, l) => ({
+      text: ut.value(l, e.value.style.tooltip.timeFormat),
+      absoluteIndex: l
+    }))), tl = c(() => (x.value.map((a) => a[0]) || []).map((a, l) => ({
+      text: ut.value(l, e.value.style.zoom.timeFormat),
+      absoluteIndex: l
+    }))), Se = c(() => {
+      const t = e.value.style.layout.grid.xAxis.dataLabels, a = P.value || [], l = st.value || [], o = r.value.start ?? 0, i = M.value, d = C.value, b = a.map((F) => F?.text ?? ""), R = l.map((F) => F?.text ?? "");
+      return Tl(
+        !!t.showOnlyFirstAndLast,
+        !!t.showOnlyAtModulo,
+        Math.max(1, Zt.value || 1),
+        b,
+        R,
+        o,
+        i,
+        d
+      );
+    }), it = c(() => e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? {
+      start: P.value.find((t) => t.absoluteIndex === r.value.start).text,
+      end: P.value.find((t) => t.absoluteIndex === r.value.end - 1).text
+    } : {
+      start: x.value[r.value.start] ? x.value[r.value.start][0] : x.value[0][0],
+      end: x.value[r.value.end - 1] ? x.value[r.value.end - 1][0] : x.value.at(-1)[0]
+    }), Le = y(null);
+    function ll(t, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: a, seriesIndex: t + r.value.start });
+    }
+    function al(t, a) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: t + r.value.start }), M.value = void 0, ge.value = !1;
+    }
+    oe(() => g.selectedXIndex, (t) => {
+      if ([null, void 0].includes(g.selectedXIndex)) {
+        M.value = null;
+        return;
+      }
+      const a = t - r.value.start;
+      a < 0 || t >= r.value.end ? M.value = null : M.value = a ?? null;
+    }, { immediate: !0 });
+    function ol(t, a) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: a, seriesIndex: t + r.value.start }), M.value = t, Le.value = {
+        datapoint: a,
+        seriesIndex: t,
+        series: $.value,
+        config: e.value
+      }, pl({ seriesIndex: t, datapoint: a });
+      const l = e.value.style.tooltip.customFormat;
+      if (Ol(l) && Dl(() => l({
+        seriesIndex: t,
+        datapoint: a,
+        series: $.value,
+        config: e.value
+      })))
+        xe.value = l({
+          seriesIndex: t,
+          datapoint: a,
+          series: $.value,
+          config: e.value
+        });
+      else if (e.value.style.tooltip.show) {
+        let o = "";
+        const { period: i, open: d, high: b, low: R, last: F, volume: Q, isBullish: ae } = $.value[t], { period: pt, open: fl, high: gl, low: xl, last: bl, volume: kl } = e.value.translations, wl = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? e.value.style.tooltip.useDefaultTimeFormat ? P.value[t].text : el.value[t].text : i;
+        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 ? ae ? `url(#bullish_gradient_${L.value})` : `url(#bearish_gradient_${L.value})` : ae ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg>${wl}</div>`, o += `${kl} : <b>${isNaN(Q) ? "-" : Number(Q.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 Ie = N({
+          p: e.value.style.tooltip.prefix,
+          v: d.value,
+          s: e.value.style.tooltip.suffix,
+          r: e.value.style.tooltip.roundingValue
+        }), ft = N({
+          p: e.value.style.tooltip.prefix,
+          v: b.value,
+          s: e.value.style.tooltip.suffix,
+          r: e.value.style.tooltip.roundingValue
+        }), gt = N({
+          p: e.value.style.tooltip.prefix,
+          v: R.value,
+          s: e.value.style.tooltip.suffix,
+          r: e.value.style.tooltip.roundingValue
+        }), Re = N({
+          p: e.value.style.tooltip.prefix,
+          v: F.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;">
+                    <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="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}">${Ie}</text>
+                                <text x="62" y="40" text-anchor="start" fill="${e.value.style.tooltip.color}">${Re}</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}">${Ie}</text>
+                                <text x="60" y="70" text-anchor="start" fill="${e.value.style.tooltip.color}">${Re}</text>
+                            `}
+                            <text x="50" y="13" text-anchor="middle" fill="${e.value.style.tooltip.color}">${ft}</text>
+                            <text x="50" y="97" text-anchor="middle" fill="${e.value.style.tooltip.color}">${gt}</text>
+                        <g>
+                    </svg>
+                    <div>
+                ` : (o += `<div>${fl}: <b>${Ie}</b></div>`, o += `<div>${gl}: <b>${ft}</b></div>`, o += `<div>${xl}: <b>${gt}</b></div>`, o += `<div>${bl}: <b>${Re}</b></div>`), o += "</div>", xe.value = `<div style="text-align:right">${o}</div>`;
+      }
+      ge.value = !0;
+    }
+    const ee = y(null);
+    function sl() {
+      return new Promise((t) => requestAnimationFrame(
+        () => requestAnimationFrame(() => t())
+      ));
+    }
+    Me(() => {
+      ee.value && cancelAnimationFrame(ee.value);
+    });
+    async function nt() {
+      de(), await bt(), ee.value && cancelAnimationFrame(ee.value), ee.value = requestAnimationFrame(async () => {
+        await sl(), de();
+      });
+    }
+    const te = y(!1), rt = y(!1), ve = y(!1);
+    function de() {
+      if (!te.value) {
+        te.value = !0;
+        try {
+          const { startIndex: t, endIndex: a } = e.value.style.zoom, l = C.value, o = t ?? 0, i = a != null ? Math.min(vt(a + 1), l) : l;
+          ve.value = !0, r.value.start = o, r.value.end = i, A.value.start = o, A.value.end = i, ie(), rt.value = !0;
+        } finally {
+          queueMicrotask(() => {
+            ve.value = !1;
+          }), te.value = !1;
+        }
+      }
+    }
+    function vt(t) {
+      const a = C.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 Te(t = null) {
+      bt(() => {
+        const a = [e.value.translations.period, e.value.translations.open, e.value.translations.high, e.value.translations.low, e.value.translations.last, e.value.translations.volume], l = $.value.map((d, b) => [
+          e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? P.value[b].text : d.period,
+          d.open.value,
+          d.high.value,
+          d.low.value,
+          d.last.value,
+          d.volume
+        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), i = Rl(o);
+        t ? t(i) : Ml({ csvContent: i, title: e.value.style.title.text || "vue-ui-candlestick" });
+      });
+    }
+    const ce = c(() => {
+      const t = $.value.map((o, i) => {
+        const d = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? P.value[i].text : o.period, b = N({
+          p: e.value.table.td.prefix,
+          v: o.open.value,
+          s: e.value.table.td.suffix,
+          r: e.value.table.td.roundingValue
+        }), R = N({
+          p: e.value.table.td.prefix,
+          v: o.high.value,
+          s: e.value.table.td.suffix,
+          r: e.value.table.td.roundingValue
+        }), F = N({
+          p: e.value.table.td.prefix,
+          v: o.low.value,
+          s: e.value.table.td.suffix,
+          r: e.value.table.td.roundingValue
+        }), Q = N({
+          p: e.value.table.td.prefix,
+          v: o.last.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_${L.value}` : `url(#bearish_gradient_${L.value})` : o.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg> ${d}`,
+          b,
+          R,
+          F,
+          Q,
+          `${isNaN(o.volume) ? "-" : o.volume.toLocaleString()}`
+        ];
+      }), a = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      }, l = [
+        e.value.translations.period,
+        e.value.translations.open,
+        e.value.translations.high,
+        e.value.translations.low,
+        e.value.translations.last,
+        e.value.translations.volume
+      ];
+      return { head: l, body: t, config: a, colNames: l };
+    }), X = y(!1);
+    function dt(t) {
+      X.value = t, Pe.value += 1;
+    }
+    function ct() {
+      z.value.showTable = !z.value.showTable;
+    }
+    function yt() {
+      z.value.showTooltip = !z.value.showTooltip;
+    }
+    const ye = y(!1);
+    function Fe() {
+      ye.value = !ye.value;
+    }
+    async function ul({ scale: t = 2 } = {}) {
+      if (!O.value) return;
+      const { width: a, height: l } = O.value.getBoundingClientRect(), o = a / l, { imageUri: i, base64: d } = await ql({ domElement: O.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: i,
+        base64: d,
+        title: e.value.style.title.text,
+        width: a,
+        height: l,
+        aspectRatio: o
+      };
+    }
+    const il = c(() => f.value.width), nl = c(() => f.value.height);
+    jl({
+      timeLabelsEls: K,
+      timeLabels: P,
+      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: il,
+      height: nl
+    }), oe(e, () => {
+      z.value = {
+        showTable: e.value.table.show,
+        showTooltip: e.value.style.tooltip.show
+      };
+    }, { immediate: !0 });
+    const le = c(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = z.value.showTable;
+      return {
+        component: t ? Nt : Mt,
+        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,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: X.value,
+          fullscreenParent: O.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.backgroundColor,
+              color: e.value.style.color
+            },
+            head: {
+              backgroundColor: e.value.style.backgroundColor,
+              color: e.value.style.color
+            }
+          }
+        }
+      };
+    });
+    oe(() => z.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && Z.value ? Z.value.open() : "close" in Z.value && Z.value.close());
+    });
+    function ht() {
+      z.value.showTable = !1, ke.value && ke.value.setTableIconState(!1);
+    }
+    const rl = c(() => e.value.style.backgroundColor), vl = c(() => e.value.style.title), { exportSvg: dl, getSvg: cl } = Xl({
+      svg: Ce,
+      title: vl,
+      backgroundColor: rl
+    });
+    async function mt({ isCb: t }) {
+      if (t) {
+        const { blob: a, url: l, text: o, dataUrl: i } = await cl();
+        e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: i });
+      } else
+        dl();
+    }
+    function yl(t) {
+      Xe.value = t;
+    }
+    function hl(t) {
+      te.value || ve.value || t !== r.value.start && (r.value.start = t, A.value.start = t, ie());
+    }
+    function ml(t) {
+      if (te.value || ve.value) return;
+      const a = vt(t);
+      a !== r.value.end && (r.value.end = a, A.value.end = a, ie());
+    }
+    function pl({ seriesIndex: t, datapoint: a }) {
+      const l = r.value.start + t;
+      De("selectX", {
+        dataset: a,
+        index: l,
+        indexLabel: ""
+      });
+    }
+    return Tt({
+      getImage: ul,
+      generatePdf: Qe,
+      generateCsv: Te,
+      generateImage: Je,
+      generateSvg: mt,
+      toggleTable: ct,
+      toggleTooltip: yt,
+      toggleAnnotator: Fe,
+      toggleFullscreen: dt
+    }), (t, a) => (s(), u("div", {
+      ref_key: "candlestickChart",
+      ref: O,
+      class: B(`vue-data-ui-component vue-ui-candlestick ${X.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: se(`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_${L.value}`,
+      onMouseenter: Ut,
+      onMouseleave: Wt
+    }, [
+      e.value.userOptions.buttons.annotator ? (s(), H(h(Dt), {
+        key: 0,
+        svgRef: h(Ce),
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        active: ye.value,
+        onClose: Fe
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : m("", !0),
+      Xt.value ? (s(), u("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: Ve,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : m("", !0),
+      e.value.style.title.text ? (s(), u("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: Be,
+        style: "width:100%;background:transparent"
+      }, [
+        (s(), H(Yl, {
+          key: `title_${We.value}`,
+          config: {
+            title: {
+              cy: "candlestick-div-title",
+              ...e.value.style.title
+            },
+            subtitle: {
+              cy: "candlestick-div-subtitle",
+              ...e.value.style.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : m("", !0),
+      e.value.userOptions.show && pe.value && (h(Ge) || h(Ae)) ? (s(), H(h(Pt), {
+        ref_key: "userOptionsRef",
+        ref: ke,
+        key: `user_options_${Pe.value}`,
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        isImaging: h(Ye),
+        isPrinting: h(qe),
+        uid: L.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: X.value,
+        isTooltip: z.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: O.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: ye.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleFullscreen: dt,
+        onGeneratePdf: h(Qe),
+        onGenerateCsv: Te,
+        onGenerateImage: h(Je),
+        onGenerateSvg: mt,
+        onToggleTable: ct,
+        onToggleTooltip: yt,
+        onToggleAnnotator: Fe,
+        style: se({
+          visibility: h(Ge) ? h(Ae) ? "visible" : "hidden" : "visible"
+        })
+      }, kt({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: k(({ isOpen: l, color: o }) => [
+            w(t.$slots, "menuIcon", G(j({ isOpen: l, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: k(() => [
+            w(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: k(() => [
+            w(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: k(() => [
+            w(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: k(() => [
+            w(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: k(() => [
+            w(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: k(({ toggleFullscreen: l, isFullscreen: o }) => [
+            w(t.$slots, "optionFullscreen", G(j({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: k(({ toggleAnnotator: l, isAnnotator: o }) => [
+            w(t.$slots, "optionAnnotator", G(j({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "7"
+        } : 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),
+      (s(), u("svg", {
+        ref_key: "svgRef",
+        ref: Ce,
+        xmlns: h(Fl),
+        "aria-label": e.value.style.title.text || "candlestick chart",
+        class: B({ "vue-data-ui-fullscreen--on": X.value, "vue-data-ui-fulscreen--off": !X.value }),
+        viewBox: `0 0 ${f.value.width <= 0 ? 10 : f.value.width} ${f.value.height <= 0 ? 10 : f.value.height}`,
+        style: se(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
+      }, [
+        Oe(h(Bt)),
+        t.$slots["chart-background"] ? (s(), u("foreignObject", {
+          key: 0,
+          x: n.value.left,
+          y: n.value.top,
+          width: Math.max(0.1, n.value.width),
+          height: Math.max(0.1, n.value.height),
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          w(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, ta)) : m("", !0),
+        $.value.length > 0 ? (s(), u("g", la, [
+          p("defs", null, [
+            p("linearGradient", {
+              id: `bearish_gradient_${L.value}`,
+              x2: "0%",
+              y2: "100%"
+            }, [
+              p("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.layout.candle.colors.bearish
+              }, null, 8, oa),
+              p("stop", {
+                offset: "50%",
+                "stop-color": `${h(me)(e.value.style.layout.candle.colors.bearish, 0.02)}DE`
+              }, null, 8, sa),
+              p("stop", {
+                offset: "100%",
+                "stop-color": `${h(me)(e.value.style.layout.candle.colors.bearish, 0.05)}66`
+              }, null, 8, ua)
+            ], 8, aa),
+            p("linearGradient", {
+              id: `bullish_gradient_${L.value}`,
+              x2: "0%",
+              y2: "100%"
+            }, [
+              p("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.layout.candle.colors.bullish
+              }, null, 8, na),
+              p("stop", {
+                offset: "50%",
+                "stop-color": `${h(me)(e.value.style.layout.candle.colors.bullish, 0.02)}DE`
+              }, null, 8, ra),
+              p("stop", {
+                offset: "100%",
+                "stop-color": `${h(me)(e.value.style.layout.candle.colors.bullish, 0.05)}66`
+              }, null, 8, va)
+            ], 8, ia)
+          ]),
+          e.value.style.layout.grid.show ? (s(), u("g", da, [
+            p("line", {
+              x1: n.value.left,
+              x2: n.value.left,
+              y1: n.value.top,
+              y2: n.value.bottom,
+              stroke: e.value.style.layout.grid.stroke,
+              "stroke-width": e.value.style.layout.grid.strokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, ca),
+            p("line", {
+              x1: n.value.left,
+              x2: n.value.right,
+              y1: n.value.bottom,
+              y2: n.value.bottom,
+              stroke: e.value.style.layout.grid.stroke,
+              "stroke-width": e.value.style.layout.grid.strokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, ya),
+            e.value.style.layout.grid.horizontalLines.show ? (s(!0), u(_, { key: 0 }, S(ot.value, (l) => (s(), u("line", {
+              x1: n.value.left,
+              x2: n.value.right,
+              y1: l.y,
+              y2: l.y,
+              stroke: e.value.style.layout.grid.horizontalLines.stroke,
+              "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 ? (s(!0), u(_, { key: 1 }, S(Se.value, (l, o) => (s(), u("g", null, [
+              l.text ? (s(), u("line", {
+                key: 0,
+                x1: n.value.left + v.value * o + v.value / 2,
+                x2: n.value.left + v.value * o + 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)
+            ]))), 256)) : m("", !0),
+            e.value.style.layout.grid.xAxis.ticks.show ? (s(!0), u(_, { key: 2 }, S(Se.value, (l, o) => (s(), u("g", null, [
+              l.text ? (s(), u("line", {
+                key: 0,
+                x1: n.value.left + v.value * o + v.value / 2,
+                x2: n.value.left + v.value * o + 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)
+            ]))), 256)) : m("", !0)
+          ])) : m("", !0),
+          e.value.style.layout.grid.yAxis.dataLabels.show ? (s(), u("g", {
+            key: 1,
+            ref_key: "scaleLabels",
+            ref: be
+          }, [
+            (s(!0), u(_, null, S(ot.value, (l, o) => (s(), u("g", null, [
+              l.value >= T.value.min && l.value <= T.value.max ? (s(), u("line", {
+                key: 0,
+                x1: n.value.left,
+                x2: n.value.left - 5,
+                y1: l.y,
+                y2: l.y,
+                stroke: e.value.style.layout.grid.stroke,
+                "stroke-width": e.value.style.layout.grid.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, fa)) : m("", !0),
+              l.value >= T.value.min && l.value <= T.value.max ? (s(), u("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,
+                "text-anchor": "end",
+                fill: e.value.style.layout.grid.yAxis.dataLabels.color,
+                "font-weight": e.value.style.layout.grid.yAxis.dataLabels.bold ? "bold" : "normal"
+              }, ue(h(N)({
+                p: e.value.style.layout.grid.yAxis.dataLabels.prefix,
+                v: l.value,
+                s: e.value.style.layout.grid.yAxis.dataLabels.suffix,
+                r: e.value.style.layout.grid.yAxis.dataLabels.roundingValue
+              })), 9, ga)) : m("", !0)
+            ]))), 256))
+          ], 512)) : m("", !0),
+          e.value.style.layout.grid.xAxis.dataLabels.show && !e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), u("g", {
+            key: 2,
+            ref_key: "timeLabelsEls",
+            ref: K
+          }, [
+            (s(!0), u(_, null, S(Kt.value, (l, o) => (s(), u("g", null, [
+              p("text", {
+                class: "vue-data-ui-time-label",
+                transform: `translate(${n.value.left + v.value * o + v.value / 2}, ${n.value.bottom + f.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,
+                fill: e.value.style.layout.grid.xAxis.dataLabels.color,
+                "font-weight": e.value.style.layout.grid.xAxis.dataLabels.bold ? "bold" : "normal"
+              }, ue(l), 9, xa)
+            ]))), 256))
+          ], 512)) : m("", !0),
+          e.value.style.layout.grid.xAxis.dataLabels.show && e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), u("g", {
+            key: 3,
+            ref_key: "timeLabelsEls",
+            ref: K
+          }, [
+            (s(!0), u(_, null, S(Se.value, (l, o) => (s(), u("g", null, [
+              p("text", {
+                class: "vue-data-ui-time-label",
+                transform: `translate(${n.value.left + v.value * o + v.value / 2}, ${n.value.bottom + f.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,
+                fill: e.value.style.layout.grid.xAxis.dataLabels.color,
+                "font-weight": e.value.style.layout.grid.xAxis.dataLabels.bold ? "bold" : "normal"
+              }, ue(l.text), 9, ba)
+            ]))), 256))
+          ], 512)) : m("", !0),
+          e.value.type === "candlestick" ? (s(), u(_, { key: 4 }, [
+            p("g", null, [
+              (s(!0), u(_, null, S($.value, (l, o) => (s(), u("g", null, [
+                p("rect", {
+                  x: l.open.x - e.value.style.layout.wick.strokeWidth / 2,
+                  y: l.high.y,
+                  width: e.value.style.layout.wick.strokeWidth,
+                  height: Math.abs(l.high.y - l.low.y),
+                  fill: e.value.style.layout.wick.stroke,
+                  stroke: "none",
+                  rx: e.value.style.layout.wick.strokeWidth / 2,
+                  class: B({ "vue-data-ui-transition": I.value && !h(D) })
+                }, null, 10, ka),
+                e.value.style.layout.wick.extremity.shape === "circle" ? (s(), u("g", wa, [
+                  p("circle", {
+                    cx: l.high.x,
+                    cy: l.high.y,
+                    r: e.value.style.layout.wick.extremity.size === "auto" ? v.value / 20 : e.value.style.layout.wick.extremity.size,
+                    fill: e.value.style.layout.wick.extremity.color,
+                    class: B({ "vue-data-ui-transition": I.value && !h(D) })
+                  }, null, 10, Aa),
+                  p("circle", {
+                    cx: l.low.x,
+                    cy: l.low.y,
+                    r: e.value.style.layout.wick.extremity.size === "auto" ? v.value / 20 : e.value.style.layout.wick.extremity.size,
+                    fill: e.value.style.layout.wick.extremity.color,
+                    class: B({ "vue-data-ui-transition": I.value && !h(D) })
+                  }, null, 10, Ca)
+                ])) : m("", !0),
+                e.value.style.layout.wick.extremity.shape === "line" ? (s(), u("g", $a, [
+                  p("rect", {
+                    x: l.high.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
+                    y: l.high.y - e.value.style.layout.wick.strokeWidth / 2,
+                    width: Math.abs(l.high.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2 - (l.high.x + (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2)),
+                    height: e.value.style.layout.wick.strokeWidth,
+                    rx: e.value.style.layout.wick.strokeWidth / 2,
+                    fill: e.value.style.layout.wick.extremity.color,
+                    stroke: "none",
+                    class: B({ "vue-data-ui-transition": I.value && !h(D) })
+                  }, null, 10, _a),
+                  p("rect", {
+                    x: l.low.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
+                    y: l.low.y - e.value.style.layout.wick.strokeWidth / 2,
+                    width: Math.abs(l.low.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2 - (l.low.x + (e.value.style.layout.wick.extremity.size === "auto" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2)),
+                    height: e.value.style.layout.wick.strokeWidth,
+                    fill: e.value.style.layout.wick.extremity.color,
+                    stroke: "none",
+                    rx: e.value.style.layout.wick.strokeWidth / 2,
+                    class: B({ "vue-data-ui-transition": I.value && !h(D) })
+                  }, null, 10, za)
+                ])) : m("", !0)
+              ]))), 256))
+            ]),
+            p("g", null, [
+              (s(!0), u(_, null, S($.value, (l, o) => (s(), u("rect", {
+                x: l.open.x - v.value / 2 + v.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
+                y: l.isBullish ? l.last.y : l.open.y,
+                height: Math.abs(l.last.y - l.open.y) <= 0 ? 1e-4 : Math.abs(l.last.y - l.open.y),
+                width: v.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : v.value * e.value.style.layout.candle.widthRatio,
+                fill: e.value.style.layout.candle.gradient.underlayer,
+                rx: e.value.style.layout.candle.borderRadius,
+                stroke: "none",
+                class: B({ "vue-data-ui-transition": I.value && !h(D) })
+              }, null, 10, Sa))), 256)),
+              (s(!0), u(_, null, S($.value, (l, o) => (s(), u("rect", {
+                x: l.open.x - v.value / 2 + v.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
+                y: l.isBullish ? l.last.y : l.open.y,
+                height: Math.abs(l.last.y - l.open.y) <= 0 ? 1e-4 : Math.abs(l.last.y - l.open.y),
+                width: v.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : v.value * e.value.style.layout.candle.widthRatio,
+                fill: l.isBullish ? e.value.style.layout.candle.gradient.show ? `url(#bullish_gradient_${L.value})` : e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.gradient.show ? `url(#bearish_gradient_${L.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: B({ "vue-data-ui-transition": I.value && !h(D) })
+              }, null, 10, La))), 256))
+            ])
+          ], 64)) : m("", !0),
+          e.value.type === "ohlc" ? (s(!0), u(_, { key: 5 }, S($.value, (l, o) => (s(), u("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, v.value / 3)},${l.open.y} ${l.open.x},${l.open.y} M${l.last.x},${l.last.y} ${l.last.x + Math.min(6, v.value / 3)},${l.last.y}`,
+              stroke: l.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish,
+              "stroke-width": 1
+            }, null, 8, Ta)
+          ]))), 256)) : m("", !0),
+          p("g", null, [
+            (s(!0), u(_, null, S($.value, (l, o) => (s(), u("rect", {
+              x: n.value.left + o * v.value,
+              y: n.value.top,
+              height: n.value.height <= 0 ? 1e-4 : n.value.height,
+              width: v.value <= 0 ? 1e-4 : v.value,
+              fill: M.value === o || Xe.value === o ? h(Il)(e.value.style.layout.selector.color, e.value.style.layout.selector.opacity) : "transparent",
+              onMouseover: () => ol(o, l),
+              onMouseleave: () => al(o, l),
+              onClick: () => ll(o, l)
+            }, null, 40, Fa))), 256))
+          ])
+        ])) : m("", !0),
+        Ze.value ? (s(), u("rect", wt({ key: 2 }, jt.value, {
+          "data-start": r.value.start,
+          "data-end": r.value.end
+        }), null, 16, Ia)) : m("", !0),
+        w(t.$slots, "svg", { svg: f.value }, void 0, !0)
+      ], 14, ea)),
+      t.$slots.watermark ? (s(), u("div", Ra, [
+        w(t.$slots, "watermark", G(j({ isPrinting: h(qe) || h(Ye) })), void 0, !0)
+      ])) : m("", !0),
+      e.value.style.zoom.show && C.value > 6 && pe.value && rt.value ? (s(), H(Jl, {
+        key: 5,
+        ref_key: "chartSlicer",
+        ref: J,
+        allMinimaps: Qt.value,
+        background: e.value.style.zoom.color,
+        borderColor: e.value.style.backgroundColor,
+        customFormat: e.value.style.zoom.customFormat,
+        cutNullValues: !1,
+        enableRangeHandles: e.value.style.zoom.enableRangeHandles,
+        enableSelectionDrag: e.value.style.zoom.enableSelectionDrag,
+        end: r.value.end,
+        focusOnDrag: e.value.style.zoom.focusOnDrag,
+        focusRangeRatio: e.value.style.zoom.focusRangeRatio,
+        fontSize: e.value.style.zoom.fontSize,
+        immediate: !e.value.style.zoom.preview.enable,
+        inputColor: e.value.style.zoom.color,
+        isPreview: Ze.value,
+        labelLeft: it.value.start || "",
+        labelRight: it.value.end || "",
+        max: C.value,
+        min: 0,
+        minimap: e.value.style.zoom.minimap.show ? h(x).map((l) => l[2]) : [],
+        minimapCompact: e.value.style.zoom.minimap.compact,
+        minimapFrameColor: e.value.style.zoom.minimap.frameColor,
+        minimapIndicatorColor: e.value.style.zoom.minimap.indicatorColor,
+        minimapMerged: !1,
+        minimapSelectedColor: e.value.style.zoom.minimap.selectedColor,
+        minimapSelectedColorOpacity: e.value.style.zoom.minimap.selectedColorOpacity,
+        minimapSelectedIndex: M.value,
+        minimapSelectionRadius: 1,
+        preciseLabels: tl.value,
+        refreshEndPoint: e.value.style.zoom.endIndex !== null ? e.value.style.zoom.endIndex + 1 : C.value,
+        refreshStartPoint: e.value.style.zoom.startIndex !== null ? e.value.style.zoom.startIndex : 0,
+        selectColor: e.value.style.zoom.highlightColor,
+        selectedSeries: h(x),
+        smoothMinimap: !1,
+        start: r.value.start,
+        textColor: e.value.style.color,
+        timeLabels: st.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": ml,
+        "onUpdate:start": hl,
+        onTrapMouse: yl,
+        onReset: nt,
+        onFutureEnd: a[0] || (a[0] = (l) => et("end", l)),
+        onFutureStart: a[1] || (a[1] = (l) => et("start", l))
+      }, {
+        "reset-action": k(({ reset: l }) => [
+          w(t.$slots, "reset-action", G(j({ reset: l })), void 0, !0)
+        ]),
+        slotMap: k(({ height: l, unitW: o }) => [
+          (s(!0), u(_, null, S(Yt.value({ minimapH: l, unitW: o }), (i, d) => (s(), u("g", null, [
+            p("path", {
+              d: `M ${i.high.x},${i.high.y} ${i.low.x},${i.low.y}`,
+              stroke: i.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish,
+              "stroke-width": 1,
+              style: se({
+                opacity: d >= A.value.start && d <= A.value.end ? 1 : 0.6
+              })
+            }, null, 12, Ma),
+            p("path", {
+              d: `M ${i.open.x},${i.open.y} ${i.last.x},${i.last.y}`,
+              stroke: i.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish,
+              "stroke-width": Math.min(6, o / 1.5),
+              style: se({
+                opacity: d >= A.value.start && d <= A.value.end ? 1 : 0.6
+              })
+            }, null, 12, Oa)
+          ]))), 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", {
+        ref_key: "chartLegend",
+        ref: Ne
+      }, [
+        w(t.$slots, "legend", { legend: $.value }, void 0, !0)
+      ], 512),
+      t.$slots.source ? (s(), u("div", {
+        key: 6,
+        ref_key: "source",
+        ref: Ee,
+        dir: "auto"
+      }, [
+        w(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : m("", !0),
+      Oe(h(Rt), {
+        show: z.value.showTooltip && ge.value,
+        backgroundColor: e.value.style.tooltip.backgroundColor,
+        color: e.value.style.tooltip.color,
+        borderRadius: e.value.style.tooltip.borderRadius,
+        borderColor: e.value.style.tooltip.borderColor,
+        borderWidth: e.value.style.tooltip.borderWidth,
+        fontSize: e.value.style.tooltip.fontSize,
+        backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
+        position: e.value.style.tooltip.position,
+        offsetY: e.value.style.tooltip.offsetY,
+        parent: O.value,
+        content: xe.value,
+        isFullscreen: X.value,
+        isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function",
+        smooth: e.value.style.tooltip.smooth,
+        backdropFilter: e.value.style.tooltip.backdropFilter,
+        smoothForce: e.value.style.tooltip.smoothForce,
+        smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
+      }, {
+        "tooltip-before": k(() => [
+          w(t.$slots, "tooltip-before", G(j({ ...Le.value })), void 0, !0)
+        ]),
+        "tooltip-after": k(() => [
+          w(t.$slots, "tooltip-after", G(j({ ...Le.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
+      pe.value && e.value.userOptions.buttons.table ? (s(), H(_l(le.value.component), wt({ key: 7 }, le.value.props, {
+        ref_key: "tableUnit",
+        ref: Z,
+        onClose: ht
+      }), kt({
+        content: k(() => [
+          (s(), H(h(Ot), {
+            key: `table_${Ue.value}`,
+            colNames: ce.value.colNames,
+            head: ce.value.head,
+            body: ce.value.body,
+            config: ce.value.config,
+            title: e.value.table.useDialog ? "" : le.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: ht
+          }, {
+            th: k(({ th: l }) => [
+              At(ue(l), 1)
+            ]),
+            td: k(({ td: l }) => [
+              p("div", { innerHTML: l }, null, 8, Da)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: k(() => [
+            At(ue(le.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: k(() => [
+            p("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[2] || (a[2] = (l) => Te(e.value.userOptions.callbacks.csv))
+            }, [
+              Oe(h(It), {
+                name: "excel",
+                stroke: le.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : m("", !0),
+      h(D) ? (s(), H(Vl, { key: 8 })) : m("", !0)
+    ], 46, Zl));
+  }
+}, eo = /* @__PURE__ */ Kl(Pa, [["__scopeId", "data-v-4f042a77"]]);
+export {
+  eo as default
+};