vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
3,456 lines • 177 kB
JavaScript
import { defineAsyncComponent as Xe, useSlots as er, getCurrentInstance as lr, ref as x, computed as b, onMounted as Zl, toRefs as ar, watch as Ll, watchEffect as Lt, onBeforeUnmount as ka, nextTick as Mt, createElementBlock as n, openBlock as u, normalizeStyle as C, normalizeClass as ll, createBlock as Te, createCommentVNode as h, createElementVNode as p, createVNode as vl, unref as v, withCtx as G, renderSlot as P, normalizeProps as ke, guardReactiveProps as _e, createSlots as Tt, Fragment as d, renderList as w, mergeProps as al, toDisplayString as ae, Teleport as tr, resolveDynamicComponent as or, withDirectives as rr, vModelCheckbox as sr, createTextVNode as zt } from "vue";
import { c as _a, g as wa, t as ir, k as ur, N as Ml, O as tl, m as It, j as Sa, P as Jl, Q as Y, R as Ca, S as nr, T as cr, U as N, z as Ft, A as Ot, B as Bt, C as Nt, V as vr, W as Vt, Y as Dt, a as re, Z as dr, y as Pt, _ as hr, b as Et, e as Ne, d as Ve, h as ol, s as ze, G as fr, x as Ge, H as Ql, n as Ce, $ as gr, a0 as Ue, a1 as fe, i as mr, o as Rt, v as br, r as xr, a2 as dl } from "./lib-2iaAPQ_c.js";
import { t as pr } from "./useResponsive-DfdjqQps.js";
import { u as yr, a as Tl } from "./useNestedProp-2p4Tjzc8.js";
import { u as kr } from "./usePrinter-ChVMpU2f.js";
import { u as _r, B as wr } from "./BaseScanner-BMpwQAfz.js";
import { u as Ht, a as Sr, l as Cr } from "./useTimeLabels-DKoynYae.js";
import { u as $r } from "./useSvgExport-ByUukOZt.js";
import { u as Ar } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Lr } from "./useTimeLabelCollider-CIsgDrl9.js";
import Mr from "./img-CqYIrJ8I.js";
import Tr from "./Title-DSOZzIrU.js";
import { _ as Kl } from "./Shape-12_eh8zD.js";
import { S as zr } from "./SlicerPreview-CgKqSG-h.js";
import Ir from "./vue-ui-accordion-Dm0mNNKQ.js";
import { _ as Fr } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Yt = { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoom: { color: "#4A4A4A", highlightColor: "#9A9A9A", minimap: { selectedColor: "#8A8A8A", lineColor: "#424242", indicatorColor: "#CCCCCC" } }, highlighter: { color: "#CCCCCC" }, timeTag: { backgroundColor: "#2A2A2A", color: "#CCCCCC", circleMarker: { color: "#2A2A2A" } }, grid: { stroke: "#5A5A5A", showVerticalLines: !1, labels: { color: "#CCCCCC", xAxisLabels: { color: "#CCCCCC" } } }, legend: { color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } }, bar: { border: { stroke: "#1A1A1A" }, labels: { color: "#CCCCCC" }, serieName: { color: "#CCCCCC" } }, line: { labels: { color: "#CCCCCC" } }, plot: { labels: { color: "#CCCCCC" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Wt = { chart: { backgroundColor: "#FFF8E1", color: "#424242", zoom: { color: "#5D4037", highlightColor: "#FF8A65", minimap: { selectedColor: "#FF8A65", lineColor: "#424242", indicatorColor: "#FF8A65" } }, highlighter: { color: "#424242" }, timeTag: { backgroundColor: "#424242", color: "#FFF8E1", circleMarker: { color: "#424242" } }, grid: { stroke: "#5D4037", showVerticalLines: !1, labels: { color: "#424242", xAxisLabels: { color: "#424242" }, xAxis: { showBaseline: !1 } } }, legend: { color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } }, bar: { borderRadius: 2, border: { stroke: "#FFF8E1" }, labels: { color: "#424242" }, serieName: { color: "#424242" } }, line: { labels: { color: "#424242" } }, plot: { labels: { color: "#424242" } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Xt = { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", zoom: { color: "#5D4037", highlightColor: "#FF8A65", minimap: { selectedColor: "#FF8A65", lineColor: "#FF6B6B", indicatorColor: "#FF8A65" } }, highlighter: { color: "#FFF8E1" }, timeTag: { backgroundColor: "#5D4037", color: "#FFF8E1", circleMarker: { color: "#5D4037" } }, grid: { stroke: "#5D4037", showVerticalLines: !1, labels: { color: "#BDBDBD", xAxisLabels: { color: "#BDBDBD" }, xAxis: { showBaseline: !1 } } }, legend: { color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } }, bar: { borderRadius: 2, border: { stroke: "#1E1E1E" }, labels: { color: "#BDBDBD" }, serieName: { color: "#BDBDBD" } }, line: { labels: { color: "#BDBDBD" } }, plot: { labels: { color: "#BDBDBD" } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Gt = { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", zoom: { color: "#5F6A5F", highlightColor: "#66CC66" }, highlighter: { color: "#66CC66" }, timeTag: { backgroundColor: "#1A1A1A", color: "#66CC66", circleMarker: { color: "#66CC66" } }, grid: { stroke: "#5F6A5F", showVerticalLines: !1, labels: { color: "#99AA99", xAxisLabels: { color: "#99AA99" }, xAxis: { showBaseline: !1 } } }, legend: { color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } }, bar: { borderRadius: 0, border: { stroke: "#66CC66" }, labels: { color: "#AACCAA" }, serieName: { color: "#99CC99" } }, line: { labels: { color: "#AACCAA" } }, plot: { labels: { color: "#AACCAA" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Ut = { chart: { backgroundColor: "#fbfafa", color: "#8A9892", zoom: { color: "#E0CFC3", highlightColor: "#8F837A" }, highlighter: { color: "#8F837A" }, timeTag: { backgroundColor: "#fbfafa", color: "#8A9892", circleMarker: { color: "#8A9892" } }, grid: { stroke: "transparent", labels: { show: !1, color: "#99AA99", xAxisLabels: { show: !1, color: "#99AA99" }, zeroLine: { show: !1 }, yAxis: { showBaseline: !1 } } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } }, bar: { borderRadius: 4, border: { stroke: "#D7E0D2" }, labels: { color: "#8F837A" }, serieName: { color: "#858480" } }, line: { labels: { color: "#8F837A" } }, plot: { labels: { color: "#8F837A" } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, qt = { chart: { backgroundColor: "#f6f6fb", color: "#50606C", zoom: { color: "#92B0AB", highlightColor: "#50606C" }, highlighter: { color: "#7DA9B5" }, timeTag: { backgroundColor: "#f6f6fb", color: "#50606C", circleMarker: { color: "#50606C" } }, grid: { stroke: "#829C98", showVerticalLines: !0, showHorizontalLines: !0, labels: { color: "#50606C", xAxisLabels: { color: "#50606C" } } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } }, bar: { borderRadius: 2, border: { stroke: "#404C4D" }, labels: { color: "#50606C" }, serieName: { color: "#61747E" } }, line: { labels: { color: "#50606C" } }, plot: { labels: { color: "#50606C" } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Zt = {
default: {},
dark: Yt,
celebration: Wt,
celebrationNight: Xt,
hack: Gt,
zen: Ut,
concrete: qt
}, $u = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Wt,
celebrationNight: Xt,
concrete: qt,
dark: Yt,
default: Zt,
hack: Gt,
zen: Ut
}, Symbol.toStringTag, { value: "Module" })), Or = ["id"], Br = ["id"], Nr = ["viewBox", "aria-label"], Vr = ["x", "y", "width", "height"], Dr = { key: 1 }, Pr = { class: "vue-ui-xy-grid" }, Er = ["stroke", "x1", "x2", "y1", "y2"], Rr = ["stroke", "x1", "x2", "y1", "y2"], Hr = { key: 1 }, Yr = ["x1", "x2", "y1", "y2", "stroke"], Wr = ["x1", "x2", "y1", "y2", "stroke"], Xr = ["x1", "x2", "y1", "y2", "stroke"], Gr = { key: 3 }, Ur = ["d", "stroke"], qr = { key: 4 }, Zr = ["d", "stroke"], Jr = ["id"], Qr = ["stop-color"], Kr = ["stop-color"], jr = ["stop-color"], es = ["id"], ls = ["stop-color"], as = ["stop-color"], ts = ["stop-color"], os = ["id"], rs = ["stop-color"], ss = ["stop-color"], is = ["id"], us = ["stop-color"], ns = ["stop-color"], cs = ["id"], vs = ["stop-color"], ds = ["stop-color"], hs = ["x", "y", "height", "width", "fill"], fs = ["x", "y", "width"], gs = { key: 0 }, ms = ["x", "y", "height", "width", "fill"], bs = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], xs = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], ps = ["width", "x", "y"], ys = ["stroke", "x1", "x2", "y1", "y2"], ks = { key: 3 }, _s = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ws = ["x", "y", "width", "height", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-dasharray"], Ss = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Cs = ["fill", "font-size", "transform"], $s = ["x1", "x2", "y1", "y2", "stroke"], As = ["x", "y", "font-size", "fill"], Ls = ["x1", "x2", "y1", "y2", "stroke"], Ms = ["x", "y", "font-size", "fill"], Ts = ["width", "x", "y"], zs = { style: { width: "100%" } }, Is = ["d", "stroke", "stroke-width", "stroke-dasharray"], Fs = ["d", "stroke", "stroke-width", "stroke-dasharray"], Os = { key: 6 }, Bs = { key: 7 }, Ns = ["d", "fill", "fill-opacity"], Vs = { key: 0 }, Ds = ["d", "fill"], Ps = ["d", "fill"], Es = ["d", "fill"], Rs = ["d", "fill"], Hs = ["d", "stroke", "stroke-width", "stroke-dasharray"], Ys = ["d", "stroke", "stroke-width", "stroke-dasharray"], Ws = ["width", "x", "y"], Xs = { style: { width: "100%" } }, Gs = { key: 8 }, Us = ["x", "y", "font-size", "fill"], qs = ["x", "y", "font-size", "fill", "font-weight"], Zs = { key: 9 }, Js = ["x", "y", "font-size", "fill"], Qs = { key: 10 }, Ks = ["x", "y"], js = ["innerHTML"], ei = ["x", "y"], li = ["innerHTML"], ai = ["x1", "x2", "y1", "y2", "stroke"], ti = { key: 11 }, oi = ["x", "y", "font-size", "fill"], ri = { key: 12 }, si = ["x", "y"], ii = ["innerHTML"], ui = ["x", "y"], ni = ["innerHTML"], ci = ["x1", "x2", "y1", "y2", "stroke"], vi = ["x", "y", "font-size", "fill", "innerHTML"], di = ["x", "y", "font-size", "fill", "innerHTML"], hi = ["x", "y", "font-size", "fill", "innerHTML"], fi = ["x", "y", "font-size", "fill", "innerHTML"], gi = { key: 0 }, mi = ["id"], bi = ["fill", "stroke"], xi = ["x1", "x2", "y1", "y2", "stroke", "marker-end"], pi = ["x1", "x2", "y1", "y2", "stroke", "marker-end"], yi = ["x", "y", "font-size", "fill", "stroke"], ki = ["id"], _i = ["stop-color"], wi = ["stop-color"], Si = ["x", "y", "width", "height", "fill", "onMouseenter"], Ci = ["font-size", "fill", "transform"], $i = ["x", "y", "font-size", "fill"], Ai = ["text-anchor", "font-size", "fill", "transform", "onClick"], Li = ["text-anchor", "font-size", "fill", "transform", "innerHTML", "onClick"], Mi = { key: 15 }, Ti = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], zi = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], Ii = ["y", "x", "width", "height", "fill"], Fi = ["id", "x", "y", "font-size", "fill", "text-anchor"], Oi = {
key: 16,
style: { "pointer-events": "none" }
}, Bi = ["x", "y"], Ni = ["innerHTML"], Vi = ["cx", "cy", "r", "fill"], Di = ["data-start", "data-end"], Pi = {
key: 4,
class: "vue-data-ui-watermark"
}, Ei = {
class: "vue-ui-xy-tag-arrow",
height: "20",
viewBox: "0 0 10 20",
style: { position: "absolute", right: "100%", top: "50%", transform: "translateY(-50%)" }
}, Ri = ["fill"], Hi = ["innerHTML"], Yi = {
class: "vue-ui-xy-tag-arrow",
height: "100%",
viewBox: "0 0 10 20",
style: { position: "absolute", left: "100%", top: "50%", transform: "translateY(-50%)" }
}, Wi = ["fill"], Xi = ["innerHTML"], Gi = {
class: "vue-ui-xy-tag-arrow",
height: "20",
viewBox: "0 0 10 20",
style: { position: "absolute", right: "100%", top: "50%", transform: "translateY(-50%)" }
}, Ui = ["fill"], qi = ["innerHTML"], Zi = {
class: "vue-ui-xy-tag-arrow",
height: "100%",
viewBox: "0 0 10 20",
style: { position: "absolute", left: "100%", top: "50%", transform: "translateY(-50%)" }
}, Ji = ["fill"], Qi = ["innerHTML"], Ki = ["id"], ji = ["onClick"], eu = {
key: 0,
viewBox: "0 0 20 12",
height: "1em",
width: "1.43em"
}, lu = ["stroke", "fill"], au = {
key: 1,
viewBox: "0 0 40 40",
height: "1em",
width: "1em"
}, tu = ["fill"], ou = ["fill"], ru = {
key: 2,
viewBox: "0 0 12 12",
height: "1em",
width: "1em"
}, su = {
style: { display: "flex", "flex-direction": "row", gap: "6px", "align-items": "center", "padding-left": "6px" },
"data-dom-to-png-ignore": ""
}, iu = ["innerHTML"], uu = {
__name: "vue-ui-xy",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
},
selectedXIndex: {
type: Number,
default: void 0
}
},
emits: ["selectTimeLabel", "selectX", "selectLegend"],
setup(jl, { expose: Jt, emit: Qt }) {
const g = jl, Kt = Xe(() => import("./DataTable-BT_IeqPe.js")), jt = Xe(() => import("./Tooltip-D0pGX8qz.js")), eo = Xe(() => import("./UserOptions-BQO4YFrn.js")), $a = Xe(() => import("./BaseIcon-CbVDYv89.js")), lo = Xe(() => import("./vue-ui-table-sparkline-B-fJpPuE.js").then((a) => a.b)), ao = Xe(() => import("./PackageVersion-Br3DrrFh.js")), to = Xe(() => import("./PenAndPaper-CvyKWfNl.js")), oo = Xe(() => import("./BaseDraggableDialog-Z5LfhW87.js")), ea = Qt, Aa = er(), ro = lr(), { vue_ui_xy: hl } = yr(), { isThemeValid: so, warnInvalidTheme: io } = Ar(), Ie = x(null), fl = x(null), Fe = x(null), rl = x(null), gl = x(null), ml = x(null), uo = x(null), la = x(null), aa = x(null), sl = x(null), ta = x(null), oa = x(null), Ee = x(null), ra = x(null), no = x(0), I = x(null), La = x(!0), ve = x(600), ee = x(1e3), zl = x("0 0 1000 600"), co = x({ x: 0, y: 0 }), bl = x({ line: "line", bar: "bar", plot: "plot" }), xl = x(!1), qe = x(!1), Ma = x(!1), Ze = x(null), J = x([]), H = x(_a()), Ta = x(0), za = x(0), Ia = x(0), pl = x(!0), sa = x(0), B = x(null), Fa = x(!1), ia = x(!0), Il = x(!0), se = x(null), De = x({}), Fl = x(null), Oa = x(!1), il = x(null), _ = x(null), vo = b(() => ({
height: ve.value,
width: ee.value
}));
function Ba(a) {
return Number.isFinite(a) ? Math.max(0, Math.floor(a)) : 0;
}
function ua(a, r, e = 0) {
return Number.isFinite(a) && Number.isFinite(r) && Math.abs(r) > 1e-9 ? a / r : e;
}
const Na = x(!1), y = x({
xAxis: 18,
yAxis: 12,
dataLabels: 20,
plotLabels: 10
}), $e = x({ plot: 3, line: 3 });
Zl(() => {
Oa.value = !0, g.dataset.length && g.dataset.forEach((a, r) => {
[null, void 0].includes(a.series) && wa({
componentName: "VueUiXy",
type: "datasetSerieAttribute",
property: "series (number[])",
index: r,
debug: yl.value
});
});
});
function na() {
if (!Object.keys(g.config || {}).length)
return hl;
const a = Tl({
userConfig: g.config,
defaultConfig: hl
});
g.config && fe(g.config, "chart.highlightArea") && (Array.isArray(g.config.chart.highlightArea) ? a.chart.highlightArea = g.config.chart.highlightArea : a.chart.highlightArea = [g.config.chart.highlightArea]), g.config && fe(g.config, "chart.grid.labels.yAxis.scaleMin") ? a.chart.grid.labels.yAxis.scaleMin = g.config.chart.grid.labels.yAxis.scaleMin : a.chart.grid.labels.yAxis.scaleMin = null, g.config && fe(g.config, "chart.grid.labels.yAxis.scaleMax") ? a.chart.grid.labels.yAxis.scaleMax = g.config.chart.grid.labels.yAxis.scaleMax : a.chart.grid.labels.yAxis.scaleMax = null, g.config && fe(g.config, "chart.zoom.startIndex") ? a.chart.zoom.startIndex = g.config.chart.zoom.startIndex : a.chart.zoom.startIndex = null, g.config && fe(g.config, "chart.zoom.endIndex") ? a.chart.zoom.endIndex = g.config.chart.zoom.endIndex : a.chart.zoom.endIndex = null, g.config && fe(g.config, "chart.grid.labels.yAxis.groupColor") ? a.chart.grid.labels.yAxis.groupColor = g.config.chart.grid.labels.yAxis.groupColor : a.chart.grid.labels.yAxis.groupColor = null, g.config && fe(g.config, "chart.annotations") && Array.isArray(g.config.chart.annotations) && g.config.chart.annotations.length ? a.chart.annotations = g.config.chart.annotations.map((t) => Tl({
defaultConfig: hl.chart.annotations[0],
userConfig: t
})) : a.chart.annotations = [], g.config && fe(g.config, "chart.grid.position") && g.config.chart.grid.position === "start" && g.dataset.length && g.dataset.some((t) => t.type === "bar") && (a.chart.grid.position = "middle", fe(g.config, "debug") && console.warn("Vue Data UI - VueUiXy - config.chart.grid.position was overriden to `middle` because your dataset contains a bar")), g.config && fe(g.config, "chart.grid.labels.yAxis.serieNameFormatter") ? a.chart.grid.labels.yAxis.serieNameFormatter = g.config.chart.grid.labels.yAxis.serieNameFormatter : a.chart.grid.labels.yAxis.serieNameFormatter = null, g.config && fe(g.config, "events.datapointEnter") ? a.events.datapointEnter = g.config.events.datapointEnter : a.events.datapointEnter = null, g.config && fe(g.config, "events.datapointLeave") ? a.events.datapointLeave = g.config.events.datapointLeave : a.events.datapointLeave = null, g.config && fe(g.config, "events.datapointClick") ? a.events.datapointClick = g.config.events.datapointClick : a.events.datapointClick = null, g.config && fe(g.config, "chart.highlightArea") && (Array.isArray(g.config.chart.highlightArea) ? a.chart.highlightArea = g.config.chart.highlightArea.map((t) => Va({
defaultConfig: hl.chart.highlightArea,
userConfig: t
})) : a.chart.highlightArea = Va({
defaultConfig: hl.chart.highlightArea,
userConfig: g.config.chart.highlightArea
}));
const r = a.theme;
if (!r) return a;
if (!so.value(a))
return io(a), a;
const e = Tl({
userConfig: Zt[r] || g.config,
defaultConfig: a
}), s = Tl({
userConfig: g.config,
defaultConfig: e
});
return {
...s,
customPalette: s.customPalette.length ? s.customPalette : mr[r] || Sa
};
}
function Va({ defaultConfig: a, userConfig: r }) {
return Tl({
defaultConfig: a,
userConfig: r
});
}
const ca = b({
get() {
return !!g.dataset && g.dataset.length;
},
set(a) {
return a;
}
}), l = x(na()), f = x({
dataLabels: { show: !0 },
showTooltip: !0,
showTable: !1,
isStacked: !1,
useIndividualScale: !1
});
function va() {
Na.value ? (f.value.isStacked = l.value.chart.grid.labels.yAxis.stacked, f.value.useIndividualScale == null && (f.value.useIndividualScale = l.value.chart.grid.labels.yAxis.useIndividualScale)) : (f.value = {
dataLabels: { show: !0 },
showTooltip: l.value.chart.tooltip.show === !0,
showTable: l.value.showTable === !0,
isStacked: l.value.chart.grid.labels.yAxis.stacked,
useIndividualScale: l.value.chart.grid.labels.yAxis.useIndividualScale
}, Na.value = !0);
}
const yl = b(() => !!l.value.debug), { loading: ie, FINAL_DATASET: ge, manualLoading: Ol } = _r({
...ar(g),
FINAL_CONFIG: l,
prepareConfig: na,
callback: () => {
Promise.resolve().then(async () => {
await Pl(), f.value.showTable = l.value.showTable;
});
},
skeletonDataset: [
{
name: "",
series: [0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 134],
type: "line",
smooth: !0,
color: "#BABABA"
},
{
name: "",
series: [0, 0.5, 1, 1.5, 2.5, 4, 6.5, 10.5, 17, 27.5, 44.5, 67],
type: "bar",
color: "#CACACA"
}
],
skeletonConfig: ir({
defaultConfig: l.value,
userConfig: {
useCssAnimation: !1,
showTable: !1,
chart: {
annotations: [],
highlightArea: [],
backgroundColor: "#99999930",
grid: {
stroke: "#6A6A6A",
labels: {
show: !1,
axis: {
yLabel: "",
xLabel: ""
},
xAxisLabels: { show: !1 },
yAxis: {
commonScaleSteps: 10,
useNiceScale: !0,
scaleMin: 0,
scaleMax: 134
},
zeroLine: { show: !0 }
}
},
padding: {
top: 12,
bottom: 24,
left: 24,
right: 24
},
userOptions: { show: !1 },
zoom: {
show: !1,
startIndex: null,
endIndex: null
}
},
bar: {
serieName: { show: !1 },
labels: { show: !1 },
border: {
useSerieColor: !1,
stroke: "#999999"
}
},
line: {
dot: {
useSerieColor: !1,
fill: "#8A8A8A"
},
labels: { show: !1 }
}
}
})
});
function ho(a) {
const r = /* @__PURE__ */ new WeakMap();
return (e, ...s) => {
let t = r.get(e);
const i = JSON.stringify(s);
if (t && t.has(i)) return t.get(i);
const o = a(e, ...s);
return t || (t = /* @__PURE__ */ new Map(), r.set(e, t)), t.set(i, o), o;
};
}
const fo = ho((a, r) => Ca({ data: a, threshold: r })), Re = (a) => fo(a, l.value.downsample.threshold), Oe = b({
get: () => Math.max(...ge.value.map((a) => Re(a.series).length)),
set: (a) => a
}), m = x({ start: 0, end: Oe.value }), Ae = x({ start: 0, end: Oe.value }), Da = b(() => l.value.chart.zoom.preview.enable && (Ae.value.start !== m.value.start || Ae.value.end !== m.value.end));
function Pa(a, r) {
Ae.value[a] = r;
}
function ul() {
const a = Math.max(
1,
...ge.value.map((s) => Re(s.series).length)
);
let r = Math.max(0, Math.min(m.value.start ?? 0, a - 1)), e = Math.max(r + 1, Math.min(m.value.end ?? a, a));
(!Number.isFinite(r) || !Number.isFinite(e) || e <= r) && (r = 0, e = a), m.value = { start: r, end: e }, Ae.value.start = r, Ae.value.end = e, Fe.value && (Fe.value.setStartValue(r), Fe.value.setEndValue(e));
}
const go = b(() => {
const { left: a, top: r, width: e, height: s } = c.value, t = m.value.start, o = m.value.end - t, L = e / o, M = Ae.value.start - t, F = Ae.value.end - t, S = Math.max(0, Math.min(o, M)), T = Math.max(0, Math.min(o, F));
return {
x: a + S * L,
y: r,
width: (T - S) * L,
height: s,
fill: l.value.chart.zoom.preview.fill,
stroke: l.value.chart.zoom.preview.stroke,
"stroke-width": l.value.chart.zoom.preview.strokeWidth,
"stroke-dasharray": l.value.chart.zoom.preview.strokeDasharray,
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: {
pointerEvents: "none",
transition: "none !important",
animation: "none !important"
}
};
});
Ll(() => g.selectedXIndex, (a) => {
if ([null, void 0].includes(g.selectedXIndex)) {
_.value = null;
return;
}
const r = a - m.value.start;
r < 0 || a >= m.value.end ? _.value = null : _.value = r ?? null;
}, { immediate: !0 });
const { isPrinting: da, isImaging: Ea, generatePdf: Ra, generateImage: Ha } = kr({
elementId: `vue-ui-xy_${H.value}`,
fileName: l.value.chart.title.text || "vue-ui-xy",
options: l.value.chart.userOptions.print
}), mo = x(!1), Bl = b(() => ur(l.value.customPalette)), Nl = b(() => {
if (l.value.chart.grid.labels.yAxis.scaleMin !== null)
return l.value.chart.grid.labels.yAxis.scaleMin;
const a = Math.min(...Pe.value.filter((r) => !J.value.includes(r.id)).map((r) => Math.min(...r.series)));
return a > 0 ? 0 : a;
}), Vl = b(() => {
if (l.value.chart.grid.labels.yAxis.scaleMax)
return l.value.chart.grid.labels.yAxis.scaleMax;
const a = Math.max(...Pe.value.filter((r) => !J.value.includes(r.id)).map((r) => Math.max(...r.series)));
return Nl.value === a ? a + 1 : a;
}), Le = b(() => l.value.chart.grid.labels.yAxis.useNiceScale ? Ml(Nl.value, Vl.value < 0 ? 0 : Vl.value, l.value.chart.grid.labels.yAxis.commonScaleSteps) : tl(Nl.value, Vl.value < 0 ? 0 : Vl.value, l.value.chart.grid.labels.yAxis.commonScaleSteps)), kl = b(() => [null, void 0].includes(l.value.chart.grid.labels.yAxis.scaleMin) ? Le.value.min >= 0 ? 0 : Math.abs(Le.value.min) : -Le.value.min), Pe = b(() => La.value ? ge.value.map((a, r) => {
const e = Re(a.series), s = `uniqueId_${r}`;
return {
...a,
slotAbsoluteIndex: r,
series: e.map((t) => Jl(t) ? t : null).slice(m.value.start, m.value.end),
color: It(a.color ? a.color : Bl.value[r] ? Bl.value[r] : Sa[r]),
id: s,
scaleLabel: a.scaleLabel || s
};
}) : ge.value), me = b(() => Pe.value.map((a, r) => ({
absoluteIndex: r,
...a,
series: a.series.map((e) => e + kl.value),
absoluteValues: a.series,
segregate: () => Yl(a),
isSegregated: J.value.includes(a.id)
}))), we = b(() => Pe.value.map((a, r) => ({
...a,
series: a.series.map((e) => e + kl.value),
absoluteValues: a.series
})).filter((a) => !J.value.includes(a.id)));
function bo() {
let a = 0;
ta.value && (a = Array.from(ta.value.querySelectorAll("text")).reduce((t, i) => {
const o = i.getComputedTextLength();
return (o > t ? o : t) + l.value.chart.grid.labels.yAxis.scaleValueOffsetX;
}, 0));
const r = aa.value ? aa.value.getBoundingClientRect().width + l.value.chart.grid.labels.axis.yLabelOffsetX + y.value.yAxis : 0, e = l.value.chart.grid.labels.yAxis.crosshairSize;
return a + r + e;
}
const ha = x(0), xo = pr((a) => {
ha.value = a;
}, 100);
Lt((a) => {
const r = sl.value;
if (!r) return;
const e = new ResizeObserver((s) => {
xo(s[0].contentRect.height);
});
e.observe(r), a(() => e.disconnect());
}), ka(() => {
ha.value = 0;
});
const Ya = b(() => {
let a = 0;
la.value && (a = la.value.getBBox().height);
let r = 0;
return sl.value && (r = ha.value), a + r + y.value.xAxis;
}), po = b(() => ge.value.some((a) => a.useProgression)), c = b(() => {
let a = 0;
const r = 36;
l.value.chart.grid.labels.show && (f.value.useIndividualScale && !f.value.isStacked ? a = (ge.value.length - J.value.length) * (l.value.chart.grid.labels.yAxis.labelWidth + r) : f.value.useIndividualScale && f.value.isStacked ? a = l.value.chart.grid.labels.yAxis.labelWidth + r : a = bo());
const e = l.value.chart.labels.fontSize * 1.1, s = po.value ? 24 : 6;
if (sl.value) {
const o = sl.value.getBBox().x;
o < 0 && (a += Math.abs(o));
}
const t = ee.value - a - l.value.chart.grid.labels.yAxis.crosshairSize - s - l.value.chart.padding?.left - l.value.chart.padding?.right, i = l.value.chart.grid.position === "middle" ? 0 : t / $.value / 2;
return {
top: l.value.chart.padding?.top + e,
right: ee.value - s - l.value.chart.padding?.right,
bottom: ve.value - Ya.value - l.value.chart.padding?.bottom - l.value.chart.grid.labels.axis.xLabelOffsetY,
left: a + l.value.chart.grid.labels.yAxis.crosshairSize - i + l.value.chart.padding?.left,
height: ve.value - Ya.value - l.value.chart.padding?.top - l.value.chart.padding?.bottom - e - l.value.chart.grid.labels.axis.xLabelOffsetY,
width: t,
scaleLabelX: a,
individualOffsetX: r
};
}), yo = b(() => {
const a = l.value.chart.grid.position === "middle" ? 1 : 0, r = $.value + a, e = Y(c.value?.top), s = Y(c.value?.bottom);
return Array.from({ length: r }).map((t, i) => {
const o = c.value.width / $.value * i + c.value?.left + U.value;
return `M${o},${e} L${o},${s}`;
}).join(" ");
}), ko = b(() => {
if (!l.value.chart.grid.labels.xAxis.showCrosshairs) return "";
const a = c.value.width / $.value, r = l.value.chart.grid.labels.xAxis.crosshairSize, e = l.value.chart.grid.labels.xAxis.crosshairsAlwaysAtZero;
return ma.value.map((s, t) => {
if (!s || !s.text) return null;
const i = c.value?.left + a * t + a / 2, o = e ? ue.value - (ue.value === c.value?.bottom ? 0 : r / 2) : c.value?.bottom, L = e ? ue.value + r / (ue.value === c.value?.bottom ? 1 : 2) : c.value?.bottom + r;
return `M${i},${o} L${i},${L}`;
}).filter(Boolean).join(" ");
});
function Wa() {
return !!ro?.vnode.props?.onSelectTimeLabel;
}
function _o(a, r, e) {
if (!Fl.value) {
const s = document.createElement("canvas");
Fl.value = s.getContext("2d");
}
return Fl.value.font = `normal ${a}px sans-serif`, Fl.value;
}
function Xa() {
const a = Ie.value.querySelectorAll(".vue-ui-xy-tag");
a.length && Array.from(a).forEach((r) => r.style.opacity = "0");
}
function Dl(a, r, e, s, t) {
e && (De.value[`${a}_${r}_${s}_${t}`] = e);
}
const Ga = x(!1);
async function Ua(a = !1) {
await Mt(), Ga.value = a, Fa.value && (Il.value = a);
}
function fa() {
xl.value = !xl.value;
}
const de = b(() => {
const a = Math.max(...ge.value.map((r) => Ca({ data: r.series, threshold: l.value.downsample.threshold }).length));
return Ht({
values: l.value.chart.grid.labels.xAxisLabels.values,
maxDatapoints: a,
formatter: l.value.chart.grid.labels.xAxisLabels.datetimeFormatter,
start: m.value.start,
end: m.value.end
});
}), ga = b(() => {
const a = Math.max(...ge.value.map((r) => Ca({ data: r.series, threshold: l.value.downsample.threshold }).length));
return Ht({
values: l.value.chart.grid.labels.xAxisLabels.values,
maxDatapoints: a,
formatter: l.value.chart.grid.labels.xAxisLabels.datetimeFormatter,
start: 0,
end: Oe.value
});
}), wo = b(() => {
const a = l.value.chart.grid.labels.xAxisLabels.modulo;
return de.value.length ? Math.min(a, [...new Set(de.value.map((r) => r.text))].length) : a;
}), ma = b(() => {
const a = l.value.chart.grid.labels.xAxisLabels, r = de.value || [], e = ga.value || [], s = m.value.start ?? 0, t = _.value, i = $.value, o = r.map((M) => M?.text ?? ""), L = e.map((M) => M?.text ?? "");
return nr(
!!a.showOnlyFirstAndLast,
!!a.showOnlyAtModulo,
Math.max(1, wo.value || 1),
o,
L,
s,
t,
i
);
});
function qa(a, r) {
const e = we.value.map((s) => ({
shape: s.shape || null,
name: s.name,
color: s.color,
type: s.type,
value: s.absoluteValues.find((t, i) => i === r),
comments: s.comments || [],
prefix: s.prefix || l.value.chart.labels.prefix,
suffix: s.suffix || l.value.chart.labels.suffix
}));
ea("selectTimeLabel", {
datapoint: e,
absoluteIndex: a.absoluteIndex,
label: a.text
});
}
const $ = b(() => {
const a = Ba((m.value.end ?? 0) - (m.value.start ?? 0));
return Math.max(1, a);
});
function So(a) {
B.value = a;
}
function Za() {
f.value.isStacked = !f.value.isStacked, f.value.isStacked ? f.value.useIndividualScale = !0 : f.value.useIndividualScale = l.value.chart.grid.labels.yAxis.useIndividualScale;
}
function ba(a) {
yl.value && a.autoScaling && (l.value.chart.grid.labels.yAxis.useIndividualScale || console.warn(`VueUiXy (datapoint: ${a.name}) : autoScaling only works when config.chart.grid.labels.yAxis.useIndividualScale is set to true`), l.value.chart.grid.labels.yAxis.stacked || console.warn(`VueUiXy (datapoint: ${a.name}) : autoScaling only works when config.chart.grid.labels.yAxis.stacked is set to true`));
}
function Co(a, r) {
const e = Ba(a), s = Array(e).fill(0);
for (let t = 0; t < r.length && t < e; t += 1) s[t] = r[t] ?? 0;
return s;
}
function Ja(a) {
const r = Math.max(...ge.value.map((e) => Re(e.series).length));
return a > r ? r : a < 0 || l.value.chart.zoom.startIndex !== null && a < l.value.chart.zoom.startIndex ? l.value.chart.zoom.startIndex !== null ? l.value.chart.zoom.startIndex + 1 : 1 : a;
}
const _l = x(!1), Qa = x(!1);
function Pl() {
if (!_l.value) {
_l.value = !0;
try {
const { startIndex: a, endIndex: r } = l.value.chart.zoom, e = Math.max(...ge.value.map((i) => Re(i.series).length)), s = a ?? 0, t = r != null ? Math.min(Ja(r + 1), e) : e;
El.value = !0, m.value.start = s, m.value.end = t, Ae.value.start = s, Ae.value.end = t, ul(), Qa.value = !0;
} finally {
queueMicrotask(() => {
El.value = !1;
}), _l.value = !1;
}
}
}
const El = x(!1);
function $o(a) {
_l.value || El.value || a !== m.value.start && (m.value.start = a, Ae.value.start = a, ul());
}
function Ao(a) {
if (_l.value || El.value) return;
const r = Ja(a);
r !== m.value.end && (m.value.end = r, Ae.value.end = r, ul());
}
async function Lo() {
await Pl();
}
function be(a) {
return ![null, void 0, NaN, 1 / 0, -1 / 0].includes(a);
}
const Ka = b(() => Le.value.max + kl.value);
function Je(a) {
return a / (be(Ka.value) ? Ka.value : 1);
}
const ue = b(() => isNaN(Je(kl.value)) ? c.value?.bottom : c.value?.bottom - c.value.height * Je(kl.value));
function ja(a) {
const r = ![null, void 0].includes(l.value.chart.grid.labels.yAxis.scaleMin) && l.value.chart.grid.labels.yAxis.scaleMin > 0 && Nl.value >= 0 ? c.value?.bottom : ue.value;
return a.value >= 0 ? N(r - a.y <= 0 ? 1e-5 : r - a.y) : N(a.y - ue.value <= 0 ? 1e-5 : a.y - ue.value);
}
function et(a) {
return a.value >= 0 ? N(a.zeroPosition - a.y <= 0 ? 1e-5 : a.zeroPosition - a.y) : N(a.y - a.zeroPosition <= 0 ? 1e-5 : a.zeroPosition - a.y);
}
const Z = b(() => {
const a = Math.max(1, $.value), r = Math.max(1, c.value.width), e = Math.max(1, Pe.value.filter((s) => s.type === "bar" && !J.value.includes(s.id)).length);
return {
bar: ua(r, a * e, 1),
plot: ua(r, a, 1),
line: ua(r, a, 1)
};
});
function He() {
return f.value.useIndividualScale && f.value.isStacked ? Z.value.line - c.value.width / $.value * 0.1 : Z.value.bar;
}
function Rl(a) {
return f.value.useIndividualScale && f.value.isStacked ? a.x + c.value.width / $.value * 0.05 : a.x + Z.value.bar / 2;
}
function lt(a) {
return a.value >= 0 ? a.y : [null, void 0, NaN, 1 / 0, -1 / 0].includes(ue.value) ? c?.bottom.value : ue.value;
}
function at(a) {
return a.value >= 0 ? a.y : [null, void 0, NaN, 1 / 0, -1 / 0].includes(a.zeroPosition) ? 0 : a.zeroPosition;
}
const wl = x(null);
function tt(a) {
const r = se.value;
if (!r) return null;
if (r.createSVGPoint && r.getScreenCTM) {
const T = r.createSVGPoint();
T.x = a.clientX, T.y = a.clientY;
const W = r.getScreenCTM();
if (W) {
const k = T.matrixTransform(W.inverse());
return { x: k.x, y: k.y, ok: !0 };
}
}
const e = r.getBoundingClientRect(), s = r.viewBox?.baseVal || { x: 0, y: 0, width: e.width, height: e.height }, t = Math.min(e.width / s.width, e.height / s.height), i = s.width * t, o = s.height * t, L = (e.width - i) / 2, M = (e.height - o) / 2, F = (a.clientX - e?.left - L) / t + s.x, S = (a.clientY - e?.top - M) / t + s.y;
return { x: F, y: S, ok: !0 };
}
let Qe = 0;
function Mo(a) {
xl.value || (Qe && cancelAnimationFrame(Qe), Qe = requestAnimationFrame(() => {
Qe = 0;
const r = tt(a);
if (!r || !se.value) {
Hl();
return;
}
const { left: e, right: s, top: t, bottom: i, width: o } = c.value;
if (r.x < e || r.x > s || r.y < t || r.y > i) {
Hl();
return;
}
const L = r.x - e, M = o / $.value, F = Math.floor(L / M);
F >= 0 && F < $.value ? wl.value !== F && (wl.value = F, mt(!0, F)) : Hl();
}));
}
function Hl() {
Qe && (cancelAnimationFrame(Qe), Qe = 0), wl.value = null, mt(!1, null);
}
function ot(a) {
const r = tt(a);
if (r && se.value) {
const { left: e, right: s, top: t, bottom: i, width: o } = c.value;
if (r.x >= e && r.x <= s && r.y >= t && r.y <= i) {
const L = o / Math.max(1, $.value), M = Math.floor((r.x - e) / L);
if (M >= 0 && M < $.value) {
rt(M);
return;
}
}
}
wl.value != null && rt(wl.value);
}
function rt(a) {
const r = we.value.map((e) => ({
name: e.name,
value: [null, void 0, NaN].includes(e.absoluteValues[a]) ? null : e.absoluteValues[a],
color: e.color,
type: e.type
}));
ea(
"selectX",
{
dataset: r,
index: a,
indexLabel: l.value.chart.grid.labels.xAxisLabels.values[a]
}
), l.value.events.datapointClick && l.value.events.datapointClick({ datapoint: r, seriesIndex: a + m.value.start });
}
function To() {
return me.value.map((a) => ({
values: a.absoluteValues,
color: a.color,
name: a.name,
type: a.type
}));
}
async function zo({ scale: a = 2 } = {}) {
if (!Ie.value) return;
const { width: r, height: e } = Ie.value.getBoundingClientRect(), s = r / e, { imageUri: t, base64: i } = await Mr({ domElement: Ie.value, base64: !0, img: !0, scale: a });
return {
imageUri: t,
base64: i,
title: l.value.chart.title.text,
width: r,
height: e,
aspectRatio: s
};
}
function Yl(a) {
if (J.value.includes(a.id))
J.value = J.value.filter((r) => r !== a.id);
else {
if (J.value.length + 1 === Pe.value.length) return;
J.value.push(a.id);
}
ea("selectLegend", we.value.map((r) => ({
name: r.name,
values: r.absoluteValues,
color: r.color,
type: r.type
}))), sa.value += 1;
}
function st(a) {
if (!me.value.length)
return l.value.debug && console.warn("VueUiXy - There are no series to show."), null;
const r = me.value.find((e) => e.name === a);
return r || (l.value.debug && console.warn(`VueUiXy - Series name not found "${a}"`), null);
}
function Io(a) {
const r = st(a);
r !== null && J.value.includes(r.id) && Yl({ id: r.id });
}
function Fo(a) {
const r = st(a);
r !== null && (J.value.includes(r.id) || Yl({ id: r.id }));
}
const Oo = b(() => {
const a = l.value.chart.title.text || "Chart visualization", r = l.value.chart.title.subtitle.text || "";
return `${a}. ${r}`;
}), it = b(() => ({
linePlot: $.value > l.value.line.dot.hideAboveMaxSerieLength
})), Bo = b(() => l.value.chart.userOptions.show && (!l.value.chart.title.show || !l.value.chart.title.text)), No = b(() => {
if (Array.isArray(l.value.chart.highlightArea))
return l.value.chart.highlightArea.map((r) => {
const e = Math.min(r.to, Oe.value - 1);
return {
...r,
span: r.from === e ? 1 : e < r.from ? 0 : e - r.from + 1
};
});
const a = {
...l.value.chart.highlightArea,
to: Math.min(l.value.chart.highlightArea.to, Oe.value - 1)
};
return [{ ...a, span: a.from === a.to ? 1 : a.to < a.from ? 0 : a.to - a.from + 1 }];
}), ut = b(() => La.value ? ge.value.map((a, r) => ({
...a,
series: Re(a.series),
id: `uniqueId_${r}`,
color: It(a.color ? a.color : Bl.value[r] ? Bl.value[r] : Sa[r])
})) : ge.value), Vo = b(() => we.value.map((a) => {
const r = a.absoluteValues.map((e) => [void 0, null].includes(e) ? 0 : e);
return {
id: a.id,
name: a.name,
color: a.color,
values: Co($.value, r)
};
})), Do = b(() => ({
responsiveBreakpoint: l.value.table.responsiveBreakpoint,
roundingValues: l.value.table.rounding,
showAverage: !1,
showMedian: !1,
showTotal: !1,
fontFamily: l.value.chart.fontFamily,
prefix: l.value.chart.labels.prefix,
suffix: l.value.chart.labels.suffix,
colNames: de.value.map((a, r) => l.value.table.useDefaultTimeFormat ? a.text : nl.value(r + m.value.start, l.value.table.timeFormat)),
thead: {
backgroundColor: l.value.table.th.backgroundColor,
color: l.value.table.th.color,
outline: l.value.table.th.outline
},
tbody: {
backgroundColor: l.value.table.td.backgroundColor,
color: l.value.table.td.color,
outline: l.value.table.td.outline
},
userOptions: {
show: !1
},
sparkline: {
animation: { show: !1 }
}
})), U = b(() => l.value.chart.grid.position === "middle" ? 0 : c.value.width / $.value / 2), Ke = b(() => cr(me.value.filter((a) => !J.value.includes(a.id)))), A = b(() => {
const a = Object.groupBy(Ke.value, (e) => e.scaleLabel), r = {};
for (const [e, s] of Object.entries(a)) {
const t = s.flatMap((i) => i.absoluteValues);
r[e] = {
min: Math.min(...t) || 0,
max: Math.max(...t) || 1,
groupId: `scale_group_${_a()}`
};
}
return r;
}), Po = b(() => {
const a = Pe.value.filter((r) => r.type === "bar").filter((r) => !J.value.includes(r.id)).length;
return c.value.width / $.value / a - Wl.value * a;
}), Wl = b(() => Z.value.line * l.value.bar.periodGap), Xl = b(() => Math.max(1e-5, He() - (f.value.useIndividualScale && f.value.isStacked ? 0 : Wl.value))), Gl = b(() => Xl.value * Math.min(Math.abs(l.value.bar.innerGap), 0.95)), Eo = b(() => {
if (!l.value.chart.zoom.minimap.show) return [];
const a = ut.value.filter((t) => !J.value.includes(t.id)), r = Math.max(...a.map((t) => t.series.length)), e = [];
for (let t = 0; t < r; t += 1)
e.push(a.map((i) => i.series[t] || 0).reduce((i, o) => (i || 0) + (o || 0), 0));
const s = Math.min(...e);
return e.map((t) => t + (s < 0 ? Math.abs(s) : 0));
}), Ro = b(() => l.value.chart.zoom.minimap.show ? ut.value.map((r) => ({
...r,
isVisible: !J.value.includes(r.id)
})) : []), je = b(() => we.value.map((a) => ({
slotAbsoluteIndex: a.slotAbsoluteIndex,
shape: a.shape || null,
name: a.name,
color: a.color,
type: a.type,
value: a.absoluteValues.find((r, e) => e === _.value),
comments: a.comments || [],
prefix: a.prefix || l.value.chart.labels.prefix,
suffix: a.suffix || l.value.chart.labels.suffix
}))), nt = b(() => Le.value.ticks.map((a) => ({
y: a >= 0 ? ue.value - c.value.height * Je(a) : ue.value + c.value.height * Je(Math.abs(a)),
value: a,
prefix: l.value.chart.labels.prefix,
suffix: l.value.chart.labels.suffix
}))), ct = b(() => {
const a = l.value.chart.annotations;
if (!a || !Array.isArray(a) || a.every((S) => !S.show)) return [];
const r = a.filter(
(S) => S.show && (S.yAxis.yTop != null || S.yAxis.yBottom != null)
);
if (!r.length) return [];
const { left: e, right: s } = c.value, t = ue.value, i = c.value.height, o = Le.value.min, M = Le.value.max - o, F = (S) => {
const T = (S - 0) / M;
return t - T * i;
};
return r.map((S) => {
const { yAxis: { yTop: T, yBottom: W, label: k } } = S, V = T != null && W != null && T !== W, z = T == null ? null : F(T), le = W == null ? null : F(W), ne = _o(k.fontSize);
ne.font = `${k.fontSize}px sans-serif`;
const q = ne.measureText(k.text).width, Se = k.fontSize, Be = (k.position === "start" ? e + k.padding?.left : s - k.padding?.right) + k.offsetX, pe = (z != null && le != null ? Math.min(z, le) : z ?? le) - k.fontSize / 3 + k.offsetY - k.padding?.top;
let E;
k.textAnchor === "middle" ? E = Be - q / 2 - k.padding?.left : k.textAnchor === "end" ? E = Be - q - k.padding?.right : E = Be - k.padding?.left;
const R = pe - Se * 0.75 - k.padding?.top;
return {
show: ![z, le, R].includes(NaN),
id: `annotation_y_${_a()}`,
hasArea: V,
areaHeight: V ? Math.abs(z - le) : 0,
yTop: z,
yBottom: le,
config: S.yAxis,
x1: e,
x2: s,
_text: { x: Be, y: pe },
_box: {
x: E,
y: R,
width: q + k.padding?.left + k.padding?.right,
height: Se + k.padding?.top + k.padding?.bottom,
fill: k.backgroundColor,
stroke: k.border.stroke,
rx: k.border.rx,
ry: k.border.ry,
strokeWidth: k.border.strokeWidth
}
};
});
});
function vt(a, r) {
const e = a[r - 1], s = a[r + 1];
let t = !!e && !!s && e.value == null && s.value == null || !e && !!s && s.value == null || !!e && !s && e.value == null;
return be(a[r].value) && t && l.value.line.cutNullValues;
}
const Me = b(() => {
const a = Ke.value.filter((o) => ["bar", "line", "plot"].includes(o.type)), r = a.length, e = l.value.chart.grid.labels.yAxis.gap, s = f.value.isStacked, t = s ? e * (r - 1) : 0, i = c.value.height - t;
return a.filter((o) => o.type === "bar").map((o, L) => {
ba(o);
const M = A.value[o.scaleLabel].min, F = A.value[o.scaleLabel].max;
o.absoluteValues.filter((D) => ![null, void 0].includes(D)).map((D) => (D - M) / (F - M));
const S = {
valueMin: M,
valueMax: F < 0 ? 0 : F
}, T = {
max: o.scaleMax || Math.max(...o.absoluteValues) || 1,
min: o.scaleMin || Math.min(...o.absoluteValues.filter((D) => ![void 0, null].includes(D))) > 0 ? 0 : Math.min(...o.absoluteValues.filter((D) => ![null, void 0].includes(D)))
}, W = o.scaleSteps || l.value.chart.grid.labels.yAxis.commonScaleSteps, k = 1.0000001, V = l.value.chart.grid.labels.yAxis.useNiceScale ? Ml(T.min, T.max === T.min ? T.max * k : T.max, W) : tl(T.min, T.max === T.min ? T.max * k : T.max, W), z = l.value.chart.grid.labels.yAxis.useNiceScale ? Ml(S.valueMin, S.valueMax === S.valueMin ? S.valueMax * k : S.valueMax, W) : tl(S.valueMin, S.valueMax === S.valueMin ? S.valueMax * k : S.valueMax, W), le = V.min >= 0 ? 0 : Math.abs(V.min), ne = 0, q = V.max + le, Se = z.max + Math.abs(ne), Be = o.stackIndex, cl = r - 1 - Be, pe = s ? 1 - o.cumulatedStackRatio : 0, E = s ? i * pe + e * cl : 0, R = s ? i * o.stackRatio : c.value.height, Q = c.value?.bottom - E - R * le / q, ye = c.value?.bottom - E - R * ne / Se, ce = me.value.filter((D) => D.type === "bar").filter((D) => !J.value.includes(D.id)).length, $l = o.series.map((D, j) => {
const We = f.value.useIndividualScale ? (o.absoluteValues[j] + le) / q : Je(D), el = f.value.useIndividualScale && f.value.isStacked ? c.value?.left + c.value.width / $.value * j : c.value?.left + Z.value.bar * L + Z.value.bar * j * ce - Po.value / 2 - L * Wl.value;
return {
yOffset: N(E),
individualHeight: N(R),
x: N(el),
y: c.value?.bottom - E - R * We,
value: o.absoluteValues[j],
zeroPosition: N(Q),
individualMax: N(q),
comment: o.comments && o.comments.slice(m.value.start, m.value.end)[j] || ""
};
}), he = o.absoluteValues.map((D) => z.min >= 0 ? (D - Math.abs(z.min)) / (z.max - Math.abs(z.min)) : (D + Math.abs(z.min)) / (z.max + Math.abs(z.min))), Ye = o.series.map((D, j) => {
const We = f.value.useIndividualScale && f.value.isStacked ? c.value?.left + c.value.width / $.value * j : c.value?.left - Z.value.bar / 2 + Z.value.bar * L + Z.value.bar * j * me.value.filter((el) => el.type === "bar").filter((el) => !J.value.includes(el.id)).length;
return {
yOffset: N(E),
individualHeight: N(R),
x: N(We),
y: N(c.value?.bottom - N(E) - (N(R) * he[j] || 0)),
value: o.absoluteValues[j],
zeroPosition: N(Q),
individualMax: N(q),
comment: o.comments && o.comments.slice(m.value.start, m.value.end)[j] || ""
};
}), X = V.ticks.map((D) => ({
y: D >= 0 ? Q - R * (D / q) : Q + R * Math.abs(D) / q,
value: D,
prefix: o.prefix || l.value.chart.labels.prefix,
suffix: o.suffix || l.value.chart.labels.suffix,
datapoint: o
})), K = z.ticks.map((D) => {
const j = (D - z.min) / (z.max - z.min);
return {
y: D >= 0 ? ye - R * j : ye + R * j,
value: D,
prefix: o.prefix || l.value.chart.labels.prefix,
suffix: o.suffix || l.value.chart.labels.suffix,
datapoint: o
};
});
return A.value[o.scaleLabel].name = o.name, A.value[o.scaleLabel].groupName = o.scaleLabel, A.value[o.scaleLabel].groupColor = l.value.chart.grid.labels.yAxis.groupColor || o.color, A.value[o.scaleLabel].color = o.color, A.value[o.scaleLabel].scaleYLabels = o.autoScaling ? K : X, A.value[o.scaleLabel].zeroPosition = o.autoScaling ? ye : Q, A.value[o.scaleLabel].individualMax = o.autoScaling ? Se : q, A.value[o.scaleLabel].scaleLabel = o.scaleLabel, A.value[o.scaleLabel].id = o.id, A.value[o.scaleLabel].yOffset = E, A.value[o.scaleLabel].individualHeight = R, A.value[o.scaleLabel].autoScaleYLabels = K, A.value[o.scaleLabel].unique = Ke.value.filter((D) => D.scaleLabel === o.scaleLabel).length === 1, {
...o,
yOffset: E,
autoScaleYLabels: K,
individualHeight: R,
scaleYLabels: o.autoScaling ? K : X,
individualScale: o.autoScaling ? z : V,
individualMax: o.autoScaling ? Se : q,
zeroPosition: o.autoScaling ? ye : Q,
plots: o.autoScaling ? Ye : $l,
groupId: A.value[o.scaleLabel].groupId
};
});
}), te = b(() => {
const a = Ke.value.filter((o) => ["bar", "line", "plot"].includes(o.type)), r = a.length, e = l.value.chart.grid.labels.yAxis.gap, s = f.value.isStacked, t = s ? e * (r - 1) : 0, i = c.value.height - t;
return a.filter((o) => o.type === "line").map((o, L) => {
ba(o);
const M = A.value[o.scaleLabel].min, F = A.value[o.scaleLabel].max;
o.absoluteValues.filter((O) => ![null, void 0].includes(O)).map((O) => (O - M) / (F - M));
const S = {
valueMin: M,
valueMax: F
}, T = {
max: o.scaleMax || Math.max(...o.absoluteValues) || 1,
min: o.scaleMin || (Math.min(...o.absoluteValues) > 0 ? 0 : Math.min(...o.absoluteValues))
}, W = o.scaleSteps || l.value.chart.grid.labels.yAxis.commonScaleSteps, k = 1.0000001, V = l.value.chart.grid.labels.yAxis.useNiceScale ? Ml(T.min, T.max === T.min ? T.max * k : T.max, W) : tl(T.min, T.max === T.min ? T.max * k : T.max, W), z = l.value.chart.grid.labels.yAxis.useNiceScale ? Ml(S.valueMin, S.valueMax === S.valueMin ? S.valueMax * k : S.valueMax, W) : tl(S.valueMin, S.valueMax === S.valueMin ? S.valueMax * k : S.valueMax, W), le = V.min >= 0 ? 0 : Math.abs(V.min), ne = 0, q = V.max + Math.abs(le), Se = z.max + Math.abs(ne), Be = o.stackIndex, cl = r - 1 - Be, pe = s ? 1 - o.cumulatedStackRatio : 0, E = s ? i * pe + e * cl : 0, R = s ? i * o.stackRatio : c.value.height, Q = c.value?.bottom - E - R * le / q, ye = c.value?.bottom - E - R * ne / Se, ce = o.series.map((O, oe) => {
const jo = f.value.useIndividualScale ? (o.absoluteValues[oe] + Math.abs(le)) / q : Je(O);
return {
x: N(c.value?.left + Z.value.line / 2 + Z.value.line * oe),
y: N(c.value?.bottom - E - R * jo),
value: o.absoluteValues[oe],
comment: o.comments && o.comments.slice(m.value.start, m.value.end)[oe] || ""
};
}), $l = o.absoluteValues.map((O) => z.min >= 0 ? (O - Math.abs(z.min)) / (z.max - Math.abs(z.min)) : (O + Math.abs(z.min)) / (z.max + Math.abs(z.min))), he = o.series.map((O, oe) => [void 0, null].includes(o.absoluteValues[oe]) ? {
x: N(c.value?.left + Z.value.line / 2 + Z.value.line * oe),
y: Q,
value: o.absoluteValues[oe],
comment: o.comments && o.comments.slice(m.value.start, m.value.end)[oe] || ""
} : {
x: N(c.value?.left + Z.value.line / 2 + Z.value.line * oe),
y: N(c.value?.bottom - E - (R * $l[oe] || 0)),
value: o.absoluteValues[oe],
comment: o.comments && o.comments.slice(m.value.start, m.value.end)[oe] || ""
}), Ye = l.value.line.cutNullValues ? Ft(ce) : Ot(ce.filter((O) => O.value !== null)), X = l.value.line.cutNullValues ? Ft(he) : Ot(he.filter((O) => O.value !== null)), K = l.value.line.cutNullValues ? Bt(ce) : Nt(ce.filter((O) => O.value !== null)), D = l.value.line.cutNullValues ? Bt(he) : Nt(he.filter((O) => O.value !== null)), j = V.ticks.map((O) => ({
y: O >= 0 ? Q - R * (O / q) : Q + R * Math.abs(O) / q,
value: O,
prefix: o.prefix || l.value.chart.labels.prefix,
suffix: o.suffix || l.value.chart.labels.suffix,
datapoint: o
})), We = z.ticks.map((O) => {
const oe = (O - z.min) / (z.max - z.min);
return {
y: O >= 0 ? ye - R * oe : ye + R * oe,
value: O,
prefix: o.prefix || l.value.chart.labels.prefix,
suffix: o.suffix || l.value.chart.labels.suffix,
datapoint: o
};
});
A.value[o.scaleLabel].name = o.name, A.value[o.scaleLabel].groupName = o.scaleLabel, A.value[o.scaleLabel].groupColor = l.value.chart.grid.labels.yAxis.groupColor || o.color, A.value[o.scaleLabel].color = o.color, A.value[o.scaleLabel].scaleYLabels = o.autoScaling ? We : j, A.value[o.scaleLabel].zeroPosition = o.autoScaling ? ye : Q, A.value[o.scaleLabel].individualMax = o.autoScaling ? Se : q, A.value[o.scaleLabel].scaleLabel = o.scaleLabel, A.value[o.scaleLabel].id = o.id, A.value[o.scaleLabel].yOffset = E, A.value[o.scaleLabel].individualHeight = R, A.value[o.scaleLabel].autoScaleYLabels = We, A.value[o.scaleLabel].unique = Ke.value.filter((O) => O.scaleLabel === o.scaleLabel).length === 1;
const el = f.value.useIndividualScale ? o.autoScaling ? ye : Q : ue.value, Al = Math.max(Math.max(o.autoScaling ? ye : j.at(-1) ? j.at(-1).y : 0, c.value?.top), el);
return {
...o,
yOffset: E,
autoScaleYLabels: We,
individualHeight: R,
scaleYLabels: o.autoScaling ? We : j,
individualScale: o.autoScaling ? z : V,
individualMax: o.autoScaling ? Se : q,
zeroPosition: o.autoScaling ? ye : Q,
curve: o.autoScaling ? X : Ye,
plots: o.autoScaling ? he : ce,
area: o.useArea ? f.value.useIndividualScale ? l.value.line.cutNullValues ? Vt(
o.autoScaling ? he : ce,
Al
) : Dt(
o.autoScaling ? he.filter((O) => O.value !== null) : ce.filter((O) => O.value !== null),
Al
) : l.value.line.cutNullValues ? Vt(ce, Al) : Dt(ce.filter((O) => O.value !== null), Al) : "",
curveAreas: o.useArea ? vr(
o.autoScaling ? l.value.line.cutNullValues ? he : he.filter((O) => O.value !== null) : l.value.line.cutNullValues ? ce : ce.filter((O) => O.value !== null),
Al,
l.value.line.cutNullValues
) : [],
straight: o.autoScaling ? D : K,
groupId: A.value[o.scaleLabel].groupId
};
});
}), xe = b(() => {
const a = Ke.value.filter((o) => ["bar", "line", "plot"].includes(o.type)), r = a.length, e = l.value.chart.grid.labels.yAxis.gap, s = f.value.isStacked, t = s ? e * (r - 1) : 0, i = c.value.height - t;
return a.filter((o) => o.type === "plot").map((o) => {
ba(o);
const L = A.value[o.scaleLabel].min, M = A.value[o.scaleLabel].max;
o.absoluteValues.filter((X) => ![null, void 0].includes(X)).map((X) => (X - L) / (M - L));
const F = {
valueMin: L,
valueMax: M
}, S = {
max: o.scaleMax || Math.max(...o.absoluteValues) || 1,
min: o.scaleMin || Math.min(...o.absoluteValues) > 0 ? 0 : Math.min(...o.absoluteValues)
}, T = o.scaleSteps || l.value.chart.grid.labels.yAxis.commonScaleSteps, W = 1.0000001, k = tl(S.min, S.max === S.min ? S.max * W : S.max, T), V = tl(F.valueMin, F.valueMax === F.valueMin ? F.valueMax * W : F.valueMax, T), z = k.min >= 0 ? 0 : Math.abs(k.min), le = 0, ne = k.max + z, q = V.max + Math.abs(le), Se = o.stackIndex, Be = r - 1 - Se, cl = s ? 1 - o.cumulatedStackRatio : 0, pe = s ? i * cl + e * Be : 0, E = s ? i * o.stackRatio : c.value.height, R = c.value?.bottom - pe - E * z / ne, Q = c.value?.bottom - pe - E * le / q, ye = o.series.map((X, K) => {
const D = f.value.useIndividualScale ? (o.absoluteValues[K] + Math.abs(z)) / ne : Je(X);
return {
x: N(c.value?.left + Z.value.plot / 2 + Z.value.plot * K),
y: N(c.value?.bottom - pe - E * D),
value: o.absoluteValues[K],
comment: o.comments && o.comments.slice(m.value.start, m.value.end)[K] || ""
};
}), ce = o.absoluteValues.map((X) => V.min >= 0 ? (X - Math.abs(V.min)) / (V.max - Math.abs(V.min)) : (X + Math.abs(V.min)) / (V.max + Math.abs(V.min))), $l = o.series.map((X, K) => ({
x: N(c.value?.left + Z.value.plot / 2 + Z.value.plot * K),
y: N(c.value?.bottom - pe - (E * ce[K] || 0)),
value: o.absoluteValues[K],
comment: o.comments && o.comments.slice(m.value.start, m.value.end)[K] || ""
})), he = k.ticks.map((X) => ({
y: X >= 0 ? R - E * (X / ne) : R + E * Math.abs(X) / ne,
value: X,
prefix: o.prefix || l.value.chart.labels.prefix,
suffix: o.suffix || l.value.chart.labels.suffix,
datapoint: o
})), Ye = V.ticks.map((X) => {
const K = (X - V.min) / (V.max - V.min);
return {
y: X >= 0 ? Q - E * K : Q + E * K,
value: X,
prefix: o.prefix || l.value.chart.labels.prefix,
suffix: o.suffix || l.value.chart.labels.suffix,
datapoint: o
};
});
return A.value[o.scaleLabel].name = o.name, A.value[o.scaleLabel].groupName = o.scaleLabel, A.value[o.scaleLabel].groupColor = l.value.chart.grid.labels.yAxis.groupColor || o.color, A.value[o.scaleLabel].color = o.color, A.value[o.scaleLabel].scaleYLabels = o.autoScaling ? Ye : he, A.value[o.scaleLabel].zeroPosition = o.autoScaling ? Q : R, A.value[o.scaleLabel].individualMax = o.autoScaling ? q : ne, A.value[o.scaleLabel].scaleLabel = o.scaleLabel, A.value[o.scaleLabel].id = o.id, A.value[o.scaleLabel].yOffset = pe, A.value[o.scaleLabel].individualHeight = E, A.value[o.scaleLabel].autoScaleYLabels = Ye, A.value[o.scaleLabel].unique = Ke.value.filter((X) => X.scaleLabel === o.scaleLabel).length === 1, {
...o,
yOffset: pe,
autoScaleYLabels: Ye,
individualHeight: E,
scaleYLabels: o.autoScaling ? Ye : he,
individualScale: o.autoScaling ? V : k,
individualMax: o.autoScaling ? q : ne,
zeroPosition: o.autoScaling ? Q : R,
plots: o.autoScaling ? $l : ye,
groupId: A.value[o.scaleLabel].groupId
};
});
}), Sl = b(() => {
const a = te.value.map((i) => ({
name: i.name,
color: i.color,
scale: i.individualScale,
scaleYLabels: i.scaleYLabels,
zero: i.zeroPosition,
max: i.individualMax,
scaleLabel: i.scaleLabel || "",
id: i.id,
yOffset: i.yOffset || 0,
individualHeight: i.individualHeight || c.value.height,
autoScaleYLabels: i.autoScaleYLabels
})), r = Me.value.map((i) => ({
name: i.name,
color: i.color,
scale: i.individualScale,
scaleYLabels: i.scaleYLabels,
zero: i.zeroPosition,
max: i.individualMax,
scaleLabel: i.scaleLabel || "",
id: i.id,
yOffset: i.yOffset || 0,
individualHeight: i.individualHeight || c.value.height
})), e = xe.value.map((i) => ({
name: i.name,
color: i.color,
scale: i.individualScale,
scaleYLabels: i.scaleYLabels,
// FIX
zero: i.zeroPosition,
max: i.individualMax,
scaleLabel: i.scaleLabel || "",
id: i.id,
yOffset: i.yOffset || 0,
individualHeight: i.individualHeight || c.value.height
})), s = f.value.useIndividualScale && !f.value.isStacked ? Object.values(A.value) : [...a, ...r, ...e], t = s.flatMap((i) => i).length;
return s.flatMap((i, o) => {
let L = 0;
L = f.value.isStacked ? c.value?.left : c.value?.left / t * (o + 1);
const M = f.value.useIndividualScale && !f.value.isStacked ? i.unique ? i.name : i.groupName : i.name;
return {
unique: i.unique,
id: i.id,
groupId: i.groupId,
scaleLabel: i.scaleLabel,
name: re(
l.value.chart.grid.labels.yAxis.serieNameFormatter,
M,
M,
i
),
color: f.value.useIndividualScale && !f.value.isStacked ? i.unique ? i.color : i.groupColor : i.color,
scale: i.scale,
yOffset: i.yOffset,
individualHeight: i.individualHeight,
x: L,
yLabels: i.scaleYLabels || i.scale.ticks.map((F) => ({
y: F >= 0 ? i.zero - i.individualHeight * (F / i.max) : i.zero + i.individualHeight * Math.abs(F) / i.max,
value: F
}))
};
});
}), dt = b(() => {
const a = l.value.line.interLine || {}, r = a.pairs || [], e = a.colors || [];
if (!r.length) return [];
const s = [];
return r.forEach((t, i) => {
const [o, L] = Array.isArray(t) ? t : [t.a, t.b];
if (!o || !L) return;
const M = te.value.find((k) => k.name === o), F = te.value.find((k) => k.name === L);
if (!M || !F || M.type !== "line" || F.type !== "line") return;
const S = e?.[i]?.[0] ?? M.color, T = e?.[i]?.[1] ?? F.color;
dr({
lineA: M.plots,
lineB: F.plots,
smoothA: !!M.smooth,
smoothB: !!F.smooth,
colorLineA: S,
colorLineB: T,
sampleStepPx: 2,
cutNullValues: l.value.line.cutNullValues
}).forEach((k, V) => {
s.push({ ...k, key: `inter_${o}_${L}_${i}_${V}` });
});
}), s;
}), ht = b(() => ({
datapoint: je.value,
seriesIndex: _.value,
series: me.value,
bars: Me.value,
lines: te.value,
plots: xe.value,
config: l.value
})), nl = b(() => {
const a = l.value.chart.grid.labels.xAxisLabels.datetimeFormatter, r = Sr({
useUTC: a.useUTC,
locale: Cr[a.locale] || { months: [], shortMonths: [], days: [], shortDays: [] },
januaryAsYear: a.januaryAsYear
});
return (e, s) => {
const i = l.value.chart.grid.labels.xAxisLabels.values?.[e];
return i == null ? "" : r.formatDate(new Date(i), s);
};
}), ft = b(() => (l.value.chart.grid.labels.xAxisLabels.values || []).map((r, e) => ({
text: nl.value(e, l.value.chart.zoom.timeFormat),
absoluteIndex: e
}))), Ho = b(() => {
let a = "", r = je.value.map((t) => t.value).filter((t) => Jl(t) && t !== null).reduce((t, i) => Math.abs(t) + Math.abs(i), 0);
const e = de.value[_.value], s = l.value.chart.tooltip.customFormat;
if (Pt(s) && hr(() => s({
absoluteIndex: _.value + m.value.start,
seriesIndex: _.value,
datapoint: je.value,
series: me.value,
bars: Me.value,
lines: te.value,
plots: xe.value,
config: l.value
})))
return s({
absoluteIndex: _.value + m.value.start,
seriesIndex: _.value,
datapoint: je.value,
series: me.value,
bars: Me.value,
lines: te.value,
plots: xe.value,
config: l.value
});
if (e && e.text && l.value.chart.tooltip.showTimeLabel) {
const t = nl.value(_.value + m.value.start, l.value.chart.tooltip.timeFormat);
a += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${l.value.chart.tooltip.borderColor}; width:100%">${l.value.chart.grid.labels.xAxisLabels.datetimeFormatter.enable && !l.value.chart.tooltip.useDefaultTimeFormat ? t : e.text}</div>`;
}
return je.value.forEach((t) => {
if (Jl(t.value)) {
let i = "", o = "";
switch (bl.value[t.type]) {
case "bar":
i = `<svg viewBox="0 0 40 40" height="14" width="14">${Aa.pattern ? `<rect x="0" y="0" rx="1" stroke="none" height="40" width="40" fill="${t.color}" />` : ""}<rect x="0" y="0" rx="1" stroke="none" height="40" width="40" fill="${Aa.pattern ? `url(#pattern_${H.value}_${t.slotAbsoluteIndex}` : t.color}" /></svg>`;
break;
case "line":
!t.shape || !["star", "triangle", "square", "diamond", "pentagon", "hexagon"].includes(t.shape) ? o = `<circle cx="10" cy="8" r="4" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="0.5" fill="${t.color}" />` : t.shape === "triangle" ? o = `<path d="${Ne({ plot: { x: 10, y: 8 }, radius: 4, sides: 3, rotation: 0.52 }).path}" fill="${t.color}" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : t.shape === "square" ? o = `<path d="${Ne({ plot: { x: 10, y: 8 }, radius: 4, sides: 4, rotation: 0.8 }).path}" fill="${t.color}" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : t.shape === "diamond" ? o = `<path d="${Ne({ plot: { x: 10, y: 8 }, radius: 4, sides: 4, rotation: 0 }).path}" fill="${t.color}" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : t.shape === "pentagon" ? o = `<path d="${Ne({ plot: { x: 10, y: 8 }, radius: 4, sides: 5, rotation: 0.95 }).path}" fill="${t.color}" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : t.shape === "hexagon" ? o = `<path d="${Ne({ plot: { x: 10, y: 8 }, radius: 4, sides: 6, rotation: 0 }).path}" fill="${t.color}" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : t.shape === "star" && (o = `<polygon stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="0.5" fill="${t.color}" points="${Et({ plot: { x: 10, y: 8 }, radius: 4 })}" />`), i = `<svg viewBox="0 0 20 12" height="14" width="20"><rect rx="1.5" x="0" y="6.5" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="0.5" height="3" width="20" fill="${t.color}" />${o}</svg>`;
break;
case "plot":
if (!t.shape || !["star", "triangle", "square", "diamond", "pentagon", "hexagon"].includes(t.shape)) {
i = `<svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="1" fill="${t.color}" /></svg>`;
break;
}
if (t.shape === "star") {
i = `<svg viewBox="0 0 12 12" height="14" width="14"><polygon stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="1" fill="${t.color}" points="${Et({ plot: { x: 6, y: 6 }, radius: 5 })}" /></svg>`;
break;
}
if (t.shape === "triangle") {
i = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${Ne({ plot: { x: 6, y: 6 }, radius: 6, sides: 3, rotation: 0.52 }).path}" fill="${t.color}" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (t.shape === "square") {
i = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${Ne({ plot: { x: 6, y: 6 }, radius: 6, sides: 4, rotation: 0.8 }).path}" fill="${t.color}" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (t.shape === "diamond") {
i = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${Ne({ plot: { x: 6, y: 6 }, radius: 5, sides: 4, rotation: 0 }).path}" fill="${t.color}" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (t.shape === "pentagon") {
i = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${Ne({ plot: { x: 6, y: 6 }, radius: 5, sides: 5, rotation: 0.95 }).path}" fill="${t.color}" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (t.shape === "hexagon") {
i = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${Ne({ plot: { x: 6, y: 6 }, radius: 5, sides: 6, rotation: 0 }).path}" fill="${t.color}" stroke="${l.value.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
}
a += `<div style="display:flex;flex-direction:row; align-items:center;gap:3px;"><div style="width:20px">${i}</div> ${t.name}: <b>${l.value.chart.tooltip.showValue ? re(
t.type === "line" ? l.value.line.labels.formatter : t.type === "bar" ? l.value.bar.labels.formatter : l.value.plot.labels.formatter,
t.value,
Ve({
p: t.prefix,
v: t.value,
s: t.suffix,
r: l.value.chart.tooltip.roundingValue
}),
{ datapoint: t }
) : ""}</b> ${l.value.chart.tooltip.showPercentage ? `(${Ve({
v: N(Math.abs(t.value) / r * 100),
s: "%",
r: l.value.chart.tooltip.roundingPercentage
})})` : ""}</div>`, l.value.chart.comments.showInTooltip && t.comments.length && t.comments.slice(m.value.start, m.value.end)[_.value] && (a += `<div class="vue-data-ui-tooltip-comment" style="background:${t.color}20; padding: 6px; margin-bottom: 6px; border-left: 1px solid ${t.color}">${t.comments.slice(m.value.start, m.value.end)[_.value]}</div>`);
}
}), `<div style="border-radius:4px;padding:12px;font-variant-numeric: tabular-nums;color:${l.value.chart.tooltip.color}">${a}</div>`;
}), gt = b(() => {
if (Pe.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
const a = we.value.map((e) => ({
label: e.name,
color: e.color,
type: e.type
})), r = [];
return de.value.forEach((e, s) => {
const t = l.value.table.useDefaultTimeFormat ? [e.text] : [nl.value(s + m.value.start, l.value.table.timeFormat)];
we.value.forEach((i) => {
t.push(be(i.absoluteValues[s]) ? Number(i.absoluteValues[s].toFixed(l.value.table.rounding)) : "");
}), r.push(t);
}), { head: a, body: r };
}), Ul = b(() => {
const a = l.value.table.showSum;
let r = [""].concat(we.value.map((i) => i.name));
a && (r = r.concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>'));
let e = [];
for (let i = 0; i < $.value; i += 1) {
const o = we.value.map((L) => L.absoluteValues[i] ?? 0).reduce((L, M) => L + M, 0);
e.push(
[
l.value.table.useDefaultTimeFormat ? de.value[i].text ?? "-" : nl.value(i + m.value.start, l.value.table.timeFormat)
].concat(we.value.map(
(L) => re(
L.type === "line" ? l.value.line.labels.formatter : L.type === "bar" ? l.value.bar.labels.formatter : l.value.plot.labels.formatter,
L.absoluteValues[i] ?? 0,
Ve({
p: L.prefix || l.value.chart.labels.prefix,
v: L.absoluteValues[i] ?? 0,
s: L.suffix || l.value.chart.labels.suffix,
r: l.value.table.rounding
})
)
)).concat(a ? (o ?? 0).toFixed(l.value.table.rounding) : [])
);
}
const s = {
th: {
backgroundColor: l.value.table.th.backgroundColor,
color: l.value.table.th.color,
outline: l.value.table.th.outline
},
td: {
backgroundColor: l.value.table.td.backgroundColor,
color: l.value.table.td.color,
outline: l.value.table.td.outline
},
breakpoint: l.value.table.responsiveBreakpoint
}, t = [l.value.table.columnNames.period].concat(we.value.map((i) => i.name)).concat(l.value.table.columnNames.total);
return { head: r, body: e, config: s, colNames: t };
});
function xa(a = null) {
const r = [[l.value.chart.title.text], [l.value.chart.title.subtitle.text], [""]], e = ["", ...gt.value.head.map((o) => o.label)], s = gt.value.body, t = r.concat([e]).concat(s), i = br(t);
a ? a(i) : xr({ csvContent: i, title: l.value.chart.title.text || "vue-ui-xy" });
}
function mt(a, r = null) {
Ma.value = a;
const e = we.value.map((s) => ({
name: s.name,
value: [null, void 0, NaN].includes(s.absoluteValues[r]) ? null : s.absoluteValues[r],
color: s.color,
type: s.type
}));
a ? (_.value = r, l.value.events.datapointEnter && l.value.events.datapointEnter({ datapoint: e, seriesIndex: r + m.value.start })) : (_.value = null, l.value.events.datapointLeave && l.value.events.datapointLeave({ datapoint: e, seriesIndex: r + m.value.start }));
}
function bt() {
f.value.showTable = !f.value.showTable;
}
function xt() {
f.value.dataLabels.show = !f.value.dataLabels.show;
}
function pt() {
f.value.showTooltip = !f.value.showTooltip;
}
function yt(a) {
qe.value = a, Ta.value += 1;
}
function kt() {
if (!l.value.responsiveProportionalSizing) {
y.value.dataLabels = l.value.chart.grid.labels.fontSize, y.value.yAxis = l.value.chart.grid.labels.axis.fontSize, y.value.xAxis = l.value.chart.grid.labels.xAxisLabels.fontSize, y.value.plotLabels = l.value.chart.labels.fontSize, $e.value.plot = l.value.plot.radius, $e.value.line = l.value.line.radius;
return;
}
y.value.dataLabels = dl({
relator: ve.value,
adjuster: 400,
source: l.value.chart.grid.labels.fontSize,
threshold: 10,
fallback: 10
}), y.value.yAxis = dl({
relator: ee.value,
adjuster: 1e3,
source: l.value.chart.grid.labels.axis.fontSize,
threshold: 10,
fallback: 10
}), y.value.xAxis = dl({
relator: ee.value,
adjuster: 1e3,
source: l.value.chart.grid.labels.xAxisLabels.fontSize,
threshold: 10,
fallback: 10
}), y.value.plotLabels = dl({
relator: ee.value,
adjuster: 800,
source: l.value.chart.labels.fontSize,
threshold: 10,
fallback: 10
}), $e.value.plot = dl({
relator: ee.value,
adjuster: 800,
source: l.value.plot.radius,
threshold: 1,
fallback: 1
}), $e.value.line = dl({
relator: ee.value,
adjuster: 800,
source: l.value.line.radius,
threshold: 1,
fallback: 1
});
}
function pa() {
Rt(g.dataset) ? (wa({
componentName: "VueUiXy",
type: "dataset",
debug: yl.value
}), Ol.value = !0) : g.dataset.forEach((r, e) => {
[null, void 0].includes(r.name) && (wa({
componentName: "VueUiXy",
type: "datasetSerieAttribute",
property: "name (string)",
index: e,
debug: yl.value
}), Ol.value = !0);
}), yl.value && g.dataset.forEach((r) => {
r.series.forEach((e, s) => {
Jl(e) || console.warn(`VueUiXy has detected an unsafe value in your dataset:
-----> The serie '${r.name}' contains the value '${e}' at index ${s}.
'${e}' was converted to null to allow the chart to display.`);
});
}), Rt(g.dataset) || (Ol.value = l.value.loading), Fa.value = l.value.chart.userOptions.showOnChartHover, ia.value = l.value.chart.userOptions.keepStateOnChartLeave, Il.value = !l.value.chart.userOptions.showOnChartHover, va();
const a = 12;
if (l.value.responsive) {
const e = Ie.value.parentNode;
Ee.value && (Ee.value.unobserve(ra.value), Ee.value.disconnect());
const { height: s, width: t } = e.getBoundingClientRect();
let i = null, o = 0;
l.value.chart.title.show && fl.value && (i = fl.value, o = i.getBoundingClientRect().height);
let L = null, M = 0;
l.value.chart.zoom.show && Oe.value > 6 && ca.value && Fe.value && Fe.value.$el && (L = Fe.value.$el, M = L.getBoundingClientRect().height);
let F = null, S = 0;
l.value.chart.legend.show && rl.value && (F = rl.value, S = F.getBoundingClientRect().height);
let T = 0;
gl.value && (T = gl.value.getBoundingClientRect().height);
let W = 0;
ml.value && (W = ml.value.getBoundingClientRect().height), ve.value = s - o - S - M - T - W - a, ee.value = t, zl.value = `0 0 ${ee.value < 0 ? 10 : ee.value} ${ve.value < 0 ? 10 : ve.value}`, kt();
const k = new ResizeObserver((V) => {
for (const z of V)
l.value.chart.title.show && fl.value ? o = fl.value.getBoundingClientRect().height : o = 0, Fe.value && Fe.value.$el ? M = Fe.value.$el.getBoundingClientRect().height : M = 0, rl.value ? S = rl.value.getBoundingClientRect().height : S = 0, gl.value ? T = gl.value.getBoundingClientRect().height : T = 0, ml.value ? W = ml.value.getBoundingClientRect().height : W = 0, requestAnimationFrame(() => {
ve.value = z.contentRect.height - o - S - M - T - W - a, ee.value = z.contentBoxSize[0].inlineSize, zl.value = `0 0 ${ee.value < 0 ? 10 : ee.value} ${ve.value < 0 ? 10 : ve.value}`, kt();
});
});
Ee.value = k, ra.value = e, k.observe(e);
} else
ve.value = l.value.chart.height, ee.value = l.value.chart.width, y.value.dataLabels = l.value.chart.grid.labels.fontSize, y.value.yAxis = l.value.chart.grid.labels.axis.fontSize, y.value.xAxis = l.value.chart.grid.labels.xAxisLabels.fontSize, y.value.plotLabels = l.value.chart.labels.fontSize, $e.value.plot = l.value.plot.radius, $e.value.line = l.value.line.radius, zl.value = `0 0 ${ee.value} ${ve.value}`;
}
function _t(a) {
co.value = {
x: a.clientX,
y: a.clientY
};
}
Zl(() => {
pa(), Pl(), document.addEventListener("mousemove", _t, { passive: !0 }), document.addEventListener("scroll", Xa, { passive: !0 });
}), ka(() => {
document.removeEventListener("scroll", Xa, { passive: !0 }), document.removeEventListener("mousemove", _t, { passive: !0 }), Ee.value && (Ee.value.unobserve(ra.value), Ee.value.disconnect(), Ee.value = null);
}), Lr({
timeLabelsEls: sl,
timeLabels: de,
slicer: m,
configRef: l,
rotationPath: ["chart", "grid", "labels", "xAxisLabels", "rotation"],
autoRotatePath: ["chart", "grid", "labels", "xAxisLabels", "autoRotate", "enable"],
isAutoSize: mo,
height: ve,
width: ee,
rotation: l.value.chart.grid.labels.xAxisLabels.autoRotate.angle
});
const ql = x(!1), wt = x(null), St = x(200), Yo = b(
() => _.value ?? B.value ?? 0
);
function Wo() {
const a = Math.ceil(St.value || 200);
return Math.min(Math.max(a, 1), 200);
}
function Xo() {
const a = Wo(), r = 200, e = Math.max(1, $.value), s = c.value.width / e, i = c.value?.left + Yo.value * s + s / 2 - a / 2 - (r - a) / 2, o = c.value?.left - (r - a) / 2, L = c.value?.right - (r + a) / 2, M = Math.max(o, Math.min(i, L));
return N(M);
}
Zl(() => {
let a = null, r = null;
const e = (i) => {
cancelAnimationFrame(r), r = requestAnimationFrame(() => {
St.value = Math.min(Math.max(Math.ceil(i || 0), 1), 200);
});
}, s = new ResizeObserver((i) => {
let o = i.find((L) => L.target === a) || i[0];
o && e(o.contentRect.width || 200);
}), t = Lt((i) => {
const o = wt.value;
a && a !== o && (s.unobserve(a), a = null), o && o !== a && (Mt(() => {
o.offsetParent !== null && e(o.offsetWidth || o.getBoundingClientRect().width || 200);
}), s.observe(o), a = o), i(() => {
a && (s.unobserve(a), a = null);
});
});
ka(() => {
try {
a && s.unobserve(a), s.disconnect(), t();
} catch {
}
});
});
const Go = b(() => {
if ([null, void 0].includes(_.value) && [null, void 0].includes(B.value)) return "";
const a = (_.value != null ? _.value : 0) || (B.value != null ? B.value : 0), r = l.value.chart.timeTag.customFormat;
if (ql.value = !1, Pt(r))
try {
const e = r({
absoluteIndex: a + m.value.start,
seriesIndex: a,
datapoint: je.value,
bars: Me.value,
lines: te.value,
plots: xe.value,
config: l.value
});
if (typeof e == "string")
return ql.value = !0, e;
} catch {
console.warn("Custom format cannot be applied on timeTag."), ql.value = !1;
}
if (!ql.value)
return [null, void 0].includes(de.value[a]) ? "" : l.value.chart.grid.labels.xAxisLabels.datetimeFormatter.enable && !l.value.chart.timeTag.useDefaultFormat ? nl.value(a + m.value.start, l.value.chart.timeTag.timeFormat) : de.value[a].text;
});
Ll(() => g.dataset, (a) => {
Array.isArray(a) && a.length > 0 && (Ol.value = !1), Oe.value = Math.max(...ge.value.map((r) => Re(r.series).length)), m.value = {
start: 0,
end: Oe.value
}, no.value += 1, sa.value += 1, ul();
}, { deep: !0 }), Ll(() => g.config, (a) => {
ie.value || (l.value = na()), pa(), Ia.value += 1, za.value += 1, va(), ul();
}, { deep: !0 });
const ya = x(!1);
function Ct() {
const a = Ie.value?.parentNode;
if (!a) {
ya.value = !1;
return;
}
const r = a.getBoundingClientRect();
ya.value = r.width > 2 && r.height > 2;
}
Zl(() => {
Ct();
const a = new ResizeObserver(() => {
Ct(), ya.value && (pa(), ul(), Pl());
});
Ie.value?.parentNode && a.observe(Ie.value.parentNode);
}), Ll(l, () => {
va();
}, { immediate: !0 });
const Cl = b(() => {
const a = l.value.table.useDialog && !l.value.showTable, r = f.value.showTable;
return {
component: a ? oo : Ir,
title: `${l.value.chart.title.text}${l.value.chart.title.subtitle.text ? `: ${l.value.chart.title.subtitle.text}` : ""}`,
props: a ? {
backgroundColor: l.value.table.th.backgroundColor,
color: l.value.table.th.color,
headerColor: l.value.table.th.color,
headerBg: l.value.table.th.backgroundColor,
isFullscreen: qe.value,
fullscreenParent: Ie.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: r,
maxHeight: 1e4,
body: {
backgroundColor: l.value.chart.backgroundColor,
color: l.value.chart.color
},
head: {
backgroundColor: l.value.chart.backgroundColor,
color: l.value.chart.color
}
}
}
};
});
Ll(() => f.value.showTable, (a) => {
l.value.showTable || (a && l.value.table.useDialog && il.value ? il.value.open() : il.value && il.value.close && il.value.close());
});
function $t() {
f.value.showTable = !1, oa.value && oa.value.setTableIconState(!1);
}
const Uo = b(() => me.value.map((a) => ({
shape: a.type === "bar" ? "square" : a.shape ?? "circle",
color: a.color,
name: a.name
}))), qo = b(() => l.value.chart.backgroundColor), Zo = b(() => l.value.chart.legend), Jo = b(() => l.value.chart.title), { exportSvg: Qo, getSvg: Ko } = $r({
svg: se,
title: Jo,
legend: Zo,
legendItems: Uo,
backgroundColor: qo
});
async function At({ isCb: a }) {
if (a) {
const { blob: r, url: e, text: s, dataUrl: t } = await Ko();
l.value.chart.userOptions.callbacks.svg({ blob: r, url: e, text: s, dataUrl: t });
} else
Qo();
}
return Jt({
getData: To,
getImage: zo,
generatePdf: Ra,
generateImage: Ha,
generateSvg: At,
generateCsv: xa,
hideSeries: Fo,
showSeries: Io,
toggleStack: Za,
toggleTable: bt,
toggleLabels: xt,
toggleTooltip: pt,
toggleAnnotator: fa,
toggleFullscreen: yt
}), (a, r) => (u(), n("div", {
id: `vue-ui-xy_${H.value}`,
class: ll(`vue-data-ui-component vue-ui-xy ${qe.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${l.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "chart",
ref: Ie,
style: C(`background:${l.value.chart.backgroundColor}; color:${l.value.chart.color};width:100%;font-family:${l.value.chart.fontFamily};${l.value.responsive ? "height: 100%" : ""}`),
onMouseenter: r[6] || (r[6] = () => Ua(!0)),
onMouseleave: r[7] || (r[7] = () => Ua(!1)),
onClick: ot
}, [
l.value.chart.userOptions.buttons.annotator && se.value ? (u(), Te(v(to), {
key: 0,
svgRef: se.value,
backgroundColor: l.value.chart.backgroundColor,
color: l.value.chart.color,
active: xl.value,
onClose: fa
}, {
"annotator-action-close": G(() => [
P(a.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": G(({ color: e }) => [
P(a.$slots, "annotator-action-color", ke(_e({ color: e })), void 0, !0)
]),
"annotator-action-draw": G(({ mode: e }) => [
P(a.$slots, "annotator-action-draw", ke(_e({ mode: e })), void 0, !0)
]),
"annotator-action-undo": G(({ disabled: e }) => [
P(a.$slots, "annotator-action-undo", ke(_e({ disabled: e })), void 0, !0)
]),
"annotator-action-redo": G(({ disabled: e }) => [
P(a.$slots, "annotator-action-redo", ke(_e({ disabled: e })), void 0, !0)
]),
"annotator-action-delete": G(({ disabled: e }) => [
P(a.$slots, "annotator-action-delete", ke(_e({ disabled: e })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
Bo.value ? (u(), n("div", {
key: 1,
ref_key: "noTitle",
ref: ml,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%; background:transparent"
}, null, 512)) : h("", !0),
l.value.chart.title.show ? (u(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: fl,
class: "vue-ui-xy-title",
style: C(`font-family:${l.value.chart.fontFamily}`)
}, [
(u(), Te(Tr, {
key: `title_${Ia.value}`,
config: {
title: {
cy: "xy-div-title",
...l.value.chart.title
},
subtitle: {
cy: "xy-div-subtitle",
...l.value.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 4)) : h("", !0),
p("div", {
id: `legend-top-${H.value}`
}, null, 8, Br),
l.value.chart.userOptions.show && (ia.value || Il.value) ? (u(), Te(v(eo), {
ref_key: "userOptionsRef",
ref: oa,
key: `user_options_${Ta.value}`,
backgroundColor: l.value.chart.backgroundColor,
color: l.value.chart.color,
isPrinting: v(da),
isImaging: v(Ea),
uid: H.value,
hasTooltip: l.value.chart.userOptions.buttons.tooltip && l.value.chart.tooltip.show,
hasPdf: l.value.chart.userOptions.buttons.pdf,
hasXls: l.value.chart.userOptions.buttons.csv,
hasImg: l.value.chart.userOptions.buttons.img,
hasSvg: l.value.chart.userOptions.buttons.svg,
hasLabel: l.value.chart.userOptions.buttons.labels,
hasTable: l.value.chart.userOptions.buttons.table,
hasStack: jl.dataset.length > 1 && l.value.chart.userOptions.buttons.stack,
hasFullscreen: l.value.chart.userOptions.buttons.fullscreen,
isStacked: f.value.isStacked,
isFullscreen: qe.value,
chartElement: a.$refs.chart,
position: l.value.chart.userOptions.position,
isTooltip: f.value.showTooltip,
titles: { ...l.value.chart.userOptions.buttonTitles },
hasAnnotator: l.value.chart.userOptions.buttons.annotator,
isAnnotation: xl.value,
callbacks: l.value.chart.userOptions.callbacks,
tableDialog: l.value.table.useDialog,
printScale: l.value.chart.userOptions.print.scale,
onToggleFullscreen: yt,
onGeneratePdf: v(Ra),
onGenerateCsv: xa,
onGenerateImage: v(Ha),
onGenerateSvg: At,
onToggleTable: bt,
onToggleLabels: xt,
onToggleStack: Za,
onToggleTooltip: pt,
onToggleAnnotator: fa,
style: C({
visibility: ia.value ? Il.value ? "visible" : "hidden" : "visible"
})
}, Tt({ _: 2 }, [
a.$slots.menuIcon ? {
name: "menuIcon",
fn: G(({ isOpen: e, color: s }) => [
P(a.$slots, "menuIcon", ke(_e({ isOpen: e, color: s })), void 0, !0)
]),
key: "0"
} : void 0,
a.$slots.optionTooltip ? {
name: "optionTooltip",
fn: G(() => [
P(a.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
a.$slots.optionPdf ? {
name: "optionPdf",
fn: G(() => [
P(a.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
a.$slots.optionCsv ? {
name: "optionCsv",
fn: G(() => [
P(a.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
a.$slots.optionImg ? {
name: "optionImg",
fn: G(() => [
P(a.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
a.$slots.optionSvg ? {
name: "optionSvg",
fn: G(() => [
P(a.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
a.$slots.optionTable ? {
name: "optionTable",
fn: G(() => [
P(a.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
a.$slots.optionLabels ? {
name: "optionLabels",
fn: G(() => [
P(a.$slots, "optionLabels", {}, void 0, !0)
]),
key: "7"
} : void 0,
a.$slots.optionStack ? {
name: "optionStack",
fn: G(({ isStack: e }) => [
P(a.$slots, "optionStack", ke(_e({ isStack: e })), void 0, !0)
]),
key: "8"
} : void 0,
a.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: G(({ toggleFullscreen: e, isFullscreen: s }) => [
P(a.$slots, "optionFullscreen", ke(_e({ toggleFullscreen: e, isFullscreen: s })), void 0, !0)
]),
key: "9"
} : void 0,
a.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: G(({ toggleAnnotator: e, isAnnotator: s }) => [
P(a.$slots, "optionAnnotator", ke(_e({ toggleAnnotator: e, isAnnotator: s })), void 0, !0)
]),
key: "10"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasLabel", "hasTable", "hasStack", "hasFullscreen", "isStacked", "isFullscreen", "chartElement", "position", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "callbacks", "tableDialog", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
(u(), n("svg", {
ref_key: "svgRef",
ref: se,
xmlns: "http://www.w3.org/2000/svg",
class: ll([{ "vue-data-ui-fullscreen--on": qe.value, "vue-data-ui-fulscreen--off": !qe.value }, "vue-ui-xy-svg vue-data-ui-svg"]),
width: "100%",
viewBox: zl.value,
style: C({
background: "transparent",
color: l.value.chart.color,
fontFamily: l.value.chart.fontFamily
}),
"aria-label": Oo.value,
role: "img",
"aria-live": "polite",
preserveAspectRatio: "xMidYMid",
onMousemove: Mo,
onMouseleave: Hl,
onClick: ot
}, [
p("g", {
ref_key: "G",
ref: uo,
class: "vue-data-ui-g"
}, [
vl(v(ao)),
a.$slots["chart-background"] ? (u(), n("foreignObject", {
key: 0,
x: c.value?.left + U.value < 0 ? 0 : c.value?.left + U.value,
y: c.value?.top,
width: c.value.width - (l.value.chart.grid.position === "middle" ? 0 : c.value.width / $.value) < 0 ? 0 : c.value.width - (l.value.chart.grid.position === "middle" ? 0 : c.value.width / $.value),
height: c.value.height < 0 ? 0 : c.value.height,
style: {
pointerEvents: "none"
}
}, [
P(a.$slots, "chart-background", {}, void 0, !0)
], 8, Vr)) : h("", !0),
$.value > 0 ? (u(), n("g", Dr, [
p("g", Pr, [
l.value.chart.grid.labels.xAxis.showBaseline ? (u(), n("line", {
key: 0,
stroke: l.value.chart.grid.stroke,
"stroke-width": "1",
x1: c.value?.left + U.value,
x2: c.value?.right - U.value,
y1: v(Y)(c.value?.bottom),
y2: v(Y)(c.value?.bottom),
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, Er)) : h("", !0),
f.value.useIndividualScale ? l.value.chart.grid.showHorizontalLines ? (u(!0), n(d, { key: 2 }, w(Sl.value, (e) => (u(), n("g", null, [
e.id === I.value && e.yLabels.length ? (u(!0), n(d, { key: 0 }, w(e.yLabels, (s) => (u(), n("line", {
x1: c.value?.left + U.value,
x2: c.value?.right - U.value,
y1: v(Y)(s.y),
y2: v(Y)(s.y),
stroke: e.color,
"stroke-width": 0.5,
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, Wr))), 256)) : e.yLabels.length ? (u(!0), n(d, { key: 1 }, w(e.yLabels, (s) => (u(), n("line", {
x1: c.value?.left + U.value,
x2: c.value?.right - U.value,
y1: v(Y)(s.y),
y2: v(Y)(s.y),
stroke: l.value.chart.grid.stroke,
"stroke-width": 0.5,
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, Xr))), 256)) : h("", !0)
]))), 256)) : h("", !0) : (u(), n(d, { key: 1 }, [
l.value.chart.grid.labels.yAxis.showBaseline ? (u(), n("line", {
key: 0,
stroke: l.value.chart.grid.stroke,
"stroke-width": "1",
x1: c.value?.left + U.value,
x2: c.value?.left + U.value,
y1: v(Y)(c.value?.top),
y2: v(Y)(c.value?.bottom),
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, Rr)) : h("", !0),
l.value.chart.grid.showHorizontalLines ? (u(), n("g", Hr, [
(u(!0), n(d, null, w(nt.value, (e) => (u(), n("line", {
x1: c.value?.left + U.value,
x2: c.value?.right,
y1: v(Y)(e.y),
y2: v(Y)(e.y),
stroke: l.value.chart.grid.stroke,
"stroke-width": 0.5,
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, Yr))), 256))
])) : h("", !0)
], 64)),
l.value.chart.grid.showVerticalLines ? (u(), n("g", Gr, [
p("path", {
d: yo.value,
"stroke-width": 0.5,
stroke: l.value.chart.grid.stroke,
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, Ur)
])) : h("", !0),
l.value.chart.grid.labels.xAxisLabels.show ? (u(), n("g", qr, [
p("path", {
d: ko.value,
stroke: l.value.chart.grid.stroke,
"stroke-width": 1,
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, Zr)
])) : h("", !0)
]),
(u(!0), n(d, null, w(Me.value, (e, s) => (u(), n("defs", {
key: `def_rect_${s}`
}, [
a.$slots["bar-gradient"] ? P(a.$slots, "bar-gradient", al({
key: 0,
ref_for: !0
}, { series: e, positiveId: `rectGradient_pos_${s}_${H.value}`, negativeId: `rectGradient_neg_${s}_${H.value}` }), void 0, !0) : (u(), n(d, { key: 1 }, [
p("linearGradient", {
id: `rectGradient_pos_${s}_${H.value}`,
x2: "0%",
y2: "100%"
}, [
p("stop", {
offset: "0%",
"stop-color": e.color
}, null, 8, Qr),
p("stop", {
offset: "62%",
"stop-color": `${v(ol)(e.color, 0.02)}`
}, null, 8, Kr),
p("stop", {
offset: "100%",
"stop-color": `${v(ol)(e.color, 0.05)}`
}, null, 8, jr)
], 8, Jr),
p("linearGradient", {
id: `rectGradient_neg_${s}_${H.value}`,
x2: "0%",
y2: "100%"
}, [
p("stop", {
offset: "0%",
"stop-color": `${v(ol)(e.color, 0.05)}`
}, null, 8, ls),
p("stop", {
offset: "38%",
"stop-color": `${v(ol)(e.color, 0.02)}`
}, null, 8, as),
p("stop", {
offset: "100%",
"stop-color": e.color
}, null, 8, ts)
], 8, es)
], 64))
]))), 128)),
(u(!0), n(d, null, w(xe.value, (e, s) => (u(), n("defs", {
key: `def_plot_${s}`
}, [
p("radialGradient", {
id: `plotGradient_${s}_${H.value}`,
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
p("stop", {
offset: "0%",
"stop-color": `${v(ol)(e.color, 0.05)}`
}, null, 8, rs),
p("stop", {
offset: "100%",
"stop-color": e.color
}, null, 8, ss)
], 8, os)
]))), 128)),
(u(!0), n(d, null, w(te.value, (e, s) => (u(), n("defs", {
key: `def_line_${e.id}`
}, [
p("radialGradient", {
id: `lineGradient_${s}_${H.value}`,
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
p("stop", {
offset: "0%",
"stop-color": `${v(ol)(e.color, 0.05)}`
}, null, 8, us),
p("stop", {
offset: "100%",
"stop-color": e.color
}, null, 8, ns)
], 8, is),
a.$slots["area-gradient"] ? P(a.$slots, "area-gradient", al({
key: 0,
ref_for: !0
}, { series: e, id: `areaGradient_${s}_${H.value}` }), void 0, !0) : (u(), n("linearGradient", {
key: 1,
id: `areaGradient_${s}_${H.value}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%"
}, [
p("stop", {
offset: "0%",
"stop-color": `${v(ze)(v(ol)(e.color, 0.03), l.value.line.area.opacity)}`
}, null, 8, vs),
p("stop", {
offset: "100%",
"stop-color": `${v(ze)(e.color, l.value.line.area.opacity)}`
}, null, 8, ds)
], 8, cs))
]))), 128)),
(u(!0), n(d, null, w(No.value, (e) => (u(), n("g", null, [
e.show ? (u(), n(d, { key: 0 }, [
(u(!0), n(d, null, w(e.span, (s, t) => (u(), n("g", null, [
p("rect", {
style: C({
transition: "none",
opacity: e.from + t >= m.value.start && e.from + t <= m.value.end - 1 ? 1 : 0
}),
x: c.value?.left + c.value.width / $.value * (e.from + t - m.value.start),
y: c.value?.top,
height: c.value.height < 0 ? 10 : c.value.height,
width: c.value.width / $.value < 0 ? 1e-5 : c.value.width / $.value,
fill: v(ze)(e.color, e.opacity)
}, null, 12, hs)
]))), 256)),
(u(!0), n(d, null, w(e.span, (s, t) => (u(), n("g", null, [
e.caption.text && t === 0 ? (u(), n("foreignObject", {
key: 0,
x: c.value?.left + c.value.width / $.value * (e.from + t - m.value.start) - (e.caption.width === "auto" ? 0 : e.caption.width / 2 - c.value.width / $.value * e.span / 2),
y: c.value?.top + e.caption.offsetY,
style: C({
overflow: "visible",
opacity: e.to >= m.value.start && e.from < m.value.end ? 1 : 0
}),
height: "1",
width: e.caption.width === "auto" ? c.value.width / $.value * e.span : e.caption.width
}, [
p("div", {
style: C(`padding:${e.caption.padding}px;text-align:${e.caption.textAlign};font-size:${e.caption.fontSize}px;color:${e.caption.color};font-weight:${e.caption.bold ? "bold" : "normal"}`)
}, ae(e.caption.text), 5)
], 12, fs)) : h("", !0)
]))), 256))
], 64)) : h("", !0)
]))), 256)),
Ga.value ? (u(), n("g", gs, [
(u(!0), n(d, null, w($.value, (e, s) => (u(), n("g", {
key: `tooltip_trap_highlighter_${s}`
}, [
p("rect", {
x: c.value?.left + c.value.width / $.value * s,
y: c.value?.top,
height: c.value.height < 0 ? 10 : c.value.height,
width: c.value.width / $.value < 0 ? 1e-5 : c.value.width / $.value,
fill: [B.value, _.value, Ze.value].includes(s) ? v(ze)(l.value.chart.highlighter.color, l.value.chart.highlighter.opacity) : "transparent",
style: { transition: "none !important", animation: "none !important" }
}, null, 8, ms)
]))), 128))
])) : h("", !0),
Me.value.length ? (u(!0), n(d, { key: 1 }, w(Me.value, (e, s) => (u(), n("g", {
key: `serie_bar_${e.id}`,
class: ll(`serie_bar_${s}`),
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, [
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n("g", {
key: `bar_plot_${s}_${i}`
}, [
be(t.value) ? (u(), n("rect", {
key: 0,
x: Rl(t) + Gl.value / 2,
y: f.value.useIndividualScale ? at(t) : lt(t),
height: f.value.useIndividualScale ? Math.abs(et(t)) : Math.abs(ja(t)),
width: Xl.value - Gl.value,
rx: l.value.bar.borderRadius,
fill: l.value.bar.useGradient ? t.value >= 0 ? `url(#rectGradient_pos_${s}_${H.value})` : `url(#rectGradient_neg_${s}_${H.value})` : e.color,
stroke: l.value.bar.border.useSerieColor ? e.color : l.value.bar.border.stroke,
"stroke-width": l.value.bar.border.strokeWidth,
style: C({
transition: v(ie) || !l.value.bar.showTransition ? void 0 : `all ${l.value.bar.transitionDurationMs}ms ease-in-out`
})
}, null, 12, bs)) : h("", !0),
be(t.value) && a.$slots.pattern ? (u(), n("rect", {
key: 1,
x: Rl(t) - Gl.value / 2,
y: f.value.useIndividualScale ? at(t) : lt(t),
height: f.value.useIndividualScale ? Math.abs(et(t)) : Math.abs(ja(t)),
width: Xl.value - Gl.value,
rx: l.value.bar.borderRadius,
fill: `url(#pattern_${H.value}_${e.slotAbsoluteIndex})`,
stroke: l.value.bar.border.useSerieColor ? e.color : l.value.bar.border.stroke,
"stroke-width": l.value.bar.border.strokeWidth,
style: C({ transition: v(ie) || !l.value.bar.showTransition ? void 0 : `all ${l.value.bar.transitionDurationMs}ms ease-in-out` })
}, null, 12, xs)) : h("", !0),
t.comment && l.value.chart.comments.show ? (u(), n("foreignObject", {
key: 2,
style: { overflow: "visible" },
height: "12",
width: Xl.value + l.value.chart.comments.width,
x: Rl(t) - l.value.chart.comments.width / 2 + l.value.chart.comments.offsetX,
y: v(N)(t.y) + l.value.chart.comments.offsetY + 6
}, [
P(a.$slots, "plot-comment", {
plot: { ...t, color: e.color, seriesIndex: s, datapointIndex: i }
}, void 0, !0)
], 8, ps)) : h("", !0)
]))), 128))
], 6))), 128)) : h("", !0),
!f.value.useIndividualScale && l.value.chart.grid.labels.zeroLine.show ? (u(), n("line", {
key: 2,
stroke: l.value.chart.grid.stroke,
"stroke-width": "1",
x1: c.value?.left + U.value,
x2: c.value?.right,
y1: v(Y)(ue.value),
y2: v(Y)(ue.value),
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, ys)) : h("", !0),
l.value.chart.highlighter.useLine && (![null, void 0].includes(_.value) || ![null, void 0].includes(B.value)) ? (u(), n("g", ks, [
p("line", {
x1: c.value?.left + c.value.width / $.value * ((_.value !== null ? _.value : 0) || (B.value !== null ? B.value : 0)) + c.value.width / $.value / 2,
x2: c.value?.left + c.value.width / $.value * ((_.value !== null ? _.value : 0) || (B.value !== null ? B.value : 0)) + c.value.width / $.value / 2,
y1: v(Y)(c.value?.top),
y2: v(Y)(c.value?.bottom),
stroke: l.value.chart.highlighter.color,
"stroke-width": l.value.chart.highlighter.lineWidth,
"stroke-dasharray": l.value.chart.highlighter.lineDasharray,
"stroke-linecap": "round",
style: { transition: "none !important", animation: "none !important", "pointer-events": "none" }
}, null, 8, _s)
])) : h("", !0),
l.value.chart.grid.frame.show ? (u(), n("rect", {
key: 4,
style: { pointerEvents: "none", transition: "none", animation: "none !important" },
x: c.value?.left + U.value < 0 ? 0 : c.value?.left + U.value,
y: c.value?.top,
width: c.value.width - (l.value.chart.grid.position === "middle" ? 0 : c.value.width / $.value) < 0 ? 0 : c.value.width - (l.value.chart.grid.position === "middle" ? 0 : c.value.width / $.value),
height: c.value.height < 0 ? 0 : c.value.height,
fill: "transparent",
stroke: l.value.chart.grid.frame.stroke,
"stroke-width": l.value.chart.grid.frame.strokeWidth,
"stroke-linecap": l.value.chart.grid.frame.strokeLinecap,
"stroke-linejoin": l.value.chart.grid.frame.strokeLinejoin,
"stroke-dasharray": l.value.chart.grid.frame.strokeDasharray
}, null, 8, ws)) : h("", !0),
l.value.chart.grid.labels.show ? (u(), n("g", {
key: 5,
ref_key: "scaleLabels",
ref: ta
}, [
f.value.useIndividualScale ? (u(), n(d, { key: 0 }, [
(u(!0), n(d, null, w(Sl.value, (e) => (u(), n("g", null, [
p("line", {
x1: e.x + U.value - c.value.individualOffsetX,
x2: e.x + U.value - c.value.individualOffsetX,
y1: f.value.isStacked ? v(Y)(c.value?.bottom - e.yOffset - e.individualHeight) : v(Y)(c.value?.top),
y2: f.value.isStacked ? v(Y)(c.value?.bottom - e.yOffset) : v(Y)(c.value?.bottom),
stroke: e.color,
"stroke-width": l.value.chart.grid.stroke,
"stroke-linecap": "round",
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.3 : 1};transition:opacity 0.2s ease-in-out; animation: none !important`)
}, null, 12, Ss)
]))), 256)),
(u(!0), n(d, null, w(Sl.value, (e) => (u(), n("g", {
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.3 : 1};transition:opacity 0.2s ease-in-out`)
}, [
p("text", {
fill: e.color,
"font-size": y.value.dataLabels * 0.8,
"text-anchor": "middle",
transform: `translate(${e.x - y.value.dataLabels * 0.8 / 2 + U.value}, ${f.value.isStacked ? c.value?.bottom - e.yOffset - e.individualHeight / 2 : c.value?.top + c.value.height / 2}) rotate(-90)`
}, ae(e.name) + " " + ae(e.scaleLabel && e.unique && e.scaleLabel !== e.id ? `-
${e.scaleLabel}` : ""), 9, Cs),
(u(!0), n(d, null, w(e.yLabels, (s, t) => (u(), n(d, null, [
l.value.chart.grid.labels.yAxis.showCrosshairs ? (u(), n("line", {
key: 0,
x1: e.x + 3 + U.value - l.value.chart.grid.labels.yAxis.crosshairSize - c.value.individualOffsetX,
x2: e.x + U.value - c.value.individualOffsetX,
y1: v(Y)(s.y),
y2: v(Y)(s.y),
stroke: e.color,
"stroke-width": 1,
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, $s)) : h("", !0)
], 64))), 256)),
(u(!0), n(d, null, w(e.yLabels, (s, t) => (u(), n("text", {
x: e.x - 5 + U.value - c.value.individualOffsetX,
y: v(Y)(s.y) + y.value.dataLabels / 3,
"font-size": y.value.dataLabels,
"text-anchor": "end",
fill: e.color
}, ae(v(re)(
l.value.chart.grid.labels.yAxis.formatter,
s.value,
v(Ve)({
p: s.prefix,
v: s.value,
s: s.suffix,
r: l.value.chart.grid.labels.yAxis.rounding
}),
{ datapoint: s.datapoint, seriesIndex: t }
)), 9, As))), 256))
], 4))), 256))
], 64)) : (u(!0), n(d, { key: 1 }, w(nt.value, (e, s) => (u(), n("g", {
key: `yLabel_${s}`
}, [
be(e) && e.value >= Le.value.min && e.value <= Le.value.max && l.value.chart.grid.labels.yAxis.showCrosshairs ? (u(), n("line", {
key: 0,
x1: c.value?.left + U.value,
x2: c.value?.left + U.value - l.value.chart.grid.labels.yAxis.crosshairSize,
y1: v(Y)(e.y),
y2: v(Y)(e.y),
stroke: l.value.chart.grid.stroke,
"stroke-width": "1",
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, Ls)) : h("", !0),
e.value >= Le.value.min && e.value <= Le.value.max ? (u(), n("text", {
key: 1,
x: c.value.scaleLabelX - l.value.chart.grid.labels.yAxis.crosshairSize,
y: v(N)(e.y + y.value.dataLabels / 3),
"font-size": y.value.dataLabels,
"text-anchor": "end",
fill: l.value.chart.grid.labels.color
}, ae(be(e.value) ? v(re)(
l.value.chart.grid.labels.yAxis.formatter,
e.value,
v(Ve)({
p: e.prefix,
v: e.value,
s: e.suffix,
r: l.value.chart.grid.labels.yAxis.rounding
})
) : ""), 9, Ms)) : h("", !0)
]))), 128))
], 512)) : h("", !0),
(u(!0), n(d, null, w(xe.value, (e, s) => (u(), n("g", {
key: `serie_plot_${e.id}`,
class: ll(`serie_plot_${s}`),
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, [
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n("g", {
key: `circle_plot_${s}_${i}`
}, [
t && be(t.value) ? (u(), Te(Kl, {
key: 0,
shape: ["triangle", "square", "diamond", "pentagon", "hexagon", "star"].includes(e.shape) ? e.shape : "circle",
color: l.value.plot.useGradient ? `url(#plotGradient_${s}_${H.value})` : l.value.plot.dot.useSerieColor ? e.color : l.value.plot.dot.fill,
plot: { x: v(N)(t.x), y: v(N)(t.y) },
radius: _.value !== null && _.value === i || B.value !== null && B.value === i ? ($e.value.plot || 6) * 1.5 : $e.value.plot || 6,
stroke: l.value.plot.dot.useSerieColor ? l.value.chart.backgroundColor : e.color,
strokeWidth: l.value.plot.dot.strokeWidth,
transition: v(ie) || !l.value.plot.showTransition || _.value !== null && _.value === i || B.value !== null && B.value === i ? void 0 : `all ${l.value.plot.transitionDurationMs}ms ease-in-out`
}, null, 8, ["shape", "color", "plot", "radius", "stroke", "strokeWidth", "transition"])) : h("", !0),
t.comment && l.value.chart.comments.show ? (u(), n("foreignObject", {
key: 1,
style: { overflow: "visible" },
height: "12",
width: l.value.chart.comments.width,
x: t.x - l.value.chart.comments.width / 2 + l.value.chart.comments.offsetX,
y: t.y + l.value.chart.comments.offsetY + 6
}, [
p("div", zs, [
P(a.$slots, "plot-comment", {
plot: { ...t, color: e.color, seriesIndex: s, datapointIndex: i }
}, void 0, !0)
])
], 8, Ts)) : h("", !0)
]))), 128))
], 6))), 128)),
(u(!0), n(d, null, w(te.value, (e, s) => (u(), n("g", {
key: `serie_line_${e.id}`,
class: ll(`serie_line_${s}`),
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, [
e.smooth && e.plots.length > 1 && e.curve ? (u(), n("path", {
key: 0,
d: `M${e.curve}`,
stroke: l.value.chart.backgroundColor,
"stroke-width": l.value.line.strokeWidth + 1,
"stroke-dasharray": e.dashed ? l.value.line.strokeWidth * 2 : 0,
fill: "none",
style: C({ transition: v(ie) || !l.value.line.showTransition ? void 0 : `all ${l.value.line.transitionDurationMs}ms ease-in-out` })
}, null, 12, Is)) : e.plots.length > 1 && e.straight ? (u(), n("path", {
key: 1,
d: `M${e.straight}`,
stroke: l.value.chart.backgroundColor,
"stroke-width": l.value.line.strokeWidth + 1,
"stroke-dasharray": e.dashed ? l.value.line.strokeWidth * 2 : 0,
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: C({ transition: v(ie) || !l.value.line.showTransition ? void 0 : `all ${l.value.line.transitionDurationMs}ms ease-in-out` })
}, null, 12, Fs)) : h("", !0)
], 6))), 128)),
a.$slots.pattern ? (u(), n("defs", Os, [
(u(!0), n(d, null, w(Pe.value, (e, s) => P(a.$slots, "pattern", al({
key: `serie_pattern_slot_${e.id}`
}, { ref_for: !0 }, { ...e, seriesIndex: e.slotAbsoluteIndex, patternId: `pattern_${H.value}_${s}` }), void 0, !0)), 128))
])) : h("", !0),
dt.value.length && !f.value.isStacked ? (u(), n("g", Bs, [
(u(!0), n(d, null, w(dt.value, (e) => (u(), n("path", {
key: e.key,
d: e.d,
fill: e.color,
"fill-opacity": l.value.line.interLine.fillOpacity,
stroke: "none",
"pointer-events": "none",
style: C({ transition: v(ie) || !l.value.line.showTransition ? void 0 : `all ${l.value.line.transitionDurationMs}ms ease-in-out` })
}, null, 12, Ns))), 128))
])) : h("", !0),
(u(!0), n(d, null, w(te.value, (e, s) => (u(), n("g", {
key: `serie_line_above_${e.id}`,
class: ll(`serie_line_${s}`),
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, [
e.useArea && e.plots.length > 1 ? (u(), n("g", Vs, [
e.smooth ? (u(!0), n(d, { key: 0 }, w(e.curveAreas, (t, i) => (u(), n(d, { key: i }, [
t ? (u(), n("path", {
key: 0,
d: t,
fill: l.value.line.area.useGradient ? `url(#areaGradient_${s}_${H.value})` : v(ze)(e.color, l.value.line.area.opacity),
style: C({ transition: v(ie) || !l.value.line.showTransition ? void 0 : `all ${l.value.line.transitionDurationMs}ms ease-in-out` })
}, null, 12, Ds)) : h("", !0),
a.$slots.pattern && t ? (u(), n("path", {
key: 1,
d: t,
fill: `url(#pattern_${H.value}_${e.slotAbsoluteIndex})`,
style: C({ transition: v(ie) || !l.value.line.showTransition ? void 0 : `all ${l.value.line.transitionDurationMs}ms ease-in-out` })
}, null, 12, Ps)) : h("", !0)
], 64))), 128)) : (u(!0), n(d, { key: 1 }, w(e.area.split(";"), (t, i) => (u(), n(d, { key: i }, [
t ? (u(), n("path", {
key: 0,
d: `M${t}Z`,
fill: l.value.line.area.useGradient ? `url(#areaGradient_${s}_${H.value})` : v(ze)(e.color, l.value.line.area.opacity),
style: C({ transition: v(ie) || !l.value.line.showTransition ? void 0 : `all ${l.value.line.transitionDurationMs}ms ease-in-out` })
}, null, 12, Es)) : h("", !0),
a.$slots.pattern && t ? (u(), n("path", {
key: 1,
d: `M${t}Z`,
fill: `url(#pattern_${H.value}_${e.slotAbsoluteIndex})`,
style: C({ transition: v(ie) || !l.value.line.showTransition ? void 0 : `all ${l.value.line.transitionDurationMs}ms ease-in-out` })
}, null, 12, Rs)) : h("", !0)
], 64))), 128))
])) : h("", !0),
e.smooth && e.plots.length > 1 && e.curve ? (u(), n("path", {
key: 1,
d: `M${e.curve}`,
stroke: e.color,
"stroke-width": l.value.line.strokeWidth,
"stroke-dasharray": e.dashed ? l.value.line.strokeWidth * 2 : 0,
fill: "none",
"stroke-linecap": "round",
style: C({ transition: v(ie) || !l.value.line.showTransition ? void 0 : `all ${l.value.line.transitionDurationMs}ms ease-in-out` })
}, null, 12, Hs)) : e.plots.length > 1 && e.straight ? (u(), n("path", {
key: 2,
d: `M${e.straight}`,
stroke: e.color,
"stroke-width": l.value.line.strokeWidth,
"stroke-dasharray": e.dashed ? l.value.line.strokeWidth * 2 : 0,
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: C({ transition: v(ie) || !l.value.line.showTransition ? void 0 : `all ${l.value.line.transitionDurationMs}ms ease-in-out` })
}, null, 12, Ys)) : h("", !0),
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n(d, {
key: `circle_line_${s}_${i}`
}, [
!it.value.linePlot && t && be(t.value) || it.value.linePlot && t && be(t.value) && (_.value !== null && _.value === i || B.value !== null && B.value === i) || vt(e.plots, i) ? (u(), Te(Kl, {
key: 0,
shape: ["triangle", "square", "diamond", "pentagon", "hexagon", "star"].includes(e.shape) ? e.shape : "circle",
color: l.value.line.useGradient ? `url(#lineGradient_${s}_${H.value})` : l.value.line.dot.useSerieColor ? e.color : l.value.line.dot.fill,
plot: { x: v(N)(t.x), y: v(N)(t.y) },
radius: _.value !== null && _.value === i || B.value !== null && B.value === i ? ($e.value.line || 6) * 1.5 : (vt(e.plots, i), $e.value.line || 6),
stroke: l.value.line.dot.useSerieColor ? l.value.chart.backgroundColor : e.color,
strokeWidth: l.value.line.dot.strokeWidth,
transition: v(ie) || !l.value.line.showTransition || _.value !== null && _.value === i || B.value !== null && B.value === i ? void 0 : `all ${l.value.line.transitionDurationMs}ms ease-in-out`
}, null, 8, ["shape", "color", "plot", "radius", "stroke", "strokeWidth", "transition"])) : h("", !0),
t.comment && l.value.chart.comments.show ? (u(), n("foreignObject", {
key: 1,
style: { overflow: "visible" },
height: "12",
width: l.value.chart.comments.width,
x: t.x - l.value.chart.comments.width / 2 + l.value.chart.comments.offsetX,
y: t.y + l.value.chart.comments.offsetY + 6
}, [
p("div", Xs, [
P(a.$slots, "plot-comment", {
plot: { ...t, color: e.color, seriesIndex: s, datapointIndex: i }
}, void 0, !0)
])
], 8, Ws)) : h("", !0)
], 64))), 128))
], 6))), 128)),
(l.value.bar.labels.show || l.value.bar.serieName.show) && f.value.dataLabels.show ? (u(), n("g", Gs, [
(u(!0), n(d, null, w(Me.value, (e, s) => (u(), n(d, {
key: `xLabel_bar_${e.id}`
}, [
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n(d, {
key: `xLabel_bar_${s}_${i}`
}, [
t && (!Object.hasOwn(e, "dataLabels") || e.dataLabels === !0 || _.value !== null && _.value === i || B.value !== null && B.value === i) && l.value.bar.labels.show ? (u(), n("text", {
key: 0,
x: f.value.useIndividualScale && f.value.isStacked ? t.x + Z.value.line / 2 : Rl(t) + He() / 2 - Wl.value / 2,
y: v(N)(t.y) + (t.value >= 0 ? l.value.bar.labels.offsetY : -l.value.bar.labels.offsetY * 3),
"text-anchor": "middle",
"font-size": y.value.plotLabels,
fill: l.value.bar.labels.color,
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, ae(be(t.value) ? v(re)(
l.value.bar.labels.formatter,
t.value,
v(Ve)({
p: e.prefix || l.value.chart.labels.prefix,
v: t.value,
s: e.suffix || l.value.chart.labels.suffix,
r: l.value.bar.labels.rounding
}),
{
datapoint: t,
serie: e
}
) : ""), 13, Us)) : h("", !0),
t && l.value.bar.serieName.show ? (u(), n("text", {
key: 1,
x: f.value.useIndividualScale && f.value.isStacked ? t.x + Z.value.line / 2 : t.x + He() * 1.1,
y: t.y + (t.value > 0 ? l.value.bar.serieName.offsetY : -l.value.bar.serieName.offsetY * 3),
"text-anchor": "middle",
"font-size": y.value.plotLabels,
fill: l.value.bar.serieName.useSerieColor ? e.color : l.value.bar.serieName.color,
"font-weight": l.value.bar.serieName.bold ? "bold" : "normal",
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, ae(l.value.bar.serieName.useAbbreviation ? v(fr)({
source: e.name,
length: l.value.bar.serieName.abbreviationSize
}) : e.name), 13, qs)) : h("", !0)
], 64))), 128))
], 64))), 128))
])) : h("", !0),
l.value.plot.labels.show && f.value.dataLabels.show ? (u(), n("g", Zs, [
(u(!0), n(d, null, w(xe.value, (e, s) => (u(), n(d, {
key: `xLabel_plot_${e.id}`
}, [
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n(d, {
key: `xLabel_plot_${s}_${i}`
}, [
t && !Object.hasOwn(e, "dataLabels") || e.dataLabels === !0 || _.value !== null && _.value === i || B.value !== null && B.value === i ? (u(), n("text", {
key: 0,
x: t.x,
y: t.y + l.value.plot.labels.offsetY,
"text-anchor": "middle",
"font-size": y.value.plotLabels,
fill: l.value.plot.labels.color,
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, ae(be(t.value) ? v(re)(
l.value.plot.labels.formatter,
t.value,
v(Ve)({
p: e.prefix || l.value.chart.labels.prefix,
v: t.value,
s: e.suffix || l.value.chart.labels.suffix,
r: l.value.plot.labels.rounding
}),
{
datapoint: t,
serie: e
}
) : ""), 13, Js)) : h("", !0)
], 64))), 128))
], 64))), 128))
])) : (u(), n("g", Qs, [
(u(!0), n(d, null, w(xe.value, (e, s) => (u(), n(d, {
key: `xLabel_plot_${e.id}`
}, [
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n(d, {
key: `xLabel_plot_${s}_${i}`
}, [
l.value.plot.tag.followValue ? (u(), n(d, { key: 1 }, [
[B.value, _.value, Ze.value].includes(i) && e.useTag ? (u(), n("line", {
key: 0,
class: "vue-ui-xy-tag-plot",
x1: c.value?.left,
x2: c.value?.right,
y1: t.y,
y2: t.y,
"stroke-width": 1,
"stroke-linecap": "round",
"stroke-dasharray": "2",
stroke: e.color
}, null, 8, ai)) : h("", !0)
], 64)) : (u(), n(d, { key: 0 }, [
t && i === 0 && e.useTag && e.useTag === "start" ? (u(), n("foreignObject", {
key: 0,
x: t.x,
y: t.y - 20,
height: 24,
width: "150",
style: C(`overflow: visible; opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, [
p("div", {
style: C(`padding: 3px; background:${v(ze)(e.color, 80)};color:${v(Ge)(e.color)};width:fit-content;font-size:${y.value.plotLabels}px;border-radius: 2px;`),
innerHTML: v(re)(
l.value.plot.tag.formatter,
t.value,
e.name,
{
datapoint: t,
seriesIndex: i,
serieName: e.name
}
)
}, null, 12, js)
], 12, Ks)) : h("", !0),
t && i === e.plots.length - 1 && e.useTag && e.useTag === "end" ? (u(), n("foreignObject", {
key: 1,
x: t.x - e.name.length * (y.value.plotLabels / 2),
y: t.y - 20,
height: 24,
width: "150",
style: C(`overflow: visible; opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, [
p("div", {
style: C(`padding: 3px; background:${v(ze)(e.color, 80)};color:${v(Ge)(e.color)};width:fit-content;font-size:${y.value.plotLabels}px;border-radius: 2px;`),
innerHTML: v(re)(
l.value.plot.tag.formatter,
t.value,
e.name,
{
datapoint: t,
seriesIndex: i,
serieName: e.name
}
)
}, null, 12, li)
], 12, ei)) : h("", !0)
], 64))
], 64))), 128))
], 64))), 128))
])),
l.value.line.labels.show && f.value.dataLabels.show ? (u(), n("g", ti, [
(u(!0), n(d, null, w(te.value, (e, s) => (u(), n(d, {
key: `xLabel_line_${e.id}`
}, [
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n(d, {
key: `xLabel_line_${s}_${i}`
}, [
t && !Object.hasOwn(e, "dataLabels") || e.dataLabels === !0 || _.value !== null && _.value === i || B.value !== null && B.value === i ? (u(), n("text", {
key: 0,
x: t.x,
y: t.y + (t.value >= 0 ? l.value.line.labels.offsetY : -l.value.line.labels.offsetY * 3),
"text-anchor": "middle",
"font-size": y.value.plotLabels,
fill: l.value.line.labels.color,
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, ae(be(t.value) ? v(re)(
l.value.line.labels.formatter,
t.value,
v(Ve)({
p: e.prefix || l.value.chart.labels.prefix,
v: t.value,
s: e.suffix || l.value.chart.labels.suffix,
r: l.value.line.labels.rounding
}),
{
datapoint: t,
serie: e
}
) : ""), 13, oi)) : h("", !0)
], 64))), 128))
], 64))), 128))
])) : (u(), n("g", ri, [
(u(!0), n(d, null, w(te.value, (e, s) => (u(), n(d, {
key: `xLabel_line_${e.id}`
}, [
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n(d, {
key: `xLabel_line_${s}_${i}`
}, [
l.value.line.tag.followValue ? (u(), n(d, { key: 1 }, [
[B.value, _.value, Ze.value].includes(i) && e.useTag ? (u(), n("line", {
key: 0,
class: "vue-ui-xy-tag-line",
x1: c.value?.left,
x2: c.value?.right,
y1: t.y,
y2: t.y,
"stroke-width": 1,
"stroke-linecap": "round",
"stroke-dasharray": "2",
stroke: e.color
}, null, 8, ci)) : h("", !0)
], 64)) : (u(), n(d, { key: 0 }, [
t && i === 0 && e.useTag && e.useTag === "start" ? (u(), n("foreignObject", {
key: 0,
x: t.x,
y: t.y - 20,
height: 24,
width: "150",
style: C(`overflow: visible; opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, [
p("div", {
style: C(`padding: 3px; background:${v(ze)(e.color, 80)};color:${v(Ge)(e.color)};width:fit-content;font-size:${y.value.plotLabels}px;border-radius: 2px;`),
innerHTML: v(re)(
l.value.line.tag.formatter,
t.value,
e.name,
{
datapoint: t,
seriesIndex: i,
serieName: e.name
}
)
}, null, 12, ii)
], 12, si)) : h("", !0),
t && i === e.plots.length - 1 && e.useTag && e.useTag === "end" ? (u(), n("foreignObject", {
key: 1,
x: t.x,
y: t.y - 20,
height: 24,
width: "150",
style: C(`overflow: visible; opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, [
p("div", {
style: C(`padding: 3px; background:${v(ze)(e.color, 80)};color:${v(Ge)(e.color)};width:fit-content;font-size:${y.value.plotLabels}px;border-radius: 2px;`),
innerHTML: v(re)(
l.value.line.tag.formatter,
t.value,
e.name,
{
datapoint: t,
seriesIndex: i,
serieName: e.name
}
)
}, null, 12, ni)
], 12, ui)) : h("", !0)
], 64))
], 64))), 128))
], 64))), 128))
])),
(u(!0), n(d, null, w(te.value, (e, s) => (u(), n(d, {
key: `xLabel_line_${e.id}`
}, [
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n(d, {
key: `xLabel_line_${s}_${i}`
}, [
t && i === 0 && e.showSerieName && e.showSerieName === "start" ? (u(), n("text", {
key: 0,
x: t.x - y.value.plotLabels,
y: t.y,
"font-size": y.value.plotLabels,
"text-anchor": "end",
fill: e.color,
innerHTML: v(Ql)({
content: e.name,
fontSize: y.value.plotLabels,
fill: e.color,
x: t.x - y.value.plotLabels,
y: t.y,
maxWords: 2
}),
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, null, 12, vi)) : h("", !0),
t && i === e.plots.length - 1 && e.showSerieName && e.showSerieName === "end" ? (u(), n("text", {
key: 1,
x: t.x + y.value.plotLabels,
y: t.y,
"font-size": y.value.plotLabels,
"text-anchor": "start",
fill: e.color,
innerHTML: v(Ql)({
content: e.name,
fontSize: y.value.plotLabels,
fill: e.color,
x: t.x + y.value.plotLabels,
y: t.y,
maxWords: 2
}),
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, null, 12, di)) : h("", !0)
], 64))), 128))
], 64))), 128)),
(u(!0), n(d, null, w(xe.value, (e, s) => (u(), n(d, {
key: `xLabel_plot_${e.id}`
}, [
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n(d, {
key: `xLabel_plot_${s}_${i}`
}, [
t && i === 0 && e.showSerieName && e.showSerieName === "start" ? (u(), n("text", {
key: 0,
x: t.x - y.value.plotLabels,
y: t.y,
"font-size": y.value.plotLabels,
"text-anchor": "end",
fill: e.color,
innerHTML: v(Ql)({
content: e.name,
fontSize: y.value.plotLabels,
fill: e.color,
x: t.x - y.value.plotLabels,
y: t.y,
maxWords: 2
}),
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, null, 12, hi)) : h("", !0),
t && i === e.plots.length - 1 && e.showSerieName && e.showSerieName === "end" ? (u(), n("text", {
key: 1,
x: t.x + y.value.plotLabels,
y: t.y,
"font-size": y.value.plotLabels,
"text-anchor": "start",
fill: e.color,
innerHTML: v(Ql)({
content: e.name,
fontSize: y.value.plotLabels,
fill: e.color,
x: t.x + y.value.plotLabels,
y: t.y,
maxWords: 2
}),
style: C(`opacity:${I.value ? I.value === e.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`)
}, null, 12, fi)) : h("", !0)
], 64))), 128))
], 64))), 128)),
(u(!0), n(d, null, w([...xe.value, ...te.value, ...Me.value], (e, s) => (u(), n(d, {
key: `progression-${s}`
}, [
Object.hasOwn(e, "useProgression") && e.useProgression === !0 && !isNaN(v(Ce)(e.plots).trend) ? (u(), n("g", gi, [
p("defs", null, [
p("marker", {
id: `progression_arrow_${s}`,
markerWidth: "9",
markerHeight: "9",
viewBox: "-1 -1 9 9",
markerUnits: "userSpaceOnUse",
refX: "7",
refY: 7 / 2,
orient: "auto",
overflow: "visible"
}, [
p("polygon", {
points: "0,0 7,3.5 0,7",
fill: e.color,
stroke: l.value.chart.backgroundColor,
"stroke-width": "1",
"stroke-linejoin": "round"
}, null, 8, bi)
], 8, mi)
]),
e.plots.length > 1 ? (u(), n("line", {
key: 0,
x1: v(Ce)(e.plots).x1 + (e.type === "bar" ? He() : 0),
x2: v(Ce)(e.plots).x2 + (e.type === "bar" ? He() : 0),
y1: v(Y)(v(Ce)(e.plots).y1),
y2: v(Y)(v(Ce)(e.plots).y2),
"stroke-width": 1,
stroke: l.value.chart.backgroundColor,
"stroke-dasharray": 2,
"stroke-linecap": "round",
"stroke-linejoin": "round",
"marker-end": `url(#progression_arrow_${s})`
}, null, 8, xi)) : h("", !0),
e.plots.length > 1 ? (u(), n("line", {
key: 1,
x1: v(Ce)(e.plots).x1 + (e.type === "bar" ? He() : 0),
x2: v(Ce)(e.plots).x2 + (e.type === "bar" ? He() : 0),
y1: v(Y)(v(Ce)(e.plots).y1),
y2: v(Y)(v(Ce)(e.plots).y2),
"stroke-width": 1,
stroke: e.color,
"stroke-dasharray": 2,
"stroke-linecap": "round",
"stroke-linejoin": "round",
"marker-end": `url(#progression_arrow_${s})`
}, null, 8, pi)) : h("", !0),
e.plots.length > 1 ? (u(), n("text", {
key: 2,
"text-anchor": "middle",
x: v(Ce)(e.plots).x2 + (e.type === "bar" ? He() : 0),
y: v(Ce)(e.plots).y2 - 12,
"font-size": y.value.plotLabels,
fill: e.color,
stroke: l.value.chart.backgroundColor,
"stroke-width": 4,
"stroke-linecap": "round",
"stroke-linejoin": "round",
"paint-order": "stroke fill"
}, ae(v(Ve)({
v: v(Ce)(e.plots).trend * 100,
s: "%",
r: 2
})), 9, yi)) : h("", !0)
])) : h("", !0)
], 64))), 128)),
f.value.useIndividualScale && !f.value.isStacked ? (u(), n(d, { key: 13 }, [
p("defs", null, [
(u(!0), n(d, null, w(Sl.value, (e, s) => (u(), n("linearGradient", {
id: `individual_scale_gradient_${H.value}_${s}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%"
}, [
p("stop", {
offset: "0%",
"stop-color": l.value.chart.backgroundColor,
"stop-opacity": "0"
}, null, 8, _i),
p("stop", {
offset: "100%",
"stop-color": e.color,
"stop-opacity": "0.2"
}, null, 8, wi)
], 8, ki))), 256))
]),
(u(!0), n(d, null, w(Sl.value, (e, s) => (u(), n("rect", {
x: e.x - l.value.chart.grid.labels.yAxis.labelWidth + U.value - c.value.individualOffsetX,
y: c.value?.top,
width: l.value.chart.grid.labels.yAxis.labelWidth + c.value.individualOffsetX,
height: c.value.height < 0 ? 10 : c.value.height,
fill: I.value === e.groupId ? `url(#individual_scale_gradient_${H.value}_${s})` : "transparent",
onMouseenter: (t) => I.value = e.groupId,
onMouseleave: r[0] || (r[0] = (t) => I.value = null)
}, null, 40, Si))), 256))
], 64)) : h("", !0),
p("g", null, [
l.value.chart.grid.labels.axis.yLabel && !f.value.useIndividualScale ? (u(), n("text", {
key: 0,
ref_key: "yAxisLabel",
ref: aa,
"font-size": y.value.yAxis,
fill: l.value.chart.grid.labels.color,
transform: `translate(${l.value.chart.grid.labels.axis.fontSize}, ${c.value?.top + c.value.height / 2}) rotate(-90)`,
"text-anchor": "middle",
style: { transition: "none" }
}, ae(l.value.chart.grid.labels.axis.yLabel), 9, Ci)) : h("", !0),
l.value.chart.grid.labels.axis.xLabel ? (u(), n("text", {
key: 1,
ref_key: "xAxisLabel",
ref: la,
"text-anchor": "middle",
x: ee.value / 2,
y: ve.value - 3,
"font-size": y.value.yAxis,
fill: l.value.chart.grid.labels.color
}, ae(l.value.chart.grid.labels.axis.xLabel), 9, $i)) : h("", !0)
]),
l.value.chart.grid.labels.xAxisLabels.show ? (u(), n("g", {
key: 14,
ref_key: "timeLabelsEls",
ref: sl
}, [
a.$slots["time-label"] ? (u(!0), n(d, { key: 0 }, w(ma.value, (e, s) => P(a.$slots, "time-label", al({
key: `time_label_${e.id}`,
ref_for: !0
}, {
x: c.value?.left + c.value.width / $.value * s + c.value.width / $.value / 2,
y: c.value?.bottom,
fontSize: y.value.xAxis,
fill: l.value.chart.grid.labels.xAxisLabels.color,
transform: `translate(${c.value?.left + c.value.width / $.value * s + c.value.width / $.value / 2}, ${c.value?.bottom + y.value.xAxis * 1.3 + l.value.chart.grid.labels.xAxisLabels.yOffset}), rotate(${l.value.chart.grid.labels.xAxisLabels.rotation})`,
absoluteIndex: e.absoluteIndex,
content: e.text,
textAnchor: l.value.chart.grid.labels.xAxisLabels.rotation > 0 ? "start" : l.value.chart.grid.labels.xAxisLabels.rotation < 0 ? "end" : "middle",
show: e && e.text
}), void 0, !0)), 128)) : (u(!0), n(d, { key: 1 }, w(ma.value, (e, s) => (u(), n("g", {
key: `time_label_${s}`
}, [
e && e.text ? (u(), n(d, { key: 0 }, [
String(e.text).includes(`
`) ? (u(), n("text", {
key: 1,
class: "vue-data-ui-time-label",
"text-anchor": l.value.chart.grid.labels.xAxisLabels.rotation > 0 ? "start" : l.value.chart.grid.labels.xAxisLabels.rotation < 0 ? "end" : "middle",
"font-size": y.value.xAxis,
fill: l.value.chart.grid.labels.xAxisLabels.color,
transform: `translate(${c.value?.left + c.value.width / $.value * s + c.value.width / $.value / 2}, ${c.value?.bottom + y.value.xAxis * 1.5}), rotate(${l.value.chart.grid.labels.xAxisLabels.rotation})`,
style: C({
cursor: Wa() ? "pointer" : "default"
}),
innerHTML: v(gr)({
content: String(e.text),
fontSize: y.value.xAxis,
fill: l.value.chart.grid.labels.xAxisLabels.color,
x: 0,
y: 0
}),
onClick: () => qa(e, s)
}, null, 12, Li)) : (u(), n("text", {
key: 0,
class: "vue-data-ui-time-label",
"text-anchor": l.value.chart.grid.labels.xAxisLabels.rotation > 0 ? "start" : l.value.chart.grid.labels.xAxisLabels.rotation < 0 ? "end" : "middle",
"font-size": y.value.xAxis,
fill: l.value.chart.grid.labels.xAxisLabels.color,
transform: `translate(${c.value?.left + c.value.width / $.value * s + c.value.width / $.value / 2}, ${c.value?.bottom + y.value.xAxis * 1.5}), rotate(${l.value.chart.grid.labels.xAxisLabels.rotation})`,
style: C({
cursor: Wa() ? "pointer" : "default"
}),
onClick: () => qa(e, s)
}, ae(e.text || ""), 13, Ai))
], 64)) : h("", !0)
]))), 128))
], 512)) : h("", !0),
ct.value.length && !f.value.isStacked ? (u(), n("g", Mi, [
(u(!0), n(d, null, w(ct.value, (e) => (u(), n("g", {
key: e.uid
}, [
e.yTop && e.show && isFinite(e.yTop) ? (u(), n("line", {
key: 0,
x1: e.x1,
y1: e.yTop,
x2: e.x2,
y2: e.yTop,
stroke: e.config.line.stroke,
"stroke-width": e.config.line.strokeWidth,
"stroke-dasharray": e.config.line.strokeDasharray,
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, Ti)) : h("", !0),
e.yBottom && e.show && isFinite(e.yBottom) ? (u(), n("line", {
key: 1,
x1: e.x1,
y1: e.yBottom,
x2: e.x2,
y2: e.yBottom,
stroke: e.config.line.stroke,
"stroke-width": e.config.line.strokeWidth,
"stroke-dasharray": e.config.line.strokeDasharray,
"stroke-linecap": "round",
style: { animation: "none !important" }
}, null, 8, zi)) : h("", !0),
e.hasArea && e.show && isFinite(e.yTop) && isFinite(e.yBottom) ? (u(), n("rect", {
key: 2,
y: Math.min(e.yTop, e.yBottom),
x: e.x1,
width: c.value.width,
height: v(N)(e.areaHeight, 0),
fill: v(ze)(e.config.area.fill, e.config.area.opacity),
style: { animation: "none !important" }
}, null, 8, Ii)) : h("", !0),
e.config.label.text && e.show && isFinite(e._box.y) ? (u(), n("rect", al({
key: 3,
class: "vue-ui-xy-annotation-label-box"
}, { ref_for: !0 }, e._box, { style: { animation: "none !important", transition: "none !important" } }), null, 16)) : h("", !0),
e.config.label.text && e.show && isFinite(e._text.y) ? (u(), n("text", {
key: 4,
id: e.id,
class: "vue-ui-xy-annotation-label",
x: e._text.x,
y: e._text.y,
"font-size": e.config.label.fontSize,
fill: e.config.label.color,
"text-anchor": e.config.label.textAnchor
}, ae(e.config.label.text), 9, Fi)) : h("", !0)
]))), 128))
])) : h("", !0),
l.value.chart.timeTag.show && (![null, void 0].includes(_.value) || ![null, void 0].includes(B.value)) ? (u(), n("g", Oi, [
(u(), n("foreignObject", {
x: Xo(),
y: c.value?.bottom,
width: "200",
height: "40",
style: { overflow: "visible !important" }
}, [
p("div", {
ref_key: "timeTagEl",
ref: wt,
class: "vue-ui-xy-time-tag",
style: C(`width: fit-content;margin: 0 auto;text-align:center;padding:3px 12px;background:${l.value.chart.timeTag.backgroundColor};color:${l.value.chart.timeTag.color};font-size:${l.value.chart.timeTag.fontSize}px`),
innerHTML: Go.value
}, null, 12, Ni)
], 8, Bi)),
p("circle", {
cx: c.value?.left + c.value.width / $.value * ((_.value !== null ? _.value : 0) || (B.value !== null ? B.value : 0)) + c.value.width / $.value / 2,
cy: c.value?.bottom,
r: l.value.chart.timeTag.circleMarker.radius,
fill: l.value.chart.timeTag.circleMarker.color
}, null, 8, Vi)
])) : h("", !0)
])) : h("", !0),
Da.value ? (u(), n("rect", al({ key: 2 }, go.value, {
"data-start": m.value.start,
"data-end": m.value.end
}), null, 16, Di)) : h("", !0),
P(a.$slots, "svg", {
svg: {
...vo.value,
data: [...te.value, ...Me.value, ...xe.value],
drawingArea: c.value
}
}, void 0, !0)
], 512)
], 46, Nr)),
a.$slots.watermark ? (u(), n("div", Pi, [
P(a.$slots, "watermark", ke(_e({ isPrinting: v(da) || v(Ea) })), void 0, !0)
])) : h("", !0),
(u(!0), n(d, null, w(te.value, (e, s) => (u(), n(d, {
key: `tag_line_${e.id}`
}, [
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n(d, {
key: `tag_line_${s}_${i}`
}, [
[B.value, _.value, Ze.value].includes(i) && e.useTag && e.useTag === "end" && l.value.line.tag.followValue ? (u(), n("div", {
key: 0,
ref_for: !0,
ref: (o) => Dl(s, i, o, "right", "line"),
class: "vue-ui-xy-tag",
"data-tag": "right",
style: C({
position: "fixed",
top: v(Ue)({
svgElement: se.value,
x: c.value?.right + l.value.line.tag.fontSize / 1.5,
y: t.y,
element: De.value[`${s}_${i}_right_line`],
position: "right"
})?.top + "px",
left: v(Ue)({
svgElement: se.value,
x: c.value?.right + l.value.line.tag.fontSize / 1.5,
y: t.y,
element: De.value[`${s}_${i}_right_line`],
position: "right"
})?.left + "px",
height: "fit-content",
width: "fit-content",
background: e.color,
color: v(Ge)(e.color),
padding: "0 6px",
fontSize: l.value.line.tag.fontSize + "px",
opacity: 1
})
}, [
(u(), n("svg", Ei, [
p("path", {
d: "M 0,10 10,0 10,20 Z",
fill: e.color,
stroke: "none"
}, null, 8, Ri)
])),
p("div", {
class: "vue-ui-xy-tag-content",
innerHTML: v(re)(
l.value.line.tag.formatter,
t.value,
e.name,
{
datapoint: t,
seriesIndex: i,
serieName: e.name
}
)
}, null, 8, Hi)
], 4)) : h("", !0),
[B.value, _.value, Ze.value].includes(i) && e.useTag && e.useTag === "start" && l.value.line.tag.followValue ? (u(), n("div", {
key: 1,
ref_for: !0,
ref: (o) => Dl(s, i, o, "left", "line"),
class: "vue-ui-xy-tag",
"data-tag": "left",
style: C({
position: "fixed",
top: v(Ue)({
svgElement: se.value,
x: c.value?.left - l.value.line.tag.fontSize / 1.5,
y: t.y,
element: De.value[`${s}_${i}_left_line`],
position: "left"
})?.top + "px",
left: v(Ue)({
svgElement: se.value,
x: c.value?.left - l.value.line.tag.fontSize / 1.5,
y: t.y,
element: De.value[`${s}_${i}_left_line`],
position: "left"
})?.left + "px",
height: "fit-content",
width: "fit-content",
background: e.color,
color: v(Ge)(e.color),
padding: "0 6px",
fontSize: l.value.line.tag.fontSize + "px",
opacity: 1
})
}, [
(u(), n("svg", Yi, [
p("path", {
d: "M 0,0 10,10 0,20 Z",
fill: e.color,
stroke: "none"
}, null, 8, Wi)
])),
p("div", {
class: "vue-ui-xy-tag-content",
innerHTML: v(re)(
l.value.line.tag.formatter,
t.value,
e.name,
{
datapoint: t,
seriesIndex: i,
serieName: e.name
}
)
}, null, 8, Xi)
], 4)) : h("", !0)
], 64))), 128))
], 64))), 128)),
(u(!0), n(d, null, w(xe.value, (e, s) => (u(), n(d, {
key: `tag_plot_${e.id}`
}, [
(u(!0), n(d, null, w(e.plots, (t, i) => (u(), n(d, {
key: `tag_plot_${s}_${i}`
}, [
[B.value, _.value, Ze.value].includes(i) && e.useTag && e.useTag === "end" && l.value.plot.tag.followValue ? (u(), n("div", {
key: 0,
ref_for: !0,
ref: (o) => Dl(s, i, o, "right", "plot"),
class: "vue-ui-xy-tag",
"data-tag": "right",
style: C({
position: "fixed",
top: v(Ue)({
svgElement: se.value,
x: c.value?.right + l.value.plot.tag.fontSize / 1.5,
y: t.y,
element: De.value[`${s}_${i}_right_plot`],
position: "right"
})?.top + "px",
left: v(Ue)({
svgElement: se.value,
x: c.value?.right + l.value.plot.tag.fontSize / 1.5,
y: t.y,
element: De.value[`${s}_${i}_right_plot`],
position: "right"
})?.left + "px",
height: "fit-content",
width: "fit-content",
background: e.color,
color: v(Ge)(e.color),
padding: "0 6px",
fontSize: l.value.plot.tag.fontSize + "px",
opacity: 1
})
}, [
(u(), n("svg", Gi, [
p("path", {
d: "M 0,10 10,0 10,20 Z",
fill: e.color,
stroke: "none"
}, null, 8, Ui)
])),
p("div", {
class: "vue-ui-xy-tag-content",
innerHTML: v(re)(
l.value.plot.tag.formatter,
t.value,
e.name,
{
datapoint: t,
seriesIndex: i,
serieName: e.name
}
)
}, null, 8, qi)
], 4)) : h("", !0),
[B.value, _.value, Ze.value].includes(i) && e.useTag && e.useTag === "start" && l.value.plot.tag.followValue ? (u(), n("div", {
key: 1,
ref_for: !0,
ref: (o) => Dl(s, i, o, "left", "plot"),
class: "vue-ui-xy-tag",
"data-tag": "left",
style: C({
position: "fixed",
top: v(Ue)({
svgElement: se.value,
x: c.value?.left - l.value.plot.tag.fontSize / 1.5,
y: t.y,
element: De.value[`${s}_${i}_left_plot`],
position: "left"
})?.top + "px",
left: v(Ue)({
svgElement: se.value,
x: c.value?.left - l.value.plot.tag.fontSize / 1.5,
y: t.y,
element: De.value[`${s}_${i}_left_plot`],
position: "left"
})?.left + "px",
height: "fit-content",
width: "fit-content",
background: e.color,
color: v(Ge)(e.color),
padding: "0 6px",
fontSize: l.value.plot.tag.fontSize + "px",
opacity: 1
})
}, [
(u(), n("svg", Zi, [
p("path", {
d: "M 0,0 10,10 0,20 Z",
fill: e.color,
stroke: "none"
}, null, 8, Ji)
])),
p("div", {
class: "vue-ui-xy-tag-content",
innerHTML: v(re)(
l.value.plot.tag.formatter,
t.value,
e.name,
{
datapoint: t,
seriesIndex: i,
serieName: e.name
}
)
}, null, 8, Qi)
], 4)) : h("", !0)
], 64))), 128))
], 64))), 128)),
l.value.chart.zoom.show && Oe.value > 6 && ca.value && Qa.value ? (u(), Te(zr, {
key: 5,
ref_key: "chartSlicer",
ref: Fe,
allMinimaps: Ro.value,
background: l.value.chart.zoom.color,
borderColor: l.value.chart.backgroundColor,
customFormat: l.value.chart.zoom.customFormat,
cutNullValues: l.value.line.cutNullValues,
enableRangeHandles: l.value.chart.zoom.enableRangeHandles,
enableSelectionDrag: l.value.chart.zoom.enableSelectionDrag,
end: m.value.end,
focusOnDrag: l.value.chart.zoom.focusOnDrag,
focusRangeRatio: l.value.chart.zoom.focusRangeRatio,
fontSize: l.value.chart.zoom.fontSize,
useResetSlot: l.value.chart.zoom.useResetSlot,
immediate: !l.value.chart.zoom.preview.enable,
inputColor: l.value.chart.zoom.color,
isPreview: Da.value,
labelLeft: de.value[0] ? de.value[0].text : "",
labelRight: de.value.at(-1) ? de.value.at(-1).text : "",
max: Oe.value,
min: 0,
minimap: Eo.value,
minimapCompact: l.value.chart.zoom.minimap.compact,
minimapFrameColor: l.value.chart.zoom.minimap.frameColor,
minimapIndicatorColor: l.value.chart.zoom.minimap.indicatorColor,
minimapLineColor: l.value.chart.zoom.minimap.lineColor,
minimapMerged: l.value.chart.zoom.minimap.merged,
minimapSelectedColor: l.value.chart.zoom.minimap.selectedColor,
minimapSelectedColorOpacity: l.value.chart.zoom.minimap.selectedColorOpacity,
minimapSelectedIndex: _.value,
minimapSelectionRadius: l.value.chart.zoom.minimap.selectionRadius,
preciseLabels: ft.value.length ? ft.value : ga.value,
refreshEndPoint: l.value.chart.zoom.endIndex !== null ? l.value.chart.zoom.endIndex + 1 : Math.max(...jl.dataset.map((e) => Re(e.series).length)),
refreshStartPoint: l.value.chart.zoom.startIndex !== null ? l.value.chart.zoom.startIndex : 0,
selectColor: l.value.chart.zoom.highlightColor,
selectedSeries: je.value,
smoothMinimap: l.value.chart.zoom.minimap.smooth,
start: m.value.start,
textColor: l.value.chart.color,
timeLabels: ga.value,
usePreciseLabels: l.value.chart.grid.labels.xAxisLabels.datetimeFormatter.enable && !l.value.chart.zoom.useDefaultFormat,
valueEnd: m.value.end,
valueStart: m.value.start,
verticalHandles: l.value.chart.zoom.minimap.verticalHandles,
onFutureEnd: r[1] || (r[1] = (e) => Pa("end", e)),
onFutureStart: r[2] || (r[2] = (e) => Pa("start", e)),
onReset: Lo,
onTrapMouse: So,
"onUpdate:end": Ao,
"onUpdate:start": $o
}, {
"reset-action": G(({ reset: e }) => [
P(a.$slots, "reset-action", ke(_e({ reset: e })), void 0, !0)
]),
_: 3
}, 8, ["allMinimaps", "background", "borderColor", "customFormat", "cutNullValues", "enableRangeHandles", "enableSelectionDrag", "end", "focusOnDrag", "focusRangeRatio", "fontSize", "useResetSlot", "immediate", "inputColor", "isPreview", "labelLeft", "labelRight", "max", "minimap", "minimapCompact", "minimapFrameColor", "minimapIndicatorColor", "minimapLineColor", "minimapMerged", "minimapSelectedColor", "minimapSelectedColorOpacity", "minimapSelectedIndex", "minimapSelectionRadius", "preciseLabels", "refreshEndPoint", "refreshStartPoint", "selectColor", "selectedSeries", "smoothMinimap", "start", "textColor", "timeLabels", "usePreciseLabels", "valueEnd", "valueStart", "verticalHandles"])) : h("", !0),
p("div", {
id: `legend-bottom-${H.value}`
}, null, 8, Ki),
Oa.value ? (u(), Te(tr, {
key: 6,
to: l.value.chart.legend.position === "top" ? `#legend-top-${H.value}` : `#legend-bottom-${H.value}`
}, [
l.value.chart.legend.show ? (u(), n("div", {
key: 0,
ref_key: "chartLegend",
ref: rl,
class: "vue-ui-xy-legend",
style: C({
fontSize: `var(--legend-font-size, ${l.value.chart.legend.fontSize ?? 14}px)`
})
}, [
(u(!0), n(d, null, w(me.value, (e, s) => (u(), n("div", {
key: `div_legend_item_${s}`,
onClick: (t) => Yl(e),
class: ll({ "vue-ui-xy-legend-item-alone": me.value.length === 1, "vue-ui-xy-legend-item": !0, "vue-ui-xy-legend-item-segregated": J.value.includes(e.id) })
}, [
bl.value[e.type] === "line" ? (u(), n("svg", eu, [
p("rect", {
x: "0",
y: "7.5",
rx: "1.5",
stroke: l.value.chart.backgroundColor,
"stroke-width": 0.5,
height: "3",
width: "20",
fill: e.color
}, null, 8, lu),
vl(Kl, {
plot: { x: 10, y: 9 },
radius: 4,
color: e.color,
shape: ["triangle", "square", "diamond", "pentagon", "hexagon", "star"].includes(e.shape) ? e.shape : "circle",
stroke: l.value.chart.backgroundColor,
strokeWidth: 0.5
}, null, 8, ["color", "shape", "stroke"])
])) : bl.value[e.type] === "bar" ? (u(), n("svg", au, [
bl.value[e.type] === "bar" && a.$slots.pattern ? (u(), n("rect", {
key: 0,
x: "4",
y: "4",
rx: "1",
height: "32",
width: "32",
stroke: "none",
fill: e.color
}, null, 8, tu)) : h("", !0),
bl.value[e.type] === "bar" ? (u(), n("rect", {
key: 1,
x: "4",
y: "4",
rx: "1",
height: "32",
width: "32",
stroke: "none",
fill: a.$slots.pattern ? `url(#pattern_${H.value}_${e.slotAbsoluteIndex})` : e.color
}, null, 8, ou)) : h("", !0)
])) : (u(), n("svg", ru, [
vl(Kl, {
plot: { x: 6, y: 6 },
radius: 5,
color: e.color,
shape: ["triangle", "square", "diamond", "pentagon", "hexagon", "star"].includes(e.shape) ? e.shape : "circle"
}, null, 8, ["color", "shape"])
])),
p("span", {
style: C(`color:${l.value.chart.legend.color}`)
}, ae(e.name), 5)
], 10, ji))), 128))
], 4)) : (u(), n("div", {
key: 1,
ref_key: "chartLegend",
ref: rl
}, [
P(a.$slots, "legend", { legend: me.value }, void 0, !0)
], 512))
], 8, ["to"])) : h("", !0),
a.$slots.source ? (u(), n("div", {
key: 7,
ref_key: "source",
ref: gl,
dir: "auto"
}, [
P(a.$slots, "source", {}, void 0, !0)
], 512)) : h("", !0),
vl(v(jt), {
show: f.value.showTooltip && Ma.value,
backgroundColor: l.value.chart.tooltip.backgroundColor,
color: l.value.chart.tooltip.color,
fontSize: l.value.chart.tooltip.fontSize,
borderRadius: l.value.chart.tooltip.borderRadius,
borderColor: l.value.chart.tooltip.borderColor,
borderWidth: l.value.chart.tooltip.borderWidth,
backgroundOpacity: l.value.chart.tooltip.backgroundOpacity,
position: l.value.chart.tooltip.position,
offsetY: l.value.chart.tooltip.offsetY,
parent: a.$refs.chart,
content: Ho.value,
isFullscreen: qe.value,
isCustom: l.value.chart.tooltip.customFormat && typeof l.value.chart.tooltip.customFormat == "function",
smooth: l.value.chart.tooltip.smooth,
backdropFilter: l.value.chart.tooltip.backdropFilter,
smoothForce: l.value.chart.tooltip.smoothForce,
smoothSnapThreshold: l.value.chart.tooltip.smoothSnapThreshold
}, {
"tooltip-before": G(() => [
P(a.$slots, "tooltip-before", ke(_e({ ...ht.value })), void 0, !0)
]),
"tooltip-after": G(() => [
P(a.$slots, "tooltip-after", ke(_e({ ...ht.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
ca.value && l.value.chart.userOptions.buttons.table ? (u(), Te(or(Cl.value.component), al({ key: 8 }, Cl.value.props, {
ref_key: "tableUnit",
ref: il,
onClose: $t
}), Tt({
content: G(() => [
p("div", {
style: C(`${v(da) || l.value.table.useDialog ? "" : "max-height:400px"};${l.value.table.useDialog ? "height: fit-content; " : ""};overflow:auto;width:100%;${l.value.table.useDialog ? "" : "margin-top:48px"}`)
}, [
p("div", su, [
rr(p("input", {
type: "checkbox",
"onUpdate:modelValue": r[4] || (r[4] = (e) => pl.value = e)
}, null, 512), [
[sr, pl.value]
]),
p("div", {
onClick: r[5] || (r[5] = (e) => pl.value = !pl.value),
style: { cursor: "pointer" }
}, [
vl(v($a), {
name: "chartLine",
size: 20,
stroke: l.value.chart.color
}, null, 8, ["stroke"])
])
]),
pl.value ? (u(), Te(v(lo), {
key: `sparkline_${sa.value}`,
dataset: Vo.value,
config: Do.value
}, null, 8, ["dataset", "config"])) : (u(), Te(v(Kt), {
key: `table_${za.value}`,
colNames: Ul.value.colNames,
head: Ul.value.head,
body: Ul.value.body,
config: Ul.value.config,
title: l.value.table.useDialog ? "" : Cl.value.title,
withCloseButton: !l.value.table.useDialog,
onClose: $t
}, {
th: G(({ th: e }) => [
p("div", { innerHTML: e }, null, 8, iu)
]),
td: G(({ td: e }) => [
zt(ae(isNaN(Number(e)) ? e : v(Ve)({
p: l.value.chart.labels.prefix,
v: e,
s: l.value.chart.labels.suffix,
r: l.value.table.rounding
})), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
], 4)
]),
_: 2
}, [
l.value.table.useDialog ? {
name: "title",
fn: G(() => [
zt(ae(Cl.value.title), 1)
]),
key: "0"
} : void 0,
l.value.table.useDialog ? {
name: "actions",
fn: G(() => [
p("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: r[3] || (r[3] = (e) => xa(l.value.chart.userOptions.callbacks.csv))
}, [
vl(v($a), {
name: "excel",
stroke: Cl.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : h("", !0),
v(ie) ? (u(), Te(wr, { key: 9 })) : h("", !0)
], 46, Or));
}
}, nu = /* @__PURE__ */ Fr(uu, [["__scopeId", "data-v-f849577b"]]), Au = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: nu
}, Symbol.toStringTag, { value: "Module" }));
export {
nu as V,
Au as a,
$u as v
};