vue-data-ui 2.3.2 → 2.3.4

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

@@ -0,0 +1,657 @@
+import { computed as h, ref as v, onMounted as Ae, onBeforeUnmount as Fe, openBlock as u, createElementBlock as s, normalizeClass as ve, normalizeStyle as H, createVNode as q, createCommentVNode as y, createBlock as O, unref as x, createSlots as Le, withCtx as f, renderSlot as m, normalizeProps as P, guardReactiveProps as M, createElementVNode as n, Fragment as N, renderList as S, toDisplayString as F, createTextVNode as Re, nextTick as Ve } from "vue";
+import { u as Ie, c as Be, t as Oe, o as Pe, e as C, z as Me, X as Ue, s as U, A as Ee, r as We, v as De, w as Ge, n as Xe, q as je, B as ye } from "./index-uOtklCCx.js";
+import { t as He, u as qe } from "./useResponsive-NZB-WLRF.js";
+import { _ as Ye } from "./Title-2iks1ziC.js";
+import { u as Je, U as Ke } from "./usePrinter-B6xQCyL-.js";
+import { _ as Qe } from "./Tooltip-C3phqKuU.js";
+import { D as Ze } from "./DataTable-CwaOlAsy.js";
+import et from "./vue-ui-skeleton-BM9rwmxY.js";
+import { S as tt } from "./Slicer-Bxg5niHl.js";
+import lt from "./vue-ui-accordion-HJPf7My0.js";
+import { u as ce } from "./useNestedProp-BgWkUab_.js";
+import { _ as ot } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const at = ["id"], ut = ["xmlns", "viewBox"], st = { key: 0 }, it = ["id"], nt = ["stop-color"], rt = ["stop-color"], dt = ["stop-color"], vt = ["id"], yt = ["stop-color"], ct = ["stop-color"], ht = ["stop-color"], pt = { key: 0 }, gt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ft = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], bt = { key: 1 }, xt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], mt = ["x", "y", "font-size", "fill", "font-weight"], kt = { key: 2 }, wt = ["transform", "text-anchor", "font-size", "fill", "font-weight"], $t = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], _t = { key: 0 }, Ct = ["cx", "cy", "r", "fill"], Nt = ["cx", "cy", "r", "fill"], St = { key: 1 }, zt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Tt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], At = ["x", "y", "height", "width", "fill", "rx"], Ft = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width"], Lt = ["x", "y", "height", "width", "fill", "onMouseover"], Rt = ["innerHTML"], Vt = {
+  __name: "vue-ui-candlestick",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  setup($, { expose: he }) {
+    const k = $, { vue_ui_candlestick: pe } = Ie(), z = h(() => !!k.dataset && k.dataset.length), b = v(Be()), ge = v(null), E = v(!1), W = v(""), D = v(void 0), Y = v(0), J = v(0), T = v(null), K = v(null), Q = v(null), Z = v(null), e = h(() => {
+      const l = ce({
+        userConfig: k.config,
+        defaultConfig: pe
+      });
+      return l.theme ? {
+        ...ce({
+          userConfig: Oe.vue_ui_candlestick[l.theme] || k.config,
+          defaultConfig: l
+        })
+      } : l;
+    }), d = v({
+      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
+    }), L = v(null);
+    Ae(() => {
+      if (Pe(k.dataset) && C({
+        componentName: "VueUiCandlestick",
+        type: "dataset"
+      }), e.value.responsive) {
+        const l = He(() => {
+          const { width: a, height: t } = qe({
+            chart: T.value,
+            title: e.value.style.title.text ? K.value : null,
+            slicer: Z.value,
+            legend: Q.value
+          });
+          d.value.width = a, d.value.height = t, d.value.xAxisFontSize = ye({
+            relator: Math.min(a, t),
+            adjuster: e.value.style.width,
+            source: e.value.style.layout.grid.xAxis.dataLabels.fontSize,
+            threshold: 6,
+            fallback: 6
+          }), d.value.yAxisFontSize = ye({
+            relator: Math.min(a, t),
+            adjuster: e.value.style.width,
+            source: e.value.style.layout.grid.yAxis.dataLabels.fontSize,
+            threshold: 6,
+            fallback: 6
+          });
+        });
+        L.value = new ResizeObserver(l), L.value.observe(T.value.parentNode);
+      }
+    }), Fe(() => {
+      L.value && L.value.disconnect();
+    });
+    const { isPrinting: fe, isImaging: be, generatePdf: ee, generateImage: te } = Je({
+      elementId: `vue-ui-candlestick_${b.value}`,
+      fileName: e.value.style.title.text || "vue-ui-candlestick"
+    }), w = v({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.tooltip.show
+    }), i = h(() => {
+      const { top: l, right: a, bottom: t, left: o } = e.value.style.layout.padding;
+      return {
+        top: l,
+        right: d.value.width - a,
+        left: o,
+        bottom: d.value.height - t,
+        width: d.value.width - o - a,
+        height: d.value.height - l - t
+      };
+    }), G = h(() => k.dataset.length), c = v({
+      start: 0,
+      end: G.value
+    }), le = h(() => k.dataset.slice(c.value.start, c.value.end)), X = h(() => (k.dataset.forEach((l, a) => {
+      [null, void 0].includes(l[0]) && C({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "period (index 0)",
+        index: a
+      }), [null, void 0].includes(l[1]) && C({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "open (index 1)",
+        index: a
+      }), [null, void 0].includes(l[2]) && C({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "high (index 2)",
+        index: a
+      }), [null, void 0].includes(l[3]) && C({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "low (index 3)",
+        index: a
+      }), [null, void 0].includes(l[4]) && C({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "last (index 4)",
+        index: a
+      }), [null, void 0].includes(l[5]) && C({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "volume (index 5)",
+        index: a
+      });
+    }), le.value.map((l) => ({
+      period: l[0],
+      open: l[1],
+      high: l[2],
+      low: l[3],
+      last: l[4],
+      volume: l[5]
+    })))), r = h(() => i.value.width / le.value.length), oe = h(() => ({
+      max: Math.max(...X.value.map((l) => l.high)),
+      min: 0
+    })), _ = h(() => Me(oe.value.min, oe.value.max, e.value.style.layout.grid.yAxis.dataLabels.steps));
+    function R(l, a) {
+      return {
+        ...l,
+        x: i.value.left + a * r.value + r.value / 2,
+        y: i.value.top + (1 - l / _.value.max) * i.value.height,
+        value: l
+      };
+    }
+    const p = h(() => X.value.map((l, a) => {
+      const t = R(l.open, a), o = R(l.high, a), g = R(l.low, a), I = R(l.last, a), B = l.last > l.open;
+      return {
+        period: l.period,
+        open: t,
+        high: o,
+        low: g,
+        last: I,
+        volume: l.volume,
+        isBullish: B
+      };
+    }));
+    function xe(l) {
+      return l / _.value.max;
+    }
+    const me = h(() => _.value.ticks.map((l) => ({
+      y: i.value.bottom - i.value.height * xe(l),
+      value: l
+    }))), ke = h(() => X.value.map((l) => l.period)), j = v(null);
+    function we(l, a) {
+      D.value = l, j.value = {
+        datapoint: a,
+        seriesIndex: l,
+        series: p.value,
+        config: e.value
+      };
+      const t = e.value.style.tooltip.customFormat;
+      if (De(t) && Ge(() => t({
+        seriesIndex: l,
+        datapoint: a,
+        series: p.value,
+        config: e.value
+      })))
+        W.value = t({
+          seriesIndex: l,
+          datapoint: a,
+          series: p.value,
+          config: e.value
+        });
+      else if (e.value.style.tooltip.show) {
+        let o = "";
+        const { period: g, open: I, high: B, low: ie, last: ne, volume: re, isBullish: de } = p.value[l], { period: It, open: Ce, high: Ne, low: Se, last: ze, volume: Te } = e.value.translations;
+        o += `<div><svg style="margin-right:6px" viewBox="0 0 12 12" height="12" width="12"><rect x="0" y="0" height="12" width="12" rx="${e.value.style.layout.candle.borderRadius * 3}" stroke="${e.value.style.layout.candle.stroke}" stroke-width="${e.value.style.layout.candle.strokeWidth}" 
+                fill="${e.value.style.layout.candle.gradient.show ? de ? `url(#bullish_gradient_${b.value})` : `url(#bearish_gradient_${b.value})` : de ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg>${g}</div>`, o += `${Te} : <b>${isNaN(re) ? "-" : Number(re.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}">`, o += `<div>${Ce}: <b>${e.value.style.tooltip.prefix} ${isNaN(I.value) ? "-" : Number(I.value.toFixed(e.value.style.tooltip.roundingValue)).toLocaleString()} ${e.value.style.tooltip.suffix}</b></div>`, o += `<div>${Ne}: <b>${e.value.style.tooltip.prefix} ${isNaN(B.value) ? "-" : Number(B.value.toFixed(e.value.style.tooltip.roundingValue)).toLocaleString()} ${e.value.style.tooltip.suffix}</b></div>`, o += `<div>${Se}: <b>${e.value.style.tooltip.prefix} ${isNaN(ie.value) ? "-" : Number(ie.value.toFixed(e.value.style.tooltip.roundingValue)).toLocaleString()} ${e.value.style.tooltip.suffix}</b></div>`, o += `<div>${ze}: <b>${e.value.style.tooltip.prefix} ${isNaN(ne.value) ? "-" : Number(ne.value.toFixed(e.value.style.tooltip.roundingValue)).toLocaleString()} ${e.value.style.tooltip.suffix}</b></div>`, o += "</div>", W.value = `<div style="text-align:right">${o}</div>`;
+      }
+      E.value = !0;
+    }
+    function $e() {
+      c.value = {
+        start: 0,
+        end: G.value
+      }, J.value += 1;
+    }
+    function ae() {
+      Ve(() => {
+        const 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], a = p.value.map((g) => [
+          g.period,
+          g.open.value,
+          g.high.value,
+          g.low.value,
+          g.last.value,
+          g.volume
+        ]), t = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([l]).concat(a), o = Xe(t);
+        je({ csvContent: o, title: e.value.style.title.text || "vue-ui-candlestick" });
+      });
+    }
+    const V = h(() => {
+      const l = p.value.map((o) => [
+        `<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_${b.value}` : `url(#bearish_gradient_${b.value})` : o.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg> ${o.period}`,
+        `${e.value.table.td.prefix} ${isNaN(o.open.value) ? "-" : Number(o.open.value.toFixed(e.value.table.td.roundingValue)).toLocaleString()} ${e.value.table.td.suffix}`,
+        `${e.value.table.td.prefix} ${isNaN(o.high.value) ? "-" : Number(o.high.value.toFixed(e.value.table.td.roundingValue)).toLocaleString()} ${e.value.table.td.suffix}`,
+        `${e.value.table.td.prefix} ${isNaN(o.low.value) ? "-" : Number(o.low.value.toFixed(e.value.table.td.roundingValue)).toLocaleString()} ${e.value.table.td.suffix}`,
+        `${e.value.table.td.prefix} ${isNaN(o.last.value) ? "-" : Number(o.last.value.toFixed(e.value.table.td.roundingValue)).toLocaleString()} ${e.value.table.td.suffix}`,
+        `${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
+      }, t = [
+        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: t, body: l, config: a, colNames: t };
+    }), A = v(!1);
+    function _e(l) {
+      A.value = l, Y.value += 1;
+    }
+    function ue() {
+      w.value.showTable = !w.value.showTable;
+    }
+    function se() {
+      w.value.showTooltip = !w.value.showTooltip;
+    }
+    return he({
+      generatePdf: ee,
+      generateCsv: ae,
+      generateImage: te,
+      toggleTable: ue,
+      toggleTooltip: se
+    }), (l, a) => (u(), s("div", {
+      ref_key: "candlestickChart",
+      ref: T,
+      class: ve(`vue-ui-candlestick ${A.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: H(`position:relative;font-family:${e.value.style.fontFamily}; text-align:center;${e.value.style.title.text ? "" : "padding-top:36px"};background:${e.value.style.backgroundColor}; ${e.value.responsive ? "height: 100%" : ""}`),
+      id: `vue-ui-candlestick_${b.value}`
+    }, [
+      e.value.style.title.text ? (u(), s("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: K,
+        style: H(`width:100%;background:${e.value.style.backgroundColor}`)
+      }, [
+        q(Ye, {
+          config: {
+            title: {
+              cy: "candlestick-div-title",
+              ...e.value.style.title
+            },
+            subtitle: {
+              cy: "candlestick-div-subtitle",
+              ...e.value.style.title.subtitle
+            }
+          }
+        }, null, 8, ["config"])
+      ], 4)) : y("", !0),
+      e.value.userOptions.show && z.value ? (u(), O(Ke, {
+        ref_key: "details",
+        ref: ge,
+        key: `user_options_${Y.value}`,
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        isImaging: x(be),
+        isPrinting: x(fe),
+        uid: b.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: A.value,
+        isTooltip: w.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: T.value,
+        onToggleFullscreen: _e,
+        onGeneratePdf: x(ee),
+        onGenerateCsv: ae,
+        onGenerateImage: x(te),
+        onToggleTable: ue,
+        onToggleTooltip: se
+      }, Le({ _: 2 }, [
+        l.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: f(() => [
+            m(l.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: f(() => [
+            m(l.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        l.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: f(() => [
+            m(l.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        l.$slots.optionImg ? {
+          name: "optionImg",
+          fn: f(() => [
+            m(l.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        l.$slots.optionTable ? {
+          name: "optionTable",
+          fn: f(() => [
+            m(l.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        l.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: f(({ toggleFullscreen: t, isFullscreen: o }) => [
+            m(l.$slots, "optionFullscreen", P(M({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : y("", !0),
+      z.value ? (u(), s("svg", {
+        key: 2,
+        xmlns: x(Ue),
+        class: ve({ "vue-data-ui-fullscreen--on": A.value, "vue-data-ui-fulscreen--off": !A.value }),
+        viewBox: `0 0 ${d.value.width <= 0 ? 10 : d.value.width} ${d.value.height <= 0 ? 10 : d.value.height}`,
+        style: H(`max-width:100%;overflow:visible;background:${e.value.style.backgroundColor};color:${e.value.style.color}`)
+      }, [
+        p.value.length > 0 ? (u(), s("g", st, [
+          n("defs", null, [
+            n("linearGradient", {
+              id: `bearish_gradient_${b.value}`,
+              x2: "0%",
+              y2: "100%"
+            }, [
+              n("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.layout.candle.colors.bearish
+              }, null, 8, nt),
+              n("stop", {
+                offset: "50%",
+                "stop-color": `${x(U)(e.value.style.layout.candle.colors.bearish, 0.02)}DE`
+              }, null, 8, rt),
+              n("stop", {
+                offset: "100%",
+                "stop-color": `${x(U)(e.value.style.layout.candle.colors.bearish, 0.05)}66`
+              }, null, 8, dt)
+            ], 8, it),
+            n("linearGradient", {
+              id: `bullish_gradient_${b.value}`,
+              x2: "0%",
+              y2: "100%"
+            }, [
+              n("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.layout.candle.colors.bullish
+              }, null, 8, yt),
+              n("stop", {
+                offset: "50%",
+                "stop-color": `${x(U)(e.value.style.layout.candle.colors.bullish, 0.02)}DE`
+              }, null, 8, ct),
+              n("stop", {
+                offset: "100%",
+                "stop-color": `${x(U)(e.value.style.layout.candle.colors.bullish, 0.05)}66`
+              }, null, 8, ht)
+            ], 8, vt)
+          ]),
+          e.value.style.layout.grid.show ? (u(), s("g", pt, [
+            n("line", {
+              x1: i.value.left,
+              x2: i.value.left,
+              y1: i.value.top,
+              y2: i.value.bottom,
+              stroke: e.value.style.layout.grid.stroke,
+              "stroke-width": e.value.style.layout.grid.strokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, gt),
+            n("line", {
+              x1: i.value.left,
+              x2: i.value.right,
+              y1: i.value.bottom,
+              y2: i.value.bottom,
+              stroke: e.value.style.layout.grid.stroke,
+              "stroke-width": e.value.style.layout.grid.strokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, ft)
+          ])) : y("", !0),
+          e.value.style.layout.grid.yAxis.dataLabels.show ? (u(), s("g", bt, [
+            (u(!0), s(N, null, S(me.value, (t, o) => (u(), s("g", null, [
+              t.value >= _.value.min && t.value <= _.value.max ? (u(), s("line", {
+                key: 0,
+                x1: i.value.left,
+                x2: i.value.left - 5,
+                y1: t.y,
+                y2: t.y,
+                stroke: e.value.style.layout.grid.stroke,
+                "stroke-width": e.value.style.layout.grid.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, xt)) : y("", !0),
+              t.value >= _.value.min && t.value <= _.value.max ? (u(), s("text", {
+                key: 1,
+                x: i.value.left - 8 + e.value.style.layout.grid.yAxis.dataLabels.offsetX,
+                y: t.y + d.value.yAxisFontSize / 3,
+                "font-size": d.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"
+              }, F(e.value.style.layout.grid.yAxis.dataLabels.prefix) + " " + F(x(Ee)(t.value) ? t.value.toFixed(e.value.style.layout.grid.yAxis.dataLabels.roundingValue) : "") + " " + F(e.value.style.layout.grid.yAxis.dataLabels.suffix), 9, mt)) : y("", !0)
+            ]))), 256))
+          ])) : y("", !0),
+          e.value.style.layout.grid.xAxis.dataLabels.show ? (u(), s("g", kt, [
+            (u(!0), s(N, null, S(ke.value, (t, o) => (u(), s("g", null, [
+              n("text", {
+                transform: `translate(${i.value.left + r.value * o + r.value / 2}, ${i.value.bottom + d.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": d.value.xAxisFontSize,
+                fill: e.value.style.layout.grid.xAxis.dataLabels.color,
+                "font-weight": e.value.style.layout.grid.xAxis.dataLabels.bold ? "bold" : "normal"
+              }, F(t), 9, wt)
+            ]))), 256))
+          ])) : y("", !0),
+          n("g", null, [
+            (u(!0), s(N, null, S(p.value, (t, o) => (u(), s("g", null, [
+              n("line", {
+                x1: t.open.x,
+                x2: t.open.x,
+                y1: t.high.y,
+                y2: t.low.y,
+                stroke: e.value.style.layout.wick.stroke,
+                "stroke-width": e.value.style.layout.wick.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, $t),
+              e.value.style.layout.wick.extremity.shape === "circle" ? (u(), s("g", _t, [
+                n("circle", {
+                  cx: t.high.x,
+                  cy: t.high.y,
+                  r: e.value.style.layout.wick.extremity.size === "auto" ? r.value / 20 : e.value.style.layout.wick.extremity.size,
+                  fill: e.value.style.layout.wick.extremity.color
+                }, null, 8, Ct),
+                n("circle", {
+                  cx: t.low.x,
+                  cy: t.low.y,
+                  r: e.value.style.layout.wick.extremity.size === "auto" ? r.value / 20 : e.value.style.layout.wick.extremity.size,
+                  fill: e.value.style.layout.wick.extremity.color
+                }, null, 8, Nt)
+              ])) : y("", !0),
+              e.value.style.layout.wick.extremity.shape === "line" ? (u(), s("g", St, [
+                n("line", {
+                  x1: t.high.x - (e.value.style.layout.wick.extremity.size === "auto" ? r.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
+                  x2: t.high.x + (e.value.style.layout.wick.extremity.size === "auto" ? r.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
+                  y1: t.high.y,
+                  y2: t.high.y,
+                  stroke: e.value.style.layout.wick.extremity.color,
+                  "stroke-width": e.value.style.layout.wick.strokeWidth,
+                  "stroke-linecap": "round"
+                }, null, 8, zt),
+                n("line", {
+                  x1: t.low.x - (e.value.style.layout.wick.extremity.size === "auto" ? r.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
+                  x2: t.low.x + (e.value.style.layout.wick.extremity.size === "auto" ? r.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
+                  y1: t.low.y,
+                  y2: t.low.y,
+                  stroke: e.value.style.layout.wick.extremity.color,
+                  "stroke-width": e.value.style.layout.wick.strokeWidth,
+                  "stroke-linecap": "round"
+                }, null, 8, Tt)
+              ])) : y("", !0)
+            ]))), 256))
+          ]),
+          n("g", null, [
+            (u(!0), s(N, null, S(p.value, (t, o) => (u(), s("rect", {
+              x: t.open.x - r.value / 2 + r.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
+              y: t.isBullish ? t.last.y : t.open.y,
+              height: Math.abs(t.last.y - t.open.y) <= 0 ? 1e-4 : Math.abs(t.last.y - t.open.y),
+              width: r.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : r.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, At))), 256)),
+            (u(!0), s(N, null, S(p.value, (t, o) => (u(), s("rect", {
+              x: t.open.x - r.value / 2 + r.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
+              y: t.isBullish ? t.last.y : t.open.y,
+              height: Math.abs(t.last.y - t.open.y) <= 0 ? 1e-4 : Math.abs(t.last.y - t.open.y),
+              width: r.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : r.value * e.value.style.layout.candle.widthRatio,
+              fill: t.isBullish ? e.value.style.layout.candle.gradient.show ? `url(#bullish_gradient_${b.value})` : e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.gradient.show ? `url(#bearish_gradient_${b.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, Ft))), 256))
+          ]),
+          n("g", null, [
+            (u(!0), s(N, null, S(p.value, (t, o) => (u(), s("rect", {
+              x: i.value.left + o * r.value,
+              y: i.value.top,
+              height: i.value.height <= 0 ? 1e-4 : i.value.height,
+              width: r.value <= 0 ? 1e-4 : r.value,
+              fill: D.value === o ? `${e.value.style.layout.selector.color}${x(We)[e.value.style.layout.selector.opacity]}` : "transparent",
+              onMouseover: (g) => we(o, t),
+              onMouseleave: a[0] || (a[0] = (g) => {
+                D.value = void 0, E.value = !1;
+              })
+            }, null, 40, Lt))), 256))
+          ])
+        ])) : y("", !0),
+        m(l.$slots, "svg", { svg: d.value }, void 0, !0)
+      ], 14, ut)) : y("", !0),
+      z.value ? y("", !0) : (u(), O(et, {
+        key: 3,
+        config: {
+          type: "candlesticks",
+          style: {
+            backgroundColor: e.value.style.backgroundColor,
+            candlesticks: {
+              axis: {
+                color: "#CCCCCC"
+              },
+              candle: {
+                color: "#CCCCCC"
+              }
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      e.value.style.zoom.show && z.value ? (u(), s("div", {
+        key: 4,
+        ref_key: "chartSlicer",
+        ref: Z
+      }, [
+        (u(), O(tt, {
+          key: `slicer_${J.value}`,
+          background: e.value.style.zoom.color,
+          borderColor: e.value.style.backgroundColor,
+          fontSize: e.value.style.zoom.fontSize,
+          useResetSlot: e.value.style.zoom.useResetSlot,
+          labelLeft: $.dataset[c.value.start] ? $.dataset[c.value.start][0] : $.dataset[0][0],
+          labelRight: $.dataset[c.value.end - 1] ? $.dataset[c.value.end - 1][0] : $.dataset.at(-1)[0],
+          textColor: e.value.style.color,
+          inputColor: e.value.style.zoom.color,
+          selectColor: e.value.style.zoom.highlightColor,
+          max: G.value,
+          min: 0,
+          valueStart: c.value.start,
+          valueEnd: c.value.end,
+          start: c.value.start,
+          "onUpdate:start": a[1] || (a[1] = (t) => c.value.start = t),
+          end: c.value.end,
+          "onUpdate:end": a[2] || (a[2] = (t) => c.value.end = t),
+          onReset: $e
+        }, {
+          "reset-action": f(({ reset: t }) => [
+            m(l.$slots, "reset-action", P(M({ reset: t })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end"]))
+      ], 512)) : y("", !0),
+      n("div", {
+        ref_key: "chartLegend",
+        ref: Q
+      }, [
+        m(l.$slots, "legend", { legend: p.value }, void 0, !0)
+      ], 512),
+      q(Qe, {
+        show: w.value.showTooltip && E.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,
+        parent: T.value,
+        content: W.value,
+        isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function"
+      }, {
+        "tooltip-before": f(() => [
+          m(l.$slots, "tooltip-before", P(M({ ...j.value })), void 0, !0)
+        ]),
+        "tooltip-after": f(() => [
+          m(l.$slots, "tooltip-after", P(M({ ...j.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "parent", "content", "isCustom"]),
+      z.value ? (u(), O(lt, {
+        key: 5,
+        hideDetails: "",
+        config: {
+          open: w.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: f(() => [
+          q(Ze, {
+            colNames: V.value.colNames,
+            head: V.value.head,
+            body: V.value.body,
+            config: V.value.config,
+            title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? ` : ${e.value.style.title.subtitle.text}` : ""}`,
+            onClose: a[3] || (a[3] = (t) => w.value.showTable = !1)
+          }, {
+            th: f(({ th: t }) => [
+              Re(F(t), 1)
+            ]),
+            td: f(({ td: t }) => [
+              n("div", { innerHTML: t }, null, 8, Rt)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"])
+        ]),
+        _: 1
+      }, 8, ["config"])) : y("", !0)
+    ], 14, at));
+  }
+}, qt = /* @__PURE__ */ ot(Vt, [["__scopeId", "data-v-0ed64fca"]]);
+export {
+  qt as default
+};