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