@undp/data-viz 1.5.7 → 1.5.9

package/dist/{index-37q0ULNQ.js.map → index-CE9pmfxt.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-37q0ULNQ.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\n\r\nimport { 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  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    dimmedOpacity,\r\n    precision,\r\n  } = props;\r\n  const svgRef = useRef(null);\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        <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            {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              return (\r\n                <g\r\n                  className='undp-viz-g-with-hover'\r\n                  key={d.label}\r\n                  opacity={opacity}\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                >\r\n                  <circle cx={0} cy={0} r={bubbleRadius} fill={circleColor} />\r\n                  {(showLabel || showValues) && d.size !== undefined && d.size !== null && (\r\n                    <g>\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                    </g>\r\n                  )}\r\n                </g>\r\n              );\r\n            })}\r\n          </g>\r\n        </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 { 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 { Languages, SourcesDataType, StyleObject, ClassNameObject, TreeMapDataType } 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\nimport { uniqBy } from '@/Utils/uniqBy';\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  /** 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    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          width ? 'w-fit' : 'w-full',\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={colorDomain || (uniqBy(data, 'color', true) as string[])}\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 || (uniqBy(data, 'color', true) 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                        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","dimmedOpacity","precision","svgRef","useRef","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","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":";;;;;;;;;;;;;;;;;;;AAAe,SAASA,GAAOC,GAAQC,GAAS;AAC9C,MAAIC,GACAC;AACJ,MAAIF,MAAY;AACd,eAAWG,KAASJ;AAClB,MAAII,KAAS,SACPF,MAAQ,SACNE,KAASA,MAAOF,IAAMC,IAAMC,MAE5BF,IAAME,MAAOF,IAAME,IACnBD,IAAMC,MAAOD,IAAMC;AAAA,OAIxB;AACL,QAAIC,IAAQ;AACZ,aAASD,KAASJ;AAChB,OAAKI,IAAQH,EAAQG,GAAO,EAAEC,GAAOL,CAAM,MAAM,SAC3CE,MAAQ,SACNE,KAASA,MAAOF,IAAMC,IAAMC,MAE5BF,IAAME,MAAOF,IAAME,IACnBD,IAAMC,MAAOD,IAAMC;AAAA,EAI/B;AACA,SAAO,CAACF,GAAKC,CAAG;AAClB;AC8BO,MAAMG,KAAQC,GAAK,CAACC,MAAiB;AAC1C,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,6BAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,IACE1B,GACE2B,KAASC,GAAO,IAAI,GAGpB,CAACC,GAAeC,CAAgB,IAAIC,EAAc,MAAS,GAE3D,CAACC,GAAgBC,CAAiB,IAAIF,EAAc,MAAS,GAC7D,CAACG,GAAoBC,CAAqB,IAAIJ,EAElD,MAAS,GACL,CAACK,GAAQC,CAAS,IAAIN,EAA6B,MAAS,GAC5D,CAACO,GAAQC,CAAS,IAAIR,EAA6B,MAAS,GAC5D,CAACS,GAAWC,CAAY,IAAIV,EAAiD,IAAI,GAGjFW,IAASC;AAAA,IACb,OAAO;AAAA,MACL,KAAKlC;AAAA,MACL,QAAQC;AAAA,MACR,MAAMP;AAAA,MACN,OAAOK;AAAA,IAAA;AAAA,IAET,CAACC,GAAWC,GAAcP,GAAYK,CAAW;AAAA,EAAA,GAG7CoC,IAAaxC,IAAQsC,EAAO,OAAOA,EAAO,OAC1CG,KAAcxC,IAASqC,EAAO,MAAMA,EAAO,QAG3CI,IAAcH;AAAA,IAClB,MACE1C,EAAK,OAAO,CAAA8C,MAAK,CAACC,EAAuBD,EAAE,IAAI,CAAC,EAAE,WAAW,IACzD9C,IACAgD;AAAA,MACEhD,EAAK,OAAO,CAAA8C,MAAK,CAACC,EAAuBD,EAAE,IAAI,CAAC;AAAA,MAChD;AAAA,MACA;AAAA,IAAA;AAAA,IAER,CAAC9C,CAAI;AAAA,EAAA,GAGDiD,IAAcP,GAAQ,MACnB1C,EAAK,OAAO,CAAA8C,MAAKA,EAAE,SAAS,UAAaA,EAAE,SAAS,IAAI,EAAE,WAAW9C,EAAK,SAC7EkD,GAAA,EACG,OAAO;AAAA,IACN;AAAA,IACAH,EAAuB7B,CAAc,IACjC,KAAK,IAAI,GAAGlB,EAAK,IAAI,CAAA8C,MAAKA,EAAE,IAAI,EAAE,OAAO,CAAAA,MAAwBA,KAAM,IAAI,CAAC,IAC3E5B;AAAA,EAAA,CACN,EACA,MAAM,CAAC,MAAMC,CAAM,CAAC,EACpB,KAAA,IACH,QACH,CAACnB,GAAMkB,GAAgBC,CAAM,CAAC;AAGjC,EAAAgC,GAAU,MAAM;AAmDd,KAlDwB,MAAM;AAC5B,YAAMC,IAAW,CAAC,GAAGP,CAAW;AAchC,MAZmBQ,GAAgBD,CAAe,EAC/C,MAAM,KAAKE,GAAO,CAAAC,MAAMX,KAAc,CAAC,EAAE,SAAS,CAAC,CAAC,EACpD,MAAM,KAAKY,GAAO,CAAAD,MAAMZ,IAAa,CAAC,EAAE,SAAS,CAAC,CAAC,EACnD;AAAA,QACC;AAAA;AAAA,QAEAc,GAAa,CAACX,MAAYG,IAAcA,EAAYH,EAAE,QAAQ,CAAC,IAAI,IAAI3B,IAAS,CAAE;AAAA,MAAA,EAEnF,MAAM,UAAUuC,GAAA,EAAgB,SAAS,GAAG,CAAC,EAC7C,WAAW,IAAI,EACf,KAAK,GAAK,EAGV,GAAG,QAAQ,MAAM;AAChB,QAAAlB,EAAaY,CAA2C;AAAA,MAC1D,CAAC,EACA,GAAG,OAAO,MAAM;AACf,QAAAZ,EAAaY,CAA2C;AACxD,cAAMO,IACJrE;AAAA,UACE8D;AAAA,UACA,CAAAN,MAAKA,EAAE,KAAKG,IAAcA,EAAYH,EAAE,QAAQ,CAAC,IAAI,IAAI3B,IAAS;AAAA,QAAA,EAClE,CAAC,KAAK,GACJyC,IACJtE;AAAA,UACE8D;AAAA,UACA,CAAAN,MAAKA,EAAE,KAAKG,IAAcA,EAAYH,EAAE,QAAQ,CAAC,IAAI,IAAI3B,IAAS;AAAA,QAAA,EAClE,CAAC,KAAK,GACJ0C,IACJvE;AAAA,UACE8D;AAAA,UACA,CAAAN,MAAKA,EAAE,KAAKG,IAAcA,EAAYH,EAAE,QAAQ,CAAC,IAAI,IAAI3B,IAAS;AAAA,QAAA,EAClE,CAAC,KAAK,GACJ2C,KACJxE;AAAA,UACE8D;AAAA,UACA,CAAAN,MAAKA,EAAE,KAAKG,IAAcA,EAAYH,EAAE,QAAQ,CAAC,IAAI,IAAI3B,IAAS;AAAA,QAAA,EAClE,CAAC,KAAK;AACV,QAAAe,EAAsB;AAAA,UACpByB;AAAA,UACAC;AAAA,UACAD,IAAa,IAAIE,IAAaF,IAAaE;AAAA,UAC3CD,IAAa,IAAIE,KAAaF,IAAaE;AAAA,QAAA,CAC5C;AAAA,MACH,CAAC;AAAA,IACL,GAEA;AAAA,EACF,GAAG,CAAC9D,GAAMmB,GAAQyB,IAAaD,GAAYzB,GAAgB2B,GAAaI,CAAW,CAAC;AAGpF,QAAMc,IAAmBC;AAAA;AAAA,IAEvB,CAACC,GAAYnB,MAAW;AACtB,MAAAjB,EAAiBiB,CAAC,GAClBR,EAAU2B,EAAM,OAAO,GACvB7B,EAAU6B,EAAM,OAAO,GACvBrD,IAAoBkC,CAAC;AAAA,IACvB;AAAA,IACA,CAAClC,CAAiB;AAAA,EAAA,GAIdsD,KAAkBF,EAAY,CAACC,GAAYnB,MAAW;AAC1D,IAAAjB,EAAiBiB,CAAC,GAClBR,EAAU2B,EAAM,OAAO,GACvB7B,EAAU6B,EAAM,OAAO;AAAA,EACzB,GAAG,CAAA,CAAE,GAECE,KAAcH;AAAA;AAAA,IAElB,CAAClB,MAAW;AACV,OAAI7B,KAAsBI,OACpBU,MAAmBe,EAAE,SAAS1B,KAChCY,EAAkB,MAAS,GAC3Bf,IAAqB,MAAS,MAE9Be,EAAkBc,EAAE,KAAK,GACzB7B,IAAqB6B,CAAC;AAAA,IAG5B;AAAA,IACA,CAAC7B,GAAoBI,GAAgBU,GAAgBX,CAA2B;AAAA,EAAA,GAG5EgD,KAAmBJ,EAAY,MAAM;AACzC,IAAAnC,EAAiB,MAAS,GAC1BO,EAAU,MAAS,GACnBE,EAAU,MAAS,GACnB1B,IAAoB,MAAS;AAAA,EAC/B,GAAG,CAACA,CAAiB,CAAC,GAGhByD,IAAiBL;AAAA;AAAA,IAErB,CAAClB,MACC9C,EAAK,OAAO,OAAMsE,EAAG,KAAK,EAAE,WAAW,IACnCrE,EAAO,CAAC,IACP6C,EAAE,QAED7C,EAAOI,EAAY,QAAQyC,EAAE,KAAK,CAAC,IADnCyB,GAAO;AAAA,IAEf,CAACvE,GAAMC,GAAQI,CAAW;AAAA,EAAA,GAGtBmE,KAAaR;AAAA;AAAA,IAEjB,CAAClB,MACCxC,IACIwC,EAAE,SACA7C,EAAOI,EAAY,QAAQyC,EAAE,KAAK,CAAC,MAAMxC,IACvC,IAEFkB,IACFR,EAAsB,WAAW,IAC/BA,EAAsB,QAAQ8B,EAAE,KAAK,MAAM,KACzC,OACAtB,IACF;AAAA,IACR,CAAClB,GAAekB,GAAevB,GAAQI,GAAaW,CAAqB;AAAA,EAAA;AAI3E,SAAKuB,IASDN,IAEAwC,gBAAAA,EAAAA,KAAAC,YAAA,EACE,UAAA;AAAA,IAAAC,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,GAAGxE,CAAK;AAAA,QACf,QAAQ,GAAGC,CAAM;AAAA,QACjB,SAAS,GAAG6B,EAAmB,CAAC,IAAI,IAAI,IAAIA,EAAmB,CAAC,CAAC,IAC/DA,EAAmB,CAAC,IAAI,IAAI,IAAIA,EAAmB,CAAC,CACtD,IAAI9B,IAAQ8B,EAAmB,CAAC,IAAIA,EAAmB,CAAC,IAAI9B,CAAK,IAC/DC,IAAS6B,EAAmB,CAAC,IAAIA,EAAmB,CAAC,IAAI7B,CAC3D;AAAA,QACA,WAAU;AAAA,QACV,KAAKsB;AAAA,QAEL,UAAAiD,gBAAAA,EAAAA,IAAC,KAAA,EAAE,WAAW,aAAalC,EAAO,IAAI,IAAIA,EAAO,GAAG,KACjD,UAAAF,EAAU,IAAI,CAAAO,MAAK;AAClB,gBAAM8B,IAAcP,EAAevB,CAAC,GAC9B+B,KAAUL,GAAW1B,CAAC,GACtBgC,IAAe7B,IAAcA,EAAYH,EAAE,QAAQ,CAAC,IAAI3B,GACxD4D,IAAYD,IAAe,OAAOpE,KAAcG;AACtD,iBACE4D,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cAEV,SAAAI;AAAA,cACA,WAAW,aAAa/B,EAAE,CAAC,IAAIA,EAAE,CAAC;AAAA,cAClC,cAAc,CAAAmB,MAASF,EAAiBE,GAAOnB,CAAC;AAAA,cAChD,aAAa,CAAAmB,MAASC,GAAgBD,GAAOnB,CAAC;AAAA,cAC9C,SAAS,MAAMqB,GAAYrB,CAAC;AAAA,cAC5B,cAAcsB;AAAA,cAEd,UAAA;AAAA,gBAAAO,gBAAAA,EAAAA,IAAC,UAAA,EAAO,IAAI,GAAG,IAAI,GAAG,GAAGG,GAAc,MAAMF,EAAA,CAAa;AAAA,iBACxDG,KAAalE,MAAeiC,EAAE,SAAS,UAAaA,EAAE,SAAS,QAC/D6B,gBAAAA,EAAAA,IAAC,KAAA,EACC,UAAAA,gBAAAA,EAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,GAAG,IAAIG;AAAA,oBACP,GAAG,IAAIA;AAAA,oBACP,OAAO,IAAIA;AAAA,oBACX,QAAQ,IAAIA;AAAA,oBAEZ,UAAAL,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAU,8DACZ,UAAA;AAAA,sBAAA/D,KACCiE,gBAAAA,EAAAA;AAAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,WAAWK;AAAAA,4BACT;AAAA,4BACAzD,GAAY;AAAA,0BAAA;AAAA,0BAEd,OAAO;AAAA,4BACL,UAAU,GAAG,KAAK;AAAA,8BAChB,KAAK,IAAI,KAAK,MAAMuD,IAAe,CAAC,GAAG,EAAE;AAAA,8BACzC,KAAK;AAAA,gCACH,KAAK,MAAOA,IAAe,KAAM,GAAGhC,EAAE,KAAK,GAAG,MAAM;AAAA,gCACpD;AAAA,8BAAA;AAAA,8BAEF;AAAA,4BAAA,CACD;AAAA,4BACD,iBACEgC,IAAe,IAAI,KACf,IACAA,IAAe,IAAI,KACjB,IACAA,IAAe,IAAI,MACjB,IACA;AAAA,4BACV,SAAS;AAAA,4BACT,iBAAiB;AAAA,4BACjB,OAAOG,GAA2BL,CAAW;AAAA,4BAC7C,SAAS;AAAA,4BACT,GAAItD,GAAQ,qBAAqB,CAAA;AAAA,0BAAC;AAAA,0BAGnC,UAAAwB,EAAE;AAAA,wBAAA;AAAA,sBAAA;AAAA,sBAGNjC,KACC8D,gBAAAA,EAAAA;AAAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,WAAU;AAAA,0BACV,OAAO;AAAA,4BACL,UAAU,GAAG,KAAK;AAAA,8BAChB,KAAK,IAAI,KAAK,MAAMG,IAAe,CAAC,GAAG,EAAE;AAAA,8BACzC;AAAA,4BAAA,CACD;AAAA,4BACD,OAAOG,GAA2BL,CAAW;AAAA,0BAAA;AAAA,0BAG9C,aAAyB9B,EAAE,MAAM,MAAMrB,IAAWV,GAAQD,CAAM;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACnE,EAAA,CAEJ;AAAA,kBAAA;AAAA,gBAAA,EACF,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,YAnEGgC,EAAE;AAAA,UAAA;AAAA,QAuEb,CAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IAEDlB,KAAiBjB,KAAWwB,KAAUE,KACrCsC,gBAAAA,EAAAA;AAAAA,MAACO;AAAA,MAAA;AAAA,QACC,MAAMtD;AAAA,QACN,MAAMjB;AAAA,QACN,MAAMwB;AAAA,QACN,MAAME;AAAA,QACN,iBAAiBf,GAAQ;AAAA,QACzB,WAAWC,GAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAG1BF,KAAkBU,MAAmB,SACpC4C,gBAAAA,EAAAA;AAAAA,MAACQ;AAAAA,MAAA;AAAA,QACC,MAAMpD,MAAmB;AAAA,QACzB,SAAS,MAAM;AACb,UAAAC,EAAkB,MAAS;AAAA,QAC7B;AAAA,QAEA,UAAA2C,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,yBACE,OAAOtD,KAAmB,WACtB,EAAE,QAAQ+D,GAAY/D,GAAgBU,CAAc,EAAA,IACpD;AAAA,YAGL,UAAA,OAAOV,KAAmB,aAAaA,EAAeU,CAAc,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3E;AAAA,IAAA,IAEA;AAAA,EAAA,GACN,IAGG,OAxIH4C,gBAAAA,MAAC,SAAI,OAAO,EAAE,OAAO,GAAGxE,CAAK,MAAM,QAAQ,GAAGC,CAAM,KAAA,GAClD,gCAAC,OAAA,EAAI,WAAU,2EACb,UAAAuE,gBAAAA,EAAAA,IAACU,IAAA,EAAQ,GACX,EAAA,CACF;AAqIN,CAAC;AAEDxF,GAAM,cAAc;AChSb,SAASyF,GAAmBvF,GAAc;AAC/C,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,YAAAuF;AAAA,IACA,QAAAtF;AAAA,IACA,QAAAa,IAAS;AAAA,IACT,SAAA0E;AAAA,IACA,QAAAzE,IAAS;AAAA,IACT,kBAAA0E;AAAA,IACA,YAAAvF,IAAa;AAAA,IACb,aAAAK,IAAc;AAAA,IACd,QAAAH;AAAA,IACA,OAAAD;AAAA,IACA,UAAAuF;AAAA,IACA,aAAArF;AAAA,IACA,kBAAAsF;AAAA,IACA,SAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,WAAArF,IAAY;AAAA,IACZ,cAAAC,IAAe;AAAA,IACf,YAAAC,IAAa;AAAA,IACb,gBAAAoF;AAAA,IACA,SAAAnF;AAAA,IACA,mBAAAC;AAAA,IACA,gBAAAmF,IAAiB;AAAA,IACjB,YAAAlF;AAAA,IACA,SAAAmF;AAAA,IACA,uBAAAhF,KAAwB,CAAA;AAAA,IACxB,oBAAAC;AAAA,IACA,eAAAgF,IAAgB;AAAA,IAChB,cAAAC,IAAe;AAAA,IACf,UAAAC,IAAW;AAAA,IACX,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,WAAAC;AAAA,IACA,QAAApF;AAAA,IACA,gBAAAD;AAAA,IACA,6BAAAE,IAA8B;AAAA,IAC9B,gBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,WAAAC,KAAY;AAAA,EAAA,IACV1B,GACE,CAACyG,GAAUC,CAAW,IAAI3E,EAAS,CAAC,GACpC,CAAC4E,GAAWC,EAAY,IAAI7E,EAAS,CAAC,GACtC,CAACxB,IAAesG,EAAgB,IAAI9E,EAA6B,MAAS,GAC1E+E,IAAWlF,GAAuB,IAAI,GACtCmF,KAAiBnF,GAAuB,IAAI;AAClD,SAAAwB,GAAU,MAAM;AACd,UAAM4D,IAAiB,IAAI,eAAe,CAAAC,MAAW;AACnD,MAAAP,EAAYtG,KAAS6G,EAAQ,CAAC,EAAE,OAAO,eAAe,GAAG,GACzDL,GAAavG,KAAU4G,EAAQ,CAAC,EAAE,OAAO,gBAAgB,GAAG;AAAA,IAC9D,CAAC;AACD,WAAIH,EAAS,YACXF,GAAaE,EAAS,QAAQ,gBAAgB,GAAG,GACjDJ,EAAYI,EAAS,QAAQ,eAAe,GAAG,GAC1C1G,KAAO4G,EAAe,QAAQF,EAAS,OAAO,IAE9C,MAAME,EAAe,WAAA;AAAA,EAC9B,GAAG,CAAC5G,GAAOC,CAAM,CAAC,GAEhBuE,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG2B,KAAS,OAAO,UAAUnG,IAAQ,iBAAiB,aAAa;AAAA,MAC9E,KAAKgG,MAAa,QAAQA,MAAa,OAAO,QAAQ;AAAA,MAEtD,UAAAxB,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWK;AAAAA,YACT,GACGa,IAEGA,MAAoB,KAClB,kDACA,KAHF,iBAIN,gDAAgDM,KAAY,IAAI;AAAA,YAChEhG,IAAQ,UAAU;AAAA,YAClBoB,GAAY;AAAA,UAAA;AAAA,UAEd,OAAO;AAAA,YACL,GAAID,GAAQ,kBAAkB,CAAA;AAAA,YAC9B,GAAIuE,KAAmBA,MAAoB,KAAO,EAAE,iBAAAA,EAAA,IAAoB,CAAA;AAAA,UAAC;AAAA,UAE3E,IAAIG;AAAA,UACJ,KAAKc;AAAA,UACL,cACEP,KACA,GACEhB,IAAa,mBAAmBA,CAAU,OAAO,EACnD,sGACEE,IAAmB,IAAIA,CAAgB,KAAK,EAC9C;AAAA,UAGF,UAAAd,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,SAASkB,IAAkBD,KAAW,SAASA,KAAW,EAAA;AAAA,cAEnE,UAAAnB,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAU,mDACZ,UAAA;AAAA,gBAAAc,KAAcE,KAAoBQ,KAAiBC,IAClDvB,gBAAAA,EAAAA;AAAAA,kBAACsC;AAAA,kBAAA;AAAA,oBACC,QAAQ;AAAA,sBACN,OAAO3F,GAAQ;AAAA,sBACf,aAAaA,GAAQ;AAAA,oBAAA;AAAA,oBAEvB,YAAY;AAAA,sBACV,OAAOC,GAAY;AAAA,sBACnB,aAAaA,GAAY;AAAA,oBAAA;AAAA,oBAE3B,YAAAgE;AAAA,oBACA,kBAAAE;AAAA,oBACA,OAAAtF;AAAA,oBACA,eAAe8F,IAAgBa,GAAe,UAAU;AAAA,oBACxD,cACEZ,IACIlG,EAAK,IAAI,CAAA8C,MAAKA,EAAE,IAAI,EAAE,OAAO,CAAAA,MAAKA,MAAM,MAAS,EAAE,SAAS,IAC1D9C,EAAK,IAAI,CAAA8C,MAAKA,EAAE,IAAI,EAAE,OAAO,CAAAA,MAAKA,MAAM,MAAS,IACjD9C,EAAK,OAAO,CAAA8C,MAAKA,MAAM,MAAS,IAClC;AAAA,kBAAA;AAAA,gBAAA,IAGN;AAAA,gBACJ6B,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,kDACZ,UAAA3E,EAAK,WAAW,IACf2E,gBAAAA,EAAAA,IAACuC,IAAA,CAAA,CAAW,IAEZzC,gBAAAA,EAAAA,KAAAC,EAAAA,UAAA,EACG,UAAA;AAAA,kBAAAqB,KAAkB/F,EAAK,OAAO,CAAAsE,MAAMA,EAAG,KAAK,EAAE,WAAW,IACxDK,gBAAAA,EAAAA;AAAAA,oBAACwC;AAAA,oBAAA;AAAA,sBACC,OAAAhH;AAAA,sBACA,kBAAAwF;AAAA,sBACA,QACG1F,KAAmCsE,GAAO+B,CAAK,EAAE,kBAAkB;AAAA,sBAEtE,aAAajG,KAAgB+G,GAAOpH,GAAM,SAAS,EAAI;AAAA,sBACvD,kBAAA4G;AAAA,sBACA,aAC+BR,KAAuB;AAAA,sBAEtD,UAAQ;AAAA,oBAAA;AAAA,kBAAA,IAER;AAAA,kBACJzB,gBAAAA,EAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAU;AAAA,sBACV,KAAKkC;AAAA,sBACL,cAAW;AAAA,sBAET,WAAA1G,KAASqG,OAAcpG,KAAUsG,KACjC/B,gBAAAA,EAAAA;AAAAA,wBAAC9E;AAAA,wBAAA;AAAA,0BACC,MAAAG;AAAA,0BACA,QACEA,EAAK,OAAO,CAAAsE,MAAMA,EAAG,KAAK,EAAE,WAAW,IACnCrE,IACE,CAACA,CAAgB,IACjB,CAACsE,GAAO,cAAc,UAAU,CAAC,IAClCtE,KACDsE,GAAO+B,CAAK,EAAE,kBAAkB;AAAA,0BAEtC,aACEtG,EAAK,OAAO,CAAAsE,MAAMA,EAAG,KAAK,EAAE,WAAW,IACnC,CAAA,IACAjE,KAAgB+G,GAAOpH,GAAM,SAAS,EAAI;AAAA,0BAEhD,OAAOG,KAASqG;AAAA,0BAChB,QAAQ,KAAK;AAAA,4BACXH;AAAA,4BACAjG,MACG0F,IACGO,KACGlG,KAASqG,KAAYV,IAAiBO,KACpClG,KAASqG,KAAYV,IACtBO,KACDlG,KAASqG,KAAYV,IACxBY;AAAA,0BAAA;AAAA,0BAER,YAAAxG;AAAA,0BACA,aAAAK;AAAA,0BACA,WAAAC;AAAA,0BACA,cAAAC;AAAA,0BACA,YAAAC;AAAA,0BACA,YACEG,MAAe,KACXb,EAAK,OAAO,OAAMsE,EAAG,IAAI,EAAE,WAAW,IACrCzD;AAAA,0BAEP,eAAAP;AAAA,0BACA,QAAAQ;AAAA,0BACA,QAAAC;AAAA,0BACA,SAAAJ;AAAA,0BACA,mBAAAC;AAAA,0BACA,uBAAAI;AAAA,0BACA,oBAAAC;AAAA,0BACA,OAAAqF;AAAA,0BACA,QACGnF,KACI,KAAK;AAAA,4BACJhB,KAASqG;AAAA,4BACTpG,MACG0F,IACGO,KACGlG,KAASqG,KAAYV,IAAiBO,KACpClG,KAASqG,KAAYV,IACtBO,KACDlG,KAASqG,KAAYV,IACxBY;AAAA,0BAAA,KAEL1G,EAAK,OAAO,CAAA8C,MAAK,CAACC,EAAuBD,EAAE,IAAI,CAAC,EAAE,WAAW,IAC1D,IACA,KAAK;AAAA,4BACH,GAAG9C,EACA,IAAI,CAAA8C,MAAKA,EAAE,IAAI,EACf,OAAO,CAAAA,MAAwBA,KAAM,IAAI;AAAA,0BAAA,MAEnD9C,EAAK,OAAO,CAAA8C,MAAK,CAACC,EAAuBD,EAAE,IAAI,CAAC,EAAE,WAAW,IAC1D9C,EAAK,SACLqH,GAAIrH,EAAK,OAAO,CAAA8C,MAAKA,EAAE,IAAI,EAAE,IAAI,CAAAA,MAAKA,EAAE,IAAI,CAAC,IAAI;AAAA,0BAG3D,gBAAA5B;AAAA,0BACA,6BAAAE;AAAA,0BACA,gBAAAC;AAAA,0BACA,QAAAC;AAAA,0BACA,YAAAC;AAAA,0BACA,eAAAC;AAAA,0BACA,WAAAC;AAAA,wBAAA;AAAA,sBAAA,IAEA;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACN,EAAA,CACF,EAAA,CAEJ;AAAA,gBACC+D,KAAWE,IACVf,gBAAAA,EAAAA;AAAAA,kBAAC2C;AAAA,kBAAA;AAAA,oBACC,QAAQ,EAAE,UAAUhG,GAAQ,UAAU,QAAQA,GAAQ,OAAA;AAAA,oBACtD,YAAY;AAAA,sBACV,UAAUC,GAAY;AAAA,sBACtB,QAAQA,GAAY;AAAA,oBAAA;AAAA,oBAEtB,SAAAiE;AAAA,oBACA,UAAAE;AAAA,oBACA,OAAAvF;AAAA,kBAAA;AAAA,gBAAA,IAEA;AAAA,cAAA,EAAA,CACN;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;","x_google_ignoreList":[0]}
+{"version":3,"file":"index-CE9pmfxt.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\n\r\nimport { 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  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    dimmedOpacity,\r\n    precision,\r\n  } = props;\r\n  const svgRef = useRef(null);\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        <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            {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              return (\r\n                <g\r\n                  className='undp-viz-g-with-hover'\r\n                  key={d.label}\r\n                  opacity={opacity}\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                >\r\n                  <circle cx={0} cy={0} r={bubbleRadius} fill={circleColor} />\r\n                  {(showLabel || showValues) && d.size !== undefined && d.size !== null && (\r\n                    <g>\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                    </g>\r\n                  )}\r\n                </g>\r\n              );\r\n            })}\r\n          </g>\r\n        </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 { 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 { Languages, SourcesDataType, StyleObject, ClassNameObject, TreeMapDataType } 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\nimport { uniqBy } from '@/Utils/uniqBy';\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  /** 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    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          width ? 'w-fit' : 'w-full',\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={colorDomain || (uniqBy(data, 'color', true) as string[])}\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 || (uniqBy(data, 'color', true) 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                        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","dimmedOpacity","precision","svgRef","useRef","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","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]}

package/dist/{index-CVlCtJbC.cjs → index-CEJwW3lL.cjs}

@@ -1,2 +1,2 @@
-"use strict";const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),i=require("react"),fe=require("./index-CSNtgibC.cjs"),ge=require("./index-CQ3e6Ewi.cjs"),me=require("./Modal-tXZlLE5s.cjs"),pe=require("./Spinner-DA6Z5E4n.cjs"),ve=require("./Tooltip-De16GWhY.cjs"),je=require("./numberFormattingFunction-02t-wJta.cjs"),he=require("./getTextColorBasedOnBgColor-nqY-bsM_.cjs"),se=require("./Colors.cjs"),U=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),ye=require("./string2HTML-z7CwHXcx.cjs"),be=require("./pow-B5-jkdHU.cjs"),W=require("./y-QcCbqrzx.cjs"),Ce=require("./GraphFooter.cjs"),Me=require("./GraphHeader.cjs"),we=require("./ColorLegendWithMouseOver.cjs"),Ee=require("./EmptyState-d8_8SxeW.cjs"),de=require("./uniqBy-O05lp2S5.cjs");function I(M,o){let r,x;if(o===void 0)for(const a of M)a!=null&&(r===void 0?a>=a&&(r=x=a):(r>a&&(r=a),x<a&&(x=a)));else{let a=-1;for(let c of M)(c=o(c,++a,M))!=null&&(r===void 0?c>=c&&(r=x=c):(r>c&&(r=c),x<c&&(x=c)))}return[r,x]}const xe=i.memo(M=>{const{data:o,colors:r,leftMargin:x,width:a,height:c,colorDomain:k,selectedColor:y,rightMargin:X,topMargin:Y,bottomMargin:b,showLabels:l,tooltip:B,onSeriesMouseOver:w,showValues:H,suffix:_,prefix:C,highlightedDataPoints:L,onSeriesMouseClick:O,maxRadiusValue:S,radius:u,resetSelectionOnDoubleClick:A,detailsOnClick:v,styles:J,classNames:T,dimmedOpacity:N,precision:re}=M,le=i.useRef(null),[P,z]=i.useState(void 0),[p,E]=i.useState(void 0),[h,D]=i.useState(void 0),[K,$]=i.useState(void 0),[Q,F]=i.useState(void 0),[Z,j]=i.useState(null),f=i.useMemo(()=>({top:Y,bottom:b,left:x,right:X}),[Y,b,x,X]),ee=a-f.left-f.right,te=c-f.top-f.bottom,g=i.useMemo(()=>o.filter(e=>!U.checkIfNullOrUndefined(e.size)).length===0?o:ge.orderBy(o.filter(e=>!U.checkIfNullOrUndefined(e.size)),"radius","asc"),[o]),d=i.useMemo(()=>o.filter(e=>e.size===void 0||e.size===null).length!==o.length?be.sqrt().domain([0,U.checkIfNullOrUndefined(S)?Math.max(...o.map(e=>e.size).filter(e=>e!=null)):S]).range([.25,u]).nice():void 0,[o,S,u]);i.useEffect(()=>{(()=>{const s=[...g];W.forceSimulation(s).force("y",W.forceY(n=>te/2).strength(1)).force("x",W.forceX(n=>ee/2).strength(1)).force("collide",W.forceCollide(n=>d?d(n.size||0)+1:u+1)).force("charge",W.forceManyBody().strength(-15)).alphaDecay(.05).tick(1e4).on("tick",()=>{j(s)}).on("end",()=>{j(s);const n=I(s,m=>m.x-(d?d(m.size||0)+1:u+1))[0]||0,V=I(s,m=>m.y-(d?d(m.size||0)+1:u+1))[0]||0,q=I(s,m=>m.x+(d?d(m.size||0)+1:u+1))[1]||0,ue=I(s,m=>m.y+(d?d(m.size||0)+1:u+1))[1]||0;D([n,V,n<0?q-n:q,V<0?ue-V:ue])})})()},[o,u,te,ee,S,g,d]);const G=i.useCallback((e,s)=>{z(s),F(e.clientY),$(e.clientX),w?.(s)},[w]),oe=i.useCallback((e,s)=>{z(s),F(e.clientY),$(e.clientX)},[]),ne=i.useCallback(e=>{(O||v)&&(p===e.label&&A?(E(void 0),O?.(void 0)):(E(e.label),O?.(e)))},[O,v,p,A]),ae=i.useCallback(()=>{z(void 0),$(void 0),F(void 0),w?.(void 0)},[w]),R=i.useCallback(e=>o.filter(s=>s.color).length===0?r[0]:e.color?r[k.indexOf(e.color)]:se.Colors.gray,[o,r,k]),ie=i.useCallback(e=>y?e.color&&r[k.indexOf(e.color)]===y?1:N:L.length!==0?L.indexOf(e.label)!==-1?.85:N:.85,[y,N,r,k,L]);return Z?h?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx("svg",{width:`${a}px`,height:`${c}px`,viewBox:`${h[0]>0?0:h[0]} ${h[1]>0?0:h[1]} ${a<h[2]?h[2]:a} ${c<h[3]?h[3]:c}`,direction:"ltr",ref:le,children:t.jsxRuntimeExports.jsx("g",{transform:`translate(${f.left},${f.top})`,children:Z.map(e=>{const s=R(e),ce=ie(e),n=d?d(e.size||0):u,V=n>20&&(l||H);return t.jsxRuntimeExports.jsxs("g",{className:"undp-viz-g-with-hover",opacity:ce,transform:`translate(${e.x},${e.y})`,onMouseEnter:q=>G(q,e),onMouseMove:q=>oe(q,e),onClick:()=>ne(e),onMouseLeave:ae,children:[t.jsxRuntimeExports.jsx("circle",{cx:0,cy:0,r:n,fill:s}),(V||H)&&e.size!==void 0&&e.size!==null&&t.jsxRuntimeExports.jsx("g",{children:t.jsxRuntimeExports.jsx("foreignObject",{y:0-n,x:0-n,width:2*n,height:2*n,children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col justify-center items-center h-full py-0 px-3",children:[l&&t.jsxRuntimeExports.jsx("p",{className:t.mo("text-center leading-[1.25] overflow-hidden m-0 circle-packing-label",T?.graphObjectValues),style:{fontSize:`${Math.min(Math.max(Math.round(n/4),12),Math.max(Math.round(n*12/`${e.label}`.length),12),14)}px`,WebkitLineClamp:n*2<60?1:n*2<75?2:n*2<100?3:void 0,display:"-webkit-box",WebkitBoxOrient:"vertical",color:he.getTextColorBasedOnBgColor(s),hyphens:"auto",...J?.graphObjectValues||{}},children:e.label}),H&&t.jsxRuntimeExports.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(n/4),14),14)}px`,color:he.getTextColorBasedOnBgColor(s)},children:je.numberFormattingFunction(e.size,"NA",re,C,_)})]})})})]},e.label)})})}),P&&B&&K&&Q&&t.jsxRuntimeExports.jsx(ve.Tooltip,{data:P,body:B,xPos:K,yPos:Q,backgroundStyle:J?.tooltip,className:T?.tooltip}),v&&p!==void 0?t.jsxRuntimeExports.jsx(me.X,{open:p!==void 0,onClose:()=>{E(void 0)},children:t.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof v=="string"?{__html:ye.string2HTML(v,p)}:void 0,children:typeof v=="function"?v(p):null})}):null]}):null:t.jsxRuntimeExports.jsx("div",{style:{width:`${a}px`,height:`${c}px`},children:t.jsxRuntimeExports.jsx("div",{className:"flex m-auto items-center justify-center p-0 leading-none text-base h-40",children:t.jsxRuntimeExports.jsx(pe.y,{})})})});xe.displayName="BubbleChart";function Re(M){const{data:o,graphTitle:r,colors:x,suffix:a="",sources:c,prefix:k="",graphDescription:y,leftMargin:X=0,rightMargin:Y=0,height:b,width:l,footNote:B,colorDomain:w,colorLegendTitle:H,padding:_,backgroundColor:C=!1,topMargin:L=0,bottomMargin:O=0,showLabels:S=!0,relativeHeight:u,tooltip:A,onSeriesMouseOver:v,showColorScale:J=!0,showValues:T,graphID:N,highlightedDataPoints:re=[],onSeriesMouseClick:le,graphDownload:P=!1,dataDownload:z=!1,language:p="en",showNAColor:E,minHeight:h=0,theme:D="light",ariaLabel:K,radius:$,maxRadiusValue:Q,resetSelectionOnDoubleClick:F=!0,detailsOnClick:Z,styles:j,classNames:f,dimmedOpacity:ee=.3,precision:te=2}=M,[g,d]=i.useState(0),[G,oe]=i.useState(0),[ne,ae]=i.useState(void 0),R=i.useRef(null),ie=i.useRef(null);return i.useEffect(()=>{const e=new ResizeObserver(s=>{d(l||s[0].target.clientWidth||620),oe(b||s[0].target.clientHeight||480)});return R.current&&(oe(R.current.clientHeight||480),d(R.current.clientWidth||620),l||e.observe(R.current)),()=>e.disconnect()},[l,b]),t.jsxRuntimeExports.jsx("div",{className:`${D||"light"} flex  ${l?"w-fit grow-0":"w-full grow"}`,dir:p==="he"||p==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:t.mo(`${C?C===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${p||"en"}`,l?"w-fit":"w-full",f?.graphContainer),style:{...j?.graphContainer||{},...C&&C!==!0?{backgroundColor:C}:{}},id:N,ref:ie,"aria-label":K||`${r?`The graph shows ${r}. `:""}This is a chart where data points are represented by circles, and their sizes reflect their values.${y?` ${y}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:C?_||"1rem":_||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[r||y||P||z?t.jsxRuntimeExports.jsx(Me.GraphHeader,{styles:{title:j?.title,description:j?.description},classNames:{title:f?.title,description:f?.description},graphTitle:r,graphDescription:y,width:l,graphDownload:P?ie.current:void 0,dataDownload:z?o.map(e=>e.data).filter(e=>e!==void 0).length>0?o.map(e=>e.data).filter(e=>e!==void 0):o.filter(e=>e!==void 0):null}):null,t.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:o.length===0?t.jsxRuntimeExports.jsx(Ee.EmptyState,{}):t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[J&&o.filter(e=>e.color).length!==0?t.jsxRuntimeExports.jsx(we.ColorLegendWithMouseOver,{width:l,colorLegendTitle:H,colors:x||se.Colors[D].categoricalColors.colors,colorDomain:w||de.uniqBy(o,"color",!0),setSelectedColor:ae,showNAColor:E??!0,isCenter:!0}):null,t.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center w-full leading-0",ref:R,"aria-label":"Graph area",children:(l||g)&&(b||G)?t.jsxRuntimeExports.jsx(xe,{data:o,colors:o.filter(e=>e.color).length===0?x?[x]:[se.Colors.primaryColors["blue-600"]]:x||se.Colors[D].categoricalColors.colors,colorDomain:o.filter(e=>e.color).length===0?[]:w||de.uniqBy(o,"color",!0),width:l||g,height:Math.max(h,b||(u?h?(l||g)*u>h?(l||g)*u:h:(l||g)*u:G)),leftMargin:X,rightMargin:Y,topMargin:L,bottomMargin:O,showLabels:S,showValues:T!==!1?o.filter(e=>e.size).length!==0:T,selectedColor:ne,suffix:a,prefix:k,tooltip:A,onSeriesMouseOver:v,highlightedDataPoints:re,onSeriesMouseClick:le,theme:D,radius:$||Math.min(l||g,b||(u?h?(l||g)*u>h?(l||g)*u:h:(l||g)*u:G))*(o.filter(e=>!U.checkIfNullOrUndefined(e.size)).length===0?1:Math.max(...o.map(e=>e.size).filter(e=>e!=null)))/(o.filter(e=>!U.checkIfNullOrUndefined(e.size)).length===0?o.length:fe.sum(o.filter(e=>e.size).map(e=>e.size))*1.25),maxRadiusValue:Q,resetSelectionOnDoubleClick:F,detailsOnClick:Z,styles:j,classNames:f,dimmedOpacity:ee,precision:te}):null})]})}),c||B?t.jsxRuntimeExports.jsx(Ce.GraphFooter,{styles:{footnote:j?.footnote,source:j?.source},classNames:{footnote:f?.footnote,source:f?.source},sources:c,footNote:B,width:l}):null]})})})})}exports.CirclePackingGraph=Re;exports.extent=I;
-//# sourceMappingURL=index-CVlCtJbC.cjs.map
+"use strict";const t=require("./index-CHPV5EwG-DjM48pIC.cjs"),i=require("react"),fe=require("./index-CSNtgibC.cjs"),ge=require("./index-CQ3e6Ewi.cjs"),me=require("./Modal-CuuJdWkD.cjs"),pe=require("./Spinner-C6wLp85s.cjs"),ve=require("./Tooltip-Cpv0QohJ.cjs"),je=require("./numberFormattingFunction-02t-wJta.cjs"),he=require("./getTextColorBasedOnBgColor-nqY-bsM_.cjs"),se=require("./Colors.cjs"),U=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),ye=require("./string2HTML-z7CwHXcx.cjs"),be=require("./pow-B5-jkdHU.cjs"),W=require("./y-QcCbqrzx.cjs"),Ce=require("./GraphFooter.cjs"),Me=require("./GraphHeader.cjs"),we=require("./ColorLegendWithMouseOver.cjs"),Ee=require("./EmptyState-B8IpKGcL.cjs"),de=require("./uniqBy-O05lp2S5.cjs");function I(M,o){let r,x;if(o===void 0)for(const a of M)a!=null&&(r===void 0?a>=a&&(r=x=a):(r>a&&(r=a),x<a&&(x=a)));else{let a=-1;for(let c of M)(c=o(c,++a,M))!=null&&(r===void 0?c>=c&&(r=x=c):(r>c&&(r=c),x<c&&(x=c)))}return[r,x]}const xe=i.memo(M=>{const{data:o,colors:r,leftMargin:x,width:a,height:c,colorDomain:k,selectedColor:y,rightMargin:X,topMargin:Y,bottomMargin:b,showLabels:l,tooltip:B,onSeriesMouseOver:w,showValues:H,suffix:_,prefix:C,highlightedDataPoints:L,onSeriesMouseClick:O,maxRadiusValue:S,radius:u,resetSelectionOnDoubleClick:A,detailsOnClick:v,styles:J,classNames:T,dimmedOpacity:N,precision:re}=M,le=i.useRef(null),[G,z]=i.useState(void 0),[p,E]=i.useState(void 0),[h,D]=i.useState(void 0),[K,$]=i.useState(void 0),[Q,P]=i.useState(void 0),[Z,j]=i.useState(null),f=i.useMemo(()=>({top:Y,bottom:b,left:x,right:X}),[Y,b,x,X]),ee=a-f.left-f.right,te=c-f.top-f.bottom,g=i.useMemo(()=>o.filter(e=>!U.checkIfNullOrUndefined(e.size)).length===0?o:ge.orderBy(o.filter(e=>!U.checkIfNullOrUndefined(e.size)),"radius","asc"),[o]),d=i.useMemo(()=>o.filter(e=>e.size===void 0||e.size===null).length!==o.length?be.sqrt().domain([0,U.checkIfNullOrUndefined(S)?Math.max(...o.map(e=>e.size).filter(e=>e!=null)):S]).range([.25,u]).nice():void 0,[o,S,u]);i.useEffect(()=>{(()=>{const s=[...g];W.forceSimulation(s).force("y",W.forceY(n=>te/2).strength(1)).force("x",W.forceX(n=>ee/2).strength(1)).force("collide",W.forceCollide(n=>d?d(n.size||0)+1:u+1)).force("charge",W.forceManyBody().strength(-15)).alphaDecay(.05).tick(1e4).on("tick",()=>{j(s)}).on("end",()=>{j(s);const n=I(s,m=>m.x-(d?d(m.size||0)+1:u+1))[0]||0,V=I(s,m=>m.y-(d?d(m.size||0)+1:u+1))[0]||0,q=I(s,m=>m.x+(d?d(m.size||0)+1:u+1))[1]||0,ue=I(s,m=>m.y+(d?d(m.size||0)+1:u+1))[1]||0;D([n,V,n<0?q-n:q,V<0?ue-V:ue])})})()},[o,u,te,ee,S,g,d]);const F=i.useCallback((e,s)=>{z(s),P(e.clientY),$(e.clientX),w?.(s)},[w]),oe=i.useCallback((e,s)=>{z(s),P(e.clientY),$(e.clientX)},[]),ne=i.useCallback(e=>{(O||v)&&(p===e.label&&A?(E(void 0),O?.(void 0)):(E(e.label),O?.(e)))},[O,v,p,A]),ae=i.useCallback(()=>{z(void 0),$(void 0),P(void 0),w?.(void 0)},[w]),R=i.useCallback(e=>o.filter(s=>s.color).length===0?r[0]:e.color?r[k.indexOf(e.color)]:se.Colors.gray,[o,r,k]),ie=i.useCallback(e=>y?e.color&&r[k.indexOf(e.color)]===y?1:N:L.length!==0?L.indexOf(e.label)!==-1?.85:N:.85,[y,N,r,k,L]);return Z?h?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx("svg",{width:`${a}px`,height:`${c}px`,viewBox:`${h[0]>0?0:h[0]} ${h[1]>0?0:h[1]} ${a<h[2]?h[2]:a} ${c<h[3]?h[3]:c}`,direction:"ltr",ref:le,children:t.jsxRuntimeExports.jsx("g",{transform:`translate(${f.left},${f.top})`,children:Z.map(e=>{const s=R(e),ce=ie(e),n=d?d(e.size||0):u,V=n>20&&(l||H);return t.jsxRuntimeExports.jsxs("g",{className:"undp-viz-g-with-hover",opacity:ce,transform:`translate(${e.x},${e.y})`,onMouseEnter:q=>F(q,e),onMouseMove:q=>oe(q,e),onClick:()=>ne(e),onMouseLeave:ae,children:[t.jsxRuntimeExports.jsx("circle",{cx:0,cy:0,r:n,fill:s}),(V||H)&&e.size!==void 0&&e.size!==null&&t.jsxRuntimeExports.jsx("g",{children:t.jsxRuntimeExports.jsx("foreignObject",{y:0-n,x:0-n,width:2*n,height:2*n,children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col justify-center items-center h-full py-0 px-3",children:[l&&t.jsxRuntimeExports.jsx("p",{className:t.mo("text-center leading-[1.25] overflow-hidden m-0 circle-packing-label",T?.graphObjectValues),style:{fontSize:`${Math.min(Math.max(Math.round(n/4),12),Math.max(Math.round(n*12/`${e.label}`.length),12),14)}px`,WebkitLineClamp:n*2<60?1:n*2<75?2:n*2<100?3:void 0,display:"-webkit-box",WebkitBoxOrient:"vertical",color:he.getTextColorBasedOnBgColor(s),hyphens:"auto",...J?.graphObjectValues||{}},children:e.label}),H&&t.jsxRuntimeExports.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(n/4),14),14)}px`,color:he.getTextColorBasedOnBgColor(s)},children:je.numberFormattingFunction(e.size,"NA",re,C,_)})]})})})]},e.label)})})}),G&&B&&K&&Q&&t.jsxRuntimeExports.jsx(ve.Tooltip,{data:G,body:B,xPos:K,yPos:Q,backgroundStyle:J?.tooltip,className:T?.tooltip}),v&&p!==void 0?t.jsxRuntimeExports.jsx(me.G,{open:p!==void 0,onClose:()=>{E(void 0)},children:t.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof v=="string"?{__html:ye.string2HTML(v,p)}:void 0,children:typeof v=="function"?v(p):null})}):null]}):null:t.jsxRuntimeExports.jsx("div",{style:{width:`${a}px`,height:`${c}px`},children:t.jsxRuntimeExports.jsx("div",{className:"flex m-auto items-center justify-center p-0 leading-none text-base h-40",children:t.jsxRuntimeExports.jsx(pe.y,{})})})});xe.displayName="BubbleChart";function Re(M){const{data:o,graphTitle:r,colors:x,suffix:a="",sources:c,prefix:k="",graphDescription:y,leftMargin:X=0,rightMargin:Y=0,height:b,width:l,footNote:B,colorDomain:w,colorLegendTitle:H,padding:_,backgroundColor:C=!1,topMargin:L=0,bottomMargin:O=0,showLabels:S=!0,relativeHeight:u,tooltip:A,onSeriesMouseOver:v,showColorScale:J=!0,showValues:T,graphID:N,highlightedDataPoints:re=[],onSeriesMouseClick:le,graphDownload:G=!1,dataDownload:z=!1,language:p="en",showNAColor:E,minHeight:h=0,theme:D="light",ariaLabel:K,radius:$,maxRadiusValue:Q,resetSelectionOnDoubleClick:P=!0,detailsOnClick:Z,styles:j,classNames:f,dimmedOpacity:ee=.3,precision:te=2}=M,[g,d]=i.useState(0),[F,oe]=i.useState(0),[ne,ae]=i.useState(void 0),R=i.useRef(null),ie=i.useRef(null);return i.useEffect(()=>{const e=new ResizeObserver(s=>{d(l||s[0].target.clientWidth||620),oe(b||s[0].target.clientHeight||480)});return R.current&&(oe(R.current.clientHeight||480),d(R.current.clientWidth||620),l||e.observe(R.current)),()=>e.disconnect()},[l,b]),t.jsxRuntimeExports.jsx("div",{className:`${D||"light"} flex  ${l?"w-fit grow-0":"w-full grow"}`,dir:p==="he"||p==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:t.mo(`${C?C===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${p||"en"}`,l?"w-fit":"w-full",f?.graphContainer),style:{...j?.graphContainer||{},...C&&C!==!0?{backgroundColor:C}:{}},id:N,ref:ie,"aria-label":K||`${r?`The graph shows ${r}. `:""}This is a chart where data points are represented by circles, and their sizes reflect their values.${y?` ${y}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:C?_||"1rem":_||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[r||y||G||z?t.jsxRuntimeExports.jsx(Me.GraphHeader,{styles:{title:j?.title,description:j?.description},classNames:{title:f?.title,description:f?.description},graphTitle:r,graphDescription:y,width:l,graphDownload:G?ie.current:void 0,dataDownload:z?o.map(e=>e.data).filter(e=>e!==void 0).length>0?o.map(e=>e.data).filter(e=>e!==void 0):o.filter(e=>e!==void 0):null}):null,t.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:o.length===0?t.jsxRuntimeExports.jsx(Ee.EmptyState,{}):t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[J&&o.filter(e=>e.color).length!==0?t.jsxRuntimeExports.jsx(we.ColorLegendWithMouseOver,{width:l,colorLegendTitle:H,colors:x||se.Colors[D].categoricalColors.colors,colorDomain:w||de.uniqBy(o,"color",!0),setSelectedColor:ae,showNAColor:E??!0,isCenter:!0}):null,t.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center w-full leading-0",ref:R,"aria-label":"Graph area",children:(l||g)&&(b||F)?t.jsxRuntimeExports.jsx(xe,{data:o,colors:o.filter(e=>e.color).length===0?x?[x]:[se.Colors.primaryColors["blue-600"]]:x||se.Colors[D].categoricalColors.colors,colorDomain:o.filter(e=>e.color).length===0?[]:w||de.uniqBy(o,"color",!0),width:l||g,height:Math.max(h,b||(u?h?(l||g)*u>h?(l||g)*u:h:(l||g)*u:F)),leftMargin:X,rightMargin:Y,topMargin:L,bottomMargin:O,showLabels:S,showValues:T!==!1?o.filter(e=>e.size).length!==0:T,selectedColor:ne,suffix:a,prefix:k,tooltip:A,onSeriesMouseOver:v,highlightedDataPoints:re,onSeriesMouseClick:le,theme:D,radius:$||Math.min(l||g,b||(u?h?(l||g)*u>h?(l||g)*u:h:(l||g)*u:F))*(o.filter(e=>!U.checkIfNullOrUndefined(e.size)).length===0?1:Math.max(...o.map(e=>e.size).filter(e=>e!=null)))/(o.filter(e=>!U.checkIfNullOrUndefined(e.size)).length===0?o.length:fe.sum(o.filter(e=>e.size).map(e=>e.size))*1.25),maxRadiusValue:Q,resetSelectionOnDoubleClick:P,detailsOnClick:Z,styles:j,classNames:f,dimmedOpacity:ee,precision:te}):null})]})}),c||B?t.jsxRuntimeExports.jsx(Ce.GraphFooter,{styles:{footnote:j?.footnote,source:j?.source},classNames:{footnote:f?.footnote,source:f?.source},sources:c,footNote:B,width:l}):null]})})})})}exports.CirclePackingGraph=Re;exports.extent=I;
+//# sourceMappingURL=index-CEJwW3lL.cjs.map

package/dist/{index-CVlCtJbC.cjs.map → index-CEJwW3lL.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"index-CVlCtJbC.cjs","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\n\r\nimport { 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  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    dimmedOpacity,\r\n    precision,\r\n  } = props;\r\n  const svgRef = useRef(null);\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        <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            {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              return (\r\n                <g\r\n                  className='undp-viz-g-with-hover'\r\n                  key={d.label}\r\n                  opacity={opacity}\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                >\r\n                  <circle cx={0} cy={0} r={bubbleRadius} fill={circleColor} />\r\n                  {(showLabel || showValues) && d.size !== undefined && d.size !== null && (\r\n                    <g>\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                    </g>\r\n                  )}\r\n                </g>\r\n              );\r\n            })}\r\n          </g>\r\n        </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 { 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 { Languages, SourcesDataType, StyleObject, ClassNameObject, TreeMapDataType } 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\nimport { uniqBy } from '@/Utils/uniqBy';\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  /** 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    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          width ? 'w-fit' : 'w-full',\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={colorDomain || (uniqBy(data, 'color', true) as string[])}\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 || (uniqBy(data, 'color', true) 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                        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","dimmedOpacity","precision","svgRef","useRef","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","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]}
+{"version":3,"file":"index-CEJwW3lL.cjs","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\n\r\nimport { 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  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    dimmedOpacity,\r\n    precision,\r\n  } = props;\r\n  const svgRef = useRef(null);\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        <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            {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              return (\r\n                <g\r\n                  className='undp-viz-g-with-hover'\r\n                  key={d.label}\r\n                  opacity={opacity}\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                >\r\n                  <circle cx={0} cy={0} r={bubbleRadius} fill={circleColor} />\r\n                  {(showLabel || showValues) && d.size !== undefined && d.size !== null && (\r\n                    <g>\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                    </g>\r\n                  )}\r\n                </g>\r\n              );\r\n            })}\r\n          </g>\r\n        </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 { 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 { Languages, SourcesDataType, StyleObject, ClassNameObject, TreeMapDataType } 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\nimport { uniqBy } from '@/Utils/uniqBy';\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  /** 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    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          width ? 'w-fit' : 'w-full',\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={colorDomain || (uniqBy(data, 'color', true) as string[])}\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 || (uniqBy(data, 'color', true) 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                        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","dimmedOpacity","precision","svgRef","useRef","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","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]}