@undp/data-viz 1.4.12 → 1.4.14

package/dist/BeeSwarmChart.js

@@ -9,7 +9,7 @@ import { n as xe } from "./numberFormattingFunction-14YCbkN2.js";
 import { T as pe } from "./Tooltip-DyM5snqx.js";
 import { c as D } from "./checkIfNullOrUndefined-DmfiKkNw.js";
 import { g as ye } from "./getTextColorBasedOnBgColor-B6Nk2WBf.js";
-import { Colors as le } from "./Colors.js";
+import { Colors as re } from "./Colors.js";
 import { s as ve } from "./string2HTML-CWHGfz_d.js";
 import { A as be } from "./Axis-Ddg-seDi.js";
 import { X as Te } from "./XTicksAndGridLines-Bn9u5gOM.js";
@@ -24,7 +24,7 @@ import { E as Le } from "./EmptyState-DdTp-Mdn.js";
 import { Y as He } from "./YTicksAndGridLines-B6ah7CRf.js";
 function Fe(se) {
   const {
-    data: r,
+    data: l,
     circleColors: c,
     showTicks: C,
     leftMargin: ie,
@@ -37,7 +37,7 @@ function Fe(se) {
     showLabels: P,
     tooltip: p,
     onSeriesMouseOver: V,
-    refValues: u,
+    refValues: h,
     selectedColor: E,
     startFromZero: W,
     radius: x,
@@ -46,7 +46,7 @@ function Fe(se) {
     minValue: U,
     highlightedDataPoints: J,
     onSeriesMouseClick: G,
-    rtl: re,
+    rtl: le,
     resetSelectionOnDoubleClick: K,
     detailsOnClick: A,
     suffix: N,
@@ -57,32 +57,32 @@ function Fe(se) {
     dimmedOpacity: F,
     precision: R,
     customLayers: k
-  } = se, z = ae(null), [j, v] = T(void 0), [S, I] = T(void 0), [_, Z] = T(null), [ee, m] = T(void 0), [f, h] = T(void 0), d = {
+  } = se, z = ae(null), [j, v] = T(void 0), [S, I] = T(void 0), [_, Z] = T(null), [ee, m] = T(void 0), [f, d] = T(void 0), g = {
     top: X,
     bottom: Y,
     left: ie,
     right: oe
-  }, q = b - d.left - d.right, te = w - d.top - d.bottom, O = r.filter((e) => !D(e.radius)).length === 0 ? r : ue(
-    r.filter((e) => !D(e.radius)),
+  }, q = b - g.left - g.right, te = w - g.top - g.bottom, O = l.filter((e) => !D(e.radius)).length === 0 ? l : ue(
+    l.filter((e) => !D(e.radius)),
     "radius",
     "desc"
-  ), M = D(a) ? Math.max(...r.filter((e) => !D(e.position)).map((e) => e.position)) < 0 && !W ? 0 : Math.max(...r.filter((e) => !D(e.position)).map((e) => e.position)) : a, l = D(U) ? Math.min(...r.filter((e) => !D(e.position)).map((e) => e.position)) >= 0 && !W ? 0 : Math.min(...r.filter((e) => !D(e.position)).map((e) => e.position)) : U, s = r.filter((e) => e.radius === void 0 || e.radius === null).length !== r.length ? we().domain([
+  ), M = D(a) ? Math.max(...l.filter((e) => !D(e.position)).map((e) => e.position)) < 0 && !W ? 0 : Math.max(...l.filter((e) => !D(e.position)).map((e) => e.position)) : a, r = D(U) ? Math.min(...l.filter((e) => !D(e.position)).map((e) => e.position)) >= 0 && !W ? 0 : Math.min(...l.filter((e) => !D(e.position)).map((e) => e.position)) : U, s = l.filter((e) => e.radius === void 0 || e.radius === null).length !== l.length ? we().domain([
     0,
-    D(B) ? Math.max(...r.map((e) => e.radius).filter((e) => e != null)) : B
-  ]).range([0.25, x]).nice() : void 0, L = je().domain([l, M]).range([0, q]).nice(), t = L.ticks(Q);
+    D(B) ? Math.max(...l.map((e) => e.radius).filter((e) => e != null)) : B
+  ]).range([0.25, x]).nice() : void 0, L = je().domain([r, M]).range([0, q]).nice(), t = L.ticks(Q);
   return de(() => {
     Z(null);
-    const e = O.filter((g) => g.position);
-    Me(e).force("x", Ce((g) => L(g.position)).strength(5)).force("y", Oe((g) => te / 2).strength(1)).force(
+    const e = O.filter((u) => u.position);
+    Me(e).force("x", Ce((u) => L(u.position)).strength(5)).force("y", Oe((u) => te / 2).strength(1)).force(
       "collide",
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      De((g) => s ? s(g.radius || 0) + 1 : x + 1)
+      De((u) => s ? s(u.radius || 0) + 1 : x + 1)
     ).force("charge", ke().strength(-15)).alphaDecay(0.05).tick(1e4).on("tick", () => {
       Z(e);
     }).on("end", () => {
       Z(e);
     });
-  }, [r, x, te, q, l, M, O, L, s]), /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+  }, [l, x, te, q, r, M, O, L, s]), /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     _ ? /* @__PURE__ */ i.jsx(
       "svg",
       {
@@ -91,24 +91,24 @@ function Fe(se) {
         viewBox: `0 0 ${b} ${w}`,
         direction: "ltr",
         ref: z,
-        children: /* @__PURE__ */ i.jsxs("g", { transform: `translate(${d.left},${d.top})`, children: [
+        children: /* @__PURE__ */ i.jsxs("g", { transform: `translate(${g.left},${g.top})`, children: [
           C ? /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
             /* @__PURE__ */ i.jsx(
               be,
               {
-                x1: L(l < 0 ? 0 : l),
-                x2: L(l < 0 ? 0 : l),
-                y1: 0 - d.top,
-                y2: te + d.bottom,
+                x1: L(r < 0 ? 0 : r),
+                x2: L(r < 0 ? 0 : r),
+                y1: 0 - g.top,
+                y2: te + g.bottom,
                 label: xe(
-                  l < 0 ? 0 : l,
+                  r < 0 ? 0 : r,
                   "NA",
                   R,
                   $,
                   N
                 ),
                 labelPos: {
-                  x: L(l < 0 ? 0 : l),
+                  x: L(r < 0 ? 0 : r),
                   y: 0 - X,
                   dy: "0.75em",
                   dx: 3
@@ -129,7 +129,7 @@ function Fe(se) {
                 values: t.filter((e) => e !== 0),
                 x: t.filter((e) => e !== 0).map((e) => L(e)),
                 y1: 0 - X,
-                y2: te + d.bottom,
+                y2: te + g.bottom,
                 styles: {
                   gridLines: y?.xAxis?.gridLines,
                   labels: y?.xAxis?.labels
@@ -153,17 +153,17 @@ function Fe(se) {
               className: "undp-viz-g-with-hover",
               transform: `translate(${e.x},${e.y})`,
               opacity: E ? e.color && c[n.indexOf(e.color)] === E ? 1 : F : J.length !== 0 ? J.indexOf(e.label) !== -1 ? 0.85 : F : 0.85,
-              onMouseEnter: (g) => {
-                v(e), h(g.clientY), m(g.clientX), V?.(e);
+              onMouseEnter: (u) => {
+                v(e), d(u.clientY), m(u.clientX), V?.(e);
               },
-              onMouseMove: (g) => {
-                v(e), h(g.clientY), m(g.clientX);
+              onMouseMove: (u) => {
+                v(e), d(u.clientY), m(u.clientX);
               },
               onClick: () => {
                 (G || A) && (ge(S, e) && K ? (I(void 0), G?.(void 0)) : (I(e), G?.(e)));
               },
               onMouseLeave: () => {
-                v(void 0), m(void 0), h(void 0), V?.(void 0);
+                v(void 0), m(void 0), d(void 0), V?.(void 0);
               },
               children: [
                 /* @__PURE__ */ i.jsx(
@@ -171,7 +171,7 @@ function Fe(se) {
                   {
                     cx: 0,
                     cy: 0,
-                    fill: r.filter((g) => g.color).length === 0 ? c[0] : e.color ? c[n.indexOf(e.color)] : le.gray,
+                    fill: l.filter((u) => u.color).length === 0 ? c[0] : e.color ? c[n.indexOf(e.color)] : re.gray,
                     radius: s ? s(e.radius || 0) : x
                   }
                 ),
@@ -206,7 +206,7 @@ function Fe(se) {
                             20
                           )}px`,
                           color: ye(
-                            r.filter((g) => g.color).length === 0 ? c[0] : e.color ? c[n.indexOf(e.color)] : le.gray
+                            l.filter((u) => u.color).length === 0 ? c[0] : e.color ? c[n.indexOf(e.color)] : re.gray
                           ),
                           hyphens: "auto",
                           ...y?.graphObjectValues || {}
@@ -220,20 +220,20 @@ function Fe(se) {
             },
             e.label
           )),
-          u ? /* @__PURE__ */ i.jsx(i.Fragment, { children: u.map((e, g) => /* @__PURE__ */ i.jsx(
+          h ? /* @__PURE__ */ i.jsx(i.Fragment, { children: h.map((e, u) => /* @__PURE__ */ i.jsx(
             Ve,
             {
               text: e.text,
               color: e.color,
               x: L(e.value),
-              y1: 0 - d.top,
-              y2: te + d.bottom,
-              textSide: L(e.value) > q * 0.75 || re ? "left" : "right",
+              y1: 0 - g.top,
+              y2: te + g.bottom,
+              textSide: L(e.value) > q * 0.75 || le ? "left" : "right",
               classNames: e.classNames,
               styles: e.styles,
               isInView: !0
             },
-            g
+            u
           )) }) : null,
           k.filter((e) => e.position === "after").map((e) => e.layer)
         ] })
@@ -271,7 +271,7 @@ function Fe(se) {
 }
 function Pe(se) {
   const {
-    data: r,
+    data: l,
     graphTitle: c,
     backgroundColor: C = !1,
     topMargin: ie = 25,
@@ -284,7 +284,7 @@ function Pe(se) {
     sources: P,
     graphDescription: p,
     height: V,
-    width: u,
+    width: h,
     footNote: E,
     colorDomain: W,
     colorLegendTitle: x,
@@ -293,7 +293,7 @@ function Pe(se) {
     tooltip: U,
     onSeriesMouseOver: J,
     refValues: G,
-    showColorScale: re,
+    showColorScale: le,
     graphID: K,
     radius: A = 5,
     maxRadiusValue: N,
@@ -314,26 +314,27 @@ function Pe(se) {
     prefix: ee = "",
     styles: m,
     classNames: f,
-    noOfTicks: h,
-    dimmedOpacity: d = 0.3,
+    noOfTicks: d,
+    dimmedOpacity: g = 0.3,
     precision: q = 2,
     customLayers: te = []
-  } = se, [O, M] = T(0), [l, s] = T(0), [L, t] = T(void 0), e = ae(null), g = ae(null);
+  } = se, [O, M] = T(0), [r, s] = T(0), [L, t] = T(void 0), e = ae(null), u = ae(null);
   return de(() => {
     const o = new ResizeObserver((ne) => {
-      M(u || ne[0].target.clientWidth || 620), s(V || ne[0].target.clientHeight || 480);
+      M(h || ne[0].target.clientWidth || 620), s(V || ne[0].target.clientHeight || 480);
     });
-    return e.current && (s(e.current.clientHeight || 480), M(e.current.clientWidth || 620), u || o.observe(e.current)), () => o.disconnect();
-  }, [u, V]), /* @__PURE__ */ i.jsx(
+    return e.current && (s(e.current.clientHeight || 480), M(e.current.clientWidth || 620), h || o.observe(e.current)), () => o.disconnect();
+  }, [h, V]), /* @__PURE__ */ i.jsx(
     "div",
     {
-      className: `${v || "light"} flex  ${u ? "w-fit grow-0" : "w-full grow"}`,
+      className: `${v || "light"} flex  ${h ? "w-fit grow-0" : "w-full grow"}`,
       dir: k === "he" || k === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ i.jsx(
         "div",
         {
           className: he(
             `${C ? C === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${k || "en"}`,
+            h ? "w-fit" : "w-full",
             f?.graphContainer
           ),
           style: {
@@ -341,7 +342,7 @@ function Pe(se) {
             ...C && C !== !0 ? { backgroundColor: C } : {}
           },
           id: K,
-          ref: g,
+          ref: u,
           "aria-label": S || `${c ? `The graph shows ${c}. ` : ""}This is a bee swarm chart showing the distribution along the x-axes. ${p ? ` ${p}` : ""}`,
           children: /* @__PURE__ */ i.jsx(
             "div",
@@ -362,20 +363,20 @@ function Pe(se) {
                     },
                     graphTitle: c,
                     graphDescription: p,
-                    width: u,
-                    graphDownload: F ? g.current : void 0,
-                    dataDownload: R ? r.map((o) => o.data).filter((o) => o !== void 0).length > 0 ? r.map((o) => o.data).filter((o) => o !== void 0) : r.filter((o) => o !== void 0) : null
+                    width: h,
+                    graphDownload: F ? u.current : void 0,
+                    dataDownload: R ? l.map((o) => o.data).filter((o) => o !== void 0).length > 0 ? l.map((o) => o.data).filter((o) => o !== void 0) : l.filter((o) => o !== void 0) : null
                   }
                 ) : null,
-                /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: r.length === 0 ? /* @__PURE__ */ i.jsx(Le, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                  re !== !1 && r.filter((o) => o.color).length !== 0 ? /* @__PURE__ */ i.jsx(
+                /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: l.length === 0 ? /* @__PURE__ */ i.jsx(Le, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                  le !== !1 && l.filter((o) => o.color).length !== 0 ? /* @__PURE__ */ i.jsx(
                     Se,
                     {
-                      width: u,
+                      width: h,
                       colorLegendTitle: x,
-                      colors: Y || le[v].categoricalColors.colors,
+                      colors: Y || re[v].categoricalColors.colors,
                       colorDomain: W || ce(
-                        r.filter((o) => o.color),
+                        l.filter((o) => o.color),
                         "color"
                       ).map((o) => o.color),
                       setSelectedColor: t,
@@ -388,20 +389,20 @@ function Pe(se) {
                       className: "flex flex-col grow justify-center w-full leading-0",
                       ref: e,
                       "aria-label": "Graph area",
-                      children: (u || O) && (V || l) ? /* @__PURE__ */ i.jsx(
+                      children: (h || O) && (V || r) ? /* @__PURE__ */ i.jsx(
                         Fe,
                         {
-                          data: r,
-                          circleColors: r.filter((o) => o.color).length === 0 ? Y ? [Y] : [le.primaryColors["blue-600"]] : Y || le[v].categoricalColors.colors,
-                          colorDomain: r.filter((o) => o.color).length === 0 ? [] : W || ce(
-                            r.filter((o) => o.color),
+                          data: l,
+                          circleColors: l.filter((o) => o.color).length === 0 ? Y ? [Y] : [re.primaryColors["blue-600"]] : Y || re[v].categoricalColors.colors,
+                          colorDomain: l.filter((o) => o.color).length === 0 ? [] : W || ce(
+                            l.filter((o) => o.color),
                             "color"
                           ).map((o) => o.color),
-                          width: u || O,
+                          width: h || O,
                           selectedColor: L,
                           height: Math.max(
                             j,
-                            V || (a ? j ? (u || O) * a > j ? (u || O) * a : j : (u || O) * a : l)
+                            V || (a ? j ? (h || O) * a > j ? (h || O) * a : j : (h || O) * a : r)
                           ),
                           showTicks: X,
                           leftMargin: w,
@@ -426,8 +427,8 @@ function Pe(se) {
                           prefix: ee,
                           styles: m,
                           classNames: f,
-                          noOfTicks: h || 5,
-                          dimmedOpacity: d,
+                          noOfTicks: d || 5,
+                          dimmedOpacity: g,
                           precision: q,
                           customLayers: te
                         }
@@ -445,7 +446,7 @@ function Pe(se) {
                     },
                     sources: P,
                     footNote: E,
-                    width: u
+                    width: h
                   }
                 ) : null
               ] })
@@ -458,7 +459,7 @@ function Pe(se) {
 }
 function Re(se) {
   const {
-    data: r,
+    data: l,
     circleColors: c,
     showTicks: C,
     leftMargin: ie,
@@ -471,7 +472,7 @@ function Re(se) {
     suffix: P,
     prefix: p,
     showLabels: V,
-    tooltip: u,
+    tooltip: h,
     onSeriesMouseOver: E,
     refValues: W,
     selectedColor: x,
@@ -480,7 +481,7 @@ function Re(se) {
     maxRadiusValue: U,
     maxValue: J,
     minValue: G,
-    highlightedDataPoints: re,
+    highlightedDataPoints: le,
     onSeriesMouseClick: K,
     resetSelectionOnDoubleClick: A,
     detailsOnClick: N,
@@ -490,32 +491,32 @@ function Re(se) {
     dimmedOpacity: Q,
     precision: F,
     customLayers: R
-  } = se, k = ae(null), [z, j] = T(void 0), [v, S] = T(void 0), [I, _] = T(null), [Z, ee] = T(void 0), [m, f] = T(void 0), h = {
+  } = se, k = ae(null), [z, j] = T(void 0), [v, S] = T(void 0), [I, _] = T(null), [Z, ee] = T(void 0), [m, f] = T(void 0), d = {
     top: X,
     bottom: Y,
     left: ie,
     right: oe
-  }, d = b - h.left - h.right, q = w - h.top - h.bottom, te = r.filter((t) => !D(t.radius)).length === 0 ? r : ue(
-    r.filter((t) => !D(t.radius)),
+  }, g = b - d.left - d.right, q = w - d.top - d.bottom, te = l.filter((t) => !D(t.radius)).length === 0 ? l : ue(
+    l.filter((t) => !D(t.radius)),
     "radius",
     "desc"
-  ), O = D(J) ? Math.max(...r.filter((t) => !D(t.position)).map((t) => t.position)) < 0 && !B ? 0 : Math.max(...r.filter((t) => !D(t.position)).map((t) => t.position)) : J, M = D(G) ? Math.min(...r.filter((t) => !D(t.position)).map((t) => t.position)) >= 0 && !B ? 0 : Math.min(...r.filter((t) => !D(t.position)).map((t) => t.position)) : G, l = r.filter((t) => t.radius === void 0 || t.radius === null).length !== r.length ? we().domain([
+  ), O = D(J) ? Math.max(...l.filter((t) => !D(t.position)).map((t) => t.position)) < 0 && !B ? 0 : Math.max(...l.filter((t) => !D(t.position)).map((t) => t.position)) : J, M = D(G) ? Math.min(...l.filter((t) => !D(t.position)).map((t) => t.position)) >= 0 && !B ? 0 : Math.min(...l.filter((t) => !D(t.position)).map((t) => t.position)) : G, r = l.filter((t) => t.radius === void 0 || t.radius === null).length !== l.length ? we().domain([
     0,
-    D(U) ? Math.max(...r.map((t) => t.radius).filter((t) => t != null)) : U
+    D(U) ? Math.max(...l.map((t) => t.radius).filter((t) => t != null)) : U
   ]).range([0.25, a]).nice() : void 0, s = je().domain([M, O]).range([q, 0]).nice(), L = s.ticks(H);
   return de(() => {
     _(null);
     const t = te.filter((e) => e.position);
-    Me(t).force("y", Oe((e) => s(e.position)).strength(5)).force("x", Ce((e) => d / 2).strength(1)).force(
+    Me(t).force("y", Oe((e) => s(e.position)).strength(5)).force("x", Ce((e) => g / 2).strength(1)).force(
       "collide",
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      De((e) => l ? l(e.radius || 0) + 1 : a + 1)
+      De((e) => r ? r(e.radius || 0) + 1 : a + 1)
     ).force("charge", ke().strength(-15)).alphaDecay(0.05).tick(1e4).on("tick", () => {
       _(t);
     }).on("end", () => {
       _(t);
     });
-  }, [r, a, q, d, M, O, te, s, l]), /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+  }, [l, a, q, g, M, O, te, s, r]), /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     I ? /* @__PURE__ */ i.jsx(
       "svg",
       {
@@ -524,15 +525,15 @@ function Re(se) {
         viewBox: `0 0 ${b} ${w}`,
         direction: "ltr",
         ref: k,
-        children: /* @__PURE__ */ i.jsxs("g", { transform: `translate(${h.left},${h.top})`, children: [
+        children: /* @__PURE__ */ i.jsxs("g", { transform: `translate(${d.left},${d.top})`, children: [
           C ? /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
             /* @__PURE__ */ i.jsx(
               be,
               {
                 y1: s(M < 0 ? 0 : M),
                 y2: s(M < 0 ? 0 : M),
-                x1: 0 - h.left,
-                x2: d + h.right,
+                x1: 0 - d.left,
+                x2: g + d.right,
                 label: xe(
                   M < 0 ? 0 : M,
                   "NA",
@@ -541,7 +542,7 @@ function Re(se) {
                   P
                 ),
                 labelPos: {
-                  x: 0 - h.left,
+                  x: 0 - d.left,
                   y: s(M < 0 ? 0 : M),
                   dx: 0,
                   dy: O < 0 ? "1em" : -5
@@ -561,8 +562,8 @@ function Re(se) {
               {
                 values: L.filter((t) => t !== 0),
                 y: L.filter((t) => t !== 0).map((t) => s(t)),
-                x1: 0 - h.left,
-                x2: d + h.right,
+                x1: 0 - d.left,
+                x2: g + d.right,
                 styles: {
                   gridLines: $?.yAxis?.gridLines,
                   labels: $?.yAxis?.labels
@@ -586,7 +587,7 @@ function Re(se) {
             {
               className: "undp-viz-g-with-hover",
               transform: `translate(${t.x},${t.y})`,
-              opacity: x ? t.color && c[n.indexOf(t.color)] === x ? 1 : Q : re.length !== 0 ? re.indexOf(t.label) !== -1 ? 0.85 : Q : 0.85,
+              opacity: x ? t.color && c[n.indexOf(t.color)] === x ? 1 : Q : le.length !== 0 ? le.indexOf(t.label) !== -1 ? 0.85 : Q : 0.85,
               onMouseEnter: (e) => {
                 j(t), f(e.clientY), ee(e.clientX), E?.(t);
               },
@@ -605,17 +606,17 @@ function Re(se) {
                   {
                     cx: 0,
                     cy: 0,
-                    r: l ? l(t.radius || 0) : a,
-                    fill: r.filter((e) => e.color).length === 0 ? c[0] : t.color ? c[n.indexOf(t.color)] : le.gray
+                    r: r ? r(t.radius || 0) : a,
+                    fill: l.filter((e) => e.color).length === 0 ? c[0] : t.color ? c[n.indexOf(t.color)] : re.gray
                   }
                 ),
-                (l ? l(t.radius || 0) : a) > 10 && V ? /* @__PURE__ */ i.jsx("g", { children: /* @__PURE__ */ i.jsx(
+                (r ? r(t.radius || 0) : a) > 10 && V ? /* @__PURE__ */ i.jsx("g", { children: /* @__PURE__ */ i.jsx(
                   "foreignObject",
                   {
-                    y: 0 - (l ? l(t.radius || 0) : a),
-                    x: 0 - (l ? l(t.radius || 0) : a),
-                    width: 2 * (l ? l(t.radius || 0) : a),
-                    height: 2 * (l ? l(t.radius || 0) : a),
+                    y: 0 - (r ? r(t.radius || 0) : a),
+                    x: 0 - (r ? r(t.radius || 0) : a),
+                    width: 2 * (r ? r(t.radius || 0) : a),
+                    height: 2 * (r ? r(t.radius || 0) : a),
                     children: /* @__PURE__ */ i.jsx("div", { className: "flex flex-col justify-center items-center h-inherit py-0 px-1.5", children: V ? /* @__PURE__ */ i.jsx(
                       "p",
                       {
@@ -627,13 +628,13 @@ function Re(se) {
                           fontSize: `${Math.min(
                             Math.max(
                               Math.round(
-                                (l ? l(t.radius || 0) : a) / 4
+                                (r ? r(t.radius || 0) : a) / 4
                               ),
                               10
                             ),
                             Math.max(
                               Math.round(
-                                (l ? l(t.radius || 0) : a) * 12 / `${t.label}`.length
+                                (r ? r(t.radius || 0) : a) * 12 / `${t.label}`.length
                               ),
                               10
                             ),
@@ -641,7 +642,7 @@ function Re(se) {
                           )}px`,
                           hyphens: "auto",
                           color: ye(
-                            r.filter((e) => e.color).length === 0 ? c[0] : t.color ? c[n.indexOf(t.color)] : le.gray
+                            l.filter((e) => e.color).length === 0 ? c[0] : t.color ? c[n.indexOf(t.color)] : re.gray
                           ),
                           ...$?.graphObjectValues || {}
                         },
@@ -660,8 +661,8 @@ function Re(se) {
               text: t.text,
               color: t.color,
               y: s(t.value),
-              x1: 0 - h.left,
-              x2: d + h.right,
+              x1: 0 - d.left,
+              x2: g + d.right,
               classNames: t.classNames,
               styles: t.styles,
               isInView: !0
@@ -672,11 +673,11 @@ function Re(se) {
         ] })
       }
     ) : /* @__PURE__ */ i.jsx("div", { style: { width: `${b}px`, height: `${w}px` }, children: /* @__PURE__ */ i.jsx("div", { className: "flex m-auto items-center justify-center p-0 leading-none text-base h-40", children: /* @__PURE__ */ i.jsx(fe, {}) }) }),
-    z && u && Z && m ? /* @__PURE__ */ i.jsx(
+    z && h && Z && m ? /* @__PURE__ */ i.jsx(
       pe,
       {
         data: z,
-        body: u,
+        body: h,
         xPos: Z,
         yPos: m,
         backgroundStyle: $?.tooltip,
@@ -704,7 +705,7 @@ function Re(se) {
 }
 function Xe(se) {
   const {
-    data: r,
+    data: l,
     graphTitle: c,
     colors: C,
     sources: ie,
@@ -717,7 +718,7 @@ function Xe(se) {
     padding: P,
     backgroundColor: p = !1,
     topMargin: V = 25,
-    bottomMargin: u = 10,
+    bottomMargin: h = 10,
     leftMargin: E = 100,
     rightMargin: W = 40,
     showLabels: x = !0,
@@ -726,7 +727,7 @@ function Xe(se) {
     tooltip: U,
     onSeriesMouseOver: J,
     refValues: G,
-    showColorScale: re,
+    showColorScale: le,
     graphID: K,
     radius: A = 5,
     maxRadiusValue: N,
@@ -747,11 +748,11 @@ function Xe(se) {
     prefix: ee = "",
     styles: m,
     classNames: f,
-    noOfTicks: h,
-    dimmedOpacity: d = 0.3,
+    noOfTicks: d,
+    dimmedOpacity: g = 0.3,
     precision: q = 2,
     customLayers: te = []
-  } = se, [O, M] = T(0), [l, s] = T(0), [L, t] = T(void 0), e = ae(null), g = ae(null);
+  } = se, [O, M] = T(0), [r, s] = T(0), [L, t] = T(void 0), e = ae(null), u = ae(null);
   return de(() => {
     const o = new ResizeObserver((ne) => {
       M(n || ne[0].target.clientWidth || 620), s(w || ne[0].target.clientHeight || 480);
@@ -767,6 +768,7 @@ function Xe(se) {
         {
           className: he(
             `${p ? p === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${k || "en"}`,
+            n ? "w-fit" : "w-full",
             f?.graphContainer
           ),
           style: {
@@ -774,7 +776,7 @@ function Xe(se) {
             ...p && p !== !0 ? { backgroundColor: p } : {}
           },
           id: K,
-          ref: g,
+          ref: u,
           "aria-label": S || `${c ? `The graph shows ${c}. ` : ""}This is a bee swarm chart showing the distribution along the y-axes. ${b ? ` ${b}` : ""}`,
           children: /* @__PURE__ */ i.jsx(
             "div",
@@ -796,19 +798,19 @@ function Xe(se) {
                     graphTitle: c,
                     graphDescription: b,
                     width: n,
-                    graphDownload: F ? g.current : void 0,
-                    dataDownload: R ? r.map((o) => o.data).filter((o) => o !== void 0).length > 0 ? r.map((o) => o.data).filter((o) => o !== void 0) : r.filter((o) => o !== void 0) : null
+                    graphDownload: F ? u.current : void 0,
+                    dataDownload: R ? l.map((o) => o.data).filter((o) => o !== void 0).length > 0 ? l.map((o) => o.data).filter((o) => o !== void 0) : l.filter((o) => o !== void 0) : null
                   }
                 ) : null,
-                /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: r.length === 0 ? /* @__PURE__ */ i.jsx(Le, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                  re !== !1 && r.filter((o) => o.color).length !== 0 ? /* @__PURE__ */ i.jsx(
+                /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: l.length === 0 ? /* @__PURE__ */ i.jsx(Le, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                  le !== !1 && l.filter((o) => o.color).length !== 0 ? /* @__PURE__ */ i.jsx(
                     Se,
                     {
                       width: n,
                       colorLegendTitle: Y,
-                      colors: C || le[v].categoricalColors.colors,
+                      colors: C || re[v].categoricalColors.colors,
                       colorDomain: X || ce(
-                        r.filter((o) => o.color),
+                        l.filter((o) => o.color),
                         "color"
                       ).map((o) => o.color),
                       setSelectedColor: t,
@@ -821,26 +823,26 @@ function Xe(se) {
                       className: "flex flex-col grow justify-center w-full leading-0",
                       ref: e,
                       "aria-label": "Graph area",
-                      children: (n || O) && (w || l) ? /* @__PURE__ */ i.jsx(
+                      children: (n || O) && (w || r) ? /* @__PURE__ */ i.jsx(
                         Re,
                         {
-                          data: r,
-                          circleColors: r.filter((o) => o.color).length === 0 ? C ? [C] : [le.primaryColors["blue-600"]] : C || le[v].categoricalColors.colors,
-                          colorDomain: r.filter((o) => o.color).length === 0 ? [] : X || ce(
-                            r.filter((o) => o.color),
+                          data: l,
+                          circleColors: l.filter((o) => o.color).length === 0 ? C ? [C] : [re.primaryColors["blue-600"]] : C || re[v].categoricalColors.colors,
+                          colorDomain: l.filter((o) => o.color).length === 0 ? [] : X || ce(
+                            l.filter((o) => o.color),
                             "color"
                           ).map((o) => o.color),
                           width: n || O,
                           selectedColor: L,
                           height: Math.max(
                             j,
-                            w || (a ? j ? (n || O) * a > j ? (n || O) * a : j : (n || O) * a : l)
+                            w || (a ? j ? (n || O) * a > j ? (n || O) * a : j : (n || O) * a : r)
                           ),
                           showTicks: B,
                           leftMargin: E,
                           rightMargin: W,
                           topMargin: V,
-                          bottomMargin: u,
+                          bottomMargin: h,
                           showLabels: x,
                           tooltip: U,
                           onSeriesMouseOver: J,
@@ -858,8 +860,8 @@ function Xe(se) {
                           classNames: f,
                           suffix: Z,
                           prefix: ee,
-                          noOfTicks: h || 5,
-                          dimmedOpacity: d,
+                          noOfTicks: d || 5,
+                          dimmedOpacity: g,
                           precision: q,
                           customLayers: te
                         }
@@ -890,7 +892,7 @@ function Xe(se) {
 }
 function ht(se) {
   const {
-    data: r,
+    data: l,
     graphTitle: c,
     backgroundColor: C,
     topMargin: ie,
@@ -903,7 +905,7 @@ function ht(se) {
     sources: P,
     graphDescription: p,
     height: V,
-    width: u,
+    width: h,
     footNote: E,
     colorDomain: W,
     colorLegendTitle: x,
@@ -912,7 +914,7 @@ function ht(se) {
     tooltip: U,
     onSeriesMouseOver: J,
     refValues: G,
-    showColorScale: re,
+    showColorScale: le,
     graphID: K,
     radius: A,
     maxRadiusValue: N,
@@ -933,14 +935,14 @@ function ht(se) {
     orientation: ee = "vertical",
     styles: m,
     classNames: f,
-    dimmedOpacity: h,
-    precision: d,
+    dimmedOpacity: d,
+    precision: g,
     customLayers: q
   } = se;
   return ee === "vertical" ? /* @__PURE__ */ i.jsx(
     Xe,
     {
-      data: r,
+      data: l,
       graphTitle: c,
       backgroundColor: C,
       topMargin: ie,
@@ -953,7 +955,7 @@ function ht(se) {
       sources: P,
       graphDescription: p,
       height: V,
-      width: u,
+      width: h,
       footNote: E,
       colorDomain: W,
       colorLegendTitle: x,
@@ -962,7 +964,7 @@ function ht(se) {
       tooltip: U,
       onSeriesMouseOver: J,
       refValues: G,
-      showColorScale: re,
+      showColorScale: le,
       graphID: K,
       radius: A,
       maxRadiusValue: N,
@@ -982,14 +984,14 @@ function ht(se) {
       detailsOnClick: _,
       classNames: f,
       noOfTicks: Z,
-      dimmedOpacity: h,
-      precision: d,
+      dimmedOpacity: d,
+      precision: g,
       customLayers: q
     }
   ) : /* @__PURE__ */ i.jsx(
     Pe,
     {
-      data: r,
+      data: l,
       graphTitle: c,
       backgroundColor: C,
       topMargin: ie,
@@ -1002,7 +1004,7 @@ function ht(se) {
       sources: P,
       graphDescription: p,
       height: V,
-      width: u,
+      width: h,
       footNote: E,
       colorDomain: W,
       colorLegendTitle: x,
@@ -1011,7 +1013,7 @@ function ht(se) {
       tooltip: U,
       onSeriesMouseOver: J,
       refValues: G,
-      showColorScale: re,
+      showColorScale: le,
       graphID: K,
       radius: A,
       maxRadiusValue: N,
@@ -1031,8 +1033,8 @@ function ht(se) {
       detailsOnClick: _,
       classNames: f,
       noOfTicks: Z,
-      dimmedOpacity: h,
-      precision: d,
+      dimmedOpacity: d,
+      precision: g,
       customLayers: q
     }
   );