vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
744 lines (743 loc) • 32.3 kB
JavaScript
import { useCssVars as rt, computed as v, defineAsyncComponent as F, ref as f, shallowRef as $e, onMounted as nt, onBeforeUnmount as ut, watch as Le, createElementBlock as d, openBlock as r, unref as s, normalizeStyle as x, normalizeClass as z, createBlock as N, createCommentVNode as m, withCtx as n, renderSlot as i, normalizeProps as k, guardReactiveProps as A, createSlots as Fe, createVNode as De, createElementVNode as w, mergeProps as H, Fragment as X, renderList as W, toDisplayString as V, resolveDynamicComponent as it, createTextVNode as _e, nextTick as ct } from "vue";
import { c as vt, o as dt, g as xe, l as ft, m as ht, q as bt, a as q, d as Y, X as gt, x as mt, a2 as ae, v as pt, r as yt } from "./lib-2iaAPQ_c.js";
import { t as Ct, u as kt } from "./useResponsive-DfdjqQps.js";
import { u as At, a as le } from "./useNestedProp-2p4Tjzc8.js";
import { u as wt } from "./usePrinter-ChVMpU2f.js";
import { u as $t } from "./useSvgExport-ByUukOZt.js";
import { u as Lt } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Ft } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Dt } from "./useChartAccessibility-9icAAmYg.js";
import _t from "./img-CqYIrJ8I.js";
import xt from "./Title-DSOZzIrU.js";
import { _ as St } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", area: { color: "#3A3A3A" }, bars: { stroke: "#1A1A1A", dataLabels: { name: { color: "#CCCCCC" }, value: { color: "#CCCCCC" } } }, circles: { stroke: "#1A1A1A" }, circleLinks: { color: "#3A3A3A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, Te = { table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } }, style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", area: { color: "#D32F2F20" }, bars: { defaultColor: "#E64A19", stroke: "#FFF8E1", dataLabels: { name: { color: "#424242" }, value: { color: "#424242" } } }, circles: { stroke: "#FFF8E1" }, circleLinks: { color: "#D32F2F40" }, title: { color: "#424242", subtitle: { color: "#757575" } } } } }, Oe = { table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } }, style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", area: { color: "#D32F2F20" }, bars: { defaultColor: "#E64A19", stroke: "#1E1E1E", dataLabels: { name: { color: "#BDBDBD" }, value: { color: "#BDBDBD" } } }, circles: { stroke: "#1E1E1E" }, circleLinks: { color: "#D32F2F60" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } } }, Be = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", area: { color: "#66CC6620" }, bars: { defaultColor: "#66CC66", stroke: "#1A1A1A", dataLabels: { name: { color: "#99AA99" }, value: { color: "#99AA99" } } }, circles: { stroke: "#1A1A1A" }, circleLinks: { color: "#66CC6620" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } } }, Ee = { table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } }, style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", area: { color: "#8F837A20" }, bars: { defaultColor: "#8F837A", stroke: "#fbfafa", dataLabels: { name: { color: "#8A9892" }, value: { color: "#8A9892" } } }, circles: { stroke: "#fbfafa" }, circleLinks: { color: "#8F837A20" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } } }, ze = { table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } }, style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", area: { color: "#8A989230" }, bars: { defaultColor: "#61747E", stroke: "#50606C", dataLabels: { name: { color: "#50606C" }, value: { color: "#50606C" } } }, circles: { stroke: "#50606C" }, circleLinks: { color: "#8A989230" }, title: { color: "#50606C", subtitle: { color: "#718890" } } } } }, Ne = {
default: {},
dark: Se,
celebration: Te,
celebrationNight: Oe,
hack: Be,
zen: Ee,
concrete: ze
}, na = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Te,
celebrationNight: Oe,
concrete: ze,
dark: Se,
default: Ne,
hack: Be,
zen: Ee
}, Symbol.toStringTag, { value: "Module" })), Tt = ["id"], Ot = ["xmlns", "viewBox"], Bt = ["width", "height"], Et = ["id"], zt = ["stop-color"], Nt = ["stop-color"], Pt = ["stop-color"], It = ["stroke", "stroke-width"], Rt = ["stroke", "stroke-width"], Mt = ["x", "y", "font-size", "fill", "font-weight"], Ut = ["points", "fill"], Vt = ["stroke", "stroke-width", "rx"], jt = ["x", "y", "font-size", "fill", "font-weight"], Gt = ["x", "y", "font-size", "fill", "font-weight"], Ht = {
key: 5,
class: "vue-data-ui-watermark"
}, Xt = ["innerHTML"], Wt = {
__name: "vue-ui-funnel",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(Pe, { expose: Ie }) {
rt((t) => ({
v1175b36b: Ze.value
}));
const Re = F(() => import("./BaseIcon-CbVDYv89.js")), Me = F(() => import("./vue-ui-skeleton-CprmuWSV.js")), Ue = F(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), Ve = F(() => import("./DataTable-BT_IeqPe.js")), je = F(() => import("./UserOptions-BQO4YFrn.js")), Ge = F(() => import("./PenAndPaper-CvyKWfNl.js")), He = F(() => import("./PackageVersion-Br3DrrFh.js")), Xe = F(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_funnel: We } = At(), { isThemeValid: qe, warnInvalidTheme: Ye } = Lt(), p = Pe, $ = f(null), P = f(vt()), oe = f(0), se = f(0), re = f(0), ne = f(null), ue = f(null), ie = f(null), L = $e(null), S = $e(null), D = f(!1), I = f(null), J = f(null), T = v(() => !!p.dataset && p.dataset.length);
nt(ce);
function ce() {
if (dt(p.dataset) ? xe({
componentName: "VueUiFunnel",
type: "dataset"
}) : p.dataset.forEach((t, l) => {
ft({
datasetObject: t,
requiredAttributes: ["name", "value"]
}).forEach((a) => {
T.value = !1, xe({
componentName: "VueUiFunnel",
type: "datasetSerieAttribute",
property: a,
index: l
});
});
}), e.value.responsive) {
const t = Ct(() => {
const { width: l, height: a } = kt({
chart: $.value,
title: e.value.style.chart.title.text ? ie.value : null,
source: ue.value,
noTitle: ne.value
});
requestAnimationFrame(() => {
b.value.height = a, b.value.width = l, C.value = pe(), e.value.responsiveProportionalSizing ? (h.value.circles = ae({
relator: Math.min(l, a),
adjuster: 600,
source: e.value.style.chart.circles.dataLabels.fontSize,
threshold: 10,
fallback: 10
}), h.value.names = ae({
relator: Math.min(l, a),
adjuster: 600,
source: e.value.style.chart.bars.dataLabels.name.fontSize,
threshold: 10,
fallback: 10
}), h.value.values = ae({
relator: Math.min(l, a),
adjuster: 600,
source: e.value.style.chart.bars.dataLabels.value.fontSize,
threshold: 10,
fallback: 10
})) : (h.value.circles = e.value.style.chart.circles.dataLabels.fontSize, h.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, h.value.values = e.value.style.chart.bars.dataLabels.value.fontSize);
});
});
L.value && (S.value && L.value.unobserve(S.value), L.value.disconnect()), L.value = new ResizeObserver(t), S.value = $.value.parentNode, L.value.observe(S.value);
}
}
ut(() => {
L.value && (S.value && L.value.unobserve(S.value), L.value.disconnect());
});
function ve() {
const t = le({
userConfig: p.config,
defaultConfig: We
}), l = t.theme;
if (!l) return t;
if (!qe.value(t))
return Ye(t), t;
const a = le({
userConfig: Ne[l] || p.config,
defaultConfig: t
});
return le({
userConfig: p.config,
defaultConfig: a
});
}
const e = v({
get: () => ve(),
set: (t) => t
}), { userOptionsVisible: K, setUserOptionsVisibility: de, keepUserOptionState: fe } = Ft({ config: e.value }), { svgRef: Q } = Dt({ config: e.value.style.chart.title });
Le(() => p.config, (t) => {
e.value = ve(), K.value = !e.value.userOptions.showOnChartHover, ce(), se.value += 1, re.value += 1, h.value.circles = e.value.style.chart.circles.dataLabels.fontSize, h.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, h.value.values = e.value.style.chart.bars.dataLabels.value.fontSize, O.value.showTable = e.value.table.show;
}, { deep: !0 });
const { isPrinting: he, isImaging: be, generatePdf: ge, generateImage: me } = wt({
elementId: `funnel_${P.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-funnel",
options: e.value.userOptions.print
}), Je = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), O = f({
showTable: e.value.table.show
}), h = f({
circles: e.value.style.chart.circles.dataLabels.fontSize,
names: e.value.style.chart.bars.dataLabels.name.fontSize,
values: e.value.style.chart.bars.dataLabels.value.fontSize
}), b = v({
get: () => ({
height: e.value.style.chart.height,
width: e.value.style.chart.width
}),
set: (t) => t
}), y = v(() => T.value ? p.dataset.map((t, l) => ({
...t,
color: t.color ? ht(t.color) : bt(e.value.style.chart.bars.defaultColor, l / p.dataset.length)
})) : []);
setTimeout(() => {
D.value = !0;
}, y.value.length * 150);
function pe() {
const t = e.value.style.chart.padding.left, l = e.value.style.chart.padding.top;
return {
left: t,
top: l,
right: b.value.width - e.value.style.chart.padding.right,
bottom: b.value.height - e.value.style.chart.padding.bottom,
width: b.value.width - t - e.value.style.chart.padding.right,
height: b.value.height - l - e.value.style.chart.padding.bottom
};
}
const C = f(pe()), B = v(() => C.value.height / p.dataset.length), _ = v(() => B.value * e.value.style.chart.bars.gapRatio), ye = v(() => C.value.width * e.value.style.chart.barCircleSpacingRatio), u = v(() => y.value.map((t, l) => {
const a = B.value - _.value, o = C.value.top + _.value / 2 * l + (B.value - _.value / 2) * l + _.value / 2, g = t.value / y.value[0].value, c = (C.value.width - a - ye.value) * (t.value / y.value[0].value);
return {
...t,
cx: C.value.left + a / 2,
cy: o + a / 2,
datapointIndex: l,
fill: t.color,
height: Math.max(a, 0),
proportion: g,
r: Math.max(a / 2, 0),
width: Math.max(c, 0),
x: C.value.left + a + ye.value,
y: o
};
})), Ke = v(() => {
const t = u.value.map((l) => `${l.x + l.width},${l.y + (B.value - _.value) / 2}`);
return `${u.value[0].x},${u.value[0].y + (B.value - _.value) / 2} ${t.toString()} ${u.value.at(-1).x},${u.value.at(-1).y + (B.value - _.value) / 2}`;
}), Qe = v(() => ({
x1: u.value[0].cx,
y1: u.value[0].cy,
x2: u.value.at(-1).cx,
y2: u.value.at(-1).cy
})), E = f(!1);
function Ce(t) {
E.value = t, oe.value += 1;
}
const Ze = v(() => `${y.value.length * 150}ms`), j = f(!1);
function Z() {
j.value = !j.value;
}
function ke() {
O.value.showTable = !O.value.showTable;
}
const R = v(() => {
const t = y.value.map((a) => ({
name: a.name,
color: a.color
})), l = y.value.map((a) => a.value);
return { head: t, body: l };
}), G = v(() => {
const t = [
e.value.table.columnNames.series,
e.value.table.columnNames.value,
e.value.table.columnNames.percentage
], l = R.value.head.map((g, c) => {
const U = q(
e.value.style.chart.bars.dataLabels.value.formatter,
R.value.body[c],
Y({
p: e.value.style.chart.bars.dataLabels.value.prefix,
v: R.value.body[c],
s: e.value.style.chart.bars.dataLabels.value.suffix,
r: e.value.table.td.roundingValue
}),
{ datapoint: u.value[c] }
), te = q(
e.value.style.chart.circles.dataLabels.formatter,
u.value[c].proportion * 100,
Y({
v: u.value[c].proportion * 100,
s: "%",
r: e.value.table.td.roundingPercentage
}),
{ datapoint: u.value[c] }
);
return [
{ color: g.color, name: g.name },
U,
te
];
}), a = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint
};
return {
colNames: [
e.value.table.columnNames.series,
e.value.table.columnNames.value,
e.value.table.columnNames.percentage
],
head: t,
body: l,
config: a
};
});
function ee(t = null) {
ct(() => {
const l = R.value.head.map((g, c) => [[
g.name
], [R.value.body[c]], [u.value[c].proportion * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value], ["%"]]].concat(l), o = pt(a);
t ? t(o) : yt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-funnel" });
});
}
function et() {
return y.value;
}
async function tt({ scale: t = 2 } = {}) {
if (!$.value) return;
const { width: l, height: a } = $.value.getBoundingClientRect(), o = l / a, { imageUri: g, base64: c } = await _t({ domElement: $.value, base64: !0, img: !0, scale: t });
return {
imageUri: g,
base64: c,
title: e.value.style.chart.title.text,
width: l,
height: a,
aspectRatio: o
};
}
const M = v(() => {
const t = e.value.table.useDialog && !e.value.table.show, l = O.value.showTable;
return {
component: t ? Xe : Ue,
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: E.value,
fullscreenParent: $.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
}
}
}
};
});
Le(() => O.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && I.value ? I.value.open() : "close" in I.value && I.value.close());
});
function Ae() {
O.value.showTable = !1, J.value && J.value.setTableIconState(!1);
}
const at = v(() => e.value.style.chart.backgroundColor), lt = v(() => e.value.style.chart.title), { exportSvg: ot, getSvg: st } = $t({
svg: Q,
title: lt,
backgroundColor: at
});
async function we({ isCb: t }) {
if (t) {
const { blob: l, url: a, text: o, dataUrl: g } = await st();
e.value.userOptions.callbacks.svg({ blob: l, url: a, text: o, dataUrl: g });
} else
ot();
}
return Ie({
getData: et,
getImage: tt,
generatePdf: ge,
generateCsv: ee,
generateImage: me,
generateSvg: we,
toggleTable: ke,
toggleAnnotator: Z,
toggleFullscreen: Ce
}), (t, l) => (r(), d("div", {
ref_key: "funnelChart",
ref: $,
class: z(`vue-data-ui-component vue-ui-funnel ${E.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
style: x(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
id: `funnel_${P.value}`,
onMouseenter: l[1] || (l[1] = () => s(de)(!0)),
onMouseleave: l[2] || (l[2] = () => s(de)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), N(s(Ge), {
key: 0,
svgRef: s(Q),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: j.value,
onClose: Z
}, {
"annotator-action-close": n(() => [
i(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": n(({ color: a }) => [
i(t.$slots, "annotator-action-color", k(A({ color: a })), void 0, !0)
]),
"annotator-action-draw": n(({ mode: a }) => [
i(t.$slots, "annotator-action-draw", k(A({ mode: a })), void 0, !0)
]),
"annotator-action-undo": n(({ disabled: a }) => [
i(t.$slots, "annotator-action-undo", k(A({ disabled: a })), void 0, !0)
]),
"annotator-action-redo": n(({ disabled: a }) => [
i(t.$slots, "annotator-action-redo", k(A({ disabled: a })), void 0, !0)
]),
"annotator-action-delete": n(({ disabled: a }) => [
i(t.$slots, "annotator-action-delete", k(A({ disabled: a })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : m("", !0),
Je.value ? (r(), d("div", {
key: 1,
ref_key: "noTitle",
ref: ne,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : m("", !0),
e.value.style.chart.title.text ? (r(), d("div", {
key: 2,
ref_key: "chartTitle",
ref: ie,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(r(), N(xt, {
key: `title_${se.value}`,
config: {
title: {
cy: "funnel-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "funnel-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : m("", !0),
e.value.userOptions.show && T.value && (s(fe) || s(K)) ? (r(), N(s(je), {
ref_key: "userOptionsRef",
ref: J,
key: `user_option_${oe.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: s(he),
isImaging: s(be),
uid: P.value,
hasTooltip: !1,
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,
hasLabel: !1,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: E.value,
chartElement: $.value,
position: e.value.userOptions.position,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: j.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleAnnotator: Z,
onToggleFullscreen: Ce,
onGeneratePdf: s(ge),
onGenerateImage: s(me),
onGenerateSvg: we,
onToggleTable: ke,
onGenerateCsv: ee,
style: x({
visibility: s(fe) ? s(K) ? "visible" : "hidden" : "visible"
})
}, Fe({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: n(({ isOpen: a, color: o }) => [
i(t.$slots, "menuIcon", k(A({ isOpen: a, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: n(() => [
i(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: n(() => [
i(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: n(() => [
i(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: n(() => [
i(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: n(() => [
i(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: n(({ toggleFullscreen: a, isFullscreen: o }) => [
i(t.$slots, "optionFullscreen", k(A({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: n(({ toggleAnnotator: a, isAnnotator: o }) => [
i(t.$slots, "optionAnnotator", k(A({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : m("", !0),
T.value ? (r(), d("svg", {
key: 4,
ref_key: "svgRef",
ref: Q,
xmlns: s(gt),
class: z({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
viewBox: `0 0 ${b.value.width <= 0 ? 10 : b.value.width} ${b.value.height <= 0 ? 10 : b.value.height}`,
style: x(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
}, [
De(s(He)),
t.$slots["chart-background"] ? (r(), d("foreignObject", {
key: 0,
x: 0,
y: 0,
width: b.value.width <= 0 ? 10 : b.value.width,
height: b.value.height <= 0 ? 10 : b.value.height,
style: {
pointerEvents: "none"
}
}, [
i(t.$slots, "chart-background", {}, void 0, !0)
], 8, Bt)) : m("", !0),
w("defs", null, [
w("linearGradient", {
id: `funnel_area_${P.value}`,
x1: "0%",
x2: "100%",
y1: "0%",
y2: "0%"
}, [
w("stop", {
offset: "0%",
"stop-color": e.value.style.chart.backgroundColor,
"stop-opacity": 0
}, null, 8, zt),
w("stop", {
offset: "20%",
"stop-color": e.value.style.chart.area.color
}, null, 8, Nt),
w("stop", {
offset: "100%",
"stop-color": e.value.style.chart.area.color
}, null, 8, Pt)
], 8, Et)
]),
e.value.style.chart.circleLinks.show ? (r(), d("line", H({ key: 1 }, Qe.value, {
stroke: e.value.style.chart.circleLinks.color,
"stroke-width": 12 * e.value.style.chart.circleLinks.widthRatio,
"stroke-linecap": "round",
class: {
animated: e.value.useCssAnimation
},
style: {
strokeDasharray: e.value.useCssAnimation ? C.value.height : 0,
strokeDashoffset: e.value.useCssAnimation ? C.value.height : 0
}
}), null, 16, It)) : m("", !0),
(r(!0), d(X, null, W(u.value, ({ cx: a, cy: o, r: g, fill: c }, U) => (r(), d("circle", H({ ref_for: !0 }, { cx: a, cy: o, r: g, fill: c }, {
stroke: e.value.style.chart.circles.stroke,
"stroke-width": e.value.style.chart.circles.strokeWidth,
class: {
animated: e.value.useCssAnimation && !D.value
},
style: {
animationDelay: `${150 * U}ms`
}
}), null, 16, Rt))), 256)),
(r(!0), d(X, null, W(u.value, (a, o) => (r(), d("text", {
x: a.cx,
y: a.cy + h.value.circles / 3 + e.value.style.chart.circles.dataLabels.offsetY,
"text-anchor": "middle",
"font-size": h.value.circles,
fill: e.value.style.chart.circles.dataLabels.adaptColorToBackground ? s(mt)(a.color) : e.value.style.chart.circles.dataLabels.color,
"font-weight": e.value.style.chart.circles.dataLabels.bold ? "bold" : "normal",
class: z({
animated: e.value.useCssAnimation && !D.value
}),
style: x({
animationDelay: `${150 * o}ms`
})
}, V(s(q)(
e.value.style.chart.circles.dataLabels.formatter,
a.proportion * 100,
s(Y)({
v: a.proportion * 100,
s: "%",
r: e.value.style.chart.circles.dataLabels.rounding
}),
{ datapoint: a }
)), 15, Mt))), 256)),
e.value.style.chart.area.show ? (r(), d("polygon", {
key: 2,
points: Ke.value,
fill: `url(#funnel_area_${P.value})`,
class: z({
animated: e.value.useCssAnimation && !D.value
}),
style: x({
transition: e.value.useCssAnimation ? `all ${150 * y.value.length}ms ease-in` : "none"
})
}, null, 14, Ut)) : m("", !0),
(r(!0), d(X, null, W(u.value, ({ x: a, y: o, height: g, width: c, fill: U }, te) => (r(), d("rect", H({ ref_for: !0 }, { x: a, y: o, height: g, width: c, fill: U }, {
stroke: e.value.style.chart.bars.stroke,
"stroke-width": e.value.style.chart.bars.strokeWidth,
rx: e.value.style.chart.bars.borderRadius,
class: {
animated: e.value.useCssAnimation && !D.value
},
style: {
animationDelay: `${150 * te}ms`
}
}), null, 16, Vt))), 256)),
(r(!0), d(X, null, W(u.value, (a, o) => (r(), d("g", null, [
w("text", {
x: a.x + a.width + e.value.style.chart.bars.dataLabels.name.offsetX + 12,
y: a.cy - h.value.names / 2 + e.value.style.chart.bars.dataLabels.name.offsetY,
"text-anchor": "start",
"font-size": h.value.names,
fill: e.value.style.chart.bars.dataLabels.name.color,
"font-weight": e.value.style.chart.bars.dataLabels.name.bold ? "bold" : "normal",
class: z({
animated: e.value.useCssAnimation && !D.value
}),
style: x({
animationDelay: `${150 * o}ms`
})
}, V(a.name), 15, jt),
w("text", {
x: a.x + a.width + e.value.style.chart.bars.dataLabels.value.offsetX + 12,
y: a.cy + h.value.values + e.value.style.chart.bars.dataLabels.value.offsetY,
"text-anchor": "start",
"font-size": h.value.values,
fill: e.value.style.chart.bars.dataLabels.value.color,
"font-weight": e.value.style.chart.bars.dataLabels.value.bold ? "bold" : "normal",
class: z({
animated: e.value.useCssAnimation && !D.value
}),
style: x({
animationDelay: `${150 * o}ms`
})
}, V(s(q)(
e.value.style.chart.bars.dataLabels.value.formatter,
a.value,
s(Y)({
p: e.value.style.chart.bars.dataLabels.value.prefix,
v: a.value,
s: e.value.style.chart.bars.dataLabels.value.suffix,
r: e.value.style.chart.bars.dataLabels.value.rounding
}),
{ datapoint: a }
)), 15, Gt)
]))), 256)),
i(t.$slots, "svg", { svg: b.value }, void 0, !0)
], 14, Ot)) : m("", !0),
t.$slots.watermark ? (r(), d("div", Ht, [
i(t.$slots, "watermark", k(A({ isPrinting: s(he) || s(be) })), void 0, !0)
])) : m("", !0),
T.value ? m("", !0) : (r(), N(s(Me), {
key: 6,
config: {
type: "verticalBar",
style: {
backgroundColor: e.value.style.chart.backgroundColor,
verticalBar: {
axis: {
color: "#CCCCCC"
},
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
t.$slots.source ? (r(), d("div", {
key: 7,
ref_key: "source",
ref: ue,
dir: "auto"
}, [
i(t.$slots, "source", {}, void 0, !0)
], 512)) : m("", !0),
T.value && e.value.userOptions.buttons.table ? (r(), N(it(M.value.component), H({ key: 8 }, M.value.props, {
ref_key: "tableUnit",
ref: I,
onClose: Ae
}), Fe({
content: n(() => [
(r(), N(s(Ve), {
key: `table_${re.value}`,
colNames: G.value.colNames,
head: G.value.head,
body: G.value.body,
config: G.value.config,
title: e.value.table.useDialog ? "" : M.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: Ae
}, {
th: n(({ th: a }) => [
w("div", {
innerHTML: a,
style: { display: "flex", "align-items": "center" }
}, null, 8, Xt)
]),
td: n(({ td: a }) => [
_e(V(a.name ? a.name : a), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: n(() => [
_e(V(M.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: n(() => [
w("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: l[0] || (l[0] = (a) => ee(e.value.userOptions.callbacks.csv))
}, [
De(s(Re), {
name: "excel",
stroke: M.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : m("", !0)
], 46, Tt));
}
}, qt = /* @__PURE__ */ St(Wt, [["__scopeId", "data-v-fb155766"]]), ua = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: qt
}, Symbol.toStringTag, { value: "Module" }));
export {
na as a,
ua as b,
qt as v
};