vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,014 lines (1,013 loc) • 43.8 kB
JavaScript
import { defineAsyncComponent as T, computed as v, ref as c, toRefs as jt, watch as ve, shallowRef as He, onMounted as Xt, onBeforeUnmount as Yt, createElementBlock as s, openBlock as n, unref as u, normalizeStyle as Z, normalizeClass as Y, createBlock as D, createCommentVNode as p, createElementVNode as C, createVNode as ee, withCtx as d, renderSlot as g, normalizeProps as A, guardReactiveProps as w, createSlots as qe, Fragment as E, renderList as L, toDisplayString as N, Teleport as Ht, resolveDynamicComponent as qt, mergeProps as Jt, createTextVNode as ge, nextTick as Je } from "vue";
import { c as Kt, t as Qt, i as Zt, j as R, o as eo, g as z, k as to, m as Ke, e as Qe, U as oo, d as W, a as he, X as ao, s as pe, h as lo, af as Ze, l as et, v as ro, r as no, y as so, _ as uo } from "./lib-2iaAPQ_c.js";
import { t as io, u as co } from "./useResponsive-DfdjqQps.js";
import { u as vo, a as fe } from "./useNestedProp-2p4Tjzc8.js";
import { u as go, B as ho } from "./BaseScanner-BMpwQAfz.js";
import { u as po } from "./usePrinter-ChVMpU2f.js";
import { u as fo } from "./useSvgExport-ByUukOZt.js";
import { u as bo } from "./useThemeCheck-DGJ31Vi5.js";
import { u as yo } from "./useUserOptionState-BIvW1Kz7.js";
import { u as mo } from "./useChartAccessibility-9icAAmYg.js";
import { u as ko } from "./useAutoSizeLabelsInsideViewbox-DmpzKQ9i.js";
import Co from "./img-CqYIrJ8I.js";
import Ao from "./Title-DSOZzIrU.js";
import wo from "./Legend-D2xmnFPH.js";
import { _ as $o } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const tt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { outerPolygon: { stroke: "#6A6A6A" }, grid: { stroke: "#5A5A5A" }, labels: { dataLabels: { color: "#CCCCCC" } } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#1A1A1A", 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", layout: { outerPolygon: { stroke: "#5D403780", strokeWidth: 1 }, grid: { stroke: "#5D403740" }, labels: { dataLabels: { color: "#424242" } } }, legend: { color: "#424242", backgroundColor: "#FFF8E1" }, 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" } } }, at = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { outerPolygon: { stroke: "#3A3A3A", strokeWidth: 1 }, grid: { stroke: "#3A3A3A" }, labels: { dataLabels: { color: "#BDBDBD" } } }, legend: { color: "#BDBDBD", backgroundColor: "#1E1E1E" }, 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" } } }, lt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { outerPolygon: { stroke: "#336633", strokeWidth: 0 }, grid: { stroke: "#334C33", graduations: 1 }, labels: { dataLabels: { color: "#99AA99" } } }, legend: { color: "#99AA99", backgroundColor: "#1A1A1A" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#1A1A1A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, rt = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { outerPolygon: { strokeWidth: 0 }, grid: { show: !1 }, labels: { dataLabels: { color: "#99AA99" } } }, 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" } } }, nt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { outerPolygon: { stroke: "#ABB1BC", strokeWidth: 0.5 }, grid: { stroke: "#C3DAC8" }, labels: { dataLabels: { color: "#99AA99" } } }, 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" } } }, st = {
default: {},
dark: tt,
celebration: ot,
celebrationNight: at,
hack: lt,
zen: rt,
concrete: nt
}, ga = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: ot,
celebrationNight: at,
concrete: nt,
dark: tt,
default: st,
hack: lt,
zen: rt
}, Symbol.toStringTag, { value: "Module" })), _o = ["id"], To = ["id"], Fo = ["xmlns", "viewBox"], Po = ["width", "height"], So = ["id"], Oo = ["stop-color"], Do = ["stop-color"], xo = { key: 1 }, Io = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Bo = { key: 0 }, Eo = ["d", "stroke", "stroke-width"], Lo = ["d", "stroke", "stroke-width"], No = { key: 2 }, Ro = ["x", "y", "text-anchor", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], zo = ["points", "stroke", "stroke-width"], Vo = ["points", "stroke", "stroke-width", "fill"], Uo = { key: 3 }, Mo = ["cx", "cy", "fill", "r", "stroke"], Wo = {
key: 4,
class: "vue-data-ui-watermark"
}, Go = ["id"], jo = ["onClick"], Xo = {
key: 0,
style: { "max-width": "200px", margin: "0 auto" }
}, Yo = {
class: "vue-ui-radar-tooltip-datalabel",
style: { width: "100%" }
}, Ho = { class: "vue-ui-radar-tooltip-datalabel-name" }, qo = { key: 0 }, Jo = {
__name: "vue-ui-radar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
emits: ["selectLegend"],
setup(ut, { expose: it, emit: ct }) {
const dt = T(() => import("./Tooltip-D0pGX8qz.js")), vt = T(() => import("./BaseIcon-CbVDYv89.js")), gt = T(() => import("./vue-ui-sparkbar-BR9c9pzQ.js").then((t) => t.a)), ht = T(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), pt = T(() => import("./DataTable-BT_IeqPe.js")), ft = T(() => import("./PenAndPaper-CvyKWfNl.js")), bt = T(() => import("./UserOptions-BQO4YFrn.js")), yt = T(() => import("./PackageVersion-Br3DrrFh.js")), mt = T(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_radar: kt } = vo(), { isThemeValid: Ct, warnInvalidTheme: At } = bo(), F = ut, be = v(() => !!F.dataset && Object.keys(F.dataset).length), m = c(Kt()), te = c(!1), oe = c(""), ye = c(0), _ = c(null), me = c(null), ke = c(null), Ce = c(null), Ae = c(null), we = c(0), $e = c(0), _e = c(0), Te = c(!1), G = c(null), ae = c(null), e = c(re()), { loading: Fe, FINAL_DATASET: x } = go({
...jt(F),
FINAL_CONFIG: e,
prepareConfig: re,
callback: () => {
Promise.resolve().then(async () => {
await Je(), b.value.showTable = e.value.table.show;
});
},
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: Qt({
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: le, setUserOptionsVisibility: Pe, keepUserOptionState: Se } = yo({ config: e.value }), { svgRef: H } = mo({ config: e.value.style.chart.title });
function re() {
const t = fe({
userConfig: F.config,
defaultConfig: kt
}), a = t.theme;
if (!a) return t;
if (!Ct.value(t))
return At(t), t;
const o = fe({
userConfig: st[a] || F.config,
defaultConfig: t
}), l = fe({
userConfig: F.config,
defaultConfig: o
});
return {
...l,
customPalette: l.customPalette.length ? l.customPalette : Zt[a] || R
};
}
ve(() => F.config, (t) => {
e.value = re(), le.value = !e.value.userOptions.showOnChartHover, Oe(), we.value += 1, $e.value += 1, _e.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 P = He(null), V = He(null), I = v(() => e.value.debug);
function Oe() {
if (eo(F.dataset) && z({
componentName: "VueUiRadar",
type: "dataset",
debug: I.value
}), e.value.responsive) {
const t = io(() => {
const { width: a, height: o } = co({
chart: _.value,
title: e.value.style.chart.title.text ? me.value : null,
legend: e.value.style.chart.legend.show ? ke.value : null,
source: Ce.value,
noTitle: Ae.value
});
requestAnimationFrame(() => {
i.value.width = a, i.value.height = o, Ve();
});
});
P.value && (V.value && P.value.unobserve(V.value), P.value.disconnect()), P.value = new ResizeObserver(t), V.value = _.value.parentNode, P.value.observe(V.value);
}
Ve();
}
Xt(() => {
Te.value = !0, Oe();
}), Yt(() => {
P.value && (V.value && P.value.unobserve(V.value), P.value.disconnect());
});
const { isPrinting: De, isImaging: xe, generatePdf: Ie, generateImage: Be } = po({
elementId: `vue-ui-radar_${m.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-radar",
options: e.value.userOptions.print
}), wt = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ee = v(() => to(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
}), $t = 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
}), _t = ct, f = c([]), j = c(null), U = c(!1);
function q(t) {
U.value = !0, f.value.includes(t) ? (j.value = t, f.value = f.value.filter((a) => a !== t), setTimeout(() => {
U.value = !1, j.value = null;
}, 500)) : (f.value.push(t), setTimeout(() => {
U.value = !1;
}, 500)), _t("selectLegend", O.value.filter((a, o) => !f.value.includes(o)).map((a) => ({
name: a.name,
color: a.color,
proportion: a.totalProportion
})));
}
function Tt() {
return O.value.map((t) => ({
name: t.name,
color: t.color,
proportion: t.totalProportion
}));
}
function Ft() {
const t = x.value;
if ([null, void 0].includes(t?.categories)) {
z({
componentName: "VueUiRadar",
type: "dataset",
debug: I.value
}), z({
componentName: "VueUiRadar",
type: "datasetAttribute",
property: "categories ({ name: string; prefix?: string; suffix?: string}[])",
debug: I.value
});
return;
}
t.categories.length === 0 ? z({
componentName: "VueUiRadar",
type: "datasetAttributeEmpty",
property: "categories",
debug: I.value
}) : t.categories.forEach((a, o) => {
et({
datasetObject: a,
requiredAttributes: ["name"]
}).forEach((l) => {
z({
componentName: "VueUiRadar",
type: "datasetAttribute",
property: `category.${l} at index ${o}`,
index: o,
debug: I.value
});
});
}), [null, void 0].includes(t?.series) ? z({
componentName: "VueUiRadar",
type: "datasetAttribute",
property: "series ({ name: string; values: number[]; color?: string; target: number}[])",
debug: I.value
}) : t.series.forEach((a, o) => {
et({
datasetObject: a,
requiredAttributes: ["name", "values", "target"]
}).forEach((l) => {
z({
componentName: "VueUiRadar",
type: "datasetSerieAttribute",
key: "series",
property: l,
index: o,
debug: I.value
});
});
});
}
ve(
() => x.value,
() => Ft(),
{ deep: !0, immediate: !0 }
);
const $ = v(() => {
const t = Array.isArray(x.value?.categories) ? x.value.categories : [], a = Ee.value ?? R;
return t.map((o, l) => ({
name: o?.name ?? "",
categoryId: `radar_category_${m.value}_${l}`,
color: Ke(o?.color) || a[l] || R[l % R.length],
prefix: o?.prefix ?? "",
suffix: o?.suffix ?? ""
}));
}), k = v(() => x.value.series.map((t, a) => ({
...t,
color: Ke(t.color) || Ee.value[a] || R[a] || R[a % R.length],
serieId: `radar_serie_${m.value}_${a}`,
formatter: t.formatter || null,
absoluteIndex: a
})));
function Le(t) {
if (!k.value.length)
return e.value.debug && console.warn("VueUiRadar - There are no series to show."), null;
const a = O.value.find((o) => o.name === t);
return a || (e.value.debug && console.warn(`VueUiRadar - Series name not found "${t}"`), null);
}
function Pt(t) {
const a = Le(t);
a !== null && f.value.includes(a.absoluteIndex) && q(a.absoluteIndex);
}
function St(t) {
const a = Le(t);
a !== null && (f.value.includes(a.absoluteIndex) || q(a.absoluteIndex));
}
const Ne = v(() => Math.max(...k.value.flatMap((t) => t.values))), Re = v(() => k.value.length), ne = v(() => Math.min(i.value.width, i.value.height) / 3), ze = v(() => Qe({
plot: { x: i.value.width / 2, y: i.value.height / 2 },
radius: ne.value,
sides: Re.value,
rotation: 0
})), Ot = v(() => {
const t = [];
for (let a = 0; a < ne.value; a += ne.value / e.value.style.chart.layout.grid.graduations)
t.push(a);
return t;
}), S = v(() => ze.value.coordinates.map((t, a) => {
const o = k.value[a].values.map((l) => xt({
centerX: i.value.width / 2,
centerY: i.value.height / 2,
apexX: t.x,
apexY: t.y,
proportion: l / (k.value[a].target || Ne.value)
}));
return {
...t,
...k.value[a],
plots: o
};
}).map((t) => ({
...t,
labelX: se(t).x,
labelY: se(t).y,
labelAnchor: se(t).anchor
})));
function se({ 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 Dt = v({
get: () => e.value.style.chart.layout.labels.dataLabels.fontSize,
set: (t) => t
}), { autoSizeLabels: Ve } = ko({
svgRef: H,
fontSize: e.value.style.chart.layout.labels.dataLabels.fontSize,
minFontSize: 6,
sizeRef: Dt,
labelClass: ".vue-ui-radar-apex-label"
});
function xt({ centerX: t, centerY: a, apexX: o, apexY: l, proportion: r }) {
return {
x: t + (o - t) * r,
y: a + (l - a) * r
};
}
const O = v(() => {
const t = k.value.map((a, o) => a.values.map((l) => l / (a.target || Ne.value)));
return $.value.map((a, o) => {
const l = oo(t.map((r) => r[o]).reduce((r, h) => r + h, 0) / k.value.length);
return {
...a,
absoluteIndex: o,
totalProportion: l,
shape: "circle",
opacity: f.value.includes(o) ? 0.5 : 1,
segregate: () => q(o),
isSegregated: f.value.includes(o),
display: `${a.name}: ${W({
v: (l ?? 0) * 100,
s: "%",
r: e.value.style.chart.legend.roundingPercentage
})}`
};
});
}), 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" : ""
})), J = v(() => {
const t = [
{ name: e.value.translations.datapoint, color: "" },
{ name: e.value.translations.target, color: "" },
...O.value
], a = x.value.series.map((l) => [
l.name,
he(
l.formatter,
l.target,
W({
p: l.prefix,
v: l.target,
s: l.suffix,
r: e.value.table.td.roundingValue
})
),
...l.values.map((r, h) => `${he(
l.formatter,
r,
W({ p: $.value[h]?.prefix ?? "", v: r, s: $.value[h]?.suffix ?? "", r: e.value.table.td.roundingValue })
)} (${isNaN(r / l.target) ? "" : W({
v: r / 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 };
}), K = c(null), ue = c([]), ie = c(null);
function Bt(t, a) {
te.value = !1, K.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
}
function Et(t, a) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
}
function Lt(t, a) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a });
const o = $.value.slice();
ue.value = [], K.value = a, te.value = !0, ie.value = {
datapoint: t,
seriesIndex: a,
series: {
categories: o,
datapoints: k.value,
radar: S.value
},
config: e.value
};
const l = e.value.style.chart.tooltip.customFormat;
if (so(l) && uo(() => l({
seriesIndex: a,
datapoint: t,
series: { categories: o, datapoints: k.value, radar: S.value },
config: e.value
}))) {
oe.value = l({
seriesIndex: a,
datapoint: t,
series: { categories: o, datapoints: k.value, radar: S.value },
config: e.value
});
return;
}
oe.value = `<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 r = 0; r < t.values.length; r += 1)
if (!f.value.includes(r)) {
const h = o[r], y = t.values[r], Xe = isNaN(y / t.target) ? 0 : y / t.target * 100, M = he(
t.formatter,
y,
W({
p: $.value[r].prefix,
v: y,
s: $.value[r].suffix,
r: e.value.style.chart.tooltip.roundingValue
}),
{ datapoint: t }
), Ye = W({
v: Xe,
s: "%",
r: e.value.style.chart.tooltip.roundingPercentage
}), Gt = e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${M} (${Ye})` : e.value.style.chart.tooltip.showValue && !e.value.style.chart.tooltip.showPercentage ? M : !e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${Ye}` : "";
ue.value.push({
name: h?.name ?? `#${r + 1}`,
value: t.values[r] / t.target * 100,
color: h?.color,
suffix: Gt,
prefix: "",
rounding: e.value.style.chart.tooltip.roundingPercentage,
formatter: t.formatter
});
}
}
function ce(t = null) {
Je(() => {
const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = [[""], [e.value.translations.target], ...O.value.flatMap((y) => [[y.name], ["%"]])], l = x.value.series.map((y, Xe) => [y.name, y.target, ...y.values.flatMap((M) => [
M,
isNaN(M / y.target) ? "" : M / y.target * 100
])]), r = a.concat([o]).concat(l), h = ro(r);
t ? t(h) : no({ csvContent: h, title: e.value.style.chart.title.text || "vue-ui-radar" });
});
}
const B = c(!1);
function Ue(t) {
B.value = t, ye.value += 1;
}
function Me() {
b.value.showTable = !b.value.showTable;
}
function We() {
b.value.showTooltip = !b.value.showTooltip;
}
const Q = c(!1);
function de() {
Q.value = !Q.value;
}
async function Nt({ scale: t = 2 } = {}) {
if (!_.value) return;
const { width: a, height: o } = _.value.getBoundingClientRect(), l = a / o, { imageUri: r, base64: h } = await Co({ domElement: _.value, base64: !0, img: !0, scale: t });
return {
imageUri: r,
base64: h,
title: e.value.style.chart.title.text,
width: a,
height: o,
aspectRatio: l
};
}
const X = v(() => {
const t = e.value.table.useDialog && !e.value.table.show, a = b.value.showTable;
return {
component: t ? mt : ht,
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: _.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
}
}
}
};
});
ve(() => b.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && G.value ? G.value.open() : "close" in G.value && G.value.close());
});
function Ge() {
b.value.showTable = !1, ae.value && ae.value.setTableIconState(!1);
}
const Rt = v(() => O.value.map((t) => ({
...t,
name: t.display
}))), zt = v(() => e.value.style.chart.backgroundColor), Vt = v(() => e.value.style.chart.legend), Ut = v(() => e.value.style.chart.title), { exportSvg: Mt, getSvg: Wt } = fo({
svg: H,
title: Ut,
legend: Vt,
legendItems: Rt,
backgroundColor: zt
});
async function je({ isCb: t }) {
if (t) {
const { blob: a, url: o, text: l, dataUrl: r } = await Wt();
e.value.userOptions.callbacks.svg({ blob: a, url: o, text: l, dataUrl: r });
} else
Mt();
}
return it({
getData: Tt,
getImage: Nt,
generatePdf: Ie,
generateCsv: ce,
generateImage: Be,
generateSvg: je,
hideSeries: St,
showSeries: Pt,
toggleTable: Me,
toggleTooltip: We,
toggleAnnotator: de,
toggleFullscreen: Ue
}), (t, a) => (n(), s("div", {
class: Y(`vue-data-ui-component vue-ui-radar ${B.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "radarChart",
ref: _,
id: `vue-ui-radar_${m.value}`,
style: Z(`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] = () => u(Pe)(!0)),
onMouseleave: a[3] || (a[3] = () => u(Pe)(!1))
}, [
e.value.userOptions.buttons.annotator ? (n(), D(u(ft), {
key: 0,
svgRef: u(H),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: Q.value,
onClose: de
}, {
"annotator-action-close": d(() => [
g(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": d(({ color: o }) => [
g(t.$slots, "annotator-action-color", A(w({ color: o })), void 0, !0)
]),
"annotator-action-draw": d(({ mode: o }) => [
g(t.$slots, "annotator-action-draw", A(w({ mode: o })), void 0, !0)
]),
"annotator-action-undo": d(({ disabled: o }) => [
g(t.$slots, "annotator-action-undo", A(w({ disabled: o })), void 0, !0)
]),
"annotator-action-redo": d(({ disabled: o }) => [
g(t.$slots, "annotator-action-redo", A(w({ disabled: o })), void 0, !0)
]),
"annotator-action-delete": d(({ disabled: o }) => [
g(t.$slots, "annotator-action-delete", A(w({ disabled: o })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
wt.value ? (n(), s("div", {
key: 1,
ref_key: "noTitle",
ref: Ae,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : p("", !0),
e.value.style.chart.title.text ? (n(), s("div", {
key: 2,
ref_key: "chartTitle",
ref: me,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(n(), D(Ao, {
key: `title_${we.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)) : p("", !0),
C("div", {
id: `legend-top-${m.value}`
}, null, 8, To),
e.value.userOptions.show && be.value && (u(Se) || u(le)) ? (n(), D(u(bt), {
ref_key: "userOptionsRef",
ref: ae,
key: `user_options_${ye.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isImaging: u(xe),
isPrinting: u(De),
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,
hasSvg: e.value.userOptions.buttons.svg,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: B.value,
isTooltip: b.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: _.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: Q.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: Ue,
onGeneratePdf: u(Ie),
onGenerateCsv: ce,
onGenerateImage: u(Be),
onGenerateSvg: je,
onToggleTable: Me,
onToggleTooltip: We,
onToggleAnnotator: de,
style: Z({
visibility: u(Se) ? u(le) ? "visible" : "hidden" : "visible"
})
}, qe({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: d(({ isOpen: o, color: l }) => [
g(t.$slots, "menuIcon", A(w({ isOpen: o, color: l })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: d(() => [
g(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: d(() => [
g(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: d(() => [
g(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: d(() => [
g(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: d(() => [
g(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: d(() => [
g(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: d(({ toggleFullscreen: o, isFullscreen: l }) => [
g(t.$slots, "optionFullscreen", A(w({ toggleFullscreen: o, isFullscreen: l })), void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: d(({ toggleAnnotator: o, isAnnotator: l }) => [
g(t.$slots, "optionAnnotator", A(w({ toggleAnnotator: o, isAnnotator: l })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
(n(), s("svg", {
ref_key: "svgRef",
ref: H,
xmlns: u(ao),
class: Y({ "vue-data-ui-fullscreen--on": B.value, "vue-data-ui-fulscreen--off": !B.value }),
viewBox: `0 0 ${i.value.width <= 0 ? 10 : i.value.width} ${i.value.height <= 0 ? 10 : i.value.height}`,
style: Z(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
ee(u(yt)),
t.$slots["chart-background"] ? (n(), s("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"
}
}, [
g(t.$slots, "chart-background", {}, void 0, !0)
], 8, Po)) : p("", !0),
C("defs", null, [
(n(!0), s(E, null, L($.value, (o, l) => (n(), s("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `radar_gradient_${m.value}_${l}`
}, [
C("stop", {
offset: "0%",
"stop-color": u(pe)(u(lo)(o.color, 0.05), e.value.style.chart.layout.dataPolygon.opacity)
}, null, 8, Oo),
C("stop", {
offset: "100%",
"stop-color": u(pe)(o.color, e.value.style.chart.layout.dataPolygon.opacity)
}, null, 8, Do)
], 8, So))), 256))
]),
e.value.style.chart.layout.grid.show ? (n(), s("g", xo, [
(n(!0), s(E, null, L(S.value, (o) => (n(), s("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, Io))), 256)),
e.value.style.chart.layout.grid.graduations > 0 ? (n(), s("g", Bo, [
(n(!0), s(E, null, L(Ot.value, (o) => (n(), s("path", {
d: u(Qe)({
plot: { x: i.value.width / 2, y: i.value.height / 2 },
radius: o,
sides: Re.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, Eo))), 256))
])) : p("", !0)
])) : p("", !0),
C("path", {
d: ze.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, Lo),
e.value.style.chart.layout.labels.dataLabels.show ? (n(), s("g", No, [
(n(!0), s(E, null, L(S.value, (o, l) => (n(), s("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: (r) => Lt(o, l),
onMouseleave: (r) => Bt(o, l),
onClick: (r) => Et(o, l)
}, N(o.name), 41, Ro))), 256))
])) : p("", !0),
(n(!0), s(E, null, L($.value, (o, l) => (n(), s("g", null, [
C("g", null, [
e.value.useCssAnimation || !e.value.useCssAnimation && !f.value.includes(l) ? (n(), s("polygon", {
key: 0,
points: u(Ze)(S.value.map((r) => r.plots[l]), !1, !0),
stroke: e.value.style.chart.backgroundColor,
"stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth + 1,
fill: "none",
class: Y({ "animated-out": f.value.includes(l) && e.value.useCssAnimation, "animated-in": U.value && j.value === l && e.value.useCssAnimation })
}, null, 10, zo)) : p("", !0),
e.value.useCssAnimation || !e.value.useCssAnimation && !f.value.includes(l) ? (n(), s("polygon", {
key: 1,
points: u(Ze)(S.value.map((r) => r.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})` : u(pe)(o.color, e.value.style.chart.layout.dataPolygon.opacity),
class: Y({ "animated-out": f.value.includes(l) && e.value.useCssAnimation, "animated-in": U.value && j.value === l && e.value.useCssAnimation })
}, null, 10, Vo)) : p("", !0)
])
]))), 256)),
e.value.style.chart.layout.plots.show ? (n(), s("g", Uo, [
(n(!0), s(E, null, L(S.value, (o, l) => (n(), s("g", null, [
(n(!0), s(E, null, L(o.plots, (r, h) => (n(), s("circle", {
cx: r.x,
cy: r.y,
fill: f.value.includes(h) ? "transparent" : $.value[h] ? $.value[h].color : "transparent",
r: K.value !== null && K.value === l ? e.value.style.chart.layout.plots.radius * 1.6 : e.value.style.chart.layout.plots.radius,
stroke: f.value.includes(h) ? "transparent" : e.value.style.chart.backgroundColor,
"stroke-width": 0.5,
class: Y({ "animated-out": f.value.includes(h) && e.value.useCssAnimation, "animated-in": U.value && j.value === h && e.value.useCssAnimation })
}, null, 10, Mo))), 256))
]))), 256))
])) : p("", !0),
g(t.$slots, "svg", { svg: i.value }, void 0, !0)
], 14, Fo)),
t.$slots.watermark ? (n(), s("div", Wo, [
g(t.$slots, "watermark", A(w({ isPrinting: u(De) || u(xe) })), void 0, !0)
])) : p("", !0),
C("div", {
id: `legend-bottom-${m.value}`
}, null, 8, Go),
Te.value ? (n(), D(Ht, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${m.value}` : `#legend-bottom-${m.value}`
}, [
C("div", {
ref_key: "chartLegend",
ref: ke
}, [
e.value.style.chart.legend.show ? (n(), D(wo, {
key: `legend_${_e.value}`,
legendSet: O.value,
config: It.value,
onClickMarker: a[0] || (a[0] = ({ i: o }) => q(o))
}, {
item: d(({ legend: o, index: l }) => [
u(Fe) ? p("", !0) : (n(), s("div", {
key: 0,
onClick: (r) => o.segregate(),
style: Z(`opacity:${f.value.includes(l) ? 0.5 : 1}`)
}, N(o.display), 13, jo))
]),
_: 1
}, 8, ["legendSet", "config"])) : g(t.$slots, "legend", {
key: 1,
legend: O.value
}, void 0, !0)
], 512)
], 8, ["to"])) : p("", !0),
t.$slots.source ? (n(), s("div", {
key: 6,
ref_key: "source",
ref: Ce,
dir: "auto"
}, [
g(t.$slots, "source", {}, void 0, !0)
], 512)) : p("", !0),
ee(u(dt), {
show: b.value.showTooltip && te.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: _.value,
content: oe.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": d(() => [
g(t.$slots, "tooltip-before", A(w({ ...ie.value })), void 0, !0)
]),
"tooltip-after": d(() => [
["function"].includes(typeof e.value.style.chart.tooltip.customFormat) ? p("", !0) : (n(), s("div", Xo, [
ee(u(gt), {
dataset: ue.value,
config: $t.value,
backgroundOpacity: 0
}, {
"data-label": d(({ bar: o }) => [
C("div", Yo, [
C("span", Ho, N(o.name + (e.value.style.chart.tooltip.showValue || e.value.style.chart.tooltip.showPercentage ? ":" : "")), 1),
e.value.style.chart.tooltip.showValue || e.value.style.chart.tooltip.showPercentage ? (n(), s("span", qo, N(o.suffix), 1)) : p("", !0)
])
]),
_: 1
}, 8, ["dataset", "config"])
])),
g(t.$slots, "tooltip-after", A(w({ ...ie.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "fontSize", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
be.value && e.value.userOptions.buttons.table ? (n(), D(qt(X.value.component), Jt({ key: 7 }, X.value.props, {
ref_key: "tableUnit",
ref: G,
onClose: Ge
}), qe({
content: d(() => [
(n(), D(u(pt), {
key: `table_${$e.value}`,
colNames: J.value.colNames,
head: J.value.head,
body: J.value.body,
config: J.value.config,
title: e.value.table.useDialog ? "" : X.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: Ge
}, {
th: d(({ th: o }) => [
ge(N(o.name), 1)
]),
td: d(({ td: o }) => [
ge(N(o), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: d(() => [
ge(N(X.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: d(() => [
C("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: a[1] || (a[1] = (o) => ce(e.value.userOptions.callbacks.csv))
}, [
ee(u(vt), {
name: "excel",
stroke: X.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : p("", !0),
u(Fe) ? (n(), D(ho, { key: 8 })) : p("", !0)
], 46, _o));
}
}, Ko = /* @__PURE__ */ $o(Jo, [["__scopeId", "data-v-bee25c8b"]]), ha = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Ko
}, Symbol.toStringTag, { value: "Module" }));
export {
ga as a,
ha as b,
Ko as v
};