vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,088 lines (1,087 loc) • 47 kB
JavaScript
import { defineAsyncComponent as R, ref as v, shallowRef as Xe, computed as d, onMounted as wt, onBeforeUnmount as At, toRefs as Ct, watch as ie, watchEffect as _t, createElementBlock as r, openBlock as o, unref as u, normalizeStyle as _, normalizeClass as P, renderSlot as p, createBlock as N, createCommentVNode as h, createElementVNode as L, createVNode as Re, createSlots as Lt, withCtx as m, normalizeProps as Y, guardReactiveProps as D, Fragment as g, renderList as b, toDisplayString as O, Teleport as $t, createTextVNode as St, nextTick as Tt } from "vue";
import { u as Mt, c as Ye, o as De, f as Be, g as zt, t as Nt, d as Ot, e as It, p as Z, D as Ee, k as B, i as E, X as Pt, l as Ft, j as Xt, I as Rt, F as Yt, E as F, a as Dt, b as Bt, C as J, v as Et, w as Ht, y as jt } from "./index-q-LPw2IT.js";
import { t as He, u as Wt } from "./useResponsive-DfdjqQps.js";
import { u as Ut, B as Gt } from "./useLoading-D7YHNtLX.js";
import { u as Vt } from "./usePrinter-DX7efa1s.js";
import { u as je } from "./useNestedProp-04aFeUYu.js";
import { u as qt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Zt } from "./useChartAccessibility-9icAAmYg.js";
import { u as Jt } from "./useTimeLabelCollider-CIsgDrl9.js";
import Kt from "./Legend-DcDSkq99.js";
import Qt from "./Title-B55R8CAZ.js";
import el from "./img-Ctts6JQb.js";
import { _ as tl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ll = ["id"], al = ["id"], sl = ["xmlns", "viewBox"], ol = ["x", "y", "width", "height"], rl = { key: 1 }, nl = ["id"], il = ["stop-color"], ul = ["stop-color"], cl = ["stop-color"], vl = { key: 2 }, hl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], yl = { key: 3 }, dl = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], fl = ["x", "y", "fill", "font-size"], xl = ["transform", "font-size", "fill", "font-weight"], pl = { key: 6 }, ml = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], gl = { key: 7 }, bl = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], kl = ["transform", "fill", "font-size", "text-anchor"], wl = ["x", "y", "font-size", "fill", "font-weight"], Al = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Cl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], _l = ["d", "stroke", "stroke-width"], Ll = ["d", "stroke", "stroke-width"], $l = ["cx", "cy", "fill", "r"], Sl = ["cx", "cy", "fill", "r", "stroke", "stroke-width"], Tl = { key: 1 }, Ml = ["x", "y", "font-size", "fill", "font-weight"], zl = ["x", "y", "font-size", "fill", "font-weight", "innerHTML"], Nl = { key: 2 }, Ol = ["x", "y", "font-size", "font-weight", "fill"], Il = ["cx", "cy", "r", "onMouseenter", "onMouseleave", "onClick"], Pl = {
key: 4,
class: "vue-data-ui-watermark"
}, Fl = ["id"], Xl = ["onClick"], Rl = ["innerHTML"], Yl = {
__name: "vue-ui-history-plot",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend", "selectDatapoint"],
setup(We, { expose: Ue, emit: Ge }) {
const Ve = R(() => import("./vue-ui-accordion-D46i_gkB.js")), qe = R(() => import("./DataTable-rj9-mAwF.js")), Ze = R(() => import("./PackageVersion-5ZjKSIei.js")), Je = R(() => import("./PenAndPaper-BJ0hcgsa.js")), Ke = R(() => import("./Tooltip-BMOddG-M.js")), Qe = R(() => import("./UserOptions-DVzyjG-W.js")), { vue_ui_history_plot: et } = Mt(), y = We, S = v(null), ue = v(null), ce = v(0), ve = v(null), he = v(0), ye = v(0), de = v(0), T = Xe(null), X = Xe(null), fe = v(null), $ = v(Ye()), K = v(!1), Q = v(""), w = v([]), j = v(!1), A = v(null), H = v(!1), xe = v(null), pe = v(!1), ee = v(null), te = v(null), W = v(null), le = v(null), U = d({
get: () => !!y.dataset && y.dataset.length,
set: (t) => t
}), me = Ge;
wt(() => {
pe.value = !0, be();
});
const ge = d(() => !!e.value.debug);
function be() {
if (De(y.dataset) ? (Be({
componentName: "VueUiHistoryPlot",
type: "dataset",
debug: ge.value
}), se.value = !0) : y.dataset.forEach((t, a) => {
zt({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((l) => {
U.value = !1, Be({
componentName: "VueUiHistoryPlot",
type: "datasetSerieAttribute",
property: l,
index: a,
debug: ge.value
});
});
}), De(y.dataset) || (se.value = e.value.loading), e.value.responsive) {
const t = He(() => {
const { width: a, height: l } = Wt({
chart: S.value,
title: e.value.style.chart.title.text ? ue.value : null,
noTitle: fe.value,
legend: e.value.style.chart.legend.show ? ve.value : null,
source: xe.value
});
requestAnimationFrame(() => {
f.value.width = a, f.value.height = l, e.value.responsiveProportionalSizing ? (n.value.plots = F({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.plots.radius,
threshold: 3,
fallback: 3
}), n.value.indexLabels = F({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.plots.indexLabels.fontSize,
threshold: 6,
fallback: 6
}), n.value.labels = F({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.plots.labels.fontSize,
threshold: 6,
fallback: 6
}), n.value.xAxisLabels = F({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.axes.x.labels.fontSize,
threshold: 6,
fallback: 6
}), n.value.xAxisName = F({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.axes.x.name.fontSize,
threshold: 6,
fallback: 6
}), n.value.yAxisLabels = F({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.axes.y.labels.fontSize,
threshold: 6,
fallback: 6
}), n.value.yAxisName = F({
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);
});
});
T.value && (X.value && T.value.unobserve(X.value), T.value.disconnect()), T.value = new ResizeObserver(t), X.value = S.value.parentNode, T.value.observe(X.value);
}
}
At(() => {
T.value && (X.value && T.value.unobserve(X.value), T.value.disconnect());
});
function ae() {
const t = je({
userConfig: y.config,
defaultConfig: et
});
let a = {};
return t.theme ? a = {
...je({
userConfig: Bt.vue_ui_history_plot[t.theme] || y.config,
defaultConfig: t
}),
customPalette: Dt[t.theme] || Z
} : a = t, y.config && J(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 && J(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 && J(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 && J(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(ae()), { loading: M, FINAL_DATASET: tt, manualLoading: se } = Ut({
...Ct(y),
FINAL_CONFIG: e,
prepareConfig: ae,
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: Nt({
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: oe, setUserOptionsVisibility: ke, keepUserOptionState: we } = qt({ config: e.value }), { svgRef: Ae } = Zt({ config: e.value.style.chart.title });
ie(() => y.config, (t) => {
M.value || (e.value = ae()), oe.value = !e.value.userOptions.showOnChartHover, be(), ce.value += 1, ye.value += 1, he.value += 1, f.value.height = e.value.style.chart.height, f.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, C.value.showTable = e.value.table.show, C.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 }), ie(() => y.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (se.value = !1);
}, { deep: !0 });
const { isPrinting: Ce, isImaging: _e, generatePdf: Le, generateImage: $e } = Vt({
elementId: `history_plot_${$.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-history-plot",
options: e.value.userOptions.print
}), lt = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), at = d(() => Ot(e.value.customPalette)), C = v({
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
});
ie(e, () => {
C.value = {
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
};
}, { immediate: !0 });
const f = v({
height: e.value.style.chart.height,
width: e.value.style.chart.width
}), st = d(() => f.value.width), ot = d(() => f.value.height);
function rt() {
let t = 0;
le.value && (t = Array.from(le.value.querySelectorAll("text")).reduce((i, s) => {
const k = s.getComputedTextLength();
return k > i ? k : i;
}, 0));
const a = te.value ? te.value.getBoundingClientRect().width : 0;
return t + a + (a ? 24 : 0);
}
const Se = v(0), nt = He((t) => {
Se.value = t;
});
_t((t) => {
const a = W.value;
if (!a) return;
const l = new ResizeObserver((i) => {
nt(i[0].contentRect.height);
});
l.observe(a), t(() => l.disconnect());
});
const Te = d(() => {
let t = 0;
ee.value && (t = ee.value.getBBox().height + n.value.xAxisName / 2);
let a = 0;
return W.value && (a = Se.value), t + a;
}), c = d(() => {
const t = e.value.style.chart.padding.left, a = e.value.style.chart.padding.top, l = rt(), i = e.value.style.chart.plots.radius;
return {
left: t + l + e.value.style.chart.axes.y.name.offsetX,
top: a + i,
right: f.value.width - e.value.style.chart.padding.right - i - e.value.style.chart.axes.y.name.offsetX,
bottom: f.value.height - e.value.style.chart.padding.bottom - Te.value - i - e.value.style.chart.axes.x.name.offsetY,
width: f.value.width - t - e.value.style.chart.padding.right - l - i - e.value.style.chart.axes.y.name.offsetX,
height: f.value.height - a - e.value.style.chart.padding.bottom - Te.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
}), z = d(() => tt.value.map((t, a) => ({
...t,
color: t.color ? It(t.color) : at.value[a] || Z[a] || Z[a % Z.length],
seriesIndex: a
}))), it = d(() => Math.max(...z.value.filter((t) => !w.value.includes(t.seriesIndex)).flatMap((t) => t.values.map((a) => a.x)))), ut = d(() => {
const t = Math.min(...z.value.filter((a) => !w.value.includes(a.seriesIndex)).flatMap((a) => a.values.map((l) => l.x)));
return t < 0 ? t : 0;
}), ct = d(() => Math.max(...z.value.filter((t) => !w.value.includes(t.seriesIndex)).flatMap((t) => t.values.map((a) => a.y)))), vt = d(() => {
const t = Math.min(...z.value.filter((a) => !w.value.includes(a.seriesIndex)).flatMap((a) => a.values.map((l) => l.y)));
return t < 0 ? t : 0;
}), x = d(() => {
const t = Ee(
e.value.style.chart.axes.x.scaleMin === null ? ut.value : e.value.style.chart.axes.x.scaleMin,
e.value.style.chart.axes.x.scaleMax === null ? it.value : e.value.style.chart.axes.x.scaleMax,
e.value.style.chart.axes.x.ticks
), a = Ee(
e.value.style.chart.axes.y.scaleMin === null ? vt.value : e.value.style.chart.axes.y.scaleMin,
e.value.style.chart.axes.y.scaleMax === null ? ct.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 ht(t) {
const a = x.value.x.min < 0 ? Math.abs(x.value.x.min) : x.value.x.min > 0 ? -x.value.x.min : 0;
return c.value.left + ((t || 0) + a) / (x.value.x.max + a) * c.value.width;
}
function yt(t) {
const a = x.value.y.min < 0 ? Math.abs(x.value.y.min) : x.value.y.min > 0 ? -x.value.y.min : 0;
return c.value.bottom - ((t || 0) + a) / (x.value.y.max + a) * c.value.height;
}
const I = d(() => z.value.filter((t) => !w.value.includes(t.seriesIndex)).map((t, a) => {
const l = t.values.map((s, k) => ({
valueX: s.x,
valueY: s.y,
label: s.label,
x: ht(s.x),
y: yt(s.y),
color: t.color,
seriesName: t.name,
id: Ye()
})), i = l.map((s) => `${s.x},${s.y} `).join("").trim();
return {
...t,
plots: l,
path: `M${i}`
};
}));
function Me(t) {
w.value.includes(t) ? w.value = w.value.filter((a) => a !== t) : w.value.push(t);
}
const ze = d(() => z.value.map((t) => ({
...t,
opacity: w.value.includes(t.seriesIndex) ? 0.5 : 1,
segregate: () => Me(t.seriesIndex),
isSegregated: w.value.includes(t.seriesIndex),
shape: "circle"
}))), dt = 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 ft({ datapoint: t, plotIndex: a, seriesIndex: l }) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: { ...t, plotIndex: a, seriesIndex: l }, seriesIndex: l }), me("selectDatapoint", t);
}
function Ne(t) {
me("selectLegend", {
...t,
isSegregated: !t.isSegregated,
opacity: t.isSegregated ? 1 : 0.5
});
}
function Oe(t) {
j.value = t, de.value += 1;
}
const re = v(null);
function xt({ datapoint: t, plotIndex: a, seriesIndex: l }) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: { ...t, plotIndex: a, seriesIndex: l }, seriesIndex: l }), K.value = !1, A.value = null;
}
function pt({ datapoint: t, plotIndex: a, seriesIndex: l }) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: { ...t, plotIndex: a, seriesIndex: l }, seriesIndex: l }), re.value = { datapoint: t, seriesIndex: l, plotIndex: a, config: e.value, series: z.value }, A.value = t;
const i = e.value.style.chart.tooltip.customFormat;
if (H.value = !1, jt(i))
try {
const s = i({
seriesIndex: l,
datapoint: t,
plotIndex: a,
series: z.value,
config: e.value
});
typeof s == "string" && (Q.value = s, H.value = !0);
} catch {
console.warn("Custom format cannot be applied."), H.value = !1;
}
if (!H.value) {
let s = "";
s += `<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>`, s += `<div>${t.label}</div>`, s += `<div>${e.value.style.chart.axes.x.name.text || "x"}: ${B(
e.value.style.chart.axes.x.labels.formatter,
t.valueX,
E({
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>`, s += `<div>${e.value.style.chart.axes.y.name.text || "y"}: ${B(
e.value.style.chart.axes.y.labels.formatter,
t.valueY,
E({
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>`, Q.value = `<div>${s}</div>`;
}
K.value = !0;
}
d(() => ({ head: I.value.map((a) => ({
name: a.name,
color: a.color
})) }));
const G = d(() => {
const t = [
e.value.table.columnNames.series,
e.value.table.columnNames.datapoint,
e.value.table.columnNames.x,
e.value.table.columnNames.y
], a = I.value.flatMap((i) => i.plots.map((s) => [
{
color: s.color,
name: s.seriesName
},
s.label,
B(
e.value.style.chart.axes.x.labels.formatter,
s.valueX,
E({
p: e.value.style.chart.axes.x.labels.prefix,
v: s.valueX,
s: e.value.style.chart.axes.x.labels.suffix,
r: e.value.style.chart.axes.x.labels.rounding
})
),
B(
e.value.style.chart.axes.y.labels.formatter,
s.valueY,
E({
p: e.value.style.chart.axes.y.labels.prefix,
v: s.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 Ie(t = null) {
Tt(() => {
const a = [
[e.value.table.columnNames.series],
[e.value.table.columnNames.datapoint],
[e.value.table.columnNames.x],
[e.value.table.columnNames.y]
], l = I.value.flatMap((k) => k.plots.map((q) => [
[q.seriesName],
[q.label],
[q.valueX],
[q.valueY]
])), i = [
[e.value.style.chart.title.text],
[e.value.style.chart.title.subtitle.text],
a
].concat(l), s = Et(i);
t ? t(s) : Ht({
csvContent: s,
title: e.value.style.chart.title.text || "vue-ui-history-plot"
});
});
}
const V = v(!1);
function ne() {
V.value = !V.value;
}
function Pe() {
C.value.showTable = !C.value.showTable;
}
function Fe() {
C.value.showTooltip = !C.value.showTooltip;
}
function mt() {
return I.value;
}
async function gt({ scale: t = 2 } = {}) {
if (!S.value) return;
const { width: a, height: l } = S.value.getBoundingClientRect(), i = a / l, { imageUri: s, base64: k } = await el({ domElement: S.value, base64: !0, img: !0, scale: t });
return {
imageUri: s,
base64: k,
title: e.value.style.chart.title.text,
width: a,
height: l,
aspectRatio: i
};
}
const bt = d(() => x.value.tickX), kt = d(() => ({ start: 0, end: x.value.tickX.length }));
return Jt({
timeLabelsEls: W,
timeLabels: bt,
slicer: kt,
configRef: e,
rotationPath: ["style", "chart", "axes", "x", "labels", "rotation"],
autoRotatePath: ["style", "chart", "axes", "x", "labels", "autoRotate", "enable"],
isAutoSize: !1,
width: st,
height: ot,
targetClass: ".vue-ui-history-plot-x-axis-scale",
rotation: e.value.style.chart.axes.x.labels.autoRotate.angle
}), Ue({
getData: mt,
getImage: gt,
generatePdf: Le,
generateCsv: Ie,
generateImage: $e,
toggleTable: Pe,
toggleTooltip: Fe,
toggleAnnotator: ne,
toggleFullscreen: Oe
}), (t, a) => (o(), r("div", {
id: `history_plot_${$.value}`,
ref_key: "historyPlotChart",
ref: S,
class: P({ "vue-ui-history-plot": !0, "vue-data-ui-wrapper-fullscreen": j.value }),
style: _(`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(ke)(!0)),
onMouseleave: a[3] || (a[3] = () => u(ke)(!1))
}, [
p(t.$slots, "userConfig", {}, void 0, !0),
e.value.userOptions.buttons.annotator ? (o(), N(u(Je), {
key: 0,
svgRef: u(Ae),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: V.value,
onClose: ne
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
lt.value ? (o(), r("div", {
key: 1,
ref_key: "noTitle",
ref: fe,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : h("", !0),
e.value.style.chart.title.text ? (o(), r("div", {
key: 2,
ref_key: "chartTitle",
ref: ue,
class: "vue-ui-xy-title",
style: _(`font-family:${e.value.style.fontFamily}`)
}, [
(o(), N(Qt, {
key: `title_${ce.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),
L("div", {
id: `legend-top-${$.value}`
}, null, 8, al),
e.value.userOptions.show && U.value && (u(we) || u(oe)) ? (o(), N(u(Qe), {
ref: "details",
key: `user_option_${de.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: u(Ce),
isImaging: u(_e),
uid: $.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,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasLabel: !1,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: j.value,
chartElement: S.value,
position: e.value.userOptions.position,
isTooltip: C.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: V.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: Oe,
onGeneratePdf: u(Le),
onGenerateCsv: Ie,
onGenerateImage: u($e),
onToggleTable: Pe,
onToggleTooltip: Fe,
onToggleAnnotator: ne,
style: _({
visibility: u(we) ? u(oe) ? "visible" : "hidden" : "visible"
})
}, Lt({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: m(({ isOpen: l, color: i }) => [
p(t.$slots, "menuIcon", Y(D({ isOpen: l, color: i })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: m(() => [
p(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: m(() => [
p(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: m(() => [
p(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: m(() => [
p(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: m(() => [
p(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: m(({ toggleFullscreen: l, isFullscreen: i }) => [
p(t.$slots, "optionFullscreen", Y(D({ toggleFullscreen: l, isFullscreen: i })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: m(({ toggleAnnotator: l, isAnnotator: i }) => [
p(t.$slots, "optionAnnotator", Y(D({ toggleAnnotator: l, isAnnotator: i })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
(o(), r("svg", {
ref_key: "svgRef",
ref: Ae,
xmlns: u(Pt),
viewBox: `0 0 ${f.value.width < 0 ? 0.1 : f.value.width} ${f.value.height < 0 ? 0.1 : f.value.height}`,
style: _(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
Re(u(Ze)),
t.$slots["chart-background"] ? (o(), 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"
}
}, [
p(t.$slots, "chart-background", {}, void 0, !0)
], 8, ol)) : h("", !0),
e.value.style.chart.plots.gradient.show ? (o(), r("defs", rl, [
(o(!0), r(g, null, b(I.value, (l, i) => (o(), r("radialGradient", {
id: `gradient_${i}_${$.value}`,
fy: "30%"
}, [
L("stop", {
offset: "10%",
"stop-color": u(Ft)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, il),
L("stop", {
offset: "90%",
"stop-color": u(Xt)(l.color, 0.1)
}, null, 8, ul),
L("stop", {
offset: "100%",
"stop-color": l.color
}, null, 8, cl)
], 8, nl))), 256))
])) : h("", !0),
e.value.style.chart.grid.verticalLines.show ? (o(), r("g", vl, [
(o(!0), r(g, null, b(x.value.tickX, (l) => (o(), 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, hl))), 256))
])) : h("", !0),
e.value.style.chart.axes.y.labels.show ? (o(), r("g", yl, [
(o(!0), r(g, null, b(x.value.tickY, (l) => (o(), 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, dl))), 256))
])) : h("", !0),
e.value.style.chart.axes.y.labels.show ? (o(), r("g", {
key: 4,
ref_key: "yAxisScales",
ref: le
}, [
(o(!0), r(g, null, b(x.value.tickY, (l) => (o(), 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"
}, O(u(B)(
e.value.style.chart.axes.y.labels.formatter,
l.value,
u(E)({
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, fl))), 256))
], 512)) : h("", !0),
e.value.style.chart.axes.y.name.text ? (o(), r("text", {
key: 5,
ref_key: "yAxisLabel",
ref: te,
transform: `translate(${n.value.yAxisName}, ${f.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"
}, O(e.value.style.chart.axes.y.name.text), 9, xl)) : h("", !0),
e.value.style.chart.grid.horizontalLines.show ? (o(), r("g", pl, [
(o(!0), r(g, null, b(x.value.tickY, (l) => (o(), 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, ml))), 256))
])) : h("", !0),
e.value.style.chart.axes.x.labels.show ? (o(), r("g", gl, [
(o(!0), r(g, null, b(x.value.tickX, (l) => (o(), 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, bl))), 256))
])) : h("", !0),
e.value.style.chart.axes.x.labels.show ? (o(), r("g", {
key: 8,
ref_key: "xAxisScales",
ref: W
}, [
(o(!0), r(g, null, b(x.value.tickX, (l) => (o(), 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"
}, O(u(B)(
e.value.style.chart.axes.x.labels.formatter,
l.value,
u(E)({
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, kl))), 256))
], 512)) : h("", !0),
e.value.style.chart.axes.x.name.text ? (o(), r("text", {
key: 9,
ref_key: "xAxisLabel",
ref: ee,
x: f.value.width / 2 + e.value.style.chart.axes.x.name.offsetX,
y: f.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"
}, O(e.value.style.chart.axes.x.name.text), 9, wl)) : h("", !0),
e.value.style.chart.grid.xAxis.show ? (o(), 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, Al)) : h("", !0),
e.value.style.chart.grid.yAxis.show ? (o(), 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, Cl)) : h("", !0),
(o(!0), r(g, null, b(I.value, (l, i) => (o(), r("g", null, [
e.value.style.chart.paths.show ? (o(), r("g", {
key: 0,
style: _({
opacity: A.value === null ? 1 : 0.3
})
}, [
L("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: P({ animated: e.value.useCssAnimation && !u(M) })
}, null, 10, _l),
L("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: P({ animated: e.value.useCssAnimation && !u(M) })
}, null, 10, Ll)
], 4)) : h("", !0),
(o(!0), r(g, null, b(l.plots, (s) => (o(), r("circle", {
cx: s.x,
cy: s.y,
fill: e.value.style.chart.backgroundColor,
r: n.value.plots,
stroke: "none"
}, null, 8, $l))), 256)),
(o(!0), r(g, null, b(l.plots, (s) => (o(), r("circle", {
cx: s.x,
cy: s.y,
fill: e.value.style.chart.plots.gradient.show ? `url(#gradient_${i}_${$.value})` : s.color,
r: n.value.plots,
stroke: e.value.style.chart.plots.stroke,
"stroke-width": e.value.style.chart.plots.strokeWidth,
class: P({ animated: e.value.useCssAnimation && !u(M) }),
style: _({
opacity: A.value === null || A.value.id === s.id ? 1 : 0.3,
transition: "opacity 0.2s ease-in-out"
})
}, null, 14, Sl))), 256)),
e.value.style.chart.plots.labels.show ? (o(), r("g", Tl, [
(o(!0), r(g, null, b(l.plots, (s) => (o(), r("g", null, [
String(s.label).includes(`
`) ? (o(), r("text", {
key: 1,
x: s.x + e.value.style.chart.plots.labels.offsetX,
y: s.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: P({ animated: e.value.useCssAnimation && !u(M) }),
style: _({
opacity: A.value === null || A.value.id === s.id ? 1 : 0.3,
transition: "opacity 0.2s ease-in-out"
}),
innerHTML: u(Rt)({
content: String(s.label),
fontSize: n.value.labels,
fill: e.value.style.chart.plots.labels.color,
x: s.x + e.value.style.chart.plots.labels.offsetX,
y: s.y + e.value.style.chart.plots.labels.offsetY + n.value.plots + n.value.labels
})
}, null, 14, zl)) : (o(), r("text", {
key: 0,
x: s.x + e.value.style.chart.plots.labels.offsetX,
y: s.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: P({ animated: e.value.useCssAnimation && !u(M) }),
style: _({
opacity: A.value === null || A.value.id === s.id ? 1 : 0.3,
transition: "opacity 0.2s ease-in-out"
})
}, O(s.label), 15, Ml))
]))), 256))
])) : h("", !0),
e.value.style.chart.plots.indexLabels.show ? (o(), r("g", Nl, [
(o(!0), r(g, null, b(l.plots, (s, k) => (o(), r("text", {
x: s.x + e.value.style.chart.plots.indexLabels.offsetX,
y: s.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(Yt)(l.color) : e.value.style.chart.plots.indexLabels.color,
"text-anchor": "middle",
class: P({ animated: e.value.useCssAnimation && !u(M) }),
style: _({
opacity: A.value === null || A.value.id === s.id ? 1 : 0.3,
transition: "opacity 0.2s ease-in-out"
})
}, O(e.value.style.chart.plots.indexLabels.startAtZero ? k : k + 1), 15, Ol))), 256))
])) : h("", !0)
]))), 256)),
(o(!0), r(g, null, b(I.value, (l) => (o(), r("g", null, [
(o(!0), r(g, null, b(l.plots, (i, s) => (o(), r("circle", {
cx: i.x,
cy: i.y,
fill: "transparent",
r: n.value.plots,
stroke: "none",
onMouseenter: (k) => pt({
datapoint: i,
plotIndex: s,
seriesIndex: l.seriesIndex
}),
onMouseleave: (k) => xt({
datapoint: i,
plotIndex: s,
seriesIndex: l.seriesIndex
}),
onClick: (k) => ft({
datapoint: i,
plotIndex: s,
seriesIndex: l.seriesIndex
})
}, null, 40, Il))), 256))
]))), 256)),
p(t.$slots, "svg", { svg: f.value }, void 0, !0)
], 12, sl)),
t.$slots.watermark ? (o(), r("div", Pl, [
p(t.$slots, "watermark", Y(D({ isPrinting: u(Ce) || u(_e) })), void 0, !0)
])) : h("", !0),
L("div", {
id: `legend-bottom-${$.value}`
}, null, 8, Fl),
pe.value ? (o(), N($t, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${$.value}` : `#legend-bottom-${$.value}`
}, [
L("div", {
ref_key: "chartLegend",
ref: ve
}, [
e.value.style.chart.legend.show && U.value ? (o(), N(Kt, {
key: `legend_${he.value}`,
legendSet: ze.value,
config: dt.value,
onClickMarker: a[0] || (a[0] = ({ legend: l }) => {
Me(l.seriesIndex), Ne(l);
})
}, {
item: m(({ legend: l, index: i }) => [
L("div", {
onClick: (s) => {
l.segregate(), Ne(l);
},
style: _(`opacity:${w.value.includes(l.seriesIndex) ? 0.5 : 1}`)
}, O(l.name), 13, Xl)
]),
_: 1
}, 8, ["legendSet", "config"])) : p(t.$slots, "legend", {
key: 1,
legend: ze.value
}, void 0, !0)
], 512)
], 8, ["to"])) : h("", !0),
t.$slots.source ? (o(), r("div", {
key: 6,
ref_key: "source",
ref: xe,
dir: "auto"
}, [
p(t.$slots, "source", {}, void 0, !0)
], 512)) : h("", !0),
Re(u(Ke), {
show: C.value.showTooltip && K.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: S.value,
content: Q.value,
isCustom: H.value,
isFullscreen: j.value,
smooth: e.value.style.chart.tooltip.smooth,
backdropFilter: e.value.style.chart.tooltip.backdropFilter
}, {
"tooltip-before": m(() => [
p(t.$slots, "tooltip-before", Y(D({ ...re.value })), void 0, !0)
]),
"tooltip-after": m(() => [
p(t.$slots, "tooltip-after", Y(D({ ...re.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter"]),
U.value ? (o(), N(u(Ve), {
key: 7,
hideDetails: "",
config: {
open: C.value.showTable,
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
}
}
}, {
content: m(() => [
(o(), N(u(qe), {
key: `table_${ye.value}`,
colNames: G.value.colNames,
head: G.value.head,
body: G.value.body,
config: G.value.config,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
onClose: a[1] || (a[1] = (l) => C.value.showTable = !1)
}, {
th: m(({ th: l }) => [
L("div", {
innerHTML: l,
style: { display: "flex", "align-items": "center" }
}, null, 8, Rl)
]),
td: m(({ td: l }) => [
St(O(l.name || l), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : h("", !0),
u(M) ? (o(), N(Gt, { key: 8 })) : h("", !0)
], 46, ll));
}
}, Ql = /* @__PURE__ */ tl(Yl, [["__scopeId", "data-v-88bdea2f"]]);
export {
Ql as default
};