vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
909 lines (908 loc) • 40.1 kB
JavaScript
import { defineAsyncComponent as O, useSlots as Lt, ref as u, computed as g, toRefs as Nt, watch as q, shallowRef as ze, onMounted as Rt, onBeforeUnmount as Vt, createElementBlock as f, openBlock as i, unref as n, normalizeStyle as L, normalizeClass as j, createBlock as E, createCommentVNode as C, createElementVNode as w, createVNode as J, withCtx as c, renderSlot as v, normalizeProps as A, guardReactiveProps as $, createSlots as ie, Fragment as ce, renderList as ve, mergeProps as We, Teleport as Mt, toDisplayString as de, resolveDynamicComponent as Ut, createTextVNode as je, nextTick as zt } from "vue";
import { c as Ge, t as Wt, i as jt, j as N, o as He, g as ge, l as Gt, k as Ht, a7 as Xt, m as Xe, a as Ye, d as V, X as Yt, s as qt, h as Jt, U as K, v as Kt, r as Qt, y as Zt, _ as eo } from "./lib-2iaAPQ_c.js";
import { b as to } from "./labelUtils-B3mOOEke.js";
import { t as oo, u as lo } from "./useResponsive-DfdjqQps.js";
import { u as ao, a as he } from "./useNestedProp-2p4Tjzc8.js";
import { u as no } from "./usePrinter-ChVMpU2f.js";
import { u as ro, B as so } from "./BaseScanner-BMpwQAfz.js";
import { u as uo } from "./useSvgExport-ByUukOZt.js";
import { u as io } from "./useThemeCheck-DGJ31Vi5.js";
import { u as co } from "./useUserOptionState-BIvW1Kz7.js";
import { u as vo } from "./useChartAccessibility-9icAAmYg.js";
import go from "./img-CqYIrJ8I.js";
import { _ as ho } from "./Shape-12_eh8zD.js";
import po from "./Title-DSOZzIrU.js";
import fo from "./Legend-D2xmnFPH.js";
import { _ as bo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { rings: { stroke: "#3A3A3A" } }, legend: { backgroundColor: "#1A1A1A", 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" } } }, Je = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { rings: { stroke: "#5D4037", strokeWidth: 10 } }, legend: { backgroundColor: "#FFF8E1", 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" } } }, Ke = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { rings: { stroke: "#2E2E2E", strokeWidth: 10 } }, legend: { backgroundColor: "#1E1E1E", 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" } } }, Qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { rings: { stroke: "#1A1A1A", strokeWidth: 10 } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Ze = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { rings: { stroke: "#fbfafa", strokeWidth: 10 } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, et = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { rings: { stroke: "#fbfafa", strokeWidth: 10 } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, tt = {
default: {},
dark: qe,
celebration: Je,
celebrationNight: Ke,
hack: Qe,
zen: Ze,
concrete: et
}, Qo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Je,
celebrationNight: Ke,
concrete: et,
dark: qe,
default: tt,
hack: Qe,
zen: Ze
}, Symbol.toStringTag, { value: "Module" })), yo = ["id"], mo = ["id"], Co = ["xmlns", "viewBox"], ko = ["width", "height"], wo = ["id"], Ao = ["stop-color"], $o = ["stop-color"], To = { key: 1 }, Fo = ["stroke", "cx", "cy", "r", "fill"], _o = ["stroke", "stroke-width", "cx", "cy", "r", "fill"], So = ["stroke", "stroke-width", "cx", "cy", "r", "fill"], Do = ["cx", "cy", "r", "onMouseenter", "onMouseleave", "onClick"], Oo = {
key: 4,
class: "vue-data-ui-watermark"
}, Eo = ["id"], xo = ["onClick"], Io = ["innerHTML"], Po = {
__name: "vue-ui-rings",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend"],
setup(ot, { expose: lt, emit: at }) {
const nt = O(() => import("./Tooltip-D0pGX8qz.js")), rt = O(() => import("./BaseIcon-CbVDYv89.js")), st = O(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), ut = O(() => import("./DataTable-BT_IeqPe.js")), it = O(() => import("./PenAndPaper-CvyKWfNl.js")), ct = O(() => import("./UserOptions-BQO4YFrn.js")), vt = O(() => import("./PackageVersion-Br3DrrFh.js")), dt = O(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_rings: gt } = ao(), { isThemeValid: ht, warnInvalidTheme: pt } = io(), ft = Lt(), y = ot, x = u(!1), pe = g(() => !!y.dataset && y.dataset.length), m = u(Ge()), G = u(!1), Q = u(""), T = u(null), fe = u(0), F = u(null), be = u(null), ye = u(null), me = u(null), Ce = u(null), ke = u(0), we = u(0), Ae = u(0), Z = u(!1), $e = u(!1), M = u(null), ee = u(null), e = u(le()), { loading: I, FINAL_DATASET: Te, manualLoading: H } = ro({
...Nt(y),
FINAL_CONFIG: e,
prepareConfig: le,
skeletonDataset: [
{ name: "_", values: [13], color: "#808080" },
{ name: "_", values: [8], color: "#969696" },
{ name: "_", values: [5], color: "#ADADAD" },
{ name: "_", values: [3], color: "#C4C4C4" },
{ name: "_", values: [2], color: "#DBDBDB" }
],
skeletonConfig: Wt({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
layout: {
rings: {
stroke: "#6A6A6A",
gradient: {
underlayerColor: "#FFFFFF"
}
}
},
legend: {
backgroundColor: "transparent"
}
}
}
}
})
}), { userOptionsVisible: te, setUserOptionsVisibility: Fe, keepUserOptionState: _e } = co({ config: e.value }), { svgRef: oe } = vo({ config: e.value.style.chart.title });
function le() {
const t = he({
userConfig: y.config,
defaultConfig: gt
}), l = t.theme;
if (!l) return t;
if (!ht.value(t))
return pt(t), t;
const o = he({
userConfig: tt[l] || y.config,
defaultConfig: t
});
return {
...he({
userConfig: y.config,
defaultConfig: o
}),
customPalette: t.customPalette.length ? t.customPalette : jt[t.theme] || N
};
}
q(() => y.config, (t) => {
I.value || (e.value = le()), te.value = !e.value.userOptions.showOnChartHover, Se(), ke.value += 1, we.value += 1, Ae.value += 1, k.value.showTable = e.value.table.show, k.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 }), q(() => y.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (H.value = !1);
}, { deep: !0 });
const S = ze(null), R = ze(null);
Rt(() => {
$e.value = !0, Se();
});
const ae = g(() => !!e.value.debug);
function Se() {
if (He(y.dataset) ? (ge({
componentName: "VueUiRings",
type: "dataset",
debug: ae.value
}), H.value = !0) : y.dataset.forEach((t, l) => {
t.values.length || (ge({
componentName: "VueUiRings",
type: "dataset",
debug: ae.value
}), H.value = !0), Gt({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((o) => {
ge({
componentName: "VueUiRings",
type: "datasetSerieAttribute",
property: o,
index: l,
debug: ae.value
});
});
}), He(y.dataset) || (H.value = e.value.loading), e.value.responsive) {
const t = oo(() => {
Z.value = !0;
const { width: l, height: o } = lo({
chart: F.value,
title: e.value.style.chart.title.text ? be.value : null,
legend: e.value.style.chart.legend.show ? ye.value : null,
source: me.value,
noTitle: Ce.value
});
requestAnimationFrame(() => {
s.value.width = l, s.value.height = o - 12, Z.value = !1;
});
});
S.value && (R.value && S.value.unobserve(R.value), S.value.disconnect()), S.value = new ResizeObserver(t), R.value = F.value.parentNode, S.value.observe(R.value);
}
setTimeout(() => {
x.value = !0;
}, 600);
}
Vt(() => {
S.value && (R.value && S.value.unobserve(R.value), S.value.disconnect());
});
const { isPrinting: De, isImaging: Oe, generatePdf: Ee, generateImage: xe } = no({
elementId: `rings_${m.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-rings",
options: e.value.userOptions.print
}), bt = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ie = g(() => Ht(e.value.customPalette)), k = u({
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
});
q(e, () => {
k.value = {
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
};
}, { immediate: !0 });
const s = u({
height: 360,
width: 360
}), yt = g(() => Math.min(s.value.height, s.value.width)), mt = at, h = u([]);
function U(t) {
if (h.value.includes(t))
h.value = h.value.filter((l) => l !== t);
else {
if (h.value.length === P.value.length - 1) return;
h.value.push(t);
}
mt("selectLegend", b.value.map((l) => ({
name: l.name,
color: l.color,
value: l.value
})));
}
function Pe(t) {
if (!P.value.length)
return e.value.debug && console.warn("VueUiRings - There are no series to show."), null;
const l = P.value.find((o) => o.name === t);
return l || (e.value.debug && console.warn(`VueUiRings - Series name not found "${t}"`), null);
}
function Ct(t) {
const l = Pe(t);
l !== null && h.value.includes(l.uid) && U(l.uid);
}
function kt(t) {
const l = Pe(t);
l !== null && (h.value.includes(l.uid) || U(l.uid));
}
const wt = g(() => Math.max(
...P.value.filter((t) => !h.value.includes(t.uid)).map(({ value: t }) => t)
));
function Be(t) {
return t / wt.value;
}
const P = g(() => Te.value.map(({ values: t, name: l, color: o = null }, a) => {
const r = Xt(t).reduce((d, W) => d + W, 0);
return {
name: l,
color: o || Xe(o) || Ie.value[a] || N[a] || N[a % N.length],
value: r,
proportion: r / Te.value.map((d) => (d.values || []).reduce((W, Bt) => W + Bt, 0)).reduce((d, W) => d + W, 0),
uid: Ge(),
absoluteIndex: a
};
})), ne = g(() => P.value.map((t, l) => {
const o = Ye(e.value.style.chart.layout.labels.dataLabels.formatter, t.value, V({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: t.value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.style.chart.legend.roundingValue
}), { datapoint: t, index: l }), a = isNaN(t.value / _.value) ? "-" : V({ v: t.value / _.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage }), r = Le({
showVal: e.value.style.chart.legend.showValue,
showPercentage: e.value.style.chart.legend.showPercentage,
val: o,
percentage: h.value.includes(t.uid) ? "-%" : a
});
return {
...t,
shape: "circle",
opacity: h.value.includes(t.uid) ? 0.5 : 1,
segregate: () => U(t.uid),
isSegregated: h.value.includes(t.uid),
display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${r}`
};
}).toSorted((t, l) => l.value - t.value)), At = g(() => ({
cy: "rings-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" : ""
})), _ = g(() => P.value.filter((t) => !h.value.includes(t.uid)).map(({ value: t }) => t).reduce((t, l) => t + l, 0)), b = g(() => P.value.filter((t) => !h.value.includes(t.uid)).map(({ name: t, value: l, color: o = null, uid: a, absoluteIndex: r }, d) => ({
absoluteIndex: r,
uid: a,
name: t,
color: o || Xe(o) || Ie.value[d] || N[d] || N[d % N.length],
value: l,
proportion: Be(l),
percentage: l / _.value * 100,
strokeWidth: e.value.style.chart.layout.rings.strokeWidth * Be(l)
})).toSorted((t, l) => l.value - t.value));
function $t() {
return b.value.map(
({ name: t, color: l, value: o, absoluteValues: a, percentage: r }) => ({
name: t,
color: l,
value: o,
absoluteValues: a,
percentage: r
})
);
}
const p = g(() => yt.value - e.value.style.chart.layout.rings.strokeWidth * 2);
function Tt(t, l) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: l });
}
function Ft(t, l) {
T.value = null, G.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: l });
}
function Le({
val: t,
percentage: l,
showVal: o,
showPercentage: a
}) {
const r = e.value.style.chart.layout.labels.dataLabels;
return to({
config: r,
val: t,
percentage: l,
showVal: o,
showPercentage: a
});
}
const re = u(null);
function _t(t, l) {
if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: l }), h.value.length === y.dataset.length) return;
re.value = {
datapoint: t,
seriesIndex: l,
series: b.value,
config: e.value
}, T.value = l;
const o = b.value[l], a = e.value.style.chart.tooltip.customFormat;
if (Zt(a) && eo(() => a({
seriesIndex: l,
datapoint: t,
series: b.value,
config: e.value
})))
Q.value = a({
seriesIndex: l,
datapoint: t,
series: b.value,
config: e.value
});
else {
let r = "";
r += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${o.name}</div>`, r += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${o.color}" />${ft.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${m.value}_${t.absoluteIndex})" />` : ""}</svg>`, r += `<b>${Le({
showVal: e.value.style.chart.tooltip.showValue,
showPercentage: e.value.style.chart.tooltip.showPercentage,
val: `<span>${Ye(
e.value.style.chart.layout.labels.dataLabels.formatter,
o.value,
V({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: o.value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.style.chart.tooltip.roundingValue
}),
{ datapoint: t, seriesIndex: l }
)}</span>`,
percentage: V({
v: o.value / _.value * 100,
s: "%",
r: e.value.style.chart.tooltip.roundingPercentage
})
})}</b></div>`, Q.value = r;
}
G.value = !0;
}
const D = g(() => {
const t = b.value.map((o) => ({
name: o.name,
color: o.color
})), l = b.value.map((o) => o.value);
return { head: t, body: l };
}), X = g(() => {
const t = [
' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
V({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: _.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
"100%"
], l = D.value.head.map((r, d) => [
{
color: r.color,
name: r.name
},
V({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: D.value.body[d], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
isNaN(D.value.body[d] / _.value) ? "-" : (D.value.body[d] / _.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
]), o = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
}, a = [
e.value.table.columnNames.series,
e.value.table.columnNames.value,
e.value.table.columnNames.percentage
];
return {
head: t,
body: l,
config: o,
colNames: a
};
});
function se(t = null) {
zt(() => {
const l = D.value.head.map((r, d) => [[
r.name
], [D.value.body[d]], [isNaN(D.value.body[d] / _.value) ? "-" : D.value.body[d] / _.value * 100]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(l), a = Kt(o);
t ? t(a) : Qt({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-rings" });
});
}
const B = u(!1);
function Ne(t) {
B.value = t, fe.value += 1;
}
function Re() {
k.value.showTable = !k.value.showTable;
}
function Ve() {
k.value.showTooltip = !k.value.showTooltip;
}
const Y = u(!1);
function ue() {
Y.value = !Y.value;
}
async function St({ scale: t = 2 } = {}) {
if (!F.value) return;
const { width: l, height: o } = F.value.getBoundingClientRect(), a = l / o, { imageUri: r, base64: d } = await go({ domElement: F.value, base64: !0, img: !0, scale: t });
return {
imageUri: r,
base64: d,
title: e.value.style.chart.title.text,
width: l,
height: o,
aspectRatio: a
};
}
const z = g(() => {
const t = e.value.table.useDialog && !e.value.table.show, l = k.value.showTable;
return {
component: t ? dt : st,
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: B.value,
fullscreenParent: F.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: l,
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(() => k.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && M.value ? M.value.open() : "close" in M.value && M.value.close());
});
function Me() {
k.value.showTable = !1, ee.value && ee.value.setTableIconState(!1);
}
const Dt = g(() => ne.value.map((t) => ({
...t,
name: t.display
}))), Ot = g(() => e.value.style.chart.backgroundColor), Et = g(() => e.value.style.chart.legend), xt = g(() => e.value.style.chart.title), { exportSvg: It, getSvg: Pt } = uo({
svg: oe,
title: xt,
legend: Et,
legendItems: Dt,
backgroundColor: Ot
});
async function Ue({ isCb: t }) {
if (t) {
const { blob: l, url: o, text: a, dataUrl: r } = await Pt();
e.value.userOptions.callbacks.svg({ blob: l, url: o, text: a, dataUrl: r });
} else
It();
}
return lt({
getData: $t,
getImage: St,
generatePdf: Ee,
generateCsv: se,
generateImage: xe,
generateSvg: Ue,
hideSeries: kt,
showSeries: Ct,
toggleTable: Re,
toggleTooltip: Ve,
toggleAnnotator: ue,
toggleFullscreen: Ne
}), (t, l) => (i(), f("div", {
ref_key: "ringsChart",
ref: F,
class: j(`vue-data-ui-component vue-ui-rings ${B.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
style: L(`font-family:${e.value.style.fontFamily};text-align:center;width:100%;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
id: `rings_${m.value}`,
onMouseleave: l[2] || (l[2] = (o) => {
T.value = null, G.value = !1, n(Fe)(!1);
}),
onMouseenter: l[3] || (l[3] = () => n(Fe)(!0))
}, [
e.value.userOptions.buttons.annotator ? (i(), E(n(it), {
key: 0,
svgRef: n(oe),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: Y.value,
onClose: ue
}, {
"annotator-action-close": c(() => [
v(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": c(({ color: o }) => [
v(t.$slots, "annotator-action-color", A($({ color: o })), void 0, !0)
]),
"annotator-action-draw": c(({ mode: o }) => [
v(t.$slots, "annotator-action-draw", A($({ mode: o })), void 0, !0)
]),
"annotator-action-undo": c(({ disabled: o }) => [
v(t.$slots, "annotator-action-undo", A($({ disabled: o })), void 0, !0)
]),
"annotator-action-redo": c(({ disabled: o }) => [
v(t.$slots, "annotator-action-redo", A($({ disabled: o })), void 0, !0)
]),
"annotator-action-delete": c(({ disabled: o }) => [
v(t.$slots, "annotator-action-delete", A($({ disabled: o })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : C("", !0),
bt.value ? (i(), f("div", {
key: 1,
ref_key: "noTitle",
ref: Ce,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : C("", !0),
e.value.style.chart.title.text ? (i(), f("div", {
key: 2,
ref_key: "chartTitle",
ref: be,
style: "width:100%;background:transparent"
}, [
(i(), E(po, {
key: `title_${ke.value}`,
config: {
title: {
cy: "rings-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "rings-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : C("", !0),
w("div", {
id: `legend-top-${m.value}`
}, null, 8, mo),
e.value.userOptions.show && pe.value && (n(_e) || n(te)) ? (i(), E(n(ct), {
ref_key: "userOptionsRef",
ref: ee,
key: `user_options_${fe.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: n(De),
isImaging: n(Oe),
uid: m.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,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isTooltip: k.value.showTooltip,
isFullscreen: B.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: F.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: Ne,
onGeneratePdf: n(Ee),
onGenerateCsv: se,
onGenerateImage: n(xe),
onGenerateSvg: Ue,
onToggleTable: Re,
onToggleTooltip: Ve,
onToggleAnnotator: ue,
style: L({
visibility: n(_e) ? n(te) ? "visible" : "hidden" : "visible"
})
}, ie({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: c(({ isOpen: o, color: a }) => [
v(t.$slots, "menuIcon", A($({ isOpen: o, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: c(() => [
v(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: c(() => [
v(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: c(() => [
v(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: c(() => [
v(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: c(() => [
v(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: c(() => [
v(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: c(({ toggleFullscreen: o, isFullscreen: a }) => [
v(t.$slots, "optionFullscreen", A($({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: c(({ toggleAnnotator: o, isAnnotator: a }) => [
v(t.$slots, "optionAnnotator", A($({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : C("", !0),
(i(), f("svg", {
ref_key: "svgRef",
ref: oe,
xmlns: n(Yt),
class: j({ "vue-data-ui-fullscreen--on": B.value, "vue-data-ui-fulscreen--off": !B.value, resizing: Z.value || n(I) }),
viewBox: `0 0 ${s.value.width <= 0 ? 10 : s.value.width} ${s.value.height <= 0 ? 10 : s.value.height}`,
style: L(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
J(n(vt)),
t.$slots["chart-background"] ? (i(), f("foreignObject", {
key: 0,
x: 0,
y: 0,
width: s.value.width <= 0 ? 10 : s.value.width,
height: s.value.height <= 0 ? 10 : s.value.height,
style: {
pointerEvents: "none"
}
}, [
v(t.$slots, "chart-background", {}, void 0, !0)
], 8, ko)) : C("", !0),
w("defs", null, [
(i(!0), f(ce, null, ve(b.value, (o, a) => (i(), f("radialGradient", {
cx: "50%",
cy: "30%",
r: "50%",
fx: "50%",
fy: "50%",
id: `gradient_${m.value}_${a}`
}, [
w("stop", {
offset: "0%",
"stop-color": n(qt)(n(Jt)(o.color, 0.05), 100 - e.value.style.chart.layout.rings.gradient.intensity)
}, null, 8, Ao),
w("stop", {
offset: "100%",
"stop-color": o.color
}, null, 8, $o)
], 8, wo))), 256))
]),
t.$slots.pattern ? (i(), f("g", To, [
(i(!0), f(ce, null, ve(b.value, (o) => (i(), f("defs", null, [
v(t.$slots, "pattern", We({ ref_for: !0 }, { seriesIndex: o.absoluteIndex, patternId: `pattern_${m.value}_${o.absoluteIndex}` }), void 0, !0)
]))), 256))
])) : C("", !0),
(i(!0), f(ce, null, ve(b.value, (o, a) => (i(), f("g", null, [
w("circle", {
class: j({
"vue-ui-rings-item": x.value && e.value.useCssAnimation,
"vue-rings-item-onload": !x.value && e.value.useCssAnimation && !n(I),
"vue-ui-rings-opacity": T.value !== null && T.value !== a
}),
style: L(`animation-delay:${a * 100}ms`),
stroke: e.value.style.chart.layout.rings.stroke,
cx: s.value.width / 2,
cy: a === 0 ? s.value.height / 2 : s.value.height / 2 + p.value * b.value[0].proportion / 2 - p.value * o.proportion / 2 - 2 * (a + 1),
r: n(K)(p.value * o.proportion / 2 * 0.9 <= 0 ? 1e-4 : p.value * o.proportion / 2 * 0.9),
fill: e.value.style.chart.layout.rings.gradient.underlayerColor
}, null, 14, Fo),
w("circle", {
class: j({
"vue-ui-rings-item": x.value && e.value.useCssAnimation,
"vue-rings-item-onload": !x.value && e.value.useCssAnimation && !n(I),
"vue-ui-rings-shadow": e.value.style.chart.layout.rings.useShadow,
"vue-ui-rings-blur": T.value !== null && T.value !== a
}),
style: L(`animation-delay:${a * 100}ms`),
stroke: e.value.style.chart.layout.rings.stroke,
"stroke-width": o.strokeWidth < 0.5 ? 0.5 : o.strokeWidth,
cx: s.value.width / 2,
cy: a === 0 ? s.value.height / 2 : s.value.height / 2 + p.value * b.value[0].proportion / 2 - p.value * o.proportion / 2 - 2 * (a + 1),
r: n(K)(p.value * o.proportion / 2 * 0.9 <= 0 ? 1e-4 : p.value * o.proportion / 2 * 0.9),
fill: e.value.style.chart.layout.rings.gradient.show ? `url(#gradient_${m.value}_${a})` : o.color
}, null, 14, _o),
t.$slots.pattern ? (i(), f("circle", {
key: 0,
class: j({
"vue-ui-rings-item": x.value && e.value.useCssAnimation,
"vue-rings-item-onload": !x.value && e.value.useCssAnimation && !n(I),
"vue-ui-rings-shadow": e.value.style.chart.layout.rings.useShadow,
"vue-ui-rings-blur": T.value !== null && T.value !== a
}),
style: L(`animation-delay:${a * 100}ms`),
stroke: e.value.style.chart.layout.rings.stroke,
"stroke-width": o.strokeWidth < 0.5 ? 0.5 : o.strokeWidth,
cx: s.value.width / 2,
cy: a === 0 ? s.value.height / 2 : s.value.height / 2 + p.value * b.value[0].proportion / 2 - p.value * o.proportion / 2 - 2 * (a + 1),
r: n(K)(p.value * o.proportion / 2 * 0.9 <= 0 ? 1e-4 : p.value * o.proportion / 2 * 0.9),
fill: `url(#pattern_${m.value}_${o.absoluteIndex})`
}, null, 14, So)) : C("", !0),
w("circle", {
stroke: "none",
cx: s.value.width / 2,
cy: a === 0 ? s.value.height / 2 : s.value.height / 2 + p.value * b.value[0].proportion / 2 - p.value * o.proportion / 2 - 2 * (a + 1),
r: n(K)(p.value * o.proportion / 2 * 0.9 <= 0 ? 1e-4 : p.value * o.proportion / 2 * 0.9),
fill: "transparent",
onMouseenter: (r) => _t(o, a),
onMouseleave: (r) => Ft(o, a),
onClick: (r) => Tt(o, a)
}, null, 40, Do)
]))), 256)),
v(t.$slots, "svg", { svg: s.value }, void 0, !0)
], 14, Co)),
t.$slots.watermark ? (i(), f("div", Oo, [
v(t.$slots, "watermark", A($({ isPrinting: n(De) || n(Oe) })), void 0, !0)
])) : C("", !0),
w("div", {
id: `legend-bottom-${m.value}`
}, null, 8, Eo),
$e.value ? (i(), E(Mt, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${m.value}` : `#legend-bottom-${m.value}`
}, [
w("div", {
ref_key: "chartLegend",
ref: ye
}, [
e.value.style.chart.legend.show ? (i(), E(fo, {
key: `legend_${Ae.value}`,
legendSet: ne.value,
config: At.value,
onClickMarker: l[0] || (l[0] = ({ legend: o }) => U(o.uid))
}, ie({
item: c(({ legend: o, index: a }) => [
n(I) ? C("", !0) : (i(), f("div", {
key: 0,
onClick: (r) => U(o.uid),
style: L(`opacity:${h.value.includes(o.uid) ? 0.5 : 1}`)
}, de(o.display), 13, xo))
]),
_: 2
}, [
t.$slots.pattern ? {
name: "legend-pattern",
fn: c(({ legend: o, index: a }) => [
J(ho, {
shape: o.shape,
radius: 30,
stroke: "none",
plot: { x: 30, y: 30 },
fill: `url(#pattern_${m.value}_${a})`
}, null, 8, ["shape", "fill"])
]),
key: "0"
} : void 0
]), 1032, ["legendSet", "config"])) : v(t.$slots, "legend", {
key: 1,
legend: ne.value
}, void 0, !0)
], 512)
], 8, ["to"])) : C("", !0),
t.$slots.source ? (i(), f("div", {
key: 6,
ref_key: "source",
ref: me,
dir: "auto"
}, [
v(t.$slots, "source", {}, void 0, !0)
], 512)) : C("", !0),
J(n(nt), {
show: k.value.showTooltip && G.value && h.value.length < y.dataset.length,
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: F.value,
content: Q.value,
isFullscreen: B.value,
isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
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": c(() => [
v(t.$slots, "tooltip-before", A($({ ...re.value })), void 0, !0)
]),
"tooltip-after": c(() => [
v(t.$slots, "tooltip-after", A($({ ...re.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
pe.value && e.value.userOptions.buttons.table ? (i(), E(Ut(z.value.component), We({ key: 7 }, z.value.props, {
ref_key: "tableUnit",
ref: M,
onClose: Me
}), ie({
content: c(() => [
(i(), E(n(ut), {
key: `table_${we.value}`,
colNames: X.value.colNames,
head: X.value.head,
body: X.value.body,
config: X.value.config,
title: e.value.table.useDialog ? "" : z.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: Me
}, {
th: c(({ th: o }) => [
w("div", {
innerHTML: o,
style: { display: "flex", "align-items": "center" }
}, null, 8, Io)
]),
td: c(({ td: o }) => [
je(de(o.name || o), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: c(() => [
je(de(z.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: c(() => [
w("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: l[1] || (l[1] = (o) => se(e.value.userOptions.callbacks.csv))
}, [
J(n(rt), {
name: "excel",
stroke: z.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : C("", !0),
n(I) ? (i(), E(so, { key: 8 })) : C("", !0)
], 46, yo));
}
}, Bo = /* @__PURE__ */ bo(Po, [["__scopeId", "data-v-0ab006de"]]), Zo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Bo
}, Symbol.toStringTag, { value: "Module" }));
export {
Qo as a,
Zo as b,
Bo as v
};