vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
969 lines (968 loc) • 41.3 kB
JavaScript
import { defineAsyncComponent as O, computed as f, ref as u, shallowRef as Be, onMounted as Nt, onBeforeUnmount as Ft, watch as Ue, createElementBlock as n, openBlock as r, unref as i, normalizeStyle as _, normalizeClass as q, createBlock as P, createCommentVNode as c, renderSlot as p, createElementVNode as d, createSlots as Ge, withCtx as m, normalizeProps as K, guardReactiveProps as J, createVNode as We, Fragment as g, renderList as A, mergeProps as je, toDisplayString as V, createTextVNode as Ye, nextTick as Dt } from "vue";
import { u as It, c as ve, o as Rt, e as he, g as qe, b as Xt, d as Et, p as Q, an as Ke, a9 as Ht, U as Je, V as Vt, W as Bt, X as Ut, F as Gt, I as Wt, i as Z, f as ee, t as jt, a as Yt, q as qt, r as Kt, K as Jt } from "./index-BLtEpj8j.js";
import { u as Qt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Zt } from "./useChartAccessibility-9icAAmYg.js";
import { u as el } from "./usePrinter-DnRwTdvS.js";
import { t as tl, u as ll } from "./useResponsive-DfdjqQps.js";
import { u as Qe } from "./useNestedProp-Bw1KcAmj.js";
import al from "./Legend-E7G897sw.js";
import sl from "./Title-DkG60EPg.js";
import { _ as ol } from "./Shape-Cqnzky8X.js";
import { u as rl } from "./useTimeLabels-DFkUfjfs.js";
import nl from "./img-D-vWHxhM.js";
import { _ as il } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ul = ["id"], cl = ["xmlns", "viewBox"], vl = ["id"], hl = ["stop-color"], dl = ["stop-color"], yl = ["stop-color"], fl = ["stop-color"], gl = ["id"], pl = ["stop-color"], ml = ["stop-color"], bl = ["stop-color"], xl = ["stop-color"], kl = { key: 0 }, Al = ["fill", "d"], wl = ["stroke", "stroke-width", "d"], $l = ["fill", "d"], Cl = ["stroke", "stroke-dasharray", "stroke-width", "d"], _l = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], Ml = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Pl = ["x", "y", "font-size", "font-weight", "fill", "text-decoration", "onMouseenter", "onClick"], Tl = { key: 0 }, Sl = { key: 0 }, zl = ["font-size", "fill", "font-weight", "transform", "text-anchor"], Ol = ["font-size", "fill", "font-weight", "transform", "text-anchor", "innerHTML"], Ll = ["x", "y", "width", "height", "onMouseenter", "onClick"], Nl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Fl = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Dl = ["x", "y", "text-anchor", "font-size", "fill"], Il = {
key: 5,
class: "vue-data-ui-watermark"
}, Rl = ["onClick"], Xl = ["innerHTML"], El = {
__name: "vue-ui-ridgeline",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend", "selectDatapoint", "selectX"],
setup(Ze, { expose: et, emit: tt }) {
const lt = O(() => import("./vue-ui-accordion-B6Svdk-2.js")), at = O(() => import("./BaseDraggableDialog-C8T604ao.js")), st = O(() => import("./DataTable-CS_V_Adx.js")), ot = O(() => import("./PackageVersion-CnRyWKP-.js")), rt = O(() => import("./PenAndPaper-7BWf7zgA.js")), nt = O(() => import("./vue-ui-skeleton-CsMU8DwQ.js")), it = O(() => import("./UserOptions-DGw0HvSp.js")), ut = O(() => import("./vue-ui-xy-h8axaZKl.js")), { vue_ui_ridgeline: ct } = It(), k = Ze, L = f({
get() {
return !!k.dataset && k.dataset.length;
},
set(l) {
return l;
}
}), te = tt, T = u(null), de = u(null), ye = u(null), S = Be(null), I = Be(null), fe = u(null), ge = u(null), pe = u(0), vt = u(0), me = u(0), w = u(ve()), be = u(0), ht = u(0), xe = u(512), v = u(null), R = u(null), le = u(null), ke = u(0);
function Ae() {
const l = Qe({
userConfig: k.config,
defaultConfig: ct
});
return l.theme ? {
...Qe({
userConfig: Yt.vue_ui_ridgeline[l.theme] || k.config,
defaultConfig: l
}),
customPalette: jt[l.theme] || Q
} : l;
}
const e = f({
get: () => Ae(),
set: (l) => l
}), $ = u(Math.min(
e.value.style.chart.areas.height,
e.value.style.chart.areas.rowHeight
)), {
userOptionsVisible: ae,
setUserOptionsVisibility: we,
keepUserOptionState: $e
} = Qt({ config: e.value }), { svgRef: se } = Zt({ config: e.value.style.chart.title });
Nt(oe);
function oe() {
if (Rt(k.dataset) ? he({
componentName: "VueUiRidgeline",
type: "dataset"
}) : k.dataset.forEach((l, o) => {
qe({
datasetObject: l,
requiredAttributes: ["name", "datapoints"]
}).forEach((t) => {
L.value = !1, he({
componentName: "VueUiRidgeline",
type: "datasetSerieAttribute",
property: t,
index: o
});
}), l.datapoints.length && l.datapoints.forEach((t, s) => {
qe({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((a) => {
L.value = !1, he({
componentName: "VueUiRidgeline",
type: "datasetSerieAttribute",
property: `datapoint.${a}`,
index: `${o}-${s}`
});
});
});
}), ht.value = k.dataset.length, $.value = Math.min(
e.value.style.chart.areas.height,
e.value.style.chart.areas.rowHeight
), e.value.responsive) {
const l = tl(() => {
const { width: o, height: t } = ll({
chart: T.value,
title: e.value.style.chart.title.text ? de.value : null,
legend: e.value.style.chart.legend.show ? ye.value : null,
source: fe.value,
noTitle: ge.value,
padding: e.value.style.chart.padding
});
requestAnimationFrame(() => {
xe.value = o, $.value = t / k.dataset.length, ke.value = t;
});
});
S.value && (I.value && S.value.unobserve(I.value), S.value.disconnect()), S.value = new ResizeObserver(l), I.value = T.value.parentNode, S.value.observe(I.value);
}
}
Ft(() => {
S.value && (I.value && S.value.unobserve(I.value), S.value.disconnect());
});
const { isPrinting: Ce, isImaging: _e, generatePdf: Me, generateImage: Pe } = el({
elementId: `vue-ui-ridgeline_${w.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-ridgeline",
options: e.value.userOptions.print
}), dt = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), yt = f(() => Xt(e.value.customPalette)), B = u({
showTable: e.value.table.show
});
Ue(() => k.config, (l) => {
e.value = Ae(), ae.value = !e.value.userOptions.showOnChartHover, oe(), pe.value += 1, me.value += 1, $.value = Math.min(
e.value.style.chart.areas.height,
e.value.style.chart.areas.rowHeight
), B.value.showTable = e.value.table.show;
}, { deep: !0 }), Ue(() => k.dataset, oe, { deep: !0 });
const re = f(() => e.value.style.chart.areas.height / e.value.style.chart.areas.rowHeight);
function Te(l) {
z.value.includes(l) ? z.value = z.value.filter((o) => o !== l) : z.value.push(l), te("selectLegend", E.value);
}
const M = f(() => L.value ? k.dataset.map((l, o) => ({
...l,
labelLen: pt(l.name, e.value.style.chart.yAxis.labels.fontSize),
uid: ve(),
datapoints: l.datapoints.map((t, s) => {
const a = t.color ? Et(t.color) : yt.value[s] || Q[s] || Q[s % Q.length], h = Ke(t.name);
return {
...t,
color: a,
id: h
};
})
})) : []), Se = f(() => e.value.style.chart.padding.top + $.value * k.dataset.length + $.value * re.value), b = f(() => ({
fullHeight: y.value.padding.top + y.value.padding.bottom + y.value.height,
top: y.value.padding.top,
left: y.value.padding.left,
right: y.value.width - y.value.padding.right,
bottom: y.value.padding.top + y.value.height,
width: y.value.width - (y.value.padding.left + y.value.padding.right)
})), y = f(() => {
const l = e.value.style.chart.padding;
return {
width: xe.value,
height: Se.value,
padding: l
};
}), ne = f(() => Math.max(...M.value.flatMap((l) => l.datapoints.map((o) => o.values.length)))), W = f(() => rl({
values: e.value.style.chart.xAxis.labels.values,
maxDatapoints: ne.value,
formatter: e.value.style.chart.xAxis.labels.datetimeFormatter,
start: 0,
end: e.value.style.chart.xAxis.labels.values.length
})), X = f(() => {
const l = Math.max(...M.value.map((a) => a.labelLen)), o = y.value.padding.left + l + 16 + e.value.style.chart.yAxis.labels.offsetX, t = (b.value.width - o) / ne.value, s = [];
for (let a = 0; a < ne.value; a += 1)
s.push({
selectorX: o + t * a,
x: o + t * a - t / 2,
y: b.value.top,
label: e.value.style.chart.xAxis.labels.values[a] ? W.value[a].text : "",
index: a,
width: t,
height: Se.value
});
return s;
});
function ft(l) {
te("selectX", M.value.map((o) => o.datapoints.map((t) => ({
dp: t,
selected: t.values[l.index]
}))));
}
function gt(l, o) {
return l.length * o / 2 + o;
}
function ze(l, o, t) {
const s = gt(o, t);
return l + s > b.value.right;
}
function pt(l, o, t = "sans-serif") {
const a = document.createElement("canvas").getContext("2d"), h = typeof o == "number" ? `${o}px` : o;
return a.font = `${h} ${t}`, a.measureText(l).width;
}
const E = f(() => {
$.value;
const l = Math.max(...M.value.map((x) => x.labelLen)), o = Math.max(...M.value.flatMap((x) => x.datapoints.map((N) => N.values.length))), t = Math.max(...M.value.flatMap((x) => x.datapoints.flatMap((N) => N.values))), s = Math.min(...M.value.flatMap((x) => x.datapoints.flatMap((N) => N.values))), a = y.value.padding.left + l + 16 + e.value.style.chart.yAxis.labels.offsetX, h = (b.value.width - a) / o, C = Math.abs(Math.min(s, 0)), Re = t + C;
function Xe(x) {
return isNaN(x / Re) ? 0 : x / Re;
}
return M.value.map((x, N) => {
const Ee = b.value.top + $.value * N, F = b.value.top + Ee + $.value * re.value * (1 - Xe(C));
return {
...x,
label: {
x: a - e.value.style.chart.yAxis.labels.fontSize,
y: F
},
datapoints: x.datapoints.map((U) => {
const D = U.values.map((G, Tt) => {
const St = isNaN(G) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(G) ? 0 : G || 0, zt = a + h * Tt, Ot = b.value.top + Ee + $.value * re.value * (1 - Xe(St + C)), Lt = G === Math.max(...U.values);
return {
x: zt,
y: Ot,
value: G,
isMaxPoint: Lt,
zero: F
};
}), Ct = `${Ht(D, F, !1, !1)}`, _t = `M ${a},${F} ${Je(D)} ${D.at(-1).x},${F}`, Mt = `M ${a},${F} ${D.at(-1).x},${F}`, He = `M ${Vt(D)}`, Ve = `M ${Je(D)}`, Pt = Bt(
e.value.style.chart.areas.smooth ? He : Ve
);
return {
...U,
uid: ve(),
plots: D,
smoothPath: Ct,
straightPath: _t,
zeroPath: Mt,
pathLength: Pt,
smoothPathRidge: He,
straightPathRidge: Ve
};
}).filter((U) => !z.value.includes(U.id))
};
});
}), z = u([]);
function mt(l) {
const o = /* @__PURE__ */ new Map();
return l.forEach((t) => {
t.datapoints.forEach((s, a) => {
const h = Ke(s.name);
o.has(h) || o.set(h, {
id: h,
name: s.name,
color: s.color,
shape: "circle",
segregate: () => Te(h),
isSegregated: z.value.includes(h),
opacity: z.value.includes(h) ? 0.5 : 1
});
});
}), Array.from(o.values());
}
const ie = f(() => mt(M.value)), bt = f(() => ({
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" : ""
})), H = u(!1);
function Oe(l) {
H.value = l, be.value += 1;
}
const Le = u({}), Ne = u([]);
function xt(l) {
te("selectDatapoint", l), e.value.style.chart.dialog.show && (Ne.value = l.datapoints.map((o) => ({
name: o.name,
color: o.color,
type: "line",
useArea: !0,
smooth: e.value.style.chart.areas.smooth,
series: o.values
})), R.value = l, Le.value = Jt({
...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
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
}
}
}), le.value && le.value.open());
}
const ue = u(null);
function kt(l) {
ue.value = l;
}
function At() {
ue.value = null;
}
const j = u(!1);
function ce() {
j.value = !j.value;
}
function Fe() {
B.value.showTable = !B.value.showTable;
}
const De = f(() => ({ body: E.value.flatMap((t) => t.datapoints.flatMap((s) => ({
...s,
rowName: `${t.name}: ${s.name}`
}))).map((t) => [
{
name: t.rowName,
color: t.color
},
...t.values
]) })), Y = f(() => {
const l = [
e.value.table.columnNames.series,
...W.value.map((s) => s.text)
], o = {
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((s) => s.text)
],
head: l,
body: De.value.body,
config: o
};
});
function Ie(l = null) {
Dt(() => {
const o = [
[e.value.table.columnNames.series, ...W.map((a) => [a.text])],
...De.value.body.map((a, h) => [a[0].name, ...a.slice(1)])
], t = [
[e.value.style.chart.title.text],
[e.value.style.chart.title.subtitle.text]
].concat(o), s = qt(t);
l ? l(s) : Kt({
csvContent: s,
title: e.value.style.chart.title.text || "vue-ui-ridgeline"
});
});
}
function wt() {
return E.value;
}
async function $t({ scale: l = 2 } = {}) {
if (!T.value) return;
const { width: o, height: t } = T.value.getBoundingClientRect(), s = o / t, { imageUri: a, base64: h } = await nl({ domElement: T.value, base64: !0, img: !0, scale: l });
return {
imageUri: a,
base64: h,
title: e.value.style.chart.title.text,
width: o,
height: t,
aspectRatio: s
};
}
return et({
getData: wt,
getImage: $t,
generateImage: Pe,
generatePdf: Me,
generateCsv: Ie,
toggleAnnotator: ce,
toggleTable: Fe,
toggleFullscreen: Oe
}), (l, o) => (r(), n("div", {
ref_key: "ridgelineChart",
ref: T,
class: q(`vue-ui-ridgeline ${H.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
id: `vue-ui-ridgeline_${w.value}`,
style: _({
fontFamily: e.value.style.fontFamily,
width: "100%",
textAlign: "center",
background: e.value.style.chart.backgroundColor,
height: e.value.responsive ? "100%" : void 0
}),
onMouseenter: o[4] || (o[4] = () => i(we)(!0)),
onMouseleave: o[5] || (o[5] = () => i(we)(!1))
}, [
e.value.userOptions.buttons.annotator && i(se) ? (r(), P(i(rt), {
key: 0,
color: e.value.style.chart.color,
backgroundColor: e.value.style.chart.backgroundColor,
active: j.value,
svgRef: i(se),
onClose: ce
}, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : c("", !0),
p(l.$slots, "userConfig", {}, void 0, !0),
dt.value ? (r(), n("div", {
key: 1,
ref_key: "noTitle",
ref: ge,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : c("", !0),
e.value.style.chart.title.text ? (r(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: de,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(r(), P(sl, {
key: `title_${pe.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)) : c("", !0),
e.value.userOptions.show && L.value && (i($e) || i(ae)) ? (r(), P(i(it), {
ref: "details",
key: `user_option_${be.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: i(Ce),
isImaging: i(_e),
uid: w.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: H.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: _({
visibility: i($e) ? i(ae) ? "visible" : "hidden" : "visible"
}),
onToggleFullscreen: Oe,
onGeneratePdf: i(Me),
onGenerateCsv: Ie,
onGenerateImage: i(Pe),
onToggleTable: Fe,
onToggleAnnotator: ce
}, Ge({ _: 2 }, [
l.$slots.menuIcon ? {
name: "menuIcon",
fn: m(({ isOpen: t, color: s }) => [
p(l.$slots, "menuIcon", K(J({ isOpen: t, color: s })), void 0, !0)
]),
key: "0"
} : void 0,
l.$slots.optionTooltip ? {
name: "optionTooltip",
fn: m(() => [
p(l.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
l.$slots.optionPdf ? {
name: "optionPdf",
fn: m(() => [
p(l.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
l.$slots.optionCsv ? {
name: "optionCsv",
fn: m(() => [
p(l.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
l.$slots.optionImg ? {
name: "optionImg",
fn: m(() => [
p(l.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
l.$slots.optionTable ? {
name: "optionTable",
fn: m(() => [
p(l.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
l.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: m(({ toggleFullscreen: t, isFullscreen: s }) => [
p(l.$slots, "optionFullscreen", K(J({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
]),
key: "6"
} : void 0,
l.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: m(({ toggleAnnotator: t, isAnnotator: s }) => [
p(l.$slots, "optionAnnotator", K(J({ toggleAnnotator: t, isAnnotator: s })), 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"])) : c("", !0),
L.value ? (r(), n("svg", {
key: 4,
ref_key: "svgRef",
ref: se,
xmlns: i(Ut),
class: q({ "vue-data-ui-fullscreen--on": H.value, "vue-data-ui-fulscreen--off": !H.value }),
viewBox: `0 0 ${y.value.width <= 0 ? 10 : y.value.width} ${b.value.fullHeight <= 0 ? 10 : b.value.fullHeight}`,
style: _(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color};${e.value.responsive ? `height: ${ke.value}px; width: 100%;` : ""}`)
}, [
We(i(ot)),
d("defs", null, [
(r(!0), n(g, null, A(ie.value, (t, s) => (r(), n("linearGradient", {
id: `gradient-${t.id}-${w.value}`,
x1: "50%",
y1: "0%",
x2: "50%",
y2: "100%"
}, [
d("stop", {
offset: "0%",
"stop-color": t.color,
"stop-opacity": "1"
}, null, 8, hl),
d("stop", {
offset: "30%",
"stop-color": t.color,
"stop-opacity": "0.7"
}, null, 8, dl),
d("stop", {
offset: "70%",
"stop-color": t.color,
"stop-opacity": "0.3"
}, null, 8, yl),
d("stop", {
offset: "100%",
"stop-color": t.color,
"stop-opacity": "0.1"
}, null, 8, fl)
], 8, vl))), 256)),
(r(!0), n(g, null, A(E.value, (t, s) => (r(), n(g, null, [
(r(!0), n(g, null, A(t.datapoints, (a, h) => (r(), n("linearGradient", {
key: `grad${a.id}`,
id: `gradient-single-${w.value}-${a.uid}`,
x1: "50%",
y1: "0%",
x2: "50%",
y2: "100%"
}, [
d("stop", {
offset: "0%",
"stop-color": a.color,
"stop-opacity": "1"
}, null, 8, pl),
d("stop", {
offset: "30%",
"stop-color": a.color,
"stop-opacity": "0.7"
}, null, 8, ml),
d("stop", {
offset: "70%",
"stop-color": a.color,
"stop-opacity": "0.3"
}, null, 8, bl),
d("stop", {
offset: "100%",
"stop-color": a.color,
"stop-opacity": "0.1"
}, null, 8, xl)
], 8, gl))), 128))
], 64))), 256))
]),
(r(!0), n(g, null, A(E.value, (t, s) => (r(), n("g", {
key: `ds-${s}`
}, [
(r(!0), n(g, null, A(t.datapoints, (a, h) => (r(), n("g", {
key: a.id
}, [
l.$slots.pattern ? (r(), n("g", kl, [
d("defs", null, [
p(l.$slots, "pattern", je({ ref_for: !0 }, { datapointIndex: s, seriesIndex: h, patternId: `pattern_${w.value}_${a.uid}` }), void 0, !0)
])
])) : c("", !0),
d("path", {
fill: l.$slots.pattern ? `url(#pattern_${w.value}_${a.uid})` : e.value.style.chart.backgroundColor,
stroke: "none",
"stroke-linecap": "round",
d: e.value.style.chart.areas.smooth ? a.smoothPath : a.straightPath,
style: _({
opacity: e.value.style.chart.areas.opacity
})
}, null, 12, Al),
d("path", {
fill: "none",
stroke: e.value.style.chart.areas.stroke.useSerieColor ? a.color : e.value.style.chart.areas.stroke.color,
"stroke-width": e.value.style.chart.areas.strokeWidth,
d: e.value.style.chart.areas.smooth ? a.smoothPathRidge : a.straightPathRidge,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: q({ "vue-ui-ridgeline-animate": e.value.useCssAnimation }),
style: _({
strokeDasharray: a.pathLength,
strokeDashoffset: e.value.useCssAnimation ? a.pathLength : 0
})
}, null, 14, wl),
d("path", {
fill: e.value.style.chart.areas.useGradient ? e.value.style.chart.areas.useCommonColor ? `url(#gradient-${a.id}-${w.value})` : `url(#gradient-single-${w.value}-${a.uid})` : a.color,
stroke: "none",
d: e.value.style.chart.areas.smooth ? a.smoothPath : a.straightPath,
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: q({ "vue-ui-ridgeline-animate": e.value.useCssAnimation }),
style: _({
strokeDasharray: a.pathLength,
strokeDashoffset: e.value.useCssAnimation ? a.pathLength : 0
})
}, null, 14, $l),
e.value.style.chart.zeroLine.show ? (r(), n("path", {
key: 1,
stroke: e.value.style.chart.zeroLine.useSerieColor ? a.color : e.value.style.chart.zeroLine.stroke,
"stroke-dasharray": e.value.style.chart.zeroLine.strokeDasharray,
"stroke-width": e.value.style.chart.zeroLine.strokeWidth,
d: a.zeroPath,
"stroke-linecap": "round"
}, null, 8, Cl)) : c("", !0),
e.value.style.chart.areas.maxPoint.show && a.plots.length > 1 ? (r(!0), n(g, { key: 2 }, A(a.plots, (C) => (r(), n(g, null, [
C.isMaxPoint ? (r(), n("line", {
key: 0,
x1: C.x,
y1: C.y,
x2: C.x,
y2: C.zero,
stroke: e.value.style.chart.areas.maxPoint.adaptStrokeToBackground ? i(Gt)(a.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, _l)) : c("", !0)
], 64))), 256)) : c("", !0),
a.plots.length === 1 ? (r(), n("circle", {
key: 3,
cx: a.plots[0].x,
cy: a.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 ? a.color : e.value.style.chart.selector.dot.fill,
style: {
pointerEvents: "none"
}
}, null, 8, Ml)) : c("", !0)
]))), 128)),
d("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: _({
cursor: e.value.style.chart.dialog.show ? "pointer" : "default"
}),
"text-decoration": e.value.style.chart.dialog.show && (ue.value === s || R.value && t.uid === R.value.uid) ? "underline" : "",
onMouseenter: (a) => kt(s),
onMouseleave: At,
onClick: (a) => xt(t)
}, V(t.name), 45, Pl)
]))), 128)),
e.value.style.chart.xAxis.labels.values.length ? (r(), n("g", Tl, [
(r(!0), n(g, null, A(X.value, (t, s) => p(l.$slots, "time-label", je({ 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 && (s === 0 || s === X.value.length - 1) || t && v.value && v.value.index === s || t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && e.value.style.chart.xAxis.labels.showOnlyAtModulo && s % Math.floor(X.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.top + t.height + 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 && (s === 0 || s === X.value.length - 1) || t && v.value && v.value.index === s || t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && e.value.style.chart.xAxis.labels.showOnlyAtModulo && s % Math.floor(X.value.length / e.value.style.chart.xAxis.labels.modulo) === 0 ? (r(), n("g", Sl, [
String(t.label).includes(`
`) ? (r(), n("text", {
key: 1,
"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.top + t.height + 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: _({
opacity: v.value ? v.value.index === s ? 1 : 0.2 : 1
}),
innerHTML: i(Wt)({
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, Ol)) : (r(), n("text", {
key: 0,
"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.top + t.height + 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: _({
opacity: v.value ? v.value.index === s ? 1 : 0.2 : 1
})
}, V(t.label), 13, zl))
])) : c("", !0)
], !0)), 256))
])) : c("", !0),
d("g", null, [
(r(!0), n(g, null, A(X.value, (t, s) => (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: (a) => v.value = t,
onMouseleave: o[0] || (o[0] = (a) => v.value = null),
onClick: () => ft(t)
}, null, 40, Ll))), 256)),
e.value.style.chart.selector.show && v.value ? (r(), n("line", {
key: 0,
x1: v.value.selectorX,
x2: v.value.selectorX,
y1: v.value.y,
y2: v.value.y + v.value.height - $.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, Nl)) : c("", !0),
v.value ? (r(!0), n(g, { key: 1 }, A(E.value, (t) => (r(), n(g, null, [
(r(!0), n(g, null, A(t.datapoints, (s) => (r(), n(g, null, [
(r(!0), n(g, null, A(s.plots, (a, h) => (r(), n(g, null, [
v.value && v.value.index === h ? (r(), n("circle", {
key: 0,
cx: a.x,
cy: a.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 ? s.color : e.value.style.chart.selector.dot.fill,
style: {
pointerEvents: "none"
}
}, null, 8, Fl)) : c("", !0),
v.value && v.value.index === h ? (r(), n("text", {
key: 1,
x: ze(
a.x,
i(Z)(
e.value.style.chart.selector.labels.formatter,
a.value,
i(ee)({
p: e.value.style.chart.xAxis.labels.prefix,
v: a.value,
s: e.value.style.chart.xAxis.labels.suffix,
r: e.value.style.chart.selector.labels.rounding
})
),
e.value.style.chart.selector.labels.fontSize
) ? a.x - e.value.style.chart.selector.labels.fontSize / 2 : a.x + e.value.style.chart.selector.labels.fontSize / 2,
y: a.y + e.value.style.chart.selector.labels.fontSize / 3,
"text-anchor": ze(
a.x,
i(Z)(
e.value.style.chart.selector.labels.formatter,
a.value,
i(ee)({
p: e.value.style.chart.xAxis.labels.prefix,
v: a.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"
}
}, V(i(Z)(
e.value.style.chart.selector.labels.formatter,
a.value,
i(ee)({
p: e.value.style.chart.xAxis.labels.prefix,
v: a.value,
s: e.value.style.chart.xAxis.labels.suffix,
r: e.value.style.chart.selector.labels.rounding
})
)), 9, Dl)) : c("", !0)
], 64))), 256))
], 64))), 256))
], 64))), 256)) : c("", !0)
]),
p(l.$slots, "svg", { svg: y.value }, void 0, !0)
], 14, cl)) : c("", !0),
l.$slots.watermark ? (r(), n("div", Il, [
p(l.$slots, "watermark", K(J({ isPrinting: i(Ce) || i(_e) })), void 0, !0)
])) : c("", !0),
L.value ? c("", !0) : (r(), P(i(nt), {
key: 6,
config: {
type: "ridgeline",
style: {
backgroundColor: e.value.style.chart.backgroundColor,
ridgeline: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
d("div", {
ref_key: "chartLegend",
ref: ye
}, [
e.value.style.chart.legend.show ? (r(), P(al, {
key: `legend_${me.value}`,
legendSet: ie.value,
config: bt.value,
onClickMarker: o[1] || (o[1] = ({ legend: t }) => Te(t.id))
}, Ge({
item: m(({ legend: t }) => [
d("div", {
style: _(`opacity:${z.value.includes(t.id) ? 0.5 : 1}`),
onClick: (s) => t.segregate()
}, V(t.name), 13, Rl)
]),
_: 2
}, [
l.$slots.pattern ? {
name: "legend-pattern",
fn: m(({ legend: t, index: s }) => [
We(ol, {
shape: t.shape,
radius: 30,
stroke: "none",
plot: { x: 30, y: 30 },
fill: `url(#pattern_${w.value}_${s})`
}, null, 8, ["shape", "fill"])
]),
key: "0"
} : void 0
]), 1032, ["legendSet", "config"])) : c("", !0),
p(l.$slots, "legend", { legend: ie.value }, void 0, !0)
], 512),
l.$slots.source ? (r(), n("div", {
key: 7,
ref_key: "source",
ref: fe,
dir: "auto"
}, [
p(l.$slots, "source", {}, void 0, !0)
], 512)) : c("", !0),
L.value ? (r(), P(i(lt), {
key: 8,
hideDetails: "",
config: {
open: B.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(() => [
(r(), P(i(st), {
key: `table_${vt.value}`,
colNames: Y.value.colNames,
head: Y.value.head,
body: Y.value.body,
config: Y.value.config,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` :${e.value.style.chart.title.subtitle.text}` : ""}`,
onClose: o[2] || (o[2] = (t) => B.value.showTable = !1)
}, {
th: m(({ th: t }) => [
d("div", { innerHTML: t }, null, 8, Xl)
]),
td: m(({ td: t }) => [
Ye(V(t.name ? t.name : i(Z)(
e.value.style.chart.selector.labels.formatter,
t,
i(ee)({
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"])) : c("", !0),
e.value.style.chart.dialog.show ? (r(), P(i(at), {
key: 9,
ref_key: "dialog",
ref: le,
onClose: o[3] || (o[3] = (t) => R.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: H.value,
fullscreenParent: T.value
}, {
title: m(() => [
Ye(V(R.value.name), 1)
]),
default: m(() => [
R.value ? (r(), P(i(ut), {
key: 0,
config: Le.value,
dataset: Ne.value
}, null, 8, ["config", "dataset"])) : c("", !0)
]),
_: 1
}, 8, ["backgroundColor", "color", "headerBg", "headerColor", "isFullscreen", "fullscreenParent"])) : c("", !0)
], 46, ul));
}
}, ea = /* @__PURE__ */ il(El, [["__scopeId", "data-v-594e5460"]]);
export {
ea as default
};