@undp/data-viz 1.4.1 → 1.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (210) hide show
  1. package/dist/AreaChart.cjs +1 -1
  2. package/dist/AreaChart.js +21 -21
  3. package/dist/BarGraph.cjs +1 -1
  4. package/dist/BarGraph.js +7 -7
  5. package/dist/BeeSwarmChart.cjs +1 -1
  6. package/dist/BeeSwarmChart.js +2 -2
  7. package/dist/BiVariateChoroplethMap.cjs +1 -1
  8. package/dist/BiVariateChoroplethMap.js +5 -5
  9. package/dist/BulletChart.cjs +1 -1
  10. package/dist/BulletChart.js +14 -14
  11. package/dist/ButterflyChart.cjs +1 -1
  12. package/dist/ButterflyChart.js +9 -9
  13. package/dist/ChoroplethMap.cjs +1 -1
  14. package/dist/ChoroplethMap.js +9 -9
  15. package/dist/CirclePackingGraph.cjs +1 -1
  16. package/dist/CirclePackingGraph.js +1 -1
  17. package/dist/CopyTextButton.cjs +7 -7
  18. package/dist/CopyTextButton.cjs.map +1 -1
  19. package/dist/CopyTextButton.js +4 -4
  20. package/dist/CopyTextButton.js.map +1 -1
  21. package/dist/DataCards.cjs +9 -9
  22. package/dist/DataCards.cjs.map +1 -1
  23. package/dist/DataCards.js +93 -93
  24. package/dist/DataCards.js.map +1 -1
  25. package/dist/DifferenceLineChart.cjs +1 -1
  26. package/dist/DifferenceLineChart.js +18 -18
  27. package/dist/DonutChart.cjs +1 -1
  28. package/dist/DonutChart.js +1 -1
  29. package/dist/DotDensityMap.cjs +1 -1
  30. package/dist/DotDensityMap.js +8 -8
  31. package/dist/{DropdownSelect-0I2QxaVy.cjs → DropdownSelect-BmE5JaeE.cjs} +6 -6
  32. package/dist/{DropdownSelect-0I2QxaVy.cjs.map → DropdownSelect-BmE5JaeE.cjs.map} +1 -1
  33. package/dist/{DropdownSelect-CDC9lEqU.js → DropdownSelect-CeHog_ih.js} +4 -4
  34. package/dist/{DropdownSelect-CDC9lEqU.js.map → DropdownSelect-CeHog_ih.js.map} +1 -1
  35. package/dist/DualAxisLineChart.cjs +1 -1
  36. package/dist/DualAxisLineChart.js +15 -15
  37. package/dist/DumbbellChart.cjs +1 -1
  38. package/dist/DumbbellChart.js +13 -13
  39. package/dist/GeoHubMap.cjs +1 -1
  40. package/dist/GeoHubMap.js +2 -2
  41. package/dist/GeoHubMapWithLayerSelection.cjs +1 -1
  42. package/dist/GeoHubMapWithLayerSelection.js +2 -2
  43. package/dist/{GraphEl-B6SoGRFW.cjs → GraphEl-B5gAX1IQ.cjs} +2 -2
  44. package/dist/{GraphEl-B6SoGRFW.cjs.map → GraphEl-B5gAX1IQ.cjs.map} +1 -1
  45. package/dist/{GraphEl-Cw2tDUb3.js → GraphEl-BdIyscdt.js} +3 -3
  46. package/dist/{GraphEl-Cw2tDUb3.js.map → GraphEl-BdIyscdt.js.map} +1 -1
  47. package/dist/GriddedGraphs.cjs +1 -1
  48. package/dist/GriddedGraphs.d.ts +4 -7
  49. package/dist/GriddedGraphs.js +4 -4
  50. package/dist/GriddedGraphsFromConfig.cjs +1 -1
  51. package/dist/GriddedGraphsFromConfig.d.ts +4 -7
  52. package/dist/GriddedGraphsFromConfig.js +1 -1
  53. package/dist/HeatMap.cjs +1 -1
  54. package/dist/HeatMap.js +10 -10
  55. package/dist/Histogram.cjs +1 -1
  56. package/dist/Histogram.js +1 -1
  57. package/dist/LineChartWithConfidenceInterval.cjs +1 -1
  58. package/dist/LineChartWithConfidenceInterval.js +21 -21
  59. package/dist/{Modal-CUU6ZK3U.js → Modal-DVVwpKhP.js} +2 -2
  60. package/dist/{Modal-CUU6ZK3U.js.map → Modal-DVVwpKhP.js.map} +1 -1
  61. package/dist/{Modal-C_dl0EtQ.cjs → Modal-tXZlLE5s.cjs} +4 -4
  62. package/dist/{Modal-C_dl0EtQ.cjs.map → Modal-tXZlLE5s.cjs.map} +1 -1
  63. package/dist/MultiGraphDashboard.cjs +1 -1
  64. package/dist/MultiGraphDashboard.d.ts +4 -7
  65. package/dist/MultiGraphDashboard.js +3 -3
  66. package/dist/MultiGraphDashboardFromConfig.cjs +1 -1
  67. package/dist/MultiGraphDashboardFromConfig.d.ts +4 -7
  68. package/dist/MultiGraphDashboardFromConfig.js +1 -1
  69. package/dist/MultiGraphDashboardWideToLongFormat.cjs +1 -1
  70. package/dist/MultiGraphDashboardWideToLongFormat.js +3 -3
  71. package/dist/MultiGraphDashboardWideToLongFormatFromConfig.cjs +1 -1
  72. package/dist/MultiGraphDashboardWideToLongFormatFromConfig.js +1 -1
  73. package/dist/MultiLineAltChart.cjs +1 -1
  74. package/dist/MultiLineAltChart.js +21 -21
  75. package/dist/MultiLineChart.cjs +1 -1
  76. package/dist/MultiLineChart.js +19 -19
  77. package/dist/ParetoChart.cjs +1 -1
  78. package/dist/ParetoChart.js +12 -12
  79. package/dist/PerformanceIntensiveMultiGraphDashboard.cjs +1 -1
  80. package/dist/PerformanceIntensiveMultiGraphDashboard.d.ts +4 -7
  81. package/dist/PerformanceIntensiveMultiGraphDashboard.js +3 -3
  82. package/dist/PerformanceIntensiveMultiGraphDashboardFromConfig.cjs +1 -1
  83. package/dist/PerformanceIntensiveMultiGraphDashboardFromConfig.d.ts +4 -7
  84. package/dist/PerformanceIntensiveMultiGraphDashboardFromConfig.js +1 -1
  85. package/dist/PerformanceIntensiveScrollStory.cjs +1 -1
  86. package/dist/PerformanceIntensiveScrollStory.d.ts +4 -7
  87. package/dist/PerformanceIntensiveScrollStory.js +2 -2
  88. package/dist/RadarChart.cjs +1 -1
  89. package/dist/RadarChart.js +8 -8
  90. package/dist/{ReferenceLine-CuFMk0cI.cjs → ReferenceLine-CFVBBN__.cjs} +2 -2
  91. package/dist/{ReferenceLine-CuFMk0cI.cjs.map → ReferenceLine-CFVBBN__.cjs.map} +1 -1
  92. package/dist/{ReferenceLine-C1GpoG9d.js → ReferenceLine-CfAW3vKJ.js} +2 -2
  93. package/dist/{ReferenceLine-C1GpoG9d.js.map → ReferenceLine-CfAW3vKJ.js.map} +1 -1
  94. package/dist/{RegressionLine-BFwDCTUU.js → RegressionLine-mH7UKOPi.js} +3 -3
  95. package/dist/{RegressionLine-BFwDCTUU.js.map → RegressionLine-mH7UKOPi.js.map} +1 -1
  96. package/dist/{RegressionLine-7_rKTHN_.cjs → RegressionLine-xKdiJ8sw.cjs} +2 -2
  97. package/dist/{RegressionLine-7_rKTHN_.cjs.map → RegressionLine-xKdiJ8sw.cjs.map} +1 -1
  98. package/dist/SankeyChart.cjs +1 -1
  99. package/dist/SankeyChart.js +4 -4
  100. package/dist/ScatterPlot.cjs +1 -1
  101. package/dist/ScatterPlot.js +13 -13
  102. package/dist/ScrollStory.cjs +1 -1
  103. package/dist/ScrollStory.d.ts +4 -7
  104. package/dist/ScrollStory.js +2 -2
  105. package/dist/SimpleLineChart.cjs +1 -1
  106. package/dist/SimpleLineChart.js +20 -20
  107. package/dist/SingleGraphDashboard.cjs +1 -1
  108. package/dist/SingleGraphDashboard.d.ts +4 -7
  109. package/dist/SingleGraphDashboard.js +4 -4
  110. package/dist/SingleGraphDashboardFromConfig.cjs +1 -1
  111. package/dist/SingleGraphDashboardFromConfig.d.ts +4 -7
  112. package/dist/SingleGraphDashboardFromConfig.js +1 -1
  113. package/dist/SingleGraphDashboardGeoHubMaps.d.ts +4 -7
  114. package/dist/SingleGraphDashboardGeoHubMapsFromConfig.cjs +1 -1
  115. package/dist/SingleGraphDashboardGeoHubMapsFromConfig.d.ts +4 -7
  116. package/dist/SingleGraphDashboardGeoHubMapsFromConfig.js +1 -1
  117. package/dist/SingleGraphDashboardThreeDGraphs.cjs +1 -1
  118. package/dist/SingleGraphDashboardThreeDGraphs.cjs.map +1 -1
  119. package/dist/SingleGraphDashboardThreeDGraphs.d.ts +4 -7
  120. package/dist/SingleGraphDashboardThreeDGraphs.js +30 -27
  121. package/dist/SingleGraphDashboardThreeDGraphs.js.map +1 -1
  122. package/dist/SingleGraphDashboardThreeDGraphsFromConfig.cjs +1 -1
  123. package/dist/SingleGraphDashboardThreeDGraphsFromConfig.d.ts +4 -7
  124. package/dist/SingleGraphDashboardThreeDGraphsFromConfig.js +1 -1
  125. package/dist/SlopeChart.cjs +1 -1
  126. package/dist/SlopeChart.js +7 -7
  127. package/dist/StripChart.cjs +1 -1
  128. package/dist/StripChart.js +9 -9
  129. package/dist/ThreeDGlobe.cjs +1 -1
  130. package/dist/ThreeDGlobe.cjs.map +1 -1
  131. package/dist/ThreeDGlobe.d.ts +11 -2
  132. package/dist/ThreeDGlobe.js +278 -253
  133. package/dist/ThreeDGlobe.js.map +1 -1
  134. package/dist/TreeMapGraph.cjs +1 -1
  135. package/dist/TreeMapGraph.js +4 -4
  136. package/dist/Types.d.ts +4 -7
  137. package/dist/UnitChart.cjs +1 -1
  138. package/dist/UnitChart.js +3 -3
  139. package/dist/{XAxesLabels-DQFo_z2R.js → XAxesLabels-CaV2q-6H.js} +2 -2
  140. package/dist/{XAxesLabels-DQFo_z2R.js.map → XAxesLabels-CaV2q-6H.js.map} +1 -1
  141. package/dist/{XAxesLabels-CJMQbfVy.cjs → XAxesLabels-OjBNl_lS.cjs} +2 -2
  142. package/dist/{XAxesLabels-CJMQbfVy.cjs.map → XAxesLabels-OjBNl_lS.cjs.map} +1 -1
  143. package/dist/{YAxesLabels-H5-002X5.js → YAxesLabels-CPGZjmZJ.js} +2 -2
  144. package/dist/{YAxesLabels-H5-002X5.js.map → YAxesLabels-CPGZjmZJ.js.map} +1 -1
  145. package/dist/{YAxesLabels-BXLTX7AI.cjs → YAxesLabels-D8IydyZj.cjs} +2 -2
  146. package/dist/{YAxesLabels-BXLTX7AI.cjs.map → YAxesLabels-D8IydyZj.cjs.map} +1 -1
  147. package/dist/{checkIfMultiple-Do4kADNr.cjs → checkIfMultiple-BXbHUCWM.cjs} +6 -6
  148. package/dist/{checkIfMultiple-Do4kADNr.cjs.map → checkIfMultiple-BXbHUCWM.cjs.map} +1 -1
  149. package/dist/{checkIfMultiple-CYp3vADF.js → checkIfMultiple-ChTJk2Tk.js} +5 -5
  150. package/dist/{checkIfMultiple-CYp3vADF.js.map → checkIfMultiple-ChTJk2Tk.js.map} +1 -1
  151. package/dist/{customArea-CaxScFmW.js → customArea-B-dWU0zZ.js} +2 -2
  152. package/dist/{customArea-CaxScFmW.js.map → customArea-B-dWU0zZ.js.map} +1 -1
  153. package/dist/{customArea-BYNyxAkm.cjs → customArea-CK768gCn.cjs} +2 -2
  154. package/dist/{customArea-BYNyxAkm.cjs.map → customArea-CK768gCn.cjs.map} +1 -1
  155. package/dist/{fetchAndParseData-Bcmr659B.js → fetchAndParseData-4gsYTy6_.js} +3 -3
  156. package/dist/fetchAndParseData-4gsYTy6_.js.map +1 -0
  157. package/dist/{fetchAndParseData-DmgQtB9n.cjs → fetchAndParseData-CQyVGCul.cjs} +6 -6
  158. package/dist/fetchAndParseData-CQyVGCul.cjs.map +1 -0
  159. package/dist/fetchAndParseData.cjs +1 -1
  160. package/dist/fetchAndParseData.js +1 -1
  161. package/dist/index-BW8iNx7E.cjs +10 -0
  162. package/dist/index-BW8iNx7E.cjs.map +1 -0
  163. package/dist/index-CNvov0eg.js +122 -0
  164. package/dist/index-CNvov0eg.js.map +1 -0
  165. package/dist/{index-D_n8aamX.cjs → index-CZLvTu6p.cjs} +2 -2
  166. package/dist/{index-D_n8aamX.cjs.map → index-CZLvTu6p.cjs.map} +1 -1
  167. package/dist/{index-n_RI8T0n.js → index-Cdcfp4nk.js} +2 -2
  168. package/dist/{index-n_RI8T0n.js.map → index-Cdcfp4nk.js.map} +1 -1
  169. package/dist/{index-BVnYktl4.js → index-DGAaLNu9.js} +2 -2
  170. package/dist/{index-BVnYktl4.js.map → index-DGAaLNu9.js.map} +1 -1
  171. package/dist/{index-CylX-pWB.cjs → index-DNj994Pv.cjs} +2 -2
  172. package/dist/{index-CylX-pWB.cjs.map → index-DNj994Pv.cjs.map} +1 -1
  173. package/dist/index.cjs +1 -1
  174. package/dist/index.d.ts +15 -9
  175. package/dist/index.js +3 -3
  176. package/dist/proxy-BHRoeZgd.cjs +2 -0
  177. package/dist/proxy-BHRoeZgd.cjs.map +1 -0
  178. package/dist/{proxy-DJxJg1kD.js → proxy-CkpFesk1.js} +4123 -4075
  179. package/dist/proxy-CkpFesk1.js.map +1 -0
  180. package/dist/style.css +1 -1
  181. package/dist/transformData.cjs +1 -1
  182. package/dist/transformData.js +2 -2
  183. package/dist/{transformDataForGraphFromFile-D9G3ToQf.cjs → transformDataForGraphFromFile-B1A0AS-Z.cjs} +2 -2
  184. package/dist/{transformDataForGraphFromFile-D9G3ToQf.cjs.map → transformDataForGraphFromFile-B1A0AS-Z.cjs.map} +1 -1
  185. package/dist/{transformDataForGraphFromFile-CA0rw80A.js → transformDataForGraphFromFile-BCjsizvb.js} +2 -2
  186. package/dist/{transformDataForGraphFromFile-CA0rw80A.js.map → transformDataForGraphFromFile-BCjsizvb.js.map} +1 -1
  187. package/dist/{use-in-view-BCmzDU2O.cjs → use-in-view-sQJZ_xDO.cjs} +2 -2
  188. package/dist/use-in-view-sQJZ_xDO.cjs.map +1 -0
  189. package/dist/{use-in-view-BAHrBy6b.js → use-in-view-yS6jzJAp.js} +2 -2
  190. package/dist/use-in-view-yS6jzJAp.js.map +1 -0
  191. package/dist/x-BBpi7a_7-Dz2vKSfu.cjs +27 -0
  192. package/dist/x-BBpi7a_7-Dz2vKSfu.cjs.map +1 -0
  193. package/dist/x-BBpi7a_7-WVdj1j6r.js +106 -0
  194. package/dist/x-BBpi7a_7-WVdj1j6r.js.map +1 -0
  195. package/package.json +50 -51
  196. package/dist/fetchAndParseData-Bcmr659B.js.map +0 -1
  197. package/dist/fetchAndParseData-DmgQtB9n.cjs.map +0 -1
  198. package/dist/index-BxAUvrua.js +0 -120
  199. package/dist/index-BxAUvrua.js.map +0 -1
  200. package/dist/index-DVOJ7vxH.cjs +0 -10
  201. package/dist/index-DVOJ7vxH.cjs.map +0 -1
  202. package/dist/proxy-DJxJg1kD.js.map +0 -1
  203. package/dist/proxy-PQd2AItT.cjs +0 -2
  204. package/dist/proxy-PQd2AItT.cjs.map +0 -1
  205. package/dist/use-in-view-BAHrBy6b.js.map +0 -1
  206. package/dist/use-in-view-BCmzDU2O.cjs.map +0 -1
  207. package/dist/x-CnsEH4Ox-CGGXQl4M.cjs +0 -27
  208. package/dist/x-CnsEH4Ox-CGGXQl4M.cjs.map +0 -1
  209. package/dist/x-CnsEH4Ox-DDvAJndW.js +0 -101
  210. package/dist/x-CnsEH4Ox-DDvAJndW.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index-CNvov0eg.js","sources":["../node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs","../node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs","../node_modules/framer-motion/dist/es/components/AnimatePresence/utils.mjs","../node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs"],"sourcesContent":["\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { isHTMLElement } from 'motion-dom';\nimport * as React from 'react';\nimport { useId, useRef, useContext, useInsertionEffect } from 'react';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component {\n getSnapshotBeforeUpdate(prevProps) {\n const element = this.props.childRef.current;\n if (element && prevProps.isPresent && !this.props.isPresent) {\n const parent = element.offsetParent;\n const parentWidth = isHTMLElement(parent)\n ? parent.offsetWidth || 0\n : 0;\n const size = this.props.sizeRef.current;\n size.height = element.offsetHeight || 0;\n size.width = element.offsetWidth || 0;\n size.top = element.offsetTop;\n size.left = element.offsetLeft;\n size.right = parentWidth - size.width - size.left;\n }\n return null;\n }\n /**\n * Required with getSnapshotBeforeUpdate to stop React complaining.\n */\n componentDidUpdate() { }\n render() {\n return this.props.children;\n }\n}\nfunction PopChild({ children, isPresent, anchorX, root }) {\n const id = useId();\n const ref = useRef(null);\n const size = useRef({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n right: 0,\n });\n const { nonce } = useContext(MotionConfigContext);\n /**\n * We create and inject a style block so we can apply this explicit\n * sizing in a non-destructive manner by just deleting the style block.\n *\n * We can't apply size via render as the measurement happens\n * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n * styles directly on the DOM node, we might be overwriting\n * styles set via the style prop.\n */\n useInsertionEffect(() => {\n const { width, height, top, left, right } = size.current;\n if (isPresent || !ref.current || !width || !height)\n return;\n const x = anchorX === \"left\" ? `left: ${left}` : `right: ${right}`;\n ref.current.dataset.motionPopId = id;\n const style = document.createElement(\"style\");\n if (nonce)\n style.nonce = nonce;\n const parent = root ?? document.head;\n parent.appendChild(style);\n if (style.sheet) {\n style.sheet.insertRule(`\n [data-motion-pop-id=\"${id}\"] {\n position: absolute !important;\n width: ${width}px !important;\n height: ${height}px !important;\n ${x}px !important;\n top: ${top}px !important;\n }\n `);\n }\n return () => {\n if (parent.contains(style)) {\n parent.removeChild(style);\n }\n };\n }, [isPresent]);\n return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));\n}\n\nexport { PopChild };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useMemo } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PopChild } from './PopChild.mjs';\n\nconst PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, root }) => {\n const presenceChildren = useConstant(newChildrenMap);\n const id = useId();\n let isReusedContext = true;\n let context = useMemo(() => {\n isReusedContext = false;\n return {\n id,\n initial,\n isPresent,\n custom,\n onExitComplete: (childId) => {\n presenceChildren.set(childId, true);\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete)\n return; // can stop searching when any is incomplete\n }\n onExitComplete && onExitComplete();\n },\n register: (childId) => {\n presenceChildren.set(childId, false);\n return () => presenceChildren.delete(childId);\n },\n };\n }, [isPresent, presenceChildren, onExitComplete]);\n /**\n * If the presence of a child affects the layout of the components around it,\n * we want to make a new context value to ensure they get re-rendered\n * so they can detect that layout change.\n */\n if (presenceAffectsLayout && isReusedContext) {\n context = { ...context };\n }\n useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false));\n }, [isPresent]);\n /**\n * If there's no `motion` components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !isPresent &&\n !presenceChildren.size &&\n onExitComplete &&\n onExitComplete();\n }, [isPresent]);\n if (mode === \"popLayout\") {\n children = (jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, root: root, children: children }));\n }\n return (jsx(PresenceContext.Provider, { value: context, children: children }));\n};\nfunction newChildrenMap() {\n return new Map();\n}\n\nexport { PresenceChild };\n","import { Children, isValidElement } from 'react';\n\nconst getChildKey = (child) => child.key || \"\";\nfunction onlyElements(children) {\n const filtered = [];\n // We use forEach here instead of map as map mutates the component key by preprending `.$`\n Children.forEach(children, (child) => {\n if (isValidElement(child))\n filtered.push(child);\n });\n return filtered;\n}\n\nexport { getChildKey, onlyElements };\n","\"use client\";\nimport { jsx, Fragment } from 'react/jsx-runtime';\nimport { useMemo, useRef, useState, useContext } from 'react';\nimport { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\nimport { PresenceChild } from './PresenceChild.mjs';\nimport { usePresence } from './use-presence.mjs';\nimport { onlyElements, getChildKey } from './utils.mjs';\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n * <AnimatePresence>\n * {items.map(item => (\n * <motion.div\n * key={item.id}\n * initial={{ opacity: 0 }}\n * animate={{ opacity: 1 }}\n * exit={{ opacity: 0 }}\n * />\n * ))}\n * </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nconst AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = \"sync\", propagate = false, anchorX = \"left\", root }) => {\n const [isParentPresent, safeToRemove] = usePresence(propagate);\n /**\n * Filter any children that aren't ReactElements. We can only track components\n * between renders with a props.key.\n */\n const presentChildren = useMemo(() => onlyElements(children), [children]);\n /**\n * Track the keys of the currently rendered children. This is used to\n * determine which children are exiting.\n */\n const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);\n /**\n * If `initial={false}` we only want to pass this to components in the first render.\n */\n const isInitialRender = useRef(true);\n /**\n * A ref containing the currently present children. When all exit animations\n * are complete, we use this to re-render the component with the latest children\n * *committed* rather than the latest children *rendered*.\n */\n const pendingPresentChildren = useRef(presentChildren);\n /**\n * Track which exiting children have finished animating out.\n */\n const exitComplete = useConstant(() => new Map());\n /**\n * Save children to render as React state. To ensure this component is concurrent-safe,\n * we check for exiting children via an effect.\n */\n const [diffedChildren, setDiffedChildren] = useState(presentChildren);\n const [renderedChildren, setRenderedChildren] = useState(presentChildren);\n useIsomorphicLayoutEffect(() => {\n isInitialRender.current = false;\n pendingPresentChildren.current = presentChildren;\n /**\n * Update complete status of exiting children.\n */\n for (let i = 0; i < renderedChildren.length; i++) {\n const key = getChildKey(renderedChildren[i]);\n if (!presentKeys.includes(key)) {\n if (exitComplete.get(key) !== true) {\n exitComplete.set(key, false);\n }\n }\n else {\n exitComplete.delete(key);\n }\n }\n }, [renderedChildren, presentKeys.length, presentKeys.join(\"-\")]);\n const exitingChildren = [];\n if (presentChildren !== diffedChildren) {\n let nextChildren = [...presentChildren];\n /**\n * Loop through all the currently rendered components and decide which\n * are exiting.\n */\n for (let i = 0; i < renderedChildren.length; i++) {\n const child = renderedChildren[i];\n const key = getChildKey(child);\n if (!presentKeys.includes(key)) {\n nextChildren.splice(i, 0, child);\n exitingChildren.push(child);\n }\n }\n /**\n * If we're in \"wait\" mode, and we have exiting children, we want to\n * only render these until they've all exited.\n */\n if (mode === \"wait\" && exitingChildren.length) {\n nextChildren = exitingChildren;\n }\n setRenderedChildren(onlyElements(nextChildren));\n setDiffedChildren(presentChildren);\n /**\n * Early return to ensure once we've set state with the latest diffed\n * children, we can immediately re-render.\n */\n return null;\n }\n if (process.env.NODE_ENV !== \"production\" &&\n mode === \"wait\" &&\n renderedChildren.length > 1) {\n console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.`);\n }\n /**\n * If we've been provided a forceRender function by the LayoutGroupContext,\n * we can use it to force a re-render amongst all surrounding components once\n * all components have finished animating out.\n */\n const { forceRender } = useContext(LayoutGroupContext);\n return (jsx(Fragment, { children: renderedChildren.map((child) => {\n const key = getChildKey(child);\n const isPresent = propagate && !isParentPresent\n ? false\n : presentChildren === renderedChildren ||\n presentKeys.includes(key);\n const onExit = () => {\n if (exitComplete.has(key)) {\n exitComplete.set(key, true);\n }\n else {\n return;\n }\n let isEveryExitComplete = true;\n exitComplete.forEach((isExitComplete) => {\n if (!isExitComplete)\n isEveryExitComplete = false;\n });\n if (isEveryExitComplete) {\n forceRender?.();\n setRenderedChildren(pendingPresentChildren.current);\n propagate && safeToRemove?.();\n onExitComplete && onExitComplete();\n }\n };\n return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial\n ? undefined\n : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, root: root, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));\n }) }));\n};\n\nexport { AnimatePresence };\n"],"names":["PopChildMeasure","React","prevProps","element","parent","parentWidth","isHTMLElement","size","PopChild","children","isPresent","anchorX","root","id","useId","ref","useRef","nonce","useContext","MotionConfigContext","useInsertionEffect","width","height","top","left","right","x","style","jsx","PresenceChild","initial","onExitComplete","custom","presenceAffectsLayout","mode","presenceChildren","useConstant","newChildrenMap","isReusedContext","context","useMemo","childId","isComplete","_","key","PresenceContext","getChildKey","child","onlyElements","filtered","Children","isValidElement","AnimatePresence","propagate","isParentPresent","safeToRemove","usePresence","presentChildren","presentKeys","isInitialRender","pendingPresentChildren","exitComplete","diffedChildren","setDiffedChildren","useState","renderedChildren","setRenderedChildren","useIsomorphicLayoutEffect","i","exitingChildren","nextChildren","forceRender","LayoutGroupContext","Fragment","onExit","isEveryExitComplete","isExitComplete"],"mappings":";;;;AAWA,MAAMA,UAAwBC,EAAM,UAAU;AAAA,EAC1C,wBAAwBC,GAAW;AAC/B,UAAMC,IAAU,KAAK,MAAM,SAAS;AACpC,QAAIA,KAAWD,EAAU,aAAa,CAAC,KAAK,MAAM,WAAW;AACzD,YAAME,IAASD,EAAQ,cACjBE,IAAcC,EAAcF,CAAM,KAClCA,EAAO,eAAe,GAEtBG,IAAO,KAAK,MAAM,QAAQ;AAChC,MAAAA,EAAK,SAASJ,EAAQ,gBAAgB,GACtCI,EAAK,QAAQJ,EAAQ,eAAe,GACpCI,EAAK,MAAMJ,EAAQ,WACnBI,EAAK,OAAOJ,EAAQ,YACpBI,EAAK,QAAQF,IAAcE,EAAK,QAAQA,EAAK;AAAA,IACjD;AACA,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAIA,qBAAqB;AAAA,EAAE;AAAA,EACvB,SAAS;AACL,WAAO,KAAK,MAAM;AAAA,EACtB;AACJ;AACA,SAASC,EAAS,EAAE,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,MAAAC,EAAI,GAAI;AACtD,QAAMC,IAAKC,EAAK,GACVC,IAAMC,EAAO,IAAI,GACjBT,IAAOS,EAAO;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,EACf,CAAK,GACK,EAAE,OAAAC,EAAK,IAAKC,EAAWC,CAAmB;AAUhD,SAAAC,EAAmB,MAAM;AACrB,UAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,KAAAC,GAAK,MAAAC,GAAM,OAAAC,EAAK,IAAKlB,EAAK;AACjD,QAAIG,KAAa,CAACK,EAAI,WAAW,CAACM,KAAS,CAACC;AACxC;AACJ,UAAMI,IAAIf,MAAY,SAAS,SAASa,CAAI,KAAK,UAAUC,CAAK;AAChE,IAAAV,EAAI,QAAQ,QAAQ,cAAcF;AAClC,UAAMc,IAAQ,SAAS,cAAc,OAAO;AAC5C,IAAIV,MACAU,EAAM,QAAQV;AAClB,UAAMb,IAASQ,KAAQ,SAAS;AAChC,WAAAR,EAAO,YAAYuB,CAAK,GACpBA,EAAM,SACNA,EAAM,MAAM,WAAW;AAAA,iCACFd,CAAE;AAAA;AAAA,qBAEdQ,CAAK;AAAA,sBACJC,CAAM;AAAA,cACdI,CAAC;AAAA,mBACIH,CAAG;AAAA;AAAA,SAEb,GAEM,MAAM;AACT,MAAInB,EAAO,SAASuB,CAAK,KACrBvB,EAAO,YAAYuB,CAAK;AAAA,IAEhC;AAAA,EACJ,GAAG,CAACjB,CAAS,CAAC,GACNkB,EAAAA,IAAI5B,GAAiB,EAAE,WAAWU,GAAW,UAAUK,GAAK,SAASR,GAAM,UAAUN,EAAM,aAAaQ,GAAU,EAAE,KAAAM,EAAG,CAAE,GAAG;AACxI;AC7EA,MAAMc,IAAgB,CAAC,EAAE,UAAApB,GAAU,SAAAqB,GAAS,WAAApB,GAAW,gBAAAqB,GAAgB,QAAAC,GAAQ,uBAAAC,GAAuB,MAAAC,GAAM,SAAAvB,GAAS,MAAAC,EAAI,MAAO;AAC5H,QAAMuB,IAAmBC,EAAYC,CAAc,GAC7CxB,IAAKC,EAAK;AAChB,MAAIwB,IAAkB,IAClBC,IAAUC,EAAQ,OAClBF,IAAkB,IACX;AAAA,IACH,IAAAzB;AAAA,IACA,SAAAiB;AAAA,IACA,WAAApB;AAAA,IACA,QAAAsB;AAAA,IACA,gBAAgB,CAACS,MAAY;AACzB,MAAAN,EAAiB,IAAIM,GAAS,EAAI;AAClC,iBAAWC,KAAcP,EAAiB;AACtC,YAAI,CAACO;AACD;AAER,MAAAX,KAAkBA,EAAc;AAAA,IACpC;AAAA,IACA,UAAU,CAACU,OACPN,EAAiB,IAAIM,GAAS,EAAK,GAC5B,MAAMN,EAAiB,OAAOM,CAAO;AAAA,EAE5D,IACO,CAAC/B,GAAWyB,GAAkBJ,CAAc,CAAC;AAMhD,SAAIE,KAAyBK,MACzBC,IAAU,EAAE,GAAGA,EAAO,IAE1BC,EAAQ,MAAM;AACV,IAAAL,EAAiB,QAAQ,CAACQ,GAAGC,MAAQT,EAAiB,IAAIS,GAAK,EAAK,CAAC;AAAA,EACzE,GAAG,CAAClC,CAAS,CAAC,GAKdT,EAAM,UAAU,MAAM;AAClB,KAACS,KACG,CAACyB,EAAiB,QAClBJ,KACAA,EAAc;AAAA,EACtB,GAAG,CAACrB,CAAS,CAAC,GACVwB,MAAS,gBACTzB,IAAYmB,EAAAA,IAAIpB,GAAU,EAAE,WAAWE,GAAW,SAASC,GAAS,MAAMC,GAAM,UAAUH,EAAQ,CAAE,IAEhGmB,EAAAA,IAAIiB,EAAgB,UAAU,EAAE,OAAON,GAAS,UAAU9B,GAAU;AAChF;AACA,SAAS4B,IAAiB;AACtB,SAAO,oBAAI,IAAG;AAClB;AC3DA,MAAMS,IAAc,CAACC,MAAUA,EAAM,OAAO;AAC5C,SAASC,EAAavC,GAAU;AAC5B,QAAMwC,IAAW,CAAA;AAEjB,SAAAC,EAAS,QAAQzC,GAAU,CAACsC,MAAU;AAClC,IAAII,EAAeJ,CAAK,KACpBE,EAAS,KAAKF,CAAK;AAAA,EAC3B,CAAC,GACME;AACX;ACgCK,MAACG,KAAkB,CAAC,EAAE,UAAA3C,GAAU,QAAAuB,GAAQ,SAAAF,IAAU,IAAM,gBAAAC,GAAgB,uBAAAE,IAAwB,IAAM,MAAAC,IAAO,QAAQ,WAAAmB,IAAY,IAAO,SAAA1C,IAAU,QAAQ,MAAAC,QAAW;AACtK,QAAM,CAAC0C,GAAiBC,CAAY,IAAIC,EAAYH,CAAS,GAKvDI,IAAkBjB,EAAQ,MAAMQ,EAAavC,CAAQ,GAAG,CAACA,CAAQ,CAAC,GAKlEiD,IAAcL,KAAa,CAACC,IAAkB,CAAA,IAAKG,EAAgB,IAAIX,CAAW,GAIlFa,IAAkB3C,EAAO,EAAI,GAM7B4C,IAAyB5C,EAAOyC,CAAe,GAI/CI,IAAezB,EAAY,MAAM,oBAAI,IAAG,CAAE,GAK1C,CAAC0B,GAAgBC,CAAiB,IAAIC,EAASP,CAAe,GAC9D,CAACQ,GAAkBC,CAAmB,IAAIF,EAASP,CAAe;AACxE,EAAAU,EAA0B,MAAM;AAC5B,IAAAR,EAAgB,UAAU,IAC1BC,EAAuB,UAAUH;AAIjC,aAASW,IAAI,GAAGA,IAAIH,EAAiB,QAAQG,KAAK;AAC9C,YAAMxB,IAAME,EAAYmB,EAAiBG,CAAC,CAAC;AAC3C,MAAKV,EAAY,SAASd,CAAG,IAMzBiB,EAAa,OAAOjB,CAAG,IALnBiB,EAAa,IAAIjB,CAAG,MAAM,MAC1BiB,EAAa,IAAIjB,GAAK,EAAK;AAAA,IAMvC;AAAA,EACJ,GAAG,CAACqB,GAAkBP,EAAY,QAAQA,EAAY,KAAK,GAAG,CAAC,CAAC;AAChE,QAAMW,IAAkB,CAAA;AACxB,MAAIZ,MAAoBK,GAAgB;AACpC,QAAIQ,IAAe,CAAC,GAAGb,CAAe;AAKtC,aAASW,IAAI,GAAGA,IAAIH,EAAiB,QAAQG,KAAK;AAC9C,YAAMrB,IAAQkB,EAAiBG,CAAC,GAC1BxB,IAAME,EAAYC,CAAK;AAC7B,MAAKW,EAAY,SAASd,CAAG,MACzB0B,EAAa,OAAOF,GAAG,GAAGrB,CAAK,GAC/BsB,EAAgB,KAAKtB,CAAK;AAAA,IAElC;AAKA,WAAIb,MAAS,UAAUmC,EAAgB,WACnCC,IAAeD,IAEnBH,EAAoBlB,EAAasB,CAAY,CAAC,GAC9CP,EAAkBN,CAAe,GAK1B;AAAA,EACX;AACA,EAAI,QAAQ,IAAI,aAAa,gBACzBvB,MAAS,UACT+B,EAAiB,SAAS,KAC1B,QAAQ,KAAK,+IAA+I;AAOhK,QAAM,EAAE,aAAAM,EAAW,IAAKrD,EAAWsD,CAAkB;AACrD,SAAQ5C,EAAAA,IAAI6C,EAAAA,UAAU,EAAE,UAAUR,EAAiB,IAAI,CAAClB,MAAU;AAC1D,UAAMH,IAAME,EAAYC,CAAK,GACvBrC,IAAY2C,KAAa,CAACC,IAC1B,KACAG,MAAoBQ,KAClBP,EAAY,SAASd,CAAG,GAC1B8B,IAAS,MAAM;AACjB,UAAIb,EAAa,IAAIjB,CAAG;AACpB,QAAAiB,EAAa,IAAIjB,GAAK,EAAI;AAAA;AAG1B;AAEJ,UAAI+B,IAAsB;AAC1B,MAAAd,EAAa,QAAQ,CAACe,MAAmB;AACrC,QAAKA,MACDD,IAAsB;AAAA,MAC9B,CAAC,GACGA,MACAJ,IAAW,GACXL,EAAoBN,EAAuB,OAAO,GAClDP,KAAaE,IAAY,GACzBxB,KAAkBA,EAAc;AAAA,IAExC;AACA,WAAQH,EAAAA,IAAIC,GAAe,EAAE,WAAWnB,GAAW,SAAS,CAACiD,EAAgB,WAAW7B,IAC9E,SACA,IAAO,QAAQE,GAAQ,uBAAuBC,GAAuB,MAAMC,GAAM,MAAMtB,GAAM,gBAAgBF,IAAY,SAAYgE,GAAQ,SAAS/D,GAAS,UAAUoC,EAAK,GAAIH,CAAG;AAAA,EACnM,CAAC,EAAC,CAAE;AACZ;","x_google_ignoreList":[0,1,2,3]}
@@ -1,2 +1,2 @@
1
- "use strict";const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),de=require("./index-CZbIGs8q.cjs"),i=require("react"),fe=require("./index-C21TvELx.cjs"),ge=require("./index-BczVvEBZ.cjs"),me=require("./Modal-C_dl0EtQ.cjs"),pe=require("./Spinner-DA6Z5E4n.cjs"),ve=require("./Tooltip-n8z5bfav.cjs"),je=require("./numberFormattingFunction-02t-wJta.cjs"),he=require("./getTextColorBasedOnBgColor-nqY-bsM_.cjs"),se=require("./Colors.cjs"),U=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),be=require("./string2HTML-D2Avudmb.cjs"),ye=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");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:b,rightMargin:X,topMargin:Y,bottomMargin:y,showLabels:n,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),[d,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:y,left:x,right:X}),[Y,y,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]),h=i.useMemo(()=>o.filter(e=>e.size===void 0||e.size===null).length!==o.length?ye.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(l=>te/2).strength(1)).force("x",W.forceX(l=>ee/2).strength(1)).force("collide",W.forceCollide(l=>h?h(l.size||0)+1:u+1)).force("charge",W.forceManyBody().strength(-15)).alphaDecay(.05).tick(1e4).on("tick",()=>{j(s)}).on("end",()=>{j(s);const l=I(s,m=>m.x-(h?h(m.size||0)+1:u+1))[0]||0,V=I(s,m=>m.y-(h?h(m.size||0)+1:u+1))[0]||0,q=I(s,m=>m.x+(h?h(m.size||0)+1:u+1))[1]||0,ue=I(s,m=>m.y+(h?h(m.size||0)+1:u+1))[1]||0;D([l,V,l<0?q-l:q,V<0?ue-V:ue])})})()},[o,u,te,ee,S,g,h]);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=>b?e.color&&r[k.indexOf(e.color)]===b?1:N:L.length!==0?L.indexOf(e.label)!==-1?.85:N:.85,[b,N,r,k,L]);return Z?d?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx("svg",{width:`${a}px`,height:`${c}px`,viewBox:`${d[0]>0?0:d[0]} ${d[1]>0?0:d[1]} ${a<d[2]?d[2]:a} ${c<d[3]?d[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),l=h?h(e.size||0):u,V=l>20&&(n||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:l,fill:s}),(V||H)&&e.size!==void 0&&e.size!==null&&t.jsxRuntimeExports.jsx("g",{children:t.jsxRuntimeExports.jsx("foreignObject",{y:0-l,x:0-l,width:2*l,height:2*l,children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col justify-center items-center h-full py-0 px-3",children:[n&&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(l/4),12),Math.max(Math.round(l*12/`${e.label}`.length),12),14)}px`,WebkitLineClamp:l*2<60?1:l*2<75?2:l*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(l/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:be.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:b,leftMargin:X=0,rightMargin:Y=0,height:y,width:n,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:d=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,h]=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=>{h(n||s[0].target.clientWidth||620),oe(y||s[0].target.clientHeight||480)});return R.current&&(oe(R.current.clientHeight||480),h(R.current.clientWidth||620),n||e.observe(R.current)),()=>e.disconnect()},[n,y]),t.jsxRuntimeExports.jsx("div",{className:`${D||"light"} flex ${n?"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"}`,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.${b?` ${b}`:""}`,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||b||P||z?t.jsxRuntimeExports.jsx(Me.GraphHeader,{styles:{title:j?.title,description:j?.description},classNames:{title:f?.title,description:f?.description},graphTitle:r,graphDescription:b,width:n,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:n,colorLegendTitle:H,colors:x||se.Colors[D].categoricalColors.colors,colorDomain:w||de.uniqBy(o.filter(e=>e.color),"color").map(e=>e.color),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:(n||g)&&(y||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.filter(e=>e.color),"color").map(e=>e.color),width:n||g,height:Math.max(d,y||(u?d?(n||g)*u>d?(n||g)*u:d:(n||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(n||g,y||(u?d?(n||g)*u>d?(n||g)*u:d:(n||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:n}):null]})})})})}exports.CirclePackingGraph=Re;exports.extent=I;
2
- //# sourceMappingURL=index-D_n8aamX.cjs.map
1
+ "use strict";const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),de=require("./index-CZbIGs8q.cjs"),i=require("react"),fe=require("./index-C21TvELx.cjs"),ge=require("./index-BczVvEBZ.cjs"),me=require("./Modal-tXZlLE5s.cjs"),pe=require("./Spinner-DA6Z5E4n.cjs"),ve=require("./Tooltip-n8z5bfav.cjs"),je=require("./numberFormattingFunction-02t-wJta.cjs"),he=require("./getTextColorBasedOnBgColor-nqY-bsM_.cjs"),se=require("./Colors.cjs"),U=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),be=require("./string2HTML-D2Avudmb.cjs"),ye=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");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:b,rightMargin:X,topMargin:Y,bottomMargin:y,showLabels:n,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),[d,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:y,left:x,right:X}),[Y,y,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]),h=i.useMemo(()=>o.filter(e=>e.size===void 0||e.size===null).length!==o.length?ye.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(l=>te/2).strength(1)).force("x",W.forceX(l=>ee/2).strength(1)).force("collide",W.forceCollide(l=>h?h(l.size||0)+1:u+1)).force("charge",W.forceManyBody().strength(-15)).alphaDecay(.05).tick(1e4).on("tick",()=>{j(s)}).on("end",()=>{j(s);const l=I(s,m=>m.x-(h?h(m.size||0)+1:u+1))[0]||0,V=I(s,m=>m.y-(h?h(m.size||0)+1:u+1))[0]||0,q=I(s,m=>m.x+(h?h(m.size||0)+1:u+1))[1]||0,ue=I(s,m=>m.y+(h?h(m.size||0)+1:u+1))[1]||0;D([l,V,l<0?q-l:q,V<0?ue-V:ue])})})()},[o,u,te,ee,S,g,h]);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=>b?e.color&&r[k.indexOf(e.color)]===b?1:N:L.length!==0?L.indexOf(e.label)!==-1?.85:N:.85,[b,N,r,k,L]);return Z?d?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx("svg",{width:`${a}px`,height:`${c}px`,viewBox:`${d[0]>0?0:d[0]} ${d[1]>0?0:d[1]} ${a<d[2]?d[2]:a} ${c<d[3]?d[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),l=h?h(e.size||0):u,V=l>20&&(n||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:l,fill:s}),(V||H)&&e.size!==void 0&&e.size!==null&&t.jsxRuntimeExports.jsx("g",{children:t.jsxRuntimeExports.jsx("foreignObject",{y:0-l,x:0-l,width:2*l,height:2*l,children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col justify-center items-center h-full py-0 px-3",children:[n&&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(l/4),12),Math.max(Math.round(l*12/`${e.label}`.length),12),14)}px`,WebkitLineClamp:l*2<60?1:l*2<75?2:l*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(l/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:be.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:b,leftMargin:X=0,rightMargin:Y=0,height:y,width:n,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:d=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,h]=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=>{h(n||s[0].target.clientWidth||620),oe(y||s[0].target.clientHeight||480)});return R.current&&(oe(R.current.clientHeight||480),h(R.current.clientWidth||620),n||e.observe(R.current)),()=>e.disconnect()},[n,y]),t.jsxRuntimeExports.jsx("div",{className:`${D||"light"} flex ${n?"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"}`,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.${b?` ${b}`:""}`,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||b||P||z?t.jsxRuntimeExports.jsx(Me.GraphHeader,{styles:{title:j?.title,description:j?.description},classNames:{title:f?.title,description:f?.description},graphTitle:r,graphDescription:b,width:n,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:n,colorLegendTitle:H,colors:x||se.Colors[D].categoricalColors.colors,colorDomain:w||de.uniqBy(o.filter(e=>e.color),"color").map(e=>e.color),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:(n||g)&&(y||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.filter(e=>e.color),"color").map(e=>e.color),width:n||g,height:Math.max(d,y||(u?d?(n||g)*u>d?(n||g)*u:d:(n||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(n||g,y||(u?d?(n||g)*u>d?(n||g)*u:d:(n||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:n}):null]})})})})}exports.CirclePackingGraph=Re;exports.extent=I;
2
+ //# sourceMappingURL=index-CZLvTu6p.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index-D_n8aamX.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 uniqBy from 'lodash.uniqby';\r\nimport { useState, useRef, useEffect } from 'react';\r\nimport sum from 'lodash.sum';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport { 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\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 classNames?.graphContainer,\r\n )}\r\n style={{\r\n ...(styles?.graphContainer || {}),\r\n ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n }}\r\n id={graphID}\r\n ref={graphParentDiv}\r\n aria-label={\r\n ariaLabel ||\r\n `${\r\n graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n }This is a chart where data points are represented by circles, and their sizes reflect their values.${\r\n graphDescription ? ` ${graphDescription}` : ''\r\n }`\r\n }\r\n >\r\n <div\r\n className='flex grow'\r\n style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n >\r\n <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n {graphTitle || graphDescription || graphDownload || dataDownload ? (\r\n <GraphHeader\r\n styles={{\r\n title: styles?.title,\r\n description: styles?.description,\r\n }}\r\n classNames={{\r\n title: classNames?.title,\r\n description: classNames?.description,\r\n }}\r\n graphTitle={graphTitle}\r\n graphDescription={graphDescription}\r\n width={width}\r\n graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n dataDownload={\r\n dataDownload\r\n ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n ? data.map(d => d.data).filter(d => d !== undefined)\r\n : data.filter(d => d !== undefined)\r\n : null\r\n }\r\n />\r\n ) : null}\r\n <div className='grow flex flex-col justify-center gap-3 w-full'>\r\n {data.length === 0 ? (\r\n <EmptyState />\r\n ) : (\r\n <>\r\n {showColorScale && data.filter(el => el.color).length !== 0 ? (\r\n <ColorLegendWithMouseOver\r\n width={width}\r\n colorLegendTitle={colorLegendTitle}\r\n colors={\r\n (colors as string[] | undefined) || Colors[theme].categoricalColors.colors\r\n }\r\n colorDomain={\r\n colorDomain ||\r\n (uniqBy(\r\n data.filter(el => el.color),\r\n 'color',\r\n ).map(d => d.color) as string[])\r\n }\r\n setSelectedColor={setSelectedColor}\r\n showNAColor={\r\n showNAColor === undefined || showNAColor === null ? true : showNAColor\r\n }\r\n isCenter\r\n />\r\n ) : null}\r\n <div\r\n className='flex flex-col grow justify-center w-full leading-0'\r\n ref={graphDiv}\r\n aria-label='Graph area'\r\n >\r\n {(width || svgWidth) && (height || svgHeight) ? (\r\n <Graph\r\n data={data}\r\n colors={\r\n data.filter(el => el.color).length === 0\r\n ? colors\r\n ? [colors as string]\r\n : [Colors.primaryColors['blue-600']]\r\n : (colors as string[] | undefined) ||\r\n Colors[theme].categoricalColors.colors\r\n }\r\n colorDomain={\r\n data.filter(el => el.color).length === 0\r\n ? []\r\n : colorDomain ||\r\n (uniqBy(\r\n data.filter(el => el.color),\r\n 'color',\r\n ).map(d => d.color) as string[])\r\n }\r\n width={width || svgWidth}\r\n height={Math.max(\r\n minHeight,\r\n height ||\r\n (relativeHeight\r\n ? minHeight\r\n ? (width || svgWidth) * relativeHeight > minHeight\r\n ? (width || svgWidth) * relativeHeight\r\n : minHeight\r\n : (width || svgWidth) * relativeHeight\r\n : svgHeight),\r\n )}\r\n leftMargin={leftMargin}\r\n rightMargin={rightMargin}\r\n topMargin={topMargin}\r\n bottomMargin={bottomMargin}\r\n showLabels={showLabels}\r\n showValues={\r\n showValues !== false\r\n ? data.filter(el => el.size).length !== 0\r\n : (showValues as boolean)\r\n }\r\n selectedColor={selectedColor}\r\n suffix={suffix}\r\n prefix={prefix}\r\n tooltip={tooltip}\r\n onSeriesMouseOver={onSeriesMouseOver}\r\n highlightedDataPoints={highlightedDataPoints}\r\n onSeriesMouseClick={onSeriesMouseClick}\r\n theme={theme}\r\n radius={\r\n !radius\r\n ? (Math.min(\r\n width || svgWidth,\r\n height ||\r\n (relativeHeight\r\n ? minHeight\r\n ? (width || svgWidth) * relativeHeight > minHeight\r\n ? (width || svgWidth) * relativeHeight\r\n : minHeight\r\n : (width || svgWidth) * relativeHeight\r\n : svgHeight),\r\n ) *\r\n (data.filter(d => !checkIfNullOrUndefined(d.size)).length === 0\r\n ? 1\r\n : Math.max(\r\n ...data\r\n .map(d => d.size)\r\n .filter(d => d !== undefined && d !== null),\r\n ))) /\r\n (data.filter(d => !checkIfNullOrUndefined(d.size)).length === 0\r\n ? data.length\r\n : sum(data.filter(d => d.size).map(d => d.size)) * 1.25)\r\n : radius\r\n }\r\n maxRadiusValue={maxRadiusValue}\r\n resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\r\n detailsOnClick={detailsOnClick}\r\n styles={styles}\r\n classNames={classNames}\r\n 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]}
1
+ {"version":3,"file":"index-CZLvTu6p.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 uniqBy from 'lodash.uniqby';\r\nimport { useState, useRef, useEffect } from 'react';\r\nimport sum from 'lodash.sum';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport { 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\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 classNames?.graphContainer,\r\n )}\r\n style={{\r\n ...(styles?.graphContainer || {}),\r\n ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n }}\r\n id={graphID}\r\n ref={graphParentDiv}\r\n aria-label={\r\n ariaLabel ||\r\n `${\r\n graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n }This is a chart where data points are represented by circles, and their sizes reflect their values.${\r\n graphDescription ? ` ${graphDescription}` : ''\r\n }`\r\n }\r\n >\r\n <div\r\n className='flex grow'\r\n style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n >\r\n <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n {graphTitle || graphDescription || graphDownload || dataDownload ? (\r\n <GraphHeader\r\n styles={{\r\n title: styles?.title,\r\n description: styles?.description,\r\n }}\r\n classNames={{\r\n title: classNames?.title,\r\n description: classNames?.description,\r\n }}\r\n graphTitle={graphTitle}\r\n graphDescription={graphDescription}\r\n width={width}\r\n graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n dataDownload={\r\n dataDownload\r\n ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n ? data.map(d => d.data).filter(d => d !== undefined)\r\n : data.filter(d => d !== undefined)\r\n : null\r\n }\r\n />\r\n ) : null}\r\n <div className='grow flex flex-col justify-center gap-3 w-full'>\r\n {data.length === 0 ? (\r\n <EmptyState />\r\n ) : (\r\n <>\r\n {showColorScale && data.filter(el => el.color).length !== 0 ? (\r\n <ColorLegendWithMouseOver\r\n width={width}\r\n colorLegendTitle={colorLegendTitle}\r\n colors={\r\n (colors as string[] | undefined) || Colors[theme].categoricalColors.colors\r\n }\r\n colorDomain={\r\n colorDomain ||\r\n (uniqBy(\r\n data.filter(el => el.color),\r\n 'color',\r\n ).map(d => d.color) as string[])\r\n }\r\n setSelectedColor={setSelectedColor}\r\n showNAColor={\r\n showNAColor === undefined || showNAColor === null ? true : showNAColor\r\n }\r\n isCenter\r\n />\r\n ) : null}\r\n <div\r\n className='flex flex-col grow justify-center w-full leading-0'\r\n ref={graphDiv}\r\n aria-label='Graph area'\r\n >\r\n {(width || svgWidth) && (height || svgHeight) ? (\r\n <Graph\r\n data={data}\r\n colors={\r\n data.filter(el => el.color).length === 0\r\n ? colors\r\n ? [colors as string]\r\n : [Colors.primaryColors['blue-600']]\r\n : (colors as string[] | undefined) ||\r\n Colors[theme].categoricalColors.colors\r\n }\r\n colorDomain={\r\n data.filter(el => el.color).length === 0\r\n ? []\r\n : colorDomain ||\r\n (uniqBy(\r\n data.filter(el => el.color),\r\n 'color',\r\n ).map(d => d.color) as string[])\r\n }\r\n width={width || svgWidth}\r\n height={Math.max(\r\n minHeight,\r\n height ||\r\n (relativeHeight\r\n ? minHeight\r\n ? (width || svgWidth) * relativeHeight > minHeight\r\n ? (width || svgWidth) * relativeHeight\r\n : minHeight\r\n : (width || svgWidth) * relativeHeight\r\n : svgHeight),\r\n )}\r\n leftMargin={leftMargin}\r\n rightMargin={rightMargin}\r\n topMargin={topMargin}\r\n bottomMargin={bottomMargin}\r\n showLabels={showLabels}\r\n showValues={\r\n showValues !== false\r\n ? data.filter(el => el.size).length !== 0\r\n : (showValues as boolean)\r\n }\r\n selectedColor={selectedColor}\r\n suffix={suffix}\r\n prefix={prefix}\r\n tooltip={tooltip}\r\n onSeriesMouseOver={onSeriesMouseOver}\r\n highlightedDataPoints={highlightedDataPoints}\r\n onSeriesMouseClick={onSeriesMouseClick}\r\n theme={theme}\r\n radius={\r\n !radius\r\n ? (Math.min(\r\n width || svgWidth,\r\n height ||\r\n (relativeHeight\r\n ? minHeight\r\n ? (width || svgWidth) * relativeHeight > minHeight\r\n ? (width || svgWidth) * relativeHeight\r\n : minHeight\r\n : (width || svgWidth) * relativeHeight\r\n : svgHeight),\r\n ) *\r\n (data.filter(d => !checkIfNullOrUndefined(d.size)).length === 0\r\n ? 1\r\n : Math.max(\r\n ...data\r\n .map(d => d.size)\r\n .filter(d => d !== undefined && d !== null),\r\n ))) /\r\n (data.filter(d => !checkIfNullOrUndefined(d.size)).length === 0\r\n ? data.length\r\n : sum(data.filter(d => d.size).map(d => d.size)) * 1.25)\r\n : radius\r\n }\r\n maxRadiusValue={maxRadiusValue}\r\n resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\r\n detailsOnClick={detailsOnClick}\r\n styles={styles}\r\n classNames={classNames}\r\n 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]}
@@ -1,6 +1,6 @@
1
1
  import { j as a } from "./index-CHPV5EwG-BPSP-7Jg.js";
2
2
  import { Colors as g } from "./Colors.js";
3
- import { m as e } from "./proxy-DJxJg1kD.js";
3
+ import { m as e } from "./proxy-CkpFesk1.js";
4
4
  function y(c) {
5
5
  const { areaSettings: l, width: h, height: r, scale: o, animate: n, isInView: s } = c;
6
6
  return /* @__PURE__ */ a.jsx(a.Fragment, { children: l.map((t, i) => /* @__PURE__ */ a.jsx(e.g, { children: t.coordinates[0] === null && t.coordinates[1] === null ? null : /* @__PURE__ */ a.jsx(e.g, { children: /* @__PURE__ */ a.jsx(
@@ -74,4 +74,4 @@ export {
74
74
  y as H,
75
75
  p as a
76
76
  };
77
- //# sourceMappingURL=index-n_RI8T0n.js.map
77
+ //# sourceMappingURL=index-Cdcfp4nk.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index-n_RI8T0n.js","sources":["../src/Components/Elements/HighlightArea/index.tsx"],"sourcesContent":["import { NumberValue } from 'd3-scale';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n areaSettings: {\r\n coordinates: (Date | null | number)[];\r\n style?: React.CSSProperties;\r\n className?: string;\r\n color?: string;\r\n strokeWidth?: number;\r\n }[];\r\n width: number;\r\n height: number;\r\n scale: (value: Date | NumberValue) => number;\r\n animate: AnimateDataType;\r\n isInView: boolean;\r\n}\r\n\r\nexport function HighlightArea(props: Props) {\r\n const { areaSettings, width, height, scale, animate, isInView } = props;\r\n return (\r\n <>\r\n {areaSettings.map((d, i) => (\r\n <motion.g key={i}>\r\n {d.coordinates[0] === null && d.coordinates[1] === null ? null : (\r\n <motion.g>\r\n <motion.rect\r\n style={{\r\n fill: d.color || Colors.light.grays['gray-300'],\r\n strokeWidth: d.strokeWidth,\r\n ...(d.style || {}),\r\n }}\r\n className={d.className}\r\n y={0}\r\n height={height}\r\n variants={{\r\n initial: {\r\n width: 0,\r\n x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n opacity: 1,\r\n },\r\n whileInView: {\r\n width: d.coordinates[1]\r\n ? scale(d.coordinates[1]) - (d.coordinates[0] ? scale(d.coordinates[0]) : 0)\r\n : width - (d.coordinates[0] ? scale(d.coordinates[0]) : 0),\r\n x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n exit={{ opacity: 0, width: 0, transition: { duration: animate.duration } }}\r\n />\r\n </motion.g>\r\n )}\r\n </motion.g>\r\n ))}\r\n </>\r\n );\r\n}\r\n\r\ninterface ScatterPlotProps {\r\n areaSettings: {\r\n coordinates: (Date | null | number)[];\r\n style?: React.CSSProperties;\r\n className?: string;\r\n color?: string;\r\n strokeWidth?: number;\r\n }[];\r\n width: number;\r\n height: number;\r\n scaleX: (value: Date | NumberValue) => number;\r\n scaleY: (value: Date | NumberValue) => number;\r\n animate: AnimateDataType;\r\n isInView: boolean;\r\n}\r\n\r\nexport function HighlightAreaForScatterPlot(props: ScatterPlotProps) {\r\n const { areaSettings, width, height, scaleX, scaleY, animate, isInView } = props;\r\n return (\r\n <>\r\n {areaSettings.map((d, i) => (\r\n <motion.g key={`${i}`}>\r\n {d.coordinates.filter(el => el === null).length === 4 ? null : (\r\n <motion.g>\r\n <motion.rect\r\n style={{\r\n fill: d.color || Colors.light.grays['gray-300'],\r\n strokeWidth: d.strokeWidth,\r\n ...(d.style || {}),\r\n }}\r\n className={d.className}\r\n variants={{\r\n initial: {\r\n x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n width: 0,\r\n y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n height: 0,\r\n },\r\n whileInView: {\r\n x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n width: d.coordinates[1]\r\n ? scaleX(d.coordinates[1] as number) -\r\n (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0)\r\n : width - (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0),\r\n y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n height:\r\n d.coordinates[2] !== null\r\n ? scaleY(d.coordinates[2] as number) -\r\n (d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0)\r\n : height -\r\n (d.coordinates[3] ? height - scaleY(d.coordinates[3] as number) : 0),\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n exit={{\r\n opacity: 0,\r\n width: 0,\r\n height: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n />\r\n </motion.g>\r\n )}\r\n </motion.g>\r\n ))}\r\n </>\r\n );\r\n}\r\n"],"names":["HighlightArea","props","areaSettings","width","height","scale","animate","isInView","jsx","Fragment","d","motion","Colors","HighlightAreaForScatterPlot","scaleX","scaleY","i","el"],"mappings":";;;AAqBO,SAASA,EAAcC,GAAc;AAC1C,QAAM,EAAE,cAAAC,GAAc,OAAAC,GAAO,QAAAC,GAAQ,OAAAC,GAAO,SAAAC,GAAS,UAAAC,MAAaN;AAClE,SACEO,gBAAAA,EAAAA,IAAAC,EAAAA,UAAA,EACG,UAAAP,EAAa,IAAI,CAACQ,GAAG,MACpBF,gBAAAA,EAAAA,IAACG,EAAO,GAAP,EACE,UAAAD,EAAE,YAAY,CAAC,MAAM,QAAQA,EAAE,YAAY,CAAC,MAAM,OAAO,OACxDF,gBAAAA,EAAAA,IAACG,EAAO,GAAP,EACC,UAAAH,gBAAAA,EAAAA;AAAAA,IAACG,EAAO;AAAA,IAAP;AAAA,MACC,OAAO;AAAA,QACL,MAAMD,EAAE,SAASE,EAAO,MAAM,MAAM,UAAU;AAAA,QAC9C,aAAaF,EAAE;AAAA,QACf,GAAIA,EAAE,SAAS,CAAA;AAAA,MAAC;AAAA,MAElB,WAAWA,EAAE;AAAA,MACb,GAAG;AAAA,MACH,QAAAN;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,UACP,OAAO;AAAA,UACP,GAAGM,EAAE,YAAY,CAAC,IAAIL,EAAMK,EAAE,YAAY,CAAC,CAAC,IAAI;AAAA,UAChD,SAAS;AAAA,QAAA;AAAA,QAEX,aAAa;AAAA,UACX,OAAOA,EAAE,YAAY,CAAC,IAClBL,EAAMK,EAAE,YAAY,CAAC,CAAC,KAAKA,EAAE,YAAY,CAAC,IAAIL,EAAMK,EAAE,YAAY,CAAC,CAAC,IAAI,KACxEP,KAASO,EAAE,YAAY,CAAC,IAAIL,EAAMK,EAAE,YAAY,CAAC,CAAC,IAAI;AAAA,UAC1D,GAAGA,EAAE,YAAY,CAAC,IAAIL,EAAMK,EAAE,YAAY,CAAC,CAAC,IAAI;AAAA,UAChD,SAAS;AAAA,UACT,YAAY,EAAE,UAAUJ,EAAQ,SAAA;AAAA,QAAS;AAAA,MAC3C;AAAA,MAEF,SAAQ;AAAA,MACR,SAASC,IAAW,gBAAgB;AAAA,MACpC,MAAM,EAAE,SAAS,GAAG,OAAO,GAAG,YAAY,EAAE,UAAUD,EAAQ,SAAA,EAAS;AAAA,IAAE;AAAA,EAAA,EAC3E,CACF,EAAA,GA/BW,CAiCf,CACD,GACH;AAEJ;AAkBO,SAASO,EAA4BZ,GAAyB;AACnE,QAAM,EAAE,cAAAC,GAAc,OAAAC,GAAO,QAAAC,GAAQ,QAAAU,GAAQ,QAAAC,GAAQ,SAAAT,GAAS,UAAAC,MAAaN;AAC3E,SACEO,gBAAAA,EAAAA,IAAAC,EAAAA,UAAA,EACG,YAAa,IAAI,CAACC,GAAGM,MACpBR,gBAAAA,EAAAA,IAACG,EAAO,GAAP,EACE,UAAAD,EAAE,YAAY,OAAO,CAAAO,MAAMA,MAAO,IAAI,EAAE,WAAW,IAAI,OACtDT,gBAAAA,EAAAA,IAACG,EAAO,GAAP,EACC,UAAAH,gBAAAA,EAAAA;AAAAA,IAACG,EAAO;AAAA,IAAP;AAAA,MACC,OAAO;AAAA,QACL,MAAMD,EAAE,SAASE,EAAO,MAAM,MAAM,UAAU;AAAA,QAC9C,aAAaF,EAAE;AAAA,QACf,GAAIA,EAAE,SAAS,CAAA;AAAA,MAAC;AAAA,MAElB,WAAWA,EAAE;AAAA,MACb,UAAU;AAAA,QACR,SAAS;AAAA,UACP,GAAGA,EAAE,YAAY,CAAC,IAAII,EAAOJ,EAAE,YAAY,CAAC,CAAW,IAAI;AAAA,UAC3D,OAAO;AAAA,UACP,GAAGA,EAAE,YAAY,CAAC,IAAIK,EAAOL,EAAE,YAAY,CAAC,CAAW,IAAI;AAAA,UAC3D,QAAQ;AAAA,QAAA;AAAA,QAEV,aAAa;AAAA,UACX,GAAGA,EAAE,YAAY,CAAC,IAAII,EAAOJ,EAAE,YAAY,CAAC,CAAW,IAAI;AAAA,UAC3D,OAAOA,EAAE,YAAY,CAAC,IAClBI,EAAOJ,EAAE,YAAY,CAAC,CAAW,KAChCA,EAAE,YAAY,CAAC,IAAII,EAAOJ,EAAE,YAAY,CAAC,CAAW,IAAI,KACzDP,KAASO,EAAE,YAAY,CAAC,IAAII,EAAOJ,EAAE,YAAY,CAAC,CAAW,IAAI;AAAA,UACrE,GAAGA,EAAE,YAAY,CAAC,IAAIK,EAAOL,EAAE,YAAY,CAAC,CAAW,IAAI;AAAA,UAC3D,QACEA,EAAE,YAAY,CAAC,MAAM,OACjBK,EAAOL,EAAE,YAAY,CAAC,CAAW,KAChCA,EAAE,YAAY,CAAC,IAAIK,EAAOL,EAAE,YAAY,CAAC,CAAW,IAAI,KACzDN,KACCM,EAAE,YAAY,CAAC,IAAIN,IAASW,EAAOL,EAAE,YAAY,CAAC,CAAW,IAAI;AAAA,UACxE,YAAY,EAAE,UAAUJ,EAAQ,SAAA;AAAA,QAAS;AAAA,MAC3C;AAAA,MAEF,SAAQ;AAAA,MACR,SAASC,IAAW,gBAAgB;AAAA,MACpC,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY,EAAE,UAAUD,EAAQ,SAAA;AAAA,MAAS;AAAA,IAC3C;AAAA,EAAA,GAEJ,EAAA,GA1CW,GAAGU,CAAC,EA4CnB,CACD,EAAA,CACH;AAEJ;"}
1
+ {"version":3,"file":"index-Cdcfp4nk.js","sources":["../src/Components/Elements/HighlightArea/index.tsx"],"sourcesContent":["import { NumberValue } from 'd3-scale';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n areaSettings: {\r\n coordinates: (Date | null | number)[];\r\n style?: React.CSSProperties;\r\n className?: string;\r\n color?: string;\r\n strokeWidth?: number;\r\n }[];\r\n width: number;\r\n height: number;\r\n scale: (value: Date | NumberValue) => number;\r\n animate: AnimateDataType;\r\n isInView: boolean;\r\n}\r\n\r\nexport function HighlightArea(props: Props) {\r\n const { areaSettings, width, height, scale, animate, isInView } = props;\r\n return (\r\n <>\r\n {areaSettings.map((d, i) => (\r\n <motion.g key={i}>\r\n {d.coordinates[0] === null && d.coordinates[1] === null ? null : (\r\n <motion.g>\r\n <motion.rect\r\n style={{\r\n fill: d.color || Colors.light.grays['gray-300'],\r\n strokeWidth: d.strokeWidth,\r\n ...(d.style || {}),\r\n }}\r\n className={d.className}\r\n y={0}\r\n height={height}\r\n variants={{\r\n initial: {\r\n width: 0,\r\n x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n opacity: 1,\r\n },\r\n whileInView: {\r\n width: d.coordinates[1]\r\n ? scale(d.coordinates[1]) - (d.coordinates[0] ? scale(d.coordinates[0]) : 0)\r\n : width - (d.coordinates[0] ? scale(d.coordinates[0]) : 0),\r\n x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n exit={{ opacity: 0, width: 0, transition: { duration: animate.duration } }}\r\n />\r\n </motion.g>\r\n )}\r\n </motion.g>\r\n ))}\r\n </>\r\n );\r\n}\r\n\r\ninterface ScatterPlotProps {\r\n areaSettings: {\r\n coordinates: (Date | null | number)[];\r\n style?: React.CSSProperties;\r\n className?: string;\r\n color?: string;\r\n strokeWidth?: number;\r\n }[];\r\n width: number;\r\n height: number;\r\n scaleX: (value: Date | NumberValue) => number;\r\n scaleY: (value: Date | NumberValue) => number;\r\n animate: AnimateDataType;\r\n isInView: boolean;\r\n}\r\n\r\nexport function HighlightAreaForScatterPlot(props: ScatterPlotProps) {\r\n const { areaSettings, width, height, scaleX, scaleY, animate, isInView } = props;\r\n return (\r\n <>\r\n {areaSettings.map((d, i) => (\r\n <motion.g key={`${i}`}>\r\n {d.coordinates.filter(el => el === null).length === 4 ? null : (\r\n <motion.g>\r\n <motion.rect\r\n style={{\r\n fill: d.color || Colors.light.grays['gray-300'],\r\n strokeWidth: d.strokeWidth,\r\n ...(d.style || {}),\r\n }}\r\n className={d.className}\r\n variants={{\r\n initial: {\r\n x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n width: 0,\r\n y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n height: 0,\r\n },\r\n whileInView: {\r\n x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n width: d.coordinates[1]\r\n ? scaleX(d.coordinates[1] as number) -\r\n (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0)\r\n : width - (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0),\r\n y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n height:\r\n d.coordinates[2] !== null\r\n ? scaleY(d.coordinates[2] as number) -\r\n (d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0)\r\n : height -\r\n (d.coordinates[3] ? height - scaleY(d.coordinates[3] as number) : 0),\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n exit={{\r\n opacity: 0,\r\n width: 0,\r\n height: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n />\r\n </motion.g>\r\n )}\r\n </motion.g>\r\n ))}\r\n </>\r\n );\r\n}\r\n"],"names":["HighlightArea","props","areaSettings","width","height","scale","animate","isInView","jsx","Fragment","d","motion","Colors","HighlightAreaForScatterPlot","scaleX","scaleY","i","el"],"mappings":"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"}
@@ -3,7 +3,7 @@ import { u as me } from "./index-CaAIPGZo.js";
3
3
  import { memo as ve, useRef as he, useState as y, useMemo as ce, useEffect as pe, useCallback as T } from "react";
4
4
  import { s as ye } from "./index-D7ltPi18.js";
5
5
  import { o as be } from "./index-BLizQDlg.js";
6
- import { X as Me } from "./Modal-CUU6ZK3U.js";
6
+ import { X as Me } from "./Modal-DVVwpKhP.js";
7
7
  import { y as we } from "./Spinner-C85UF28E.js";
8
8
  import { T as je } from "./Tooltip-DyM5snqx.js";
9
9
  import { n as Ce } from "./numberFormattingFunction-14YCbkN2.js";
@@ -432,4 +432,4 @@ export {
432
432
  tt as C,
433
433
  ie as e
434
434
  };
435
- //# sourceMappingURL=index-BVnYktl4.js.map
435
+ //# sourceMappingURL=index-DGAaLNu9.js.map