vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,552 lines (1,551 loc) • 66.8 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, Bt as n, D as r, Jt as i, Vt as a, X as o, _ as s, b as c, c as l, ct as ee, dt as te, jt as ne, q as re, qt as ie, t as ae, tt as u, xt as oe } from "./lib-Bttd6u5E.js";
import { n as se, t as ce } from "./useHints-Dq_w2E8B.js";
import { n as le, r as ue, t as de } from "./useTimeLabels-d2f-W1L4.js";
import { t as fe } from "./useConfig-D3scuR88.js";
import { t as pe } from "./usePrinter-DN5bYhTG.js";
import { n as me, t as he } from "./BaseScanner-DZvpgOjM.js";
import { t as ge } from "./useSvgExport-DH-FfcqQ.js";
import { t as _e } from "./useNestedProp-vPNvh7rV.js";
import { t as ve } from "./useThemeCheck-C43Tcqmk.js";
import { t as ye } from "./useTransitions-g_zBREk2.js";
import { t as be } from "./useTimeLabelCollider-AEcY4Ioe.js";
import { t as xe } from "./img-Bnokohej.js";
import { n as Se } from "./Title-BE3qg9xl.js";
import { t as Ce } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as we, t as Te } from "./useResponsive-ZtArZtUf.js";
import { t as Ee } from "./DefGrad-DVBqDjhO.js";
import { t as De } from "./SlicerPreview-wUw1hFwe.js";
import { t as Oe } from "./A11yDataTable-DdRsVULz.js";
import { t as ke } from "./useUserOptionState-DK-_1ddE.js";
import { t as Ae } from "./useChartAccessibility-DYqac8yF.js";
import { t as je } from "./vue_ui_candlestick-J8jmJvxP.js";
import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as Me, createTextVNode as Ne, createVNode as Pe, defineAsyncComponent as _, guardReactiveProps as v, mergeProps as Fe, nextTick as Ie, normalizeClass as y, normalizeProps as b, normalizeStyle as Le, onBeforeUnmount as Re, onMounted as ze, openBlock as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as Be, shallowRef as Ve, toDisplayString as T, toRefs as He, unref as E, watch as Ue, watchEffect as We, withCtx as D } from "vue";
//#region src/components/vue-ui-candlestick.vue
var Ge = /* @__PURE__ */ e({ default: () => Tt }), Ke = ["id"], qe = ["id"], Je = { style: { position: "relative" } }, Ye = [
"xmlns",
"aria-describedby",
"viewBox"
], Xe = [
"x",
"y",
"width",
"height"
], Ze = { key: 1 }, Qe = { key: 0 }, $e = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], et = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], tt = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], nt = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width",
"stroke-dasharray"
], rt = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], it = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], at = [
"transform",
"text-anchor",
"font-size",
"fill",
"font-weight"
], ot = [
"transform",
"text-anchor",
"font-size",
"fill",
"font-weight"
], st = [
"transform",
"text-anchor",
"font-size",
"fill",
"font-weight"
], ct = [
"x",
"y",
"width",
"height",
"fill",
"rx"
], lt = { key: 0 }, ut = [
"cx",
"cy",
"r",
"fill"
], dt = [
"cx",
"cy",
"r",
"fill"
], ft = { key: 1 }, pt = [
"x",
"y",
"width",
"height",
"rx",
"fill"
], mt = [
"x",
"y",
"width",
"height",
"fill",
"rx"
], ht = [
"x",
"y",
"height",
"width",
"fill",
"rx"
], gt = [
"x",
"y",
"height",
"width",
"fill",
"rx",
"stroke",
"stroke-width"
], _t = ["d", "stroke"], vt = [
"x",
"y",
"height",
"width",
"fill",
"onMouseover",
"onMouseleave",
"onClick"
], yt = ["data-start", "data-end"], bt = {
key: 0,
style: {
position: "absolute",
top: "100%",
left: "0",
width: "100%"
},
"data-dom-to-png-ignore": "",
"aria-hidden": "true"
}, xt = {
key: 5,
class: "vue-data-ui-watermark"
}, St = ["d", "stroke"], Ct = [
"d",
"stroke",
"stroke-width"
], wt = ["innerHTML"], Tt = /*#__PURE__*/ Ce({
__name: "vue-ui-candlestick",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
},
selectedXIndex: {
type: Number,
default: void 0
}
},
emits: ["selectX", "copyAlt"],
setup(e, { expose: Ce, emit: Ge }) {
let Tt = _(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), Et = _(() => import("./Tooltip-DhjyfHwz.js")), Dt = _(() => import("./vue-ui-accordion-BxGriZik.js").then((e) => e.n)), Ot = _(() => import("./DataTable-BbKgJ5UI.js")), kt = _(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), At = _(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), jt = _(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), Mt = _(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_candlestick: Nt } = fe(), { isThemeValid: Pt, warnInvalidTheme: Ft } = ve(), O = e, It = Ge, Lt = f(() => !!O.dataset && O.dataset.length), k = S(!1), Rt = S(null), A = S(re()), zt = S(!1), Bt = S(""), j = S(void 0), Vt = S(0), M = S(null), Ht = S(null), Ut = S(null), Wt = S(null), Gt = S(null), Kt = S(null), qt = S(0), Jt = S(0), Yt = S(0), Xt = S(null), Zt = S(null), Qt = S(null), $t = S(null), en = S(null), tn = S(!1), nn = S(!1), N = S(null), rn = S({
x: 0,
y: 0
}), an = S("pointer"), on = S(!1), P = S(gn());
se({
config: () => P.value,
dataset: () => O.dataset,
component: "VueUiCandlestick",
rules: [ce.emptyArray, {
test: (e) => e.length > 200,
message: [
"👀 Dataset has > 200 points, which can cause performance issues. Consider:",
"",
"▶️ Adding date inputs to constraint the dataset into a specific timeframe",
"",
"▶️ Aggregate the data to larger time series to reduce the number of datapoints."
]
}]
});
let { transitionEnabled: sn } = ye({
config: () => P.value.transitions,
dataset: () => O.dataset
}), cn = f(() => P.value.userOptions.useCursorPointer), ln = f(() => i({
defaultConfig: {
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
}
}
},
userConfig: P.value.skeletonConfig ?? {}
})), { loading: F, FINAL_DATASET: I, manualLoading: un } = me({
...He(O),
FINAL_CONFIG: P,
prepareConfig: gn,
callback: () => {
Promise.resolve().then(async () => {
await lr();
});
},
skeletonDataset: O.config?.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: i({
defaultConfig: P.value,
userConfig: ln.value
})
}), { userOptionsVisible: dn, setUserOptionsVisibility: fn, keepUserOptionState: pn } = ke({ config: P.value }), { svgRef: L } = Ae({ config: P.value.style.title });
function mn() {
fn(!0);
}
function hn() {
fn(!1), It("selectX", {
seriesIndex: null,
datapoint: null
}), j.value = null;
}
function gn() {
let e = _e({
userConfig: O.config,
defaultConfig: Nt
}), t = {}, n = e.theme;
if (n) if (!Pt.value(e)) Ft(e), t = e;
else {
let r = _e({
userConfig: je[n] || O.config,
defaultConfig: e
});
t = { ..._e({
userConfig: O.config,
defaultConfig: r
}) };
}
else t = e;
return t;
}
Ue(() => O.config, (e) => {
F.value || (P.value = gn()), dn.value = !P.value.userOptions.showOnChartHover, _n(), qt.value += 1, Yt.value += 1, Jt.value += 1, H.value.showTable = P.value.table.show, H.value.showTooltip = P.value.style.tooltip.show, An();
}, { deep: !0 }), Ue(() => O.dataset, (e) => {
Array.isArray(e) && e.length > 0 && (un.value = !1), ar();
}, { deep: !0 });
let R = S({
height: P.value.style.height,
width: P.value.style.width,
xAxisFontSize: P.value.style.layout.grid.xAxis.dataLabels.fontSize,
yAxisFontSize: P.value.style.layout.grid.yAxis.dataLabels.fontSize
}), z = Ve(null), B = Ve(null);
ze(() => {
_n();
});
let V = f(() => !!P.value.debug);
function _n() {
if (ne(O.dataset) && (u({
componentName: "VueUiCandlestick",
type: "dataset",
debug: V.value
}), un.value = !0), ne(O.dataset) || (un.value = P.value.loading), setTimeout(() => {
k.value = !0;
}, 10), P.value.responsive) {
let e = we(() => {
k.value = !1;
let { width: e, height: t } = Te({
chart: M.value,
title: P.value.style.title.text ? Ht.value : null,
slicer: P.value.style.zoom.show && G.value > 6 ? Wt.value.$el : null,
legend: Ut.value,
source: Gt.value,
noTitle: Kt.value
});
requestAnimationFrame(() => {
R.value.width = e, R.value.height = t - 12, P.value.responsiveProportionalSizing ? (R.value.xAxisFontSize = ie({
relator: Math.min(e, t),
adjuster: P.value.style.width,
source: P.value.style.layout.grid.xAxis.dataLabels.fontSize,
threshold: 6,
fallback: 6
}), R.value.yAxisFontSize = ie({
relator: Math.min(e, t),
adjuster: P.value.style.width,
source: P.value.style.layout.grid.yAxis.dataLabels.fontSize,
threshold: 6,
fallback: 6
})) : (R.value.xAxisFontSize = P.value.style.layout.grid.xAxis.dataLabels.fontSize, R.value.yAxisFontSize = P.value.style.layout.grid.yAxis.dataLabels.fontSize), Rt.value && clearTimeout(Rt.value), Rt.value = setTimeout(() => {
k.value = !0;
}, 10);
});
});
z.value && (B.value && z.value.unobserve(B.value), z.value.disconnect()), z.value = new ResizeObserver(e), B.value = M.value.parentNode, z.value.observe(B.value);
}
lr();
}
Re(() => {
z.value && (B.value && z.value.unobserve(B.value), z.value.disconnect());
});
let { isPrinting: vn, isImaging: yn, generatePdf: bn, generateImage: xn } = pe({
elementId: `vue-ui-candlestick_${A.value}`,
fileName: P.value.style.title.text || "vue-ui-candlestick",
options: P.value.userOptions.print
}), Sn = f(() => P.value.userOptions.show && !P.value.style.title.text), H = S({
showTable: P.value.table.show,
showTooltip: P.value.style.tooltip.show
}), Cn = S(0), wn = we((e) => {
Cn.value = e;
}, 100);
We((e) => {
let t = Zt.value;
if (!t) return;
let n = new ResizeObserver((e) => {
wn(e[0].contentRect.height);
});
n.observe(t), e(() => n.disconnect());
}), Re(() => {
Cn.value = 0;
});
let Tn = f(() => {
let e = 0;
return Zt.value && (e = Cn.value + R.value.xAxisFontSize), e;
}), U = f(() => P.value.style.layout.grid.yAxis.position === "right");
function En() {
let e = P.value.style.layout.grid.yAxis.dataLabels.offsetX;
Xt.value && (e = Array.from(Xt.value.querySelectorAll("text")).reduce((e, t) => {
let n = t.getComputedTextLength();
return n > e ? n : e;
}, 0));
let t = P.value.style.layout.grid.yAxis.axisName?.show ? P.value.style.layout.grid.yAxis.axisName.fontSize + P.value.style.layout.grid.yAxis.axisName.offsetX : 0, n = e + 13 + t;
return {
left: U.value ? 0 : n,
right: U.value ? n : 0,
scaleLabelsWidth: e,
yAxisNameWidth: t,
crosshair: 13
};
}
let W = f(() => {
let { top: e, right: t, bottom: n, left: r } = P.value.style.layout.padding, i = En();
return {
top: e + 12,
right: R.value.width - t - i.right,
left: r + i.left,
bottom: R.value.height - n - Tn.value,
width: R.value.width - r - t - i.left - i.right,
height: R.value.height - e - n - Tn.value - 12,
scaleLabelsWidth: i.scaleLabelsWidth,
yAxisNameWidth: i.yAxisNameWidth,
crosshair: i.crosshair
};
}), Dn = f(() => {
let { left: e, top: t, width: n, height: r } = W.value, i = K.value.start, a = K.value.end - i, o = n / a, s = q.value.start - i, c = q.value.end - i, l = Math.max(0, Math.min(a, s)), ee = Math.max(0, Math.min(a, c));
return {
x: e + l * o,
y: t,
width: (ee - l) * o,
height: r,
fill: P.value.style.zoom.preview.fill,
stroke: P.value.style.zoom.preview.stroke,
"stroke-width": P.value.style.zoom.preview.strokeWidth,
"stroke-dasharray": P.value.style.zoom.preview.strokeDasharray,
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: {
pointerEvents: "none",
transition: "none !important",
animation: "none !important"
}
};
}), G = f(() => I.value.length), K = S({
start: 0,
end: G.value
}), q = S({
start: 0,
end: G.value
}), On = f(() => P.value.style.zoom.preview.enable && (q.value.start !== K.value.start || q.value.end !== K.value.end));
function kn(e, t) {
q.value[e] = t;
}
function An() {
let e = Math.max(0, Math.min(K.value.start ?? 0, G.value - 1)), t = Math.max(e + 1, Math.min(K.value.end ?? G.value, G.value));
(!Number.isFinite(e) || !Number.isFinite(t) || t <= e) && (e = 0, t = G.value), K.value.start = e, K.value.end = t, q.value.start = e, q.value.end = t, Wt.value && (Wt.value.setStartValue(e), Wt.value.setEndValue(t));
}
let jn = f(() => I.value.map((e, t) => ({
...e,
absoluteIndex: t
}))), Mn = f(() => jn.value.slice(K.value.start, K.value.end)), J = f(() => (I.value.forEach((e, t) => {
[null, void 0].includes(e[0]) && u({
componentName: "VueUiCandlestick",
type: "datasetAttribute",
property: "period (index 0)",
index: t,
debug: V.value
}), [null, void 0].includes(e[1]) && u({
componentName: "VueUiCandlestick",
type: "datasetAttribute",
property: "open (index 1)",
index: t,
debug: V.value
}), [null, void 0].includes(e[2]) && u({
componentName: "VueUiCandlestick",
type: "datasetAttribute",
property: "high (index 2)",
index: t,
debug: V.value
}), [null, void 0].includes(e[3]) && u({
componentName: "VueUiCandlestick",
type: "datasetAttribute",
property: "low (index 3)",
index: t,
debug: V.value
}), [null, void 0].includes(e[4]) && u({
componentName: "VueUiCandlestick",
type: "datasetAttribute",
property: "close (index 4)",
index: t,
debug: V.value
}), [null, void 0].includes(e[5]) && u({
componentName: "VueUiCandlestick",
type: "datasetAttribute",
property: "volume (index 5)",
index: t,
debug: V.value
});
}), Mn.value.map((e) => ({
absoluteIndex: e.absoluteIndex,
period: e[0],
open: e[1],
high: e[2],
low: e[3],
close: e[4],
volume: e[5]
})))), Nn = f(() => jn.value.map((e) => ({
absoluteIndex: e.absoluteIndex,
period: e[0],
open: e[1],
high: e[2],
low: e[3],
close: e[4],
volume: e[5]
}))), Y = f(() => W.value.width / Mn.value.length), Pn = f(() => ({
max: P.value.style.layout.grid.yAxis.scale.max === null ? Math.max(...J.value.map((e) => e.high)) : P.value.style.layout.grid.yAxis.scale.max,
min: P.value.style.layout.grid.yAxis.scale.min === null ? 0 : P.value.style.layout.grid.yAxis.scale.min
})), X = f(() => s(Pn.value.min, Pn.value.max, P.value.style.layout.grid.yAxis.dataLabels.steps));
function Fn(e, t, n = null, r = null) {
return {
...e,
x: c(W.value.left + t * Y.value + Y.value / 2),
y: c(W.value.top + (1 - (e - X.value.min) / (X.value.max - X.value.min)) * W.value.height),
value: c(e),
isMax: e === n,
isMin: e === r
};
}
let Z = f(() => {
let e = {
o: Math.max(...J.value.map((e) => e.open)),
h: Math.max(...J.value.map((e) => e.high)),
l: Math.max(...J.value.map((e) => e.low)),
c: Math.max(...J.value.map((e) => e.low))
}, t = {
o: Math.min(...J.value.map((e) => e.open)),
h: Math.min(...J.value.map((e) => e.high)),
l: Math.min(...J.value.map((e) => e.low)),
c: Math.min(...J.value.map((e) => e.low))
}, n = Math.max(...J.value.map((e) => e.volume)), r = Math.min(...J.value.map((e) => e.volume));
return J.value.map((i, a) => {
let o = Fn(i.open, a, e.o, t.o), s = Fn(i.high, a, e.h, t.h), c = Fn(i.low, a, e.l, t.l), l = Fn(i.close, a, e.c, t.c), ee = i.close > i.open, te = i.volume === n, ne = i.volume === r;
return {
period: i.period,
open: o,
high: s,
low: c,
close: l,
volume: i.volume,
isBullish: ee,
absoluteIndex: i.absoluteIndex,
isMaxVolume: te,
isMinVolume: ne
};
});
});
function In({ item: e, index: t, minimapH: n, unitW: r }) {
let i = P.value.style.layout.grid.yAxis.scale.min ?? 0, a = P.value.style.layout.grid.yAxis.scale.max ?? Math.max(...I.value.map((e) => e[2]));
return {
...e,
x: c(t * r),
y: c((1 - (e - i) / (a - i)) * n),
value: c(e)
};
}
let Ln = f(() => ({ minimapH: e, unitW: t }) => Nn.value.map((n, r) => {
let i = In({
item: n.open,
index: r,
minimapH: e,
unitW: t
}), a = In({
item: n.high,
index: r,
minimapH: e,
unitW: t
}), o = In({
item: n.low,
index: r,
minimapH: e,
unitW: t
}), s = In({
item: n.close,
index: r,
minimapH: e,
unitW: t
}), c = n.close > n.open;
return {
period: n.period,
open: i,
high: a,
low: o,
close: s,
volume: n.volume,
isBullish: c,
absoluteIndex: n.absoluteIndex
};
})), Rn = f(() => P.value.style.zoom.minimap.show ? [{
name: "",
series: I.value.map((e) => e[2]),
color: "#000000",
isVisible: !0
}] : []);
function zn(e) {
return c((e - X.value.min) / (X.value.max - X.value.min));
}
let Bn = f(() => X.value.ticks.map((e) => ({
y: W.value.bottom - W.value.height * zn(e),
value: c(e)
}))), Vn = f(() => J.value.map((e) => e.period)), Q = S([]), Hn = S([]), Un = 0;
We(() => {
let e = ++Un;
(async () => {
let t = await de({
values: I.value.map((e) => e[0]),
maxDatapoints: I.value.length,
formatter: P.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter,
start: K.value.start,
end: K.value.end
});
e === Un && (Q.value = t);
})();
});
let Wn = 0;
We(() => {
let e = ++Wn;
(async () => {
let t = await de({
values: I.value.map((e) => e[0]),
maxDatapoints: I.value.length,
formatter: P.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter,
start: 0,
end: G.value
});
e === Wn && (Hn.value = t);
})();
});
let Gn = f(() => {
let e = P.value.style.layout.grid.xAxis.dataLabels.modulo;
return Q.value.length ? Math.min(e, [...new Set(Q.value.map((e) => e.text))].length) : e;
}), Kn = S({
months: [],
shortMonths: [],
days: [],
shortDays: []
}), qn = 0;
We(() => {
let e = ++qn, t = P.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter;
(async () => {
let n = await ue(t.locale).catch(() => ue("en"));
e === qn && (Kn.value = n.data);
})();
});
let Jn = f(() => {
let e = P.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter, t = le({
useUTC: e.useUTC,
locale: Kn.value,
januaryAsYear: e.januaryAsYear
});
return (e, n) => {
let r = I.value.map((e) => e[0])?.[e];
return r == null ? "" : t.formatDate(new Date(r), n);
};
}), Yn = f(() => (I.value.map((e) => e[0]) || []).map((e, t) => ({
text: Jn.value(t, P.value.style.tooltip.timeFormat),
absoluteIndex: t
}))), Xn = f(() => (I.value.map((e) => e[0]) || []).map((e, t) => ({
text: Jn.value(t, P.value.style.zoom.timeFormat),
absoluteIndex: t
}))), Zn = f(() => {
let e = P.value.style.layout.grid.xAxis.dataLabels, t = Q.value || [], n = Hn.value || [], r = K.value.start ?? 0, i = j.value, a = G.value, o = t.map((e) => e?.text ?? ""), s = n.map((e) => e?.text ?? "");
return l(!!e.showOnlyFirstAndLast, !!e.showOnlyAtModulo, Math.max(1, Gn.value || 1), o, s, r, i, a);
}), Qn = f(() => P.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? {
start: Q.value.find((e) => e.absoluteIndex === K.value.start)?.text ?? "",
end: Q.value.find((e) => e.absoluteIndex === K.value.end - 1)?.text ?? ""
} : {
start: I.value[K.value.start] ? I.value[K.value.start][0] : I.value[0][0],
end: I.value[K.value.end - 1] ? I.value[K.value.end - 1][0] : I.value.at(-1)[0]
}), $n = S(null);
function er(e, t) {
P.value.events.datapointClick && P.value.events.datapointClick({
datapoint: t,
seriesIndex: e + K.value.start
});
}
function tr(e, t) {
P.value.events.datapointLeave && P.value.events.datapointLeave({
datapoint: t,
seriesIndex: e + K.value.start
}), j.value = void 0, zt.value = !1, N.value = null, an.value = "pointer";
}
Ue(() => O.selectedXIndex, (e) => {
if ([null, void 0].includes(O.selectedXIndex)) {
j.value = null;
return;
}
let t = e - K.value.start;
t < 0 || e >= K.value.end ? j.value = null : j.value = t ?? null;
}, { immediate: !0 });
function nr(e, t, n = "pointer") {
P.value.events.datapointEnter && P.value.events.datapointEnter({
datapoint: t,
seriesIndex: e + K.value.start
}), j.value = e, N.value = e, an.value = n, $n.value = {
datapoint: t,
seriesIndex: e,
series: Z.value,
config: P.value
}, jr({
seriesIndex: e,
datapoint: t
});
let r = P.value.style.tooltip.customFormat;
if (oe(r) && ee(() => r({
seriesIndex: e,
datapoint: t,
series: Z.value,
config: P.value
}))) Bt.value = r({
seriesIndex: e,
datapoint: t,
series: Z.value,
config: P.value
});
else if (P.value.style.tooltip.show) {
let n = "", { period: r, open: i, high: a, low: s, close: c, volume: l, isBullish: ee } = Z.value[e], { period: te, open: ne, high: re, low: ie, close: ae, volume: u } = P.value.translations, oe = P.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? P.value.style.tooltip.useDefaultTimeFormat ? Q.value[e].text : Yn.value[e].text : r;
n += `<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="${P.value.style.layout.candle.borderRadius * 3}" stroke="${P.value.style.layout.candle.stroke}" stroke-width="${P.value.style.layout.candle.strokeWidth}"
fill="${P.value.style.layout.candle.gradient.show ? ee ? `url(#bullish_gradient_${A.value})` : `url(#bearish_gradient_${A.value})` : ee ? P.value.style.layout.candle.colors.bullish : P.value.style.layout.candle.colors.bearish}"/></svg>${oe}</div>`, n += `${u} : <b>${isNaN(l) ? "-" : Number(l.toFixed(P.value.style.tooltip.roundingValue)).toLocaleString()}</b>`, n += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${P.value.style.tooltip.borderColor}">`;
let se = o({
p: P.value.style.tooltip.prefix,
v: i.value,
s: P.value.style.tooltip.suffix,
r: P.value.style.tooltip.roundingValue
}), ce = o({
p: P.value.style.tooltip.prefix,
v: a.value,
s: P.value.style.tooltip.suffix,
r: P.value.style.tooltip.roundingValue
}), le = o({
p: P.value.style.tooltip.prefix,
v: s.value,
s: P.value.style.tooltip.suffix,
r: P.value.style.tooltip.roundingValue
}), ue = o({
p: P.value.style.tooltip.prefix,
v: c.value,
s: P.value.style.tooltip.suffix,
r: P.value.style.tooltip.roundingValue
});
P.value.style.tooltip.showChart ? n += `<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="${t.isBullish ? P.value.style.layout.candle.colors.bullish : P.value.style.layout.candle.colors.bearish}" stroke-width="2" stroke-linecap="round" />
${t.isBullish ? `
<line x1="45" x2="50" y1="65" y2="65" stroke="${P.value.style.layout.candle.colors.bullish}" stroke-width="1.5" stroke-linecap="round" />
<line x1="50" x2="55" y1="35" y2="35" stroke="${P.value.style.layout.candle.colors.bullish}" stroke-width="1.5" stroke-linecap="round" />
<text x="38" y="70" text-anchor="end" fill="${P.value.style.tooltip.color}">${se}</text>
<text x="62" y="40" text-anchor="start" fill="${P.value.style.tooltip.color}">${ue}</text>
` : `
<line x1="45" x2="50" y1="35" y2="35" stroke="${P.value.style.layout.candle.colors.bearish}" stroke-width="1.5" stroke-linecap="round" />
<line x1="50" x2="55" y1="65" y2="65" stroke="${P.value.style.layout.candle.colors.bearish}" stroke-width="1.5" stroke-linecap="round" />
<text x="40" y="40" text-anchor="end" fill="${P.value.style.tooltip.color}">${se}</text>
<text x="60" y="70" text-anchor="start" fill="${P.value.style.tooltip.color}">${ue}</text>
`}
<text x="50" y="13" text-anchor="middle" fill="${P.value.style.tooltip.color}">${ce}</text>
<text x="50" y="97" text-anchor="middle" fill="${P.value.style.tooltip.color}">${le}</text>
<g>
</svg>
<div>
` : (n += `<div>${ne}: <b>${se}</b></div>`, n += `<div>${re}: <b>${ce}</b></div>`, n += `<div>${ie}: <b>${le}</b></div>`, n += `<div>${ae}: <b>${ue}</b></div>`), n += "</div>", Bt.value = `<div style="text-align:right">${n}</div>`;
}
zt.value = !0;
}
let rr = S(null);
function ir() {
return new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(() => e())));
}
Re(() => {
rr.value && cancelAnimationFrame(rr.value);
});
async function ar() {
lr(), await Ie(), rr.value && cancelAnimationFrame(rr.value), rr.value = requestAnimationFrame(async () => {
await ir(), lr();
});
}
let or = S(!1), sr = S(!1), cr = S(!1);
function lr() {
if (!or.value) {
or.value = !0;
try {
let { startIndex: e, endIndex: t } = P.value.style.zoom, n = G.value, r = e ?? 0, i = t == null ? n : Math.min(ur(t + 1), n);
cr.value = !0, K.value.start = r, K.value.end = i, q.value.start = r, q.value.end = i, An(), sr.value = !0;
} finally {
queueMicrotask(() => {
cr.value = !1;
}), or.value = !1;
}
}
}
function ur(e) {
let t = G.value;
return e > t ? t : e < 0 || e < K.value.start ? P.value.style.zoom.startIndex === null ? 1 : P.value.style.zoom.startIndex + 1 : e;
}
function dr(e = null) {
Ie(() => {
let n = [
P.value.translations.period,
P.value.translations.open,
P.value.translations.high,
P.value.translations.low,
P.value.translations.close,
P.value.translations.volume
], i = Z.value.map((e, t) => [
P.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? Q.value[t].text : e.period,
e.open.value,
e.high.value,
e.low.value,
e.close.value,
e.volume
]), a = [
[P.value.style.title.text],
[P.value.style.title.subtitle.text],
[
[""],
[""],
[""]
],
n
].concat(i), o = r(a);
e ? e(o) : t({
csvContent: o,
title: P.value.style.title.text || "vue-ui-candlestick"
});
});
}
let fr = f(() => {
let e = Z.value.map((e, t) => {
let n = P.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? Q.value?.[t]?.text ?? "" : e.period, r = o({
p: P.value.table.td.prefix,
v: e.open.value,
s: P.value.table.td.suffix,
r: P.value.table.td.roundingValue
}), i = o({
p: P.value.table.td.prefix,
v: e.high.value,
s: P.value.table.td.suffix,
r: P.value.table.td.roundingValue
}), a = o({
p: P.value.table.td.prefix,
v: e.low.value,
s: P.value.table.td.suffix,
r: P.value.table.td.roundingValue
}), s = o({
p: P.value.table.td.prefix,
v: e.close.value,
s: P.value.table.td.suffix,
r: P.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="${P.value.style.layout.candle.borderRadius * 3}" fill="${P.value.style.layout.candle.gradient.show ? e.isBullish ? `url(#bullish_gradient_${A.value})` : `url(#bearish_gradient_${A.value})` : e.isBullish ? P.value.style.layout.candle.colors.bullish : P.value.style.layout.candle.colors.bearish}"/></svg> ${n}`,
r,
i,
a,
s,
`${isNaN(e.volume) ? "-" : e.volume.toLocaleString()}`
];
}), t = Z.value.map((e, t) => [
P.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? Q.value?.[t]?.text ?? "" : e.period,
o({
p: P.value.table.td.prefix,
v: e.open.value,
s: P.value.table.td.suffix,
r: P.value.table.td.roundingValue
}),
o({
p: P.value.table.td.prefix,
v: e.high.value,
s: P.value.table.td.suffix,
r: P.value.table.td.roundingValue
}),
o({
p: P.value.table.td.prefix,
v: e.low.value,
s: P.value.table.td.suffix,
r: P.value.table.td.roundingValue
}),
o({
p: P.value.table.td.prefix,
v: e.close.value,
s: P.value.table.td.suffix,
r: P.value.table.td.roundingValue
}),
`${isNaN(e.volume) ? "-" : e.volume}`
]), n = {
th: {
backgroundColor: P.value.table.th.backgroundColor,
color: P.value.table.th.color,
outline: P.value.table.th.outline
},
td: {
backgroundColor: P.value.table.td.backgroundColor,
color: P.value.table.td.color,
outline: P.value.table.td.outline
},
breakpoint: P.value.table.responsiveBreakpoint
}, r = [
P.value.translations.period,
P.value.translations.open,
P.value.translations.high,
P.value.translations.low,
P.value.translations.last,
P.value.translations.volume
];
return {
head: r,
body: e,
bodyA11y: t,
config: n,
colNames: r
};
}), $ = S(!1);
function pr(e) {
$.value = e, Vt.value += 1;
}
function mr() {
H.value.showTable = !H.value.showTable;
}
function hr() {
H.value.showTooltip = !H.value.showTooltip;
}
let gr = S(!1);
function _r() {
gr.value = !gr.value;
}
async function vr({ scale: e = 2 } = {}) {
if (!M.value) return;
let { imageUri: t, base64: n } = await xe({
domElement: M.value,
base64: !0,
img: !0,
scale: e
}), r = M.value.getBoundingClientRect(), i = {
width: r.width,
height: r.height,
aspectRatio: r.height ? r.width / r.height : 0
}, a = await te(t, e) ?? i;
return {
imageUri: t,
base64: n,
title: P.value.style.title.text,
...a
};
}
let yr = f(() => R.value.width), br = f(() => R.value.height);
be({
timeLabelsEls: Zt,
timeLabels: Q,
slicer: K,
configRef: P,
rotationPath: [
"style",
"layout",
"grid",
"xAxis",
"dataLabels",
"rotation"
],
autoRotatePath: [
"style",
"layout",
"grid",
"xAxis",
"dataLabels",
"autoRotate",
"enable"
],
isAutoSize: !1,
rotation: P.value.style.layout.grid.xAxis.dataLabels.autoRotate.angle,
width: yr,
height: br
}), Ue(P, () => {
H.value = {
showTable: P.value.table.show,
showTooltip: P.value.style.tooltip.show
};
}, { immediate: !0 });
let xr = f(() => {
let e = P.value.table.useDialog && !P.value.table.show, t = H.value.showTable;
return {
component: e ? Mt : Dt,
title: `${P.value.style.title.text}${P.value.style.title.subtitle.text ? `: ${P.value.style.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: P.value.table.th.backgroundColor,
color: P.value.table.th.color,
headerColor: P.value.table.th.color,
headerBg: P.value.table.th.backgroundColor,
isFullscreen: $.value,
fullscreenParent: M.value,
forcedWidth: Math.min(800, window.innerWidth * .8),
isCursorPointer: cn.value
} : {
hideDetails: !0,
config: {
open: t,
maxHeight: 1e4,
body: {
backgroundColor: P.value.style.backgroundColor,
color: P.value.style.color
},
head: {
backgroundColor: P.value.style.backgroundColor,
color: P.value.style.color
}
}
}
};
});
Ue(() => H.value.showTable, (e) => {
P.value.table.show || (e && P.value.table.useDialog && Qt.value ? Qt.value.open() : "close" in Qt.value && Qt.value.close());
});
function Sr() {
H.value.showTable = !1, $t.value && $t.value.setTableIconState(!1);
}
let Cr = f(() => P.value.style.backgroundColor), wr = f(() => P.value.style.title), { exportSvg: Tr, getSvg: Er } = ge({
svg: L,
title: wr,
backgroundColor: Cr
});
async function Dr({ isCb: e }) {
nn.value = !0, await Ie();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await Er();
await Promise.resolve(P.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(Tr());
} finally {
nn.value = !1;
}
}
function Or(e) {
en.value = e;
}
function kr(e) {
or.value || cr.value || e !== K.value.start && (K.value.start = e, q.value.start = e, An());
}
function Ar(e) {
if (or.value || cr.value) return;
let t = ur(e);
t !== K.value.end && (K.value.end = t, q.value.end = t, An());
}
function jr({ seriesIndex: e, datapoint: t }) {
let n = K.value.start + e;
It("selectX", {
dataset: t,
index: n,
indexLabel: ""
});
}
function Mr(e) {
if (e?.stage === "start") {
tn.value = !0;
return;
}
if (e?.stage === "end") {
tn.value = !1;
return;
}
xn();
}
async function Nr() {
if (It("copyAlt", {
config: P.value,
dataset: Z.value
}), !P.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(P.value.userOptions.callbacks.altCopy({
config: P.value,
dataset: Z.value
}));
}
function Pr() {
N.value = null, on.value = !0;
}
function Fr() {
N.value = null, an.value = "pointer", zt.value = !1, j.value = void 0, on.value = !1;
}
function Ir(e) {
if (!L.value || gr.value || document.activeElement !== L.value || !Z.value.length) return;
let t = e.key === "ArrowLeft", n = e.key === "ArrowRight", r = e.key === "Enter" || e.key === " ", i = e.key === "Escape";
if (!t && !n && !r && !i) return;
if (e.preventDefault(), e.stopPropagation(), i) {
N.value = null, an.value = "pointer", zt.value = !1, j.value = void 0;
return;
}
if (r) {
if (N.value === null) return;
let e = Z.value[N.value];
if (!e) return;
er(N.value, e);
return;
}
let a = N.value, o = j.value, s = a !== null && a >= 0 && a < Z.value.length, c = o != null && o >= 0 && o < Z.value.length;
s ? n ? (a += 1, a >= Z.value.length && (a = 0)) : t && (--a, a < 0 && (a = Z.value.length - 1)) : c ? (a = n ? o + 1 : o - 1, a >= Z.value.length && (a = 0), a < 0 && (a = Z.value.length - 1)) : a = n ? 0 : Z.value.length - 1;
let l = Z.value[a];
l && (Lr(a), nr(a, l, "keyboard"));
}
function Lr(e) {
if (!Number.isFinite(e) || !L.value) return;
let t = W.value.left + Y.value * e + Y.value / 2, n = W.value.top + W.value.height / 2, r = L.value.getBoundingClientRect();
rn.value = {
x: r.left + t / R.value.width * r.width,
y: r.top + n / R.value.height * r.height
};
}
let Rr = f(() => ({
headers: fr.value?.colNames ?? [],
rows: fr.value?.bodyA11y ?? []
}));
return Ce({
getImage: vr,
generatePdf: bn,
generateCsv: dr,
generateImage: xn,
generateSvg: Dr,
toggleTable: mr,
toggleTooltip: hr,
toggleAnnotator: _r,
toggleFullscreen: pr,
copyAlt: Nr
}), (e, t) => (x(), h("div", {
ref_key: "candlestickChart",
ref: M,
class: y(`vue-data-ui-component vue-ui-candlestick ${$.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${P.value.useCssAnimation ? "" : "vue-ui-dna"}`),
style: Le(`position:relative;font-family:${P.value.style.fontFamily}; text-align:center;background:${P.value.style.backgroundColor}; ${P.value.responsive ? "height: 100%" : ""}`),
id: `vue-ui-candlestick_${A.value}`,
onMouseenter: mn,
onMouseleave: hn
}, [
g("div", {
id: `chart-instructions-${A.value}`,
class: "sr-only"
}, [g("p", null, T(P.value.a11y.translations.keyboardNavigation), 1)], 8, qe),
Rr.value?.rows?.length ? (x(), p(Oe, {
key: 0,
uid: A.value,
head: Rr.value.headers,
body: Rr.value.rows,
notice: P.value.a11y.translations.tableAvailable,
caption: P.value.a11y.translations.tableCaption
}, null, 8, [
"uid",
"head",
"body",
"notice",
"caption"
])) : m("", !0),
P.value.userOptions.buttons.annotator ? (x(), p(E(kt), {
key: 1,
svgRef: E(L),
backgroundColor: P.value.style.backgroundColor,
color: P.value.style.color,
active: gr.value,
isCursorPointer: cn.value,
onClose: _r
}, {
"annotator-action-close": D(() => [w(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": D(({ color: t }) => [w(e.$slots, "annotator-action-color", b(v({ color: t })), void 0, !0)]),
"annotator-action-draw": D(({ mode: t }) => [w(e.$slots, "annotator-action-draw", b(v({ mode: t })), void 0, !0)]),
"annotator-action-undo": D(({ disabled: t }) => [w(e.$slots, "annotator-action-undo", b(v({ disabled: t })), void 0, !0)]),
"annotator-action-redo": D(({ disabled: t }) => [w(e.$slots, "annotator-action-redo", b(v({ disabled: t })), void 0, !0)]),
"annotator-action-delete": D(({ disabled: t }) => [w(e.$slots, "annotator-action-delete", b(v({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : m("", !0),
Sn.value ? (x(), h("div", {
key: 2,
ref_key: "noTitle",
ref: Kt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : m("", !0),
P.value.style.title.text ? (x(), h("div", {
key: 3,
ref_key: "chartTitle",
ref: Ht,
style: "width:100%;background:transparent"
}, [(x(), p(Se, {
key: `title_${Yt.value}`,
config: {
title: {
cy: "candlestick-div-title",
...P.value.style.title
},
subtitle: {
cy: "candlestick-div-subtitle",
...P.value.style.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : m("", !0),
P.value.userOptions.show && Lt.value && (E(pn) || E(dn)) ? (x(), p(E(At), {
ref_key: "userOptionsRef",
ref: $t,
key: `user_options_${Vt.value}`,
backgroundColor: P.value.style.backgroundColor,
color: P.value.style.color,
isImaging: E(yn),
isPrinting: E(vn),
uid: A.value,
hasTooltip: P.value.userOptions.buttons.tooltip && P.value.style.tooltip.show,
hasPdf: P.value.userOptions.buttons.pdf,
hasImg: P.value.userOptions.buttons.img,
hasSvg: P.value.userOptions.buttons.svg,
hasXls: P.value.userOptions.buttons.csv,
hasTable: P.value.userOptions.buttons.table,
hasFullscreen: P.value.userOptions.buttons.fullscreen,
hasAltCopy: P.value.userOptions.buttons.altCopy,
isFullscreen: $.value,
isTooltip: H.value.showTooltip,
titles: { ...P.value.userOptions.buttonTitles },
chartElement: M.value,
position: P.value.userOptions.position,
hasAnnotator: P.value.userOptions.buttons.annotator,
isAnnotation: gr.value,
callbacks: P.value.userOptions.callbacks,
printScale: P.value.userOptions.print.scale,
tableDialog: P.value.table.useDialog,
isCursorPointer: cn.value,
onToggleFullscreen: pr,
onGeneratePdf: E(bn),
onGenerateCsv: dr,
onGenerateImage: Mr,
onGenerateSvg: Dr,
onToggleTable: mr,
onToggleTooltip: hr,
onToggleAnnotator: _r,
onCopyAlt: Nr,
style: Le({ visibility: E(pn) ? E(dn) ? "visible" : "hidden" : "visible" })
}, Me({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: D(({ isOpen: t, color: n }) => [w(e.$slots, "menuIcon", b(v({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: D(() => [w(e.$slots, "optionTooltip", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: D(() => [w(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: D(() => [w(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: D(() => [w(e.$slots, "optionImg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: D(() => [w(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: D(() => [w(e.$slots, "optionTable", {}, void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: D(({ toggleFullscreen: t, isFullscreen: n }) => [w(e.$slots, "optionFullscreen", b(v({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "7"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: D(({ toggleAnnotator: t, isAnnotator: n }) => [w(e.$slots, "optionAnnotator", b(v({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "8"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: D(({ altCopy: t }) => [w(e.$slots, "optionAltCopy", b(v({ altCopy: t })), void 0, !0)]),
key: "9"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: D(() => [w(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "10"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: D(() => [w(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "11"
} : void 0
]), 1032, /* @__PURE__ */ "backgroundColor.color.isImaging.isPrinting.uid.hasTooltip.hasPdf.hasImg.hasSvg.hasXls.hasTable.hasFullscreen.hasAltCopy.isFullscreen.isTooltip.titles.chartElement.position.hasAnnotator.isAnnotation.callbacks.printScale.tableDialog.isCursorPointer.onGeneratePdf.style".split("."))) : m("", !0),
g("div", Je, [(x(), h("svg", {
ref_key: "svgRef",
ref: L,
xmlns: E(ae),
"aria-describedby": `chart-instructions-${A.value}`,
class: y({
"vue-data-ui-fullscreen--on": $.value,
"vue-data-ui-fulscreen--off": !$.value,
"vue-data-ui-no-transition": !E(sn)
}),
viewBox: `0 0 ${R.value.width <= 0 ? 10 : R.value.width} ${R.value.height <= 0 ? 10 : R.value.height}`,
style: Le(`max-width:100%;overflow:visible;background:transparent;color:${P.value.style.color}`),
tabindex: "0",
onFocus: Pr,
onBlur: Fr,
onKeydown: Ir
}, [
Pe(E(jt)),
e.$slots["chart-background"] ? (x(), h("foreignObject", {
key: 0,
x: W.value.left,
y: W.value.top,
width: Math.max(.1, W.value.width),
height: Math.max(.1, W.value.height),
style: { pointerEvents: "none" }
}, [w(e.$slots, "chart-background", {}, void 0, !0)], 8, Xe)) : m("", !0),
Z.value.length > 0 ? (x(), h("g", Ze, [
g("defs", null, [Pe(Ee, {
t: "linear",
id: `bearish_gradient_${A.value}`,
x2: "0%",
y2: "100%",
stops: [
[
"0%",
P.value.style.layout.candle.colors.bearish,
1
],
[
"50%",
E(a)(P.value.style.layout.candle.colors.bearish, .02),
.87
],
[
"100%",
E(a)(P.value.style.layout.candle.colors.bearish, .05),
.4
]
]
}, null, 8, ["id", "stops"]), Pe(Ee, {
t: "linear",
id: `bullish_gradient_${A.value}`,
x2: "0%",
y2: "100%",
stops: [
[
"0%",
P.value.style.layout.candle.colors.bullish,
1
],
[
"50%",
E(a)(P.value.style.layout.candle.colors.bullish, .02),
.87
],
[
"100%",
E(a)(P.value.style.layout.candle.colors.bullish, .05),
.4
]
]
}, null, 8, ["id", "stops"])]),
P.value.style.layout.grid.show ? (x(), h("g", Qe, [
g("line", {
x1: U.value ? W.value.right : W.value.left,
x2: U.value ? W.value.right : W.value.left,
y1: W.value.top,
y2: W.value.bottom,
stroke: P.value.style.layout.grid.stroke,
"stroke-width": P.value.style.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, $e),
g("line", {
x1: W.value.left,
x2: W.value.right,
y1: W.value.bottom,
y2: W.value.bottom,
stroke: P.value.style.layout.grid.stroke,
"stroke-width": P.value.style.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, et),
P.value.style.layout.grid.horizontalLines.show ? (x(!0), h(d, { key: 0 }, C(Bn.value, (e) => (x(), h("line", {
x1: W.value.left,
x2: W.value.right,
y1: e.y,
y2: e.y,
stroke: P.value.style.layout.grid.horizontalLines.stroke,
"stroke-width": P.value.style.layout.grid.horizontalLines.strokeWidth,
"stroke-dasharray": P.value.style.layout.grid.horizontalLines.strokeDasharray,
"stroke-linecap": "round"
}, null, 8, tt))), 256)) : m("", !0),
P.value.style.layout.grid.verticalLines.show ? (x(!0), h(d, { key: 1 }, C(Zn.value, (e, t) => (x(), h("g", null, [e.text ? (x(), h("line", {
key: 0,
x1: W.value.left + Y.value * t + Y.value / 2,
x2: W.value.left + Y.value * t + Y.value / 2,
y1: W.value.top,
y2: W.value.bottom,
stroke: P.value.style.layout.grid.verticalLines.stroke,
"stroke-width": P.value.style.layout.grid.verticalLines.strokeWidth,
"stroke-dasharray": P.value.style.layout.grid.verticalLines.strokeDasharray,
"stroke-linecap": "round"
}, null, 8, nt)) : m("", !0)]))), 256)) : m("", !0),
P.value.style.layout.grid.xAxis.ticks.show ? (x(!0), h(d, { key: 2 }, C(Zn.value, (e, t) => (x(), h("g", null, [e.text ? (x(), h("line", {
key: 0,
x1: W.value.left + Y.value * t + Y.value / 2,
x2: W.value.left + Y.value * t + Y.value / 2,
y1: W.value.bottom,
y2: W.value.bottom + 3,
stroke: P.value.style.layout.grid.stroke,
"stroke-width": P.value.style.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, rt)) : m("", !0)]))), 256)) : m("", !0)
])) : m("", !0),
P.value.style.layout.grid.yAxis.dataLabels.show ? (x(), h("g", {
key: 1,
ref_key: "scaleLabels",
ref: Xt
}, [(x(!0), h(d, null, C(Bn.value, (e, t) => (x(), h("g", { key: `sl_${t}` }, [e.value >= X.value.min && e.value <= X.value.max ? (x(), h("line", {
key: 0,
x1: U.value ? W.value.right : W.value.left,
x2: U.value ? W.value.right + 5 : W.value.left - 5,
y1: e.y,
y2: e.y,
stroke: P.value.style.layout.grid.stroke,
"stroke-width": P.value.style.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, it)) : m("", !0), e.value >= X.value.min && e.value <= X.value.max ? (x(), h("text", {
key: 1,
class: y({ "vue-data-ui-transition": E(sn) }),
transform: `translate(${U.value ? W.value.right + 8 + P.value.style.layout.grid.yAxis.dataLabels.offsetX : W.value.left - 8 + P.value.style.layout.grid.yAxis.dataLabels.offsetX}, ${e.y + R.value.yAxisFontSize / 3})`,
"text-anchor": U.value ? "start" : "end",
"font-size": R.value.yAxisFontSize,
fill: P.value.style.layout.grid.yAxis.dataLabels.color,
"font-weight": P.value.style.layout.grid.yAxis.dataLabels.bold ? "bold" : "normal"
}, T(E(o)({
p: P.value.style.layout.grid.yAxis.dataLabels.prefix,
v: e.value,
s: P.value.style.layout.grid.yAxis.dataLabels.suffix,
r: P.value.style.layout.grid.yAxis.dataLabels.roundingValue
})), 11, at)) : m("", !0)]))), 128))], 512)) : m("", !0),
P.value.style.layout.grid.xAxis.dataLabels.show && !P.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (x(), h("g", {
key: 2,
ref_key: "timeLabelsEls",
ref: Zt
}, [(x(!0), h(d, null, C(Vn.value, (e, t) => (x(), h("g", null, [g("text", {