vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,240 lines • 57.2 kB
JavaScript
import { defineAsyncComponent as O, ref as v, shallowRef as Ue, computed as d, onMounted as Gt, onBeforeUnmount as qt, toRefs as Zt, watch as Q, watchEffect as Jt, createElementBlock as r, openBlock as s, unref as u, normalizeStyle as F, normalizeClass as I, renderSlot as f, createBlock as N, createCommentVNode as h, createElementVNode as S, createVNode as xe, withCtx as x, normalizeProps as _, guardReactiveProps as L, createSlots as We, Fragment as m, renderList as k, toDisplayString as z, Teleport as Kt, resolveDynamicComponent as Qt, mergeProps as el, createTextVNode as Ve, nextTick as tl } from "vue";
import { c as Ge, o as qe, g as Ze, l as ll, t as al, k as ol, m as sl, j as ee, N as Je, a as R, d as Y, X as rl, q as nl, u as il, $ as ul, x as cl, a2 as P, i as vl, a1 as te, v as dl, r as hl, y as yl } from "./lib-2iaAPQ_c.js";
import { t as Ke, u as fl } from "./useResponsive-DfdjqQps.js";
import { u as xl, a as be } from "./useNestedProp-2p4Tjzc8.js";
import { u as bl, B as gl } from "./BaseScanner-BMpwQAfz.js";
import { u as pl } from "./usePrinter-ChVMpU2f.js";
import { u as ml } from "./useSvgExport-ByUukOZt.js";
import { u as kl } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Cl } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Al } from "./useChartAccessibility-9icAAmYg.js";
import { u as wl } from "./useTimeLabelCollider-CIsgDrl9.js";
import Sl from "./img-CqYIrJ8I.js";
import _l from "./Title-DSOZzIrU.js";
import Ll from "./Legend-D2xmnFPH.js";
import { _ as $l } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Qe = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, grid: { xAxis: { stroke: "#5A5A5A" }, horizontalLines: { stroke: "#4A4A4A" }, yAxis: { stroke: "#5A5A5A" }, verticalLines: { stroke: "#4A4A4A" } }, axes: { x: { labels: { color: "#CCCCCC" }, name: { color: "#CCCCCC" } }, y: { labels: { color: "#CCCCCC" }, name: { color: "#CCCCCC" } } }, plots: { stroke: "#1A1A1A", labels: { color: "#CCCCCC" } } } } }, et = { table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } }, style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, grid: { xAxis: { stroke: "#5D403740" }, horizontalLines: { stroke: "#5D403740" }, yAxis: { stroke: "#5D403740" }, verticalLines: { stroke: "#5D403740" } }, axes: { x: { labels: { color: "#424242" }, name: { color: "#424242" } }, y: { labels: { color: "#424242" }, name: { color: "#424242" } } }, plots: { stroke: "#FFF8E1", gradient: { intensity: 20 }, labels: { color: "#424242" } } } } }, tt = { table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } }, style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, grid: { xAxis: { stroke: "#5D403780" }, horizontalLines: { stroke: "#5D403780" }, yAxis: { stroke: "#5D403780" }, verticalLines: { stroke: "#5D403780" } }, axes: { x: { labels: { color: "#BDBDBD" }, name: { color: "#BDBDBD" } }, y: { labels: { color: "#BDBDBD" }, name: { color: "#BDBDBD" } } }, plots: { stroke: "#1E1E1E", gradient: { intensity: 20 }, labels: { color: "#BDBDBD" } } } } }, lt = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, grid: { xAxis: { stroke: "#5F6A5F" }, horizontalLines: { stroke: "#3A3A3A" }, yAxis: { stroke: "#5F6A5F" }, verticalLines: { stroke: "#3A3A3A" } }, axes: { x: { labels: { color: "#5F6A5F" }, name: { color: "#5F6A5F" } }, y: { labels: { color: "#5F6A5F" }, name: { color: "#5F6A5F" } } }, plots: { stroke: "#1A1A1A", gradient: { intensity: 20 }, labels: { color: "#5F6A5F" } } } } }, at = { table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } }, style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, grid: { xAxis: { stroke: "#8F837A" }, horizontalLines: { show: !1 }, yAxis: { stroke: "#8F837A" }, verticalLines: { show: !1 } }, axes: { x: { labels: { color: "#8F837A" }, name: { color: "#8F837A" } }, y: { labels: { color: "#8F837A" }, name: { color: "#8F837A" } } }, plots: { stroke: "#fbfafa", gradient: { intensity: 20 }, labels: { color: "#8F837A" } } } } }, ot = { table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } }, style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, grid: { xAxis: { stroke: "#829C98" }, horizontalLines: { stroke: "#92B0AB" }, yAxis: { stroke: "#829C98" }, verticalLines: { stroke: "#92B0AB" } }, axes: { x: { labels: { color: "#50606C" }, name: { color: "#50606C" } }, y: { labels: { color: "#50606C" }, name: { color: "#50606C" } } }, plots: { stroke: "#50606C", gradient: { intensity: 20 }, labels: { color: "#50606C" } } } } }, st = {
default: {},
dark: Qe,
celebration: et,
celebrationNight: tt,
hack: lt,
zen: at,
concrete: ot
}, Fa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: et,
celebrationNight: tt,
concrete: ot,
dark: Qe,
default: st,
hack: lt,
zen: at
}, Symbol.toStringTag, { value: "Module" })), Fl = ["id"], Tl = ["id"], Dl = ["xmlns", "viewBox"], zl = ["x", "y", "width", "height"], Ml = { key: 1 }, Bl = ["id"], Ol = ["stop-color"], Nl = ["stop-color"], El = ["stop-color"], Il = { key: 2 }, Pl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Xl = { key: 3 }, Rl = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], Yl = ["x", "y", "fill", "font-size"], Hl = ["transform", "font-size", "fill", "font-weight"], jl = { key: 6 }, Ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Wl = { key: 7 }, Vl = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], Gl = ["transform", "fill", "font-size", "text-anchor"], ql = ["x", "y", "font-size", "fill", "font-weight"], Zl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Jl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Kl = ["d", "stroke", "stroke-width"], Ql = ["d", "stroke", "stroke-width"], ea = ["cx", "cy", "fill", "r"], ta = ["cx", "cy", "fill", "r", "stroke", "stroke-width"], la = { key: 1 }, aa = ["x", "y", "font-size", "fill", "font-weight"], oa = ["x", "y", "font-size", "fill", "font-weight", "innerHTML"], sa = { key: 2 }, ra = ["x", "y", "font-size", "font-weight", "fill"], na = ["cx", "cy", "r", "onMouseenter", "onMouseleave", "onClick"], ia = {
key: 4,
class: "vue-data-ui-watermark"
}, ua = ["id"], ca = ["onClick"], va = ["innerHTML"], da = {
__name: "vue-ui-history-plot",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend", "selectDatapoint"],
setup(rt, { expose: nt, emit: it }) {
const ut = O(() => import("./Tooltip-D0pGX8qz.js")), ct = O(() => import("./BaseIcon-CbVDYv89.js")), vt = O(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), dt = O(() => import("./DataTable-BT_IeqPe.js")), ht = O(() => import("./PenAndPaper-CvyKWfNl.js")), yt = O(() => import("./UserOptions-BQO4YFrn.js")), ft = O(() => import("./PackageVersion-Br3DrrFh.js")), xt = O(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_history_plot: bt } = xl(), { isThemeValid: gt, warnInvalidTheme: pt } = kl(), y = rt, T = v(null), ge = v(null), pe = v(0), me = v(null), ke = v(0), Ce = v(0), Ae = v(0), M = Ue(null), X = Ue(null), we = v(null), D = v(Ge()), le = v(!1), ae = v(""), p = v([]), H = v(!1), w = v(null), j = v(!1), Se = v(null), _e = v(!1), U = v(null), oe = v(null), se = v(null), re = v(null), V = v(null), ne = v(null), G = d({
get: () => !!y.dataset && y.dataset.length,
set: (t) => t
}), Le = it;
Gt(() => {
_e.value = !0, Fe();
});
const $e = d(() => !!e.value.debug);
function Fe() {
if (qe(y.dataset) ? (Ze({
componentName: "VueUiHistoryPlot",
type: "dataset",
debug: $e.value
}), ue.value = !0) : y.dataset.forEach((t, a) => {
ll({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((l) => {
G.value = !1, Ze({
componentName: "VueUiHistoryPlot",
type: "datasetSerieAttribute",
property: l,
index: a,
debug: $e.value
});
});
}), qe(y.dataset) || (ue.value = e.value.loading), e.value.responsive) {
const t = Ke(() => {
const { width: a, height: l } = fl({
chart: T.value,
title: e.value.style.chart.title.text ? ge.value : null,
noTitle: we.value,
legend: e.value.style.chart.legend.show ? me.value : null,
source: Se.value
});
requestAnimationFrame(() => {
b.value.width = a, b.value.height = l, e.value.responsiveProportionalSizing ? (n.value.plots = P({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.plots.radius,
threshold: 3,
fallback: 3
}), n.value.indexLabels = P({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.plots.indexLabels.fontSize,
threshold: 6,
fallback: 6
}), n.value.labels = P({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.plots.labels.fontSize,
threshold: 6,
fallback: 6
}), n.value.xAxisLabels = P({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.axes.x.labels.fontSize,
threshold: 6,
fallback: 6
}), n.value.xAxisName = P({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.axes.x.name.fontSize,
threshold: 6,
fallback: 6
}), n.value.yAxisLabels = P({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.axes.y.labels.fontSize,
threshold: 6,
fallback: 6
}), n.value.yAxisName = P({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.axes.y.name.fontSize,
threshold: 6,
fallback: 6
})) : (n.value.plots = e.value.style.chart.plots.radius, n.value.indexLabels = e.value.style.chart.plots.indexLabels.fontSize, n.value.labels = e.value.style.chart.plots.labels.fontSize, n.value.xAxisLabels = e.value.style.chart.axes.x.labels.fontSize, n.value.xAxisName = e.value.style.chart.axes.x.name.fontSize, n.value.yAxisLabels = e.value.style.chart.axes.y.labels.fontSize, n.value.yAxisName = e.value.style.chart.axes.y.name.fontSize);
});
});
M.value && (X.value && M.value.unobserve(X.value), M.value.disconnect()), M.value = new ResizeObserver(t), X.value = T.value.parentNode, M.value.observe(X.value);
}
}
qt(() => {
M.value && (X.value && M.value.unobserve(X.value), M.value.disconnect());
});
function ie() {
const t = be({
userConfig: y.config,
defaultConfig: bt
});
let a = {};
const l = t.theme;
if (l)
if (!gt.value(t))
pt(t), a = t;
else {
const i = be({
userConfig: st[l] || y.config,
defaultConfig: t
});
a = {
...be({
userConfig: y.config,
defaultConfig: i
}),
customPalette: t.customPalette.length ? t.customPalette : vl[l] || ee
};
}
else
a = t;
return y.config && te(y.config, "style.chart.axes.x.scaleMin") ? a.style.chart.axes.x.scaleMin = y.config.style.chart.axes.x.scaleMin : a.style.chart.axes.x.scaleMin = null, y.config && te(y.config, "style.chart.axes.x.scaleMax") ? a.style.chart.axes.x.scaleMax = y.config.style.chart.axes.x.scaleMax : a.style.chart.axes.x.scaleMax = null, y.config && te(y.config, "style.chart.axes.y.scaleMin") ? a.style.chart.axes.y.scaleMin = y.config.style.chart.axes.y.scaleMin : a.style.chart.axes.y.scaleMin = null, y.config && te(y.config, "style.chart.axes.y.scaleMax") ? a.style.chart.axes.y.scaleMax = y.config.style.chart.axes.y.scaleMax : a.style.chart.axes.y.scaleMax = null, a;
}
const e = v(ie()), { loading: B, FINAL_DATASET: mt, manualLoading: ue } = bl({
...Zt(y),
FINAL_CONFIG: e,
prepareConfig: ie,
skeletonDataset: [
{
name: "",
color: "#CACACA",
values: [
{ label: "", x: 1, y: 9 },
{ label: "", x: 4, y: 1 },
{ label: "", x: 7, y: 9 },
{ label: "", x: 9, y: 4 }
]
}
],
skeletonConfig: al({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
axes: {
x: {
scaleMin: 0,
scaleMax: 10,
labels: { show: !1 },
name: { text: "" }
},
y: {
scaleMin: 0,
scaleMax: 10,
labels: { show: !1 },
name: { text: "" }
}
},
grid: {
xAxis: {
stroke: "#6A6A6A"
},
horizontalLines: {
stroke: "#6A6A6A50"
},
yAxis: {
stroke: "#6A6A6A"
},
verticalLines: {
stroke: "#6A6A6A50"
}
},
legend: {
backgroundColor: "transparent"
},
paths: {
useSerieColor: !1,
stroke: "#6A6A6A"
},
plots: {
stroke: "#6A6A6A",
indexLabels: { show: !1 },
labels: { show: !1 }
}
}
}
}
})
}), { userOptionsVisible: ce, setUserOptionsVisibility: Te, keepUserOptionState: De } = Cl({ config: e.value }), { svgRef: ve } = Al({ config: e.value.style.chart.title });
Q(() => y.config, (t) => {
B.value || (e.value = ie()), ce.value = !e.value.userOptions.showOnChartHover, Fe(), pe.value += 1, Ce.value += 1, ke.value += 1, b.value.height = e.value.style.chart.height, b.value.width = e.value.style.chart.width, n.value.plots = e.value.style.chart.plots.radius, n.value.indexLabels = e.value.style.chart.plots.indexLabels.fontSize, n.value.labels = e.value.style.chart.plots.labels.fontSize, n.value.xAxisLabels = e.value.style.chart.axes.x.labels.fontSize, n.value.xAxisName = e.value.style.chart.axes.x.name.fontSize, n.value.yAxisLabels = e.value.style.chart.axes.y.labels.fontSize, n.value.yAxisName = e.value.style.chart.axes.y.name.fontSize, A.value.showTable = e.value.table.show, A.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 }), Q(() => y.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (ue.value = !1);
}, { deep: !0 });
const { isPrinting: ze, isImaging: Me, generatePdf: Be, generateImage: Oe } = pl({
elementId: `history_plot_${D.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-history-plot",
options: e.value.userOptions.print
}), kt = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ct = d(() => ol(e.value.customPalette)), A = v({
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
});
Q(e, () => {
A.value = {
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
};
}, { immediate: !0 });
const b = v({
height: e.value.style.chart.height,
width: e.value.style.chart.width
}), At = d(() => b.value.width), wt = d(() => b.value.height);
function St() {
let t = 0;
ne.value && (t = Array.from(ne.value.querySelectorAll("text")).reduce((i, o) => {
const C = o.getComputedTextLength();
return C > i ? C : i;
}, 0));
const a = re.value ? re.value.getBoundingClientRect().width : 0;
return t + a + (a ? 24 : 0);
}
const Ne = v(0), _t = Ke((t) => {
Ne.value = t;
});
Jt((t) => {
const a = V.value;
if (!a) return;
const l = new ResizeObserver((i) => {
_t(i[0].contentRect.height);
});
l.observe(a), t(() => l.disconnect());
});
const Ee = d(() => {
let t = 0;
se.value && (t = se.value.getBBox().height + n.value.xAxisName / 2);
let a = 0;
return V.value && (a = Ne.value), t + a;
}), c = d(() => {
const t = e.value.style.chart.padding.left, a = e.value.style.chart.padding.top, l = St(), i = e.value.style.chart.plots.radius;
return {
left: t + l + e.value.style.chart.axes.y.name.offsetX,
top: a + i,
right: b.value.width - e.value.style.chart.padding.right - i - e.value.style.chart.axes.y.name.offsetX,
bottom: b.value.height - e.value.style.chart.padding.bottom - Ee.value - i - e.value.style.chart.axes.x.name.offsetY,
width: b.value.width - t - e.value.style.chart.padding.right - l - i - e.value.style.chart.axes.y.name.offsetX,
height: b.value.height - a - e.value.style.chart.padding.bottom - Ee.value - i * 2 - e.value.style.chart.axes.x.name.offsetY
};
}), n = v({
plots: e.value.style.chart.plots.radius,
indexLabels: e.value.style.chart.plots.indexLabels.fontSize,
labels: e.value.style.chart.plots.labels.fontSize,
xAxisLabels: e.value.style.chart.axes.x.labels.fontSize,
xAxisName: e.value.style.chart.axes.x.name.fontSize,
yAxisLabels: e.value.style.chart.axes.y.labels.fontSize,
yAxisName: e.value.style.chart.axes.y.name.fontSize
}), $ = d(() => mt.value.map((t, a) => ({
...t,
color: t.color ? sl(t.color) : Ct.value[a] || ee[a] || ee[a % ee.length],
seriesIndex: a
}))), Lt = d(() => Math.max(...$.value.filter((t) => !p.value.includes(t.seriesIndex)).flatMap((t) => t.values.map((a) => a.x)))), $t = d(() => {
const t = Math.min(...$.value.filter((a) => !p.value.includes(a.seriesIndex)).flatMap((a) => a.values.map((l) => l.x)));
return t < 0 ? t : 0;
}), Ft = d(() => Math.max(...$.value.filter((t) => !p.value.includes(t.seriesIndex)).flatMap((t) => t.values.map((a) => a.y)))), Tt = d(() => {
const t = Math.min(...$.value.filter((a) => !p.value.includes(a.seriesIndex)).flatMap((a) => a.values.map((l) => l.y)));
return t < 0 ? t : 0;
}), g = d(() => {
const t = Je(
e.value.style.chart.axes.x.scaleMin === null ? $t.value : e.value.style.chart.axes.x.scaleMin,
e.value.style.chart.axes.x.scaleMax === null ? Lt.value : e.value.style.chart.axes.x.scaleMax,
e.value.style.chart.axes.x.ticks
), a = Je(
e.value.style.chart.axes.y.scaleMin === null ? Tt.value : e.value.style.chart.axes.y.scaleMin,
e.value.style.chart.axes.y.scaleMax === null ? Ft.value : e.value.style.chart.axes.y.scaleMax,
e.value.style.chart.axes.y.ticks
);
return {
x: t,
y: a,
tickX: t.ticks.map((l) => ({
x: c.value.left + (l - t.min) / (t.max - t.min) * c.value.width,
y1: c.value.top,
y2: c.value.bottom,
value: l
})),
tickY: a.ticks.map((l) => ({
y: c.value.bottom - (l - a.min) / (a.max - a.min) * c.value.height,
x1: c.value.left,
x2: c.value.right,
value: l
}))
};
});
function Dt(t) {
const a = g.value.x.min < 0 ? Math.abs(g.value.x.min) : g.value.x.min > 0 ? -g.value.x.min : 0;
return c.value.left + ((t || 0) + a) / (g.value.x.max + a) * c.value.width;
}
function zt(t) {
const a = g.value.y.min < 0 ? Math.abs(g.value.y.min) : g.value.y.min > 0 ? -g.value.y.min : 0;
return c.value.bottom - ((t || 0) + a) / (g.value.y.max + a) * c.value.height;
}
const E = d(() => $.value.filter((t) => !p.value.includes(t.seriesIndex)).map((t, a) => {
const l = t.values.map((o, C) => ({
valueX: o.x,
valueY: o.y,
label: o.label,
x: Dt(o.x),
y: zt(o.y),
color: t.color,
seriesName: t.name,
id: Ge()
})), i = l.map((o) => `${o.x},${o.y} `).join("").trim();
return {
...t,
plots: l,
path: `M${i}`
};
}));
function q(t) {
p.value.includes(t) ? p.value = p.value.filter((a) => a !== t) : p.value.push(t);
}
function Ie(t) {
if (!$.value.length)
return e.value.debug && console.warn("VueUiHistoryPlot - There are no series to show."), null;
const a = $.value.find((l) => l.name === t);
return a || (e.value.debug && console.warn(`VueUiHistoryPlot - Series name not found "${t}"`), null);
}
function Mt(t) {
const a = Ie(t);
a !== null && p.value.includes(a.seriesIndex) && q(a.seriesIndex);
}
function Bt(t) {
const a = Ie(t);
a !== null && (p.value.includes(a.seriesIndex) || q(a.seriesIndex));
}
const de = d(() => $.value.map((t) => ({
...t,
opacity: p.value.includes(t.seriesIndex) ? 0.5 : 1,
segregate: () => q(t.seriesIndex),
isSegregated: p.value.includes(t.seriesIndex),
shape: "circle"
}))), Ot = d(() => ({
cy: "history-plot-div-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
}));
function Nt({ datapoint: t, plotIndex: a, seriesIndex: l }) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: { ...t, plotIndex: a, seriesIndex: l }, seriesIndex: l }), Le("selectDatapoint", t);
}
function Pe(t) {
Le("selectLegend", {
...t,
isSegregated: !t.isSegregated,
opacity: t.isSegregated ? 1 : 0.5
});
}
function Xe(t) {
H.value = t, Ae.value += 1;
}
const he = v(null);
function Et({ datapoint: t, plotIndex: a, seriesIndex: l }) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: { ...t, plotIndex: a, seriesIndex: l }, seriesIndex: l }), le.value = !1, w.value = null;
}
function It({ datapoint: t, plotIndex: a, seriesIndex: l }) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: { ...t, plotIndex: a, seriesIndex: l }, seriesIndex: l }), he.value = { datapoint: t, seriesIndex: l, plotIndex: a, config: e.value, series: $.value }, w.value = t;
const i = e.value.style.chart.tooltip.customFormat;
if (j.value = !1, yl(i))
try {
const o = i({
seriesIndex: l,
datapoint: t,
plotIndex: a,
series: $.value,
config: e.value
});
typeof o == "string" && (ae.value = o, j.value = !0);
} catch {
console.warn("Custom format cannot be applied."), j.value = !1;
}
if (!j.value) {
let o = "";
o += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};margin-bottom:3px;padding-bottom:6px;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg><span>${t.seriesName}</span></div>`, o += `<div>${t.label}</div>`, o += `<div>${e.value.style.chart.axes.x.name.text || "x"}: ${R(
e.value.style.chart.axes.x.labels.formatter,
t.valueX,
Y({
p: e.value.style.chart.axes.x.labels.prefix,
v: t.valueX,
s: e.value.style.chart.axes.x.labels.suffix,
r: e.value.style.chart.axes.x.labels.rounding
})
)}</div>`, o += `<div>${e.value.style.chart.axes.y.name.text || "y"}: ${R(
e.value.style.chart.axes.y.labels.formatter,
t.valueY,
Y({
p: e.value.style.chart.axes.y.labels.prefix,
v: t.valueY,
s: e.value.style.chart.axes.y.labels.suffix,
r: e.value.style.chart.axes.y.labels.rounding
})
)}</div>`, ae.value = `<div>${o}</div>`;
}
le.value = !0;
}
d(() => ({ head: E.value.map((a) => ({
name: a.name,
color: a.color
})) }));
const Z = d(() => {
const t = [
e.value.table.columnNames.series,
e.value.table.columnNames.datapoint,
e.value.table.columnNames.x,
e.value.table.columnNames.y
], a = E.value.flatMap((i) => i.plots.map((o) => [
{
color: o.color,
name: o.seriesName
},
o.label,
R(
e.value.style.chart.axes.x.labels.formatter,
o.valueX,
Y({
p: e.value.style.chart.axes.x.labels.prefix,
v: o.valueX,
s: e.value.style.chart.axes.x.labels.suffix,
r: e.value.style.chart.axes.x.labels.rounding
})
),
R(
e.value.style.chart.axes.y.labels.formatter,
o.valueY,
Y({
p: e.value.style.chart.axes.y.labels.prefix,
v: o.valueY,
s: e.value.style.chart.axes.y.labels.suffix,
r: e.value.style.chart.axes.y.labels.rounding
})
)
])), l = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
};
return {
head: t,
body: a,
config: l,
colNames: t
};
});
function ye(t = null) {
tl(() => {
const a = [
[e.value.table.columnNames.series],
[e.value.table.columnNames.datapoint],
[e.value.table.columnNames.x],
[e.value.table.columnNames.y]
], l = E.value.flatMap((C) => C.plots.map((K) => [
[K.seriesName],
[K.label],
[K.valueX],
[K.valueY]
])), i = [
[e.value.style.chart.title.text],
[e.value.style.chart.title.subtitle.text],
a
].concat(l), o = dl(i);
t ? t(o) : hl({
csvContent: o,
title: e.value.style.chart.title.text || "vue-ui-history-plot"
});
});
}
const J = v(!1);
function fe() {
J.value = !J.value;
}
function Re() {
A.value.showTable = !A.value.showTable;
}
function Ye() {
A.value.showTooltip = !A.value.showTooltip;
}
function Pt() {
return E.value;
}
async function Xt({ scale: t = 2 } = {}) {
if (!T.value) return;
const { width: a, height: l } = T.value.getBoundingClientRect(), i = a / l, { imageUri: o, base64: C } = await Sl({ domElement: T.value, base64: !0, img: !0, scale: t });
return {
imageUri: o,
base64: C,
title: e.value.style.chart.title.text,
width: a,
height: l,
aspectRatio: i
};
}
const Rt = d(() => g.value.tickX), Yt = d(() => ({ start: 0, end: g.value.tickX.length }));
wl({
timeLabelsEls: V,
timeLabels: Rt,
slicer: Yt,
configRef: e,
rotationPath: ["style", "chart", "axes", "x", "labels", "rotation"],
autoRotatePath: ["style", "chart", "axes", "x", "labels", "autoRotate", "enable"],
isAutoSize: !1,
width: At,
height: wt,
targetClass: ".vue-ui-history-plot-x-axis-scale",
rotation: e.value.style.chart.axes.x.labels.autoRotate.angle
});
const W = d(() => {
const t = e.value.table.useDialog && !e.value.table.show, a = A.value.showTable;
return {
component: t ? xt : vt,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: t ? {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
headerColor: e.value.table.th.color,
headerBg: e.value.table.th.backgroundColor,
isFullscreen: H.value,
fullscreenParent: T.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: a,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
},
head: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
}
}
}
};
});
Q(() => A.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && U.value ? U.value.open() : "close" in U.value && U.value.close());
});
function He() {
A.value.showTable = !1, oe.value && oe.value.setTableIconState(!1);
}
const Ht = d(() => e.value.style.chart.backgroundColor), jt = d(() => e.value.style.chart.legend), Ut = d(() => e.value.style.chart.title), { exportSvg: Wt, getSvg: Vt } = ml({
svg: ve,
title: Ut,
legend: jt,
legendItems: de,
backgroundColor: Ht
});
async function je({ isCb: t }) {
if (t) {
const { blob: a, url: l, text: i, dataUrl: o } = await Vt();
e.value.userOptions.callbacks.svg({ blob: a, url: l, text: i, dataUrl: o });
} else
Wt();
}
return nt({
getData: Pt,
getImage: Xt,
generatePdf: Be,
generateCsv: ye,
generateImage: Oe,
generateSvg: je,
hideSeries: Bt,
showSeries: Mt,
toggleTable: Re,
toggleTooltip: Ye,
toggleAnnotator: fe,
toggleFullscreen: Xe
}), (t, a) => (s(), r("div", {
id: `history_plot_${D.value}`,
ref_key: "historyPlotChart",
ref: T,
class: I({ "vue-data-ui-component": !0, "vue-ui-history-plot": !0, "vue-data-ui-wrapper-fullscreen": H.value }),
style: F(`background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: a[2] || (a[2] = () => u(Te)(!0)),
onMouseleave: a[3] || (a[3] = () => u(Te)(!1))
}, [
f(t.$slots, "userConfig", {}, void 0, !0),
e.value.userOptions.buttons.annotator ? (s(), N(u(ht), {
key: 0,
svgRef: u(ve),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: J.value,
onClose: fe
}, {
"annotator-action-close": x(() => [
f(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": x(({ color: l }) => [
f(t.$slots, "annotator-action-color", _(L({ color: l })), void 0, !0)
]),
"annotator-action-draw": x(({ mode: l }) => [
f(t.$slots, "annotator-action-draw", _(L({ mode: l })), void 0, !0)
]),
"annotator-action-undo": x(({ disabled: l }) => [
f(t.$slots, "annotator-action-undo", _(L({ disabled: l })), void 0, !0)
]),
"annotator-action-redo": x(({ disabled: l }) => [
f(t.$slots, "annotator-action-redo", _(L({ disabled: l })), void 0, !0)
]),
"annotator-action-delete": x(({ disabled: l }) => [
f(t.$slots, "annotator-action-delete", _(L({ disabled: l })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
kt.value ? (s(), r("div", {
key: 1,
ref_key: "noTitle",
ref: we,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : h("", !0),
e.value.style.chart.title.text ? (s(), r("div", {
key: 2,
ref_key: "chartTitle",
ref: ge,
class: "vue-ui-xy-title",
style: F(`font-family:${e.value.style.fontFamily}`)
}, [
(s(), N(_l, {
key: `title_${pe.value}`,
config: {
title: {
cy: "history-plot-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "history-plot-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 4)) : h("", !0),
S("div", {
id: `legend-top-${D.value}`
}, null, 8, Tl),
e.value.userOptions.show && G.value && (u(De) || u(ce)) ? (s(), N(u(yt), {
ref_key: "userOptionsRef",
ref: oe,
key: `user_option_${Ae.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: u(ze),
isImaging: u(Me),
uid: D.value,
hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasLabel: !1,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: H.value,
chartElement: T.value,
position: e.value.userOptions.position,
isTooltip: A.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: J.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: Xe,
onGeneratePdf: u(Be),
onGenerateCsv: ye,
onGenerateImage: u(Oe),
onGenerateSvg: je,
onToggleTable: Re,
onToggleTooltip: Ye,
onToggleAnnotator: fe,
style: F({
visibility: u(De) ? u(ce) ? "visible" : "hidden" : "visible"
})
}, We({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: x(({ isOpen: l, color: i }) => [
f(t.$slots, "menuIcon", _(L({ isOpen: l, color: i })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: x(() => [
f(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: x(() => [
f(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: x(() => [
f(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: x(() => [
f(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: x(() => [
f(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: x(() => [
f(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: x(({ toggleFullscreen: l, isFullscreen: i }) => [
f(t.$slots, "optionFullscreen", _(L({ toggleFullscreen: l, isFullscreen: i })), void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: x(({ toggleAnnotator: l, isAnnotator: i }) => [
f(t.$slots, "optionAnnotator", _(L({ toggleAnnotator: l, isAnnotator: i })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
(s(), r("svg", {
ref_key: "svgRef",
ref: ve,
xmlns: u(rl),
viewBox: `0 0 ${b.value.width < 0 ? 0.1 : b.value.width} ${b.value.height < 0 ? 0.1 : b.value.height}`,
style: F(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
xe(u(ft)),
t.$slots["chart-background"] ? (s(), r("foreignObject", {
key: 0,
x: c.value.left,
y: c.value.top,
width: c.value.width <= 0 ? 10 : c.value.width,
height: c.value.height <= 0 ? 10 : c.value.height,
style: {
pointerEvents: "none"
}
}, [
f(t.$slots, "chart-background", {}, void 0, !0)
], 8, zl)) : h("", !0),
e.value.style.chart.plots.gradient.show ? (s(), r("defs", Ml, [
(s(!0), r(m, null, k(E.value, (l, i) => (s(), r("radialGradient", {
id: `gradient_${i}_${D.value}`,
fy: "30%"
}, [
S("stop", {
offset: "10%",
"stop-color": u(nl)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, Ol),
S("stop", {
offset: "90%",
"stop-color": u(il)(l.color, 0.1)
}, null, 8, Nl),
S("stop", {
offset: "100%",
"stop-color": l.color
}, null, 8, El)
], 8, Bl))), 256))
])) : h("", !0),
e.value.style.chart.grid.verticalLines.show ? (s(), r("g", Il, [
(s(!0), r(m, null, k(g.value.tickX, (l) => (s(), r("line", {
x1: l.x,
x2: l.x,
y1: l.y1,
y2: l.y2,
stroke: e.value.style.chart.grid.verticalLines.stroke,
"stroke-width": e.value.style.chart.grid.verticalLines.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Pl))), 256))
])) : h("", !0),
e.value.style.chart.axes.y.labels.show ? (s(), r("g", Xl, [
(s(!0), r(m, null, k(g.value.tickY, (l) => (s(), r("line", {
stroke: e.value.style.chart.grid.verticalLines.stroke,
"stroke-width": e.value.style.chart.grid.verticalLines.strokeWidth,
"stroke-linecap": "round",
x1: c.value.left - 5,
x2: c.value.left,
y1: l.y,
y2: l.y
}, null, 8, Rl))), 256))
])) : h("", !0),
e.value.style.chart.axes.y.labels.show ? (s(), r("g", {
key: 4,
ref_key: "yAxisScales",
ref: ne
}, [
(s(!0), r(m, null, k(g.value.tickY, (l) => (s(), r("text", {
x: c.value.left + e.value.style.chart.axes.y.labels.offsetX - 4 - e.value.style.chart.plots.radius,
y: l.y + n.value.yAxisLabels / 3,
fill: e.value.style.chart.axes.y.labels.color,
"font-size": n.value.yAxisLabels,
"text-anchor": "end"
}, z(u(R)(
e.value.style.chart.axes.y.labels.formatter,
l.value,
u(Y)({
p: e.value.style.chart.axes.y.labels.prefix,
v: l.value,
s: e.value.style.chart.axes.y.labels.suffix,
r: e.value.style.chart.axes.y.labels.rounding
})
)), 9, Yl))), 256))
], 512)) : h("", !0),
e.value.style.chart.axes.y.name.text ? (s(), r("text", {
key: 5,
ref_key: "yAxisLabel",
ref: re,
transform: `translate(${n.value.yAxisName}, ${b.value.height / 2 + e.value.style.chart.axes.y.name.offsetY}), rotate(-90)`,
"font-size": n.value.yAxisName,
fill: e.value.style.chart.axes.y.name.color,
"font-weight": e.value.style.chart.axes.y.name.bold ? "bold" : "normal",
"text-anchor": "middle"
}, z(e.value.style.chart.axes.y.name.text), 9, Hl)) : h("", !0),
e.value.style.chart.grid.horizontalLines.show ? (s(), r("g", jl, [
(s(!0), r(m, null, k(g.value.tickY, (l) => (s(), r("line", {
x1: l.x1,
x2: l.x2,
y1: l.y,
y2: l.y,
stroke: e.value.style.chart.grid.horizontalLines.stroke,
"stroke-width": e.value.style.chart.grid.horizontalLines.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Ul))), 256))
])) : h("", !0),
e.value.style.chart.axes.x.labels.show ? (s(), r("g", Wl, [
(s(!0), r(m, null, k(g.value.tickX, (l) => (s(), r("line", {
stroke: e.value.style.chart.grid.verticalLines.stroke,
"stroke-width": e.value.style.chart.grid.verticalLines.strokeWidth,
"stroke-linecap": "round",
x1: l.x,
x2: l.x,
y1: c.value.bottom,
y2: c.value.bottom + 5
}, null, 8, Vl))), 256))
])) : h("", !0),
e.value.style.chart.axes.x.labels.show ? (s(), r("g", {
key: 8,
ref_key: "xAxisScales",
ref: V
}, [
(s(!0), r(m, null, k(g.value.tickX, (l) => (s(), r("text", {
class: "vue-ui-history-plot-x-axis-scale",
transform: `translate(${l.x}, ${c.value.bottom + e.value.style.chart.axes.x.labels.offsetY + n.value.xAxisLabels + e.value.style.chart.plots.radius}), rotate(${e.value.style.chart.axes.x.labels.rotation})`,
fill: e.value.style.chart.axes.x.labels.color,
"font-size": n.value.xAxisLabels,
"text-anchor": e.value.style.chart.axes.x.labels.rotation > 0 ? "start" : e.value.style.chart.axes.x.labels.rotation < 0 ? "end" : "middle"
}, z(u(R)(
e.value.style.chart.axes.x.labels.formatter,
l.value,
u(Y)({
p: e.value.style.chart.axes.x.labels.prefix,
v: l.value,
s: e.value.style.chart.axes.x.labels.suffix,
r: e.value.style.chart.axes.x.labels.rounding
})
)), 9, Gl))), 256))
], 512)) : h("", !0),
e.value.style.chart.axes.x.name.text ? (s(), r("text", {
key: 9,
ref_key: "xAxisLabel",
ref: se,
x: b.value.width / 2 + e.value.style.chart.axes.x.name.offsetX,
y: b.value.height,
"font-size": n.value.xAxisName,
fill: e.value.style.chart.axes.x.name.color,
"font-weight": e.value.style.chart.axes.x.name.bold ? "bold" : "normal",
"text-anchor": "middle"
}, z(e.value.style.chart.axes.x.name.text), 9, ql)) : h("", !0),
e.value.style.chart.grid.xAxis.show ? (s(), r("line", {
key: 10,
x1: c.value.left,
x2: c.value.left + c.value.width,
y1: c.value.bottom,
y2: c.value.bottom,
stroke: e.value.style.chart.grid.xAxis.stroke,
"stroke-width": e.value.style.chart.grid.xAxis.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Zl)) : h("", !0),
e.value.style.chart.grid.yAxis.show ? (s(), r("line", {
key: 11,
x1: c.value.left,
x2: c.value.left,
y1: c.value.top,
y2: c.value.bottom,
stroke: e.value.style.chart.grid.yAxis.stroke,
"stroke-width": e.value.style.chart.grid.yAxis.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Jl)) : h("", !0),
(s(!0), r(m, null, k(E.value, (l, i) => (s(), r("g", null, [
e.value.style.chart.paths.show ? (s(), r("g", {
key: 0,
style: F({
opacity: w.value === null ? 1 : 0.3
})
}, [
S("path", {
d: l.path,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.paths.strokeWidth + 4,
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: I({ animated: e.value.useCssAnimation && !u(B) })
}, null, 10, Kl),
S("path", {
d: l.path,
stroke: e.value.style.chart.paths.useSerieColor ? l.color : e.value.style.chart.paths.stroke,
"stroke-width": e.value.style.chart.paths.strokeWidth,
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: I({ animated: e.value.useCssAnimation && !u(B) })
}, null, 10, Ql)
], 4)) : h("", !0),
(s(!0), r(m, null, k(l.plots, (o) => (s(), r("circle", {
cx: o.x,
cy: o.y,
fill: e.value.style.chart.backgroundColor,
r: n.value.plots,
stroke: "none"
}, null, 8, ea))), 256)),
(s(!0), r(m, null, k(l.plots, (o) => (s(), r("circle", {
cx: o.x,
cy: o.y,
fill: e.value.style.chart.plots.gradient.show ? `url(#gradient_${i}_${D.value})` : o.color,
r: n.value.plots,
stroke: e.value.style.chart.plots.stroke,
"stroke-width": e.value.style.chart.plots.strokeWidth,
class: I({ animated: e.value.useCssAnimation && !u(B) }),
style: F({
opacity: w.value === null || w.value.id === o.id ? 1 : 0.3,
transition: "opacity 0.2s ease-in-out"
})
}, null, 14, ta))), 256)),
e.value.style.chart.plots.labels.show ? (s(), r("g", la, [
(s(!0), r(m, null, k(l.plots, (o) => (s(), r("g", null, [
String(o.label).includes(`
`) ? (s(), r("text", {
key: 1,
x: o.x + e.value.style.chart.plots.labels.offsetX,
y: o.y + e.value.style.chart.plots.labels.offsetY + n.value.plots + n.value.labels,
"font-size": n.value.labels,
fill: e.value.style.chart.plots.labels.color,
"font-weight": e.value.style.chart.plots.labels.bold ? "bold" : "normal",
"text-anchor": "middle",
class: I({ animated: e.value.useCssAnimation && !u(B) }),
style: F({
opacity: w.value === null || w.value.id === o.id ? 1 : 0.3,
transition: "opacity 0.2s ease-in-out"
}),
innerHTML: u(ul)({
content: String(o.label),
fontSize: n.value.labels,
fill: e.value.style.chart.plots.labels.color,
x: o.x + e.value.style.chart.plots.labels.offsetX,
y: o.y + e.value.style.chart.plots.labels.offsetY + n.value.plots + n.value.labels
})
}, null, 14, oa)) : (s(), r("text", {
key: 0,
x: o.x + e.value.style.chart.plots.labels.offsetX,
y: o.y + e.value.style.chart.plots.labels.offsetY + n.value.plots + n.value.labels,
"font-size": n.value.labels,
fill: e.value.style.chart.plots.labels.color,
"font-weight": e.value.style.chart.plots.labels.bold ? "bold" : "normal",
"text-anchor": "middle",
class: I({ animated: e.value.useCssAnimation && !u(B) }),
style: F({
opacity: w.value === null || w.value.id === o.id ? 1 : 0.3,
transition: "opacity 0.2s ease-in-out"
})
}, z(o.label), 15, aa))
]))), 256))
])) : h("", !0),
e.value.style.chart.plots.indexLabels.show ? (s(), r("g", sa, [
(s(!0), r(m, null, k(l.plots, (o, C) => (s(), r("text", {
x: o.x + e.value.style.chart.plots.indexLabels.offsetX,
y: o.y + e.value.style.chart.plots.indexLabels.offsetY + n.value.indexLabels / 3,
"font-size": n.value.indexLabels,
"font-weight": e.value.style.chart.plots.indexLabels.bold ? "bold" : "normal",
fill: e.value.style.chart.plots.indexLabels.adaptColorToBackground ? u(cl)(l.color) : e.value.style.chart.plots.indexLabels.color,
"text-anchor": "middle",
class: I({ animated: e.value.useCssAnimation && !u(B) }),
style: F({
opacity: w.value === null || w.value.id === o.id ? 1 : 0.3,
transition: "opacity 0.2s ease-in-out"
})
}, z(e.value.style.chart.plots.indexLabels.startAtZero ? C : C + 1), 15, ra))), 256))
])) : h("", !0)
]))), 256)),
(s(!0), r(m, null, k(E.value, (l) => (s(), r("g", null, [
(s(!0), r(m, null, k(l.plots, (i, o) => (s(), r("circle", {
cx: i.x,
cy: i.y,
fill: "transparent",
r: n.value.plots,
stroke: "none",
onMouseenter: (C) => It({
datapoint: i,
plotIndex: o,
seriesIndex: l.seriesIndex
}),
onMouseleave: (C) => Et({
datapoint: i,
plotIndex: o,
seriesIndex: l.seriesIndex
}),
onClick: (C) => Nt({
datapoint: i,
plotIndex: o,
seriesIndex: l.seriesIndex
})
}, null, 40, na))), 256))
]))), 256)),
f(t.$slots, "svg", { svg: b.value }, void 0, !0)
], 12, Dl)),
t.$slots.watermark ? (s(), r("div", ia, [
f(t.$slots, "watermark", _(L({ isPrinting: u(ze) || u(Me) })), void 0, !0)
])) : h("", !0),
S("div", {
id: `legend-bottom-${D.value}`
}, null, 8, ua),
_e.value ? (s(), N(Kt, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${D.value}` : `#legend-bottom-${D.value}`
}, [
S("div", {
ref_key: "chartLegend",
ref: me
}, [
e.value.style.chart.legend.show && G.value ? (s(), N(Ll, {
key: `legend_${ke.value}`,
legendSet: de.value,
config: Ot.value,
onClickMarker: a[0] || (a[0] = ({ legend: l }) => {
q(l.seriesIndex), Pe(l);
})
}, {
item: x(({ legend: l, index: i }) => [
S("div", {
onClick: (o) => {
l.segregate(), Pe(l);
},
style: F(`opacity:${p.value.includes(l.seriesIndex) ? 0.5 : 1}`)
}, z(l.name), 13, ca)
]),
_: 1
}, 8, ["legendSet", "config"])) : f(t.$slots, "legend", {
key: 1,
legend: de.value
}, void 0, !0)
], 512)
], 8, ["to"])) : h("", !0),
t.$slots.source ? (s(), r("div", {
key: 6,
ref_key: "source",
ref: Se,
dir: "auto"
}, [
f(t.$slots, "source", {}, void 0, !0)
], 512)) : h("", !0),
xe(u(ut), {
show: A.value.showTooltip && le.value,
backgroundColor: e.value.style.chart.tooltip.backgroundColor,
color: e.value.style.chart.tooltip.color,
fontSize: e.value.style.chart.tooltip.fontSize,
borderRadius: e.value.style.chart.tooltip.borderRadius,
borderColor: e.value.style.chart.tooltip.borderColor,
borderWidth: e.value.style.chart.tooltip.borderWidth,
backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
position: e.value.style.chart.tooltip.position,
offsetY: e.value.style.chart.tooltip.offsetY,
parent: T.value,
content: ae.value,
isCustom: j.value,
isFullscreen: H.value,
smooth: e.value.style.chart.tooltip.smooth,
backdropFilter: e.value.style.chart.tooltip.backdropFilter,
smoothForce: e.value.style.chart.tooltip.smoothForce,
smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
}, {
"tooltip-before": x(() => [
f(t.$slots, "tooltip-before", _(L({ ...he.value })), void 0, !0)
]),
"tooltip-after": x(() => [
f(t.$slots, "tooltip-after", _(L({ ...he.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
G.value && e.value.userOptions.buttons.table ? (s(), N(Qt(W.value.component), el({ key: 7 }, W.value.props, {
ref_key: "tableUnit",
ref: U,
onClose: He
}), We({
content: x(() => [
(s(), N(u(dt), {
key: `table_${Ce.value}`,
colNames: Z.value.colNames,
head: Z.value.head,
body: Z.value.body,
config: Z.value.config,
title: e.value.table.useDialog ? "" : W.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: He
}, {
th: x(({ th: l }) => [
S("div", {
innerHTML: l,
style: { display: "flex", "align-items": "center" }
}, null, 8, va)
]),
td: x(({ td: l }) => [
Ve(z(l.name || l), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: x(() => [
Ve(z(W.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: x(() => [
S("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: a[1] || (a[1] = (l) => ye(e.value.userOptions.callbacks.csv))
}, [
xe(u(ct), {
name: "excel",
stroke: W.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : h("", !0),
u(B) ? (s(), N(gl, { key: 8 })) : h("", !0)
], 46, Fl));
}
}, ha = /* @__PURE__ */ $l(da, [["__scopeId", "data-v-64d73bdd"]]), Ta = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: ha
}, Symbol.toStringTag, { value: "Module" }));
export {
Fa as a,
Ta as b,
ha as v
};