vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
797 lines (796 loc) • 31.5 kB
JavaScript
import { defineAsyncComponent as N, ref as u, computed as y, toRefs as Ue, onMounted as We, watch as Ge, createElementBlock as c, openBlock as r, unref as a, normalizeStyle as V, normalizeClass as fe, createBlock as g, createCommentVNode as d, createElementVNode as s, createVNode as Y, createSlots as He, withCtx as m, renderSlot as h, normalizeProps as j, guardReactiveProps as z, Fragment as pe, renderList as ge, toDisplayString as E, Teleport as Xe, createTextVNode as Ke, nextTick as qe } from "vue";
import { u as Ye, c as Je, t as Qe, o as Ze, f as me, b as et, R as tt, X as ot, s as C, x as lt, S as at, k as ke, i as U, v as st, w as nt } from "./index-q-LPw2IT.js";
import { t as rt, u as ut } from "./useResponsive-DfdjqQps.js";
import { u as it, B as dt } from "./useLoading-D7YHNtLX.js";
import { u as ct } from "./usePrinter-DX7efa1s.js";
import { u as be } from "./useNestedProp-04aFeUYu.js";
import { u as vt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as yt } from "./useChartAccessibility-9icAAmYg.js";
import ht from "./img-Ctts6JQb.js";
import ft from "./Title-B55R8CAZ.js";
import pt from "./Legend-DcDSkq99.js";
import { _ as gt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const mt = ["id"], kt = ["id"], bt = ["xmlns", "viewBox"], xt = ["width", "height"], Ct = ["id"], wt = ["stop-color"], $t = ["stop-color"], _t = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], At = ["d", "stroke", "stroke-width"], Mt = ["transform"], Nt = ["stroke"], Pt = ["fill"], Tt = ["transform"], Ot = ["stroke"], Lt = ["fill"], It = ["transform"], St = ["stroke"], Ft = ["fill"], Et = ["transform"], Rt = ["stroke"], Bt = ["fill"], Dt = ["transform"], Vt = ["stroke"], jt = ["fill"], zt = ["d", "stroke", "stroke-width", "fill"], Ut = ["x1", "y1", "x2", "y2", "stroke"], Wt = ["cx", "cy", "fill", "stroke"], Gt = ["cx", "cy", "fill", "stroke"], Ht = ["x", "y", "fill", "font-weight"], Xt = ["x", "y", "fill"], Kt = {
key: 4,
class: "vue-data-ui-watermark"
}, qt = ["id"], Yt = ["onClick"], Jt = {
key: 5,
style: { "font-weight": "bold" }
}, Qt = { key: 6 }, Zt = ["innerHTML"], eo = {
__name: "vue-ui-mood-radar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
setup(xe, { expose: Ce }) {
const we = N(() => import("./vue-ui-accordion-D46i_gkB.js")), P = N(() => import("./BaseIcon-CCivwZUq.js")), $e = N(() => import("./DataTable-rj9-mAwF.js")), _e = N(() => import("./PackageVersion-5ZjKSIei.js")), Ae = N(() => import("./PenAndPaper-BJ0hcgsa.js")), Me = N(() => import("./UserOptions-DVzyjG-W.js")), { vue_ui_mood_radar: Ne } = Ye(), w = xe, k = u(Je()), $ = u(null), Pe = u(null), f = u(null), J = u(null), Te = u(0), Oe = u(0), Q = u(0), Z = u(null), ee = u(null), T = u(null), R = u(null), te = u(null), oe = u(!1), le = y(() => !!w.dataset && Object.keys(w.dataset).length), e = u(H()), { loading: W, FINAL_DATASET: _ } = it({
...Ue(w),
FINAL_CONFIG: e,
prepareConfig: H,
skeletonDataset: {
1: 1,
2: 1,
3: 1,
4: 1,
5: 1
},
skeletonConfig: Qe({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
layout: {
grid: {
stroke: "#6A6A6A"
},
outerPolygon: {
stroke: "#6A6A6A"
},
dataPolygon: {
color: "#6A6A6A",
opacity: 30,
stroke: "#6A6A6A"
},
smileys: {
colors: {
1: "#DBDBDB",
2: "#C4C4C4",
3: "#ADADAD",
4: "#969696",
5: "#808080"
}
},
dataLabel: {
color: "transparent"
}
},
legend: {
backgroundColor: "transparent"
}
}
}
}
})
});
We(() => {
oe.value = !0, ae();
});
const Le = y(() => e.value.debug);
function ae() {
if (Ze(w.dataset) && me({
componentName: "VueUiMoodRadar",
type: "dataset",
debug: Le.value
}), e.value.responsive) {
const o = rt(() => {
const { width: l, height: t } = ut({
chart: $.value,
title: e.value.style.chart.title.text ? Z.value : null,
legend: e.value.style.chart.legend.show ? ee.value : null,
noTitle: J.value,
source: te.value
});
requestAnimationFrame(() => {
n.value.width = l, n.value.height = t - 12;
});
});
T.value && (R.value && T.value.unobserve(R.value), T.value.disconnect()), T.value = new ResizeObserver(o), R.value = $.value.parentNode, T.value.observe(R.value);
}
}
const { userOptionsVisible: G, setUserOptionsVisibility: se, keepUserOptionState: ne } = vt({ config: e.value }), { svgRef: re } = yt({ config: e.value.style.chart.title });
function H() {
const o = be({
userConfig: w.config,
defaultConfig: Ne
});
return o.theme ? {
...be({
userConfig: et.vue_ui_mood_radar[o.theme] || w.config,
defaultConfig: o
})
} : o;
}
Ge(() => w.config, (o) => {
e.value = H(), G.value = !e.value.userOptions.showOnChartHover, ae(), Te.value += 1, Oe.value += 1, Q.value += 1, O.value.showTable = e.value.table.show;
}, { deep: !0 });
const { isPrinting: ue, isImaging: ie, generatePdf: de, generateImage: ce } = ct({
elementId: k.value,
fileName: e.value.style.chart.title.text || "vue-ui-mood-radar",
options: e.value.userOptions.print
}), Ie = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), O = u({
showTable: e.value.table.show
}), n = u({
height: 256,
width: 256
}), Se = {
5: { x: 128, y: 35 },
4: { x: 218, y: 98.5 },
3: { x: 185, y: 204 },
2: { x: 70, y: 204 },
1: { x: 38.5, y: 98.5 }
}, Fe = y(() => {
const o = {};
return K.value.forEach((l) => {
o[l.key] = { x: l.x, y: l.y };
}), o;
});
function L(o) {
const l = Se[o], t = Fe.value[o] || l;
return `translate(${t.x - l.x}, ${t.y - l.y})`;
}
const X = y(() => tt({
plot: { x: n.value.width / 2, y: n.value.height / 2 },
radius: Math.min(n.value.height, n.value.width) * 0.35,
sides: 5,
rotation: 11
}));
function Ee({ centerX: o, centerY: l, apexX: t, apexY: i, proportion: b, key: p, value: ze }) {
return {
x: o + (t - o) * b,
y: l + (i - l) * b,
key: p,
value: ze
};
}
const Re = y(() => Math.max(...Object.values(_.value).map((o) => isNaN(o) ? 0 : o))), A = y(() => Object.values(_.value).reduce((o, l) => (isNaN(o) ? 0 : o) + (isNaN(l) ? 0 : l), 0)), v = y(() => Object.keys(_.value).map((o, l) => {
const t = typeof _.value[o] != "number" || isNaN(_.value[o]) ? 0 : _.value[o];
return {
index: l,
key: o,
value: t,
proportion: t / A.value,
color: e.value.style.chart.layout.smileys.colors[o]
};
}).sort((o, l) => l.key - o.key)), K = y(() => (["1", "2", "3", "4", "5"].forEach((o) => {
[null, void 0].includes(_.value[o]) && me({
componentName: "VueUiMoodRadar",
type: "datasetAttribute",
property: o
});
}), X.value.coordinates.map((o, l) => {
const t = Ee({
centerX: n.value.width / 2,
centerY: n.value.height / 2,
apexX: o.x,
apexY: o.y,
proportion: v.value[l].value / Re.value,
key: v.value[l].key,
value: v.value[l].value
});
return {
...o,
plots: t,
key: v.value[l].key
};
}))), Be = y(() => ({
cy: "mood-radar-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
}));
function De(o) {
o === f.value ? f.value = null : (f.value = o, M(o));
}
function I(o) {
f.value = o;
const l = v.value.find((t) => t.key === o);
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: l.index });
}
function S(o) {
f.value = null;
const l = v.value.find((t) => t.key === o);
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: l.index });
}
function M(o) {
const l = v.value.find((t) => t.key === o);
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: l.index });
}
const x = y(() => {
const o = v.value.map((t) => ({
name: t.key,
color: t.color
})), l = v.value.map((t) => isNaN(t.value) ? 0 : t.value);
return { head: o, body: l };
});
function ve(o = null) {
qe(() => {
const l = x.value.head.map((b, p) => [[
b.name
], [x.value.body[p]], [isNaN(x.value.body[p] / A.value) ? "-" : x.value.body[p] / A.value * 100]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(l), i = st(t);
o ? o(i) : nt({ csvContent: i, title: e.value.style.chart.title.text || "vue-ui-mood-radar" });
});
}
const B = y(() => {
const o = [
' <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>',
Number(A.value.toFixed(e.value.table.td.roundingValue)).toLocaleString(),
"100%"
], l = x.value.head.map((b, p) => [
{
color: b.color,
name: b.name
},
x.value.body[p].toFixed(e.value.table.td.roundingValue),
isNaN(x.value.body[p] / A.value) ? "-" : (x.value.body[p] / A.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
]), t = {
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
}, i = [
e.value.table.columnNames.series,
e.value.table.columnNames.value,
e.value.table.columnNames.percentage
];
return {
head: o,
body: l,
config: t,
colNames: i
};
});
function Ve() {
return v.value;
}
function ye() {
O.value.showTable = !O.value.showTable;
}
const F = u(!1);
function he(o) {
F.value = o;
}
const D = u(!1);
function q() {
D.value = !D.value;
}
async function je({ scale: o = 2 } = {}) {
if (!$.value) return;
const { width: l, height: t } = $.value.getBoundingClientRect(), i = l / t, { imageUri: b, base64: p } = await ht({ domElement: $.value, base64: !0, img: !0, scale: o });
return {
imageUri: b,
base64: p,
title: e.value.style.chart.title.text,
width: l,
height: t,
aspectRatio: i
};
}
return Ce({
getData: Ve,
getImage: je,
generatePdf: de,
generateCsv: ve,
generateImage: ce,
toggleTable: ye,
toggleAnnotator: q,
toggleFullscreen: he
}), (o, l) => (r(), c("div", {
class: fe(`vue-ui-mood-radar ${F.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "moodRadarChart",
ref: $,
id: `${k.value}`,
style: V(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
onMouseenter: l[16] || (l[16] = () => a(se)(!0)),
onMouseleave: l[17] || (l[17] = () => a(se)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), g(a(Ae), {
key: 0,
svgRef: a(re),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: D.value,
onClose: q
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : d("", !0),
Ie.value ? (r(), c("div", {
key: 1,
ref_key: "noTitle",
ref: J,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : d("", !0),
e.value.style.chart.title.text ? (r(), c("div", {
key: 2,
ref_key: "chartTitle",
ref: Z,
style: "width:100%;background:transparent"
}, [
Y(ft, {
config: {
title: {
cy: "mood-radar-title",
...e.value.style.chart.title
},
subtitle: {
cy: "mood-radar-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"])
], 512)) : d("", !0),
s("div", {
id: `legend-top-${k.value}`
}, null, 8, kt),
e.value.userOptions.show && le.value && (a(ne) || a(G)) ? (r(), g(a(Me), {
key: 3,
ref_key: "details",
ref: Pe,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: a(ue),
isImaging: a(ie),
uid: k.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasXls: e.value.userOptions.buttons.csv,
hasImg: e.value.userOptions.buttons.img,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: F.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: $.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: D.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: he,
onGeneratePdf: a(de),
onGenerateCsv: ve,
onGenerateImage: a(ce),
onToggleTable: ye,
onToggleAnnotator: q,
style: V({
visibility: a(ne) ? a(G) ? "visible" : "hidden" : "visible"
})
}, He({ _: 2 }, [
o.$slots.menuIcon ? {
name: "menuIcon",
fn: m(({ isOpen: t, color: i }) => [
h(o.$slots, "menuIcon", j(z({ isOpen: t, color: i })), void 0, !0)
]),
key: "0"
} : void 0,
o.$slots.optionPdf ? {
name: "optionPdf",
fn: m(() => [
h(o.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
o.$slots.optionCsv ? {
name: "optionCsv",
fn: m(() => [
h(o.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
o.$slots.optionImg ? {
name: "optionImg",
fn: m(() => [
h(o.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
o.$slots.optionTable ? {
name: "optionTable",
fn: m(() => [
h(o.$slots, "optionTable", {}, void 0, !0)
]),
key: "4"
} : void 0,
o.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: m(({ toggleFullscreen: t, isFullscreen: i }) => [
h(o.$slots, "optionFullscreen", j(z({ toggleFullscreen: t, isFullscreen: i })), void 0, !0)
]),
key: "5"
} : void 0,
o.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: m(({ toggleAnnotator: t, isAnnotator: i }) => [
h(o.$slots, "optionAnnotator", j(z({ toggleAnnotator: t, isAnnotator: i })), void 0, !0)
]),
key: "6"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : d("", !0),
(r(), c("svg", {
ref_key: "svgRef",
ref: re,
xmlns: a(ot),
viewBox: `0 0 ${n.value.width} ${n.value.height}`,
class: fe({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value }),
style: V(`overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
Y(a(_e)),
o.$slots["chart-background"] ? (r(), c("foreignObject", {
key: 0,
x: 0,
y: 0,
width: n.value.width,
height: n.value.height,
style: {
pointerEvents: "none"
}
}, [
h(o.$slots, "chart-background", {}, void 0, !0)
], 8, xt)) : d("", !0),
s("defs", null, [
s("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `mood_radar_gradient_${k.value}`
}, [
s("stop", {
offset: "0%",
"stop-color": a(C)(e.value.style.chart.layout.dataPolygon.color, e.value.style.chart.layout.dataPolygon.opacity)
}, null, 8, wt),
s("stop", {
offset: "100%",
"stop-color": a(C)(a(lt)(e.value.style.chart.layout.dataPolygon.color, e.value.style.chart.layout.dataPolygon.gradient.intensity / 100), e.value.style.chart.layout.dataPolygon.opacity)
}, null, 8, $t)
], 8, Ct)
]),
(r(!0), c(pe, null, ge(X.value.coordinates, (t) => (r(), c("line", {
x1: n.value.width / 2,
y1: n.value.height / 2,
x2: t.x,
y2: t.y,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth
}, null, 8, _t))), 256)),
s("path", {
d: X.value.path,
fill: "none",
stroke: e.value.style.chart.layout.outerPolygon.stroke,
"stroke-width": e.value.style.chart.layout.outerPolygon.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round"
}, null, 8, At),
s("g", {
transform: L("5")
}, [
s("path", {
fill: "none",
stroke: e.value.style.chart.layout.smileys.colors[5],
"stroke-width": "1",
"stroke-linecap": "round",
d: "M119 25A1 1 0 00137 25 1 1 0 00119 25M123 26C124 33 132 33 133 26L123 26M123 22A1 1 0 00126 22 1 1 0 00123 22M130 22A1 1 0 00133 22 1 1 0 00130 22"
}, null, 8, Nt),
s("circle", {
class: "vue-ui-mood-radar-trap",
cx: "128",
cy: "25",
r: "20",
fill: f.value === "5" ? a(C)(e.value.style.chart.layout.smileys.colors[5], 20) : "transparent",
onMouseenter: l[0] || (l[0] = (t) => I("5")),
onMouseleave: l[1] || (l[1] = (t) => S("5")),
onClick: l[2] || (l[2] = (t) => M("5"))
}, null, 40, Pt)
], 8, Mt),
s("g", {
transform: L("4")
}, [
s("path", {
fill: "none",
stroke: e.value.style.chart.layout.smileys.colors[4],
"stroke-width": "1",
"stroke-linecap": "round",
d: "M218 95A1 1 0 00236 95 1 1 0 00218 95M222 97C225 99 229 99 232 97M222 92A1 1 0 00225 92 1 1 0 00222 92M229 92A1 1 0 00232 92 1 1 0 00229 92"
}, null, 8, Ot),
s("circle", {
class: "vue-ui-mood-radar-trap",
cx: "227",
cy: "95.5",
r: "20",
fill: f.value === "4" ? a(C)(e.value.style.chart.layout.smileys.colors[4], 20) : "transparent",
onMouseenter: l[3] || (l[3] = (t) => I("4")),
onMouseleave: l[4] || (l[4] = (t) => S("4")),
onClick: l[5] || (l[5] = (t) => M("4"))
}, null, 40, Lt)
], 8, Tt),
s("g", {
transform: L("3")
}, [
s("path", {
fill: "none",
stroke: e.value.style.chart.layout.smileys.colors[3],
"stroke-width": "1",
"stroke-linecap": "round",
d: "M181 213A1 1 0 00199 213 1 1 0 00181 213M185 210A1 1 0 00188 210 1 1 0 00185 210M192 210A1 1 0 00195 210 1 1 0 00192 210M185 215 195 215"
}, null, 8, St),
s("circle", {
class: "vue-ui-mood-radar-trap",
cx: "190",
cy: "213.5",
r: "20",
fill: f.value === "3" ? a(C)(e.value.style.chart.layout.smileys.colors[3], 20) : "transparent",
onMouseenter: l[6] || (l[6] = (t) => I("3")),
onMouseleave: l[7] || (l[7] = (t) => S("3")),
onClick: l[8] || (l[8] = (t) => M("3"))
}, null, 40, Ft)
], 8, It),
s("g", {
transform: L("2")
}, [
s("path", {
fill: "none",
stroke: e.value.style.chart.layout.smileys.colors[2],
"stroke-width": "1",
"stroke-linecap": "round",
d: "M56 213A1 1 0 0074 213 1 1 0 0056 213M60 216C63 214 67 214 70 216M60 210A1 1 0 0063 210 1 1 0 0060 210M67 210A1 1 0 0070 210 1 1 0 0067 210"
}, null, 8, Rt),
s("circle", {
class: "vue-ui-mood-radar-trap",
cx: "65",
cy: "213.5",
r: "20",
fill: f.value === "2" ? a(C)(e.value.style.chart.layout.smileys.colors[2], 20) : "transparent",
onMouseenter: l[9] || (l[9] = (t) => I("2")),
onMouseleave: l[10] || (l[10] = (t) => S("2")),
onClick: l[11] || (l[11] = (t) => M("2"))
}, null, 40, Bt)
], 8, Et),
s("g", {
transform: L("1")
}, [
s("path", {
fill: "none",
stroke: e.value.style.chart.layout.smileys.colors[1],
"stroke-width": "1",
"stroke-linecap": "round",
d: "M20 96A1 1 0 0038 96 1 1 0 0020 96M24 100C25 95 33 95 34 100L24 100M24 93A1 1 0 0027 93 1 1 0 0024 93M31 93A1 1 0 0034 93 1 1 0 0031 93"
}, null, 8, Vt),
s("circle", {
class: "vue-ui-mood-radar-trap",
cx: "29",
cy: "95.5",
r: "20",
fill: f.value === "1" ? a(C)(e.value.style.chart.layout.smileys.colors[1], 20) : "transparent",
onMouseenter: l[12] || (l[12] = (t) => I("1")),
onMouseleave: l[13] || (l[13] = (t) => S("1")),
onClick: l[14] || (l[14] = (t) => M("1"))
}, null, 40, jt)
], 8, Dt),
s("path", {
d: a(at)(K.value.map((t) => t.plots)),
stroke: e.value.style.chart.layout.dataPolygon.stroke,
"stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: e.value.style.chart.layout.dataPolygon.gradient.show ? `url(#mood_radar_gradient_${k.value})` : a(C)(e.value.style.chart.layout.dataPolygon.color, e.value.style.chart.layout.dataPolygon.opacity)
}, null, 8, zt),
(r(!0), c(pe, null, ge(K.value.map((t) => t.plots), (t, i) => (r(), c("g", {
class: "vue-ui-mood-radar-trap",
style: V(`opacity:${f.value == t.key ? "1" : "0"}`)
}, [
s("line", {
x1: t.x,
y1: t.y,
x2: n.value.width / 2,
y2: n.value.height / 2,
stroke: e.value.style.chart.layout.smileys.colors[t.key]
}, null, 8, Ut),
s("circle", {
cx: t.x,
cy: t.y,
fill: e.value.style.chart.layout.smileys.colors[t.key],
r: "3",
stroke: e.value.style.chart.backgroundColor,
"stroke-width": 0.5
}, null, 8, Wt),
s("circle", {
cx: n.value.width / 2,
cy: n.value.height / 2,
fill: e.value.style.chart.layout.smileys.colors[t.key],
r: "3",
stroke: e.value.style.chart.backgroundColor,
"stroke-width": 0.5
}, null, 8, Gt),
s("text", {
x: n.value.width / 2,
y: ["5", 5].includes(t.key) ? n.value.height / 2 * 1.13 : n.value.height / 2 * 0.9375,
fill: e.value.style.chart.layout.dataLabel.color,
"font-size": "12",
"text-anchor": "middle",
"font-weight": e.value.style.chart.layout.dataLabel.bold ? "bold" : "normal"
}, E(a(ke)(
e.value.style.chart.layout.dataLabel.formatter,
t.value,
a(U)({
p: e.value.style.chart.layout.dataLabel.prefix,
v: t.value,
s: e.value.style.chart.layout.dataLabel.suffix,
r: e.value.style.chart.layout.dataLabel.roundingValue
}),
{ datapoint: t, seriesIndex: i }
)), 9, Ht),
s("text", {
x: n.value.width / 2,
y: ["5", 5].includes(t.key) ? n.value.height / 2 * 1.273 : n.value.height / 2 * 0.7968,
fill: e.value.style.chart.layout.dataLabel.color,
"font-size": "12",
"text-anchor": "middle"
}, " (" + E(a(U)({
v: t.value / A.value * 100,
s: "%",
r: e.value.style.chart.layout.dataLabel.roundingPercentage
})) + ") ", 9, Xt)
], 4))), 256)),
h(o.$slots, "svg", { svg: n.value }, void 0, !0)
], 14, bt)),
o.$slots.watermark ? (r(), c("div", Kt, [
h(o.$slots, "watermark", j(z({ isPrinting: a(ue) || a(ie) })), void 0, !0)
])) : d("", !0),
s("div", {
id: `legend-bottom-${k.value}`
}, null, 8, qt),
oe.value ? (r(), g(Xe, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${k.value}` : `#legend-bottom-${k.value}`
}, [
s("div", {
ref_key: "chartLegend",
ref: ee
}, [
e.value.style.chart.legend.show ? (r(), g(pt, {
legendSet: v.value,
config: Be.value,
key: `legend_${Q.value}`,
style: { display: "flex", "row-gap": "6px" }
}, {
item: m(({ legend: t, index: i }) => [
s("div", {
onClick: () => De(t.key),
style: { display: "flex", "flex-direction": "row", gap: "3px", "align-items": "center", margin: "3px 0" }
}, [
t.key == 1 ? (r(), g(a(P), {
key: 0,
strokeWidth: 1,
name: "moodSad",
stroke: e.value.style.chart.layout.smileys.colors[t.key]
}, null, 8, ["stroke"])) : d("", !0),
t.key == 2 ? (r(), g(a(P), {
key: 1,
strokeWidth: 1,
name: "moodFlat",
stroke: e.value.style.chart.layout.smileys.colors[t.key]
}, null, 8, ["stroke"])) : d("", !0),
t.key == 3 ? (r(), g(a(P), {
key: 2,
strokeWidth: 1,
name: "moodNeutral",
stroke: e.value.style.chart.layout.smileys.colors[t.key]
}, null, 8, ["stroke"])) : d("", !0),
t.key == 4 ? (r(), g(a(P), {
key: 3,
strokeWidth: 1,
name: "smiley",
stroke: e.value.style.chart.layout.smileys.colors[t.key]
}, null, 8, ["stroke"])) : d("", !0),
t.key == 5 ? (r(), g(a(P), {
key: 4,
strokeWidth: 1,
name: "moodHappy",
stroke: e.value.style.chart.layout.smileys.colors[t.key]
}, null, 8, ["stroke"])) : d("", !0),
a(W) ? d("", !0) : (r(), c("span", Jt, E(a(ke)(
e.value.style.chart.layout.dataLabel.formatter,
t.value,
a(U)({
p: e.value.style.chart.layout.dataLabel.prefix,
v: t.value,
s: e.value.style.chart.layout.dataLabel.suffix,
r: e.value.style.chart.layout.dataLabel.roundingValue
}),
{ datapoint: t, seriesIndex: i }
)), 1)),
a(W) ? d("", !0) : (r(), c("span", Qt, "(" + E(a(U)({
v: t.proportion * 100,
s: "%",
r: e.value.style.chart.legend.roundingPercentage
})) + ")", 1))
], 8, Yt)
]),
_: 1
}, 8, ["legendSet", "config"])) : d("", !0),
h(o.$slots, "legend", { legend: v.value }, void 0, !0)
], 512)
], 8, ["to"])) : d("", !0),
o.$slots.source ? (r(), c("div", {
key: 6,
ref_key: "source",
ref: te,
dir: "auto"
}, [
h(o.$slots, "source", {}, void 0, !0)
], 512)) : d("", !0),
le.value ? (r(), g(a(we), {
key: 7,
hideDetails: "",
config: {
open: O.value.showTable,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
},
head: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
}
}
}, {
content: m(() => [
Y(a($e), {
colNames: B.value.colNames,
head: B.value.head,
body: B.value.body,
config: B.value.config,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
onClose: l[15] || (l[15] = (t) => O.value.showTable = !1)
}, {
th: m(({ th: t }) => [
s("div", {
innerHTML: t,
style: { display: "flex", "align-items": "center" }
}, null, 8, Zt)
]),
td: m(({ td: t }) => [
Ke(E(t.name || t), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"])
]),
_: 1
}, 8, ["config"])) : d("", !0),
a(W) ? (r(), g(dt, { key: 8 })) : d("", !0)
], 46, mt));
}
}, ho = /* @__PURE__ */ gt(eo, [["__scopeId", "data-v-daa609e7"]]);
export {
ho as default
};