vue-data-ui 2.5.7 → 2.5.9

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

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