vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
808 lines (807 loc) • 33.1 kB
JavaScript
import { defineAsyncComponent as S, computed as v, ref as c, toRefs as ht, watch as gt, shallowRef as ze, onMounted as ft, onBeforeUnmount as yt, createElementBlock as u, openBlock as s, unref as r, normalizeStyle as j, normalizeClass as D, createBlock as T, createCommentVNode as d, createElementVNode as A, createVNode as ne, createSlots as mt, withCtx as y, renderSlot as h, normalizeProps as M, guardReactiveProps as V, Fragment as F, renderList as O, toDisplayString as G, Teleport as bt, createTextVNode as Ee, nextTick as kt } from "vue";
import { u as Ct, c as wt, t as _t, a as $t, p as I, b as Tt, o as At, f as U, d as Pt, g as Me, e as Ve, R as Ue, h as xt, k as Be, i as W, X as St, s as re, x as Ft, S as De, v as Ot, w as It, y as Nt, z as Lt } from "./index-q-LPw2IT.js";
import { t as Rt, u as zt } from "./useResponsive-DfdjqQps.js";
import { u as Et, B as Mt } from "./useLoading-D7YHNtLX.js";
import { u as Vt } from "./usePrinter-DX7efa1s.js";
import { u as Ge } from "./useNestedProp-04aFeUYu.js";
import { u as Ut } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Bt } from "./useChartAccessibility-9icAAmYg.js";
import { u as Dt } from "./useAutoSizeLabelsInsideViewbox-bEAG5sD1.js";
import Gt from "./img-Ctts6JQb.js";
import Wt from "./Title-B55R8CAZ.js";
import Xt from "./Legend-DcDSkq99.js";
import { _ as Yt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ht = ["id"], jt = ["id"], qt = ["xmlns", "viewBox"], Jt = ["width", "height"], Kt = ["id"], Qt = ["stop-color"], Zt = ["stop-color"], ea = { key: 1 }, ta = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], aa = { key: 0 }, oa = ["d", "stroke", "stroke-width"], la = ["d", "stroke", "stroke-width"], sa = { key: 2 }, na = ["x", "y", "text-anchor", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], ra = ["points", "stroke", "stroke-width"], ua = ["points", "stroke", "stroke-width", "fill"], ia = { key: 3 }, ca = ["cx", "cy", "fill", "r", "stroke"], da = {
key: 4,
class: "vue-data-ui-watermark"
}, va = ["id"], pa = ["onClick"], ha = {
key: 0,
style: { "max-width": "200px", margin: "0 auto" }
}, ga = {
__name: "vue-ui-radar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
emits: ["selectLegend"],
setup(We, { expose: Xe, emit: Ye }) {
const He = S(() => import("./DataTable-rj9-mAwF.js")), je = S(() => import("./PenAndPaper-BJ0hcgsa.js")), qe = S(() => import("./vue-ui-accordion-D46i_gkB.js")), Je = S(() => import("./Tooltip-BMOddG-M.js")), Ke = S(() => import("./UserOptions-DVzyjG-W.js")), Qe = S(() => import("./PackageVersion-5ZjKSIei.js")), Ze = S(() => import("./vue-ui-sparkbar-BNoRSCo7.js")), { vue_ui_radar: et } = Ct(), P = We, ue = v(() => !!P.dataset && Object.keys(P.dataset).length), m = c(wt()), tt = c(null), q = c(!1), J = c(""), ie = c(0), w = c(null), ce = c(null), de = c(null), ve = c(null), pe = c(null), he = c(0), ge = c(0), fe = c(0), ye = c(!1), e = c(Z()), { loading: me, FINAL_DATASET: C } = Et({
...ht(P),
FINAL_CONFIG: e,
prepareConfig: Z,
skeletonDataset: {
categories: [{ name: "_", color: "#6A6A6A" }],
series: [
{ name: "_", values: [0.6], target: 1 },
{ name: "_", values: [0.6], target: 1 },
{ name: "_", values: [0.6], target: 1 },
{ name: "_", values: [0.6], target: 1 },
{ name: "_", values: [0.6], target: 1 },
{ name: "_", values: [0.6], target: 1 }
]
},
skeletonConfig: _t({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
useCssAnimation: !1,
style: {
chart: {
backgroundColor: "#99999930",
layout: {
grid: {
stroke: "#6A6A6A90"
},
labels: {
dataLabels: { show: !1 }
},
outerPolygon: {
stroke: "#6A6A6A"
}
},
legend: {
backgroundColor: "transparent"
}
}
}
}
})
}), { userOptionsVisible: K, setUserOptionsVisibility: be, keepUserOptionState: ke } = Ut({ config: e.value }), { svgRef: Q } = Bt({ config: e.value.style.chart.title });
function Z() {
const t = Ge({
userConfig: P.config,
defaultConfig: et
});
return t.theme ? {
...Ge({
userConfig: Tt.vue_ui_radar[t.theme] || P.config,
defaultConfig: t
}),
customPalette: $t[t.theme] || I
} : t;
}
gt(() => P.config, (t) => {
e.value = Z(), K.value = !e.value.userOptions.showOnChartHover, Ce(), he.value += 1, ge.value += 1, fe.value += 1, b.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, b.value.showTable = e.value.table.show, b.value.showTooltip = e.value.style.chart.tooltip ? e.value.style.chart.tooltip.show : !1;
}, { deep: !0 });
const _ = ze(null), N = ze(null), L = v(() => e.value.debug);
function Ce() {
if (At(P.dataset) && U({
componentName: "VueUiRadar",
type: "dataset",
debug: L.value
}), e.value.responsive) {
const t = Rt(() => {
const { width: a, height: o } = zt({
chart: w.value,
title: e.value.style.chart.title.text ? ce.value : null,
legend: e.value.style.chart.legend.show ? de.value : null,
source: ve.value,
noTitle: pe.value
});
requestAnimationFrame(() => {
i.value.width = a, i.value.height = o, Oe();
});
});
_.value && (N.value && _.value.unobserve(N.value), _.value.disconnect()), _.value = new ResizeObserver(t), N.value = w.value.parentNode, _.value.observe(N.value);
}
Oe();
}
ft(() => {
ye.value = !0, Ce();
}), yt(() => {
_.value && (N.value && _.value.unobserve(N.value), _.value.disconnect());
});
const { isPrinting: we, isImaging: _e, generatePdf: $e, generateImage: Te } = Vt({
elementId: `vue-ui-radar_${m.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-radar",
options: e.value.userOptions.print
}), at = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ae = v(() => Pt(e.value.customPalette)), b = c({
dataLabels: {
show: e.value.style.chart.layout.labels.dataLabels.show
},
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
}), ot = v(() => ({
style: {
backgroundColor: "#FFFFFF00",
animation: {
show: e.value.style.chart.tooltip.animation.show,
animationFrames: e.value.style.chart.tooltip.animation.animationFrames
},
labels: {
fontSize: e.value.style.chart.tooltip.fontSize,
name: {
color: e.value.style.chart.tooltip.color
}
},
gutter: {
backgroundColor: "#CCCCCC",
opacity: 30
}
}
})), i = c({
height: 312,
width: 512
}), lt = Ye, p = c([]), B = c(null), R = c(!1);
function Pe(t) {
R.value = !0, p.value.includes(t) ? (B.value = t, p.value = p.value.filter((a) => a !== t), setTimeout(() => {
R.value = !1, B.value = null;
}, 500)) : (p.value.push(t), setTimeout(() => {
R.value = !1;
}, 500)), lt("selectLegend", z.value.filter((a, o) => !p.value.includes(o)).map((a) => ({
name: a.name,
color: a.color,
proportion: a.totalProportion
})));
}
function st() {
return z.value.map((t) => ({
name: t.name,
color: t.color,
proportion: t.totalProportion
}));
}
const g = v(() => [null, void 0].includes(C.value.categories) ? (U({
componentName: "VueUiRadar",
type: "datasetAttribute",
property: "categories ({ name: string; prefix?: string; suffix?: string}[])",
debug: L.value
}), []) : (C.value.categories.length === 0 ? U({
componentName: "VueUiRadar",
type: "datasetAttributeEmpty",
property: "categories",
debug: L.value
}) : C.value.categories.forEach((t, a) => {
Me({
datasetObject: t,
requiredAttributes: ["name"]
}).forEach((o) => {
U({
componentName: "VueUiRadar",
type: "datasetAttribute",
property: `category.${o} at index ${a}`,
index: a,
debug: L.value
});
});
}), [null, void 0].includes(C.value.series) ? U({
componentName: "VueUiRadar",
type: "datasetAttribute",
property: "series ({ name: string; values: number[]; color?: string; target: number}[])",
debug: L.value
}) : C.value.series.forEach((t, a) => {
Me({
datasetObject: t,
requiredAttributes: ["name", "values", "target"]
}).forEach((o) => {
U({
componentName: "VueUiRadar",
type: "datasetSerieAttribute",
key: "series",
property: o,
index: a,
debug: L.value
});
});
}), C.value.categories.map((t, a) => ({
name: t.name,
categoryId: `radar_category_${m.value}_${a}`,
color: Ve(t.color) || Ae.value[a] || I[a] || I[a % I.length],
prefix: t.prefix ?? "",
suffix: t.suffix ?? ""
})))), k = v(() => C.value.series.map((t, a) => ({
...t,
color: Ve(t.color) || Ae.value[a] || I[a] || I[a % I.length],
serieId: `radar_serie_${m.value}_${a}`,
formatter: t.formatter || null
}))), xe = v(() => Math.max(...k.value.flatMap((t) => t.values))), Se = v(() => k.value.length), ee = v(() => Math.min(i.value.width, i.value.height) / 3), Fe = v(() => Ue({
plot: { x: i.value.width / 2, y: i.value.height / 2 },
radius: ee.value,
sides: Se.value,
rotation: 0
})), nt = v(() => {
const t = [];
for (let a = 0; a < ee.value; a += ee.value / e.value.style.chart.layout.grid.graduations)
t.push(a);
return t;
}), $ = v(() => Fe.value.coordinates.map((t, a) => {
const o = k.value[a].values.map((l) => ut({
centerX: i.value.width / 2,
centerY: i.value.height / 2,
apexX: t.x,
apexY: t.y,
proportion: l / (k.value[a].target || xe.value)
}));
return {
...t,
...k.value[a],
plots: o
};
}).map((t) => ({
...t,
labelX: te(t).x,
labelY: te(t).y,
labelAnchor: te(t).anchor
})));
function te({ x: t, y: a }) {
let o = "middle";
return t = Math.round(t), a = Math.round(a), t > i.value.width / 2 && (t += 12, o = "start"), t < i.value.width / 2 && (t -= 12, o = "end"), a > i.value.height / 2 + 1 && (a += 20), a < i.value.height / 2 - 1 && (a -= 12), a === i.value.height / 2 && (a += 4), { x: t, y: a, anchor: o };
}
const rt = v({
get: () => e.value.style.chart.layout.labels.dataLabels.fontSize,
set: (t) => t
}), { autoSizeLabels: Oe } = Dt({
svgRef: Q,
fontSize: e.value.style.chart.layout.labels.dataLabels.fontSize,
minFontSize: 6,
sizeRef: rt,
labelClass: ".vue-ui-radar-apex-label"
});
function ut({ centerX: t, centerY: a, apexX: o, apexY: l, proportion: n }) {
return {
x: t + (o - t) * n,
y: a + (l - a) * n
};
}
const z = v(() => {
const t = k.value.map((a, o) => a.values.map((l) => l / (a.target || xe.value)));
return g.value.map((a, o) => ({
...a,
totalProportion: xt(t.map((l) => l[o]).reduce((l, n) => l + n, 0) / k.value.length),
shape: "circle",
opacity: p.value.includes(o) ? 0.5 : 1,
segregate: () => Pe(o),
isSegregated: p.value.includes(o)
}));
}), it = v(() => ({
cy: "radar-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" : ""
})), X = v(() => {
const t = [
{ name: e.value.translations.datapoint, color: "" },
{ name: e.value.translations.target, color: "" },
...z.value
], a = C.value.series.map((l) => [
l.name,
Be(
l.formatter,
l.target,
W({
p: l.prefix,
v: l.target,
s: l.suffix,
r: e.value.table.td.roundingValue
})
),
...l.values.map((n, f) => `${Be(
l.formatter,
n,
W({ p: g.value[f].prefix, v: n, s: g.value[f].suffix, r: e.value.table.td.roundingValue })
)} (${isNaN(n / l.target) ? "" : W({
v: n / l.target * 100,
s: "%",
r: 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
};
return { head: t, body: a, config: o, colNames: t };
}), Y = c(null), ae = c([]), oe = c(null);
function ct(t, a) {
q.value = !1, Y.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
}
function dt(t, a) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
}
function vt(t, a) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), ae.value = [], Y.value = a, q.value = !0;
let o = "";
oe.value = {
datapoint: t,
seriesIndex: a,
series: {
categories: g.value,
datapoints: k.value,
radar: $.value
},
config: e.value
};
const l = e.value.style.chart.tooltip.customFormat;
if (Nt(l) && Lt(() => l({
seriesIndex: a,
datapoint: t,
series: { categories: g.value, datapoints: k.value, radar: $.value },
config: e.value
})))
J.value = l({
seriesIndex: a,
datapoint: t,
series: { categories: g.value, datapoints: k.value, radar: $.value },
config: e.value
});
else {
o += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`;
for (let n = 0; n < t.values.length; n += 1)
p.value.includes(n) || ae.value.push({
name: g.value[n].name,
value: t.values[n] / t.target * 100,
color: g.value[n].color,
suffix: "%)",
prefix: `${W({ p: g.value[n].prefix ?? "", v: t.values[n], s: g.value[n].suffix ?? "", r: e.value.style.chart.tooltip.roundingValue })} (`,
rounding: e.value.style.chart.tooltip.roundingPercentage,
formatter: t.formatter
});
J.value = o;
}
}
function Ie(t = null) {
kt(() => {
const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = [[""], [e.value.translations.target], ...z.value.flatMap((x) => [[x.name], ["%"]])], l = C.value.series.map((x, fa) => [x.name, x.target, ...x.values.flatMap((se) => [
se,
isNaN(se / x.target) ? "" : se / x.target * 100
])]), n = a.concat([o]).concat(l), f = Ot(n);
t ? t(f) : It({ csvContent: f, title: e.value.style.chart.title.text || "vue-ui-radar" });
});
}
const E = c(!1);
function Ne(t) {
E.value = t, ie.value += 1;
}
function Le() {
b.value.showTable = !b.value.showTable;
}
function Re() {
b.value.showTooltip = !b.value.showTooltip;
}
const H = c(!1);
function le() {
H.value = !H.value;
}
async function pt({ scale: t = 2 } = {}) {
if (!w.value) return;
const { width: a, height: o } = w.value.getBoundingClientRect(), l = a / o, { imageUri: n, base64: f } = await Gt({ domElement: w.value, base64: !0, img: !0, scale: t });
return {
imageUri: n,
base64: f,
title: e.value.style.chart.title.text,
width: a,
height: o,
aspectRatio: l
};
}
return Xe({
getData: st,
getImage: pt,
generatePdf: $e,
generateCsv: Ie,
generateImage: Te,
toggleTable: Le,
toggleTooltip: Re,
toggleAnnotator: le,
toggleFullscreen: Ne
}), (t, a) => (s(), u("div", {
class: D(`vue-ui-radar ${E.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "radarChart",
ref: w,
id: `vue-ui-radar_${m.value}`,
style: j(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
onMouseenter: a[2] || (a[2] = () => r(be)(!0)),
onMouseleave: a[3] || (a[3] = () => r(be)(!1))
}, [
e.value.userOptions.buttons.annotator ? (s(), T(r(je), {
key: 0,
svgRef: r(Q),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: H.value,
onClose: le
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : d("", !0),
at.value ? (s(), u("div", {
key: 1,
ref_key: "noTitle",
ref: pe,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : d("", !0),
e.value.style.chart.title.text ? (s(), u("div", {
key: 2,
ref_key: "chartTitle",
ref: ce,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(s(), T(Wt, {
key: `title_${he.value}`,
config: {
title: {
cy: "radar-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "radar-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : d("", !0),
A("div", {
id: `legend-top-${m.value}`
}, null, 8, jt),
e.value.userOptions.show && ue.value && (r(ke) || r(K)) ? (s(), T(r(Ke), {
ref_key: "details",
ref: tt,
key: `user_options_${ie.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isImaging: r(_e),
isPrinting: r(we),
uid: m.value,
hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: E.value,
isTooltip: b.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: w.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: H.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: Ne,
onGeneratePdf: r($e),
onGenerateCsv: Ie,
onGenerateImage: r(Te),
onToggleTable: Le,
onToggleTooltip: Re,
onToggleAnnotator: le,
style: j({
visibility: r(ke) ? r(K) ? "visible" : "hidden" : "visible"
})
}, mt({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: y(({ isOpen: o, color: l }) => [
h(t.$slots, "menuIcon", M(V({ isOpen: o, color: l })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: y(() => [
h(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: y(() => [
h(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: y(() => [
h(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: y(() => [
h(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: y(() => [
h(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: y(({ toggleFullscreen: o, isFullscreen: l }) => [
h(t.$slots, "optionFullscreen", M(V({ toggleFullscreen: o, isFullscreen: l })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: y(({ toggleAnnotator: o, isAnnotator: l }) => [
h(t.$slots, "optionAnnotator", M(V({ toggleAnnotator: o, isAnnotator: l })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : d("", !0),
(s(), u("svg", {
ref_key: "svgRef",
ref: Q,
xmlns: r(St),
class: D({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
viewBox: `0 0 ${i.value.width <= 0 ? 10 : i.value.width} ${i.value.height <= 0 ? 10 : i.value.height}`,
style: j(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
ne(r(Qe)),
t.$slots["chart-background"] ? (s(), u("foreignObject", {
key: 0,
x: 0,
y: 0,
width: i.value.width <= 0 ? 10 : i.value.width,
height: i.value.height <= 0 ? 10 : i.value.height,
style: {
pointerEvents: "none"
}
}, [
h(t.$slots, "chart-background", {}, void 0, !0)
], 8, Jt)) : d("", !0),
A("defs", null, [
(s(!0), u(F, null, O(g.value, (o, l) => (s(), u("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `radar_gradient_${m.value}_${l}`
}, [
A("stop", {
offset: "0%",
"stop-color": r(re)(r(Ft)(o.color, 0.05), e.value.style.chart.layout.dataPolygon.opacity)
}, null, 8, Qt),
A("stop", {
offset: "100%",
"stop-color": r(re)(o.color, e.value.style.chart.layout.dataPolygon.opacity)
}, null, 8, Zt)
], 8, Kt))), 256))
]),
e.value.style.chart.layout.grid.show ? (s(), u("g", ea, [
(s(!0), u(F, null, O($.value, (o) => (s(), u("line", {
x1: i.value.width / 2,
y1: i.value.height / 2,
x2: o.x,
y2: o.y,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth
}, null, 8, ta))), 256)),
e.value.style.chart.layout.grid.graduations > 0 ? (s(), u("g", aa, [
(s(!0), u(F, null, O(nt.value, (o) => (s(), u("path", {
d: r(Ue)({
plot: { x: i.value.width / 2, y: i.value.height / 2 },
radius: o,
sides: Se.value,
rotation: 0
}).path,
fill: "none",
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth
}, null, 8, oa))), 256))
])) : d("", !0)
])) : d("", !0),
A("path", {
d: Fe.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, la),
e.value.style.chart.layout.labels.dataLabels.show ? (s(), u("g", sa, [
(s(!0), u(F, null, O($.value, (o, l) => (s(), u("text", {
class: "vue-ui-radar-apex-label",
x: o.labelX,
y: o.labelY,
"text-anchor": o.labelAnchor,
"font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
fill: e.value.style.chart.layout.labels.dataLabels.color,
onMouseenter: (n) => vt(o, l),
onMouseleave: (n) => ct(o, l),
onClick: (n) => dt(o, l)
}, G(o.name), 41, na))), 256))
])) : d("", !0),
(s(!0), u(F, null, O(g.value, (o, l) => (s(), u("g", null, [
A("g", null, [
e.value.useCssAnimation || !e.value.useCssAnimation && !p.value.includes(l) ? (s(), u("polygon", {
key: 0,
points: r(De)($.value.map((n) => n.plots[l]), !1, !0),
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth + 1,
fill: "none",
class: D({ "animated-out": p.value.includes(l) && e.value.useCssAnimation, "animated-in": R.value && B.value === l && e.value.useCssAnimation })
}, null, 10, ra)) : d("", !0),
e.value.useCssAnimation || !e.value.useCssAnimation && !p.value.includes(l) ? (s(), u("polygon", {
key: 1,
points: r(De)($.value.map((n) => n.plots[l]), !1, !0),
stroke: o.color,
"stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth,
fill: e.value.style.chart.layout.dataPolygon.transparent ? "transparent" : e.value.style.chart.layout.dataPolygon.useGradient ? `url(#radar_gradient_${m.value}_${l})` : r(re)(o.color, e.value.style.chart.layout.dataPolygon.opacity),
class: D({ "animated-out": p.value.includes(l) && e.value.useCssAnimation, "animated-in": R.value && B.value === l && e.value.useCssAnimation })
}, null, 10, ua)) : d("", !0)
])
]))), 256)),
e.value.style.chart.layout.plots.show ? (s(), u("g", ia, [
(s(!0), u(F, null, O($.value, (o, l) => (s(), u("g", null, [
(s(!0), u(F, null, O(o.plots, (n, f) => (s(), u("circle", {
cx: n.x,
cy: n.y,
fill: p.value.includes(f) ? "transparent" : g.value[f] ? g.value[f].color : "transparent",
r: Y.value !== null && Y.value === l ? e.value.style.chart.layout.plots.radius * 1.6 : e.value.style.chart.layout.plots.radius,
stroke: p.value.includes(f) ? "transparent" : e.value.style.chart.backgroundColor,
"stroke-width": 0.5,
class: D({ "animated-out": p.value.includes(f) && e.value.useCssAnimation, "animated-in": R.value && B.value === f && e.value.useCssAnimation })
}, null, 10, ca))), 256))
]))), 256))
])) : d("", !0),
h(t.$slots, "svg", { svg: i.value }, void 0, !0)
], 14, qt)),
t.$slots.watermark ? (s(), u("div", da, [
h(t.$slots, "watermark", M(V({ isPrinting: r(we) || r(_e) })), void 0, !0)
])) : d("", !0),
A("div", {
id: `legend-bottom-${m.value}`
}, null, 8, va),
ye.value ? (s(), T(bt, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${m.value}` : `#legend-bottom-${m.value}`
}, [
A("div", {
ref_key: "chartLegend",
ref: de
}, [
e.value.style.chart.legend.show ? (s(), T(Xt, {
key: `legend_${fe.value}`,
legendSet: z.value,
config: it.value,
onClickMarker: a[0] || (a[0] = ({ i: o }) => Pe(o))
}, {
item: y(({ legend: o, index: l }) => [
r(me) ? d("", !0) : (s(), u("div", {
key: 0,
onClick: (n) => o.segregate(),
style: j(`opacity:${p.value.includes(l) ? 0.5 : 1}`)
}, G(o.name) + ": " + G(r(W)({
v: o.totalProportion * 100,
s: "%",
r: e.value.style.chart.legend.roundingPercentage
})), 13, pa))
]),
_: 1
}, 8, ["legendSet", "config"])) : h(t.$slots, "legend", {
key: 1,
legend: z.value
}, void 0, !0)
], 512)
], 8, ["to"])) : d("", !0),
t.$slots.source ? (s(), u("div", {
key: 6,
ref_key: "source",
ref: ve,
dir: "auto"
}, [
h(t.$slots, "source", {}, void 0, !0)
], 512)) : d("", !0),
ne(r(Je), {
show: b.value.showTooltip && q.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,
backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
fontSize: e.value.style.chart.tooltip.fontSize,
position: e.value.style.chart.tooltip.position,
offsetY: e.value.style.chart.tooltip.offsetY,
parent: w.value,
content: J.value,
isFullscreen: E.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
}, {
"tooltip-before": y(() => [
h(t.$slots, "tooltip-before", M(V({ ...oe.value })), void 0, !0)
]),
"tooltip-after": y(() => [
["function"].includes(typeof e.value.style.chart.tooltip.customFormat) ? d("", !0) : (s(), u("div", ha, [
ne(r(Ze), {
dataset: ae.value,
config: ot.value,
backgroundOpacity: 0
}, null, 8, ["dataset", "config"])
])),
h(t.$slots, "tooltip-after", M(V({ ...oe.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "fontSize", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
ue.value ? (s(), T(r(qe), {
key: 7,
hideDetails: "",
config: {
open: b.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: y(() => [
(s(), T(r(He), {
key: `table_${ge.value}`,
colNames: X.value.colNames,
head: X.value.head,
body: X.value.body,
config: X.value.config,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
onClose: a[1] || (a[1] = (o) => b.value.showTable = !1)
}, {
th: y(({ th: o }) => [
Ee(G(o.name), 1)
]),
td: y(({ td: o }) => [
Ee(G(o), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : d("", !0),
r(me) ? (s(), T(Mt, { key: 8 })) : d("", !0)
], 46, Ht));
}
}, Fa = /* @__PURE__ */ Yt(ga, [["__scopeId", "data-v-ae5f591e"]]);
export {
Fa as default
};