vue-data-ui 2.7.0 → 2.7.1

package/dist/{vue-ui-3d-bar-C_JTgO_-.js → vue-ui-3d-bar-CcFHL1qI.js}

@@ -1,20 +1,20 @@
-import { computed as S, ref as T, watch as He, onMounted as Re, createElementBlock as i, openBlock as n, unref as d, normalizeStyle as D, normalizeClass as Me, createBlock as G, createCommentVNode as y, createSlots as Ze, withCtx as O, renderSlot as j, normalizeProps as Y, guardReactiveProps as J, createVNode as qe, createElementVNode as u, Fragment as _, renderList as m, toDisplayString as P, mergeProps as Pe, createTextVNode as Xe, nextTick as Ye } from "vue";
-import { u as Je, c as je, t as Ke, p as K, a as Qe, b as et, d as tt, o as lt, e as Q, g as re, l as U, m as Te, f as z, X as ot, s as g, h as ee, i as te, j as Se, k as le, n as A, q as st, r as at } from "./index-D-HIb4Mn.js";
-import { _ as nt } from "./Title-BnbtlZuQ.js";
-import { u as rt, U as ut } from "./usePrinter-Dur-51db.js";
-import it from "./vue-ui-skeleton-WO50lQWb.js";
-import { D as dt } from "./DataTable-DRB6Rt3T.js";
-import ct from "./vue-ui-accordion-qmHz6V_f.js";
-import { u as Oe } from "./useNestedProp-qC6DmhPQ.js";
-import { _ as ht } from "./PackageVersion-iM0N7imM.js";
-import { P as vt } from "./PenAndPaper-Cnh7VAnd.js";
+import { computed as T, ref as j, watch as He, onMounted as Re, createElementBlock as i, openBlock as n, unref as d, normalizeStyle as O, normalizeClass as Me, createBlock as G, createCommentVNode as y, createSlots as Ze, withCtx as S, renderSlot as P, normalizeProps as Y, guardReactiveProps as J, createVNode as qe, createElementVNode as u, Fragment as _, renderList as m, toDisplayString as B, mergeProps as Pe, createTextVNode as Xe, nextTick as Ye } from "vue";
+import { u as Je, c as je, t as Ke, p as K, a as Qe, b as et, d as tt, o as lt, e as Q, g as re, l as U, m as Te, f as D, X as ot, s as g, h as ee, i as te, j as Se, k as le, n as A, q as st, r as at } from "./index-A6avPZLy.js";
+import { _ as nt } from "./Title-D-MrSzZ9.js";
+import { u as rt, U as ut } from "./usePrinter-B6swu4OY.js";
+import it from "./vue-ui-skeleton-CDtUy7-2.js";
+import { D as dt } from "./DataTable-CqmM6dKK.js";
+import ct from "./vue-ui-accordion-B_xjSc0r.js";
+import { u as De } from "./useNestedProp-CcohWUPI.js";
+import { _ as ht } from "./PackageVersion-CwdFBcJ8.js";
+import { P as vt } from "./PenAndPaper--UiqgX9J.js";
 import { u as ft } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as pt } from "./useChartAccessibility-BWojgys7.js";
 import { _ as yt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const kt = ["id"], gt = {
   key: 1,
   style: "width:100%;background:transparent"
-}, $t = ["xmlns", "viewBox"], _t = ["width", "height"], mt = ["id"], bt = ["stop-color"], xt = ["stop-color"], wt = ["id"], Ct = ["stop-color"], Ft = ["stop-color"], Mt = ["id"], Pt = ["stop-color"], jt = ["stop-color"], Tt = ["id"], St = ["stop-color"], Ot = ["stop-color"], zt = ["stop-color"], Dt = { key: 1 }, Nt = ["id"], Bt = ["stop-color"], At = ["stop-color"], It = ["id"], Lt = ["stop-color"], Wt = ["stop-color"], Vt = ["id"], Gt = ["stop-color"], Ut = ["stop-color"], Et = ["id"], Ht = ["x", "y", "font-size", "font-weight", "fill"], Rt = ["x", "y"], Zt = ["d", "stroke"], qt = ["d", "stroke"], Xt = { key: 4 }, Yt = { key: 0 }, Jt = ["stroke-dasharray", "d", "stroke", "stroke-width"], Kt = ["stroke-dasharray", "d", "stroke", "stroke-width"], Qt = ["stroke-dasharray", "d", "stroke", "stroke-width"], el = ["stroke-dasharray", "d", "stroke", "stroke-width"], tl = { key: 1 }, ll = ["d", "stroke", "stroke-width", "fill"], ol = ["d", "stroke", "stroke-width", "fill"], sl = ["d", "stroke", "stroke-width", "fill"], al = { key: 2 }, nl = ["d", "fill", "onMouseenter", "onClick"], rl = ["d", "fill", "onMouseenter", "onClick"], ul = ["d", "fill", "onMouseenter", "onClick"], il = ["d", "onMouseenter", "onClick"], dl = ["d"], cl = ["d", "stroke"], hl = ["onClick"], vl = ["stroke", "d"], fl = ["cx", "cy", "fill", "stroke"], pl = ["x", "y", "width", "height"], yl = { key: 1 }, kl = ["d", "stroke"], gl = ["d", "fill", "stroke"], $l = ["id"], _l = ["stop-color"], ml = ["stop-color"], bl = ["cx", "cy", "fill"], xl = ["cx", "cy", "fill"], wl = { key: 0 }, Cl = ["text-anchor", "x", "y", "fill", "font-size"], Fl = ["text-anchor", "x", "y", "fill", "font-size"], Ml = { key: 2 }, Pl = ["d", "fill", "stroke"], jl = { key: 5 }, Tl = { key: 0 }, Sl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Ol = ["stroke-dasharray", "d", "stroke", "stroke-width"], zl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Dl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Nl = ["d", "stroke", "stroke-width", "fill"], Bl = ["d", "stroke", "stroke-width", "fill"], Al = { key: 1 }, Il = ["onClick"], Ll = ["id"], Wl = ["stop-color"], Vl = ["stop-color"], Gl = ["id"], Ul = ["stop-color"], El = ["stop-color"], Hl = ["stop-color"], Rl = ["stop-color"], Zl = ["stop-color"], ql = ["onMouseenter", "onClick", "d", "fill"], Xl = ["onMouseenter", "onClick", "d"], Yl = ["onMouseenter", "onClick", "d", "fill"], Jl = ["onClick"], Kl = ["stroke", "d"], Ql = ["cx", "cy", "fill", "stroke"], eo = ["x", "y", "width", "height"], to = { key: 1 }, lo = ["d", "stroke"], oo = ["d", "fill", "stroke"], so = ["id"], ao = ["stop-color"], no = ["stop-color"], ro = ["cx", "cy", "fill"], uo = ["cx", "cy", "fill"], io = { key: 0 }, co = ["text-anchor", "x", "y", "fill", "font-size"], ho = ["text-anchor", "x", "y", "fill", "font-size"], vo = { key: 2 }, fo = ["d", "fill", "stroke"], po = {
+}, $t = ["xmlns", "viewBox"], _t = ["width", "height"], mt = ["id"], bt = ["stop-color"], xt = ["stop-color"], wt = ["id"], Ct = ["stop-color"], Ft = ["stop-color"], Mt = ["id"], Pt = ["stop-color"], jt = ["stop-color"], Tt = ["id"], St = ["stop-color"], Dt = ["stop-color"], Ot = ["stop-color"], zt = { key: 1 }, Nt = ["id"], Bt = ["stop-color"], At = ["stop-color"], It = ["id"], Lt = ["stop-color"], Wt = ["stop-color"], Vt = ["id"], Gt = ["stop-color"], Ut = ["stop-color"], Et = ["id"], Ht = ["x", "y", "font-size", "font-weight", "fill"], Rt = ["x", "y"], Zt = ["d", "stroke"], qt = ["d", "stroke"], Xt = { key: 4 }, Yt = { key: 0 }, Jt = ["stroke-dasharray", "d", "stroke", "stroke-width"], Kt = ["stroke-dasharray", "d", "stroke", "stroke-width"], Qt = ["stroke-dasharray", "d", "stroke", "stroke-width"], el = ["stroke-dasharray", "d", "stroke", "stroke-width"], tl = { key: 1 }, ll = ["d", "stroke", "stroke-width", "fill"], ol = ["d", "stroke", "stroke-width", "fill"], sl = ["d", "stroke", "stroke-width", "fill"], al = { key: 2 }, nl = ["d", "fill", "onMouseenter", "onClick"], rl = ["d", "fill", "onMouseenter", "onClick"], ul = ["d", "fill", "onMouseenter", "onClick"], il = ["d", "onMouseenter", "onClick"], dl = ["d"], cl = ["d", "stroke"], hl = ["onClick"], vl = ["stroke", "d"], fl = ["cx", "cy", "fill", "stroke"], pl = ["x", "y", "width", "height"], yl = { key: 1 }, kl = ["d", "stroke"], gl = ["d", "fill", "stroke"], $l = ["id"], _l = ["stop-color"], ml = ["stop-color"], bl = ["cx", "cy", "fill"], xl = ["cx", "cy", "fill"], wl = { key: 0 }, Cl = ["text-anchor", "x", "y", "fill", "font-size"], Fl = ["text-anchor", "x", "y", "fill", "font-size"], Ml = { key: 2 }, Pl = ["d", "fill", "stroke"], jl = { key: 5 }, Tl = { key: 0 }, Sl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Dl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Ol = ["stroke-dasharray", "d", "stroke", "stroke-width"], zl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Nl = ["d", "stroke", "stroke-width", "fill"], Bl = ["d", "stroke", "stroke-width", "fill"], Al = { key: 1 }, Il = ["onClick"], Ll = ["id"], Wl = ["stop-color"], Vl = ["stop-color"], Gl = ["id"], Ul = ["stop-color"], El = ["stop-color"], Hl = ["stop-color"], Rl = ["stop-color"], Zl = ["stop-color"], ql = ["onMouseenter", "onClick", "d", "fill"], Xl = ["onMouseenter", "onClick", "d"], Yl = ["onMouseenter", "onClick", "d", "fill"], Jl = ["onClick"], Kl = ["stroke", "d"], Ql = ["cx", "cy", "fill", "stroke"], eo = ["x", "y", "width", "height"], to = { key: 1 }, lo = ["d", "stroke"], oo = ["d", "fill", "stroke"], so = ["id"], ao = ["stop-color"], no = ["stop-color"], ro = ["cx", "cy", "fill"], uo = ["cx", "cy", "fill"], io = { key: 0 }, co = ["text-anchor", "x", "y", "fill", "font-size"], ho = ["text-anchor", "x", "y", "fill", "font-size"], vo = { key: 2 }, fo = ["d", "fill", "stroke"], po = {
   key: 4,
   class: "vue-data-ui-watermark"
 }, yo = {
@@ -38,18 +38,18 @@ const kt = ["id"], gt = {
     }
   },
   emits: ["selectDatapoint"],
-  setup(ze, { expose: De, emit: Ne }) {
-    const { vue_ui_3d_bar: Be } = Je(), $ = ze, R = Ne, Z = S(() => !!$.dataset && Object.keys($.dataset).length), b = T(je()), Ae = T(null), ue = T(null), I = T(!1), ie = T(0), de = T(0), t = S({
+  setup(Oe, { expose: ze, emit: Ne }) {
+    const { vue_ui_3d_bar: Be } = Je(), $ = Oe, R = Ne, Z = T(() => !!$.dataset && Object.keys($.dataset).length), b = j(je()), Ae = j(null), ue = j(null), I = j(!1), ie = j(0), de = j(0), t = T({
       get: () => fe(),
       set: (a) => a
     }), { userOptionsVisible: oe, setUserOptionsVisibility: ce, keepUserOptionState: he } = ft({ config: t.value }), { svgRef: ve } = pt({ config: t.value.style.chart.title });
     function fe() {
-      const a = Oe({
+      const a = De({
         userConfig: $.config,
         defaultConfig: Be
       });
       return a.theme ? {
-        ...Oe({
+        ...De({
           userConfig: Qe.vue_ui_3d_bar[a.theme] || $.config,
           defaultConfig: a
         }),
@@ -63,9 +63,9 @@ const kt = ["id"], gt = {
       elementId: `3d_bar_${b.value}`,
       fileName: t.value.style.chart.title.text || "vue-ui-3d-bar",
       options: t.value.userOptions.print
-    }), Ie = S(() => et(t.value.customPalette)), E = T({
+    }), Ie = T(() => et(t.value.customPalette)), E = j({
       showTable: t.value.table.show
-    }), F = S(() => $.dataset.series && $.dataset.series.length), o = S(() => ({
+    }), F = T(() => $.dataset.series && $.dataset.series.length), o = T(() => ({
       height: t.value.style.chart.box.dimensions.height,
       width: t.value.style.chart.box.dimensions.width,
       absoluteWidth: t.value.style.chart.box.dimensions.width * (F.value ? 2 : 1),
@@ -74,7 +74,7 @@ const kt = ["id"], gt = {
       left: t.value.style.chart.box.dimensions.left,
       right: t.value.style.chart.box.dimensions.right,
       perspective: t.value.style.chart.box.dimensions.perspective
-    })), C = S(() => {
+    })), C = T(() => {
       if (F.value) {
         const a = $.dataset.series.map((l) => l.value || 0).reduce((l, r) => l + r, 0), s = $.dataset.series.map((l, r) => ({
           ...l,
@@ -92,7 +92,7 @@ const kt = ["id"], gt = {
         return e;
       }
       return null;
-    }), N = S(() => ({
+    }), z = T(() => ({
       right: `M${o.value.width / 2},${o.value.top} ${o.value.width - o.value.right}, ${o.value.top + o.value.perspective} ${o.value.width - o.value.right},${o.value.height - o.value.bottom - o.value.perspective} ${o.value.width / 2},${o.value.height - o.value.bottom}`,
       left: `M${o.value.width / 2},${o.value.top} ${o.value.left},${o.value.top + o.value.perspective} ${o.value.left},${o.value.height - o.value.bottom - o.value.perspective} ${o.value.width / 2},${o.value.height - o.value.bottom}`,
       side: `M${o.value.width / 2},${o.value.height - o.value.bottom} ${o.value.width / 2},${o.value.top + o.value.perspective * 2}`,
@@ -101,7 +101,7 @@ const kt = ["id"], gt = {
       tubeLeft: `M${o.value.left},${o.value.top + o.value.perspective} ${o.value.left},${o.value.height - o.value.bottom - o.value.perspective}`,
       tubeRight: `M${o.value.width - o.value.right},${o.value.top + o.value.perspective} ${o.value.width - o.value.right},${o.value.height - o.value.bottom - o.value.perspective}`,
       tubeBottom: `M${o.value.width - o.value.right},${o.value.height - o.value.bottom - o.value.perspective} C ${o.value.width - o.value.right},${o.value.height} ${o.value.left},${o.value.height} ${o.value.left},${o.value.height - o.value.bottom - o.value.perspective}`
-    })), W = T(t.value.style.chart.animation.use ? 0 : $.dataset.percentage);
+    })), W = j(t.value.style.chart.animation.use ? 0 : $.dataset.percentage);
     Re(() => {
       $e();
       let a = 0, s = t.value.style.chart.animation.speed, e = 5e-3 * t.value.style.chart.animation.acceleration;
@@ -210,7 +210,7 @@ const kt = ["id"], gt = {
         ${f},${c - v - p}Z`
       };
     }
-    const H = S(() => {
+    const H = T(() => {
       const a = W.value / 100, s = o.value.height - o.value.bottom - o.value.top - o.value.perspective * 2, { width: e, height: h, bottom: l, right: r, left: c, perspective: k } = o.value, f = l + s * 0;
       return {
         right: `M${e / 2},${h - f} ${e / 2},${h - f - s * a} ${e - r},${h - f - k - s * a} ${e - r},${h - f - k}Z`,
@@ -228,7 +228,7 @@ const kt = ["id"], gt = {
         ${c},${h}
         ${c},${h - f - k}Z`
       };
-    }), x = T(null);
+    }), x = j(null);
     function M(a, s = !1) {
       R("selectDatapoint", a), s || (x.value = a.id), s && I.value && (I.value = !1), s && !I.value && (I.value = !0);
     }
@@ -242,14 +242,14 @@ const kt = ["id"], gt = {
     function _e(a) {
       return [...a].map((s) => s.value).reduce((s, e) => s + e, 0);
     }
-    const se = T(!1);
+    const se = j(!1);
     function We(a) {
       se.value = a;
     }
     function Ve() {
       return F.value ? C.value : $.dataset.percentage;
     }
-    const B = S(() => {
+    const N = T(() => {
       if (F.value) {
         const a = C.value.flatMap((e) => e.breakdown && e.breakdown.length ? [{ name: e.name, color: e.color }, ...e.breakdown.map((h, l) => ({
           name: h.name,
@@ -268,27 +268,27 @@ const kt = ["id"], gt = {
         return;
       }
       Ye(() => {
-        const a = C.value.map((l) => l.value).reduce((l, r) => l + r, 0), s = B.value.head.map((l, r) => [[
+        const a = C.value.map((l) => l.value).reduce((l, r) => l + r, 0), s = N.value.head.map((l, r) => [[
           l.name
-        ], [B.value.body[r]], [isNaN(B.value.body[r] / a) ? "-" : B.value.body[r] / a * 100]]), e = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(s), h = st(e);
+        ], [N.value.body[r]], [isNaN(N.value.body[r] / a) ? "-" : N.value.body[r] / a * 100]]), e = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(s), h = st(e);
         at({ csvContent: h, title: t.value.style.chart.title.text || "vue-ui-3d-bar" });
       });
     }
-    const q = S(() => {
+    const q = T(() => {
       const a = C.value.map((r) => r.value).reduce((r, c) => r + c, 0), s = [
         ' <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>',
-        z({ p: t.value.style.chart.legend.prefix, v: a, s: t.value.style.chart.legend.suffix, r: t.value.table.td.roundingValue }),
+        D({ p: t.value.style.chart.legend.prefix, v: a, s: t.value.style.chart.legend.suffix, r: t.value.table.td.roundingValue }),
         "100%"
-      ], e = B.value.head.map((r, c) => {
-        const k = z({ p: t.value.style.chart.legend.prefix, v: B.value.body[c], s: t.value.style.chart.legend.suffix, r: t.value.table.td.roundingValue });
+      ], e = N.value.head.map((r, c) => {
+        const k = D({ p: t.value.style.chart.legend.prefix, v: N.value.body[c], s: t.value.style.chart.legend.suffix, r: t.value.table.td.roundingValue });
         return [
           {
             color: r.color,
             name: r.name
           },
           k,
-          isNaN(B.value.body[c] / a) ? "-" : z({
-            v: B.value.body[c] / a * 100,
+          isNaN(N.value.body[c] / a) ? "-" : D({
+            v: N.value.body[c] / a * 100,
             s: "%",
             r: t.value.table.td.roundingPercentage
           })
@@ -321,11 +321,11 @@ const kt = ["id"], gt = {
     function be() {
       E.value.showTable = !E.value.showTable;
     }
-    const X = T(!1);
+    const X = j(!1);
     function ae() {
       X.value = !X.value;
     }
-    return De({
+    return ze({
       generateCsv: me,
       generatePdf: ke,
       generateImage: ge,
@@ -336,7 +336,7 @@ const kt = ["id"], gt = {
       ref_key: "bar3dChart",
       ref: ue,
       class: Me("vue-ui-3d-bar"),
-      style: D(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor}`),
+      style: O(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor}`),
       id: `3d_bar_${b.value}`,
       onMouseenter: s[2] || (s[2] = () => d(ce)(!0)),
       onMouseleave: s[3] || (s[3] = () => d(ce)(!1))
@@ -389,56 +389,56 @@ const kt = ["id"], gt = {
         onGenerateImage: d(ge),
         onToggleTable: be,
         onToggleAnnotator: ae,
-        style: D({
+        style: O({
           visibility: d(he) ? d(oe) ? "visible" : "hidden" : "visible"
         })
       }, Ze({ _: 2 }, [
         a.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: O(({ isOpen: e, color: h }) => [
-            j(a.$slots, "menuIcon", Y(J({ isOpen: e, color: h })), void 0, !0)
+          fn: S(({ isOpen: e, color: h }) => [
+            P(a.$slots, "menuIcon", Y(J({ isOpen: e, color: h })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         a.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: O(() => [
-            j(a.$slots, "optionPdf", {}, void 0, !0)
+          fn: S(() => [
+            P(a.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         a.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: O(() => [
-            j(a.$slots, "optionCsv", {}, void 0, !0)
+          fn: S(() => [
+            P(a.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         a.$slots.optionImg ? {
           name: "optionImg",
-          fn: O(() => [
-            j(a.$slots, "optionImg", {}, void 0, !0)
+          fn: S(() => [
+            P(a.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         a.$slots.optionTable ? {
           name: "optionTable",
-          fn: O(() => [
-            j(a.$slots, "optionTable", {}, void 0, !0)
+          fn: S(() => [
+            P(a.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         a.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: O(({ toggleFullscreen: e, isFullscreen: h }) => [
-            j(a.$slots, "optionFullscreen", Y(J({ toggleFullscreen: e, isFullscreen: h })), void 0, !0)
+          fn: S(({ toggleFullscreen: e, isFullscreen: h }) => [
+            P(a.$slots, "optionFullscreen", Y(J({ toggleFullscreen: e, isFullscreen: h })), void 0, !0)
           ]),
           key: "5"
         } : void 0,
         a.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: O(({ toggleAnnotator: e, isAnnotator: h }) => [
-            j(a.$slots, "optionAnnotator", Y(J({ toggleAnnotator: e, isAnnotator: h })), void 0, !0)
+          fn: S(({ toggleAnnotator: e, isAnnotator: h }) => [
+            P(a.$slots, "optionAnnotator", Y(J({ toggleAnnotator: e, isAnnotator: h })), void 0, !0)
           ]),
           key: "6"
         } : void 0
@@ -450,7 +450,7 @@ const kt = ["id"], gt = {
         xmlns: d(ot),
         class: Me({ "vue-data-ui-fullscreen--on": se.value, "vue-data-ui-fulscreen--off": !se.value }),
         viewBox: `0 0 ${o.value.absoluteWidth} ${o.value.height}`,
-        style: D(`max-width:100%; overflow: visible; background:transparent;color:${t.value.style.chart.color}`)
+        style: O(`max-width:100%; overflow: visible; background:transparent;color:${t.value.style.chart.color}`)
       }, [
         qe(ht),
         a.$slots["chart-background"] ? (n(), i("foreignObject", {
@@ -463,7 +463,7 @@ const kt = ["id"], gt = {
             pointerEvents: "none"
           }
         }, [
-          j(a.$slots, "chart-background", {}, void 0, !0)
+          P(a.$slots, "chart-background", {}, void 0, !0)
         ], 8, _t)) : y("", !0),
         u("defs", null, [
           u("radialGradient", {
@@ -516,14 +516,14 @@ const kt = ["id"], gt = {
             u("stop", {
               offset: "75%",
               "stop-color": d(g)(t.value.style.chart.backgroundColor, 0)
-            }, null, 8, Ot),
+            }, null, 8, Dt),
             u("stop", {
               offset: "100%",
               "stop-color": d(g)(t.value.style.chart.bar.color, 40)
-            }, null, 8, zt)
+            }, null, 8, Ot)
           ], 8, Tt)
         ]),
-        F.value ? (n(), i("defs", Dt, [
+        F.value ? (n(), i("defs", zt, [
           (n(!0), i(_, null, m(C.value, (e) => (n(), i("radialGradient", {
             id: `grad_top_${e.id}`
           }, [
@@ -585,7 +585,7 @@ const kt = ["id"], gt = {
           "font-weight": t.value.style.chart.dataLabel.bold ? "bold" : "normal",
           fill: t.value.style.chart.dataLabel.color,
           "text-anchor": "middle"
-        }, P(d(z)({
+        }, B(d(D)({
           v: W.value,
           s: "%",
           r: t.value.style.chart.dataLabel.rounding
@@ -622,7 +622,7 @@ const kt = ["id"], gt = {
           F.value ? y("", !0) : (n(), i("g", Yt, [
             u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: N.value.right,
+              d: z.value.right,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
@@ -631,7 +631,7 @@ const kt = ["id"], gt = {
             }, null, 8, Jt),
             u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: N.value.left,
+              d: z.value.left,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
@@ -640,7 +640,7 @@ const kt = ["id"], gt = {
             }, null, 8, Kt),
             u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: N.value.side,
+              d: z.value.side,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
@@ -649,7 +649,7 @@ const kt = ["id"], gt = {
             }, null, 8, Qt),
             u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: N.value.topSides,
+              d: z.value.topSides,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
@@ -685,7 +685,7 @@ const kt = ["id"], gt = {
           ])),
           F.value ? (n(), i("g", al, [
             (n(!0), i(_, null, m(C.value, (e, h) => (n(), i("g", {
-              style: D(`opacity:${x.value ? x.value === e.id ? 1 : 0.3 : 1}`),
+              style: O(`opacity:${x.value ? x.value === e.id ? 1 : 0.3 : 1}`),
               class: "vue-ui-3d-bar-stack"
             }, [
               u("path", {
@@ -738,7 +738,7 @@ const kt = ["id"], gt = {
               }, null, 8, cl)) : y("", !0)
             ]))), 256)),
             (n(!0), i(_, null, m(C.value, (e, h) => (n(), i("g", {
-              style: D(`opacity:${x.value ? x.value === e.id ? 1 : 0 : e.proportion * 100 > t.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
+              style: O(`opacity:${x.value ? x.value === e.id ? 1 : 0 : e.proportion * 100 > t.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
               onClick: (l) => R("selectDatapoint", e)
             }, [
               u("path", {
@@ -765,19 +765,19 @@ const kt = ["id"], gt = {
               }, [
                 t.value.style.chart.legend.showDefault ? (n(), i("div", {
                   key: 0,
-                  style: D(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${t.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${t.value.style.chart.legend.fontSize}px; color:${t.value.style.chart.legend.color}`)
-                }, P(e.name) + ": " + P(d(z)({ v: e.proportion * 100, s: "%", r: t.value.style.chart.legend.roundingPercentage })) + " (" + P(d(te)(
+                  style: O(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${t.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${t.value.style.chart.legend.fontSize}px; color:${t.value.style.chart.legend.color}`)
+                }, B(d(te)(
                   t.value.style.chart.dataLabel.formatter,
                   e.value,
-                  d(z)({
+                  `${e.name}: ${d(D)({ v: e.proportion * 100, s: "%", r: t.value.style.chart.legend.roundingPercentage })} (${d(D)({
                     p: t.value.style.chart.legend.prefix,
                     v: e.value,
                     s: t.value.style.chart.legend.suffix,
                     r: t.value.style.chart.legend.roundingValue
-                  }),
-                  { datapoint: e, seriesIndex: h }
-                )) + ") ", 5)) : y("", !0),
-                j(a.$slots, "legend", Pe({ ref_for: !0 }, { datapoint: e, config: t.value, dataset: C.value }), void 0, !0)
+                  })})`,
+                  { datapoint: e, seriesIndex: h, type: "barDatapoint" }
+                )), 5)) : y("", !0),
+                P(a.$slots, "legend", Pe({ ref_for: !0 }, { datapoint: e, config: t.value, dataset: C.value }), void 0, !0)
               ], 8, pl)),
               e.fill.donut && x.value === e.id ? (n(), i("g", yl, [
                 (n(!0), i(_, null, m(e.fill.donut, (l, r) => (n(), i("g", null, [
@@ -839,24 +839,24 @@ const kt = ["id"], gt = {
                       y: d(le)(l, 12, 12),
                       fill: t.value.style.chart.legend.color,
                       "font-size": t.value.style.chart.legend.fontSize / 1.5
-                    }, P(V(l, e.fill.donut)) + " (" + P(d(te)(
+                    }, B(d(te)(
                       t.value.style.chart.dataLabel.formatter,
                       l.value,
-                      d(z)({
+                      `${V(l, e.fill.donut)} (${d(D)({
                         p: t.value.style.chart.legend.prefix,
                         v: l.value,
                         s: t.value.style.chart.legend.suffix,
                         r: t.value.style.chart.legend.roundingValue
-                      }),
-                      { datapoint: l, seriesIndex: r }
-                    )) + ") ", 9, Cl),
+                      })})`,
+                      { datapoint: l, seriesIndex: r, type: "donutDatapoint" }
+                    )), 9, Cl),
                     u("text", {
                       "text-anchor": d(A)(l).anchor,
                       x: d(A)(l, !0, 2).x,
                       y: d(le)(l, 12, 12) + t.value.style.chart.legend.fontSize / 1.5,
                       fill: t.value.style.chart.legend.color,
                       "font-size": t.value.style.chart.legend.fontSize / 1.5
-                    }, P(l.name), 9, Fl)
+                    }, B(l.name), 9, Fl)
                   ])) : y("", !0)
                 ]))), 256))
               ])) : y("", !0),
@@ -876,7 +876,7 @@ const kt = ["id"], gt = {
           F.value ? y("", !0) : (n(), i("g", Tl, [
             u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: N.value.tubeTop,
+              d: z.value.tubeTop,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
@@ -885,31 +885,31 @@ const kt = ["id"], gt = {
             }, null, 8, Sl),
             u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: N.value.tubeLeft,
+              d: z.value.tubeLeft,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, Ol),
+            }, null, 8, Dl),
             u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: N.value.tubeRight,
+              d: z.value.tubeRight,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, zl),
+            }, null, 8, Ol),
             u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: N.value.tubeBottom,
+              d: z.value.tubeBottom,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, Dl),
+            }, null, 8, zl),
             u("path", {
               d: H.value.tubeTop,
               stroke: t.value.style.chart.bar.stroke,
@@ -929,7 +929,7 @@ const kt = ["id"], gt = {
           ])),
           F.value ? (n(), i("g", Al, [
             (n(!0), i(_, null, m(C.value, (e, h) => (n(), i("g", {
-              style: D(`opacity:${x.value ? x.value === e.id ? 1 : 0.3 : 1}`),
+              style: O(`opacity:${x.value ? x.value === e.id ? 1 : 0.3 : 1}`),
               class: "vue-ui-3d-bar-stack",
               onClick: (l) => R("selectDatapoint", e)
             }, [
@@ -1013,7 +1013,7 @@ const kt = ["id"], gt = {
               }, null, 40, Yl)
             ], 12, Il))), 256)),
             (n(!0), i(_, null, m(C.value, (e, h) => (n(), i("g", {
-              style: D(`opacity:${x.value ? x.value === e.id ? 1 : 0 : e.proportion * 100 > t.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
+              style: O(`opacity:${x.value ? x.value === e.id ? 1 : 0 : e.proportion * 100 > t.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
               onClick: (l) => R("selectDatapoint", e)
             }, [
               u("path", {
@@ -1040,19 +1040,19 @@ const kt = ["id"], gt = {
               }, [
                 t.value.style.chart.legend.showDefault ? (n(), i("div", {
                   key: 0,
-                  style: D(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${t.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${t.value.style.chart.legend.fontSize}px; color:${t.value.style.chart.legend.color}`)
-                }, P(e.name) + ": " + P(d(z)({ v: e.proportion * 100, s: "%", r: t.value.style.chart.legend.roundingPercentage })) + " (" + P(d(te)(
+                  style: O(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${t.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${t.value.style.chart.legend.fontSize}px; color:${t.value.style.chart.legend.color}`)
+                }, B(d(te)(
                   t.value.style.chart.dataLabel.formatter,
                   e.value,
-                  d(z)({
+                  `${e.name}: ${d(D)({ v: e.proportion * 100, s: "%", r: t.value.style.chart.legend.roundingPercentage })} (${d(D)({
                     p: t.value.style.chart.legend.prefix,
                     v: e.value,
                     s: t.value.style.chart.legend.suffix,
                     r: t.value.style.chart.legend.roundingValue
-                  }),
-                  { datapoint: e, seriesIndex: h }
-                )) + ") ", 5)) : y("", !0),
-                j(a.$slots, "legend", Pe({ ref_for: !0 }, { datapoint: e, config: t.value, dataset: C.value }), void 0, !0)
+                  })})`,
+                  { datapoint: e, seriesIndex: h, type: "barDatapoint" }
+                )), 5)) : y("", !0),
+                P(a.$slots, "legend", Pe({ ref_for: !0 }, { datapoint: e, config: t.value, dataset: C.value }), void 0, !0)
               ], 8, eo)),
               e.fill.donut && x.value === e.id ? (n(), i("g", to, [
                 (n(!0), i(_, null, m(e.fill.donut, (l, r) => (n(), i("g", null, [
@@ -1114,24 +1114,24 @@ const kt = ["id"], gt = {
                       y: d(le)(l, 12, 12),
                       fill: t.value.style.chart.legend.color,
                       "font-size": t.value.style.chart.legend.fontSize / 1.5
-                    }, P(V(l, e.fill.donut)) + " (" + P(d(te)(
+                    }, B(d(te)(
                       t.value.style.chart.dataLabel.formatter,
                       l.value,
-                      d(z)({
+                      `${V(l, e.fill.donut)} (${d(D)({
                         p: t.value.style.chart.legend.prefix,
                         v: l.value,
                         s: t.value.style.chart.legend.suffix,
                         r: t.value.style.chart.legend.roundingValue
-                      }),
-                      { datapoint: l, seriesIndex: r }
-                    )) + ") ", 9, co),
+                      })})`,
+                      { datapoint: l, seriesIndex: r, type: "donutDatapoint" }
+                    )), 9, co),
                     u("text", {
                       "text-anchor": d(A)(l).anchor,
                       x: d(A)(l, !0, 2).x,
                       y: d(le)(l, 12, 12) + t.value.style.chart.legend.fontSize / 1.5,
                       fill: t.value.style.chart.legend.color,
                       "font-size": t.value.style.chart.legend.fontSize / 1.5
-                    }, P(l.name), 9, ho)
+                    }, B(l.name), 9, ho)
                   ])) : y("", !0)
                 ]))), 256))
               ])) : y("", !0),
@@ -1147,10 +1147,10 @@ const kt = ["id"], gt = {
             ], 12, Jl))), 256))
           ])) : y("", !0)
         ])) : y("", !0),
-        j(a.$slots, "svg", { svg: o.value }, void 0, !0)
+        P(a.$slots, "svg", { svg: o.value }, void 0, !0)
       ], 14, $t)) : y("", !0),
       a.$slots.watermark ? (n(), i("div", po, [
-        j(a.$slots, "watermark", Y(J({ isPrinting: d(pe) || d(ye) })), void 0, !0)
+        P(a.$slots, "watermark", Y(J({ isPrinting: d(pe) || d(ye) })), void 0, !0)
       ])) : y("", !0),
       Z.value ? y("", !0) : (n(), G(it, {
         key: 5,
@@ -1165,7 +1165,7 @@ const kt = ["id"], gt = {
         }
       }, null, 8, ["config"])),
       a.$slots.source ? (n(), i("div", yo, [
-        j(a.$slots, "source", {}, void 0, !0)
+        P(a.$slots, "source", {}, void 0, !0)
       ], 512)) : y("", !0),
       Z.value && F.value ? (n(), G(ct, {
         key: 7,
@@ -1183,7 +1183,7 @@ const kt = ["id"], gt = {
           }
         }
       }, {
-        content: O(() => [
+        content: S(() => [
           (n(), G(dt, {
             key: `table_${de.value}`,
             colNames: q.value.colNames,
@@ -1193,14 +1193,14 @@ const kt = ["id"], gt = {
             title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? ` : ${t.value.style.chart.title.subtitle.text}` : ""}`,
             onClose: s[1] || (s[1] = (e) => E.value.showTable = !1)
           }, {
-            th: O(({ th: e }) => [
+            th: S(({ th: e }) => [
               u("div", {
                 innerHTML: e,
                 style: { display: "flex", "align-items": "center" }
               }, null, 8, ko)
             ]),
-            td: O(({ td: e }) => [
-              Xe(P(e.name || e), 1)
+            td: S(({ td: e }) => [
+              Xe(B(e.name || e), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
@@ -1209,7 +1209,7 @@ const kt = ["id"], gt = {
       }, 8, ["config"])) : y("", !0)
     ], 44, kt));
   }
-}, Oo = /* @__PURE__ */ yt(go, [["__scopeId", "data-v-b7ef7d8f"]]);
+}, Do = /* @__PURE__ */ yt(go, [["__scopeId", "data-v-178469b1"]]);
 export {
-  Oo as default
+  Do as default
 };