vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,158 lines (1,157 loc) • 47.4 kB
JavaScript
import { defineAsyncComponent as N, computed as d, ref as u, shallowRef as Je, toRefs as jt, onBeforeUnmount as Qe, watch as Z, nextTick as ke, watchEffect as qt, createElementBlock as n, openBlock as r, unref as i, normalizeStyle as w, normalizeClass as ee, createBlock as _, createCommentVNode as v, renderSlot as m, createElementVNode as y, createSlots as Ze, withCtx as p, normalizeProps as te, guardReactiveProps as ae, createVNode as et, Fragment as g, renderList as k, mergeProps as tt, toDisplayString as B, createTextVNode as at } from "vue";
import { u as Kt, c as Ae, t as Jt, d as Qt, e as Zt, p as le, ao as lt, ah as ea, U as st, V as ta, W as aa, X as la, F as sa, I as oa, k as se, i as oe, a as ra, b as na, f as Ce, g as ot, o as ia, v as ua, w as ca, K as va } from "./index-q-LPw2IT.js";
import { t as rt, u as ha } from "./useResponsive-DfdjqQps.js";
import { u as da, B as ya } from "./useLoading-D7YHNtLX.js";
import { u as fa } from "./usePrinter-DX7efa1s.js";
import { u as nt } from "./useNestedProp-04aFeUYu.js";
import { u as ga } from "./useTimeLabels-DkzmKfZn.js";
import { u as ma } from "./useUserOptionState-BIvW1Kz7.js";
import { u as pa } from "./useChartAccessibility-9icAAmYg.js";
import { u as ba } from "./useTimeLabelCollider-CIsgDrl9.js";
import xa from "./Legend-DcDSkq99.js";
import ka from "./Title-B55R8CAZ.js";
import { _ as Aa } from "./Shape-DHIaJs9G.js";
import Ca from "./img-Ctts6JQb.js";
import { _ as wa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const $a = ["id"], _a = ["xmlns", "viewBox"], Ta = ["id"], Pa = ["stop-color"], Sa = ["stop-color"], Ma = ["stop-color"], La = ["stop-color"], Oa = ["id"], za = ["stop-color"], Ia = ["stop-color"], Na = ["stop-color"], Fa = ["stop-color"], Da = { key: 0 }, Ra = ["fill", "d"], Ea = ["stroke", "stroke-width", "d"], Ha = ["fill", "d"], Xa = ["stroke", "stroke-dasharray", "stroke-width", "d"], Ba = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], Va = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Ua = ["x", "y", "font-size", "font-weight", "fill", "text-decoration", "onMouseenter", "onClick"], Ga = { key: 0 }, Wa = ["font-size", "fill", "font-weight", "transform", "text-anchor"], Ya = ["font-size", "fill", "font-weight", "transform", "text-anchor", "innerHTML"], ja = ["x", "y", "width", "height", "onMouseenter", "onMouseleave", "onClick"], qa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Ka = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Ja = ["x", "y", "text-anchor", "font-size", "fill"], Qa = {
key: 4,
class: "vue-data-ui-watermark"
}, Za = ["onClick"], el = ["innerHTML"], tl = {
__name: "vue-ui-ridgeline",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend", "selectDatapoint", "selectX"],
setup(it, { expose: ut, emit: ct }) {
const vt = N(() => import("./vue-ui-accordion-D46i_gkB.js")), ht = N(() => import("./BaseDraggableDialog-DdXLTRiK.js")), dt = N(() => import("./DataTable-rj9-mAwF.js")), yt = N(() => import("./PackageVersion-5ZjKSIei.js")), ft = N(() => import("./PenAndPaper-BJ0hcgsa.js")), gt = N(() => import("./UserOptions-DVzyjG-W.js")), mt = N(() => import("./vue-ui-xy-Bsh6AmS0.js")), { vue_ui_ridgeline: pt } = Kt(), F = it, V = d({
get() {
return Array.isArray(O.value) && O.value.length > 0;
},
set(a) {
return a;
}
}), re = ct, T = u(null), we = u(null), $e = u(null), P = Je(null), L = Je(null), _e = u(null), Te = u(null), ne = u(0), bt = u(0), ie = u(0), A = u(Ae()), Pe = u(0), xt = u(0), Se = u(512), h = u(null), D = u(null), ue = u(null), Me = u(0), ce = u(null);
function ve() {
const a = nt({
userConfig: F.config,
defaultConfig: pt
});
return a.theme ? {
...nt({
userConfig: na.vue_ui_ridgeline[a.theme] || F.config,
defaultConfig: a
}),
customPalette: ra[a.theme] || le
} : a;
}
const e = u(ve()), { loading: U, FINAL_DATASET: O, manualLoading: he } = da({
...jt(F),
FINAL_CONFIG: e,
prepareConfig: ve,
skeletonDataset: [
{
name: "_",
datapoints: [
{
name: "__",
color: "#999999",
values: [28.639, 32.04, 41.134, 44.525, 21.151, 2.436, 0.218, 0.024, 2e-3, 0, 0, 0]
},
{
name: "_",
color: "#CACACA",
values: [13.253, 15.621, 23.36, 33.698, 29.935, 10.874, 2.364, 0.561, 0.107, 0.02, 6e-3, 4e-3]
}
]
},
{
name: "_",
datapoints: [
{
name: "_",
color: "#999999",
values: [10.851, 13.195, 21.617, 36.556, 42.292, 21.006, 3.398, 0.223, 0.013, 1e-3, 0, 0]
},
{
name: "_",
color: "#CACACA",
values: [3.171, 4.115, 8.108, 18.248, 31.641, 29.063, 12.031, 2.742, 0.504, 0.102, 0.032, 0.021]
}
]
},
{
name: "_",
datapoints: [
{
name: "_",
color: "#999999",
values: [1.731, 2.334, 5.125, 13.626, 29.911, 38.524, 24.168, 7.646, 1.575, 0.317, 0.097, 0.063]
},
{
name: "_",
color: "#CACACA",
values: [0.25, 0.367, 1.026, 3.944, 13.635, 28.891, 30.149, 15.419, 4.714, 1.246, 0.442, 0.299]
}
]
},
{
name: "_",
datapoints: [
{
name: "_",
color: "#999999",
values: [0.034, 0.054, 0.194, 1.065, 5.747, 20.735, 38.306, 32.899, 15.318, 5.566, 2.422, 1.76]
},
{
name: "_",
color: "#CACACA",
values: [1e-3, 2e-3, 9e-3, 0.095, 1.124, 8.342, 27.115, 35.08, 21.449, 9.093, 4.243, 3.143]
}
]
},
{
name: "_",
datapoints: [
{
name: "_",
color: "#999999",
values: [0, 1e-3, 4e-3, 0.051, 0.567, 3.322, 14.215, 44.783, 40.351, 20.377, 9.866, 7.378]
},
{
name: "_",
color: "#CACACA",
values: [0, 0, 0, 0, 1e-3, 0.11, 4.136, 27.498, 43.24, 29.807, 17.345, 13.678]
}
]
},
{
name: "_",
datapoints: [
{
name: "_",
color: "#999999",
values: [0, 0, 0, 0, 0.025, 0.598, 3.886, 10.645, 54.479, 45.953, 30.814, 24.55]
},
{
name: "_",
color: "#CACACA",
values: [0, 0, 0, 0, 0, 0, 7e-3, 1.655, 26.63, 52.017, 45.192, 39.651]
}
]
}
],
skeletonConfig: Jt({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
areas: {
maxPoint: {
show: !1
},
opacity: 0.9,
stroke: {
useSerieColor: !0
}
},
legend: {
backgroundColor: "transparent"
},
padding: {
right: -24,
left: 0
},
xAxis: {
labels: {
values: []
}
},
yAxis: {
labels: {
fontSize: 0
}
},
zeroLine: { show: !1 }
}
}
}
})
}), C = u(Math.min(
e.value.style.chart.areas.height,
e.value.style.chart.areas.rowHeight
)), {
userOptionsVisible: K,
setUserOptionsVisibility: Le,
keepUserOptionState: Oe
} = ma({ config: e.value }), { svgRef: de } = pa({ config: e.value.style.chart.title }), ye = d(() => !!e.value.debug);
function ze() {
const a = O.value || [];
if (!Array.isArray(a) || a.length === 0) {
Ce({ componentName: "VueUiRidgeline", type: "dataset", debug: ye.value }), he.value = !0;
return;
}
if (a.forEach((s, t) => {
ot({
datasetObject: s,
requiredAttributes: ["name", "datapoints"]
}).forEach((o) => {
V.value = !1, Ce({
componentName: "VueUiRidgeline",
type: "datasetSerieAttribute",
property: o,
index: t,
debug: ye.value
});
}), Array.isArray(s.datapoints) && s.datapoints.length && s.datapoints.forEach((o, l) => {
ot({
datasetObject: o,
requiredAttributes: ["name", "values"]
}).forEach((c) => {
V.value = !1, Ce({
componentName: "VueUiRidgeline",
type: "datasetSerieAttribute",
property: `datapoint.${c}`,
index: `${t}-${l}`,
debug: ye.value
});
});
});
}), xt.value = a.length, C.value = Math.min(
e.value.style.chart.areas.height,
e.value.style.chart.areas.rowHeight
), ia(F.dataset) || (he.value = e.value.loading), e.value.responsive) {
const s = rt(() => {
const { width: t, height: o } = ha({
chart: T.value,
title: e.value.style.chart.title.text ? we.value : null,
legend: e.value.style.chart.legend.show ? $e.value : null,
source: _e.value,
noTitle: Te.value,
padding: e.value.style.chart.padding
});
requestAnimationFrame(() => {
Se.value = t, C.value = a.length ? o / a.length : 0, Me.value = o - 12;
});
});
P.value && (L.value && P.value.unobserve(L.value), P.value.disconnect()), P.value = new ResizeObserver(s), L.value = T.value?.parentNode || null, L.value && P.value.observe(L.value);
}
}
Qe(() => {
P.value && (L.value && P.value.unobserve(L.value), P.value.disconnect());
});
const { isPrinting: Ie, isImaging: Ne, generatePdf: Fe, generateImage: De } = fa({
elementId: `vue-ui-ridgeline_${A.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-ridgeline",
options: e.value.userOptions.print
}), kt = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), At = d(() => Qt(e.value.customPalette)), R = u({
showTable: e.value.table.show
});
Z(
() => O.value,
async (a) => {
Array.isArray(a) && a.length && (K.value = !e.value.userOptions.showOnChartHover, await ke(), ze(), ne.value += 1, ie.value += 1, R.value.showTable = e.value.table.show);
},
{ deep: !0, immediate: !0 }
), Z(() => F.dataset, (a) => {
Array.isArray(a) && a.length > 0 && (he.value = !1);
}, { deep: !0 }), Z(
() => U.value,
async (a) => {
a || (await ke(), ze());
},
{ immediate: !0 }
), Z(
() => F.config,
() => {
e.value = ve(O.value || null), K.value = !e.value.userOptions.showOnChartHover, C.value = Math.min(e.value.style.chart.areas.height, e.value.style.chart.areas.rowHeight), R.value.showTable = e.value.table.show, ne.value += 1, ie.value += 1;
},
{ deep: !0 }
);
const fe = d(() => e.value.style.chart.areas.height / e.value.style.chart.areas.rowHeight);
function Re(a) {
M.value.includes(a) ? M.value = M.value.filter((s) => s !== a) : M.value.push(a), re("selectLegend", H.value);
}
const S = d(() => V.value ? (O.value || []).map((a) => ({
...a,
labelLen: Mt(a.name, e.value.style.chart.yAxis.labels.fontSize),
uid: Ae(),
datapoints: a.datapoints.map((s, t) => {
const o = s.color ? Zt(s.color) : At.value[t] || le[t] || le[t % le.length], l = lt(s.name);
return { ...s, color: o, id: l };
})
})) : []), Ee = d(() => e.value.style.chart.padding.top + C.value * (O.value || []).length + C.value * fe.value + e.value.style.chart.padding.bottom), f = d(() => {
const a = e.value.style.chart.padding;
return {
width: Se.value,
height: Ee.value,
padding: a
};
}), Ct = d(() => f.value.width), wt = d(() => f.value.height), ge = u(0), $t = rt((a) => {
ge.value = a;
}, 100);
qt((a) => {
const s = ce.value;
if (!s) return;
const t = new ResizeObserver((o) => {
$t(o[0].contentRect.height);
});
t.observe(s), a(() => t.disconnect());
}), Qe(() => {
ge.value = 0;
});
const b = d(() => ({
fullHeight: f.value.height + ge.value,
top: f.value.padding.top,
left: f.value.padding.left,
right: f.value.width - f.value.padding.right,
bottom: f.value.height - e.value.style.chart.padding.bottom,
width: f.value.width - (f.value.padding.left + f.value.padding.right)
})), G = d(() => Math.max(...S.value.flatMap((a) => a.datapoints.map((s) => s.values.length)))), W = d(() => ga({
values: e.value.style.chart.xAxis.labels.values,
maxDatapoints: G.value,
formatter: e.value.style.chart.xAxis.labels.datetimeFormatter,
start: 0,
end: e.value.style.chart.xAxis.labels.values.length
})), E = d(() => {
const a = Math.max(...S.value.map((l) => l.labelLen)), s = f.value.padding.left + a + 16 + e.value.style.chart.yAxis.labels.offsetX, t = (b.value.width - s) / G.value, o = [];
for (let l = 0; l < G.value; l += 1)
o.push({
selectorX: s + t * l,
x: s + t * l - t / 2,
y: b.value.top,
label: e.value.style.chart.xAxis.labels.values[l] ? W.value[l].text : "",
index: l,
width: t,
height: Ee.value
});
return o;
});
function me(a) {
return S.value.map((s) => s.datapoints.map((t) => ({
dp: t,
selected: t.values[a.index]
})));
}
function _t(a) {
h.value = a;
const s = me(a);
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: s, seriesIndex: a.index });
}
function Tt(a) {
h.value = null;
const s = me(a);
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: s, seriesIndex: a.index });
}
function Pt(a) {
const s = me(a);
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: s, seriesIndex: a.index }), re("selectX", s);
}
function St(a, s) {
return a.length * s / 2 + s;
}
function He(a, s, t) {
const o = St(s, t);
return a + o > b.value.right;
}
function Mt(a, s, t = "sans-serif") {
const l = document.createElement("canvas").getContext("2d"), c = typeof s == "number" ? `${s}px` : s;
return l.font = `${c} ${t}`, l.measureText(a).width;
}
const H = d(() => {
C.value;
const a = Math.max(...S.value.map((x) => x.labelLen)), s = Math.max(...S.value.flatMap((x) => x.datapoints.flatMap((Y) => Y.values))), t = Math.min(...S.value.flatMap((x) => x.datapoints.flatMap((Y) => Y.values))), o = f.value.padding.left + a + 16 + e.value.style.chart.yAxis.labels.offsetX, l = (b.value.width - o) / G.value, c = Math.abs(Math.min(t, 0)), $ = s + c;
function Ye(x) {
return isNaN(x / $) ? 0 : x / $;
}
return S.value.map((x, Y) => {
const je = b.value.top + C.value * Y, z = b.value.top + je + C.value * fe.value * (1 - Ye(c));
return {
...x,
label: {
x: o - e.value.style.chart.yAxis.labels.fontSize,
y: z
},
datapoints: x.datapoints.map((j) => {
const I = j.values.map((q, Vt) => {
const Ut = isNaN(q) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(q) ? 0 : q || 0, Gt = o + l * Vt, Wt = b.value.top + je + C.value * fe.value * (1 - Ye(Ut + c)), Yt = q === Math.max(...j.values);
return {
x: Gt,
y: Wt,
value: q,
isMaxPoint: Yt,
zero: z
};
}), Et = `${ea(I, z, !1, !1)}`, Ht = `M ${o},${z} ${st(I)} ${I.at(-1).x},${z}`, Xt = `M ${o},${z} ${I.at(-1).x},${z}`, qe = `M ${ta(I)}`, Ke = `M ${st(I)}`, Bt = aa(
e.value.style.chart.areas.smooth ? qe : Ke
);
return {
...j,
uid: Ae(),
plots: I,
smoothPath: Et,
straightPath: Ht,
zeroPath: Xt,
pathLength: Bt,
smoothPathRidge: qe,
straightPathRidge: Ke
};
}).filter((j) => !M.value.includes(j.id))
};
});
}), M = u([]);
function Lt(a) {
const s = /* @__PURE__ */ new Map();
return a.forEach((t) => {
t.datapoints.forEach((o, l) => {
const c = lt(o.name);
s.has(c) || s.set(c, {
id: c,
name: o.name,
color: o.color,
shape: "circle",
segregate: () => Re(c),
isSegregated: M.value.includes(c),
opacity: M.value.includes(c) ? 0.5 : 1
});
});
}), Array.from(s.values());
}
const pe = d(() => Lt(S.value)), Ot = d(() => ({
cy: "donut-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" : ""
})), X = u(!1);
function Xe(a) {
X.value = a, Pe.value += 1;
}
const Be = u({}), Ve = u([]);
function zt(a) {
re("selectDatapoint", a), e.value.style.chart.dialog.show && (Ve.value = a.datapoints.map((s) => ({
name: s.name,
color: s.color,
type: "line",
useArea: !0,
smooth: e.value.style.chart.areas.smooth,
series: s.values
})), D.value = a, Be.value = va({
...e.value.style.chart.dialog.xyChart,
responsive: !0,
// Overriding
chart: {
...e.value.style.chart.dialog.xyChart.chart,
grid: {
...e.value.style.chart.dialog.xyChart.chart.grid,
labels: {
...e.value.style.chart.dialog.xyChart.chart.grid.labels,
xAxisLabels: {
...e.value.style.chart.dialog.xyChart.chart.grid.labels.xAxisLabels,
values: e.value.style.chart.xAxis.labels.values,
// Overriding
autoRotate: {
enable: !0,
angle: e.value.style.chart.dialog.xyChart.chart.grid.labels.xAxisLabels.autoRotate.angle
},
// overriding
datetimeFormatter: e.value.style.chart.xAxis.labels.datetimeFormatter
// Overriding
}
}
},
tooltip: {
...e.value.style.chart.dialog.xyChart.chart.tooltip,
showTimeLabel: e.value.style.chart.xAxis.labels.values.length > 0
// Overriding
}
}
}), ue.value && ue.value.open());
}
const be = u(null);
function It(a) {
be.value = a;
}
function Nt() {
be.value = null;
}
const J = u(!1);
function xe() {
J.value = !J.value;
}
function Ue() {
R.value.showTable = !R.value.showTable;
}
const Ge = d(() => ({ body: H.value.flatMap((t) => t.datapoints.flatMap((o) => ({
...o,
rowName: `${t.name}: ${o.name}`
}))).map((t) => [
{
name: t.rowName,
color: t.color
},
...t.values
]) })), Q = d(() => {
const a = [
e.value.table.columnNames.series,
...W.value.map((o) => o.text)
], s = {
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 {
colNames: [
e.value.table.columnNames.series,
...W.value.map((o) => o.text)
],
head: a,
body: Ge.value.body,
config: s
};
});
function We(a = null) {
ke(() => {
const s = [
[e.value.table.columnNames.series, ...W.map((l) => [l.text])],
...Ge.value.body.map((l, c) => [l[0].name, ...l.slice(1)])
], t = [
[e.value.style.chart.title.text],
[e.value.style.chart.title.subtitle.text]
].concat(s), o = ua(t);
a ? a(o) : ca({
csvContent: o,
title: e.value.style.chart.title.text || "vue-ui-ridgeline"
});
});
}
function Ft() {
return H.value;
}
async function Dt({ scale: a = 2 } = {}) {
if (!T.value) return;
const { width: s, height: t } = T.value.getBoundingClientRect(), o = s / t, { imageUri: l, base64: c } = await Ca({ domElement: T.value, base64: !0, img: !0, scale: a });
return {
imageUri: l,
base64: c,
title: e.value.style.chart.title.text,
width: s,
height: t,
aspectRatio: o
};
}
const Rt = d(() => ({ min: 0, max: G.value }));
return ba({
timeLabelsEls: ce,
timeLabels: W,
slicer: Rt,
configRef: e,
rotationPath: ["style", "chart", "xAxis", "labels", "rotation"],
autoRotatePath: ["style", "chart", "xAxis", "labels", "autoRotate", "enable"],
isAutoSize: !1,
width: Ct,
height: wt,
targetClass: ".vue-ui-ridgeline-x-axis-label",
angle: e.value.style.chart.xAxis.labels.autoRotate.angle
}), ut({
getData: Ft,
getImage: Dt,
generateImage: De,
generatePdf: Fe,
generateCsv: We,
toggleAnnotator: xe,
toggleTable: Ue,
toggleFullscreen: Xe
}), (a, s) => (r(), n("div", {
ref_key: "ridgelineChart",
ref: T,
class: ee(`vue-ui-ridgeline ${X.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
id: `vue-ui-ridgeline_${A.value}`,
style: w({
fontFamily: e.value.style.fontFamily,
width: "100%",
textAlign: "center",
background: e.value.style.chart.backgroundColor,
height: e.value.responsive ? "100%" : void 0
}),
onMouseenter: s[3] || (s[3] = () => i(Le)(!0)),
onMouseleave: s[4] || (s[4] = () => i(Le)(!1))
}, [
e.value.userOptions.buttons.annotator && i(de) ? (r(), _(i(ft), {
key: 0,
color: e.value.style.chart.color,
backgroundColor: e.value.style.chart.backgroundColor,
active: J.value,
svgRef: i(de),
onClose: xe
}, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : v("", !0),
m(a.$slots, "userConfig", {}, void 0, !0),
kt.value ? (r(), n("div", {
key: 1,
ref_key: "noTitle",
ref: Te,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : v("", !0),
e.value.style.chart.title.text ? (r(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: we,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(r(), _(ka, {
key: `title_${ne.value}`,
config: {
title: {
cy: "ridgeline-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "ridgeline-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : v("", !0),
e.value.userOptions.show && V.value && (i(Oe) || i(K)) ? (r(), _(i(gt), {
ref: "details",
key: `user_option_${Pe.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: i(Ie),
isImaging: i(Ne),
uid: A.value,
hasTooltip: !1,
callbacks: e.value.userOptions.callbacks,
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: X.value,
printScale: e.value.userOptions.print.scale,
chartElement: T.value,
position: e.value.userOptions.position,
isTooltip: !1,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: J.value,
style: w({
visibility: i(Oe) ? i(K) ? "visible" : "hidden" : "visible"
}),
onToggleFullscreen: Xe,
onGeneratePdf: i(Fe),
onGenerateCsv: We,
onGenerateImage: i(De),
onToggleTable: Ue,
onToggleAnnotator: xe
}, Ze({ _: 2 }, [
a.$slots.menuIcon ? {
name: "menuIcon",
fn: p(({ isOpen: t, color: o }) => [
m(a.$slots, "menuIcon", te(ae({ isOpen: t, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
a.$slots.optionTooltip ? {
name: "optionTooltip",
fn: p(() => [
m(a.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
a.$slots.optionPdf ? {
name: "optionPdf",
fn: p(() => [
m(a.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
a.$slots.optionCsv ? {
name: "optionCsv",
fn: p(() => [
m(a.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
a.$slots.optionImg ? {
name: "optionImg",
fn: p(() => [
m(a.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
a.$slots.optionTable ? {
name: "optionTable",
fn: p(() => [
m(a.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
a.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: p(({ toggleFullscreen: t, isFullscreen: o }) => [
m(a.$slots, "optionFullscreen", te(ae({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
]),
key: "6"
} : void 0,
a.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: p(({ toggleAnnotator: t, isAnnotator: o }) => [
m(a.$slots, "optionAnnotator", te(ae({ toggleAnnotator: t, isAnnotator: o })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "callbacks", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "printScale", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "style", "onGeneratePdf", "onGenerateImage"])) : v("", !0),
(r(), n("svg", {
ref_key: "svgRef",
ref: de,
xmlns: i(la),
class: ee({ "vue-data-ui-fullscreen--on": X.value, "vue-data-ui-fulscreen--off": !X.value }),
viewBox: `0 0 ${f.value.width <= 0 ? 10 : f.value.width} ${b.value.fullHeight <= 0 ? 10 : b.value.fullHeight}`,
style: w(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color};${e.value.responsive ? `height: ${Me.value}px; width: 100%;` : ""}`)
}, [
et(i(yt)),
y("defs", null, [
(r(!0), n(g, null, k(pe.value, (t, o) => (r(), n("linearGradient", {
id: `gradient-${t.id}-${A.value}`,
x1: "50%",
y1: "0%",
x2: "50%",
y2: "100%"
}, [
y("stop", {
offset: "0%",
"stop-color": t.color,
"stop-opacity": "1"
}, null, 8, Pa),
y("stop", {
offset: "30%",
"stop-color": t.color,
"stop-opacity": "0.7"
}, null, 8, Sa),
y("stop", {
offset: "70%",
"stop-color": t.color,
"stop-opacity": "0.3"
}, null, 8, Ma),
y("stop", {
offset: "100%",
"stop-color": t.color,
"stop-opacity": "0.1"
}, null, 8, La)
], 8, Ta))), 256)),
(r(!0), n(g, null, k(H.value, (t, o) => (r(), n(g, null, [
(r(!0), n(g, null, k(t.datapoints, (l, c) => (r(), n("linearGradient", {
key: `grad${l.id}`,
id: `gradient-single-${A.value}-${l.uid}`,
x1: "50%",
y1: "0%",
x2: "50%",
y2: "100%"
}, [
y("stop", {
offset: "0%",
"stop-color": l.color,
"stop-opacity": "1"
}, null, 8, za),
y("stop", {
offset: "30%",
"stop-color": l.color,
"stop-opacity": "0.7"
}, null, 8, Ia),
y("stop", {
offset: "70%",
"stop-color": l.color,
"stop-opacity": "0.3"
}, null, 8, Na),
y("stop", {
offset: "100%",
"stop-color": l.color,
"stop-opacity": "0.1"
}, null, 8, Fa)
], 8, Oa))), 128))
], 64))), 256))
]),
(r(!0), n(g, null, k(H.value, (t, o) => (r(), n("g", {
key: `ds-${o}`
}, [
(r(!0), n(g, null, k(t.datapoints, (l, c) => (r(), n("g", {
key: l.id
}, [
a.$slots.pattern ? (r(), n("g", Da, [
y("defs", null, [
m(a.$slots, "pattern", tt({ ref_for: !0 }, { datapointIndex: o, seriesIndex: c, patternId: `pattern_${A.value}_${l.uid}` }), void 0, !0)
])
])) : v("", !0),
y("path", {
fill: a.$slots.pattern ? `url(#pattern_${A.value}_${l.uid})` : e.value.style.chart.backgroundColor,
stroke: "none",
"stroke-linecap": "round",
d: e.value.style.chart.areas.smooth ? l.smoothPath : l.straightPath,
style: w({
opacity: e.value.style.chart.areas.opacity
})
}, null, 12, Ra),
y("path", {
fill: "none",
stroke: e.value.style.chart.areas.stroke.useSerieColor ? l.color : e.value.style.chart.areas.stroke.color,
"stroke-width": e.value.style.chart.areas.strokeWidth,
d: e.value.style.chart.areas.smooth ? l.smoothPathRidge : l.straightPathRidge,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: ee({ "vue-ui-ridgeline-animate": e.value.useCssAnimation && !i(U) }),
style: w({
strokeDasharray: l.pathLength,
strokeDashoffset: e.value.useCssAnimation ? l.pathLength : 0
})
}, null, 14, Ea),
y("path", {
fill: e.value.style.chart.areas.useGradient ? e.value.style.chart.areas.useCommonColor ? `url(#gradient-${l.id}-${A.value})` : `url(#gradient-single-${A.value}-${l.uid})` : l.color,
stroke: "none",
d: e.value.style.chart.areas.smooth ? l.smoothPath : l.straightPath,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: ee({ "vue-ui-ridgeline-animate": e.value.useCssAnimation && !i(U) }),
style: w({
strokeDasharray: l.pathLength,
strokeDashoffset: e.value.useCssAnimation ? l.pathLength : 0
})
}, null, 14, Ha),
e.value.style.chart.zeroLine.show ? (r(), n("path", {
key: 1,
stroke: e.value.style.chart.zeroLine.useSerieColor ? l.color : e.value.style.chart.zeroLine.stroke,
"stroke-dasharray": e.value.style.chart.zeroLine.strokeDasharray,
"stroke-width": e.value.style.chart.zeroLine.strokeWidth,
d: l.zeroPath,
"stroke-linecap": "round"
}, null, 8, Xa)) : v("", !0),
e.value.style.chart.areas.maxPoint.show && l.plots.length > 1 ? (r(!0), n(g, { key: 2 }, k(l.plots, ($) => (r(), n(g, null, [
$.isMaxPoint ? (r(), n("line", {
key: 0,
x1: $.x,
y1: $.y,
x2: $.x,
y2: $.zero,
stroke: e.value.style.chart.areas.maxPoint.adaptStrokeToBackground ? i(sa)(l.color) : e.value.style.chart.areas.maxPoint.stroke,
"stroke-width": e.value.style.chart.areas.maxPoint.strokeWidth,
"stroke-linecap": "round",
"stroke-dasharray": e.value.style.chart.areas.maxPoint.strokeDasharray
}, null, 8, Ba)) : v("", !0)
], 64))), 256)) : v("", !0),
l.plots.length === 1 ? (r(), n("circle", {
key: 3,
cx: l.plots[0].x,
cy: l.plots[0].y,
stroke: e.value.style.chart.selector.dot.stroke,
"stroke-width": e.value.style.chart.selector.dot.strokeWidth,
r: e.value.style.chart.selector.dot.radius,
fill: e.value.style.chart.selector.dot.useDatapointColor ? l.color : e.value.style.chart.selector.dot.fill,
style: {
pointerEvents: "none"
}
}, null, 8, Va)) : v("", !0)
]))), 128)),
y("text", {
x: t.label.x,
y: t.label.y,
"text-anchor": "end",
"font-size": e.value.style.chart.yAxis.labels.fontSize,
"font-weight": e.value.style.chart.yAxis.labels.bold ? "bold" : "normal",
fill: e.value.style.chart.yAxis.labels.color,
style: w({
cursor: e.value.style.chart.dialog.show ? "pointer" : "default"
}),
"text-decoration": e.value.style.chart.dialog.show && (be.value === o || D.value && t.uid === D.value.uid) ? "underline" : "",
onMouseenter: (l) => It(o),
onMouseleave: Nt,
onClick: (l) => zt(t)
}, B(t.name), 45, Ua)
]))), 128)),
e.value.style.chart.xAxis.labels.values.length ? (r(), n("g", {
key: 0,
ref_key: "timeLabelsEls",
ref: ce
}, [
(r(!0), n(g, null, k(E.value, (t, o) => m(a.$slots, "time-label", tt({ ref_for: !0 }, {
show: t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && !e.value.style.chart.xAxis.labels.showOnlyAtModulo || t && e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && (o === 0 || o === E.value.length - 1) || t && h.value && h.value.index === o || t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && e.value.style.chart.xAxis.labels.showOnlyAtModulo && o % Math.floor(E.value.length / e.value.style.chart.xAxis.labels.modulo) === 0,
fontSize: e.value.style.chart.xAxis.labels.fontSize,
content: t.label,
textAnchor: e.value.style.chart.xAxis.labels.rotation > 0 ? "start" : e.value.style.chart.xAxis.labels.rotation < 0 ? "end" : "middle",
fill: e.value.style.chart.xAxis.labels.color,
transform: `translate(${t.selectorX}, ${b.value.top + t.height + e.value.style.chart.xAxis.labels.offsetY}), rotate(${e.value.style.chart.xAxis.labels.rotation})`,
x: t.selectorX,
y: b.value.bottom + e.value.style.chart.xAxis.labels.offsetY
}), () => [
t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && !e.value.style.chart.xAxis.labels.showOnlyAtModulo || t && e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && (o === 0 || o === E.value.length - 1) || t && h.value && h.value.index === o || t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && e.value.style.chart.xAxis.labels.showOnlyAtModulo && o % Math.floor(E.value.length / e.value.style.chart.xAxis.labels.modulo) === 0 ? (r(), n("g", Ga, [
String(t.label).includes(`
`) ? (r(), n("text", {
key: 1,
class: "vue-ui-ridgeline-x-axis-label",
"font-size": e.value.style.chart.xAxis.labels.fontSize,
fill: e.value.style.chart.xAxis.labels.color,
"font-weight": e.value.style.chart.xAxis.labels.bold ? "bold" : "normal",
transform: `translate(${t.selectorX}, ${b.value.bottom + e.value.style.chart.xAxis.labels.offsetY}), rotate(${e.value.style.chart.xAxis.labels.rotation})`,
"text-anchor": e.value.style.chart.xAxis.labels.rotation > 0 ? "start" : e.value.style.chart.xAxis.labels.rotation < 0 ? "end" : "middle",
style: w({
opacity: h.value ? h.value.index === o ? 1 : 0.2 : 1
}),
innerHTML: i(oa)({
content: String(t.label),
fontSize: e.value.style.chart.xAxis.labels.fontSize,
fill: e.value.style.chart.xAxis.labels.color,
x: 0,
y: 0
})
}, null, 12, Ya)) : (r(), n("text", {
key: 0,
class: "vue-ui-ridgeline-x-axis-label",
"font-size": e.value.style.chart.xAxis.labels.fontSize,
fill: e.value.style.chart.xAxis.labels.color,
"font-weight": e.value.style.chart.xAxis.labels.bold ? "bold" : "normal",
transform: `translate(${t.selectorX}, ${b.value.bottom + e.value.style.chart.xAxis.labels.offsetY}), rotate(${e.value.style.chart.xAxis.labels.rotation})`,
"text-anchor": e.value.style.chart.xAxis.labels.rotation > 0 ? "start" : e.value.style.chart.xAxis.labels.rotation < 0 ? "end" : "middle",
style: w({
opacity: h.value ? h.value.index === o ? 1 : 0.2 : 1
})
}, B(t.label), 13, Wa))
])) : v("", !0)
], !0)), 256))
], 512)) : v("", !0),
y("g", null, [
(r(!0), n(g, null, k(E.value, (t, o) => (r(), n("rect", {
x: t.x,
y: t.y,
width: t.width < 0 ? 0.1 : t.width,
height: t.height < 0 ? 0.1 : t.height,
fill: "transparent",
onMouseenter: (l) => _t(t),
onMouseleave: (l) => Tt(t),
onClick: () => Pt(t)
}, null, 40, ja))), 256)),
e.value.style.chart.selector.show && h.value ? (r(), n("line", {
key: 0,
x1: h.value.selectorX,
x2: h.value.selectorX,
y1: h.value.y,
y2: h.value.y + h.value.height - C.value / 2,
stroke: e.value.style.chart.selector.stroke,
"stroke-width": e.value.style.chart.selector.strokeWidth,
"stroke-dasharray": e.value.style.chart.selector.strokeDasharray,
"stroke-linecap": "round",
style: { pointerEvents: "none" }
}, null, 8, qa)) : v("", !0),
h.value ? (r(!0), n(g, { key: 1 }, k(H.value, (t) => (r(), n(g, null, [
(r(!0), n(g, null, k(t.datapoints, (o) => (r(), n(g, null, [
(r(!0), n(g, null, k(o.plots, (l, c) => (r(), n(g, null, [
h.value && h.value.index === c ? (r(), n("circle", {
key: 0,
cx: l.x,
cy: l.y,
stroke: e.value.style.chart.selector.dot.stroke,
"stroke-width": e.value.style.chart.selector.dot.strokeWidth,
r: e.value.style.chart.selector.dot.radius,
fill: e.value.style.chart.selector.dot.useDatapointColor ? o.color : e.value.style.chart.selector.dot.fill,
style: {
pointerEvents: "none"
}
}, null, 8, Ka)) : v("", !0),
h.value && h.value.index === c ? (r(), n("text", {
key: 1,
x: He(
l.x,
i(se)(
e.value.style.chart.selector.labels.formatter,
l.value,
i(oe)({
p: e.value.style.chart.xAxis.labels.prefix,
v: l.value,
s: e.value.style.chart.xAxis.labels.suffix,
r: e.value.style.chart.selector.labels.rounding
})
),
e.value.style.chart.selector.labels.fontSize
) ? l.x - e.value.style.chart.selector.labels.fontSize / 2 : l.x + e.value.style.chart.selector.labels.fontSize / 2,
y: l.y + e.value.style.chart.selector.labels.fontSize / 3,
"text-anchor": He(
l.x,
i(se)(
e.value.style.chart.selector.labels.formatter,
l.value,
i(oe)({
p: e.value.style.chart.xAxis.labels.prefix,
v: l.value,
s: e.value.style.chart.xAxis.labels.suffix,
r: e.value.style.chart.selector.labels.rounding
})
),
e.value.style.chart.selector.labels.fontSize
) ? "end" : "start",
"font-size": e.value.style.chart.selector.labels.fontSize,
fill: e.value.style.chart.selector.labels.color,
style: {
pointerEvents: "none"
}
}, B(i(se)(
e.value.style.chart.selector.labels.formatter,
l.value,
i(oe)({
p: e.value.style.chart.xAxis.labels.prefix,
v: l.value,
s: e.value.style.chart.xAxis.labels.suffix,
r: e.value.style.chart.selector.labels.rounding
})
)), 9, Ja)) : v("", !0)
], 64))), 256))
], 64))), 256))
], 64))), 256)) : v("", !0)
]),
m(a.$slots, "svg", { svg: f.value }, void 0, !0)
], 14, _a)),
a.$slots.watermark ? (r(), n("div", Qa, [
m(a.$slots, "watermark", te(ae({ isPrinting: i(Ie) || i(Ne) })), void 0, !0)
])) : v("", !0),
y("div", {
ref_key: "chartLegend",
ref: $e
}, [
e.value.style.chart.legend.show ? (r(), _(xa, {
key: `legend_${ie.value}`,
legendSet: pe.value,
config: Ot.value,
onClickMarker: s[0] || (s[0] = ({ legend: t }) => Re(t.id))
}, Ze({
item: p(({ legend: t }) => [
i(U) ? v("", !0) : (r(), n("div", {
key: 0,
style: w(`opacity:${M.value.includes(t.id) ? 0.5 : 1}`),
onClick: (o) => t.segregate()
}, B(t.name), 13, Za))
]),
_: 2
}, [
a.$slots.pattern ? {
name: "legend-pattern",
fn: p(({ legend: t, index: o }) => [
et(Aa, {
shape: t.shape,
radius: 30,
stroke: "none",
plot: { x: 30, y: 30 },
fill: `url(#pattern_${A.value}_${o})`
}, null, 8, ["shape", "fill"])
]),
key: "0"
} : void 0
]), 1032, ["legendSet", "config"])) : v("", !0),
m(a.$slots, "legend", { legend: pe.value }, void 0, !0)
], 512),
a.$slots.source ? (r(), n("div", {
key: 5,
ref_key: "source",
ref: _e,
dir: "auto"
}, [
m(a.$slots, "source", {}, void 0, !0)
], 512)) : v("", !0),
V.value ? (r(), _(i(vt), {
key: 6,
hideDetails: "",
config: {
open: R.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: p(() => [
(r(), _(i(dt), {
key: `table_${bt.value}`,
colNames: Q.value.colNames,
head: Q.value.head,
body: Q.value.body,
config: Q.value.config,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` :${e.value.style.chart.title.subtitle.text}` : ""}`,
onClose: s[1] || (s[1] = (t) => R.value.showTable = !1)
}, {
th: p(({ th: t }) => [
y("div", { innerHTML: t }, null, 8, el)
]),
td: p(({ td: t }) => [
at(B(t.name ? t.name : i(se)(
e.value.style.chart.selector.labels.formatter,
t,
i(oe)({
p: e.value.style.chart.xAxis.labels.prefix,
v: t,
s: e.value.style.chart.xAxis.labels.suffix,
r: e.value.table.td.roundingValue
})
)), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : v("", !0),
e.value.style.chart.dialog.show ? (r(), _(i(ht), {
key: 7,
ref_key: "dialog",
ref: ue,
onClose: s[2] || (s[2] = (t) => D.value = null),
backgroundColor: e.value.style.chart.dialog.backgroundColor,
color: e.value.style.chart.dialog.color,
headerBg: e.value.style.chart.dialog.header.backgroundColor,
headerColor: e.value.style.chart.dialog.header.color,
isFullscreen: X.value,
fullscreenParent: T.value,
withPadding: ""
}, {
title: p(() => [
at(B(D.value.name), 1)
]),
default: p(() => [
D.value ? (r(), _(i(mt), {
key: 0,
config: Be.value,
dataset: Ve.value
}, null, 8, ["config", "dataset"])) : v("", !0)
]),
_: 1
}, 8, ["backgroundColor", "color", "headerBg", "headerColor", "isFullscreen", "fullscreenParent"])) : v("", !0),
i(U) ? (r(), _(ya, { key: 8 })) : v("", !0)
], 46, $a));
}
}, ml = /* @__PURE__ */ wa(tl, [["__scopeId", "data-v-e3880d82"]]);
export {
ml as default
};