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