vue-data-ui 2.5.5 → 2.5.7

package/dist/{vue-ui-circle-pack-j2pkMjG3.js → vue-ui-circle-pack-BoolEIij.js}

@@ -1,22 +1,22 @@
-import { useCssVars as Qe, computed as y, ref as h, watch as Ie, onMounted as et, watchEffect as tt, openBlock as s, createElementBlock as i, normalizeClass as Fe, normalizeStyle as W, unref as c, createBlock as T, createCommentVNode as f, renderSlot as m, createSlots as lt, withCtx as C, normalizeProps as D, guardReactiveProps as L, createVNode as at, Fragment as O, renderList as se, createElementVNode as k, toDisplayString as G, createTextVNode as ot, nextTick as st } from "vue";
-import { u as nt, c as Ne, t as rt, a as ne, p as P, o as ut, e as it, b as ct, d as Se, m as vt, h as Me, f as re, X as dt, l as ht, G as Y, i as _e, q as ft, r as yt } from "./index-CxkSLqkR.js";
-import { u as Ae } from "./useNestedProp-Cl0RLl8U.js";
-import { u as pt, U as mt } from "./usePrinter-C6iBjau1.js";
-import { _ as bt } from "./Title-DlWf9Ddn.js";
-import { P as gt } from "./PenAndPaper-B-Xy37LR.js";
-import { u as kt } from "./useUserOptionState-BIvW1Kz7.js";
-import { _ as wt } from "./PackageVersion-CZWTAkjP.js";
-import xt from "./vue-ui-accordion-ElsMWD7y.js";
-import { D as Ct } from "./DataTable-BE81z-1L.js";
-import $t from "./vue-ui-skeleton-BNcyfNtG.js";
-import { _ as zt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"], It = ["id"], Ft = ["stop-color"], Nt = ["stop-color"], St = ["stop-color"], Mt = { key: 0 }, _t = ["x", "y", "width", "height", "stroke", "stroke-width", "fill", "rx", "onMouseenter"], At = ["x", "y", "width", "height", "stroke", "stroke-width", "fill", "rx"], Et = ["opacity", "x", "y", "font-size", "fill", "font-weight"], Dt = ["opacity", "x", "y", "font-size", "fill", "font-weight"], Lt = ["d", "fill"], Gt = ["cx", "cy", "r", "opacity", "stroke", "fill"], Ut = {
+import { useCssVars as lt, computed as h, ref as f, watch as Se, onMounted as at, watchEffect as ot, openBlock as s, createElementBlock as i, normalizeClass as Fe, normalizeStyle as X, unref as c, createBlock as T, createCommentVNode as y, renderSlot as m, createSlots as st, withCtx as C, normalizeProps as E, guardReactiveProps as D, createVNode as rt, Fragment as O, renderList as se, createElementVNode as k, toDisplayString as L, createTextVNode as nt, nextTick as ut } from "vue";
+import { u as it, c as Me, t as ct, a as re, p as P, o as vt, e as dt, b as ht, d as Ne, m as ft, h as _e, f as ne, X as yt, l as pt, G as Y, i as Ae, q as mt, r as bt } from "./index-DiqenHrX.js";
+import { u as Ee } from "./useNestedProp-B3CQkP95.js";
+import { u as gt, U as kt } from "./usePrinter-CHAgX1f-.js";
+import { _ as xt } from "./Title-CiQQgFbV.js";
+import { P as wt } from "./PenAndPaper-B-VQ8eSo.js";
+import { u as Ct } from "./useUserOptionState-BIvW1Kz7.js";
+import { _ as zt } from "./PackageVersion-iscNRe7N.js";
+import $t from "./vue-ui-accordion-DA6XnWaz.js";
+import { D as Pt } from "./DataTable-CpOh1tx3.js";
+import Tt from "./vue-ui-skeleton-BwWHgSoq.js";
+import { _ as Ot } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const It = ["id"], St = ["xmlns", "viewBox"], Ft = ["x", "y", "width", "height"], Mt = ["id"], Nt = ["stop-color"], _t = ["stop-color"], At = ["stop-color"], Et = { key: 0 }, Dt = ["x", "y", "width", "height", "stroke", "stroke-width", "fill", "rx", "onMouseenter"], Lt = ["x", "y", "width", "height", "stroke", "stroke-width", "fill", "rx"], Rt = ["opacity", "x", "y", "font-size", "fill", "font-weight"], Gt = ["opacity", "x", "y", "font-size", "fill", "font-weight"], Ut = ["d", "fill"], Vt = ["cx", "cy", "r", "opacity", "stroke", "fill"], Bt = {
   key: 0,
   style: { pointerEvents: "none" }
-}, Bt = { key: 1 }, Vt = ["opacity", "x", "y", "font-size", "fill", "font-weight"], Ht = ["opacity", "x", "y", "font-size", "fill", "font-weight"], Rt = {
+}, Ht = { key: 1 }, Xt = ["opacity", "x", "y", "font-size", "fill", "font-weight"], Yt = ["opacity", "x", "y", "font-size", "fill", "font-weight"], Wt = {
   key: 6,
   class: "vue-data-ui-watermark"
-}, Xt = ["innerHTML"], Wt = {
+}, jt = ["innerHTML"], qt = {
   __name: "vue-ui-circle-pack",
   props: {
     config: {
@@ -32,95 +32,95 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
       }
     }
   },
-  setup(Ee, { expose: De }) {
-    const $ = Ee;
-    Qe((t) => ({
-      "49c9a662": N.value,
-      "0c7b2888": K.value
+  setup(De, { expose: Le }) {
+    const z = De;
+    lt((t) => ({
+      "76fa81dc": F.value,
+      "68186f8b": J.value
     }));
-    const { vue_ui_circle_pack: Le } = nt(), U = y(() => !!$.dataset && $.dataset.length), I = h(Ne()), j = h(null), Ge = h(null), Ue = h(null), ue = h(0), ie = h(0), ce = h(0), Be = h(null), e = y({
+    const { vue_ui_circle_pack: Re } = it(), R = h(() => !!z.dataset && z.dataset.length), I = f(Me()), W = f(null), Ge = f(null), Ue = f(null), ue = f(0), ie = f(0), ce = f(0), Ve = f(null), e = h({
       get: () => he(),
       set: (t) => t
     }), {
-      userOptionsVisible: q,
+      userOptionsVisible: j,
       setUserOptionsVisibility: ve,
       keepUserOptionState: de
-    } = kt({ config: e.value });
+    } = Ct({ config: e.value });
     function he() {
-      const t = Ae({
-        userConfig: $.config,
-        defaultConfig: Le
+      const t = Ee({
+        userConfig: z.config,
+        defaultConfig: Re
       });
       return t.theme ? {
-        ...Ae({
-          userConfig: rt.vue_ui_circle_pack[t.theme] || $.config,
+        ...Ee({
+          userConfig: ct.vue_ui_circle_pack[t.theme] || z.config,
           defaultConfig: t
         }),
-        customPalette: ne[t.theme] || P
+        customPalette: re[t.theme] || P
       } : t;
     }
-    Ie(() => $.config, (t) => {
-      e.value = he(), q.value = !e.value.userOptions.showOnChartHover, Z(), ue.value += 1, ie.value += 1, F.value.showTable = e.value.table.show;
+    Se(() => z.config, (t) => {
+      e.value = he(), j.value = !e.value.userOptions.showOnChartHover, q(), ue.value += 1, ie.value += 1, S.value.showTable = e.value.table.show;
     }, { deep: !0 });
-    const { isPrinting: fe, isImaging: ye, generatePdf: pe, generateImage: me } = pt({
+    const { isPrinting: fe, isImaging: ye, generatePdf: pe, generateImage: me } = gt({
       elementId: `vue-ui-circle-pack_${I.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-circle-pack"
-    }), Ve = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), F = h({
+    }), Be = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), S = f({
       showTable: e.value.table.show
     });
-    async function Z() {
-      ut($.dataset) && it({
+    async function q() {
+      vt(z.dataset) && dt({
         componentName: "VueUiCirclePack",
         type: "dataset"
-      }), await Xe();
+      }), await We();
     }
-    et(Z), Ie(() => $.dataset, async (t) => {
-      await Z();
+    at(q), Se(() => z.dataset, async (t) => {
+      await q();
     }, { deep: !0 });
-    const be = y(() => ct(e.value.customPalette));
+    const be = h(() => ht(e.value.customPalette));
     function ge(t, a) {
       return Math.hypot(a.x - t.x, a.y - t.y);
     }
     function ke(t, a) {
       return a.some((l) => ge(t, l) < t.radius + l.radius);
     }
-    function He(t, a, l, r) {
+    function He(t, a, l, n) {
       const v = a * 2;
-      for (let w of t)
-        for (let x = 0; x < 360; x += 30) {
-          let E = x * Math.PI / 180, u = w.x + v * Math.cos(E), o = w.y + v * Math.sin(E), b = { x: u, y: o, radius: a };
-          if (u - a >= 0 && u + a <= l && o - a >= 0 && o + a <= r && !ke(b, t))
+      for (let x of t)
+        for (let w = 0; w < 360; w += 30) {
+          let A = w * Math.PI / 180, u = x.x + v * Math.cos(A), o = x.y + v * Math.sin(A), g = { x: u, y: o, radius: a };
+          if (u - a >= 0 && u + a <= l && o - a >= 0 && o + a <= n && !ke(g, t))
             return { x: u, y: o };
         }
       return null;
     }
-    function Re(t, a, l, r, v = 0, w = 0) {
-      const x = Math.max(...t.map((b) => b.value)), u = t.map((b, d) => ({
-        ...b,
-        radius: b.value / x * r,
+    function Xe(t, a, l, n, v = 0, x = 0) {
+      const w = Math.max(...t.map((g) => g.value)), u = t.map((g, d) => ({
+        ...g,
+        radius: g.value / w * n,
         index: d
-      })).map((b, d) => ({ ...b, index: d })).toSorted((b, d) => d.radius - b.radius);
+      })).map((g, d) => ({ ...g, index: d })).toSorted((g, d) => d.radius - g.radius);
       let o = [];
       o.push({
         ...u[0],
         x: a / 2 + v,
-        y: l / 2 + w
+        y: l / 2 + x
       });
-      for (let b of u.slice(1)) {
-        let { radius: d, ...$e } = b, ee = He(o, d, a, l);
+      for (let g of u.slice(1)) {
+        let { radius: d, ...$e } = g, ee = He(o, d, a, l);
         if (ee)
           o.push({ ...$e, x: ee.x, y: ee.y, radius: d });
         else {
-          let te = null, ze = 1 / 0;
-          for (let R of o)
+          let te = null, Pe = 1 / 0;
+          for (let B of o)
             for (let le = 0; le < 360; le += 15) {
-              let Pe = le * Math.PI / 180, ae = R.x + (d + R.radius) * Math.cos(Pe), oe = R.y + (d + R.radius) * Math.sin(Pe), X = { ...$e, x: ae, y: oe, radius: d };
-              if (ae - d >= 0 && ae + d <= a && oe - d >= 0 && oe + d <= l && !ke(X, o)) {
-                let Te = o.reduce(
-                  (Ke, Oe) => Ke + (ge(X, Oe) < X.radius + Oe.radius ? 1 : 0),
+              let Te = le * Math.PI / 180, ae = B.x + (d + B.radius) * Math.cos(Te), oe = B.y + (d + B.radius) * Math.sin(Te), H = { ...$e, x: ae, y: oe, radius: d };
+              if (ae - d >= 0 && ae + d <= a && oe - d >= 0 && oe + d <= l && !ke(H, o)) {
+                let Oe = o.reduce(
+                  (tt, Ie) => tt + (ge(H, Ie) < H.radius + Ie.radius ? 1 : 0),
                   0
                 );
-                Te < ze && (ze = Te, te = X);
+                Oe < Pe && (Pe = Oe, te = H);
               }
             }
           te && o.push(te);
@@ -128,42 +128,45 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
       }
       return o;
     }
-    const J = y(() => $.dataset.map((t, a) => {
-      const l = Se(t.color) || be.value[a] || ne[e.value.theme || "default"][a % ne[e.value.theme || "default"].length] || P[a] || P[a % P.length];
+    const Z = h(() => z.dataset.map((t, a) => {
+      const l = Ne(t.color) || be.value[a] || re[e.value.theme || "default"][a % re[e.value.theme || "default"].length] || P[a] || P[a % P.length];
       return {
         ...t,
-        id: Ne(),
+        id: Me(),
         color: l
       };
-    }).filter((t) => ![null, void 0, 1 / 0, -1 / 0].includes(t.value))), g = h([]);
-    async function Xe() {
-      g.value = Re(
-        J.value,
+    }).filter((t) => ![null, void 0, 1 / 0, -1 / 0].includes(t.value))), b = f([]), Ye = h(() => Math.max(...b.value.map((t) => t.radius)));
+    function xe(t, a) {
+      return a / Ye.value * t;
+    }
+    async function We() {
+      b.value = Xe(
+        Z.value,
         // Huge plane size to place all datapoints
         1e4,
         1e4,
         32
       );
     }
-    const we = y(() => ({
+    const we = h(() => ({
       width: 100,
       height: 100
-    })), p = y(() => {
-      const t = g.value.reduce((u, o) => o.x - o.radius < u.x - u.radius ? o : u, g.value[0]), a = g.value.reduce((u, o) => o.y - o.radius < u.y - u.radius ? o : u, g.value[0]), l = g.value.reduce((u, o) => o.x + o.radius > u.x + u.radius ? o : u, g.value[0]), r = g.value.reduce((u, o) => o.y + o.radius > u.y + u.radius ? o : u, g.value[0]), v = (t == null ? void 0 : t.x) || 0, w = (l == null ? void 0 : l.x) || we.value.width, x = (a == null ? void 0 : a.y) || 0, E = (r == null ? void 0 : r.y) || we.value.height;
+    })), p = h(() => {
+      const t = b.value.reduce((u, o) => o.x - o.radius < u.x - u.radius ? o : u, b.value[0]), a = b.value.reduce((u, o) => o.y - o.radius < u.y - u.radius ? o : u, b.value[0]), l = b.value.reduce((u, o) => o.x + o.radius > u.x + u.radius ? o : u, b.value[0]), n = b.value.reduce((u, o) => o.y + o.radius > u.y + u.radius ? o : u, b.value[0]), v = (t == null ? void 0 : t.x) || 0, x = (l == null ? void 0 : l.x) || we.value.width, w = (a == null ? void 0 : a.y) || 0, A = (n == null ? void 0 : n.y) || we.value.height;
       return {
-        maxX: w,
+        maxX: x,
         minX: v,
-        width: Math.abs(w - v) + (t ? t.radius : 0) + (l ? l.radius : 0) + e.value.style.chart.circles.strokeWidth * 4,
-        height: Math.abs(E - x) + (a ? a.radius : 0) + (r ? r.radius : 0) + e.value.style.chart.circles.strokeWidth * 4,
+        width: Math.abs(x - v) + (t ? t.radius : 0) + (l ? l.radius : 0) + e.value.style.chart.circles.strokeWidth * 4,
+        height: Math.abs(A - w) + (a ? a.radius : 0) + (n ? n.radius : 0) + e.value.style.chart.circles.strokeWidth * 4,
         x: t ? (t == null ? void 0 : t.x) - (t == null ? void 0 : t.radius) - e.value.style.chart.circles.strokeWidth * 2 : 0,
         y: a ? (a == null ? void 0 : a.y) - (a == null ? void 0 : a.radius) - e.value.style.chart.circles.strokeWidth * 2 : 0
       };
-    }), We = y(() => g.value.map((t) => {
+    }), je = h(() => b.value.map((t) => {
       if (t.breakdown)
-        return vt(
+        return ft(
           { series: t.breakdown.map((a, l) => ({
             ...a,
-            color: Se(a.color) || be.value[l] || P[l] || P[l % P.length]
+            color: Ne(a.color) || be.value[l] || P[l] || P[l % P.length]
           })) },
           t.x,
           t.y,
@@ -176,34 +179,34 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
           105.25,
           t.radius / 2
         );
-    })), n = h(null);
-    function Ye(t) {
-      e.value.style.chart.circles.zoom.show && (n.value = t);
+    })), r = f(null);
+    function qe(t) {
+      e.value.style.chart.circles.zoom.show && (r.value = t);
     }
-    const N = y(() => n.value ? n.value.radius : 0), K = y(() => n.value ? n.value.radius > p.value.width / 6 * e.value.style.chart.circles.zoom.zoomRatio ? n.value.radius : p.value.width / 6 * e.value.style.chart.circles.zoom.zoomRatio : 0), z = h(0), je = y(() => ({
+    const F = h(() => r.value ? r.value.radius : 0), J = h(() => r.value ? r.value.radius > p.value.width / 6 * e.value.style.chart.circles.zoom.zoomRatio ? r.value.radius : p.value.width / 6 * e.value.style.chart.circles.zoom.zoomRatio : 0), $ = f(0), Ze = h(() => ({
       pointerEvents: "none",
-      opacity: z.value,
-      filter: `drop-shadow(0px 0px 6px ${Me(n.value.color, e.value.style.chart.circles.zoom.shadowForce)})`
-    })), S = h(N.value);
-    tt(() => {
-      S.value = N.value, z.value = 0;
+      opacity: $.value,
+      filter: `drop-shadow(0px 0px 6px ${_e(r.value.color, e.value.style.chart.circles.zoom.shadowForce)})`
+    })), M = f(F.value);
+    ot(() => {
+      M.value = F.value, $.value = 0;
       let t = null;
       function a(l) {
         t || (t = l);
-        const r = (l - t) / e.value.style.chart.circles.zoom.animationFrameMs;
-        r < 1 ? (S.value = N.value + (K.value - N.value) * r, z.value = 0 + e.value.style.chart.circles.zoom.opacity * r, requestAnimationFrame(a)) : (S.value = K.value, z.value = e.value.style.chart.circles.zoom.opacity);
+        const n = (l - t) / e.value.style.chart.circles.zoom.animationFrameMs;
+        n < 1 ? (M.value = F.value + (J.value - F.value) * n, $.value = 0 + e.value.style.chart.circles.zoom.opacity * n, requestAnimationFrame(a)) : (M.value = J.value, $.value = e.value.style.chart.circles.zoom.opacity);
       }
       requestAnimationFrame(a);
     });
-    const M = y(() => ({
+    const N = h(() => ({
       name: e.value.style.chart.circles.zoom.label.name.fontSize * p.value.width / 300,
       value: e.value.style.chart.circles.zoom.label.value.fontSize * p.value.width / 300
     }));
-    function _(t) {
-      return _e(
+    function K(t) {
+      return Ae(
         e.value.style.chart.circles.labels.value.formatter,
         t.value,
-        re({
+        ne({
           p: e.value.style.chart.circles.labels.value.prefix,
           v: t.value,
           s: e.value.style.chart.circles.labels.value.suffix,
@@ -211,50 +214,56 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
         })
       );
     }
-    function qe() {
-      return _e(
+    function Je() {
+      return Ae(
         e.value.style.chart.circles.zoom.label.value.formatter,
-        n.value.value,
-        re({
+        r.value.value,
+        ne({
           p: e.value.style.chart.circles.zoom.label.value.prefix,
-          v: n.value.value,
+          v: r.value.value,
           s: e.value.style.chart.circles.zoom.label.value.suffix,
           r: e.value.style.chart.circles.zoom.label.rounding
         })
       );
     }
-    const A = h(!1);
-    function Ze(t) {
-      A.value = t, ce.value += 1;
+    function Ke(t) {
+      if (!t)
+        return 0;
+      const a = t.radius / K(t).length * (K(t).length === 1 ? 1 : 2);
+      return Math.min(t.radius / 2.5, a);
     }
-    const B = h(!1);
+    const _ = f(!1);
+    function Qe(t) {
+      _.value = t, ce.value += 1;
+    }
+    const G = f(!1);
     function Q() {
-      B.value = !B.value;
+      G.value = !G.value;
     }
-    const V = y(() => {
-      const t = J.value.map((l) => ({
+    const U = h(() => {
+      const t = Z.value.map((l) => ({
         name: l.name,
         value: l.value,
         color: l.color
-      })).toSorted((l, r) => r.value - l.value), a = t.map((l) => l.value);
+      })).toSorted((l, n) => n.value - l.value), a = t.map((l) => l.value);
       return { head: t, body: a };
     });
-    function xe() {
-      st(() => {
-        const t = V.value.head.map((r, v) => [[
-          r.name
-        ], [V.value.body[v]]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(t), l = ft(a);
-        yt({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-circle-pack" });
+    function Ce() {
+      ut(() => {
+        const t = U.value.head.map((n, v) => [[
+          n.name
+        ], [U.value.body[v]]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(t), l = mt(a);
+        bt({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-circle-pack" });
       });
     }
-    const H = y(() => {
+    const V = h(() => {
       const t = [
         e.value.table.columnNames.datapoint,
         e.value.table.columnNames.value
-      ], a = V.value.head.map((v, w) => {
-        const x = re({
+      ], a = U.value.head.map((v, x) => {
+        const w = ne({
           p: e.value.style.chart.circles.labels.value.prefix,
-          v: V.value.body[w],
+          v: U.value.body[x],
           s: e.value.style.chart.circles.labels.value.suffix,
           r: e.value.style.chart.circles.labels.value.rounding
         });
@@ -263,7 +272,7 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
             color: v.color,
             name: v.name
           },
-          x
+          w
         ];
       }), l = {
         th: {
@@ -288,51 +297,51 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
         config: l
       };
     });
-    function Ce() {
-      F.value.showTable = !F.value.showTable;
+    function ze() {
+      S.value.showTable = !S.value.showTable;
     }
-    function Je() {
-      return J.value;
+    function et() {
+      return Z.value;
     }
-    return De({
-      getData: Je,
-      generateCsv: xe,
+    return Le({
+      getData: et,
+      generateCsv: Ce,
       generatePdf: pe,
       generateImage: me,
-      toggleTable: Ce,
+      toggleTable: ze,
       toggleAnnotator: Q
     }), (t, a) => (s(), i("div", {
       id: `vue-ui-circle-pack_${I.value}`,
-      class: Fe(`vue-ui-circle-pack ${A.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      class: Fe(`vue-ui-circle-pack ${_.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       ref_key: "circlePackChart",
-      ref: j,
-      style: W(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      ref: W,
+      style: X(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
       onMouseenter: a[2] || (a[2] = () => c(ve)(!0)),
       onMouseleave: a[3] || (a[3] = () => c(ve)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (s(), T(gt, {
+      e.value.userOptions.buttons.annotator ? (s(), T(wt, {
         key: 0,
-        parent: j.value,
+        parent: W.value,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: B.value,
+        active: G.value,
         onClose: Q
-      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : f("", !0),
+      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : y("", !0),
       m(t.$slots, "userConfig", {}, void 0, !0),
-      Ve.value ? (s(), i("div", {
+      Be.value ? (s(), i("div", {
         key: 1,
         ref_key: "noTitle",
         ref: Ue,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : f("", !0),
+      }, null, 512)) : y("", !0),
       e.value.style.chart.title.text ? (s(), i("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: Ge,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (s(), T(bt, {
+        (s(), T(xt, {
           key: `title_${ue.value}`,
           config: {
             title: {
@@ -345,8 +354,8 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : f("", !0),
-      e.value.userOptions.show && U.value && (c(de) || c(q)) ? (s(), T(mt, {
+      ], 512)) : y("", !0),
+      e.value.userOptions.show && R.value && (c(de) || c(j)) ? (s(), T(kt, {
         ref: "details",
         key: `user_option_${ce.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -361,22 +370,22 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
         hasXls: e.value.userOptions.buttons.csv,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: A.value,
-        chartElement: j.value,
+        isFullscreen: _.value,
+        chartElement: W.value,
         position: e.value.userOptions.position,
         titles: { ...e.value.userOptions.buttonTitles },
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: B.value,
-        onToggleFullscreen: Ze,
+        isAnnotation: G.value,
+        onToggleFullscreen: Qe,
         onGeneratePdf: c(pe),
-        onGenerateCsv: xe,
+        onGenerateCsv: Ce,
         onGenerateImage: c(me),
-        onToggleTable: Ce,
+        onToggleTable: ze,
         onToggleAnnotator: Q,
-        style: W({
-          visibility: c(de) ? c(q) ? "visible" : "hidden" : "visible"
+        style: X({
+          visibility: c(de) ? c(j) ? "visible" : "hidden" : "visible"
         })
-      }, lt({ _: 2 }, [
+      }, st({ _: 2 }, [
         t.$slots.optionPdf ? {
           name: "optionPdf",
           fn: C(() => [
@@ -407,28 +416,28 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: C(({ toggleFullscreen: l, isFullscreen: r }) => [
-            m(t.$slots, "optionFullscreen", D(L({ toggleFullscreen: l, isFullscreen: r })), void 0, !0)
+          fn: C(({ toggleFullscreen: l, isFullscreen: n }) => [
+            m(t.$slots, "optionFullscreen", E(D({ toggleFullscreen: l, isFullscreen: n })), void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: C(({ toggleAnnotator: l, isAnnotator: r }) => [
-            m(t.$slots, "optionAnnotator", D(L({ toggleAnnotator: l, isAnnotator: r })), void 0, !0)
+          fn: C(({ toggleAnnotator: l, isAnnotator: n }) => [
+            m(t.$slots, "optionAnnotator", E(D({ toggleAnnotator: l, isAnnotator: n })), void 0, !0)
           ]),
           key: "5"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
-      U.value ? (s(), i("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
+      R.value ? (s(), i("svg", {
         key: 4,
-        xmlns: c(dt),
+        xmlns: c(yt),
         viewBox: `${p.value.x} ${p.value.y} ${p.value.width} ${p.value.height}`,
         width: "100%",
-        class: Fe({ "vue-data-ui-fullscreen--on": A.value, "vue-data-ui-fulscreen--off": !A.value }),
-        style: W(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color};`)
+        class: Fe({ "vue-data-ui-fullscreen--on": _.value, "vue-data-ui-fulscreen--off": !_.value }),
+        style: X(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color};`)
       }, [
-        at(wt),
+        rt(zt),
         t.$slots["chart-background"] ? (s(), i("foreignObject", {
           key: 0,
           x: p.value.x,
@@ -440,8 +449,8 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
           }
         }, [
           m(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Ot)) : f("", !0),
-        (s(!0), i(O, null, se(g.value, (l) => (s(), i(O, null, [
+        ], 8, Ft)) : y("", !0),
+        (s(!0), i(O, null, se(b.value, (l) => (s(), i(O, null, [
           k("defs", null, [
             k("radialGradient", {
               id: l.id,
@@ -449,23 +458,23 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
             }, [
               k("stop", {
                 offset: "10%",
-                "stop-color": c(ht)(l.color, e.value.style.chart.circles.gradient.intensity / 100)
-              }, null, 8, Ft),
+                "stop-color": c(pt)(l.color, e.value.style.chart.circles.gradient.intensity / 100)
+              }, null, 8, Nt),
               k("stop", {
                 offset: "90%",
-                "stop-color": c(Me)(l.color, 0.1)
-              }, null, 8, Nt),
+                "stop-color": c(_e)(l.color, 0.1)
+              }, null, 8, _t),
               k("stop", {
                 offset: "100%",
                 "stop-color": l.color
-              }, null, 8, St)
-            ], 8, It)
+              }, null, 8, At)
+            ], 8, Mt)
           ]),
-          t.$slots.pattern ? (s(), i("g", Mt, [
+          t.$slots.pattern ? (s(), i("g", Et, [
             k("defs", null, [
-              m(t.$slots, "pattern", D(L({ ...l, patternId: `pattern_${I.value}_${l.id}` })), void 0, !0)
+              m(t.$slots, "pattern", E(D({ ...l, patternId: `pattern_${I.value}_${l.id}` })), void 0, !0)
             ])
-          ])) : f("", !0),
+          ])) : y("", !0),
           k("rect", {
             x: l.x - l.radius,
             y: l.y - l.radius,
@@ -475,9 +484,9 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
             "stroke-width": e.value.style.chart.circles.strokeWidth,
             fill: e.value.style.chart.circles.gradient.show ? `url(#${l.id})` : l.color,
             rx: l.radius,
-            onMouseenter: () => Ye(l),
-            onMouseout: a[0] || (a[0] = (r) => n.value = null)
-          }, null, 40, _t),
+            onMouseenter: () => qe(l),
+            onMouseout: a[0] || (a[0] = (n) => r.value = null)
+          }, null, 40, Dt),
           t.$slots.pattern ? (s(), i("rect", {
             key: 1,
             x: l.x - l.radius,
@@ -491,87 +500,87 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
             style: {
               pointerEvents: "none"
             }
-          }, null, 8, At)) : f("", !0),
+          }, null, 8, Lt)) : y("", !0),
           e.value.style.chart.circles.labels.name.show && l.name ? (s(), i("text", {
             key: 2,
             style: {
               pointerEvents: "none",
               transition: "opacity 0.2s ease-in-out"
             },
-            opacity: n.value ? 0.2 : 1,
+            opacity: r.value ? 0.2 : 1,
             x: l.x,
-            y: l.y - l.radius / 2.5 + e.value.style.chart.circles.labels.name.offsetY,
-            "font-size": l.radius / l.name.length * 2,
+            y: l.y + xe(l.radius, e.value.style.chart.circles.labels.name.offsetY) - l.radius / 6,
+            "font-size": l.radius / 3 * e.value.style.chart.circles.labels.name.fontSizeRatio,
             fill: e.value.style.chart.circles.labels.name.color ? e.value.style.chart.circles.labels.name.color : c(Y)(l.color),
             "font-weight": e.value.style.chart.circles.labels.name.bold ? "bold" : "normal",
             "text-anchor": "middle"
-          }, G(l.name), 9, Et)) : f("", !0),
+          }, L(l.name), 9, Rt)) : y("", !0),
           e.value.style.chart.circles.labels.value.show ? (s(), i("text", {
             key: 3,
             style: {
               pointerEvents: "none",
               transition: "opacity 0.2s ease-in-out"
             },
-            opacity: n.value ? 0.2 : 1,
+            opacity: r.value ? 0.2 : 1,
             x: l.x,
-            y: l.y + l.radius / _(l).length * (_(l).length === 1 ? 1 : 2) / 2 + e.value.style.chart.circles.labels.value.offsetY,
-            "font-size": l.radius / _(l).length * (_(l).length === 1 ? 1 : 2),
+            y: l.y + xe(l.radius, e.value.style.chart.circles.labels.value.offsetY) + l.radius / 3,
+            "font-size": Ke(l) * e.value.style.chart.circles.labels.value.fontSizeRatio,
             fill: e.value.style.chart.circles.labels.value.color ? e.value.style.chart.circles.labels.value.color : c(Y)(l.color),
             "font-weight": e.value.style.chart.circles.labels.value.bold ? "bold" : "normal",
             "text-anchor": "middle"
-          }, G(_(l)), 9, Dt)) : f("", !0),
-          (s(!0), i(O, null, se(We.value, (r) => (s(), i(O, null, [
-            (s(!0), i(O, null, se(r, (v) => (s(), i("path", {
+          }, L(K(l)), 9, Gt)) : y("", !0),
+          (s(!0), i(O, null, se(je.value, (n) => (s(), i(O, null, [
+            (s(!0), i(O, null, se(n, (v) => (s(), i("path", {
               d: v.arcSlice,
               fill: v.color,
               stroke: "black"
-            }, null, 8, Lt))), 256))
+            }, null, 8, Ut))), 256))
           ], 64))), 256))
         ], 64))), 256)),
-        n.value && e.value.style.chart.circles.zoom.show ? (s(), i(O, { key: 1 }, [
+        r.value && e.value.style.chart.circles.zoom.show ? (s(), i(O, { key: 1 }, [
           k("circle", {
-            style: W(je.value),
-            cx: n.value.x,
-            cy: n.value.y,
-            r: S.value,
-            opacity: z.value,
+            style: X(Ze.value),
+            cx: r.value.x,
+            cy: r.value.y,
+            r: M.value,
+            opacity: $.value,
             stroke: e.value.style.chart.circles.stroke,
-            fill: e.value.style.chart.circles.gradient.show ? `url(#${n.value.id})` : n.value.color
-          }, null, 12, Gt),
-          t.$slots["zoom-label"] ? (s(), i("g", Ut, [
-            m(t.$slots, "zoom-label", D(L({ ...n.value, zoomOpacity: z.value, currentRadius: S.value, fontSize: M.value })), void 0, !0)
-          ])) : (s(), i("g", Bt, [
+            fill: e.value.style.chart.circles.gradient.show ? `url(#${r.value.id})` : r.value.color
+          }, null, 12, Vt),
+          t.$slots["zoom-label"] ? (s(), i("g", Bt, [
+            m(t.$slots, "zoom-label", E(D({ ...r.value, zoomOpacity: $.value, currentRadius: M.value, fontSize: N.value })), void 0, !0)
+          ])) : (s(), i("g", Ht, [
             k("text", {
               style: {
                 pointerEvents: "none"
               },
-              opacity: z.value,
-              x: n.value.x,
-              y: n.value.y + e.value.style.chart.circles.zoom.label.name.offsetY - M.value.name / 4,
+              opacity: $.value,
+              x: r.value.x,
+              y: r.value.y + e.value.style.chart.circles.zoom.label.name.offsetY - N.value.name / 4,
               "text-anchor": "middle",
-              "font-size": M.value.name,
-              fill: e.value.style.chart.circles.zoom.label.name.color ? e.value.style.chart.circles.zoom.label.name.color : c(Y)(n.value.color),
+              "font-size": N.value.name,
+              fill: e.value.style.chart.circles.zoom.label.name.color ? e.value.style.chart.circles.zoom.label.name.color : c(Y)(r.value.color),
               "font-weight": e.value.style.chart.circles.zoom.label.name.bold ? "bold" : "normal"
-            }, G(n.value.name), 9, Vt),
+            }, L(r.value.name), 9, Xt),
             k("text", {
               style: {
                 pointerEvents: "none"
               },
-              opacity: z.value,
-              x: n.value.x,
-              y: n.value.y + M.value.value + e.value.style.chart.circles.zoom.label.value.offsetY,
+              opacity: $.value,
+              x: r.value.x,
+              y: r.value.y + N.value.value + e.value.style.chart.circles.zoom.label.value.offsetY,
               "text-anchor": "middle",
-              "font-size": M.value.value,
-              fill: e.value.style.chart.circles.zoom.label.value.color ? e.value.style.chart.circles.zoom.label.value.color : c(Y)(n.value.color),
+              "font-size": N.value.value,
+              fill: e.value.style.chart.circles.zoom.label.value.color ? e.value.style.chart.circles.zoom.label.value.color : c(Y)(r.value.color),
               "font-weight": e.value.style.chart.circles.zoom.label.value.bold ? "bold" : "normal"
-            }, G(qe()), 9, Ht)
+            }, L(Je()), 9, Yt)
           ]))
-        ], 64)) : f("", !0),
+        ], 64)) : y("", !0),
         m(t.$slots, "svg", {
           svg: { ...p.value }
         }, void 0, !0)
-      ], 14, Tt)) : f("", !0),
-      U.value ? f("", !0) : (s(), T($t, {
+      ], 14, St)) : y("", !0),
+      R.value ? y("", !0) : (s(), T(Tt, {
         key: 5,
         config: {
           type: "circlePack",
@@ -580,22 +589,22 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
           }
         }
       })),
-      t.$slots.watermark ? (s(), i("div", Rt, [
-        m(t.$slots, "watermark", D(L({ isPrinting: c(fe) || c(ye) })), void 0, !0)
-      ])) : f("", !0),
+      t.$slots.watermark ? (s(), i("div", Wt, [
+        m(t.$slots, "watermark", E(D({ isPrinting: c(fe) || c(ye) })), void 0, !0)
+      ])) : y("", !0),
       t.$slots.source ? (s(), i("div", {
         key: 7,
         ref_key: "source",
-        ref: Be,
+        ref: Ve,
         dir: "auto"
       }, [
         m(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : f("", !0),
-      U.value ? (s(), T(xt, {
+      ], 512)) : y("", !0),
+      R.value ? (s(), T($t, {
         key: 8,
         hideDetails: "",
         config: {
-          open: F.value.showTable,
+          open: S.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -608,32 +617,32 @@ const Pt = ["id"], Tt = ["xmlns", "viewBox"], Ot = ["x", "y", "width", "height"]
         }
       }, {
         content: C(() => [
-          (s(), T(Ct, {
+          (s(), T(Pt, {
             key: `table_${ie.value}`,
-            colNames: H.value.colNames,
-            head: H.value.head,
-            body: H.value.body,
-            config: H.value.config,
+            colNames: V.value.colNames,
+            head: V.value.head,
+            body: V.value.body,
+            config: V.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: a[1] || (a[1] = (l) => F.value.showTable = !1)
+            onClose: a[1] || (a[1] = (l) => S.value.showTable = !1)
           }, {
             th: C(({ th: l }) => [
               k("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Xt)
+              }, null, 8, jt)
             ]),
             td: C(({ td: l }) => [
-              ot(G(l.name || l), 1)
+              nt(L(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : f("", !0)
-    ], 46, Pt));
+      }, 8, ["config"])) : y("", !0)
+    ], 46, It));
   }
-}, sl = /* @__PURE__ */ zt(Wt, [["__scopeId", "data-v-0106231a"]]);
+}, ul = /* @__PURE__ */ Ot(qt, [["__scopeId", "data-v-0a09e1d3"]]);
 export {
-  sl as default
+  ul as default
 };