vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
888 lines (887 loc) • 37.7 kB
JavaScript
import { ref as c, computed as f, onMounted as We, onBeforeUnmount as He, watch as Ee, createElementBlock as r, openBlock as s, unref as h, normalizeStyle as M, normalizeClass as I, renderSlot as x, createBlock as z, createCommentVNode as v, createElementVNode as T, createVNode as we, createSlots as Ge, withCtx as m, normalizeProps as O, guardReactiveProps as P, Fragment as b, renderList as k, toDisplayString as L, createTextVNode as Ve, nextTick as qe } from "vue";
import { u as Ze, c as Ce, o as Je, e as _e, g as Ke, b as Qe, d as et, p as H, D as $e, i as F, f as X, X as tt, l as lt, h as at, G as st, F as N, t as ot, a as rt, C as E, q as nt, r as ut, x as it } from "./index-BaaDnc4F.js";
import { u as Me } from "./useNestedProp-D8vQcOps.js";
import { u as ct, U as vt } from "./usePrinter-y4-4tCWT.js";
import { _ as ht } from "./PackageVersion-D9Lm1C1X.js";
import { L as yt } from "./Legend-Be8mrJpb.js";
import { _ as dt } from "./Title-D_MGglyN.js";
import { _ as ft } from "./Tooltip-HRgkF8HD.js";
import { D as xt } from "./DataTable-DvwmNjb-.js";
import pt from "./vue-ui-accordion-CF9kQTXq.js";
import { P as mt } from "./PenAndPaper-DR58HO_U.js";
import gt from "./vue-ui-skeleton-6RiQNJSb.js";
import { t as bt, u as kt } from "./useResponsive-vZgZwV-S.js";
import { u as wt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Ct } from "./useChartAccessibility-BWojgys7.js";
import { _ as _t } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const $t = ["id"], Mt = ["xmlns", "viewBox"], At = ["x", "y", "width", "height"], Tt = { key: 1 }, Lt = ["id"], St = ["stop-color"], zt = ["stop-color"], Nt = ["stop-color"], It = { key: 2 }, Ot = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Pt = { key: 3 }, Ft = ["x", "y", "fill", "font-size"], Xt = ["transform", "font-size", "fill", "font-weight"], Dt = { key: 5 }, Yt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], jt = { key: 6 }, Bt = ["transform", "fill", "font-size", "text-anchor"], Rt = ["x", "y", "font-size", "fill", "font-weight"], Ut = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Wt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ht = ["d", "stroke", "stroke-width"], Et = ["d", "stroke", "stroke-width"], Gt = ["cx", "cy", "fill", "r"], Vt = ["cx", "cy", "fill", "r", "stroke", "stroke-width"], qt = { key: 1 }, Zt = ["x", "y", "font-size", "fill", "font-weight"], Jt = { key: 2 }, Kt = ["x", "y", "font-size", "font-weight", "fill"], Qt = ["cx", "cy", "r", "onMouseenter", "onClick"], el = {
key: 5,
class: "vue-data-ui-watermark"
}, tl = ["onClick"], ll = ["innerHTML"], al = {
__name: "vue-ui-history-plot",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend", "selectDatapoint"],
setup(Ae, { expose: Te, emit: Le }) {
const { vue_ui_history_plot: Se } = Ze(), y = Ae, D = c(null), K = c(null), Q = c(0), ee = c(null), te = c(0), le = c(0), ae = c(0), B = c(null), se = c(null), Y = c(Ce()), G = c(!1), V = c(""), g = c([]), R = c(!1), $ = c(null), j = c(!1), oe = c(null), w = f({
get: () => !!y.dataset && y.dataset.length,
set: (t) => t
}), re = Le;
We(ne), He(() => {
B.value && B.value.disconnect();
});
function ne() {
if (Je(y.dataset) ? _e({
componentName: "VueUiHistoryPlot",
type: "dataset"
}) : y.dataset.forEach((t, a) => {
Ke({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((l) => {
w.value = !1, _e({
componentName: "VueUiHistoryPlot",
type: "datasetSerieAttribute",
property: l,
index: a
});
});
}), e.value.responsive) {
const t = bt(() => {
const { width: a, height: l } = kt({
chart: D.value,
title: e.value.style.chart.title.text ? K.value : null,
noTitle: se.value,
legend: e.value.style.chart.legend.show ? ee.value : null,
source: oe.value
});
requestAnimationFrame(() => {
d.value.width = a, d.value.height = l, u.value.plots = N({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.plots.radius,
threshold: 3,
fallback: 3
}), u.value.indexLabels = N({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.plots.indexLabels.fontSize,
threshold: 6,
fallback: 6
}), u.value.labels = N({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.plots.labels.fontSize,
threshold: 6,
fallback: 6
}), u.value.xAxisLabels = N({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.axes.x.labels.fontSize,
threshold: 6,
fallback: 6
}), u.value.xAxisName = N({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.axes.x.name.fontSize,
threshold: 6,
fallback: 6
}), u.value.yAxisLabels = N({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.axes.y.labels.fontSize,
threshold: 6,
fallback: 6
}), u.value.yAxisName = N({
relator: Math.min(a, l),
adjuster: 600,
source: e.value.style.chart.axes.y.name.fontSize,
threshold: 6,
fallback: 6
});
});
});
B.value = new ResizeObserver(t), B.value.observe(D.value.parentNode);
}
}
function ue() {
const t = Me({
userConfig: y.config,
defaultConfig: Se
});
let a = {};
return t.theme ? a = {
...Me({
userConfig: rt.vue_ui_history_plot[t.theme] || y.config,
defaultConfig: t
}),
customPalette: ot[t.theme] || H
} : a = t, y.config && E(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 && E(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 && E(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 && E(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 = f({
get: () => ue(),
set: (t) => t
}), { userOptionsVisible: q, setUserOptionsVisibility: ie, keepUserOptionState: ce } = wt({ config: e.value }), { svgRef: ve } = Ct({ config: e.value.style.chart.title });
Ee(() => y.config, (t) => {
e.value = ue(), q.value = !e.value.userOptions.showOnChartHover, ne(), Q.value += 1, le.value += 1, te.value += 1, d.value.height = e.value.style.chart.height, d.value.width = e.value.style.chart.width, u.value.plots = e.value.style.chart.plots.radius, u.value.indexLabels = e.value.style.chart.plots.indexLabels.fontSize, u.value.labels = e.value.style.chart.plots.labels.fontSize, u.value.xAxisLabels = e.value.style.chart.axes.x.labels.fontSize, u.value.xAxisName = e.value.style.chart.axes.x.name.fontSize, u.value.yAxisLabels = e.value.style.chart.axes.y.labels.fontSize, u.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 });
const { isPrinting: he, isImaging: ye, generatePdf: de, generateImage: fe } = ct({
elementId: `history_plot_${Y.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-history-plot"
}), ze = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ne = f(() => Qe(e.value.customPalette)), C = c({
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
}), d = c({
height: e.value.style.chart.height,
width: e.value.style.chart.width
}), n = f(() => {
const t = e.value.style.chart.padding.left, a = e.value.style.chart.padding.top;
return {
left: t,
top: a,
right: d.value.width - e.value.style.chart.padding.right,
bottom: d.value.height - e.value.style.chart.padding.bottom,
width: d.value.width - t - e.value.style.chart.padding.right,
height: d.value.height - a - e.value.style.chart.padding.bottom
};
}), u = c({
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
}), A = f(() => w.value ? y.dataset.map((t, a) => ({
...t,
color: t.color ? et(t.color) : Ne.value[a] || H[a] || H[a % H.length],
seriesIndex: a
})) : []), Ie = f(() => w.value ? Math.max(...A.value.filter((t) => !g.value.includes(t.seriesIndex)).flatMap((t) => t.values.map((a) => a.x))) : 1), Oe = f(() => {
if (!w.value) return 1;
const t = Math.min(...A.value.filter((a) => !g.value.includes(a.seriesIndex)).flatMap((a) => a.values.map((l) => l.x)));
return t < 0 ? t : 0;
}), Pe = f(() => w.value ? Math.max(...A.value.filter((t) => !g.value.includes(t.seriesIndex)).flatMap((t) => t.values.map((a) => a.y))) : 1), Fe = f(() => {
if (!w.value) return 1;
const t = Math.min(...A.value.filter((a) => !g.value.includes(a.seriesIndex)).flatMap((a) => a.values.map((l) => l.y)));
return t < 0 ? t : 0;
}), p = f(() => {
const t = $e(
e.value.style.chart.axes.x.scaleMin === null ? Oe.value : e.value.style.chart.axes.x.scaleMin,
e.value.style.chart.axes.x.scaleMax === null ? Ie.value : e.value.style.chart.axes.x.scaleMax,
e.value.style.chart.axes.x.ticks
), a = $e(
e.value.style.chart.axes.y.scaleMin === null ? Fe.value : e.value.style.chart.axes.y.scaleMin,
e.value.style.chart.axes.y.scaleMax === null ? Pe.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: n.value.left + (l - t.min) / (t.max - t.min) * n.value.width,
y1: n.value.top,
y2: n.value.bottom,
value: l
})),
tickY: a.ticks.map((l) => ({
y: n.value.bottom - (l - a.min) / (a.max - a.min) * n.value.height,
x1: n.value.left,
x2: n.value.right,
value: l
}))
};
});
function Xe(t) {
const a = p.value.x.min < 0 ? Math.abs(p.value.x.min) : p.value.x.min > 0 ? -p.value.x.min : 0;
return n.value.left + ((t || 0) + a) / (p.value.x.max + a) * n.value.width;
}
function De(t) {
const a = p.value.y.min < 0 ? Math.abs(p.value.y.min) : p.value.y.min > 0 ? -p.value.y.min : 0;
return n.value.bottom - ((t || 0) + a) / (p.value.y.max + a) * n.value.height;
}
const S = f(() => A.value.filter((t) => !g.value.includes(t.seriesIndex)).map((t, a) => {
const l = t.values.map((o, _) => ({
valueX: o.x,
valueY: o.y,
label: o.label,
x: Xe(o.x),
y: De(o.y),
color: t.color,
seriesName: t.name,
id: Ce()
})), i = l.map((o) => `${o.x},${o.y} `).join("").trim();
return {
...t,
plots: l,
path: `M${i}`
};
}));
function xe(t) {
g.value.includes(t) ? g.value = g.value.filter((a) => a !== t) : g.value.push(t);
}
const pe = f(() => A.value.map((t) => ({
...t,
opacity: g.value.includes(t.seriesIndex) ? 0.5 : 1,
segregate: () => xe(t.seriesIndex),
isSegregated: g.value.includes(t.seriesIndex),
shape: "circle"
}))), Ye = f(() => ({
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 je(t) {
re("selectDatapoint", t);
}
function me(t) {
re("selectLegend", {
...t,
isSegregated: !t.isSegregated,
opacity: t.isSegregated ? 1 : 0.5
});
}
function Be(t) {
R.value = t, ae.value += 1;
}
const Z = c(null);
function Re({ datapoint: t, plotIndex: a, seriesIndex: l }) {
Z.value = { datapoint: t, seriesIndex: l, plotIndex: a, config: e.value, series: A.value }, $.value = t;
const i = e.value.style.chart.tooltip.customFormat;
if (j.value = !1, it(i))
try {
const o = i({
seriesIndex: l,
datapoint: t,
plotIndex: a,
series: A.value,
config: e.value
});
typeof o == "string" && (V.value = o, j.value = !0);
} catch {
console.warn("Custom format cannot be applied."), j.value = !1;
}
if (!j.value) {
let o = "";
o += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};margin-bottom:3px;padding-bottom:6px;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg><span>${t.seriesName}</span></div>`, o += `<div>${t.label}</div>`, o += `<div>${e.value.style.chart.axes.x.name.text || "x"}: ${F(
e.value.style.chart.axes.x.labels.formatter,
t.valueX,
X({
p: e.value.style.chart.axes.x.labels.prefix,
v: t.valueX,
s: e.value.style.chart.axes.x.labels.suffix,
r: e.value.style.chart.axes.x.labels.rounding
})
)}</div>`, o += `<div>${e.value.style.chart.axes.y.name.text || "y"}: ${F(
e.value.style.chart.axes.y.labels.formatter,
t.valueY,
X({
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>`, V.value = `<div>${o}</div>`;
}
G.value = !0;
}
f(() => ({ head: S.value.map((a) => ({
name: a.name,
color: a.color
})) }));
const U = f(() => {
const t = [
e.value.table.columnNames.series,
e.value.table.columnNames.datapoint,
e.value.table.columnNames.x,
e.value.table.columnNames.y
], a = S.value.flatMap((i) => i.plots.map((o) => [
{
color: o.color,
name: o.seriesName
},
o.label,
F(
e.value.style.chart.axes.x.labels.formatter,
o.valueX,
X({
p: e.value.style.chart.axes.x.labels.prefix,
v: o.valueX,
s: e.value.style.chart.axes.x.labels.suffix,
r: e.value.style.chart.axes.x.labels.rounding
})
),
F(
e.value.style.chart.axes.y.labels.formatter,
o.valueY,
X({
p: e.value.style.chart.axes.y.labels.prefix,
v: o.valueY,
s: e.value.style.chart.axes.y.labels.suffix,
r: e.value.style.chart.axes.y.labels.rounding
})
)
])), l = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
};
return {
head: t,
body: a,
config: l,
colNames: t
};
});
function ge() {
qe(() => {
const t = [
[e.value.table.columnNames.series],
[e.value.table.columnNames.datapoint],
[e.value.table.columnNames.x],
[e.value.table.columnNames.y]
], a = S.value.flatMap((o) => o.plots.map((_) => [
[_.seriesName],
[_.label],
[_.valueX],
[_.valueY]
])), l = [
[e.value.style.chart.title.text],
[e.value.style.chart.title.subtitle.text],
t
].concat(a), i = nt(l);
ut({
csvContent: i,
title: e.value.style.chart.title.text || "vue-ui-history-plot"
});
});
}
const W = c(!1);
function J() {
W.value = !W.value;
}
function be() {
C.value.showTable = !C.value.showTable;
}
function ke() {
C.value.showTooltip = !C.value.showTooltip;
}
function Ue() {
return S.value;
}
return Te({
getData: Ue,
generatePdf: de,
generateCsv: ge,
generateImage: fe,
toggleTable: be,
toggleTooltip: ke,
toggleAnnotator: J
}), (t, a) => (s(), r("div", {
id: `history_plot_${Y.value}`,
ref_key: "historyPlotChart",
ref: D,
class: I({ "vue-ui-history-plot": !0, "vue-data-ui-wrapper-fullscreen": R.value }),
style: M(`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[3] || (a[3] = () => h(ie)(!0)),
onMouseleave: a[4] || (a[4] = () => h(ie)(!1))
}, [
x(t.$slots, "userConfig", {}, void 0, !0),
e.value.userOptions.buttons.annotator ? (s(), z(mt, {
key: 0,
svgRef: h(ve),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: W.value,
onClose: J
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : v("", !0),
ze.value ? (s(), r("div", {
key: 1,
ref_key: "noTitle",
ref: se,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : v("", !0),
e.value.style.chart.title.text ? (s(), r("div", {
key: 2,
ref_key: "chartTitle",
ref: K,
class: "vue-ui-xy-title",
style: M(`font-family:${e.value.style.fontFamily}`)
}, [
(s(), z(dt, {
key: `title_${Q.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)) : v("", !0),
e.value.userOptions.show && w.value && (h(ce) || h(q)) ? (s(), z(vt, {
ref: "details",
key: `user_option_${ae.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: h(he),
isImaging: h(ye),
uid: Y.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: R.value,
chartElement: D.value,
position: e.value.userOptions.position,
isTooltip: C.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: W.value,
onToggleFullscreen: Be,
onGeneratePdf: h(de),
onGenerateCsv: ge,
onGenerateImage: h(fe),
onToggleTable: be,
onToggleTooltip: ke,
onToggleAnnotator: J,
style: M({
visibility: h(ce) ? h(q) ? "visible" : "hidden" : "visible"
})
}, Ge({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: m(({ isOpen: l, color: i }) => [
x(t.$slots, "menuIcon", O(P({ isOpen: l, color: i })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: m(() => [
x(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: m(() => [
x(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: m(() => [
x(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: m(() => [
x(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: m(() => [
x(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: m(({ toggleFullscreen: l, isFullscreen: i }) => [
x(t.$slots, "optionFullscreen", O(P({ toggleFullscreen: l, isFullscreen: i })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: m(({ toggleAnnotator: l, isAnnotator: i }) => [
x(t.$slots, "optionAnnotator", O(P({ 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", "onGeneratePdf", "onGenerateImage", "style"])) : v("", !0),
w.value ? (s(), r("svg", {
key: 4,
ref_key: "svgRef",
ref: ve,
xmlns: h(tt),
viewBox: `0 0 ${d.value.width < 0 ? 0.1 : d.value.width} ${d.value.height < 0 ? 0.1 : d.value.height}`,
style: M(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
we(ht),
t.$slots["chart-background"] ? (s(), r("foreignObject", {
key: 0,
x: n.value.left,
y: n.value.top,
width: n.value.width <= 0 ? 10 : n.value.width,
height: n.value.height <= 0 ? 10 : n.value.height,
style: {
pointerEvents: "none"
}
}, [
x(t.$slots, "chart-background", {}, void 0, !0)
], 8, At)) : v("", !0),
e.value.style.chart.plots.gradient.show ? (s(), r("defs", Tt, [
(s(!0), r(b, null, k(S.value, (l, i) => (s(), r("radialGradient", {
id: `gradient_${i}_${Y.value}`,
fy: "30%"
}, [
T("stop", {
offset: "10%",
"stop-color": h(lt)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, St),
T("stop", {
offset: "90%",
"stop-color": h(at)(l.color, 0.1)
}, null, 8, zt),
T("stop", {
offset: "100%",
"stop-color": l.color
}, null, 8, Nt)
], 8, Lt))), 256))
])) : v("", !0),
e.value.style.chart.grid.verticalLines.show ? (s(), r("g", It, [
(s(!0), r(b, null, k(p.value.tickX, (l) => (s(), r("line", {
x1: l.x,
x2: l.x,
y1: l.y1,
y2: l.y2,
stroke: e.value.style.chart.grid.verticalLines.stroke,
"stroke-width": e.value.style.chart.grid.verticalLines.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Ot))), 256))
])) : v("", !0),
e.value.style.chart.axes.y.labels.show ? (s(), r("g", Pt, [
(s(!0), r(b, null, k(p.value.tickY, (l) => (s(), r("text", {
x: n.value.left + e.value.style.chart.axes.y.labels.offsetX - 4,
y: l.y + u.value.yAxisLabels / 3,
fill: e.value.style.chart.axes.y.labels.color,
"font-size": u.value.yAxisLabels,
"text-anchor": "end"
}, L(h(F)(
e.value.style.chart.axes.y.labels.formatter,
l.value,
h(X)({
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, Ft))), 256))
])) : v("", !0),
e.value.style.chart.axes.y.name.text ? (s(), r("text", {
key: 4,
transform: `translate(${e.value.style.chart.axes.y.name.offsetX + u.value.yAxisName}, ${d.value.height / 2 + e.value.style.chart.axes.y.name.offsetY}), rotate(-90)`,
"font-size": u.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"
}, L(e.value.style.chart.axes.y.name.text), 9, Xt)) : v("", !0),
e.value.style.chart.grid.horizontalLines.show ? (s(), r("g", Dt, [
(s(!0), r(b, null, k(p.value.tickY, (l) => (s(), r("line", {
x1: l.x1,
x2: l.x2,
y1: l.y,
y2: l.y,
stroke: e.value.style.chart.grid.horizontalLines.stroke,
"stroke-width": e.value.style.chart.grid.horizontalLines.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Yt))), 256))
])) : v("", !0),
e.value.style.chart.axes.x.labels.show ? (s(), r("g", jt, [
(s(!0), r(b, null, k(p.value.tickX, (l) => (s(), r("text", {
transform: `translate(${l.x}, ${n.value.bottom + e.value.style.chart.axes.x.labels.offsetY + u.value.xAxisLabels}), rotate(${e.value.style.chart.axes.x.labels.rotation})`,
fill: e.value.style.chart.axes.x.labels.color,
"font-size": u.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"
}, L(h(F)(
e.value.style.chart.axes.x.labels.formatter,
l.value,
h(X)({
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, Bt))), 256))
])) : v("", !0),
e.value.style.chart.axes.x.name.text ? (s(), r("text", {
key: 7,
x: d.value.width / 2 + e.value.style.chart.axes.x.name.offsetX,
y: d.value.height + e.value.style.chart.axes.x.name.offsetY,
"font-size": u.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"
}, L(e.value.style.chart.axes.x.name.text), 9, Rt)) : v("", !0),
e.value.style.chart.grid.xAxis.show ? (s(), r("line", {
key: 8,
x1: n.value.left,
x2: n.value.left + n.value.width,
y1: n.value.bottom,
y2: n.value.bottom,
stroke: e.value.style.chart.grid.xAxis.stroke,
"stroke-width": e.value.style.chart.grid.xAxis.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Ut)) : v("", !0),
e.value.style.chart.grid.yAxis.show ? (s(), r("line", {
key: 9,
x1: n.value.left,
x2: n.value.left,
y1: n.value.top,
y2: n.value.bottom,
stroke: e.value.style.chart.grid.yAxis.stroke,
"stroke-width": e.value.style.chart.grid.yAxis.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Wt)) : v("", !0),
(s(!0), r(b, null, k(S.value, (l, i) => (s(), r("g", null, [
e.value.style.chart.paths.show ? (s(), r("g", {
key: 0,
style: M({
opacity: $.value === null ? 1 : 0.3
})
}, [
T("path", {
d: l.path,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.paths.strokeWidth + 4,
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: I({ animated: e.value.useCssAnimation })
}, null, 10, Ht),
T("path", {
d: l.path,
stroke: e.value.style.chart.paths.useSerieColor ? l.color : e.value.style.chart.paths.stroke,
"stroke-width": e.value.style.chart.paths.strokeWidth,
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: I({ animated: e.value.useCssAnimation })
}, null, 10, Et)
], 4)) : v("", !0),
(s(!0), r(b, null, k(l.plots, (o) => (s(), r("circle", {
cx: o.x,
cy: o.y,
fill: e.value.style.chart.backgroundColor,
r: u.value.plots,
stroke: "none"
}, null, 8, Gt))), 256)),
(s(!0), r(b, null, k(l.plots, (o) => (s(), r("circle", {
cx: o.x,
cy: o.y,
fill: e.value.style.chart.plots.gradient.show ? `url(#gradient_${i}_${Y.value})` : o.color,
r: u.value.plots,
stroke: e.value.style.chart.plots.stroke,
"stroke-width": e.value.style.chart.plots.strokeWidth,
class: I({ animated: e.value.useCssAnimation }),
style: M({
opacity: $.value === null || $.value.id === o.id ? 1 : 0.3,
transition: "opacity 0.2s ease-in-out"
})
}, null, 14, Vt))), 256)),
e.value.style.chart.plots.labels.show ? (s(), r("g", qt, [
(s(!0), r(b, null, k(l.plots, (o) => (s(), r("text", {
x: o.x + e.value.style.chart.plots.labels.offsetX,
y: o.y + e.value.style.chart.plots.labels.offsetY + u.value.plots + u.value.labels,
"font-size": u.value.labels,
fill: e.value.style.chart.plots.labels.color,
"font-weight": e.value.style.chart.plots.labels.bold ? "bold" : "normal",
"text-anchor": "middle",
class: I({ animated: e.value.useCssAnimation }),
style: M({
opacity: $.value === null || $.value.id === o.id ? 1 : 0.3,
transition: "opacity 0.2s ease-in-out"
})
}, L(o.label), 15, Zt))), 256))
])) : v("", !0),
e.value.style.chart.plots.indexLabels.show ? (s(), r("g", Jt, [
(s(!0), r(b, null, k(l.plots, (o, _) => (s(), r("text", {
x: o.x + e.value.style.chart.plots.indexLabels.offsetX,
y: o.y + e.value.style.chart.plots.indexLabels.offsetY + u.value.indexLabels / 3,
"font-size": u.value.indexLabels,
"font-weight": e.value.style.chart.plots.indexLabels.bold ? "bold" : "normal",
fill: e.value.style.chart.plots.indexLabels.adaptColorToBackground ? h(st)(l.color) : e.value.style.chart.plots.indexLabels.color,
"text-anchor": "middle",
class: I({ animated: e.value.useCssAnimation }),
style: M({
opacity: $.value === null || $.value.id === o.id ? 1 : 0.3,
transition: "opacity 0.2s ease-in-out"
})
}, L(e.value.style.chart.plots.indexLabels.startAtZero ? _ : _ + 1), 15, Kt))), 256))
])) : v("", !0)
]))), 256)),
(s(!0), r(b, null, k(S.value, (l) => (s(), r("g", null, [
(s(!0), r(b, null, k(l.plots, (i, o) => (s(), r("circle", {
cx: i.x,
cy: i.y,
fill: "transparent",
r: u.value.plots,
stroke: "none",
onMouseenter: (_) => Re({
datapoint: i,
plotIndex: o,
seriesIndex: l.seriesIndex
}),
onMouseleave: a[0] || (a[0] = (_) => {
G.value = !1, $.value = null;
}),
onClick: () => je(i)
}, null, 40, Qt))), 256))
]))), 256)),
x(t.$slots, "svg", { svg: d.value }, void 0, !0)
], 12, Mt)) : v("", !0),
t.$slots.watermark ? (s(), r("div", el, [
x(t.$slots, "watermark", O(P({ isPrinting: h(he) || h(ye) })), void 0, !0)
])) : v("", !0),
w.value ? v("", !0) : (s(), z(gt, {
key: 6,
config: {
type: "historyPlot",
style: {
backgroundColor: e.value.style.chart.backgroundColor,
historyPlot: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
T("div", {
ref_key: "chartLegend",
ref: ee
}, [
e.value.style.chart.legend.show && w.value ? (s(), z(yt, {
key: `legend_${te.value}`,
legendSet: pe.value,
config: Ye.value,
onClickMarker: a[1] || (a[1] = ({ legend: l }) => {
xe(l.seriesIndex), me(l);
})
}, {
item: m(({ legend: l, index: i }) => [
T("div", {
onClick: (o) => {
l.segregate(), me(l);
},
style: M(`opacity:${g.value.includes(l.seriesIndex) ? 0.5 : 1}`)
}, L(l.name), 13, tl)
]),
_: 1
}, 8, ["legendSet", "config"])) : x(t.$slots, "legend", {
key: 1,
legend: pe.value
}, void 0, !0)
], 512),
t.$slots.source ? (s(), r("div", {
key: 7,
ref_key: "source",
ref: oe,
dir: "auto"
}, [
x(t.$slots, "source", {}, void 0, !0)
], 512)) : v("", !0),
we(ft, {
show: C.value.showTooltip && G.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: D.value,
content: V.value,
isCustom: j.value,
isFullscreen: R.value
}, {
"tooltip-before": m(() => [
x(t.$slots, "tooltip-before", O(P({ ...Z.value })), void 0, !0)
]),
"tooltip-after": m(() => [
x(t.$slots, "tooltip-after", O(P({ ...Z.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen"]),
w.value ? (s(), z(pt, {
key: 8,
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(() => [
(s(), z(xt, {
key: `table_${le.value}`,
colNames: U.value.colNames,
head: U.value.head,
body: U.value.body,
config: U.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[2] || (a[2] = (l) => C.value.showTable = !1)
}, {
th: m(({ th: l }) => [
T("div", {
innerHTML: l,
style: { display: "flex", "align-items": "center" }
}, null, 8, ll)
]),
td: m(({ td: l }) => [
Ve(L(l.name || l), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : v("", !0)
], 46, $t));
}
}, bl = /* @__PURE__ */ _t(al, [["__scopeId", "data-v-8852c1fd"]]);
export {
bl as default
};