@undp/data-viz 1.4.1 → 1.4.2

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 (189) 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.js +4 -4
  49. package/dist/GriddedGraphsFromConfig.cjs +1 -1
  50. package/dist/GriddedGraphsFromConfig.js +1 -1
  51. package/dist/HeatMap.cjs +1 -1
  52. package/dist/HeatMap.js +10 -10
  53. package/dist/Histogram.cjs +1 -1
  54. package/dist/Histogram.js +1 -1
  55. package/dist/LineChartWithConfidenceInterval.cjs +1 -1
  56. package/dist/LineChartWithConfidenceInterval.js +21 -21
  57. package/dist/{Modal-CUU6ZK3U.js → Modal-DVVwpKhP.js} +2 -2
  58. package/dist/{Modal-CUU6ZK3U.js.map → Modal-DVVwpKhP.js.map} +1 -1
  59. package/dist/{Modal-C_dl0EtQ.cjs → Modal-tXZlLE5s.cjs} +4 -4
  60. package/dist/{Modal-C_dl0EtQ.cjs.map → Modal-tXZlLE5s.cjs.map} +1 -1
  61. package/dist/MultiGraphDashboard.cjs +1 -1
  62. package/dist/MultiGraphDashboard.js +3 -3
  63. package/dist/MultiGraphDashboardFromConfig.cjs +1 -1
  64. package/dist/MultiGraphDashboardFromConfig.js +1 -1
  65. package/dist/MultiGraphDashboardWideToLongFormat.cjs +1 -1
  66. package/dist/MultiGraphDashboardWideToLongFormat.js +3 -3
  67. package/dist/MultiGraphDashboardWideToLongFormatFromConfig.cjs +1 -1
  68. package/dist/MultiGraphDashboardWideToLongFormatFromConfig.js +1 -1
  69. package/dist/MultiLineAltChart.cjs +1 -1
  70. package/dist/MultiLineAltChart.js +21 -21
  71. package/dist/MultiLineChart.cjs +1 -1
  72. package/dist/MultiLineChart.js +19 -19
  73. package/dist/ParetoChart.cjs +1 -1
  74. package/dist/ParetoChart.js +12 -12
  75. package/dist/PerformanceIntensiveMultiGraphDashboard.cjs +1 -1
  76. package/dist/PerformanceIntensiveMultiGraphDashboard.js +3 -3
  77. package/dist/PerformanceIntensiveMultiGraphDashboardFromConfig.cjs +1 -1
  78. package/dist/PerformanceIntensiveMultiGraphDashboardFromConfig.js +1 -1
  79. package/dist/PerformanceIntensiveScrollStory.cjs +1 -1
  80. package/dist/PerformanceIntensiveScrollStory.js +2 -2
  81. package/dist/RadarChart.cjs +1 -1
  82. package/dist/RadarChart.js +8 -8
  83. package/dist/{ReferenceLine-CuFMk0cI.cjs → ReferenceLine-CFVBBN__.cjs} +2 -2
  84. package/dist/{ReferenceLine-CuFMk0cI.cjs.map → ReferenceLine-CFVBBN__.cjs.map} +1 -1
  85. package/dist/{ReferenceLine-C1GpoG9d.js → ReferenceLine-CfAW3vKJ.js} +2 -2
  86. package/dist/{ReferenceLine-C1GpoG9d.js.map → ReferenceLine-CfAW3vKJ.js.map} +1 -1
  87. package/dist/{RegressionLine-BFwDCTUU.js → RegressionLine-mH7UKOPi.js} +3 -3
  88. package/dist/{RegressionLine-BFwDCTUU.js.map → RegressionLine-mH7UKOPi.js.map} +1 -1
  89. package/dist/{RegressionLine-7_rKTHN_.cjs → RegressionLine-xKdiJ8sw.cjs} +2 -2
  90. package/dist/{RegressionLine-7_rKTHN_.cjs.map → RegressionLine-xKdiJ8sw.cjs.map} +1 -1
  91. package/dist/SankeyChart.cjs +1 -1
  92. package/dist/SankeyChart.js +4 -4
  93. package/dist/ScatterPlot.cjs +1 -1
  94. package/dist/ScatterPlot.js +13 -13
  95. package/dist/ScrollStory.cjs +1 -1
  96. package/dist/ScrollStory.js +2 -2
  97. package/dist/SimpleLineChart.cjs +1 -1
  98. package/dist/SimpleLineChart.js +20 -20
  99. package/dist/SingleGraphDashboard.cjs +1 -1
  100. package/dist/SingleGraphDashboard.js +4 -4
  101. package/dist/SingleGraphDashboardFromConfig.cjs +1 -1
  102. package/dist/SingleGraphDashboardFromConfig.js +1 -1
  103. package/dist/SingleGraphDashboardGeoHubMapsFromConfig.cjs +1 -1
  104. package/dist/SingleGraphDashboardGeoHubMapsFromConfig.js +1 -1
  105. package/dist/SingleGraphDashboardThreeDGraphs.cjs +1 -1
  106. package/dist/SingleGraphDashboardThreeDGraphs.js +3 -3
  107. package/dist/SingleGraphDashboardThreeDGraphsFromConfig.cjs +1 -1
  108. package/dist/SingleGraphDashboardThreeDGraphsFromConfig.js +1 -1
  109. package/dist/SlopeChart.cjs +1 -1
  110. package/dist/SlopeChart.js +7 -7
  111. package/dist/StripChart.cjs +1 -1
  112. package/dist/StripChart.js +9 -9
  113. package/dist/ThreeDGlobe.cjs +1 -1
  114. package/dist/ThreeDGlobe.js +2 -2
  115. package/dist/TreeMapGraph.cjs +1 -1
  116. package/dist/TreeMapGraph.js +4 -4
  117. package/dist/UnitChart.cjs +1 -1
  118. package/dist/UnitChart.js +3 -3
  119. package/dist/{XAxesLabels-DQFo_z2R.js → XAxesLabels-CaV2q-6H.js} +2 -2
  120. package/dist/{XAxesLabels-DQFo_z2R.js.map → XAxesLabels-CaV2q-6H.js.map} +1 -1
  121. package/dist/{XAxesLabels-CJMQbfVy.cjs → XAxesLabels-OjBNl_lS.cjs} +2 -2
  122. package/dist/{XAxesLabels-CJMQbfVy.cjs.map → XAxesLabels-OjBNl_lS.cjs.map} +1 -1
  123. package/dist/{YAxesLabels-H5-002X5.js → YAxesLabels-CPGZjmZJ.js} +2 -2
  124. package/dist/{YAxesLabels-H5-002X5.js.map → YAxesLabels-CPGZjmZJ.js.map} +1 -1
  125. package/dist/{YAxesLabels-BXLTX7AI.cjs → YAxesLabels-D8IydyZj.cjs} +2 -2
  126. package/dist/{YAxesLabels-BXLTX7AI.cjs.map → YAxesLabels-D8IydyZj.cjs.map} +1 -1
  127. package/dist/{checkIfMultiple-Do4kADNr.cjs → checkIfMultiple-BXbHUCWM.cjs} +6 -6
  128. package/dist/{checkIfMultiple-Do4kADNr.cjs.map → checkIfMultiple-BXbHUCWM.cjs.map} +1 -1
  129. package/dist/{checkIfMultiple-CYp3vADF.js → checkIfMultiple-ChTJk2Tk.js} +5 -5
  130. package/dist/{checkIfMultiple-CYp3vADF.js.map → checkIfMultiple-ChTJk2Tk.js.map} +1 -1
  131. package/dist/{customArea-CaxScFmW.js → customArea-B-dWU0zZ.js} +2 -2
  132. package/dist/{customArea-CaxScFmW.js.map → customArea-B-dWU0zZ.js.map} +1 -1
  133. package/dist/{customArea-BYNyxAkm.cjs → customArea-CK768gCn.cjs} +2 -2
  134. package/dist/{customArea-BYNyxAkm.cjs.map → customArea-CK768gCn.cjs.map} +1 -1
  135. package/dist/{fetchAndParseData-Bcmr659B.js → fetchAndParseData-4gsYTy6_.js} +3 -3
  136. package/dist/fetchAndParseData-4gsYTy6_.js.map +1 -0
  137. package/dist/{fetchAndParseData-DmgQtB9n.cjs → fetchAndParseData-CQyVGCul.cjs} +6 -6
  138. package/dist/fetchAndParseData-CQyVGCul.cjs.map +1 -0
  139. package/dist/fetchAndParseData.cjs +1 -1
  140. package/dist/fetchAndParseData.js +1 -1
  141. package/dist/index-BW8iNx7E.cjs +10 -0
  142. package/dist/index-BW8iNx7E.cjs.map +1 -0
  143. package/dist/index-CNvov0eg.js +122 -0
  144. package/dist/index-CNvov0eg.js.map +1 -0
  145. package/dist/{index-D_n8aamX.cjs → index-CZLvTu6p.cjs} +2 -2
  146. package/dist/{index-D_n8aamX.cjs.map → index-CZLvTu6p.cjs.map} +1 -1
  147. package/dist/{index-n_RI8T0n.js → index-Cdcfp4nk.js} +2 -2
  148. package/dist/{index-n_RI8T0n.js.map → index-Cdcfp4nk.js.map} +1 -1
  149. package/dist/{index-BVnYktl4.js → index-DGAaLNu9.js} +2 -2
  150. package/dist/{index-BVnYktl4.js.map → index-DGAaLNu9.js.map} +1 -1
  151. package/dist/{index-CylX-pWB.cjs → index-DNj994Pv.cjs} +2 -2
  152. package/dist/{index-CylX-pWB.cjs.map → index-DNj994Pv.cjs.map} +1 -1
  153. package/dist/index.cjs +1 -1
  154. package/dist/index.js +3 -3
  155. package/dist/proxy-BHRoeZgd.cjs +2 -0
  156. package/dist/proxy-BHRoeZgd.cjs.map +1 -0
  157. package/dist/{proxy-DJxJg1kD.js → proxy-CkpFesk1.js} +4123 -4075
  158. package/dist/proxy-CkpFesk1.js.map +1 -0
  159. package/dist/style.css +1 -1
  160. package/dist/transformData.cjs +1 -1
  161. package/dist/transformData.js +2 -2
  162. package/dist/{transformDataForGraphFromFile-D9G3ToQf.cjs → transformDataForGraphFromFile-B1A0AS-Z.cjs} +2 -2
  163. package/dist/{transformDataForGraphFromFile-D9G3ToQf.cjs.map → transformDataForGraphFromFile-B1A0AS-Z.cjs.map} +1 -1
  164. package/dist/{transformDataForGraphFromFile-CA0rw80A.js → transformDataForGraphFromFile-BCjsizvb.js} +2 -2
  165. package/dist/{transformDataForGraphFromFile-CA0rw80A.js.map → transformDataForGraphFromFile-BCjsizvb.js.map} +1 -1
  166. package/dist/{use-in-view-BCmzDU2O.cjs → use-in-view-sQJZ_xDO.cjs} +2 -2
  167. package/dist/use-in-view-sQJZ_xDO.cjs.map +1 -0
  168. package/dist/{use-in-view-BAHrBy6b.js → use-in-view-yS6jzJAp.js} +2 -2
  169. package/dist/use-in-view-yS6jzJAp.js.map +1 -0
  170. package/dist/x-BBpi7a_7-Dz2vKSfu.cjs +27 -0
  171. package/dist/x-BBpi7a_7-Dz2vKSfu.cjs.map +1 -0
  172. package/dist/x-BBpi7a_7-WVdj1j6r.js +106 -0
  173. package/dist/x-BBpi7a_7-WVdj1j6r.js.map +1 -0
  174. package/package.json +50 -51
  175. package/dist/fetchAndParseData-Bcmr659B.js.map +0 -1
  176. package/dist/fetchAndParseData-DmgQtB9n.cjs.map +0 -1
  177. package/dist/index-BxAUvrua.js +0 -120
  178. package/dist/index-BxAUvrua.js.map +0 -1
  179. package/dist/index-DVOJ7vxH.cjs +0 -10
  180. package/dist/index-DVOJ7vxH.cjs.map +0 -1
  181. package/dist/proxy-DJxJg1kD.js.map +0 -1
  182. package/dist/proxy-PQd2AItT.cjs +0 -2
  183. package/dist/proxy-PQd2AItT.cjs.map +0 -1
  184. package/dist/use-in-view-BAHrBy6b.js.map +0 -1
  185. package/dist/use-in-view-BCmzDU2O.cjs.map +0 -1
  186. package/dist/x-CnsEH4Ox-CGGXQl4M.cjs +0 -27
  187. package/dist/x-CnsEH4Ox-CGGXQl4M.cjs.map +0 -1
  188. package/dist/x-CnsEH4Ox-DDvAJndW.js +0 -101
  189. package/dist/x-CnsEH4Ox-DDvAJndW.js.map +0 -1
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./fetchAndParseData-DmgQtB9n.cjs");require("handlebars");exports.fetchAndParseCSV=e.fetchAndParseCSV;exports.fetchAndParseCSVFromTextBlob=e.fetchAndParseCSVFromTextBlob;exports.fetchAndParseJSON=e.fetchAndParseJSON;exports.fetchAndParseMultipleDataSources=e.fetchAndParseMultipleDataSources;exports.fetchAndTransformDataFromAPI=e.fetchAndTransformDataFromAPI;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./fetchAndParseData-CQyVGCul.cjs");require("handlebars");exports.fetchAndParseCSV=e.fetchAndParseCSV;exports.fetchAndParseCSVFromTextBlob=e.fetchAndParseCSVFromTextBlob;exports.fetchAndParseJSON=e.fetchAndParseJSON;exports.fetchAndParseMultipleDataSources=e.fetchAndParseMultipleDataSources;exports.fetchAndTransformDataFromAPI=e.fetchAndTransformDataFromAPI;
2
2
  //# sourceMappingURL=fetchAndParseData.cjs.map
@@ -1,4 +1,4 @@
1
- import { b as s, d as t, f, c as o, a as c } from "./fetchAndParseData-Bcmr659B.js";
1
+ import { b as s, d as t, f, c as o, a as c } from "./fetchAndParseData-4gsYTy6_.js";
2
2
  import "handlebars";
3
3
  export {
4
4
  s as fetchAndParseCSV,
@@ -0,0 +1,10 @@
1
+ "use strict";const y=require("./index-CHPV5EwG-DDoeWRVt.cjs"),s=require("react"),C=require("./proxy-BHRoeZgd.cjs");function I(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(r,e,o.get?o:{enumerable:!0,get:()=>t[e]})}}return r.default=t,Object.freeze(r)}const M=I(s);class S extends M.Component{getSnapshotBeforeUpdate(r){const e=this.props.childRef.current;if(e&&r.isPresent&&!this.props.isPresent){const o=e.offsetParent,m=C.isHTMLElement(o)&&o.offsetWidth||0,n=this.props.sizeRef.current;n.height=e.offsetHeight||0,n.width=e.offsetWidth||0,n.top=e.offsetTop,n.left=e.offsetLeft,n.right=m-n.width-n.left}return null}componentDidUpdate(){}render(){return this.props.children}}function T({children:t,isPresent:r,anchorX:e,root:o}){const m=s.useId(),n=s.useRef(null),p=s.useRef({width:0,height:0,top:0,left:0,right:0}),{nonce:g}=s.useContext(C.MotionConfigContext);return s.useInsertionEffect(()=>{const{width:E,height:i,top:j,left:c,right:f}=p.current;if(r||!n.current||!E||!i)return;const d=e==="left"?`left: ${c}`:`right: ${f}`;n.current.dataset.motionPopId=m;const l=document.createElement("style");g&&(l.nonce=g);const a=o??document.head;return a.appendChild(l),l.sheet&&l.sheet.insertRule(`
2
+ [data-motion-pop-id="${m}"] {
3
+ position: absolute !important;
4
+ width: ${E}px !important;
5
+ height: ${i}px !important;
6
+ ${d}px !important;
7
+ top: ${j}px !important;
8
+ }
9
+ `),()=>{a.contains(l)&&a.removeChild(l)}},[r]),y.jsxRuntimeExports.jsx(S,{isPresent:r,childRef:n,sizeRef:p,children:M.cloneElement(t,{ref:n})})}const _=({children:t,initial:r,isPresent:e,onExitComplete:o,custom:m,presenceAffectsLayout:n,mode:p,anchorX:g,root:E})=>{const i=C.useConstant(A),j=s.useId();let c=!0,f=s.useMemo(()=>(c=!1,{id:j,initial:r,isPresent:e,custom:m,onExitComplete:d=>{i.set(d,!0);for(const l of i.values())if(!l)return;o&&o()},register:d=>(i.set(d,!1),()=>i.delete(d))}),[e,i,o]);return n&&c&&(f={...f}),s.useMemo(()=>{i.forEach((d,l)=>i.set(l,!1))},[e]),M.useEffect(()=>{!e&&!i.size&&o&&o()},[e]),p==="popLayout"&&(t=y.jsxRuntimeExports.jsx(T,{isPresent:e,anchorX:g,root:E,children:t})),y.jsxRuntimeExports.jsx(C.PresenceContext.Provider,{value:f,children:t})};function A(){return new Map}const w=t=>t.key||"";function z(t){const r=[];return s.Children.forEach(t,e=>{s.isValidElement(e)&&r.push(e)}),r}const q=({children:t,custom:r,initial:e=!0,onExitComplete:o,presenceAffectsLayout:m=!0,mode:n="sync",propagate:p=!1,anchorX:g="left",root:E})=>{const[i,j]=C.usePresence(p),c=s.useMemo(()=>z(t),[t]),f=p&&!i?[]:c.map(w),d=s.useRef(!0),l=s.useRef(c),a=C.useConstant(()=>new Map),[L,O]=s.useState(c),[x,b]=s.useState(c);C.useIsomorphicLayoutEffect(()=>{d.current=!1,l.current=c;for(let h=0;h<x.length;h++){const u=w(x[h]);f.includes(u)?a.delete(u):a.get(u)!==!0&&a.set(u,!1)}},[x,f.length,f.join("-")]);const P=[];if(c!==L){let h=[...c];for(let u=0;u<x.length;u++){const R=x[u],v=w(R);f.includes(v)||(h.splice(u,0,R),P.push(R))}return n==="wait"&&P.length&&(h=P),b(z(h)),O(c),null}process.env.NODE_ENV!=="production"&&n==="wait"&&x.length>1&&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.`);const{forceRender:k}=s.useContext(C.LayoutGroupContext);return y.jsxRuntimeExports.jsx(y.jsxRuntimeExports.Fragment,{children:x.map(h=>{const u=w(h),R=p&&!i?!1:c===x||f.includes(u),v=()=>{if(a.has(u))a.set(u,!0);else return;let $=!0;a.forEach(D=>{D||($=!1)}),$&&(k?.(),b(l.current),p&&j?.(),o&&o())};return y.jsxRuntimeExports.jsx(_,{isPresent:R,initial:!d.current||e?void 0:!1,custom:r,presenceAffectsLayout:m,mode:n,root:E,onExitComplete:R?void 0:v,anchorX:g,children:h},u)})})};exports.AnimatePresence=q;
10
+ //# sourceMappingURL=index-BW8iNx7E.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index-BW8iNx7E.cjs","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":"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","x_google_ignoreList":[0,1,2,3]}
@@ -0,0 +1,122 @@
1
+ import { j as y } from "./index-CHPV5EwG-BPSP-7Jg.js";
2
+ import * as M from "react";
3
+ import { useId as k, useRef as P, useContext as A, useInsertionEffect as K, useMemo as j, Children as N, isValidElement as S, useState as z } from "react";
4
+ import { M as U, i as V, u as I, P as X, a as _, b as B, L as F } from "./proxy-CkpFesk1.js";
5
+ class G extends M.Component {
6
+ getSnapshotBeforeUpdate(l) {
7
+ const e = this.props.childRef.current;
8
+ if (e && l.isPresent && !this.props.isPresent) {
9
+ const o = e.offsetParent, p = V(o) && o.offsetWidth || 0, t = this.props.sizeRef.current;
10
+ t.height = e.offsetHeight || 0, t.width = e.offsetWidth || 0, t.top = e.offsetTop, t.left = e.offsetLeft, t.right = p - t.width - t.left;
11
+ }
12
+ return null;
13
+ }
14
+ /**
15
+ * Required with getSnapshotBeforeUpdate to stop React complaining.
16
+ */
17
+ componentDidUpdate() {
18
+ }
19
+ render() {
20
+ return this.props.children;
21
+ }
22
+ }
23
+ function O({ children: i, isPresent: l, anchorX: e, root: o }) {
24
+ const p = k(), t = P(null), h = P({
25
+ width: 0,
26
+ height: 0,
27
+ top: 0,
28
+ left: 0,
29
+ right: 0
30
+ }), { nonce: C } = A(U);
31
+ return K(() => {
32
+ const { width: x, height: n, top: w, left: s, right: f } = h.current;
33
+ if (l || !t.current || !x || !n)
34
+ return;
35
+ const u = e === "left" ? `left: ${s}` : `right: ${f}`;
36
+ t.current.dataset.motionPopId = p;
37
+ const c = document.createElement("style");
38
+ C && (c.nonce = C);
39
+ const a = o ?? document.head;
40
+ return a.appendChild(c), c.sheet && c.sheet.insertRule(`
41
+ [data-motion-pop-id="${p}"] {
42
+ position: absolute !important;
43
+ width: ${x}px !important;
44
+ height: ${n}px !important;
45
+ ${u}px !important;
46
+ top: ${w}px !important;
47
+ }
48
+ `), () => {
49
+ a.contains(c) && a.removeChild(c);
50
+ };
51
+ }, [l]), y.jsx(G, { isPresent: l, childRef: t, sizeRef: h, children: M.cloneElement(i, { ref: t }) });
52
+ }
53
+ const Y = ({ children: i, initial: l, isPresent: e, onExitComplete: o, custom: p, presenceAffectsLayout: t, mode: h, anchorX: C, root: x }) => {
54
+ const n = I(q), w = k();
55
+ let s = !0, f = j(() => (s = !1, {
56
+ id: w,
57
+ initial: l,
58
+ isPresent: e,
59
+ custom: p,
60
+ onExitComplete: (u) => {
61
+ n.set(u, !0);
62
+ for (const c of n.values())
63
+ if (!c)
64
+ return;
65
+ o && o();
66
+ },
67
+ register: (u) => (n.set(u, !1), () => n.delete(u))
68
+ }), [e, n, o]);
69
+ return t && s && (f = { ...f }), j(() => {
70
+ n.forEach((u, c) => n.set(c, !1));
71
+ }, [e]), M.useEffect(() => {
72
+ !e && !n.size && o && o();
73
+ }, [e]), h === "popLayout" && (i = y.jsx(O, { isPresent: e, anchorX: C, root: x, children: i })), y.jsx(X.Provider, { value: f, children: i });
74
+ };
75
+ function q() {
76
+ return /* @__PURE__ */ new Map();
77
+ }
78
+ const E = (i) => i.key || "";
79
+ function b(i) {
80
+ const l = [];
81
+ return N.forEach(i, (e) => {
82
+ S(e) && l.push(e);
83
+ }), l;
84
+ }
85
+ const ee = ({ children: i, custom: l, initial: e = !0, onExitComplete: o, presenceAffectsLayout: p = !0, mode: t = "sync", propagate: h = !1, anchorX: C = "left", root: x }) => {
86
+ const [n, w] = _(h), s = j(() => b(i), [i]), f = h && !n ? [] : s.map(E), u = P(!0), c = P(s), a = I(() => /* @__PURE__ */ new Map()), [T, D] = z(s), [m, L] = z(s);
87
+ B(() => {
88
+ u.current = !1, c.current = s;
89
+ for (let d = 0; d < m.length; d++) {
90
+ const r = E(m[d]);
91
+ f.includes(r) ? a.delete(r) : a.get(r) !== !0 && a.set(r, !1);
92
+ }
93
+ }, [m, f.length, f.join("-")]);
94
+ const R = [];
95
+ if (s !== T) {
96
+ let d = [...s];
97
+ for (let r = 0; r < m.length; r++) {
98
+ const g = m[r], v = E(g);
99
+ f.includes(v) || (d.splice(r, 0, g), R.push(g));
100
+ }
101
+ return t === "wait" && R.length && (d = R), L(b(d)), D(s), null;
102
+ }
103
+ process.env.NODE_ENV !== "production" && t === "wait" && m.length > 1 && 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.`);
104
+ const { forceRender: W } = A(F);
105
+ return y.jsx(y.Fragment, { children: m.map((d) => {
106
+ const r = E(d), g = h && !n ? !1 : s === m || f.includes(r), v = () => {
107
+ if (a.has(r))
108
+ a.set(r, !0);
109
+ else
110
+ return;
111
+ let $ = !0;
112
+ a.forEach((H) => {
113
+ H || ($ = !1);
114
+ }), $ && (W?.(), L(c.current), h && w?.(), o && o());
115
+ };
116
+ return y.jsx(Y, { isPresent: g, initial: !u.current || e ? void 0 : !1, custom: l, presenceAffectsLayout: p, mode: t, root: x, onExitComplete: g ? void 0 : v, anchorX: C, children: d }, r);
117
+ }) });
118
+ };
119
+ export {
120
+ ee as A
121
+ };
122
+ //# sourceMappingURL=index-CNvov0eg.js.map
@@ -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":"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","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":"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"}
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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"}