vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,045 lines (1,044 loc) • 46.8 kB
JavaScript
import { defineAsyncComponent as $, computed as h, ref as i, toRefs as Ht, watch as q, shallowRef as Xe, onMounted as Ut, onBeforeUnmount as Ye, watchEffect as Vt, createElementBlock as u, openBlock as r, unref as c, normalizeStyle as J, normalizeClass as R, createBlock as O, createCommentVNode as f, createVNode as ge, withCtx as v, renderSlot as d, normalizeProps as m, guardReactiveProps as C, createSlots as qe, createElementVNode as k, Fragment as x, renderList as T, toDisplayString as S, mergeProps as Je, resolveDynamicComponent as jt, createTextVNode as Ke, nextTick as Xt } from "vue";
import { c as me, t as Yt, i as qt, j as P, o as Qe, g as Ce, l as Ze, k as Jt, m as et, U as Kt, N as Qt, d as K, X as Zt, a as ke, $ as el, au as tl, q as ll, u as al, y as tt, a2 as ol, v as sl, r as rl, _ as nl } from "./lib-2iaAPQ_c.js";
import { t as lt, u as ul } from "./useResponsive-DfdjqQps.js";
import { u as il, a as xe } from "./useNestedProp-2p4Tjzc8.js";
import { u as cl, B as vl } from "./BaseScanner-BMpwQAfz.js";
import { u as dl } from "./usePrinter-ChVMpU2f.js";
import { u as hl } from "./useSvgExport-ByUukOZt.js";
import { u as bl } from "./useThemeCheck-DGJ31Vi5.js";
import { u as fl } from "./useUserOptionState-BIvW1Kz7.js";
import { u as pl } from "./useChartAccessibility-9icAAmYg.js";
import { u as yl } from "./useTimeLabelCollider-CIsgDrl9.js";
import gl from "./img-CqYIrJ8I.js";
import { _ as ml } from "./Shape-12_eh8zD.js";
import Cl from "./Title-DSOZzIrU.js";
import { _ as kl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", grid: { stroke: "#5A5A5A", horizontalGrid: { stroke: "#4A4A4A" }, verticalGrid: { stroke: "#4A4A4A" } }, plots: { stroke: "#1A1A1A" }, labels: { bestPlotLabel: { color: "#CCCCCC" }, axis: { color: "#CCCCCC" }, xAxisLabels: { color: "#CCCCCC" }, yAxisLabels: { color: "#CCCCCC" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, ot = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", grid: { stroke: "#5D4037", horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#FFF8E1" }, labels: { bestPlotLabel: { color: "#424242" }, axis: { color: "#424242" }, xAxisLabels: { color: "#424242" }, yAxisLabels: { color: "#424242" } }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, st = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", grid: { stroke: "#5D4037", horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#1E1E1E" }, labels: { bestPlotLabel: { color: "#BDBDBD" }, axis: { color: "#BDBDBD" }, xAxisLabels: { color: "#BDBDBD" }, yAxisLabels: { color: "#BDBDBD" } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, rt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", grid: { stroke: "#5F6A5F", horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#00FF00" }, labels: { bestPlotLabel: { color: "#AACCAA" }, axis: { color: "#99CC99" }, xAxisLabels: { color: "#99CC99" }, yAxisLabels: { color: "#99CC99" } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, nt = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", grid: { show: !1, horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, plots: { stroke: "#fbfafa" }, labels: { bestPlotLabel: { color: "#A0AC94" }, axis: { color: "#A0AC94" }, xAxisLabels: { color: "#A0AC94" }, yAxisLabels: { show: !1, color: "#A0AC94" } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, ut = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", grid: { stroke: "#829C98", horizontalGrid: { stroke: "#829C98" }, verticalGrid: { stroke: "#829C98" } }, plots: { stroke: "#404C5A" }, labels: { bestPlotLabel: { color: "#61747E" }, axis: { color: "#61747E" }, xAxisLabels: { color: "#61747E" }, yAxisLabels: { color: "#61747E" } }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, it = {
default: {},
dark: at,
celebration: ot,
celebrationNight: st,
hack: rt,
zen: nt,
concrete: ut
}, va = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: ot,
celebrationNight: st,
concrete: ut,
dark: at,
default: it,
hack: rt,
zen: nt
}, Symbol.toStringTag, { value: "Module" })), xl = ["id"], Al = ["xmlns", "viewBox"], wl = ["x", "y", "width", "height"], Ll = { key: 1 }, _l = { key: 0 }, $l = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Tl = { key: 1 }, Sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Dl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ol = ["x", "y", "fill", "font-size"], Pl = ["transform", "font-size", "fill", "text-anchor"], zl = ["transform", "font-size", "fill", "text-anchor", "innerHTML"], Bl = ["fill", "font-size", "transform"], El = ["fill", "font-size", "x", "y"], Nl = ["x1", "x2", "y1", "y2", "stroke"], Ml = ["cx", "cy", "fill"], Gl = ["cx", "cy", "fill"], Il = ["id"], Rl = ["stop-color"], Wl = ["stop-color"], Hl = ["stop-color"], Ul = { key: 0 }, Vl = ["x", "y", "font-size", "fill"], jl = {
key: 4,
class: "vue-data-ui-watermark"
}, Xl = ["innerHTML"], Yl = {
__name: "vue-ui-strip-plot",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectDatapoint"],
setup(ct, { expose: vt, emit: dt }) {
const ht = $(() => import("./Tooltip-D0pGX8qz.js")), bt = $(() => import("./BaseIcon-CbVDYv89.js")), ft = $(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), pt = $(() => import("./DataTable-BT_IeqPe.js")), yt = $(() => import("./UserOptions-BQO4YFrn.js")), gt = $(() => import("./PenAndPaper-CvyKWfNl.js")), mt = $(() => import("./PackageVersion-Br3DrrFh.js")), Ct = $(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_strip_plot: kt } = il(), { isThemeValid: xt, warnInvalidTheme: At } = bl(), g = ct, wt = dt, W = h({
get() {
return !!g.dataset && g.dataset.length;
},
set(t) {
return t;
}
}), Q = i(me()), Ae = i(0), Z = i(!1), ee = i(""), w = i(null), we = i(null), Le = i(null), _e = i(null), $e = i(!1), Te = i(0), Se = i(0), N = i(null), te = i(null), le = i(null), ae = i(null), H = i(null), oe = i(null), e = i(ce()), { loading: se, FINAL_DATASET: re, manualLoading: ne } = cl({
...Ht(g),
FINAL_CONFIG: e,
prepareConfig: ce,
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: Yt({
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: ue, setUserOptionsVisibility: De, keepUserOptionState: Fe } = fl({ config: e.value }), { svgRef: ie } = pl({ config: e.value.style.chart.title });
function ce() {
const t = xe({
userConfig: g.config,
defaultConfig: kt
}), a = t.theme;
if (!a) return t;
if (!xt.value(t))
return At(t), t;
const l = xe({
userConfig: it[a] || g.config,
defaultConfig: t
}), o = xe({
userConfig: g.config,
defaultConfig: l
});
return {
...o,
customPalette: o.customPalette.length ? o.customPalette : qt[a] || P
};
}
q(() => g.config, async (t) => {
se.value || (e.value = ce()), ue.value = !e.value.userOptions.showOnChartHover, Oe(), Te.value += 1, Se.value += 1, p.value.dataLabels.show = e.value.style.chart.labels.bestPlotLabel.show, p.value.showTable = e.value.table.show, p.value.showTooltip = e.value.style.chart.tooltip.show, B.value = e.value.style.chart.width, _.value = e.value.style.chart.height, G.value = e.value.style.chart.plots.radius;
}, { deep: !0 }), q(() => g.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (ne.value = !1);
}, { deep: !0 });
const L = Xe(null), z = Xe(null);
Ut(() => {
Oe();
});
const ve = h(() => !!e.value.debug);
function Oe() {
if (Qe(g.dataset) ? (Ce({
componentName: "VueUiStripPlot",
type: "dataset",
debug: ve.value
}), ne.value = !0) : g.dataset.forEach((t, a) => {
Ze({
datasetObject: t,
requiredAttributes: ["name", "plots"]
}).forEach((l) => {
W.value = !1, Ce({
componentName: "VueUiStripPlot",
type: "datasetSerieAttribute",
property: l,
index: a,
debug: ve.value
});
}), t.plots && t.plots.forEach((l, o) => {
Ze({
datasetObject: l,
requiredAttributes: ["name", "value"]
}).forEach((n) => {
W.value = !1, Ce({
componentName: "VueUiStripPlot",
type: "datasetSerieAttribute",
property: n,
index: `${a},${o}`,
debug: ve.value
});
});
});
}), Qe(g.dataset) || (ne.value = e.value.loading), e.value.responsive) {
const t = lt(() => {
const { width: a, height: l } = ul({
chart: w.value,
title: e.value.style.chart.title.text ? we.value : null,
source: Le.value,
noTitle: _e.value
});
requestAnimationFrame(() => {
_t.value = l, B.value = Math.max(0.1, a), _.value = Math.max(0.1, l - 12), e.value.responsiveProportionalSizing ? G.value = ol({
relator: Math.min(l, a),
adjuster: 600,
source: e.value.style.chart.plots.radius,
threshold: 6,
fallback: 6
}) : G.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 = w.value.parentNode, L.value.observe(z.value);
}
$e.value = !0, setTimeout(() => {
M.value = !1;
}, Dt.value * 50);
}
Ye(() => {
L.value && (z.value && L.value.unobserve(z.value), L.value.disconnect());
});
const { isPrinting: Pe, isImaging: ze, generatePdf: Be, generateImage: Ee } = dl({
elementId: `strip-plot_${Q.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-strip-plot",
options: e.value.userOptions.print
}), Lt = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ne = h(() => Jt(e.value.customPalette)), M = i(e.value.useCssAnimation), U = i({
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
}), B = i(e.value.style.chart.width), _ = i(e.value.style.chart.height), _t = i(e.value.style.chart.height), G = i(e.value.style.chart.plots.radius), p = i({
showTable: e.value.table.show,
dataLabels: {
show: e.value.style.chart.labels.bestPlotLabel.show
},
showTooltip: e.value.style.chart.tooltip.show
});
q(e, () => {
p.value = {
showTable: e.value.table.show,
dataLabels: {
show: e.value.style.chart.labels.bestPlotLabel.show
},
showTooltip: e.value.style.chart.tooltip.show
}, B.value = e.value.style.chart.width, _.value = e.value.style.chart.height, G.value = e.value.style.chart.plots.radius;
}, { immediate: !0 });
const de = h(() => Math.min(G.value, s.value.stripWidth / 2 * 0.9));
function $t() {
let t = 0;
oe.value && (t = Array.from(oe.value.querySelectorAll("text")).reduce((o, n) => {
const b = n.getComputedTextLength();
return b > o ? b : o;
}, 0));
const a = ae.value ? ae.value.getBoundingClientRect().width : 0;
return t + a + (a ? 24 : 0);
}
const he = i(0), Tt = lt((t) => {
he.value = t;
}, 100);
Vt((t) => {
const a = H.value;
if (!a) return;
const l = new ResizeObserver((o) => {
Tt(o[0].contentRect.height);
});
l.observe(a), t(() => l.disconnect());
}), Ye(() => {
he.value = 0;
});
const St = h(() => {
let t = 0;
le.value && (t = le.value.getBBox().height + e.value.style.chart.labels.axis.fontSize / 3 + 12 + e.value.style.chart.labels.axis.xLabelOffsetY);
let a = 0;
return H.value && (a = he.value + 12), t + a;
}), s = h(() => {
const t = $t(), a = U.value.left + t + e.value.style.chart.labels.axis.yLabelOffsetX + 5, l = B.value - U.value.right, o = Math.max(0, l - a), n = U.value.top + e.value.style.chart.plots.radius + e.value.style.chart.labels.bestPlotLabel.fontSize, b = _.value - U.value.bottom - St.value, E = Math.max(0, b - n), je = Array.isArray(re.value) ? re.value.length : 0, Wt = je > 0 ? o / je : 0;
return {
left: a,
right: l,
top: n,
bottom: b,
width: o,
height: E,
stripWidth: Wt,
absoluteHeight: _.value
};
}), V = h(() => re.value.map((t, a) => {
const l = me();
return {
...t,
id: l,
color: t.color ? et(t.color) : Ne.value[a] || P[a] || P[a % P.length],
plots: t.plots.map((o, n) => ({
...o,
value: Kt(o.value),
parentId: l,
parentName: t.name,
parentIndex: a,
plotIndex: n,
color: t.color ? et(t.color) : Ne.value[a] || P[a] || P[a % P.length],
id: me()
})).sort((o, n) => o.value - n.value)
};
})), A = h(() => (V.value || []).map((t, a) => ({
...t,
plots: t.plots.map((l) => ({
...l,
x: s.value.left + (a + 1) * s.value.stripWidth - s.value.stripWidth / 2
}))
}))), Dt = h(() => Math.max(...A.value.map((t) => t.plots.length))), be = h(() => {
const t = A.value.flatMap((a) => a.plots.map((l) => l.value));
return {
max: Math.max(...t),
min: Math.min(...t)
};
}), D = h(() => Qt(be.value.min < 0 ? be.value.min : 0, be.value.max, e.value.style.chart.grid.scaleSteps)), Ft = h(() => (A.value || []).map((t, a) => ({
...t,
plots: t.plots.map((l) => ({
...l,
y: s.value.bottom - (l.value + Math.abs(D.value.min)) / (D.value.max + Math.abs(D.value.min)) * s.value.height
}))
}))), Me = h(() => D.value.ticks.map((t) => ({
y: s.value.bottom - s.value.height * ((t + Math.abs(D.value.min)) / (D.value.max + Math.abs(D.value.min))),
x1: s.value.left,
x2: s.value.right,
value: t
}))), fe = i(null), y = i(null);
function Ot({ datapoint: t, seriesIndex: a }) {
Z.value = !1, y.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
}
function Pt({ datapoint: t, seriesIndex: a }) {
wt("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
}
function zt({ datapoint: t, seriesIndex: a }) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), fe.value = { datapoint: t, seriesIndex: a, config: e.value, series: V.value }, Z.value = !0, y.value = t;
const l = e.value.style.chart.tooltip.customFormat;
if (tt(l) && nl(() => l({
seriesIndex: a,
datapoint: t,
series: V.value,
config: e.value
})))
ee.value = l({
seriesIndex: a,
datapoint: t,
series: V.value,
config: e.value
});
else {
let o = "";
o += `<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>`, o += `<div>${ke(
e.value.style.chart.labels.formatter,
t.value,
K({
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>`, ee.value = `<div>${o}</div>`;
}
}
const j = h(() => {
const t = A.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((o, n) => n.value - o.value).map((o) => ({
name: `${l.name} - ${o.name}`,
color: o.color
}))), a = A.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((o, n) => n.value - o.value).map((o) => o.value));
return { head: t, body: a };
});
function pe(t = null) {
Xt(() => {
const a = j.value.head.map((n, b) => [[
n.name
], [j.value.body[b]]]), 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), o = sl(l);
t ? t(o) : rl({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-strip-plot" });
});
}
const X = h(() => {
const t = [
e.value.table.columnNames.series,
e.value.table.columnNames.value
], a = j.value.head.map((n, b) => {
const E = K({
p: e.value.style.chart.labels.prefix,
v: j.value.body[b],
s: e.value.style.chart.labels.suffix,
r: e.value.table.td.roundingValue
});
return [
{
color: n.color,
name: n.name
},
E
];
}), 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
};
}), F = i(!1);
function Ge(t) {
F.value = t, Ae.value += 1;
}
function Bt() {
return A.value;
}
function Ie() {
p.value.showTable = !p.value.showTable;
}
function Re() {
p.value.dataLabels.show = !p.value.dataLabels.show;
}
function We() {
p.value.showTooltip = !p.value.showTooltip;
}
const Y = i(!1);
function ye() {
Y.value = !Y.value;
}
async function Et({ scale: t = 2 } = {}) {
if (!w.value) return;
const { width: a, height: l } = w.value.getBoundingClientRect(), o = a / l, { imageUri: n, base64: b } = await gl({ domElement: w.value, base64: !0, img: !0, scale: t });
return {
imageUri: n,
base64: b,
title: e.value.style.chart.title.text,
width: a,
height: l,
aspectRatio: o
};
}
const He = h(() => A.value.map((t) => t.name)), Nt = i({ start: 0, end: A.value.length });
yl({
timeLabelsEls: H,
timeLabels: He,
slicer: Nt,
configRef: e,
rotationPath: ["style", "chart", "labels", "xAxisLabels", "rotation"],
autoRotatePath: ["style", "chart", "labels", "xAxisLabels", "autoRotate", "enable"],
isAutoSize: !1,
width: B,
height: _,
targetClass: ".vue-ui-strip-plot-category-name",
rotation: e.value.style.chart.labels.xAxisLabels.autoRotate.angle
});
const I = h(() => {
const t = e.value.table.useDialog && !e.value.table.show, a = p.value.showTable;
return {
component: t ? Ct : ft,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: t ? {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
headerColor: e.value.table.th.color,
headerBg: e.value.table.th.backgroundColor,
isFullscreen: F.value,
fullscreenParent: w.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: a,
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
}
}
}
};
});
q(() => p.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && N.value ? N.value.open() : "close" in N.value && N.value.close());
});
function Ue() {
p.value.showTable = !1, te.value && te.value.setTableIconState(!1);
}
const Mt = h(() => e.value.style.chart.backgroundColor), Gt = h(() => e.value.style.chart.title), { exportSvg: It, getSvg: Rt } = hl({
svg: ie,
title: Gt,
backgroundColor: Mt
});
async function Ve({ isCb: t }) {
if (t) {
const { blob: a, url: l, text: o, dataUrl: n } = await Rt();
e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: n });
} else
It();
}
return vt({
getData: Bt,
getImage: Et,
generatePdf: Be,
generateCsv: pe,
generateImage: Ee,
generateSvg: Ve,
toggleTable: Ie,
toggleLabels: Re,
toggleTooltip: We,
toggleAnnotator: ye,
toggleFullscreen: Ge
}), (t, a) => (r(), u("div", {
ref_key: "stripPlotChart",
ref: w,
class: R(`vue-data-ui-component vue-ui-strip-plot ${F.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] = () => c(De)(!0)),
onMouseleave: a[2] || (a[2] = () => c(De)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), O(c(gt), {
key: 0,
svgRef: c(ie),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: Y.value,
onClose: ye
}, {
"annotator-action-close": v(() => [
d(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": v(({ color: l }) => [
d(t.$slots, "annotator-action-color", m(C({ color: l })), void 0, !0)
]),
"annotator-action-draw": v(({ mode: l }) => [
d(t.$slots, "annotator-action-draw", m(C({ mode: l })), void 0, !0)
]),
"annotator-action-undo": v(({ disabled: l }) => [
d(t.$slots, "annotator-action-undo", m(C({ disabled: l })), void 0, !0)
]),
"annotator-action-redo": v(({ disabled: l }) => [
d(t.$slots, "annotator-action-redo", m(C({ disabled: l })), void 0, !0)
]),
"annotator-action-delete": v(({ disabled: l }) => [
d(t.$slots, "annotator-action-delete", m(C({ disabled: l })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
Lt.value ? (r(), u("div", {
key: 1,
ref_key: "noTitle",
ref: _e,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : f("", !0),
e.value.style.chart.title.text ? (r(), u("div", {
key: 2,
ref_key: "chartTitle",
ref: we,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(r(), O(Cl, {
key: `title_${Te.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)) : f("", !0),
e.value.userOptions.show && W.value && (c(Fe) || c(ue)) ? (r(), O(c(yt), {
ref_key: "userOptionsRef",
ref: te,
key: `user_option_${Ae.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: c(Pe),
isImaging: c(ze),
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,
hasSvg: e.value.userOptions.buttons.svg,
hasTable: e.value.userOptions.buttons.table,
hasLabel: e.value.userOptions.buttons.labels,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isTooltip: p.value.showTooltip,
isFullscreen: F.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: w.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: Y.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: Ge,
onGeneratePdf: c(Be),
onGenerateCsv: pe,
onGenerateImage: c(Ee),
onGenerateSvg: Ve,
onToggleTable: Ie,
onToggleLabels: Re,
onToggleTooltip: We,
onToggleAnnotator: ye,
style: J({
visibility: c(Fe) ? c(ue) ? "visible" : "hidden" : "visible"
})
}, qe({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: v(({ isOpen: l, color: o }) => [
d(t.$slots, "menuIcon", m(C({ isOpen: l, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: v(() => [
d(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: v(() => [
d(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: v(() => [
d(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: v(() => [
d(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: v(() => [
d(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: v(() => [
d(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionLabels ? {
name: "optionLabels",
fn: v(() => [
d(t.$slots, "optionLabels", {}, void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: v(({ toggleFullscreen: l, isFullscreen: o }) => [
d(t.$slots, "optionFullscreen", m(C({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
]),
key: "8"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: v(({ toggleAnnotator: l, isAnnotator: o }) => [
d(t.$slots, "optionAnnotator", m(C({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
]),
key: "9"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
(r(), u("svg", {
ref_key: "svgRef",
ref: ie,
xmlns: c(Zt),
class: R({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value }),
viewBox: `0 0 ${B.value} ${_.value}`,
style: J(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};`)
}, [
ge(c(mt)),
t.$slots["chart-background"] ? (r(), u("foreignObject", {
key: 0,
x: s.value.left,
y: s.value.top,
width: Math.max(0.1, s.value.width),
height: Math.max(0.1, s.value.height),
style: {
pointerEvents: "none"
}
}, [
d(t.$slots, "chart-background", {}, void 0, !0)
], 8, wl)) : f("", !0),
e.value.style.chart.grid.show ? (r(), u("g", Ll, [
e.value.style.chart.grid.horizontalGrid.show ? (r(), u("g", _l, [
(r(!0), u(x, null, T(Me.value, (l) => (r(), u("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, $l))), 256))
])) : f("", !0),
e.value.style.chart.grid.verticalGrid.show ? (r(), u("g", Tl, [
(r(!0), u(x, null, T(A.value, (l, o) => (r(), u("line", {
x1: s.value.left + (o + 1) * s.value.stripWidth,
x2: s.value.left + (o + 1) * s.value.stripWidth,
y1: s.value.top,
y2: s.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))
])) : f("", !0),
k("line", {
x1: s.value.left,
x2: s.value.left,
y1: s.value.top,
y2: s.value.bottom,
stroke: e.value.style.chart.grid.stroke,
"stroke-width": e.value.style.chart.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Dl),
k("line", {
x1: s.value.left,
x2: s.value.right,
y1: s.value.bottom,
y2: s.value.bottom,
stroke: e.value.style.chart.grid.stroke,
"stroke-width": e.value.style.chart.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Fl)
])) : f("", !0),
e.value.style.chart.labels.yAxisLabels.show ? (r(), u("g", {
key: 2,
ref_key: "scaleLabels",
ref: oe
}, [
(r(!0), u(x, null, T(Me.value, (l, o) => (r(), u("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(c(ke)(
e.value.style.chart.labels.formatter,
l.value,
c(K)({
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: o }
)), 9, Ol))), 256))
], 512)) : f("", !0),
e.value.style.chart.labels.xAxisLabels.show ? (r(), u("g", {
key: 3,
ref_key: "timeLabelsEls",
ref: H
}, [
(r(!0), u(x, null, T(He.value, (l, o) => (r(), u("g", null, [
String(l).includes(`
`) ? (r(), u("text", {
key: 1,
class: "vue-ui-strip-plot-category-name",
transform: `translate(${s.value.left + (o + 1) * s.value.stripWidth - s.value.stripWidth / 2}, ${s.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: c(el)({
content: c(tl)(String(l)),
fontSize: e.value.style.chart.labels.xAxisLabels.fontSize,
fill: e.value.style.chart.labels.xAxisLabels.color,
x: 0,
y: 0
})
}, null, 8, zl)) : (r(), u("text", {
key: 0,
class: "vue-ui-strip-plot-category-name",
transform: `translate(${s.value.left + (o + 1) * s.value.stripWidth - s.value.stripWidth / 2}, ${s.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, Pl))
]))), 256))
], 512)) : f("", !0),
e.value.style.chart.labels.axis.yLabel ? (r(), u("text", {
key: 4,
ref_key: "yAxisLabel",
ref: ae,
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}, ${s.value.top + s.value.height / 2}) rotate(-90)`,
"text-anchor": "middle"
}, S(e.value.style.chart.labels.axis.yLabel), 9, Bl)) : f("", !0),
e.value.style.chart.labels.axis.xLabel ? (r(), u("text", {
key: 5,
ref_key: "xAxisLabel",
ref: le,
fill: e.value.style.chart.labels.axis.color,
"font-size": e.value.style.chart.labels.axis.fontSize,
x: s.value.left + s.value.width / 2,
y: _.value - e.value.style.chart.labels.axis.fontSize / 3,
"text-anchor": "middle"
}, S(e.value.style.chart.labels.axis.xLabel), 9, El)) : f("", !0),
y.value ? (r(), u(x, { key: 6 }, [
k("line", {
x1: s.value.left,
x2: s.value.right,
y1: y.value.y,
y2: y.value.y,
stroke: y.value.color,
"stroke-width": 1,
class: R({ "select-circle": e.value.useCssAnimation })
}, null, 10, Nl),
k("circle", {
cx: s.value.left,
cy: y.value.y,
r: 3,
fill: y.value.color,
class: R({ "select-circle": e.value.useCssAnimation })
}, null, 10, Ml),
k("circle", {
cx: s.value.right,
cy: y.value.y,
r: 3,
fill: y.value.color,
class: R({ "select-circle": e.value.useCssAnimation })
}, null, 10, Gl)
], 64)) : f("", !0),
k("defs", null, [
(r(!0), u(x, null, T(A.value, (l) => (r(), u("radialGradient", {
id: l.id,
fy: "30%"
}, [
k("stop", {
offset: "10%",
"stop-color": c(ll)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
}, null, 8, Rl),
k("stop", {
offset: "90%",
"stop-color": c(al)(l.color, 0.1)
}, null, 8, Wl),
k("stop", {
offset: "100%",
"stop-color": l.color
}, null, 8, Hl)
], 8, Il))), 256))
]),
(r(!0), u(x, null, T(Ft.value, (l, o) => (r(), u(x, null, [
(r(!0), u(x, null, T(l.plots, (n, b) => (r(), O(ml, Je({ ref_for: !0 }, t.$attrs, {
plot: { x: n.x, y: $e.value ? n.y : s.value.top },
radius: y.value && y.value.id === n.id ? de.value * 1.5 : de.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:${y.value ? y.value.id === n.id ? 1 : 0.2 : e.value.style.chart.plots.opacity};${M.value ? `transition-delay:${b * 50}ms` : ""}`,
class: { "vue-ui-strip-plot-animated": e.value.useCssAnimation && M.value && !c(se), "vue-ui-strip-plot-select-circle": e.value.useCssAnimation && !M.value },
onMouseenter: (E) => zt({ datapoint: n, seriesIndex: b }),
onMouseleave: (E) => Ot({ datapoint: n, seriesIndex: b }),
onClick: (E) => Pt({ datapoint: n, seriesIndex: b })
}), null, 16, ["plot", "radius", "shape", "stroke", "strokeWidth", "color", "style", "class", "onMouseenter", "onMouseleave", "onClick"]))), 256)),
p.value.dataLabels.show ? (r(), u("g", Ul, [
(r(!0), u(x, null, T(l.plots, (n, b) => (r(), u(x, null, [
b === l.plots.length - 1 || y.value && y.value.id === n.id && !p.value.showTooltip ? (r(), u("text", {
key: 0,
x: n.x,
y: n.y + e.value.style.chart.labels.bestPlotLabel.offsetY - de.value * (y.value && y.value.id === n.id && !p.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 && M.value ? 0 : 1};transition:opacity 0.2s ease-in;`)
}, S(n.name) + " " + S(e.value.style.chart.labels.bestPlotLabel.showValue ? c(ke)(
e.value.style.chart.labels.formatter,
n.value,
c(K)({
p: `(${e.value.style.chart.labels.prefix}`,
v: n.value,
s: `${e.value.style.chart.labels.suffix})`,
r: e.value.style.chart.labels.bestPlotLabel.rounding
}),
{ datapoint: n, seriesIndex: b }
) : ""), 13, Vl)) : f("", !0)
], 64))), 256))
])) : f("", !0)
], 64))), 256)),
d(t.$slots, "svg", { svg: s.value }, void 0, !0)
], 14, Al)),
t.$slots.watermark ? (r(), u("div", jl, [
d(t.$slots, "watermark", m(C({ isPrinting: c(Pe) || c(ze) })), void 0, !0)
])) : f("", !0),
t.$slots.source ? (r(), u("div", {
key: 5,
ref_key: "source",
ref: Le,
dir: "auto"
}, [
d(t.$slots, "source", {}, void 0, !0)
], 512)) : f("", !0),
ge(c(ht), {
show: p.value.showTooltip && Z.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: w.value,
content: ee.value,
isFullscreen: F.value,
isCustom: c(tt)(e.value.style.chart.tooltip.customFormat),
smooth: e.value.style.chart.tooltip.smooth,
backdropFilter: e.value.style.chart.tooltip.backdropFilter,
smoothForce: e.value.style.chart.tooltip.smoothForce,
smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
}, {
"tooltip-before": v(() => [
d(t.$slots, "tooltip-before", m(C({ ...fe.value })), void 0, !0)
]),
"tooltip-after": v(() => [
d(t.$slots, "tooltip-after", m(C({ ...fe.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
W.value && e.value.userOptions.buttons.table ? (r(), O(jt(I.value.component), Je({ key: 6 }, I.value.props, {
ref_key: "tableUnit",
ref: N,
onClose: Ue
}), qe({
content: v(() => [
(r(), O(c(pt), {
key: `table_${Se.value}`,
colNames: X.value.colNames,
head: X.value.head,
body: X.value.body,
config: X.value.config,
title: e.value.table.useDialog ? "" : I.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: Ue
}, {
th: v(({ th: l }) => [
k("div", {
innerHTML: l,
style: { display: "flex", "align-items": "center" }
}, null, 8, Xl)
]),
td: v(({ td: l }) => [
Ke(S(l.name || l), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: v(() => [
Ke(S(I.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: v(() => [
k("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: a[0] || (a[0] = (l) => pe(e.value.userOptions.callbacks.csv))
}, [
ge(c(bt), {
name: "excel",
stroke: I.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : f("", !0),
c(se) ? (r(), O(vl, { key: 7 })) : f("", !0)
], 46, xl));
}
}, ql = /* @__PURE__ */ kl(Yl, [["__scopeId", "data-v-19aa5bb8"]]), da = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: ql
}, Symbol.toStringTag, { value: "Module" }));
export {
va as a,
da as b,
ql as v
};