vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
917 lines (916 loc) • 38.4 kB
JavaScript
import { defineAsyncComponent as I, computed as p, ref as v, toRefs as mt, watch as ce, shallowRef as Ee, onMounted as gt, onBeforeUnmount as Ge, watchEffect as xt, createElementBlock as n, openBlock as r, unref as i, normalizeStyle as j, normalizeClass as W, createBlock as T, createCommentVNode as c, createVNode as Be, createSlots as kt, withCtx as b, renderSlot as y, normalizeProps as M, guardReactiveProps as F, createElementVNode as k, Fragment as m, renderList as C, toDisplayString as S, mergeProps as wt, createTextVNode as At, nextTick as Lt } from "vue";
import { u as Ct, c as he, t as _t, a as $t, p as O, b as Tt, o as He, f as de, g as Ve, d as St, e as Ue, h as Ot, D as zt, i as Y, X as Pt, k as pe, I as Nt, ab as It, l as Mt, j as Ft, y as Xe, E as Dt, v as Rt, w as Wt, z as Et } from "./index-q-LPw2IT.js";
import { t as je, u as Gt } from "./useResponsive-DfdjqQps.js";
import { u as Bt, B as Ht } from "./useLoading-D7YHNtLX.js";
import { u as Vt } from "./usePrinter-DX7efa1s.js";
import { u as Ye } from "./useNestedProp-04aFeUYu.js";
import { u as Ut } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Xt } from "./useChartAccessibility-9icAAmYg.js";
import { u as jt } from "./useTimeLabelCollider-CIsgDrl9.js";
import Yt from "./img-Ctts6JQb.js";
import { _ as qt } from "./Shape-DHIaJs9G.js";
import Jt from "./Title-B55R8CAZ.js";
import { _ as Kt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"], tl = { key: 1 }, ll = { key: 0 }, al = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ol = { key: 1 }, sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], rl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], nl = ["x", "y", "fill", "font-size"], il = ["transform", "font-size", "fill", "text-anchor"], vl = ["transform", "font-size", "fill", "text-anchor", "innerHTML"], cl = ["fill", "font-size", "transform"], hl = ["fill", "font-size", "x", "y"], dl = ["x1", "x2", "y1", "y2", "stroke"], pl = ["cx", "cy", "fill"], fl = ["cx", "cy", "fill"], yl = ["id"], bl = ["stop-color"], ml = ["stop-color"], gl = ["stop-color"], xl = { key: 0 }, kl = ["x", "y", "font-size", "fill"], wl = {
key: 4,
class: "vue-data-ui-watermark"
}, Al = ["innerHTML"], Ll = {
__name: "vue-ui-strip-plot",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint"],
setup(qe, { expose: Je, emit: Ke }) {
const Qe = I(() => import("./Tooltip-BMOddG-M.js")), Ze = I(() => import("./vue-ui-accordion-D46i_gkB.js")), et = I(() => import("./DataTable-rj9-mAwF.js")), tt = I(() => import("./UserOptions-DVzyjG-W.js")), lt = I(() => import("./PenAndPaper-BJ0hcgsa.js")), at = I(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_strip_plot: ot } = Ct(), g = qe, st = Ke, E = p({
get() {
return !!g.dataset && g.dataset.length;
},
set(t) {
return t;
}
}), q = v(he()), fe = v(0), J = v(!1), K = v(""), A = v(null), ye = v(null), be = v(null), me = v(null), ge = v(!1), xe = v(0), ke = v(0), Q = v(null), Z = v(null), G = v(null), ee = v(null), e = v(oe()), { loading: te, FINAL_DATASET: we, manualLoading: le } = Bt({
...mt(g),
FINAL_CONFIG: e,
prepareConfig: oe,
skeletonDataset: [
{
name: "_",
color: "#DBDBDB",
plots: [
{ name: "_", value: 1 },
{ name: "_", value: 2 },
{ name: "_", value: 3 }
]
},
{
name: "_",
color: "#C4C4C4",
plots: [
{ name: "_", value: 3 },
{ name: "_", value: 5 },
{ name: "_", value: 8 }
]
},
{
name: "_",
color: "#ADADAD",
plots: [
{ name: "_", value: 8 },
{ name: "_", value: 13 },
{ name: "_", value: 21 }
]
},
{
name: "_",
color: "#969696",
plots: [
{ name: "_", value: 21 },
{ name: "_", value: 34 },
{ name: "_", value: 55 }
]
},
{
name: "_",
color: "#808080",
plots: [
{ name: "_", value: 55 },
{ name: "_", value: 89 },
{ name: "_", value: 144 }
]
}
],
skeletonConfig: _t({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
padding: {
top: 24,
left: 24,
right: 24,
bottom: 24
},
grid: {
stroke: "#6A6A6A",
horizontalGrid: {
stroke: "#6A6A6A"
},
verticalGrid: {
stroke: "#6A6A6A"
}
},
plots: {
stroke: "#6A6A6A"
},
labels: {
bestPlotLabel: { show: !1 },
axis: {
xLabel: "",
yLabel: ""
},
xAxisLabels: { show: !1 },
yAxisLabels: { show: !1 }
}
}
}
}
})
}), { userOptionsVisible: ae, setUserOptionsVisibility: Ae, keepUserOptionState: Le } = Ut({ config: e.value }), { svgRef: Ce } = Xt({ config: e.value.style.chart.title });
function oe() {
const t = Ye({
userConfig: g.config,
defaultConfig: ot
});
return t.theme ? {
...Ye({
userConfig: Tt.vue_ui_strip_plot[t.theme] || g.config,
defaultConfig: t
}),
customPalette: $t[t.theme] || O
} : t;
}
ce(() => g.config, async (t) => {
te.value || (e.value = oe()), ae.value = !e.value.userOptions.showOnChartHover, _e(), xe.value += 1, ke.value += 1, d.value.dataLabels.show = e.value.style.chart.labels.bestPlotLabel.show, d.value.showTable = e.value.table.show, d.value.showTooltip = e.value.style.chart.tooltip.show, _.value = e.value.style.chart.width, w.value = e.value.style.chart.height, R.value = e.value.style.chart.plots.radius;
}, { deep: !0 }), ce(() => g.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (le.value = !1);
}, { deep: !0 });
const L = Ee(null), z = Ee(null);
gt(() => {
_e();
});
const se = p(() => !!e.value.debug);
function _e() {
if (He(g.dataset) ? (de({
componentName: "VueUiStripPlot",
type: "dataset",
debug: se.value
}), le.value = !0) : g.dataset.forEach((t, a) => {
Ve({
datasetObject: t,
requiredAttributes: ["name", "plots"]
}).forEach((l) => {
E.value = !1, de({
componentName: "VueUiStripPlot",
type: "datasetSerieAttribute",
property: l,
index: a,
debug: se.value
});
}), t.plots && t.plots.forEach((l, s) => {
Ve({
datasetObject: l,
requiredAttributes: ["name", "value"]
}).forEach((u) => {
E.value = !1, de({
componentName: "VueUiStripPlot",
type: "datasetSerieAttribute",
property: u,
index: `${a},${s}`,
debug: se.value
});
});
});
}), He(g.dataset) || (le.value = e.value.loading), e.value.responsive) {
const t = je(() => {
const { width: a, height: l } = Gt({
chart: A.value,
title: e.value.style.chart.title.text ? ye.value : null,
source: be.value,
noTitle: me.value
});
requestAnimationFrame(() => {
ut.value = l, _.value = Math.max(0.1, a), w.value = Math.max(0.1, l - 12), e.value.responsiveProportionalSizing ? R.value = Dt({
relator: Math.min(l, a),
adjuster: 600,
source: e.value.style.chart.plots.radius,
threshold: 6,
fallback: 6
}) : R.value = e.value.style.chart.plots.radius;
});
});
L.value && (z.value && L.value.unobserve(z.value), L.value.disconnect()), L.value = new ResizeObserver(t), z.value = A.value.parentNode, L.value.observe(z.value);
}
ge.value = !0, setTimeout(() => {
D.value = !1;
}, vt.value * 50);
}
Ge(() => {
L.value && (z.value && L.value.unobserve(z.value), L.value.disconnect());
});
const { isPrinting: $e, isImaging: Te, generatePdf: Se, generateImage: Oe } = Vt({
elementId: `strip-plot_${q.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-strip-plot",
options: e.value.userOptions.print
}), rt = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), ze = p(() => St(e.value.customPalette)), D = v(e.value.useCssAnimation), P = v({
top: e.value.style.chart.padding.top,
bottom: e.value.style.chart.padding.bottom,
left: e.value.style.chart.padding.left,
right: e.value.style.chart.padding.right
}), _ = v(e.value.style.chart.width), w = v(e.value.style.chart.height), ut = v(e.value.style.chart.height), R = v(e.value.style.chart.plots.radius), d = v({
showTable: e.value.table.show,
dataLabels: {
show: e.value.style.chart.labels.bestPlotLabel.show
},
showTooltip: e.value.style.chart.tooltip.show
});
ce(e, () => {
d.value = {
showTable: e.value.table.show,
dataLabels: {
show: e.value.style.chart.labels.bestPlotLabel.show
},
showTooltip: e.value.style.chart.tooltip.show
}, _.value = e.value.style.chart.width, w.value = e.value.style.chart.height, R.value = e.value.style.chart.plots.radius;
}, { immediate: !0 });
const re = p(() => Math.min(R.value, o.value.stripWidth / 2 * 0.9));
function nt() {
let t = 0;
ee.value && (t = Array.from(ee.value.querySelectorAll("text")).reduce((s, u) => {
const f = u.getComputedTextLength();
return f > s ? f : s;
}, 0));
const a = Z.value ? Z.value.getBoundingClientRect().width : 0;
return t + a + (a ? 24 : 0);
}
const ue = v(0), it = je((t) => {
ue.value = t;
}, 100);
xt((t) => {
const a = G.value;
if (!a) return;
const l = new ResizeObserver((s) => {
it(s[0].contentRect.height);
});
l.observe(a), t(() => l.disconnect());
}), Ge(() => {
ue.value = 0;
});
const Pe = p(() => {
let t = 0;
Q.value && (t = Q.value.getBBox().height + e.value.style.chart.labels.axis.fontSize / 3 + 12 + e.value.style.chart.labels.axis.xLabelOffsetY);
let a = 0;
return G.value && (a = ue.value + 12), t + a;
}), o = p(() => {
const t = nt(), a = _.value - t - e.value.style.chart.padding.left - e.value.style.chart.padding.right - e.value.style.chart.labels.axis.yLabelOffsetX - 5;
return {
left: P.value.left + t + e.value.style.chart.labels.axis.yLabelOffsetX + 5,
right: _.value - P.value.right,
top: P.value.top,
bottom: w.value - P.value.bottom - Pe.value,
width: a,
height: w.value - P.value.top - P.value.bottom - Pe.value,
stripWidth: a / we.value.length,
absoluteHeight: w.value
};
}), B = p(() => we.value.map((t, a) => {
const l = he();
return {
...t,
id: l,
color: t.color ? Ue(t.color) : ze.value[a] || O[a] || O[a % O.length],
plots: t.plots.map((s, u) => ({
...s,
value: Ot(s.value),
parentId: l,
parentName: t.name,
parentIndex: a,
plotIndex: u,
color: t.color ? Ue(t.color) : ze.value[a] || O[a] || O[a % O.length],
id: he()
})).sort((s, u) => s.value - u.value)
};
})), x = p(() => (B.value || []).map((t, a) => ({
...t,
plots: t.plots.map((l) => ({
...l,
x: o.value.left + (a + 1) * o.value.stripWidth - o.value.stripWidth / 2
}))
}))), vt = p(() => Math.max(...x.value.map((t) => t.plots.length))), ne = p(() => {
const t = x.value.flatMap((a) => a.plots.map((l) => l.value));
return {
max: Math.max(...t),
min: Math.min(...t)
};
}), $ = p(() => zt(ne.value.min < 0 ? ne.value.min : 0, ne.value.max, e.value.style.chart.grid.scaleSteps)), ct = p(() => (x.value || []).map((t, a) => ({
...t,
plots: t.plots.map((l) => ({
...l,
y: o.value.bottom - (l.value + Math.abs($.value.min)) / ($.value.max + Math.abs($.value.min)) * o.value.height
}))
}))), Ne = p(() => $.value.ticks.map((t) => ({
y: o.value.bottom - o.value.height * ((t + Math.abs($.value.min)) / ($.value.max + Math.abs($.value.min))),
x1: o.value.left,
x2: o.value.right,
value: t
}))), ie = v(null), h = v(null);
function ht({ datapoint: t, seriesIndex: a }) {
J.value = !1, h.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
}
function dt({ datapoint: t, seriesIndex: a }) {
st("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
}
function pt({ datapoint: t, seriesIndex: a }) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), ie.value = { datapoint: t, seriesIndex: a, config: e.value, series: B.value }, J.value = !0, h.value = t;
const l = e.value.style.chart.tooltip.customFormat;
if (Xe(l) && Et(() => l({
seriesIndex: a,
datapoint: t,
series: B.value,
config: e.value
})))
K.value = l({
seriesIndex: a,
datapoint: t,
series: B.value,
config: e.value
});
else {
let s = "";
s += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${e.value.style.chart.plots.gradient.show ? `url(#${t.parentId})` : t.color}"/></svg>${t.name}</div>`, s += `<div>${pe(
e.value.style.chart.labels.formatter,
t.value,
Y({
p: e.value.style.chart.labels.prefix,
v: t.value,
s: e.value.style.chart.labels.suffix,
r: e.value.style.chart.tooltip.roundingValue
}),
{ datapoint: t, seriesIndex: a }
)}</div>`, K.value = `<div>${s}</div>`;
}
}
const H = p(() => {
const t = x.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((s, u) => u.value - s.value).map((s) => ({
name: `${l.name} - ${s.name}`,
color: s.color
}))), a = x.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((s, u) => u.value - s.value).map((s) => s.value));
return { head: t, body: a };
});
function Ie(t = null) {
Lt(() => {
const a = H.value.head.map((u, f) => [[
u.name
], [H.value.body[f]]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value]]].concat(a), s = Rt(l);
t ? t(s) : Wt({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-strip-plot" });
});
}
const V = p(() => {
const t = [
e.value.table.columnNames.series,
e.value.table.columnNames.value
], a = H.value.head.map((u, f) => {
const X = Y({
p: e.value.style.chart.labels.prefix,
v: H.value.body[f],
s: e.value.style.chart.labels.suffix,
r: e.value.table.td.roundingValue
});
return [
{
color: u.color,
name: u.name
},
X
];
}), 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 {
colNames: [
e.value.table.columnNames.series,
e.value.table.columnNames.value
],
head: t,
body: a,
config: l
};
}), N = v(!1);
function Me(t) {
N.value = t, fe.value += 1;
}
function ft() {
return x.value;
}
function Fe() {
d.value.showTable = !d.value.showTable;
}
function De() {
d.value.dataLabels.show = !d.value.dataLabels.show;
}
function Re() {
d.value.showTooltip = !d.value.showTooltip;
}
const U = v(!1);
function ve() {
U.value = !U.value;
}
async function yt({ scale: t = 2 } = {}) {
if (!A.value) return;
const { width: a, height: l } = A.value.getBoundingClientRect(), s = a / l, { imageUri: u, base64: f } = await Yt({ domElement: A.value, base64: !0, img: !0, scale: t });
return {
imageUri: u,
base64: f,
title: e.value.style.chart.title.text,
width: a,
height: l,
aspectRatio: s
};
}
const We = p(() => x.value.map((t) => t.name)), bt = v({ start: 0, end: x.value.length });
return jt({
timeLabelsEls: G,
timeLabels: We,
slicer: bt,
configRef: e,
rotationPath: ["style", "chart", "labels", "xAxisLabels", "rotation"],
autoRotatePath: ["style", "chart", "labels", "xAxisLabels", "autoRotate", "enable"],
isAutoSize: !1,
width: _,
height: w,
targetClass: ".vue-ui-strip-plot-category-name",
rotation: e.value.style.chart.labels.xAxisLabels.autoRotate.angle
}), Je({
getData: ft,
getImage: yt,
generatePdf: Se,
generateCsv: Ie,
generateImage: Oe,
toggleTable: Fe,
toggleLabels: De,
toggleTooltip: Re,
toggleAnnotator: ve,
toggleFullscreen: Me
}), (t, a) => (r(), n("div", {
ref_key: "stripPlotChart",
ref: A,
class: W(`vue-ui-strip-plot ${N.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
style: j(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
id: `strip-plot_${q.value}`,
onMouseenter: a[1] || (a[1] = () => i(Ae)(!0)),
onMouseleave: a[2] || (a[2] = () => i(Ae)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), T(i(lt), {
key: 0,
svgRef: i(Ce),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: U.value,
onClose: ve
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : c("", !0),
rt.value ? (r(), n("div", {
key: 1,
ref_key: "noTitle",
ref: me,
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: ye,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(r(), T(Jt, {
key: `title_${xe.value}`,
config: {
title: {
cy: "donut-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "donut-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : c("", !0),
e.value.userOptions.show && E.value && (i(Le) || i(ae)) ? (r(), T(i(tt), {
ref: "details",
key: `user_option_${fe.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: i($e),
isImaging: i(Te),
uid: q.value,
hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
hasPdf: e.value.userOptions.buttons.pdf,
hasXls: e.value.userOptions.buttons.csv,
hasImg: e.value.userOptions.buttons.img,
hasTable: e.value.userOptions.buttons.table,
hasLabel: e.value.userOptions.buttons.labels,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isTooltip: d.value.showTooltip,
isFullscreen: N.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: A.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: U.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: Me,
onGeneratePdf: i(Se),
onGenerateCsv: Ie,
onGenerateImage: i(Oe),
onToggleTable: Fe,
onToggleLabels: De,
onToggleTooltip: Re,
onToggleAnnotator: ve,
style: j({
visibility: i(Le) ? i(ae) ? "visible" : "hidden" : "visible"
})
}, kt({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: b(({ isOpen: l, color: s }) => [
y(t.$slots, "menuIcon", M(F({ isOpen: l, color: s })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: b(() => [
y(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: b(() => [
y(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: b(() => [
y(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: b(() => [
y(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: b(() => [
y(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionLabels ? {
name: "optionLabels",
fn: b(() => [
y(t.$slots, "optionLabels", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: b(({ toggleFullscreen: l, isFullscreen: s }) => [
y(t.$slots, "optionFullscreen", M(F({ toggleFullscreen: l, isFullscreen: s })), void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: b(({ toggleAnnotator: l, isAnnotator: s }) => [
y(t.$slots, "optionAnnotator", M(F({ toggleAnnotator: l, isAnnotator: s })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
(r(), n("svg", {
ref_key: "svgRef",
ref: Ce,
xmlns: i(Pt),
class: W({ "vue-data-ui-fullscreen--on": N.value, "vue-data-ui-fulscreen--off": !N.value }),
viewBox: `0 0 ${_.value} ${w.value}`,
style: j(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};`)
}, [
Be(i(at)),
t.$slots["chart-background"] ? (r(), n("foreignObject", {
key: 0,
x: o.value.left,
y: o.value.top,
width: Math.max(0.1, o.value.width),
height: Math.max(0.1, o.value.height),
style: {
pointerEvents: "none"
}
}, [
y(t.$slots, "chart-background", {}, void 0, !0)
], 8, el)) : c("", !0),
e.value.style.chart.grid.show ? (r(), n("g", tl, [
e.value.style.chart.grid.horizontalGrid.show ? (r(), n("g", ll, [
(r(!0), n(m, null, C(Ne.value, (l) => (r(), n("line", {
x1: l.x1,
x2: l.x2,
y1: l.y,
y2: l.y,
stroke: e.value.style.chart.grid.horizontalGrid.stroke,
"stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
"stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray,
"stroke-linecap": "round"
}, null, 8, al))), 256))
])) : c("", !0),
e.value.style.chart.grid.verticalGrid.show ? (r(), n("g", ol, [
(r(!0), n(m, null, C(x.value, (l, s) => (r(), n("line", {
x1: o.value.left + (s + 1) * o.value.stripWidth,
x2: o.value.left + (s + 1) * o.value.stripWidth,
y1: o.value.top,
y2: o.value.bottom,
stroke: e.value.style.chart.grid.verticalGrid.stroke,
"stroke-width": e.value.style.chart.grid.verticalGrid.strokeWidth,
"stroke-dasharray": e.value.style.chart.grid.verticalGrid.strokeDasharray,
"stroke-linecap": "round"
}, null, 8, sl))), 256))
])) : c("", !0),
k("line", {
x1: o.value.left,
x2: o.value.left,
y1: o.value.top,
y2: o.value.bottom,
stroke: e.value.style.chart.grid.stroke,
"stroke-width": e.value.style.chart.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, rl),
k("line", {
x1: o.value.left,
x2: o.value.right,
y1: o.value.bottom,
y2: o.value.bottom,
stroke: e.value.style.chart.grid.stroke,
"stroke-width": e.value.style.chart.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, ul)
])) : c("", !0),
e.value.style.chart.labels.yAxisLabels.show ? (r(), n("g", {
key: 2,
ref_key: "scaleLabels",
ref: ee
}, [
(r(!0), n(m, null, C(Ne.value, (l, s) => (r(), n("text", {
x: l.x1 + e.value.style.chart.labels.yAxisLabels.offsetX - 5,
y: l.y + e.value.style.chart.labels.yAxisLabels.fontSize / 3,
fill: e.value.style.chart.labels.yAxisLabels.color,
"font-size": e.value.style.chart.labels.yAxisLabels.fontSize,
"text-anchor": "end"
}, S(i(pe)(
e.value.style.chart.labels.formatter,
l.value,
i(Y)({
p: e.value.style.chart.labels.prefix,
v: l.value,
s: e.value.style.chart.labels.suffix,
r: e.value.style.chart.labels.yAxisLabels.rounding
}),
{ datapoint: l, seriesIndex: s }
)), 9, nl))), 256))
], 512)) : c("", !0),
e.value.style.chart.labels.xAxisLabels.show ? (r(), n("g", {
key: 3,
ref_key: "timeLabelsEls",
ref: G
}, [
(r(!0), n(m, null, C(We.value, (l, s) => (r(), n("g", null, [
String(l).includes(`
`) ? (r(), n("text", {
key: 1,
class: "vue-ui-strip-plot-category-name",
transform: `translate(${o.value.left + (s + 1) * o.value.stripWidth - o.value.stripWidth / 2}, ${o.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize * 2 + e.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${e.value.style.chart.labels.xAxisLabels.rotation})`,
"font-size": e.value.style.chart.labels.xAxisLabels.fontSize,
fill: e.value.style.chart.labels.xAxisLabels.color,
"text-anchor": e.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : e.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle",
innerHTML: i(Nt)({
content: i(It)(String(l)),
fontSize: e.value.style.chart.labels.xAxisLabels.fontSize,
fill: e.value.style.chart.labels.xAxisLabels.color,
x: 0,
y: 0
})
}, null, 8, vl)) : (r(), n("text", {
key: 0,
class: "vue-ui-strip-plot-category-name",
transform: `translate(${o.value.left + (s + 1) * o.value.stripWidth - o.value.stripWidth / 2}, ${o.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize * 2 + e.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${e.value.style.chart.labels.xAxisLabels.rotation})`,
"font-size": e.value.style.chart.labels.xAxisLabels.fontSize,
fill: e.value.style.chart.labels.xAxisLabels.color,
"text-anchor": e.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : e.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle"
}, S(String(l)), 9, il))
]))), 256))
], 512)) : c("", !0),
e.value.style.chart.labels.axis.yLabel ? (r(), n("text", {
key: 4,
ref_key: "yAxisLabel",
ref: Z,
fill: e.value.style.chart.labels.axis.color,
"font-size": e.value.style.chart.labels.axis.fontSize,
transform: `translate(${e.value.style.chart.labels.axis.fontSize}, ${o.value.top + o.value.height / 2}) rotate(-90)`,
"text-anchor": "middle"
}, S(e.value.style.chart.labels.axis.yLabel), 9, cl)) : c("", !0),
e.value.style.chart.labels.axis.xLabel ? (r(), n("text", {
key: 5,
ref_key: "xAxisLabel",
ref: Q,
fill: e.value.style.chart.labels.axis.color,
"font-size": e.value.style.chart.labels.axis.fontSize,
x: o.value.left + o.value.width / 2,
y: w.value - e.value.style.chart.labels.axis.fontSize / 3,
"text-anchor": "middle"
}, S(e.value.style.chart.labels.axis.xLabel), 9, hl)) : c("", !0),
h.value ? (r(), n(m, { key: 6 }, [
k("line", {
x1: o.value.left,
x2: o.value.right,
y1: h.value.y,
y2: h.value.y,
stroke: h.value.color,
"stroke-width": 1,
class: W({ "select-circle": e.value.useCssAnimation })
}, null, 10, dl),
k("circle", {
cx: o.value.left,
cy: h.value.y,
r: 3,
fill: h.value.color,
class: W({ "select-circle": e.value.useCssAnimation })
}, null, 10, pl),
k("circle", {
cx: o.value.right,
cy: h.value.y,
r: 3,
fill: h.value.color,
class: W({ "select-circle": e.value.useCssAnimation })
}, null, 10, fl)
], 64)) : c("", !0),
k("defs", null, [
(r(!0), n(m, null, C(x.value, (l) => (r(), n("radialGradient", {
id: l.id,
fy: "30%"
}, [
k("stop", {
offset: "10%",
"stop-color": i(Mt)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, bl),
k("stop", {
offset: "90%",
"stop-color": i(Ft)(l.color, 0.1)
}, null, 8, ml),
k("stop", {
offset: "100%",
"stop-color": l.color
}, null, 8, gl)
], 8, yl))), 256))
]),
(r(!0), n(m, null, C(ct.value, (l, s) => (r(), n(m, null, [
(r(!0), n(m, null, C(l.plots, (u, f) => (r(), T(qt, wt({ ref_for: !0 }, t.$attrs, {
plot: { x: u.x, y: ge.value ? u.y : o.value.top },
radius: h.value && h.value.id === u.id ? re.value * 1.5 : re.value,
shape: e.value.style.chart.plots.shape,
stroke: e.value.style.chart.plots.stroke,
strokeWidth: e.value.style.chart.plots.strokeWidth,
color: e.value.style.chart.plots.gradient.show ? `url(#${l.id})` : l.color,
style: `transition: all 0.2s ease-in-out; opacity:${h.value ? h.value.id === u.id ? 1 : 0.2 : e.value.style.chart.plots.opacity};${D.value ? `transition-delay:${f * 50}ms` : ""}`,
class: { "vue-ui-strip-plot-animated": e.value.useCssAnimation && D.value && !i(te), "vue-ui-strip-plot-select-circle": e.value.useCssAnimation && !D.value },
onMouseenter: (X) => pt({ datapoint: u, seriesIndex: f }),
onMouseleave: (X) => ht({ datapoint: u, seriesIndex: f }),
onClick: (X) => dt({ datapoint: u, seriesIndex: f })
}), null, 16, ["plot", "radius", "shape", "stroke", "strokeWidth", "color", "style", "class", "onMouseenter", "onMouseleave", "onClick"]))), 256)),
d.value.dataLabels.show ? (r(), n("g", xl, [
(r(!0), n(m, null, C(l.plots, (u, f) => (r(), n(m, null, [
f === l.plots.length - 1 || h.value && h.value.id === u.id && !d.value.showTooltip ? (r(), n("text", {
key: 0,
x: u.x,
y: u.y + e.value.style.chart.labels.bestPlotLabel.offsetY - re.value * (h.value && h.value.id === u.id && !d.value.showTooltip ? 2 : 1.5),
"font-size": e.value.style.chart.labels.bestPlotLabel.fontSize,
fill: e.value.style.chart.labels.bestPlotLabel.color,
"text-anchor": "middle",
style: j(`opacity:${e.value.useCssAnimation && D.value ? 0 : 1};transition:opacity 0.2s ease-in;`)
}, S(u.name) + " " + S(e.value.style.chart.labels.bestPlotLabel.showValue ? i(pe)(
e.value.style.chart.labels.formatter,
u.value,
i(Y)({
p: `(${e.value.style.chart.labels.prefix}`,
v: u.value,
s: `${e.value.style.chart.labels.suffix})`,
r: e.value.style.chart.labels.bestPlotLabel.rounding
}),
{ datapoint: u, seriesIndex: f }
) : ""), 13, kl)) : c("", !0)
], 64))), 256))
])) : c("", !0)
], 64))), 256)),
y(t.$slots, "svg", { svg: o.value }, void 0, !0)
], 14, Zt)),
t.$slots.watermark ? (r(), n("div", wl, [
y(t.$slots, "watermark", M(F({ isPrinting: i($e) || i(Te) })), void 0, !0)
])) : c("", !0),
t.$slots.source ? (r(), n("div", {
key: 5,
ref_key: "source",
ref: be,
dir: "auto"
}, [
y(t.$slots, "source", {}, void 0, !0)
], 512)) : c("", !0),
Be(i(Qe), {
show: d.value.showTooltip && J.value,
backgroundColor: e.value.style.chart.tooltip.backgroundColor,
color: e.value.style.chart.tooltip.color,
borderRadius: e.value.style.chart.tooltip.borderRadius,
borderColor: e.value.style.chart.tooltip.borderColor,
borderWidth: e.value.style.chart.tooltip.borderWidth,
fontSize: e.value.style.chart.tooltip.fontSize,
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: K.value,
isFullscreen: N.value,
isCustom: i(Xe)(e.value.style.chart.tooltip.customFormat),
smooth: e.value.style.chart.tooltip.smooth,
backdropFilter: e.value.style.chart.tooltip.backdropFilter
}, {
"tooltip-before": b(() => [
y(t.$slots, "tooltip-before", M(F({ ...ie.value })), void 0, !0)
]),
"tooltip-after": b(() => [
y(t.$slots, "tooltip-after", M(F({ ...ie.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
E.value ? (r(), T(i(Ze), {
key: 6,
hideDetails: "",
config: {
open: d.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: b(() => [
(r(), T(i(et), {
key: `table_${ke.value}`,
colNames: V.value.colNames,
head: V.value.head,
body: V.value.body,
config: V.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[0] || (a[0] = (l) => d.value.showTable = !1)
}, {
th: b(({ th: l }) => [
k("div", {
innerHTML: l,
style: { display: "flex", "align-items": "center" }
}, null, 8, Al)
]),
td: b(({ td: l }) => [
At(S(l.name || l), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : c("", !0),
i(te) ? (r(), T(Ht, { key: 7 })) : c("", !0)
], 46, Qt));
}
}, Rl = /* @__PURE__ */ Kt(Ll, [["__scopeId", "data-v-1a2bfe64"]]);
export {
Rl as default
};