vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
550 lines (549 loc) • 25.5 kB
JavaScript
import { defineAsyncComponent as he, computed as f, ref as y, toRefs as Xe, watch as Q, shallowRef as ye, onMounted as Ye, onBeforeUnmount as pe, createElementBlock as c, openBlock as n, normalizeStyle as z, renderSlot as F, createCommentVNode as h, createBlock as ge, normalizeProps as be, guardReactiveProps as me, createElementVNode as p, toDisplayString as B, unref as u, createVNode as qe, Fragment as J, renderList as ee, withCtx as Ze, createTextVNode as Ke, nextTick as He } from "vue";
import { c as Qe, t as Je, a1 as ke, an as te, o as xe, g as Ae, l as et, h as E, n as tt, ao as at, X as lt, s as V, A as _e, C as ot, Q as Ce, a as ae, d as le, ap as rt } from "./lib-BwysEpWI.js";
import { t as ut, u as st } from "./useResponsive-DfdjqQps.js";
import { u as nt, a as oe } from "./useNestedProp-OFRiX4kU.js";
import { u as it, B as vt } from "./BaseScanner-BMpwQAfz.js";
import { u as dt } from "./useThemeCheck-DGJ31Vi5.js";
import { u as ct } from "./useTimeLabels-DKoynYae.js";
import { u as ft } from "./useChartAccessibility-9icAAmYg.js";
import { _ as ht } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const we = { style: { backgroundColor: "#1A1A1A", zeroLine: { color: "#5A5A5A" }, plot: { stroke: "#1A1A1A" }, verticalIndicator: { color: "#8A8A8A" }, dataLabel: { color: "#CCCCCC" }, title: { color: "#CCCCCC" }, tooltip: { color: "#CCCCCC", backgroundColor: "#1A1A1A", borderColor: "#5A5A5A", backgroundOpacity: 70 } } }, Le = { style: { backgroundColor: "#FFF8E1", line: { color: "#D32F2F" }, bar: { color: "#D32F2F", borderRadius: 0 }, zeroLine: { color: "#5D4037" }, plot: { stroke: "#FFF8E1" }, verticalIndicator: { color: "#FF9800" }, dataLabel: { color: "#424242" }, title: { color: "#424242" }, area: { color: "#E64A19" } } }, $e = { style: { backgroundColor: "#1E1E1E", line: { color: "#D32F2F" }, bar: { color: "#D32F2F", borderRadius: 0 }, zeroLine: { color: "#5D4037" }, plot: { stroke: "#1E1E1E" }, verticalIndicator: { color: "#B71C1C" }, dataLabel: { color: "#BDBDBD" }, title: { color: "#BDBDBD" }, area: { color: "#E64A19" } } }, Ne = { style: { backgroundColor: "#1A1A1A", line: { color: "#66CC66" }, bar: { color: "#66CC66", borderRadius: 0 }, zeroLine: { color: "#5F6A5F" }, plot: { stroke: "#1A1A1A" }, verticalIndicator: { color: "#66CC66" }, dataLabel: { color: "#AACCAA" }, title: { color: "#66CC66" }, area: { color: "#66CC66" } } }, Me = { style: { backgroundColor: "#fbfafa", line: { color: "#B9B99D", smooth: !0 }, bar: { color: "#B9B99D", borderRadius: 3 }, zeroLine: { strokeWidth: 0 }, plot: { stroke: "#fbfafa" }, verticalIndicator: { color: "#B9B99D" }, dataLabel: { color: "#A0AC94" }, title: { color: "#8A9892" }, area: { color: "#B9B99D" } } }, Ie = { style: { backgroundColor: "#f6f6fb", line: { color: "#4A6A75" }, bar: { color: "#4A6A75", borderRadius: 0 }, zeroLine: { color: "#9FA9BE" }, plot: { stroke: "#f6f6fb" }, verticalIndicator: { color: "#4A6A75" }, dataLabel: { color: "#61747E" }, title: { color: "#50606C" }, area: { color: "#4A6A75" } } }, Fe = {
default: {},
dark: we,
celebration: Le,
celebrationNight: $e,
hack: Ne,
zen: Me,
concrete: Ie
}, Zt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Le,
celebrationNight: $e,
concrete: Ie,
dark: we,
default: Fe,
hack: Ne,
zen: Me
}, Symbol.toStringTag, { value: "Module" })), yt = ["id"], pt = ["xmlns", "viewBox"], gt = ["width", "height"], bt = ["id"], mt = ["stop-color"], kt = ["stop-color"], xt = ["id"], At = ["stop-color"], _t = ["stop-color"], Ct = ["id"], wt = ["stop-color"], Lt = ["stop-color"], $t = { key: 1 }, Nt = ["d", "fill"], Mt = ["d", "fill"], It = ["d", "stroke", "stroke-width"], Ft = ["d", "stroke", "stroke-width"], Dt = ["x", "y", "width", "height", "fill", "rx"], St = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], zt = ["x1", "x2", "y1", "y2", "stroke", "stroke-dasharray", "stroke-width"], Bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Et = ["x", "y", "font-size", "font-weight", "fill"], Vt = ["x", "y", "height", "width", "onMouseenter", "onMouseleave", "onClick"], Tt = {
__name: "vue-ui-sparkline",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
},
showInfo: {
type: Boolean,
default: !0
},
selectedIndex: {
type: Number,
default: void 0
},
heightRatio: {
type: Number,
default: 1
},
forcedPadding: {
type: Number,
default: 30
}
},
emits: ["hoverIndex", "selectDatapoint"],
setup(L, { emit: De }) {
const Se = he(() => import("./PackageVersion-BLzm8l_I.js")), ze = he(() => import("./SparkTooltip-D7iYVquk.js")), { vue_ui_sparkline: Be } = nt(), { isThemeValid: Ee, warnInvalidTheme: Ve } = dt(), s = L, re = f(() => Array.isArray(s.dataset) && s.dataset.length > 0), g = y(Qe()), T = y(null), ue = y(null), se = y(null), e = y(W());
function Te(t) {
return rt(t).map((a) => ({ period: "-", value: a }));
}
const { loading: R, FINAL_DATASET: $, manualLoading: P } = it({
...Xe(s),
FINAL_CONFIG: e,
prepareConfig: W,
callback: () => {
Promise.resolve().then(async () => {
await He(), X();
});
},
skeletonDataset: Te(12),
skeletonConfig: Je({
defaultConfig: e.value,
userConfig: {
style: {
backgroundColor: "#99999930",
scaleMin: 0,
scaleMax: null,
animation: { show: !1 },
line: { color: "#AAAAAA" },
bar: { color: "#AAAAAA" },
area: { color: "#CACACA" },
zeroLine: { color: "#6A6A6A" },
dataLabel: { show: !1 },
tooltip: { show: !1 }
}
}
})
}), { svgRef: ne } = ft({ config: e.value.style.title });
function W() {
const t = oe({
userConfig: s.config,
defaultConfig: Be
});
let a = {};
const l = t.theme;
if (l)
if (!Ee.value(t))
Ve(t), a = t;
else {
const o = oe({
userConfig: Fe[l] || s.config,
defaultConfig: t
});
a = {
...oe({
userConfig: s.config,
defaultConfig: o
})
};
}
else
a = t;
return s.config && ke(s.config, "style.scaleMin") ? a.style.scaleMin = s.config.style.scaleMin : a.style.scaleMin = null, s.config && ke(s.config, "style.scaleMax") ? a.style.scaleMax = s.config.style.scaleMax : a.style.scaleMax = null, a;
}
const x = f(() => te({
data: $.value,
threshold: e.value.downsample.threshold
}));
Q(() => s.config, (t) => {
R.value || (e.value = W()), ve(), r.value.chartWidth = e.value.style.chartWidth;
}, { deep: !0 }), Q(() => s.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (P.value = !1), b.value = te({
data: $.value.map((a) => ({
...a,
value: [void 0].includes(a.value) ? null : a.value
})),
threshold: e.value.downsample.threshold
});
}, { deep: !0 });
const b = y(Re());
function Re() {
return te({
data: $.value.map((t) => e.value.style.animation.show && $.value.length > 1 ? {
...t,
value: null
} : {
...t,
value: [void 0].includes(t.value) ? null : t.value
}),
threshold: e.value.downsample.threshold
});
}
const m = ye(null), A = ye(null), O = y(!1), N = y(0), j = y([]), G = y(""), U = f(() => {
const a = (x.value || []).map((o) => `${o.period}::${Number.isFinite(o.value) ? o.value : 0}`).join("|"), l = e.value?.style?.animation || {};
return `${a}#${!!l.show}#${l.animationFrames || 0}`;
});
function D() {
N.value && (cancelAnimationFrame(N.value), N.value = 0), j.value.forEach((t) => clearTimeout(t)), j.value = [], O.value = !1;
}
function X() {
const t = e.value?.style?.animation || {}, a = x.value || [], l = U.value;
if (l && l === G.value && (O.value || b.value.length === a.length))
return;
if (D(), !t.show || R.value || a.length <= 1) {
b.value = a, G.value = l;
return;
}
O.value = !0, G.value = l, b.value = [];
const o = Math.max(1, Number(t.animationFrames) || 1), K = Math.max(1, Math.floor(o / a.length));
let H = 0;
const fe = () => {
if (l !== U.value) {
D();
return;
}
if (H < a.length) {
b.value.push(a[H]);
const Ue = setTimeout(() => {
N.value = requestAnimationFrame(fe);
}, K);
j.value.push(Ue), H += 1;
} else
b.value = a, D();
};
N.value = requestAnimationFrame(fe);
}
Q(U, () => {
X();
}), Ye(() => {
ve(), X();
}), pe(() => {
D();
});
const ie = f(() => !!e.value.debug);
function ve() {
if (xe(s.dataset) ? (Ae({
componentName: "VueUiSparkline",
type: "dataset",
debug: ie.value
}), P.value = !0) : s.dataset.forEach((t, a) => {
et({
datasetObject: t,
requiredAttributes: ["period", "value"]
}).forEach((l) => {
Ae({
componentName: "VueUiSparkline",
type: "datasetSerieAttribute",
property: l,
index: a,
debug: ie.value
});
});
}), xe(s.dataset) || (P.value = e.value.loading), e.value.responsive) {
const t = ut(() => {
const { width: a, height: l } = st({
chart: T.value,
title: e.value.style.title.show && s.showInfo ? ue.value : null,
source: se.value
});
requestAnimationFrame(() => {
r.value.width = a, r.value.height = l, r.value.chartWidth = e.value.style.chartWidth / 500 * a, r.value.padding = s.forcedPadding / 500 * a;
});
});
m.value && (A.value && m.value.unobserve(A.value), m.value.disconnect()), m.value = new ResizeObserver(t), A.value = T.value.parentNode, m.value.observe(A.value);
}
}
pe(() => {
m.value && (A.value && m.value.unobserve(A.value), m.value.disconnect());
});
const r = y({
height: 80 * s.heightRatio,
width: 500,
chartWidth: e.value.style.chartWidth,
padding: s.forcedPadding
}), Y = De, i = f(() => {
const { top: t, right: a, bottom: l, left: o } = e.value.style.padding;
return {
top: t,
left: o,
right: r.value.width - a,
bottom: r.value.height - l,
start: s.showInfo && e.value.style.dataLabel.show && e.value.style.dataLabel.position === "left" ? r.value.width - r.value.chartWidth + o : r.value.padding + o,
width: s.showInfo && e.value.style.dataLabel.show ? r.value.chartWidth - o - a : r.value.width - r.value.padding - o - a,
height: r.value.height - t - l
};
}), q = f(() => [null, void 0].includes(e.value.style.scaleMin) ? Math.min(...b.value.map((t) => isNaN(t.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t.value) ? 0 : t.value || 0)) : e.value.style.scaleMin), Pe = f(() => [null, void 0].includes(e.value.style.scaleMax) ? Math.max(...b.value.map((t) => isNaN(t.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t.value) ? 0 : t.value || 0)) : e.value.style.scaleMax), M = f(() => {
const t = q.value >= 0 ? 0 : q.value;
return Math.abs(t);
}), de = f(() => Pe.value + M.value), _ = f(() => i.value.bottom - i.value.height * Z(M.value));
function Z(t) {
return isNaN(t / de.value) ? 0 : t / de.value;
}
const C = f(() => x.value.length - 1 || 1), S = f(() => ct({
values: x.value.map((t) => t.period),
maxDatapoints: x.value.length,
formatter: e.value.style.dataLabel.datetimeFormatter,
start: 0,
end: x.value.length
})), d = f(() => b.value.map((t, a) => {
const l = isNaN(t.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t.value) ? 0 : t.value || 0, o = i.value.width / C.value;
return {
absoluteValue: l,
period: S.value && S.value[a] && S.value[a].text ? S.value[a].text : t.period,
plotValue: l + M.value,
toMax: Z(l + M.value),
x: i.value.start + a * o,
y: i.value.bottom - i.value.height * Z(l + M.value),
id: `plot_${g.value}_${a}`,
color: I.value ? e.value.style.bar.color : e.value.style.area.useGradient ? E(e.value.style.line.color, 0.05 * (1 - a / C.value)) : e.value.style.line.color,
width: o
};
})), We = f(() => {
const t = { x: d.value[0].x || 0, y: (r.value.height || 0) - 6 }, a = { x: d.value[d.value.length - 1].x || 0, y: (r.value.height || 0) - 6 }, l = [];
return d.value.forEach((o) => {
l.push(`${o.x || 0},${o.y || 0} `);
}), [t.x, t.y, ...l, a.x, a.y].toString();
}), v = y(void 0), w = y(void 0);
function Oe(t, a) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), v.value = t, w.value || (w.value = t), Y("hoverIndex", { index: a });
}
function je(t, a) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a }), w.value = v.value, v.value = void 0, Y("hoverIndex", { index: void 0 });
}
const k = f(() => {
if (re.value) {
const t = d.value.map((l) => l.absoluteValue), a = t.reduce((l, o) => l + o, 0);
return {
latest: d.value[d.value.length - 1] ? d.value[d.value.length - 1].absoluteValue : 0,
sum: a,
average: a / d.value.length,
median: at(t),
trend: tt(d.value.map(({ x: l, y: o, absoluteValue: K }) => ({
x: l,
y: o,
value: K
}))).trend
};
} else
return {
latest: null,
sum: null,
average: null,
median: null,
trend: null
};
}), ce = f(() => re.value ? e.value.style.dataLabel.valueType === "latest" ? k.value.latest : e.value.style.dataLabel.valueType === "sum" ? k.value.sum : e.value.style.dataLabel.valueType === "average" ? k.value.average : 0 : 0), I = f(() => e.value.type && e.value.type === "bar");
function Ge(t, a) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a }), Y("selectDatapoint", { datapoint: t, index: a });
}
return (t, a) => (n(), c("div", {
ref_key: "sparklineChart",
ref: T,
class: "vue-data-ui-component vue-ui-sparkline",
id: g.value,
style: z(`width:100%;font-family:${e.value.style.fontFamily};`)
}, [
F(t.$slots, "before", be(me({
selected: v.value,
latest: k.value.latest,
sum: k.value.sum,
average: k.value.average,
median: k.value.median,
trend: k.value.trend
})), void 0, !0),
e.value.style.title.show && L.showInfo ? (n(), c("div", {
key: 0,
ref_key: "chartTitle",
ref: ue,
class: "vue-ui-sparkline-title",
style: z(`display:flex;align-items:center;width:100%;color:${e.value.style.title.color};background:${e.value.style.backgroundColor};justify-content:${e.value.style.title.textAlign === "left" ? "flex-start" : e.value.style.title.textAlign === "right" ? "flex-end" : "center"};height:${e.value.style.title.fontSize * 2}px;font-size:${e.value.style.title.fontSize}px;font-weight:${e.value.style.title.bold ? "bold" : "normal"};`)
}, [
p("span", {
style: z(`padding:${e.value.style.title.textAlign === "left" ? "0 0 0 12px" : e.value.style.title.textAlign === "right" ? "0 12px 0 0" : "0"}`)
}, B(v.value ? v.value.period : e.value.style.title.text), 5)
], 4)) : h("", !0),
(n(), c("svg", {
ref_key: "svgRef",
ref: ne,
xmlns: u(lt),
viewBox: `0 0 ${r.value.width} ${r.value.height}`,
style: z(`background:${e.value.style.backgroundColor};overflow:visible`),
onMouseleave: a[0] || (a[0] = (l) => w.value = void 0)
}, [
qe(u(Se)),
t.$slots["chart-background"] ? (n(), c("foreignObject", {
key: 0,
x: 0,
y: 0,
width: r.value.width <= 0 ? 10 : r.value.width,
height: r.value.height <= 0 ? 10 : r.value.height,
style: {
pointerEvents: "none"
}
}, [
F(t.$slots, "chart-background", {}, void 0, !0)
], 8, gt)) : h("", !0),
p("defs", null, [
p("linearGradient", {
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
id: `sparkline_gradient_${g.value}`
}, [
p("stop", {
offset: "0%",
"stop-color": u(V)(u(E)(e.value.style.area.color, 0.05), e.value.style.area.opacity)
}, null, 8, mt),
p("stop", {
offset: "100%",
"stop-color": u(V)(e.value.style.area.color, e.value.style.area.opacity)
}, null, 8, kt)
], 8, bt),
p("linearGradient", {
x2: "0%",
y2: "100%",
id: `sparkline_bar_gradient_pos_${g.value}`
}, [
p("stop", {
offset: "0%",
"stop-color": e.value.style.bar.color
}, null, 8, At),
p("stop", {
offset: "100%",
"stop-color": u(E)(e.value.style.bar.color, 0.05)
}, null, 8, _t)
], 8, xt),
p("linearGradient", {
x2: "0%",
y2: "100%",
id: `sparkline_bar_gradient_neg_${g.value}`
}, [
p("stop", {
offset: "0%",
"stop-color": u(E)(e.value.style.bar.color, 0.05)
}, null, 8, wt),
p("stop", {
offset: "100%",
"stop-color": e.value.style.bar.color
}, null, 8, Lt)
], 8, Ct)
]),
e.value.style.area.show && !I.value && d.value[0] && d.value.length > 1 ? (n(), c("g", $t, [
e.value.style.line.smooth ? (n(), c("path", {
key: 0,
d: `M ${d.value[0].x},${i.value.bottom} ${u(_e)(d.value)} L ${d.value.at(-1).x},${i.value.bottom} Z`,
fill: e.value.style.area.useGradient ? `url(#sparkline_gradient_${g.value})` : u(V)(e.value.style.area.color, e.value.style.area.opacity)
}, null, 8, Nt)) : (n(), c("path", {
key: 1,
d: `M${We.value}Z`,
fill: e.value.style.area.useGradient ? `url(#sparkline_gradient_${g.value})` : u(V)(e.value.style.area.color, e.value.style.area.opacity)
}, null, 8, Mt))
])) : h("", !0),
e.value.style.line.smooth && !I.value ? (n(), c("path", {
key: 2,
d: `M ${u(_e)(d.value) || "0,0"}`,
stroke: e.value.style.line.color,
fill: "none",
"stroke-width": e.value.style.line.strokeWidth,
"stroke-linecap": "round"
}, null, 8, It)) : h("", !0),
!e.value.style.line.smooth && !I.value ? (n(), c("path", {
key: 3,
d: `M ${u(ot)(d.value) || "0,0"}`,
stroke: e.value.style.line.color,
fill: "none",
"stroke-width": e.value.style.line.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Ft)) : h("", !0),
(n(!0), c(J, null, ee(d.value, (l, o) => (n(), c("g", null, [
I.value ? (n(), c("rect", {
key: 0,
x: l.x - l.width / 2,
y: isNaN(l.absoluteValue > 0 ? l.y : _.value) ? 0 : l.absoluteValue > 0 ? l.y : _.value,
width: l.width,
height: isNaN(Math.abs(l.y - _.value)) ? 0 : Math.abs(l.y - _.value),
fill: l.absoluteValue > 0 ? `url(#sparkline_bar_gradient_pos_${g.value})` : `url(#sparkline_bar_gradient_neg_${g.value})`,
rx: e.value.style.bar.borderRadius
}, null, 8, Dt)) : h("", !0),
e.value.style.verticalIndicator.show && (v.value && l.id === v.value.id || L.selectedIndex === o) ? (n(), c("line", {
key: 1,
x1: l.x,
x2: l.x,
y1: i.value.top - 6,
y2: i.value.bottom,
stroke: e.value.style.verticalIndicator.color || l.color,
"stroke-width": e.value.style.verticalIndicator.strokeWidth,
"stroke-linecap": "round",
"stroke-dasharray": e.value.style.verticalIndicator.strokeDasharray || 0
}, null, 8, St)) : h("", !0)
]))), 256)),
q.value < 0 ? (n(), c("line", {
key: 4,
x1: i.value.start,
x2: i.value.start + i.value.width,
y1: u(Ce)(_.value, i.value.bottom),
y2: u(Ce)(_.value, i.value.bottom),
stroke: e.value.style.zeroLine.color,
"stroke-dasharray": e.value.style.zeroLine.strokeWidth * 2,
"stroke-width": e.value.style.zeroLine.strokeWidth,
"stroke-linecap": "round"
}, null, 8, zt)) : h("", !0),
e.value.style.plot.show ? (n(!0), c(J, { key: 5 }, ee(d.value, (l, o) => (n(), c("g", null, [
v.value && l.id === v.value.id || L.selectedIndex === o || u($).length === 1 ? (n(), c("circle", {
key: 0,
cx: l.x,
cy: l.y,
r: e.value.style.plot.radius,
fill: l.color,
stroke: e.value.style.plot.stroke,
"stroke-width": e.value.style.plot.strokeWidth
}, null, 8, Bt)) : h("", !0)
]))), 256)) : h("", !0),
L.showInfo && e.value.style.dataLabel.show ? (n(), c("text", {
key: 6,
x: e.value.style.dataLabel.position === "left" ? 12 + e.value.style.dataLabel.offsetX : i.value.width + 12 + e.value.style.dataLabel.offsetX,
y: r.value.height / 2 + e.value.style.dataLabel.fontSize / 2.5 + e.value.style.dataLabel.offsetY,
"font-size": e.value.style.dataLabel.fontSize,
"font-weight": e.value.style.dataLabel.bold ? "bold" : "normal",
fill: e.value.style.dataLabel.color
}, B(v.value ? u(ae)(
e.value.style.dataLabel.formatter,
v.value.absoluteValue,
u(le)({ p: e.value.style.dataLabel.prefix, v: v.value.absoluteValue, s: e.value.style.dataLabel.suffix, r: e.value.style.dataLabel.roundingValue }),
{ datapoint: v.value }
) : u(ae)(
e.value.style.dataLabel.formatter,
ce.value,
u(le)({ p: e.value.style.dataLabel.prefix, v: ce.value, s: e.value.style.dataLabel.suffix, r: e.value.style.dataLabel.roundingValue })
)), 9, Et)) : h("", !0),
(n(!0), c(J, null, ee(d.value, (l, o) => (n(), c("rect", {
x: l.x - (i.value.width / (C.value + 1) > r.value.padding ? r.value.padding : i.value.width / (C.value + 1)) / 2,
y: i.value.top - 6,
height: i.value.height + 6,
width: i.value.width / (C.value + 1) > r.value.padding ? r.value.padding : i.value.width / (C.value + 1),
fill: "transparent",
onMouseenter: () => Oe(l, o),
onMouseleave: () => je(l, o),
onClick: () => Ge(l, o)
}, null, 40, Vt))), 256)),
F(t.$slots, "svg", { svg: r.value }, void 0, !0)
], 44, pt)),
v.value && e.value.style.tooltip.show ? (n(), ge(u(ze), {
key: 1,
x: v.value.x,
y: v.value.y,
prevX: w.value.x,
prevY: w.value.y,
offsetY: e.value.style.plot.radius * 3 + e.value.style.tooltip.offsetY,
svgRef: u(ne),
background: e.value.style.tooltip.backgroundColor,
color: e.value.style.tooltip.color,
fontSize: e.value.style.tooltip.fontSize,
borderWidth: e.value.style.tooltip.borderWidth,
borderColor: e.value.style.tooltip.borderColor,
borderRadius: e.value.style.tooltip.borderRadius,
backgroundOpacity: e.value.style.tooltip.backgroundOpacity
}, {
default: Ze(() => [
F(t.$slots, "tooltip", be(me({ ...v.value })), () => [
Ke(B(v.value.period) + ": " + B(u(ae)(
e.value.style.dataLabel.formatter,
v.value.absoluteValue,
u(le)({
p: e.value.style.dataLabel.prefix,
v: v.value.absoluteValue,
s: e.value.style.dataLabel.suffix,
r: e.value.style.dataLabel.roundingValue
}),
{ datapoint: v.value }
)), 1)
], !0)
]),
_: 3
}, 8, ["x", "y", "prevX", "prevY", "offsetY", "svgRef", "background", "color", "fontSize", "borderWidth", "borderColor", "borderRadius", "backgroundOpacity"])) : h("", !0),
t.$slots.source ? (n(), c("div", {
key: 2,
ref_key: "source",
ref: se,
dir: "auto"
}, [
F(t.$slots, "source", {}, void 0, !0)
], 512)) : h("", !0),
u(R) ? (n(), ge(vt, { key: 3 })) : h("", !0)
], 12, yt));
}
}, Rt = /* @__PURE__ */ ht(Tt, [["__scopeId", "data-v-1b368031"]]), Kt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Rt
}, Symbol.toStringTag, { value: "Module" }));
export {
Zt as a,
Kt as b,
Rt as v
};