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