@undp/data-viz 1.3.0 → 1.4.0

package/dist/index-DSnvdkHZ.js

@@ -1,495 +0,0 @@
-import { j as o } from "./index-BHm2KTjD-2e-Fu8L-.js";
-import { u as ge } from "./index-CaAIPGZo.js";
-import { memo as be, useRef as me, useState as b, useMemo as ue, useEffect as ve, useCallback as P } from "react";
-import { s as Me } from "./index-D7ltPi18.js";
-import { c as we } from "./Typography-XJoSE-By.js";
-import { o as je } from "./index-BLizQDlg.js";
-import { M as Ce } from "./Modal-C9txyGOk.js";
-import { S as ze } from "./Spinner-DN3s4S0H.js";
-import { T as De } from "./Tooltip-CzZ1wFyF.js";
-import { numberFormattingFunction as Oe } from "./numberFormattingFunction.js";
-import { getTextColorBasedOnBgColor as xe } from "./getTextColorBasedOnBgColor.js";
-import { Colors as se } from "./Colors.js";
-import { checkIfNullOrUndefined as q } from "./checkIfNullOrUndefined.js";
-import { s as ke } from "./string2HTML-BX0oNw83.js";
-import { u as Ne, m as ne } from "./use-in-view-CZPXmTZM.js";
-import { s as Se } from "./pow-e8zx3AQJ.js";
-import { A as $e } from "./index-Db-Yg_Ud.js";
-import { f as Ve, a as Ee, b as Ie, c as Le, d as He } from "./y-D0sAaVii.js";
-import { GraphFooter as Te } from "./GraphFooter.js";
-import { GraphHeader as Pe } from "./GraphHeader.js";
-import { ColorLegendWithMouseOver as Be } from "./ColorLegendWithMouseOver.js";
-import { E as We } from "./EmptyState-b2Ln487i.js";
-function ae(O, i) {
-  let l, u;
-  if (i === void 0)
-    for (const s of O)
-      s != null && (l === void 0 ? s >= s && (l = u = s) : (l > s && (l = s), u < s && (u = s)));
-  else {
-    let s = -1;
-    for (let c of O)
-      (c = i(c, ++s, O)) != null && (l === void 0 ? c >= c && (l = u = c) : (l > c && (l = c), u < c && (u = c)));
-  }
-  return [l, u];
-}
-const ye = be((O) => {
-  const {
-    data: i,
-    colors: l,
-    leftMargin: u,
-    width: s,
-    height: c,
-    colorDomain: $,
-    selectedColor: M,
-    rightMargin: U,
-    topMargin: J,
-    bottomMargin: j,
-    showLabels: a,
-    tooltip: B,
-    onSeriesMouseOver: k,
-    showValues: W,
-    suffix: K,
-    prefix: C,
-    highlightedDataPoints: R,
-    onSeriesMouseClick: V,
-    maxRadiusValue: E,
-    radius: h,
-    resetSelectionOnDoubleClick: Q,
-    detailsOnClick: v,
-    styles: Z,
-    classNames: F,
-    animate: w,
-    dimmedOpacity: I,
-    precision: ce
-  } = O, A = me(null), L = Ne(A, {
-    once: w.once,
-    amount: w.amount
-  }), [H, N] = b(void 0), [m, z] = b(void 0), [p, ee] = b(void 0), [te, G] = b(void 0), [ie, x] = b(void 0), [y, X] = b(null), D = ue(
-    () => ({
-      top: J,
-      bottom: j,
-      left: u,
-      right: U
-    }),
-    [J, j, u, U]
-  ), oe = s - D.left - D.right, f = c - D.top - D.bottom, Y = ue(
-    () => i.filter((e) => !q(e.size)).length === 0 ? i : je(
-      i.filter((e) => !q(e.size)),
-      "radius",
-      "asc"
-    ),
-    [i]
-  ), d = ue(() => i.filter((e) => e.size === void 0 || e.size === null).length !== i.length ? Se().domain([
-    0,
-    q(E) ? Math.max(...i.map((e) => e.size).filter((e) => e != null)) : E
-  ]).range([0.25, h]).nice() : void 0, [i, E, h]);
-  ve(() => {
-    (() => {
-      const n = [...Y];
-      Ve(n).force("y", Ee((r) => f / 2).strength(1)).force("x", Ie((r) => oe / 2).strength(1)).force(
-        "collide",
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Le((r) => d ? d(r.size || 0) + 1 : h + 1)
-      ).force("charge", He().strength(-15)).alphaDecay(0.05).tick(1e4).on("tick", () => {
-        X(n);
-      }).on("end", () => {
-        X(n);
-        const r = ae(
-          n,
-          (g) => g.x - (d ? d(g.size || 0) + 1 : h + 1)
-        )[0] || 0, _ = ae(
-          n,
-          (g) => g.y - (d ? d(g.size || 0) + 1 : h + 1)
-        )[0] || 0, T = ae(
-          n,
-          (g) => g.x + (d ? d(g.size || 0) + 1 : h + 1)
-        )[1] || 0, pe = ae(
-          n,
-          (g) => g.y + (d ? d(g.size || 0) + 1 : h + 1)
-        )[1] || 0;
-        ee([
-          r,
-          _,
-          r < 0 ? T - r : T,
-          _ < 0 ? pe - _ : pe
-        ]);
-      });
-    })();
-  }, [i, h, f, oe, E, Y, d]);
-  const re = P(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (e, n) => {
-      N(n), x(e.clientY), G(e.clientX), k?.(n);
-    },
-    [k]
-  ), he = P((e, n) => {
-    N(n), x(e.clientY), G(e.clientX);
-  }, []), de = P(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (e) => {
-      (V || v) && (m === e.label && Q ? (z(void 0), V?.(void 0)) : (z(e.label), V?.(e)));
-    },
-    [V, v, m, Q]
-  ), S = P(() => {
-    N(void 0), G(void 0), x(void 0), k?.(void 0);
-  }, [k]), le = P(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (e) => i.filter((n) => n.color).length === 0 ? l[0] : e.color ? l[$.indexOf(e.color)] : se.gray,
-    [i, l, $]
-  ), t = P(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (e) => M ? e.color && l[$.indexOf(e.color)] === M ? 1 : I : R.length !== 0 ? R.indexOf(e.label) !== -1 ? 0.85 : I : 0.85,
-    [M, I, l, $, R]
-  );
-  return y ? p ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-    /* @__PURE__ */ o.jsx(
-      ne.svg,
-      {
-        width: `${s}px`,
-        height: `${c}px`,
-        viewBox: `${p[0] > 0 ? 0 : p[0]} ${p[1] > 0 ? 0 : p[1]} ${s < p[2] ? p[2] : s} ${c < p[3] ? p[3] : c}`,
-        direction: "ltr",
-        ref: A,
-        children: /* @__PURE__ */ o.jsx("g", { transform: `translate(${D.left},${D.top})`, children: /* @__PURE__ */ o.jsx($e, { children: y.map((e) => {
-          const n = le(e), fe = t(e), r = d ? d(e.size || 0) : h, _ = r > 20 && (a || W);
-          return /* @__PURE__ */ o.jsxs(
-            ne.g,
-            {
-              className: "undp-viz-g-with-hover",
-              transform: `translate(${e.x},${e.y})`,
-              onMouseEnter: (T) => re(T, e),
-              onMouseMove: (T) => he(T, e),
-              onClick: () => de(e),
-              onMouseLeave: S,
-              variants: {
-                initial: { opacity: 0 },
-                whileInView: {
-                  opacity: fe,
-                  transition: { duration: w.duration }
-                }
-              },
-              initial: "initial",
-              animate: L ? "whileInView" : "initial",
-              children: [
-                /* @__PURE__ */ o.jsx(
-                  ne.circle,
-                  {
-                    cx: 0,
-                    cy: 0,
-                    r,
-                    exit: {
-                      fill: n,
-                      r: 0,
-                      opacity: 0,
-                      transition: { duration: w.duration }
-                    },
-                    variants: {
-                      initial: {
-                        fill: n,
-                        r: 0,
-                        opacity: 0
-                      },
-                      whileInView: {
-                        fill: n,
-                        r,
-                        opacity: 1,
-                        transition: { duration: w.duration }
-                      }
-                    },
-                    initial: "initial",
-                    animate: L ? "whileInView" : "initial"
-                  }
-                ),
-                (_ || W) && e.size !== void 0 && e.size !== null && /* @__PURE__ */ o.jsx(
-                  ne.g,
-                  {
-                    variants: {
-                      initial: { opacity: 0 },
-                      whileInView: {
-                        opacity: 1,
-                        transition: { duration: w.duration }
-                      }
-                    },
-                    initial: "initial",
-                    animate: L ? "whileInView" : "initial",
-                    exit: { opacity: 0, transition: { duration: w.duration } },
-                    children: /* @__PURE__ */ o.jsx(
-                      "foreignObject",
-                      {
-                        y: 0 - r,
-                        x: 0 - r,
-                        width: 2 * r,
-                        height: 2 * r,
-                        children: /* @__PURE__ */ o.jsxs("div", { className: "flex flex-col justify-center items-center h-full py-0 px-3", children: [
-                          a && /* @__PURE__ */ o.jsx(
-                            "p",
-                            {
-                              className: we.cn(
-                                "text-center leading-[1.25] overflow-hidden m-0 circle-packing-label",
-                                F?.graphObjectValues
-                              ),
-                              style: {
-                                fontSize: `${Math.min(
-                                  Math.max(Math.round(r / 4), 12),
-                                  Math.max(
-                                    Math.round(r * 12 / `${e.label}`.length),
-                                    12
-                                  ),
-                                  14
-                                )}px`,
-                                WebkitLineClamp: r * 2 < 60 ? 1 : r * 2 < 75 ? 2 : r * 2 < 100 ? 3 : void 0,
-                                display: "-webkit-box",
-                                WebkitBoxOrient: "vertical",
-                                color: xe(n),
-                                hyphens: "auto",
-                                ...Z?.graphObjectValues || {}
-                              },
-                              children: e.label
-                            }
-                          ),
-                          W && /* @__PURE__ */ o.jsx(
-                            "p",
-                            {
-                              className: "text-center font-bold leading-[1.25] w-full m-0 circle-packing-value",
-                              style: {
-                                fontSize: `${Math.min(
-                                  Math.max(Math.round(r / 4), 14),
-                                  14
-                                )}px`,
-                                color: xe(n)
-                              },
-                              children: Oe(e.size, "NA", ce, C, K)
-                            }
-                          )
-                        ] })
-                      }
-                    )
-                  }
-                )
-              ]
-            },
-            e.label
-          );
-        }) }) })
-      }
-    ),
-    H && B && te && ie && /* @__PURE__ */ o.jsx(
-      De,
-      {
-        data: H,
-        body: B,
-        xPos: te,
-        yPos: ie,
-        backgroundStyle: Z?.tooltip,
-        className: F?.tooltip
-      }
-    ),
-    v && m !== void 0 ? /* @__PURE__ */ o.jsx(
-      Ce.Modal,
-      {
-        open: m !== void 0,
-        onClose: () => {
-          z(void 0);
-        },
-        children: /* @__PURE__ */ o.jsx(
-          "div",
-          {
-            className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof v == "string" ? { __html: ke(v, m) } : void 0,
-            children: typeof v == "function" ? v(m) : null
-          }
-        )
-      }
-    ) : null
-  ] }) : null : /* @__PURE__ */ o.jsx("div", { style: { width: `${s}px`, height: `${c}px` }, children: /* @__PURE__ */ o.jsx("div", { className: "flex m-auto items-center justify-center p-0 leading-none text-base h-40", children: /* @__PURE__ */ o.jsx(ze.Spinner, {}) }) });
-});
-ye.displayName = "BubbleChart";
-function ct(O) {
-  const {
-    data: i,
-    graphTitle: l,
-    colors: u,
-    suffix: s = "",
-    sources: c,
-    prefix: $ = "",
-    graphDescription: M,
-    leftMargin: U = 0,
-    rightMargin: J = 0,
-    height: j,
-    width: a,
-    footNote: B,
-    colorDomain: k,
-    colorLegendTitle: W,
-    padding: K,
-    backgroundColor: C = !1,
-    topMargin: R = 0,
-    bottomMargin: V = 0,
-    showLabels: E = !0,
-    relativeHeight: h,
-    tooltip: Q,
-    onSeriesMouseOver: v,
-    showColorScale: Z = !0,
-    showValues: F,
-    graphID: w,
-    highlightedDataPoints: I = [],
-    onSeriesMouseClick: ce,
-    graphDownload: A = !1,
-    dataDownload: L = !1,
-    language: H = "en",
-    showNAColor: N,
-    minHeight: m = 0,
-    theme: z = "light",
-    ariaLabel: p,
-    radius: ee,
-    maxRadiusValue: te,
-    resetSelectionOnDoubleClick: G = !0,
-    detailsOnClick: ie,
-    styles: x,
-    classNames: y,
-    animate: X = !1,
-    dimmedOpacity: D = 0.3,
-    precision: oe = 2
-  } = O, [f, Y] = b(0), [d, re] = b(0), [he, de] = b(void 0), S = me(null), le = me(null);
-  return ve(() => {
-    const t = new ResizeObserver((e) => {
-      Y(a || e[0].target.clientWidth || 620), re(j || e[0].target.clientHeight || 480);
-    });
-    return S.current && (re(S.current.clientHeight || 480), Y(S.current.clientWidth || 620), a || t.observe(S.current)), () => t.disconnect();
-  }, [a, j]), /* @__PURE__ */ o.jsx(
-    "div",
-    {
-      className: `${z || "light"} flex  ${a ? "w-fit grow-0" : "w-full grow"}`,
-      dir: H === "he" || H === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ o.jsx(
-        "div",
-        {
-          className: we.cn(
-            `${C ? C === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${H || "en"}`,
-            y?.graphContainer
-          ),
-          style: {
-            ...x?.graphContainer || {},
-            ...C && C !== !0 ? { backgroundColor: C } : {}
-          },
-          id: w,
-          ref: le,
-          "aria-label": p || `${l ? `The graph shows ${l}. ` : ""}This is a chart where data points are represented by circles, and their sizes reflect their values.${M ? ` ${M}` : ""}`,
-          children: /* @__PURE__ */ o.jsx(
-            "div",
-            {
-              className: "flex grow",
-              style: { padding: C ? K || "1rem" : K || 0 },
-              children: /* @__PURE__ */ o.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                l || M || A || L ? /* @__PURE__ */ o.jsx(
-                  Pe,
-                  {
-                    styles: {
-                      title: x?.title,
-                      description: x?.description
-                    },
-                    classNames: {
-                      title: y?.title,
-                      description: y?.description
-                    },
-                    graphTitle: l,
-                    graphDescription: M,
-                    width: a,
-                    graphDownload: A ? le.current : void 0,
-                    dataDownload: L ? i.map((t) => t.data).filter((t) => t !== void 0).length > 0 ? i.map((t) => t.data).filter((t) => t !== void 0) : i.filter((t) => t !== void 0) : null
-                  }
-                ) : null,
-                /* @__PURE__ */ o.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: i.length === 0 ? /* @__PURE__ */ o.jsx(We, {}) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-                  Z && i.filter((t) => t.color).length !== 0 ? /* @__PURE__ */ o.jsx(
-                    Be,
-                    {
-                      width: a,
-                      colorLegendTitle: W,
-                      colors: u || se[z].categoricalColors.colors,
-                      colorDomain: k || ge(
-                        i.filter((t) => t.color),
-                        "color"
-                      ).map((t) => t.color),
-                      setSelectedColor: de,
-                      showNAColor: N ?? !0,
-                      isCenter: !0
-                    }
-                  ) : null,
-                  /* @__PURE__ */ o.jsx(
-                    "div",
-                    {
-                      className: "flex flex-col grow justify-center w-full leading-0",
-                      ref: S,
-                      "aria-label": "Graph area",
-                      children: (a || f) && (j || d) ? /* @__PURE__ */ o.jsx(
-                        ye,
-                        {
-                          data: i,
-                          colors: i.filter((t) => t.color).length === 0 ? u ? [u] : [se.primaryColors["blue-600"]] : u || se[z].categoricalColors.colors,
-                          colorDomain: i.filter((t) => t.color).length === 0 ? [] : k || ge(
-                            i.filter((t) => t.color),
-                            "color"
-                          ).map((t) => t.color),
-                          width: a || f,
-                          height: Math.max(
-                            m,
-                            j || (h ? m ? (a || f) * h > m ? (a || f) * h : m : (a || f) * h : d)
-                          ),
-                          leftMargin: U,
-                          rightMargin: J,
-                          topMargin: R,
-                          bottomMargin: V,
-                          showLabels: E,
-                          showValues: F !== !1 ? i.filter((t) => t.size).length !== 0 : F,
-                          selectedColor: he,
-                          suffix: s,
-                          prefix: $,
-                          tooltip: Q,
-                          onSeriesMouseOver: v,
-                          highlightedDataPoints: I,
-                          onSeriesMouseClick: ce,
-                          theme: z,
-                          radius: ee || Math.min(
-                            a || f,
-                            j || (h ? m ? (a || f) * h > m ? (a || f) * h : m : (a || f) * h : d)
-                          ) * (i.filter((t) => !q(t.size)).length === 0 ? 1 : Math.max(
-                            ...i.map((t) => t.size).filter((t) => t != null)
-                          )) / (i.filter((t) => !q(t.size)).length === 0 ? i.length : Me(i.filter((t) => t.size).map((t) => t.size)) * 1.25),
-                          maxRadiusValue: te,
-                          resetSelectionOnDoubleClick: G,
-                          detailsOnClick: ie,
-                          styles: x,
-                          classNames: y,
-                          animate: X === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : X || { duration: 0, once: !0, amount: 0 },
-                          dimmedOpacity: D,
-                          precision: oe
-                        }
-                      ) : null
-                    }
-                  )
-                ] }) }),
-                c || B ? /* @__PURE__ */ o.jsx(
-                  Te,
-                  {
-                    styles: { footnote: x?.footnote, source: x?.source },
-                    classNames: {
-                      footnote: y?.footnote,
-                      source: y?.source
-                    },
-                    sources: c,
-                    footNote: B,
-                    width: a
-                  }
-                ) : null
-              ] })
-            }
-          )
-        }
-      )
-    }
-  );
-}
-export {
-  ct as C,
-  ae as e
-};
-//# sourceMappingURL=index-DSnvdkHZ.js.map

package/dist/index-DSnvdkHZ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-DSnvdkHZ.js","sources":["../node_modules/d3-array/src/extent.js","../src/Components/Graphs/CirclePackingGraph/Graph.tsx","../src/Components/Graphs/CirclePackingGraph/index.tsx"],"sourcesContent":["export default function extent(values, valueof) {\n  let min;\n  let max;\n  if (valueof === undefined) {\n    for (const value of values) {\n      if (value != null) {\n        if (min === undefined) {\n          if (value >= value) min = max = value;\n        } else {\n          if (min > value) min = value;\n          if (max < value) max = value;\n        }\n      }\n    }\n  } else {\n    let index = -1;\n    for (let value of values) {\n      if ((value = valueof(value, ++index, values)) != null) {\n        if (min === undefined) {\n          if (value >= value) min = max = value;\n        } else {\n          if (min > value) min = value;\n          if (max < value) max = value;\n        }\n      }\n    }\n  }\n  return [min, max];\n}\n","import { memo, useCallback, useMemo, useEffect, useState, useRef } from 'react';\r\nimport { forceCollide, forceManyBody, forceSimulation, forceX, forceY } from 'd3-force';\r\nimport orderBy from 'lodash.orderby';\r\nimport { scaleSqrt } from 'd3-scale';\r\nimport { extent } from 'd3-array';\r\nimport { Modal } from '@undp/design-system-react/Modal';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\nimport { AnimatePresence, motion, useInView } from 'motion/react';\r\n\r\nimport { AnimateDataType, ClassNameObject, StyleObject, TreeMapDataType } from '@/Types';\r\nimport { Tooltip } from '@/Components/Elements/Tooltip';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { getTextColorBasedOnBgColor } from '@/Utils/getTextColorBasedOnBgColor';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  data: TreeMapDataType[];\r\n  colors: string[];\r\n  colorDomain: string[];\r\n  leftMargin: number;\r\n  rightMargin: number;\r\n  topMargin: number;\r\n  bottomMargin: number;\r\n  showLabels: boolean;\r\n  showValues: boolean;\r\n  width: number;\r\n  height: number;\r\n  suffix: string;\r\n  prefix: string;\r\n  selectedColor?: string;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  tooltip?: string | ((_d: any) => React.ReactNode);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseOver?: (_d: any) => void;\r\n  highlightedDataPoints: (string | number)[];\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseClick?: (_d: any) => void;\r\n  theme: 'light' | 'dark';\r\n  maxRadiusValue?: number;\r\n  radius: number;\r\n  resetSelectionOnDoubleClick: boolean;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n  styles?: StyleObject;\r\n  classNames?: ClassNameObject;\r\n  animate: AnimateDataType;\r\n  dimmedOpacity: number;\r\n  precision: number;\r\n}\r\n\r\ninterface TreeMapDataTypeForBubbleChart extends TreeMapDataType {\r\n  x: number;\r\n  y: number;\r\n  vx: number;\r\n  vy: number;\r\n}\r\n\r\nexport const Graph = memo((props: Props) => {\r\n  const {\r\n    data,\r\n    colors,\r\n    leftMargin,\r\n    width,\r\n    height,\r\n    colorDomain,\r\n    selectedColor,\r\n    rightMargin,\r\n    topMargin,\r\n    bottomMargin,\r\n    showLabels,\r\n    tooltip,\r\n    onSeriesMouseOver,\r\n    showValues,\r\n    suffix,\r\n    prefix,\r\n    highlightedDataPoints,\r\n    onSeriesMouseClick,\r\n    maxRadiusValue,\r\n    radius,\r\n    resetSelectionOnDoubleClick,\r\n    detailsOnClick,\r\n    styles,\r\n    classNames,\r\n    animate,\r\n    dimmedOpacity,\r\n    precision,\r\n  } = props;\r\n  const svgRef = useRef(null);\r\n  const isInView = useInView(svgRef, {\r\n    once: animate.once,\r\n    amount: animate.amount,\r\n  });\r\n\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n  const [viewPortDimensions, setViewPortDimensions] = useState<\r\n    [number, number, number, number] | undefined\r\n  >(undefined);\r\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\r\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\r\n  const [finalData, setFinalData] = useState<TreeMapDataTypeForBubbleChart[] | null>(null);\r\n\r\n  // Memoize expensive calculations\r\n  const margin = useMemo(\r\n    () => ({\r\n      top: topMargin,\r\n      bottom: bottomMargin,\r\n      left: leftMargin,\r\n      right: rightMargin,\r\n    }),\r\n    [topMargin, bottomMargin, leftMargin, rightMargin],\r\n  );\r\n\r\n  const graphWidth = width - margin.left - margin.right;\r\n  const graphHeight = height - margin.top - margin.bottom;\r\n\r\n  // Memoize data ordering and radius scale\r\n  const dataOrdered = useMemo(\r\n    () =>\r\n      data.filter(d => !checkIfNullOrUndefined(d.size)).length === 0\r\n        ? data\r\n        : orderBy(\r\n            data.filter(d => !checkIfNullOrUndefined(d.size)),\r\n            'radius',\r\n            'asc',\r\n          ),\r\n    [data],\r\n  );\r\n\r\n  const radiusScale = useMemo(() => {\r\n    return data.filter(d => d.size === undefined || d.size === null).length !== data.length\r\n      ? scaleSqrt()\r\n          .domain([\r\n            0,\r\n            checkIfNullOrUndefined(maxRadiusValue)\r\n              ? Math.max(...data.map(d => d.size).filter(d => d !== undefined && d !== null))\r\n              : (maxRadiusValue as number),\r\n          ])\r\n          .range([0.25, radius])\r\n          .nice()\r\n      : undefined;\r\n  }, [data, maxRadiusValue, radius]);\r\n\r\n  // Memoize simulation setup\r\n  useEffect(() => {\r\n    const setupSimulation = () => {\r\n      const dataTemp = [...dataOrdered];\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      const simulation = forceSimulation(dataTemp as any)\r\n        .force('y', forceY(_d => graphHeight / 2).strength(1))\r\n        .force('x', forceX(_d => graphWidth / 2).strength(1))\r\n        .force(\r\n          'collide',\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          forceCollide((d: any) => (radiusScale ? radiusScale(d.size || 0) + 1 : radius + 1)),\r\n        )\r\n        .force('charge', forceManyBody().strength(-15))\r\n        .alphaDecay(0.05)\r\n        .tick(10000);\r\n\r\n      simulation\r\n        .on('tick', () => {\r\n          setFinalData(dataTemp as TreeMapDataTypeForBubbleChart[]);\r\n        })\r\n        .on('end', () => {\r\n          setFinalData(dataTemp as TreeMapDataTypeForBubbleChart[]);\r\n          const xMinExtent =\r\n            extent(\r\n              dataTemp as TreeMapDataTypeForBubbleChart[],\r\n              d => d.x - (radiusScale ? radiusScale(d.size || 0) + 1 : radius + 1),\r\n            )[0] || 0;\r\n          const yMinExtent =\r\n            extent(\r\n              dataTemp as TreeMapDataTypeForBubbleChart[],\r\n              d => d.y - (radiusScale ? radiusScale(d.size || 0) + 1 : radius + 1),\r\n            )[0] || 0;\r\n          const xMaxExtent =\r\n            extent(\r\n              dataTemp as TreeMapDataTypeForBubbleChart[],\r\n              d => d.x + (radiusScale ? radiusScale(d.size || 0) + 1 : radius + 1),\r\n            )[1] || 0;\r\n          const yMaxExtent =\r\n            extent(\r\n              dataTemp as TreeMapDataTypeForBubbleChart[],\r\n              d => d.y + (radiusScale ? radiusScale(d.size || 0) + 1 : radius + 1),\r\n            )[1] || 0;\r\n          setViewPortDimensions([\r\n            xMinExtent,\r\n            yMinExtent,\r\n            xMinExtent < 0 ? xMaxExtent - xMinExtent : xMaxExtent,\r\n            yMinExtent < 0 ? yMaxExtent - yMinExtent : yMaxExtent,\r\n          ]);\r\n        });\r\n    };\r\n\r\n    setupSimulation();\r\n  }, [data, radius, graphHeight, graphWidth, maxRadiusValue, dataOrdered, radiusScale]);\r\n\r\n  // Memoize event handlers to prevent unnecessary re-renders\r\n  const handleMouseEnter = useCallback(\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    (event: any, d: any) => {\r\n      setMouseOverData(d);\r\n      setEventY(event.clientY);\r\n      setEventX(event.clientX);\r\n      onSeriesMouseOver?.(d);\r\n    },\r\n    [onSeriesMouseOver],\r\n  );\r\n\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const handleMouseMove = useCallback((event: any, d: any) => {\r\n    setMouseOverData(d);\r\n    setEventY(event.clientY);\r\n    setEventX(event.clientX);\r\n  }, []);\r\n\r\n  const handleClick = useCallback(\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    (d: any) => {\r\n      if (onSeriesMouseClick || detailsOnClick) {\r\n        if (mouseClickData === d.label && resetSelectionOnDoubleClick) {\r\n          setMouseClickData(undefined);\r\n          onSeriesMouseClick?.(undefined);\r\n        } else {\r\n          setMouseClickData(d.label);\r\n          onSeriesMouseClick?.(d);\r\n        }\r\n      }\r\n    },\r\n    [onSeriesMouseClick, detailsOnClick, mouseClickData, resetSelectionOnDoubleClick],\r\n  );\r\n\r\n  const handleMouseLeave = useCallback(() => {\r\n    setMouseOverData(undefined);\r\n    setEventX(undefined);\r\n    setEventY(undefined);\r\n    onSeriesMouseOver?.(undefined);\r\n  }, [onSeriesMouseOver]);\r\n\r\n  // Memoize color and opacity calculations\r\n  const getCircleColor = useCallback(\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    (d: any) =>\r\n      data.filter(el => el.color).length === 0\r\n        ? colors[0]\r\n        : !d.color\r\n          ? Colors.gray\r\n          : colors[colorDomain.indexOf(d.color)],\r\n    [data, colors, colorDomain],\r\n  );\r\n\r\n  const getOpacity = useCallback(\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    (d: any) =>\r\n      selectedColor\r\n        ? d.color\r\n          ? colors[colorDomain.indexOf(d.color)] === selectedColor\r\n            ? 1\r\n            : dimmedOpacity\r\n          : dimmedOpacity\r\n        : highlightedDataPoints.length !== 0\r\n          ? highlightedDataPoints.indexOf(d.label) !== -1\r\n            ? 0.85\r\n            : dimmedOpacity\r\n          : 0.85,\r\n    [selectedColor, dimmedOpacity, colors, colorDomain, highlightedDataPoints],\r\n  );\r\n\r\n  // Render loading state\r\n  if (!finalData) {\r\n    return (\r\n      <div style={{ width: `${width}px`, height: `${height}px` }}>\r\n        <div className='flex m-auto items-center justify-center p-0 leading-none text-base h-40'>\r\n          <Spinner />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n  if (viewPortDimensions) {\r\n    return (\r\n      <>\r\n        <motion.svg\r\n          width={`${width}px`}\r\n          height={`${height}px`}\r\n          viewBox={`${viewPortDimensions[0] > 0 ? 0 : viewPortDimensions[0]} ${\r\n            viewPortDimensions[1] > 0 ? 0 : viewPortDimensions[1]\r\n          } ${width < viewPortDimensions[2] ? viewPortDimensions[2] : width} ${\r\n            height < viewPortDimensions[3] ? viewPortDimensions[3] : height\r\n          }`}\r\n          direction='ltr'\r\n          ref={svgRef}\r\n        >\r\n          <g transform={`translate(${margin.left},${margin.top})`}>\r\n            <AnimatePresence>\r\n              {finalData.map(d => {\r\n                const circleColor = getCircleColor(d);\r\n                const opacity = getOpacity(d);\r\n                const bubbleRadius = radiusScale ? radiusScale(d.size || 0) : radius;\r\n                const showLabel = bubbleRadius > 20 && (showLabels || showValues);\r\n\r\n                return (\r\n                  <motion.g\r\n                    className='undp-viz-g-with-hover'\r\n                    key={d.label}\r\n                    transform={`translate(${d.x},${d.y})`}\r\n                    onMouseEnter={event => handleMouseEnter(event, d)}\r\n                    onMouseMove={event => handleMouseMove(event, d)}\r\n                    onClick={() => handleClick(d)}\r\n                    onMouseLeave={handleMouseLeave}\r\n                    variants={{\r\n                      initial: { opacity: 0 },\r\n                      whileInView: {\r\n                        opacity,\r\n                        transition: { duration: animate.duration },\r\n                      },\r\n                    }}\r\n                    initial='initial'\r\n                    animate={isInView ? 'whileInView' : 'initial'}\r\n                  >\r\n                    <motion.circle\r\n                      cx={0}\r\n                      cy={0}\r\n                      r={bubbleRadius}\r\n                      exit={{\r\n                        fill: circleColor,\r\n                        r: 0,\r\n                        opacity: 0,\r\n                        transition: { duration: animate.duration },\r\n                      }}\r\n                      variants={{\r\n                        initial: {\r\n                          fill: circleColor,\r\n                          r: 0,\r\n                          opacity: 0,\r\n                        },\r\n                        whileInView: {\r\n                          fill: circleColor,\r\n                          r: bubbleRadius,\r\n                          opacity: 1,\r\n                          transition: { duration: animate.duration },\r\n                        },\r\n                      }}\r\n                      initial='initial'\r\n                      animate={isInView ? 'whileInView' : 'initial'}\r\n                    />\r\n                    {(showLabel || showValues) && d.size !== undefined && d.size !== null && (\r\n                      <motion.g\r\n                        variants={{\r\n                          initial: { opacity: 0 },\r\n                          whileInView: {\r\n                            opacity: 1,\r\n                            transition: { duration: animate.duration },\r\n                          },\r\n                        }}\r\n                        initial='initial'\r\n                        animate={isInView ? 'whileInView' : 'initial'}\r\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\r\n                      >\r\n                        <foreignObject\r\n                          y={0 - bubbleRadius}\r\n                          x={0 - bubbleRadius}\r\n                          width={2 * bubbleRadius}\r\n                          height={2 * bubbleRadius}\r\n                        >\r\n                          <div className='flex flex-col justify-center items-center h-full py-0 px-3'>\r\n                            {showLabels && (\r\n                              <p\r\n                                className={cn(\r\n                                  'text-center leading-[1.25] overflow-hidden m-0 circle-packing-label',\r\n                                  classNames?.graphObjectValues,\r\n                                )}\r\n                                style={{\r\n                                  fontSize: `${Math.min(\r\n                                    Math.max(Math.round(bubbleRadius / 4), 12),\r\n                                    Math.max(\r\n                                      Math.round((bubbleRadius * 12) / `${d.label}`.length),\r\n                                      12,\r\n                                    ),\r\n                                    14,\r\n                                  )}px`,\r\n                                  WebkitLineClamp:\r\n                                    bubbleRadius * 2 < 60\r\n                                      ? 1\r\n                                      : bubbleRadius * 2 < 75\r\n                                        ? 2\r\n                                        : bubbleRadius * 2 < 100\r\n                                          ? 3\r\n                                          : undefined,\r\n                                  display: '-webkit-box',\r\n                                  WebkitBoxOrient: 'vertical',\r\n                                  color: getTextColorBasedOnBgColor(circleColor),\r\n                                  hyphens: 'auto',\r\n                                  ...(styles?.graphObjectValues || {}),\r\n                                }}\r\n                              >\r\n                                {d.label}\r\n                              </p>\r\n                            )}\r\n                            {showValues && (\r\n                              <p\r\n                                className='text-center font-bold leading-[1.25] w-full m-0 circle-packing-value'\r\n                                style={{\r\n                                  fontSize: `${Math.min(\r\n                                    Math.max(Math.round(bubbleRadius / 4), 14),\r\n                                    14,\r\n                                  )}px`,\r\n                                  color: getTextColorBasedOnBgColor(circleColor),\r\n                                }}\r\n                              >\r\n                                {numberFormattingFunction(d.size, 'NA', precision, prefix, suffix)}\r\n                              </p>\r\n                            )}\r\n                          </div>\r\n                        </foreignObject>\r\n                      </motion.g>\r\n                    )}\r\n                  </motion.g>\r\n                );\r\n              })}\r\n            </AnimatePresence>\r\n          </g>\r\n        </motion.svg>\r\n        {mouseOverData && tooltip && eventX && eventY && (\r\n          <Tooltip\r\n            data={mouseOverData}\r\n            body={tooltip}\r\n            xPos={eventX}\r\n            yPos={eventY}\r\n            backgroundStyle={styles?.tooltip}\r\n            className={classNames?.tooltip}\r\n          />\r\n        )}\r\n        {detailsOnClick && mouseClickData !== undefined ? (\r\n          <Modal\r\n            open={mouseClickData !== undefined}\r\n            onClose={() => {\r\n              setMouseClickData(undefined);\r\n            }}\r\n          >\r\n            <div\r\n              className='graph-modal-content m-0'\r\n              dangerouslySetInnerHTML={\r\n                typeof detailsOnClick === 'string'\r\n                  ? { __html: string2HTML(detailsOnClick, mouseClickData) }\r\n                  : undefined\r\n              }\r\n            >\r\n              {typeof detailsOnClick === 'function' ? detailsOnClick(mouseClickData) : null}\r\n            </div>\r\n          </Modal>\r\n        ) : null}\r\n      </>\r\n    );\r\n  }\r\n  return null;\r\n});\r\n\r\nGraph.displayName = 'BubbleChart';\r\n","import uniqBy from 'lodash.uniqby';\r\nimport { useState, useRef, useEffect } from 'react';\r\nimport sum from 'lodash.sum';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport {\r\n  Languages,\r\n  SourcesDataType,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  TreeMapDataType,\r\n  AnimateDataType,\r\n} from '@/Types';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { ColorLegendWithMouseOver } from '@/Components/Elements/ColorLegendWithMouseOver';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\r\nimport { EmptyState } from '@/Components/Elements/EmptyState';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: TreeMapDataType[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Color or array of colors for circle */\r\n  colors?: string | string[];\r\n  /** Domain of colors for the graph */\r\n  colorDomain?: string[];\r\n  /** Title for the color legend */\r\n  colorLegendTitle?: string;\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n  /** Left margin of the graph */\r\n  leftMargin?: number;\r\n  /** Right margin of the graph */\r\n  rightMargin?: number;\r\n  /** Top margin of the graph */\r\n  topMargin?: number;\r\n  /** Bottom margin of the graph */\r\n  bottomMargin?: number;\r\n\r\n  // Values and Ticks\r\n  /** Prefix for values */\r\n  prefix?: string;\r\n  /** Suffix for values */\r\n  suffix?: string;\r\n  /** Maximum value mapped to the radius chart */\r\n  maxRadiusValue?: number;\r\n\r\n  // Graph Parameters\r\n  /** Maximum radius of the circle */\r\n  radius?: number;\r\n  /** Toggle visibility of labels */\r\n  showLabels?: boolean;\r\n  /** Toggle visibility of values */\r\n  showValues?: boolean;\r\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\r\n  showColorScale?: boolean;\r\n  /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */\r\n  showNAColor?: boolean;\r\n  /** Data points to highlight. Use the label value from data to highlight the data point */\r\n  highlightedDataPoints?: (string | number)[];\r\n  /** Defines the opacity of the non-highlighted data */\r\n  dimmedOpacity?: number;\r\n  /** Toggles if the graph animates in when loaded.  */\r\n  animate?: boolean | AnimateDataType;\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\r\n  /** Enable graph download option as png */\r\n  graphDownload?: boolean;\r\n  /** Enable data download option as a csv */\r\n  dataDownload?: boolean;\r\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\r\n  resetSelectionOnDoubleClick?: boolean;\r\n\r\n  // Interactions and Callbacks\r\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  tooltip?: string | ((_d: any) => React.ReactNode);\r\n  /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n  /** Callback for mouse over event */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseOver?: (_d: any) => void;\r\n  /** Callback for mouse click event */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseClick?: (_d: any) => void;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function CirclePackingGraph(props: Props) {\r\n  const {\r\n    data,\r\n    graphTitle,\r\n    colors,\r\n    suffix = '',\r\n    sources,\r\n    prefix = '',\r\n    graphDescription,\r\n    leftMargin = 0,\r\n    rightMargin = 0,\r\n    height,\r\n    width,\r\n    footNote,\r\n    colorDomain,\r\n    colorLegendTitle,\r\n    padding,\r\n    backgroundColor = false,\r\n    topMargin = 0,\r\n    bottomMargin = 0,\r\n    showLabels = true,\r\n    relativeHeight,\r\n    tooltip,\r\n    onSeriesMouseOver,\r\n    showColorScale = true,\r\n    showValues,\r\n    graphID,\r\n    highlightedDataPoints = [],\r\n    onSeriesMouseClick,\r\n    graphDownload = false,\r\n    dataDownload = false,\r\n    language = 'en',\r\n    showNAColor,\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    ariaLabel,\r\n    radius,\r\n    maxRadiusValue,\r\n    resetSelectionOnDoubleClick = true,\r\n    detailsOnClick,\r\n    styles,\r\n    classNames,\r\n    animate = false,\r\n    dimmedOpacity = 0.3,\r\n    precision = 2,\r\n  } = props;\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        ref={graphParentDiv}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a chart where data points are represented by circles, and their sizes reflect their values.${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {graphTitle || graphDescription || graphDownload || dataDownload ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n                graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n                dataDownload={\r\n                  dataDownload\r\n                    ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n                      ? data.map(d => d.data).filter(d => d !== undefined)\r\n                      : data.filter(d => d !== undefined)\r\n                    : null\r\n                }\r\n              />\r\n            ) : null}\r\n            <div className='grow flex flex-col justify-center gap-3 w-full'>\r\n              {data.length === 0 ? (\r\n                <EmptyState />\r\n              ) : (\r\n                <>\r\n                  {showColorScale && data.filter(el => el.color).length !== 0 ? (\r\n                    <ColorLegendWithMouseOver\r\n                      width={width}\r\n                      colorLegendTitle={colorLegendTitle}\r\n                      colors={\r\n                        (colors as string[] | undefined) || Colors[theme].categoricalColors.colors\r\n                      }\r\n                      colorDomain={\r\n                        colorDomain ||\r\n                        (uniqBy(\r\n                          data.filter(el => el.color),\r\n                          'color',\r\n                        ).map(d => d.color) as string[])\r\n                      }\r\n                      setSelectedColor={setSelectedColor}\r\n                      showNAColor={\r\n                        showNAColor === undefined || showNAColor === null ? true : showNAColor\r\n                      }\r\n                      isCenter\r\n                    />\r\n                  ) : null}\r\n                  <div\r\n                    className='flex flex-col grow justify-center w-full leading-0'\r\n                    ref={graphDiv}\r\n                    aria-label='Graph area'\r\n                  >\r\n                    {(width || svgWidth) && (height || svgHeight) ? (\r\n                      <Graph\r\n                        data={data}\r\n                        colors={\r\n                          data.filter(el => el.color).length === 0\r\n                            ? colors\r\n                              ? [colors as string]\r\n                              : [Colors.primaryColors['blue-600']]\r\n                            : (colors as string[] | undefined) ||\r\n                              Colors[theme].categoricalColors.colors\r\n                        }\r\n                        colorDomain={\r\n                          data.filter(el => el.color).length === 0\r\n                            ? []\r\n                            : colorDomain ||\r\n                              (uniqBy(\r\n                                data.filter(el => el.color),\r\n                                'color',\r\n                              ).map(d => d.color) as string[])\r\n                        }\r\n                        width={width || svgWidth}\r\n                        height={Math.max(\r\n                          minHeight,\r\n                          height ||\r\n                            (relativeHeight\r\n                              ? minHeight\r\n                                ? (width || svgWidth) * relativeHeight > minHeight\r\n                                  ? (width || svgWidth) * relativeHeight\r\n                                  : minHeight\r\n                                : (width || svgWidth) * relativeHeight\r\n                              : svgHeight),\r\n                        )}\r\n                        leftMargin={leftMargin}\r\n                        rightMargin={rightMargin}\r\n                        topMargin={topMargin}\r\n                        bottomMargin={bottomMargin}\r\n                        showLabels={showLabels}\r\n                        showValues={\r\n                          showValues !== false\r\n                            ? data.filter(el => el.size).length !== 0\r\n                            : (showValues as boolean)\r\n                        }\r\n                        selectedColor={selectedColor}\r\n                        suffix={suffix}\r\n                        prefix={prefix}\r\n                        tooltip={tooltip}\r\n                        onSeriesMouseOver={onSeriesMouseOver}\r\n                        highlightedDataPoints={highlightedDataPoints}\r\n                        onSeriesMouseClick={onSeriesMouseClick}\r\n                        theme={theme}\r\n                        radius={\r\n                          !radius\r\n                            ? (Math.min(\r\n                                width || svgWidth,\r\n                                height ||\r\n                                  (relativeHeight\r\n                                    ? minHeight\r\n                                      ? (width || svgWidth) * relativeHeight > minHeight\r\n                                        ? (width || svgWidth) * relativeHeight\r\n                                        : minHeight\r\n                                      : (width || svgWidth) * relativeHeight\r\n                                    : svgHeight),\r\n                              ) *\r\n                                (data.filter(d => !checkIfNullOrUndefined(d.size)).length === 0\r\n                                  ? 1\r\n                                  : Math.max(\r\n                                      ...data\r\n                                        .map(d => d.size)\r\n                                        .filter(d => d !== undefined && d !== null),\r\n                                    ))) /\r\n                              (data.filter(d => !checkIfNullOrUndefined(d.size)).length === 0\r\n                                ? data.length\r\n                                : sum(data.filter(d => d.size).map(d => d.size)) * 1.25)\r\n                            : radius\r\n                        }\r\n                        maxRadiusValue={maxRadiusValue}\r\n                        resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\r\n                        detailsOnClick={detailsOnClick}\r\n                        styles={styles}\r\n                        classNames={classNames}\r\n                        animate={\r\n                          animate === true\r\n                            ? { duration: 0.5, once: true, amount: 0.5 }\r\n                            : animate || { duration: 0, once: true, amount: 0 }\r\n                        }\r\n                        dimmedOpacity={dimmedOpacity}\r\n                        precision={precision}\r\n                      />\r\n                    ) : null}\r\n                  </div>\r\n                </>\r\n              )}\r\n            </div>\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["extent","values","valueof","min","max","value","index","Graph","memo","props","data","colors","leftMargin","width","height","colorDomain","selectedColor","rightMargin","topMargin","bottomMargin","showLabels","tooltip","onSeriesMouseOver","showValues","suffix","prefix","highlightedDataPoints","onSeriesMouseClick","maxRadiusValue","radius","resetSelectionOnDoubleClick","detailsOnClick","styles","classNames","animate","dimmedOpacity","precision","svgRef","useRef","isInView","useInView","mouseOverData","setMouseOverData","useState","mouseClickData","setMouseClickData","viewPortDimensions","setViewPortDimensions","eventX","setEventX","eventY","setEventY","finalData","setFinalData","margin","useMemo","graphWidth","graphHeight","dataOrdered","d","checkIfNullOrUndefined","orderBy","radiusScale","scaleSqrt","useEffect","dataTemp","forceSimulation","forceY","_d","forceX","forceCollide","forceManyBody","xMinExtent","yMinExtent","xMaxExtent","yMaxExtent","handleMouseEnter","useCallback","event","handleMouseMove","handleClick","handleMouseLeave","getCircleColor","el","Colors","getOpacity","jsxs","Fragment","jsx","motion","AnimatePresence","circleColor","opacity","bubbleRadius","showLabel","cn","getTextColorBasedOnBgColor","Tooltip","Modal","string2HTML","Spinner","CirclePackingGraph","graphTitle","sources","graphDescription","footNote","colorLegendTitle","padding","backgroundColor","relativeHeight","showColorScale","graphID","graphDownload","dataDownload","language","showNAColor","minHeight","theme","ariaLabel","svgWidth","setSvgWidth","svgHeight","setSvgHeight","setSelectedColor","graphDiv","graphParentDiv","resizeObserver","entries","GraphHeader","EmptyState","ColorLegendWithMouseOver","uniqBy","sum","GraphFooter"],"mappings":"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","x_google_ignoreList":[0]}