vue-data-ui 2.15.4 → 2.15.5

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

@@ -0,0 +1,856 @@
+import { defineAsyncComponent as S, computed as f, ref as y, watch as Re, shallowRef as Oe, onMounted as ht, onBeforeUnmount as pt, nextTick as D, createElementBlock as u, openBlock as s, unref as r, normalizeStyle as ie, normalizeClass as Ne, createBlock as I, createCommentVNode as h, createElementVNode as v, createVNode as Pe, createSlots as ft, withCtx as x, renderSlot as g, normalizeProps as T, guardReactiveProps as L, Fragment as F, renderList as R, toDisplayString as q, createTextVNode as gt } from "vue";
+import { u as xt, c as mt, a as bt, C as J, o as kt, e as O, D as wt, v as W, f as $, X as _t, w as K, s as Ct, E as Ve, q as $t, r as At, x as zt, y as St } from "./index-CBhz79Be.js";
+import { t as It, u as Tt } from "./useResponsive-DfdjqQps.js";
+import { u as Me } from "./useNestedProp-Cg9K3ISG.js";
+import { u as Lt } from "./usePrinter-DNC_9y1d.js";
+import { u as Ft } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Rt } from "./useChartAccessibility-9icAAmYg.js";
+import Ot from "./Title-CPvPrwF4.js";
+import { S as Nt } from "./Slicer-mINKiN6T.js";
+import { u as Pt } from "./useTimeLabels-Mrr0jrpL.js";
+import { _ as Vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Mt = ["id"], Et = ["xmlns", "viewBox"], Bt = ["x", "y", "width", "height"], Ut = { key: 1 }, Dt = ["id"], Wt = ["stop-color"], Gt = ["stop-color"], Ht = ["stop-color"], jt = ["id"], Xt = ["stop-color"], Yt = ["stop-color"], qt = ["stop-color"], Jt = { key: 0 }, Kt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Qt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Zt = { key: 1 }, el = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], tl = ["x", "y", "font-size", "fill", "font-weight"], ll = { key: 2 }, ol = ["transform", "text-anchor", "font-size", "fill", "font-weight"], al = { key: 3 }, sl = ["transform", "text-anchor", "font-size", "fill", "font-weight"], ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], il = { key: 0 }, nl = ["cx", "cy", "r", "fill"], rl = ["cx", "cy", "r", "fill"], dl = { key: 1 }, vl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], yl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], cl = ["x", "y", "height", "width", "fill", "rx"], hl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width"], pl = ["x", "y", "height", "width", "fill", "onMouseover"], fl = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, gl = ["innerHTML"], xl = {
+  __name: "vue-ui-candlestick",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(Ee, { expose: Be }) {
+    const Ue = S(() => import("./vue-ui-accordion-BWiiOpGO.js")), De = S(() => import("./DataTable-CLeYfh93.js")), We = S(() => import("./PackageVersion-Djh3oJFs.js")), Ge = S(() => import("./PenAndPaper-BlF1d4XE.js")), He = S(() => import("./vue-ui-skeleton-Dnw_Mcqb.js")), je = S(() => import("./Tooltip-BiWfcBQk.js")), Xe = S(() => import("./UserOptions-CFllUVQ4.js")), { vue_ui_candlestick: Ye } = xt(), i = Ee, E = f(() => !!i.dataset && i.dataset.length), k = y(mt()), qe = y(null), Q = y(!1), Z = y(""), ee = y(void 0), ne = y(0), B = y(null), re = y(null), de = y(null), ve = y(null), ye = y(null), ce = y(null), G = y(0), he = y(0), pe = y(0), e = f({
+      get: () => me(),
+      set: (t) => t
+    }), { userOptionsVisible: te, setUserOptionsVisibility: fe, keepUserOptionState: ge } = Ft({ config: e.value }), { svgRef: xe } = Rt({ config: e.value.style.title });
+    function me() {
+      const t = Me({
+        userConfig: i.config,
+        defaultConfig: Ye
+      });
+      let o = {};
+      return t.theme ? o = {
+        ...Me({
+          userConfig: bt.vue_ui_candlestick[t.theme] || i.config,
+          defaultConfig: t
+        })
+      } : o = t, i.config && J(i.config, "style.zoom.startIndex") ? o.style.zoom.startIndex = i.config.style.zoom.startIndex : o.style.zoom.startIndex = null, i.config && J(i.config, "style.zoom.endIndex") ? o.style.zoom.endIndex = i.config.style.zoom.endIndex : o.style.zoom.endIndex = null, i.config && J(i.config, "style.layout.grid.yAxis.scale.min") ? o.style.layout.grid.yAxis.scale.min = i.config.style.layout.grid.yAxis.scale.min : o.style.layout.grid.yAxis.scale.min = null, i.config && J(i.config, "style.layout.grid.yAxis.scale.max") ? o.style.layout.grid.yAxis.scale.max = i.config.style.layout.grid.yAxis.scale.max : o.style.layout.grid.yAxis.scale.max = null, o;
+    }
+    Re(() => i.config, (t) => {
+      e.value = me(), te.value = !e.value.userOptions.showOnChartHover, be(), G.value += 1, pe.value += 1, he.value += 1, _.value.showTable = e.value.table.show, _.value.showTooltip = e.value.style.tooltip.show;
+    }, { deep: !0 }), Re(() => i.dataset, (t) => {
+      p.value.start = 0, p.value.end = t.length, G.value += 1;
+    }, { deep: !0 });
+    const c = 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
+    }), A = Oe(null), N = Oe(null);
+    ht(() => {
+      be();
+    });
+    function be() {
+      if (kt(i.dataset) && O({
+        componentName: "VueUiCandlestick",
+        type: "dataset"
+      }), e.value.responsive) {
+        const t = It(() => {
+          const { width: o, height: l } = Tt({
+            chart: B.value,
+            title: e.value.style.title.text ? re.value : null,
+            slicer: ve.value,
+            legend: de.value,
+            source: ye.value,
+            noTitle: ce.value
+          });
+          requestAnimationFrame(() => {
+            c.value.width = o, c.value.height = l, e.value.responsiveProportionalSizing ? (c.value.xAxisFontSize = Ve({
+              relator: Math.min(o, l),
+              adjuster: e.value.style.width,
+              source: e.value.style.layout.grid.xAxis.dataLabels.fontSize,
+              threshold: 6,
+              fallback: 6
+            }), c.value.yAxisFontSize = Ve({
+              relator: Math.min(o, l),
+              adjuster: e.value.style.width,
+              source: e.value.style.layout.grid.yAxis.dataLabels.fontSize,
+              threshold: 6,
+              fallback: 6
+            })) : (c.value.xAxisFontSize = e.value.style.layout.grid.xAxis.dataLabels.fontSize, c.value.yAxisFontSize = e.value.style.layout.grid.yAxis.dataLabels.fontSize);
+          });
+        });
+        A.value && (N.value && A.value.unobserve(N.value), A.value.disconnect()), A.value = new ResizeObserver(t), N.value = B.value.parentNode, A.value.observe(N.value);
+      }
+      Se();
+    }
+    pt(() => {
+      A.value && (N.value && A.value.unobserve(N.value), A.value.disconnect());
+    });
+    const { isPrinting: ke, isImaging: we, generatePdf: _e, generateImage: Ce } = Lt({
+      elementId: `vue-ui-candlestick_${k.value}`,
+      fileName: e.value.style.title.text || "vue-ui-candlestick",
+      options: e.value.userOptions.print
+    }), Je = f(() => e.value.userOptions.show && !e.value.style.title.text), _ = y({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.tooltip.show
+    }), n = f(() => {
+      const { top: t, right: o, bottom: l, left: a } = e.value.style.layout.padding;
+      return {
+        top: t,
+        right: c.value.width - o,
+        left: a,
+        bottom: c.value.height - l,
+        width: c.value.width - a - o,
+        height: c.value.height - t - l
+      };
+    }), U = f(() => i.dataset.length), p = y({
+      start: 0,
+      end: U.value
+    }), $e = f(() => i.dataset.map((t, o) => ({
+      ...t,
+      absoluteIndex: o
+    })).slice(p.value.start, p.value.end)), le = f(() => (i.dataset.forEach((t, o) => {
+      [null, void 0].includes(t[0]) && O({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "period (index 0)",
+        index: o
+      }), [null, void 0].includes(t[1]) && O({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "open (index 1)",
+        index: o
+      }), [null, void 0].includes(t[2]) && O({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "high (index 2)",
+        index: o
+      }), [null, void 0].includes(t[3]) && O({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "low (index 3)",
+        index: o
+      }), [null, void 0].includes(t[4]) && O({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "last (index 4)",
+        index: o
+      }), [null, void 0].includes(t[5]) && O({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "volume (index 5)",
+        index: o
+      });
+    }), $e.value.map((t) => ({
+      absoluteIndex: t.absoluteIndex,
+      period: t[0],
+      open: t[1],
+      high: t[2],
+      low: t[3],
+      last: t[4],
+      volume: t[5]
+    })))), d = f(() => n.value.width / $e.value.length), Ae = f(() => {
+      const t = e.value.style.layout.grid.yAxis.scale.max === null ? Math.max(...le.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: o
+      };
+    }), w = f(() => wt(Ae.value.min, Ae.value.max, e.value.style.layout.grid.yAxis.dataLabels.steps));
+    function H(t, o) {
+      return {
+        ...t,
+        x: W(n.value.left + o * d.value + d.value / 2),
+        y: W(n.value.top + (1 - (t - w.value.min) / (w.value.max - w.value.min)) * n.value.height),
+        value: W(t)
+      };
+    }
+    const m = f(() => le.value.map((t, o) => {
+      const l = H(t.open, o), a = H(t.high, o), C = H(t.low, o), b = H(t.last, o), z = t.last > t.open;
+      return {
+        period: t.period,
+        open: l,
+        high: a,
+        low: C,
+        last: b,
+        volume: t.volume,
+        isBullish: z,
+        absoluteIndex: t.absoluteIndex
+      };
+    }));
+    function Ke(t) {
+      return W((t - w.value.min) / (w.value.max - w.value.min));
+    }
+    const Qe = f(() => w.value.ticks.map((t) => ({
+      y: n.value.bottom - n.value.height * Ke(t),
+      value: W(t)
+    }))), Ze = f(() => le.value.map((t) => t.period)), P = f(() => Pt({
+      values: i.dataset.map((t) => t[0]),
+      maxDatapoints: i.dataset.length,
+      formatter: e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter,
+      start: p.value.start,
+      end: p.value.end
+    })), ze = f(() => e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? {
+      start: P.value.find((t) => t.absoluteIndex === p.value.start).text,
+      end: P.value.find((t) => t.absoluteIndex === p.value.end - 1).text
+    } : {
+      start: i.dataset[p.value.start] ? i.dataset[p.value.start][0] : i.dataset[0][0],
+      end: i.dataset[p.value.end - 1] ? i.dataset[p.value.end - 1][0] : i.dataset.at(-1)[0]
+    }), oe = y(null);
+    function et(t, o) {
+      ee.value = t, oe.value = {
+        datapoint: o,
+        seriesIndex: t,
+        series: m.value,
+        config: e.value
+      };
+      const l = e.value.style.tooltip.customFormat;
+      if (zt(l) && St(() => l({
+        seriesIndex: t,
+        datapoint: o,
+        series: m.value,
+        config: e.value
+      })))
+        Z.value = l({
+          seriesIndex: t,
+          datapoint: o,
+          series: m.value,
+          config: e.value
+        });
+      else if (e.value.style.tooltip.show) {
+        let a = "";
+        const { period: C, open: b, high: z, low: se, last: ue, volume: Y, isBullish: Fe } = m.value[t], { period: ml, open: at, high: st, low: ut, last: it, volume: nt } = e.value.translations, rt = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? P.value[t].text : C;
+        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 ? Fe ? `url(#bullish_gradient_${k.value})` : `url(#bearish_gradient_${k.value})` : Fe ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg>${rt}</div>`, a += `${nt} : <b>${isNaN(Y) ? "-" : Number(Y.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 dt = $({
+          p: e.value.style.tooltip.prefix,
+          v: b.value,
+          s: e.value.style.tooltip.suffix,
+          r: e.value.style.tooltip.roundingValue
+        });
+        a += `<div>${at}: <b>${dt}</b></div>`;
+        const vt = $({
+          p: e.value.style.tooltip.prefix,
+          v: z.value,
+          s: e.value.style.tooltip.suffix,
+          r: e.value.style.tooltip.roundingValue
+        });
+        a += `<div>${st}: <b>${vt}</b></div>`;
+        const yt = $({
+          p: e.value.style.tooltip.prefix,
+          v: se.value,
+          s: e.value.style.tooltip.suffix,
+          r: e.value.style.tooltip.roundingValue
+        });
+        a += `<div>${ut}: <b>${yt}</b></div>`;
+        const ct = $({
+          p: e.value.style.tooltip.prefix,
+          v: ue.value,
+          s: e.value.style.tooltip.suffix,
+          r: e.value.style.tooltip.roundingValue
+        });
+        a += `<div>${it}: <b>${ct}</b></div>`, a += "</div>", Z.value = `<div style="text-align:right">${a}</div>`;
+      }
+      Q.value = !0;
+    }
+    function tt() {
+      Se();
+    }
+    const V = y(null);
+    async function Se() {
+      (e.value.style.zoom.startIndex !== null || e.value.style.zoom.endIndex !== null) && V.value ? (e.value.style.zoom.startIndex !== null && (await D(), await D(), V.value && V.value.setStartValue(e.value.style.zoom.startIndex)), e.value.style.zoom.endIndex !== null && (await D(), await D(), V.value && V.value.setEndValue(lt(e.value.style.zoom.endIndex + 1)))) : (p.value = {
+        start: 0,
+        end: U.value
+      }, G.value += 1);
+    }
+    function lt(t) {
+      const o = U.value;
+      return t > o ? o : t < 0 || e.value.style.zoom.startIndex !== null && t < e.value.style.zoom.startIndex ? e.value.style.zoom.startIndex !== null ? e.value.style.zoom.startIndex + 1 : 1 : t;
+    }
+    function Ie(t = null) {
+      D(() => {
+        const o = [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 = m.value.map((b, z) => [
+          e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? P.value[z].text : b.period,
+          b.open.value,
+          b.high.value,
+          b.low.value,
+          b.last.value,
+          b.volume
+        ]), a = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([o]).concat(l), C = $t(a);
+        t ? t(C) : At({ csvContent: C, title: e.value.style.title.text || "vue-ui-candlestick" });
+      });
+    }
+    const j = f(() => {
+      const t = m.value.map((a, C) => {
+        const b = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? P.value[C].text : a.period, z = $({
+          p: e.value.table.td.prefix,
+          v: a.open.value,
+          s: e.value.table.td.suffix,
+          r: e.value.table.td.roundingValue
+        }), se = $({
+          p: e.value.table.td.prefix,
+          v: a.high.value,
+          s: e.value.table.td.suffix,
+          r: e.value.table.td.roundingValue
+        }), ue = $({
+          p: e.value.table.td.prefix,
+          v: a.low.value,
+          s: e.value.table.td.suffix,
+          r: e.value.table.td.roundingValue
+        }), Y = $({
+          p: e.value.table.td.prefix,
+          v: a.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 ? a.isBullish ? `url(#bullish_gradient_${k.value}` : `url(#bearish_gradient_${k.value})` : a.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg> ${b}`,
+          z,
+          se,
+          ue,
+          Y,
+          `${isNaN(a.volume) ? "-" : a.volume.toLocaleString()}`
+        ];
+      }), o = {
+        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: o, colNames: l };
+    }), M = y(!1);
+    function ot(t) {
+      M.value = t, ne.value += 1;
+    }
+    function Te() {
+      _.value.showTable = !_.value.showTable;
+    }
+    function Le() {
+      _.value.showTooltip = !_.value.showTooltip;
+    }
+    const X = y(!1);
+    function ae() {
+      X.value = !X.value;
+    }
+    return Be({
+      generatePdf: _e,
+      generateCsv: Ie,
+      generateImage: Ce,
+      toggleTable: Te,
+      toggleTooltip: Le,
+      toggleAnnotator: ae
+    }), (t, o) => (s(), u("div", {
+      ref_key: "candlestickChart",
+      ref: B,
+      class: Ne(`vue-ui-candlestick ${M.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: ie(`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_${k.value}`,
+      onMouseenter: o[4] || (o[4] = () => r(fe)(!0)),
+      onMouseleave: o[5] || (o[5] = () => r(fe)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (s(), I(r(Ge), {
+        key: 0,
+        svgRef: r(xe),
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        active: X.value,
+        onClose: ae
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
+      Je.value ? (s(), u("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: ce,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : h("", !0),
+      e.value.style.title.text ? (s(), u("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: re,
+        style: "width:100%;background:transparent"
+      }, [
+        (s(), I(Ot, {
+          key: `title_${pe.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)) : h("", !0),
+      e.value.userOptions.show && E.value && (r(ge) || r(te)) ? (s(), I(r(Xe), {
+        ref_key: "details",
+        ref: qe,
+        key: `user_options_${ne.value}`,
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        isImaging: r(we),
+        isPrinting: r(ke),
+        uid: k.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: M.value,
+        isTooltip: _.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: B.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: X.value,
+        callbacks: e.value.userOptions.callbacks,
+        onToggleFullscreen: ot,
+        onGeneratePdf: r(_e),
+        onGenerateCsv: Ie,
+        onGenerateImage: r(Ce),
+        onToggleTable: Te,
+        onToggleTooltip: Le,
+        onToggleAnnotator: ae,
+        style: ie({
+          visibility: r(ge) ? r(te) ? "visible" : "hidden" : "visible"
+        })
+      }, ft({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: x(({ isOpen: l, color: a }) => [
+            g(t.$slots, "menuIcon", T(L({ isOpen: l, color: a })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: x(() => [
+            g(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: x(() => [
+            g(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: x(() => [
+            g(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: x(() => [
+            g(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: x(() => [
+            g(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: x(({ toggleFullscreen: l, isFullscreen: a }) => [
+            g(t.$slots, "optionFullscreen", T(L({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: x(({ toggleAnnotator: l, isAnnotator: a }) => [
+            g(t.$slots, "optionAnnotator", T(L({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
+      E.value ? (s(), u("svg", {
+        key: 4,
+        ref_key: "svgRef",
+        ref: xe,
+        xmlns: r(_t),
+        class: Ne({ "vue-data-ui-fullscreen--on": M.value, "vue-data-ui-fulscreen--off": !M.value }),
+        viewBox: `0 0 ${c.value.width <= 0 ? 10 : c.value.width} ${c.value.height <= 0 ? 10 : c.value.height}`,
+        style: ie(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
+      }, [
+        Pe(r(We)),
+        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"
+          }
+        }, [
+          g(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Bt)) : h("", !0),
+        m.value.length > 0 ? (s(), u("g", Ut, [
+          v("defs", null, [
+            v("linearGradient", {
+              id: `bearish_gradient_${k.value}`,
+              x2: "0%",
+              y2: "100%"
+            }, [
+              v("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.layout.candle.colors.bearish
+              }, null, 8, Wt),
+              v("stop", {
+                offset: "50%",
+                "stop-color": `${r(K)(e.value.style.layout.candle.colors.bearish, 0.02)}DE`
+              }, null, 8, Gt),
+              v("stop", {
+                offset: "100%",
+                "stop-color": `${r(K)(e.value.style.layout.candle.colors.bearish, 0.05)}66`
+              }, null, 8, Ht)
+            ], 8, Dt),
+            v("linearGradient", {
+              id: `bullish_gradient_${k.value}`,
+              x2: "0%",
+              y2: "100%"
+            }, [
+              v("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.layout.candle.colors.bullish
+              }, null, 8, Xt),
+              v("stop", {
+                offset: "50%",
+                "stop-color": `${r(K)(e.value.style.layout.candle.colors.bullish, 0.02)}DE`
+              }, null, 8, Yt),
+              v("stop", {
+                offset: "100%",
+                "stop-color": `${r(K)(e.value.style.layout.candle.colors.bullish, 0.05)}66`
+              }, null, 8, qt)
+            ], 8, jt)
+          ]),
+          e.value.style.layout.grid.show ? (s(), u("g", Jt, [
+            v("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, Kt),
+            v("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, Qt)
+          ])) : h("", !0),
+          e.value.style.layout.grid.yAxis.dataLabels.show ? (s(), u("g", Zt, [
+            (s(!0), u(F, null, R(Qe.value, (l, a) => (s(), u("g", null, [
+              l.value >= w.value.min && l.value <= w.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, el)) : h("", !0),
+              l.value >= w.value.min && l.value <= w.value.max ? (s(), u("text", {
+                key: 1,
+                x: n.value.left - 8 + e.value.style.layout.grid.yAxis.dataLabels.offsetX,
+                y: l.y + c.value.yAxisFontSize / 3,
+                "font-size": c.value.yAxisFontSize,
+                "text-anchor": "end",
+                fill: e.value.style.layout.grid.yAxis.dataLabels.color,
+                "font-weight": e.value.style.layout.grid.yAxis.dataLabels.bold ? "bold" : "normal"
+              }, q(r($)({
+                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, tl)) : h("", !0)
+            ]))), 256))
+          ])) : h("", !0),
+          e.value.style.layout.grid.xAxis.dataLabels.show && !e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), u("g", ll, [
+            (s(!0), u(F, null, R(Ze.value, (l, a) => (s(), u("g", null, [
+              v("text", {
+                transform: `translate(${n.value.left + d.value * a + d.value / 2}, ${n.value.bottom + c.value.xAxisFontSize * 2 + e.value.style.layout.grid.xAxis.dataLabels.offsetY}), 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": c.value.xAxisFontSize,
+                fill: e.value.style.layout.grid.xAxis.dataLabels.color,
+                "font-weight": e.value.style.layout.grid.xAxis.dataLabels.bold ? "bold" : "normal"
+              }, q(l), 9, ol)
+            ]))), 256))
+          ])) : h("", !0),
+          e.value.style.layout.grid.xAxis.dataLabels.show && e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), u("g", al, [
+            (s(!0), u(F, null, R(P.value, (l, a) => (s(), u("g", null, [
+              v("text", {
+                transform: `translate(${n.value.left + d.value * a + d.value / 2}, ${n.value.bottom + c.value.xAxisFontSize * 2 + e.value.style.layout.grid.xAxis.dataLabels.offsetY}), 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": c.value.xAxisFontSize,
+                fill: e.value.style.layout.grid.xAxis.dataLabels.color,
+                "font-weight": e.value.style.layout.grid.xAxis.dataLabels.bold ? "bold" : "normal"
+              }, q(l.text), 9, sl)
+            ]))), 256))
+          ])) : h("", !0),
+          v("g", null, [
+            (s(!0), u(F, null, R(m.value, (l, a) => (s(), u("g", null, [
+              v("line", {
+                x1: l.open.x,
+                x2: l.open.x,
+                y1: l.high.y,
+                y2: l.low.y,
+                stroke: e.value.style.layout.wick.stroke,
+                "stroke-width": e.value.style.layout.wick.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, ul),
+              e.value.style.layout.wick.extremity.shape === "circle" ? (s(), u("g", il, [
+                v("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,
+                  fill: e.value.style.layout.wick.extremity.color
+                }, null, 8, nl),
+                v("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,
+                  fill: e.value.style.layout.wick.extremity.color
+                }, null, 8, rl)
+              ])) : h("", !0),
+              e.value.style.layout.wick.extremity.shape === "line" ? (s(), u("g", dl, [
+                v("line", {
+                  x1: 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,
+                  x2: 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,
+                  y1: l.high.y,
+                  y2: l.high.y,
+                  stroke: e.value.style.layout.wick.extremity.color,
+                  "stroke-width": e.value.style.layout.wick.strokeWidth,
+                  "stroke-linecap": "round"
+                }, null, 8, vl),
+                v("line", {
+                  x1: 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,
+                  x2: 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,
+                  y1: l.low.y,
+                  y2: l.low.y,
+                  stroke: e.value.style.layout.wick.extremity.color,
+                  "stroke-width": e.value.style.layout.wick.strokeWidth,
+                  "stroke-linecap": "round"
+                }, null, 8, yl)
+              ])) : h("", !0)
+            ]))), 256))
+          ]),
+          v("g", null, [
+            (s(!0), u(F, null, R(m.value, (l, a) => (s(), u("rect", {
+              x: l.open.x - d.value / 2 + d.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: d.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : d.value * e.value.style.layout.candle.widthRatio,
+              fill: e.value.style.layout.candle.gradient.underlayer,
+              rx: e.value.style.layout.candle.borderRadius,
+              stroke: "none"
+            }, null, 8, cl))), 256)),
+            (s(!0), u(F, null, R(m.value, (l, a) => (s(), u("rect", {
+              x: l.open.x - d.value / 2 + d.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: 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_${k.value})` : e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.gradient.show ? `url(#bearish_gradient_${k.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"
+            }, null, 8, hl))), 256))
+          ]),
+          v("g", null, [
+            (s(!0), u(F, null, R(m.value, (l, a) => (s(), u("rect", {
+              x: n.value.left + a * d.value,
+              y: n.value.top,
+              height: n.value.height <= 0 ? 1e-4 : n.value.height,
+              width: d.value <= 0 ? 1e-4 : d.value,
+              fill: ee.value === a ? r(Ct)(e.value.style.layout.selector.color, e.value.style.layout.selector.opacity) : "transparent",
+              onMouseover: (C) => et(a, l),
+              onMouseleave: o[0] || (o[0] = (C) => {
+                ee.value = void 0, Q.value = !1;
+              })
+            }, null, 40, pl))), 256))
+          ])
+        ])) : h("", !0),
+        g(t.$slots, "svg", { svg: c.value }, void 0, !0)
+      ], 14, Et)) : h("", !0),
+      t.$slots.watermark ? (s(), u("div", fl, [
+        g(t.$slots, "watermark", T(L({ isPrinting: r(ke) || r(we) })), void 0, !0)
+      ])) : h("", !0),
+      E.value ? h("", !0) : (s(), I(r(He), {
+        key: 6,
+        config: {
+          type: "candlesticks",
+          style: {
+            backgroundColor: e.value.style.backgroundColor,
+            candlesticks: {
+              axis: {
+                color: "#CCCCCC"
+              },
+              candle: {
+                color: "#CCCCCC"
+              }
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      e.value.style.zoom.show && E.value ? (s(), u("div", {
+        key: 7,
+        ref_key: "chartSlicer",
+        ref: ve
+      }, [
+        (s(), I(Nt, {
+          ref_key: "slicerComponent",
+          ref: V,
+          key: `slicer_${G.value}`,
+          background: e.value.style.zoom.color,
+          borderColor: e.value.style.backgroundColor,
+          fontSize: e.value.style.zoom.fontSize,
+          useResetSlot: e.value.style.zoom.useResetSlot,
+          labelLeft: ze.value.start,
+          labelRight: ze.value.end,
+          textColor: e.value.style.color,
+          inputColor: e.value.style.zoom.color,
+          selectColor: e.value.style.zoom.highlightColor,
+          max: U.value,
+          min: 0,
+          valueStart: p.value.start,
+          valueEnd: p.value.end,
+          start: p.value.start,
+          "onUpdate:start": o[1] || (o[1] = (l) => p.value.start = l),
+          end: p.value.end,
+          "onUpdate:end": o[2] || (o[2] = (l) => p.value.end = l),
+          refreshStartPoint: e.value.style.zoom.startIndex !== null ? e.value.style.zoom.startIndex : 0,
+          refreshEndPoint: e.value.style.zoom.endIndex !== null ? e.value.style.zoom.endIndex + 1 : U.value,
+          enableRangeHandles: e.value.style.zoom.enableRangeHandles,
+          enableSelectionDrag: e.value.style.zoom.enableSelectionDrag,
+          onReset: tt
+        }, {
+          "reset-action": x(({ reset: l }) => [
+            g(t.$slots, "reset-action", T(L({ reset: l })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag"]))
+      ], 512)) : h("", !0),
+      v("div", {
+        ref_key: "chartLegend",
+        ref: de
+      }, [
+        g(t.$slots, "legend", { legend: m.value }, void 0, !0)
+      ], 512),
+      t.$slots.source ? (s(), u("div", {
+        key: 8,
+        ref_key: "source",
+        ref: ye,
+        dir: "auto"
+      }, [
+        g(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      Pe(r(je), {
+        show: _.value.showTooltip && Q.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: B.value,
+        content: Z.value,
+        isFullscreen: M.value,
+        isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function"
+      }, {
+        "tooltip-before": x(() => [
+          g(t.$slots, "tooltip-before", T(L({ ...oe.value })), void 0, !0)
+        ]),
+        "tooltip-after": x(() => [
+          g(t.$slots, "tooltip-after", T(L({ ...oe.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
+      E.value ? (s(), I(r(Ue), {
+        key: 9,
+        hideDetails: "",
+        config: {
+          open: _.value.showTable,
+          maxHeight: 1e4,
+          body: {
+            backgroundColor: e.value.style.backgroundColor,
+            color: e.value.style.color
+          },
+          head: {
+            backgroundColor: e.value.style.backgroundColor,
+            color: e.value.style.color
+          }
+        }
+      }, {
+        content: x(() => [
+          (s(), I(r(De), {
+            key: `table_${he.value}`,
+            colNames: j.value.colNames,
+            head: j.value.head,
+            body: j.value.body,
+            config: j.value.config,
+            title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? ` : ${e.value.style.title.subtitle.text}` : ""}`,
+            onClose: o[3] || (o[3] = (l) => _.value.showTable = !1)
+          }, {
+            th: x(({ th: l }) => [
+              gt(q(l), 1)
+            ]),
+            td: x(({ td: l }) => [
+              v("div", { innerHTML: l }, null, 8, gl)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : h("", !0)
+    ], 46, Mt));
+  }
+}, Ll = /* @__PURE__ */ Vt(xl, [["__scopeId", "data-v-7e73d8b0"]]);
+export {
+  Ll as default
+};