@undp/data-viz 1.4.11 → 1.4.12

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 (5) hide show
  1. package/dist/ThreeDGlobe.cjs +1 -1
  2. package/dist/ThreeDGlobe.cjs.map +1 -1
  3. package/dist/ThreeDGlobe.js +73 -71
  4. package/dist/ThreeDGlobe.js.map +1 -1
  5. package/package.json +1 -1
package/dist/ThreeDGlobe.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),a=require("react"),pe=require("./Spinner-DA6Z5E4n.cjs"),he=require("react-globe.gl"),me=require("./index-BXns0-ng.cjs"),xe=require("three"),fe=require("./Modal-tXZlLE5s.cjs"),de=require("./Typography-k-kOjICQ.cjs"),ye=require("./Tooltip-n8z5bfav.cjs"),je=require("./numberFormattingFunction-02t-wJta.cjs"),ve=require("./index-BW_-wD2k.cjs"),be=require("./string2HTML-D2Avudmb.cjs"),Ee=require("./ordinal-BOeNbyae.cjs"),Ce=require("./threshold-DNsSUf8Q.cjs"),Re=require("./GraphHeader.cjs"),we=require("./GraphFooter.cjs"),De=require("./fetchAndParseData-CQyVGCul.cjs"),O=require("./Colors.cjs"),Se=require("./getUniqValue-CHqgSss5.cjs"),ke=require("./getJenks-TWQvbuOz.cjs");function Ne(y){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(y){for(const c in y)if(c!=="default"){const u=Object.getOwnPropertyDescriptor(y,c);Object.defineProperty(d,c,u.get?u:{enumerable:!0,get:()=>y[c]})}}return d.default=y,Object.freeze(d)}const z=Ne(xe);function Me(y){const{width:d,autoRotate:c,data:u,enableZoom:T,categorical:M,colorDomain:g,colors:s,globeMaterial:i,height:Z,polygonData:Y,mapProperty:p,mapBorderColor:P,atmosphereColor:I,tooltip:U,styles:b,classNames:K,mapNoDataColor:h,colorLegendTitle:H,showColorScale:Q,hoverStrokeColor:ee,detailsOnClick:j,onSeriesMouseClick:E,onSeriesMouseOver:m,resetSelectionOnDoubleClick:q,highlightedIds:W,scale:x,globeOffset:C,polygonAltitude:A,centerLng:$,centerLat:F,atmosphereAltitude:V,globeCurvatureResolution:te,lightColor:G,fogSettings:D}=y,n=a.useRef(void 0),[S,L]=a.useState(void 0),[re,_]=a.useState(!(d<680)),[J,oe]=a.useState({x:0,y:0}),[R,se]=a.useState(void 0),X=M?Ee.ordinal().domain(g).range(s):Ce.threshold().domain(g).range(s);a.useEffect(()=>{n.current&&(n.current.controls().enableZoom=T)},[T]),a.useEffect(()=>{n.current&&(R?n.current.controls().autoRotate=!1:(n.current.controls().autoRotate=c!==0,n.current.controls().autoRotateSpeed=c))},[R,c]),a.useEffect(()=>{const e=n.current?.renderer().domElement;if(!e)return;const r=o=>{oe({x:o.clientX,y:o.clientY})};return e.addEventListener("mousemove",r),()=>e.removeEventListener("mousemove",r)},[]),a.useEffect(()=>{n.current&&n.current.pointOfView({lat:F,lng:$,altitude:x},1e3)},[x,$,F]);const ne=i||new z.MeshBasicMaterial({color:"#FFF"});return a.useEffect(()=>{if(!n.current)return;const e=n.current.scene();e.children.filter(o=>o.type==="DirectionalLight"||o.type==="AmbientLight").forEach(o=>e.remove(o));const r=new z.AmbientLight(G,.2);e.add(r),setTimeout(()=>{(e.children[3]?.children[0]?.children[4]?.children||[]).forEach(f=>{const v=f.children[1];v&&(v.renderOrder=2)})},300),D&&(e.fog=new z.Fog(D.color,D.near,D.far))},[G,x,D]),t.jsxRuntimeExports.jsxs("div",{className:"relative",children:[t.jsxRuntimeExports.jsx(he,{ref:n,globeOffset:C,lineHoverPrecision:0,polygonsData:Y,polygonAltitude:e=>W.includes(e?.properties?.[p])?.1:e?.properties?.[p]===R?.id?.01:A,polygonCapColor:e=>{const r=e?.properties?.[p],o=u.find(f=>f.id===r)?.x;return o!=null?X(o):h},polygonSideColor:e=>{const r=e?.properties?.[p],o=u.find(v=>v.id===r)?.x,f=o!=null?X(o):h;return W.includes(e?.properties?.[p])?f:"rgba(100,100,100,0)"},polygonStrokeColor:e=>e?.properties?.[p]===R?.id?ee:P,onPolygonClick:e=>{const r=e?.properties?.[p]?u.find(o=>o.id===e?.properties?.[p]):void 0;(E||j)&&(me.isEqual(S,r)&&q&&r?(L(void 0),E?.(void 0)):(L(r),E?.(r))),L(r),E?.(r)},onPolygonHover:e=>{const r=e?.properties?.[p]?u.find(o=>o.id===e?.properties?.[p]):void 0;se(r),m?.(r)},atmosphereColor:I,atmosphereAltitude:V,globeCurvatureResolution:te,globeMaterial:ne,backgroundColor:"rgba(0, 0, 0, 0)",polygonsTransitionDuration:100,onGlobeReady:()=>{if(n.current){n.current.pointOfView({lat:F,lng:$});const e=n.current.scene();setTimeout(()=>{e.children.filter(w=>w.type==="DirectionalLight").map(w=>{e.remove(w)});const f=new z.AmbientLight(G,.2);e.add(f),(e.children[3]?.children[0]?.children[4]?.children||[]).forEach(w=>{const k=w.children[1];k.renderOrder=2})},300);const r=new z.DirectionalLight(16777215,.1),o=n.current.camera();r.position.set(0,0,1),o.add(r),e.add(o)}}}),Q===!1?null:t.jsxRuntimeExports.jsx("div",{className:"absolute left-4 bottom-4",children:re?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx("div",{style:{backgroundColor:"rgba(240,240,240, 0.7)",border:"1px solid var(--gray-400)",borderRadius:"999px",width:"24px",height:"24px",padding:"3px",cursor:"pointer",zIndex:10,position:"absolute",right:"-0.75rem",top:"-0.75rem"},onClick:()=>{_(!1)},children:t.jsxRuntimeExports.jsx(ve.X,{})}),t.jsxRuntimeExports.jsxs("div",{className:"p-2",style:{backgroundColor:"rgba(240,240,240, 0.7)",width:M?void 0:"340px"},children:[H&&H!==""?t.jsxRuntimeExports.jsx(de.u,{size:"xs",marginBottom:"xs",className:"p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300",style:{display:"-webkit-box",WebkitLineClamp:"1",WebkitBoxOrient:"vertical"},children:H}):null,M?t.jsxRuntimeExports.jsx("div",{className:"flex flex-col gap-3",children:g.map((e,r)=>t.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 items-center",children:[t.jsxRuntimeExports.jsx("div",{className:"w-2 h-2 rounded-full",style:{backgroundColor:s[r%s.length]}}),t.jsxRuntimeExports.jsx(de.u,{size:"sm",marginBottom:"none",leading:"none",children:e})]},r))}):t.jsxRuntimeExports.jsx("svg",{width:"100%",viewBox:"0 0 320 30",direction:"ltr",children:t.jsxRuntimeExports.jsxs("g",{children:[g.map((e,r)=>t.jsxRuntimeExports.jsxs("g",{className:"cursor-pointer",children:[t.jsxRuntimeExports.jsx("rect",{x:r*320/s.length+1,y:1,width:320/s.length-2,height:8,style:{fill:s[r],stroke:s[r]}}),t.jsxRuntimeExports.jsx("text",{x:(r+1)*320/s.length,y:25,className:"fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",style:{textAnchor:"middle"},children:je.numberFormattingFunction(e,"NA")})]},r)),t.jsxRuntimeExports.jsx("g",{children:t.jsxRuntimeExports.jsx("rect",{x:g.length*320/s.length+1,y:1,width:320/s.length-2,height:8,style:{fill:s[g.length],stroke:s[g.length]}})})]})})]})]}):t.jsxRuntimeExports.jsx("button",{type:"button",className:"mb-0 border-0 bg-transparent p-0 self-start",onClick:()=>{_(!0)},children:t.jsxRuntimeExports.jsx("div",{className:"items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500",children:"Show Legend"})})}),R&&U?t.jsxRuntimeExports.jsx(ye.Tooltip,{data:R,body:U,xPos:J.x,yPos:J.y,backgroundStyle:b?.tooltip,className:K?.tooltip}):null,j&&S!==void 0?t.jsxRuntimeExports.jsx(fe.X,{open:S!==void 0,onClose:()=>{L(void 0)},children:t.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof j=="string"?{__html:be.string2HTML(j,S)}:void 0,children:typeof j=="function"?j(S):null})}):null]})}function qe(y){const{data:d,mapData:c="https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json",graphTitle:u,colors:T,sources:M,graphDescription:g,height:s,width:i,footNote:Z="The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.",colorDomain:Y,colorLegendTitle:p,scaleType:P="threshold",padding:I,mapNoDataColor:U=O.Colors.light.graphNoData,backgroundColor:b=!1,mapBorderColor:K=O.Colors.light.grays["gray-500"],relativeHeight:h,tooltip:H,graphID:Q,mapProperty:ee="ISO3",dataDownload:j=!1,language:E="en",minHeight:m=0,theme:q="light",ariaLabel:W,styles:x,classNames:C,autoRotate:A=!0,enableZoom:$=!0,globeMaterial:F,centerPoint:V=[0,0],atmosphereColor:te="#999",showColorScale:G=!0,resetSelectionOnDoubleClick:D=!0,detailsOnClick:n,onSeriesMouseOver:S,onSeriesMouseClick:L,highlightedIds:re=[],scale:_=1,globeOffset:J=[0,0],polygonAltitude:oe=.01,globeCurvatureResolution:R=4,atmosphereAltitude:se=.15,lightColor:X="#dce9fe",fogSettings:ne}=y,[e,r]=a.useState(void 0),[o,f]=a.useState(0),[v,w]=a.useState(0),k=a.useRef(null);a.useEffect(()=>{const l=new ResizeObserver(B=>{f(i||B[0].target.clientWidth||760),w(s||B[0].target.clientHeight||480)});return k.current&&(w(k.current.clientHeight||480),f(k.current.clientWidth||760),i||l.observe(k.current)),()=>l.disconnect()},[i,s]),a.useEffect(()=>{typeof c=="string"?De.fetchAndParseJSON(c).then(B=>{if(c==="https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json"){const ue=B.features.map(N=>{if(N.geometry.type==="Polygon"){const ae=[...N.geometry.coordinates[0]].reverse(),le={...N.geometry,coordinates:[ae]};return{...N,geometry:le}}const ce=[];N.geometry.coordinates.forEach(ae=>{const le=[...ae[0]].reverse();ce.push([le])});const ge={...N.geometry,coordinates:ce};return{...N,geometry:ge}});r(ue)}else r(B.features)}):r(c.features)},[c]);const ie=Y||(P==="categorical"?Se.getUniqValue(d,"x"):ke.getJenks(d.map(l=>l.x),T?.length||4));return t.jsxRuntimeExports.jsx("div",{className:`${q||"light"} flex ${i?"w-fit grow-0":"w-full grow"}`,dir:E==="he"||E==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:t.mo(`${b?b===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${E||"en"}`,C?.graphContainer),style:{...x?.graphContainer||{},...b&&b!==!0?{backgroundColor:b}:{}},id:Q,"aria-label":W||`${u?`The graph shows ${u}. `:""}This is a map.${g?` ${g}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:b?I||"1rem":I||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[u||g||j?t.jsxRuntimeExports.jsx(Re.GraphHeader,{styles:{title:x?.title,description:x?.description},classNames:{title:C?.title,description:C?.description},graphTitle:u,graphDescription:g,width:i,graphDownload:void 0,dataDownload:j?d.map(l=>l.data).filter(l=>l!==void 0).length>0?d.map(l=>l.data).filter(l=>l!==void 0):d.filter(l=>l!==void 0):null}):null,t.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:k,"aria-label":"Map area",children:(i||o)&&(s||v)&&e?t.jsxRuntimeExports.jsx(Me,{data:d,globeOffset:J,polygonData:e,colorDomain:ie,width:i||o,height:Math.max(m,s||(h?m?(i||o)*h>m?(i||o)*h:m:(i||o)*h:v)),colors:T||(P==="categorical"?O.Colors[q].sequentialColors[`neutralColorsx0${ie.length}`]:O.Colors[q].sequentialColors[`neutralColorsx0${ie.length+1}`]),mapNoDataColor:U,categorical:P==="categorical",mapBorderColor:K,tooltip:H,mapProperty:ee,styles:x,classNames:C,autoRotate:A===!0?1.5:A===!1?0:A,enableZoom:$,globeMaterial:F,atmosphereColor:te,colorLegendTitle:p,showColorScale:G,hoverStrokeColor:q==="light"?O.Colors.light.grays["gray-700"]:O.Colors.light.grays["gray-300"],highlightedIds:re,resetSelectionOnDoubleClick:D,detailsOnClick:n,onSeriesMouseOver:S,onSeriesMouseClick:L,scale:_,polygonAltitude:oe,centerLat:V[0],centerLng:V[1],atmosphereAltitude:se,globeCurvatureResolution:R,lightColor:X,fogSettings:ne}):t.jsxRuntimeExports.jsx("div",{style:{height:`${Math.max(m,s||(h?m?(i||o)*h>m?(i||o)*h:m:(i||o)*h:v))}px`},className:"flex items-center justify-center",children:t.jsxRuntimeExports.jsx(pe.y,{"aria-label":"Loading graph"})})}),M||Z?t.jsxRuntimeExports.jsx(we.GraphFooter,{styles:{footnote:x?.footnote,source:x?.source},classNames:{footnote:C?.footnote,source:C?.source},sources:M,footNote:Z,width:i}):null]})})})})}exports.ThreeDGlobe=qe;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),a=require("react"),pe=require("./Spinner-DA6Z5E4n.cjs"),he=require("react-globe.gl"),me=require("./index-BXns0-ng.cjs"),xe=require("three"),fe=require("./Modal-tXZlLE5s.cjs"),de=require("./Typography-k-kOjICQ.cjs"),ye=require("./Tooltip-n8z5bfav.cjs"),je=require("./numberFormattingFunction-02t-wJta.cjs"),ve=require("./index-BW_-wD2k.cjs"),be=require("./string2HTML-D2Avudmb.cjs"),Ee=require("./ordinal-BOeNbyae.cjs"),Ce=require("./threshold-DNsSUf8Q.cjs"),Re=require("./GraphHeader.cjs"),we=require("./GraphFooter.cjs"),De=require("./fetchAndParseData-CQyVGCul.cjs"),O=require("./Colors.cjs"),Se=require("./getUniqValue-CHqgSss5.cjs"),ke=require("./getJenks-TWQvbuOz.cjs");function Ne(y){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(y){for(const c in y)if(c!=="default"){const u=Object.getOwnPropertyDescriptor(y,c);Object.defineProperty(d,c,u.get?u:{enumerable:!0,get:()=>y[c]})}}return d.default=y,Object.freeze(d)}const z=Ne(xe);function Me(y){const{width:d,autoRotate:c,data:u,enableZoom:T,categorical:M,colorDomain:g,colors:s,globeMaterial:i,height:I,polygonData:Y,mapProperty:p,mapBorderColor:P,atmosphereColor:U,tooltip:W,styles:b,classNames:K,mapNoDataColor:h,colorLegendTitle:H,showColorScale:Q,hoverStrokeColor:ee,detailsOnClick:j,onSeriesMouseClick:E,onSeriesMouseOver:m,resetSelectionOnDoubleClick:q,highlightedIds:V,scale:x,globeOffset:C,polygonAltitude:A,centerLng:$,centerLat:F,atmosphereAltitude:_,globeCurvatureResolution:te,lightColor:G,fogSettings:D}=y,n=a.useRef(void 0),[S,L]=a.useState(void 0),[re,J]=a.useState(!(d<680)),[X,oe]=a.useState({x:0,y:0}),[R,se]=a.useState(void 0),Z=M?Ee.ordinal().domain(g).range(s):Ce.threshold().domain(g).range(s);a.useEffect(()=>{n.current&&(n.current.controls().enableZoom=T)},[T]),a.useEffect(()=>{n.current&&(R?n.current.controls().autoRotate=!1:(n.current.controls().autoRotate=c!==0,n.current.controls().autoRotateSpeed=c))},[R,c]),a.useEffect(()=>{const e=n.current?.renderer().domElement;if(!e)return;const r=o=>{oe({x:o.clientX,y:o.clientY})};return e.addEventListener("mousemove",r),()=>e.removeEventListener("mousemove",r)},[]),a.useEffect(()=>{n.current&&n.current.pointOfView({lat:F,lng:$,altitude:x},1e3)},[x,$,F]);const ne=i||new z.MeshBasicMaterial({color:"#FFF"});return a.useEffect(()=>{if(!n.current)return;const e=n.current.scene();e.children.filter(o=>o.type==="DirectionalLight"||o.type==="AmbientLight").forEach(o=>e.remove(o));const r=new z.AmbientLight(G,.2);e.add(r),setTimeout(()=>{(e.children[3]?.children[0]?.children[4]?.children||[]).forEach(f=>{const v=f.children[1];v&&(v.renderOrder=2)})},300),D&&(e.fog=new z.Fog(D.color,D.near,D.far))},[G,x,D]),t.jsxRuntimeExports.jsxs("div",{className:"relative",children:[t.jsxRuntimeExports.jsx(he,{ref:n,height:I,width:d,globeOffset:C,lineHoverPrecision:0,polygonsData:Y,polygonAltitude:e=>V.includes(e?.properties?.[p])?.1:e?.properties?.[p]===R?.id?.01:A,polygonCapColor:e=>{const r=e?.properties?.[p],o=u.find(f=>f.id===r)?.x;return o!=null?Z(o):h},polygonSideColor:e=>{const r=e?.properties?.[p],o=u.find(v=>v.id===r)?.x,f=o!=null?Z(o):h;return V.includes(e?.properties?.[p])?f:"rgba(100,100,100,0)"},polygonStrokeColor:e=>e?.properties?.[p]===R?.id?ee:P,onPolygonClick:e=>{const r=e?.properties?.[p]?u.find(o=>o.id===e?.properties?.[p]):void 0;(E||j)&&(me.isEqual(S,r)&&q&&r?(L(void 0),E?.(void 0)):(L(r),E?.(r))),L(r),E?.(r)},onPolygonHover:e=>{const r=e?.properties?.[p]?u.find(o=>o.id===e?.properties?.[p]):void 0;se(r),m?.(r)},atmosphereColor:U,atmosphereAltitude:_,globeCurvatureResolution:te,globeMaterial:ne,backgroundColor:"rgba(0, 0, 0, 0)",polygonsTransitionDuration:100,onGlobeReady:()=>{if(n.current){n.current.pointOfView({lat:F,lng:$});const e=n.current.scene();setTimeout(()=>{e.children.filter(w=>w.type==="DirectionalLight").map(w=>{e.remove(w)});const f=new z.AmbientLight(G,.2);e.add(f),(e.children[3]?.children[0]?.children[4]?.children||[]).forEach(w=>{const k=w.children[1];k.renderOrder=2})},300);const r=new z.DirectionalLight(16777215,.1),o=n.current.camera();r.position.set(0,0,1),o.add(r),e.add(o)}}}),Q===!1?null:t.jsxRuntimeExports.jsx("div",{className:"absolute left-4 bottom-4",children:re?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx("div",{style:{backgroundColor:"rgba(240,240,240, 0.7)",border:"1px solid var(--gray-400)",borderRadius:"999px",width:"24px",height:"24px",padding:"3px",cursor:"pointer",zIndex:10,position:"absolute",right:"-0.75rem",top:"-0.75rem"},onClick:()=>{J(!1)},children:t.jsxRuntimeExports.jsx(ve.X,{})}),t.jsxRuntimeExports.jsxs("div",{className:"p-2",style:{backgroundColor:"rgba(240,240,240, 0.7)",width:M?void 0:"340px"},children:[H&&H!==""?t.jsxRuntimeExports.jsx(de.u,{size:"xs",marginBottom:"xs",className:"p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300",style:{display:"-webkit-box",WebkitLineClamp:"1",WebkitBoxOrient:"vertical"},children:H}):null,M?t.jsxRuntimeExports.jsx("div",{className:"flex flex-col gap-3",children:g.map((e,r)=>t.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 items-center",children:[t.jsxRuntimeExports.jsx("div",{className:"w-2 h-2 rounded-full",style:{backgroundColor:s[r%s.length]}}),t.jsxRuntimeExports.jsx(de.u,{size:"sm",marginBottom:"none",leading:"none",children:e})]},r))}):t.jsxRuntimeExports.jsx("svg",{width:"100%",viewBox:"0 0 320 30",direction:"ltr",children:t.jsxRuntimeExports.jsxs("g",{children:[g.map((e,r)=>t.jsxRuntimeExports.jsxs("g",{className:"cursor-pointer",children:[t.jsxRuntimeExports.jsx("rect",{x:r*320/s.length+1,y:1,width:320/s.length-2,height:8,style:{fill:s[r],stroke:s[r]}}),t.jsxRuntimeExports.jsx("text",{x:(r+1)*320/s.length,y:25,className:"fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",style:{textAnchor:"middle"},children:je.numberFormattingFunction(e,"NA")})]},r)),t.jsxRuntimeExports.jsx("g",{children:t.jsxRuntimeExports.jsx("rect",{x:g.length*320/s.length+1,y:1,width:320/s.length-2,height:8,style:{fill:s[g.length],stroke:s[g.length]}})})]})})]})]}):t.jsxRuntimeExports.jsx("button",{type:"button",className:"mb-0 border-0 bg-transparent p-0 self-start",onClick:()=>{J(!0)},children:t.jsxRuntimeExports.jsx("div",{className:"items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500",children:"Show Legend"})})}),R&&W?t.jsxRuntimeExports.jsx(ye.Tooltip,{data:R,body:W,xPos:X.x,yPos:X.y,backgroundStyle:b?.tooltip,className:K?.tooltip}):null,j&&S!==void 0?t.jsxRuntimeExports.jsx(fe.X,{open:S!==void 0,onClose:()=>{L(void 0)},children:t.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof j=="string"?{__html:be.string2HTML(j,S)}:void 0,children:typeof j=="function"?j(S):null})}):null]})}function qe(y){const{data:d,mapData:c="https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json",graphTitle:u,colors:T,sources:M,graphDescription:g,height:s,width:i,footNote:I="The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.",colorDomain:Y,colorLegendTitle:p,scaleType:P="threshold",padding:U,mapNoDataColor:W=O.Colors.light.graphNoData,backgroundColor:b=!1,mapBorderColor:K=O.Colors.light.grays["gray-500"],relativeHeight:h,tooltip:H,graphID:Q,mapProperty:ee="ISO3",dataDownload:j=!1,language:E="en",minHeight:m=0,theme:q="light",ariaLabel:V,styles:x,classNames:C,autoRotate:A=!0,enableZoom:$=!0,globeMaterial:F,centerPoint:_=[0,0],atmosphereColor:te="#999",showColorScale:G=!0,resetSelectionOnDoubleClick:D=!0,detailsOnClick:n,onSeriesMouseOver:S,onSeriesMouseClick:L,highlightedIds:re=[],scale:J=1,globeOffset:X=[0,0],polygonAltitude:oe=.01,globeCurvatureResolution:R=4,atmosphereAltitude:se=.15,lightColor:Z="#dce9fe",fogSettings:ne}=y,[e,r]=a.useState(void 0),[o,f]=a.useState(0),[v,w]=a.useState(0),k=a.useRef(null);a.useEffect(()=>{const l=new ResizeObserver(B=>{f(i||B[0].target.clientWidth||760),w(s||B[0].target.clientHeight||480)});return k.current&&(w(k.current.clientHeight||480),f(k.current.clientWidth||760),i||l.observe(k.current)),()=>l.disconnect()},[i,s]),a.useEffect(()=>{typeof c=="string"?De.fetchAndParseJSON(c).then(B=>{if(c==="https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json"){const ue=B.features.map(N=>{if(N.geometry.type==="Polygon"){const ae=[...N.geometry.coordinates[0]].reverse(),le={...N.geometry,coordinates:[ae]};return{...N,geometry:le}}const ce=[];N.geometry.coordinates.forEach(ae=>{const le=[...ae[0]].reverse();ce.push([le])});const ge={...N.geometry,coordinates:ce};return{...N,geometry:ge}});r(ue)}else r(B.features)}):r(c.features)},[c]);const ie=Y||(P==="categorical"?Se.getUniqValue(d,"x"):ke.getJenks(d.map(l=>l.x),T?.length||4));return t.jsxRuntimeExports.jsx("div",{className:`${q||"light"} flex ${i?"w-fit grow-0":"w-full grow"}`,dir:E==="he"||E==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:t.mo(`${b?b===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${E||"en"}`,C?.graphContainer),style:{...x?.graphContainer||{},...b&&b!==!0?{backgroundColor:b}:{}},id:Q,"aria-label":V||`${u?`The graph shows ${u}. `:""}This is a map.${g?` ${g}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:b?U||"1rem":U||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[u||g||j?t.jsxRuntimeExports.jsx(Re.GraphHeader,{styles:{title:x?.title,description:x?.description},classNames:{title:C?.title,description:C?.description},graphTitle:u,graphDescription:g,width:i,graphDownload:void 0,dataDownload:j?d.map(l=>l.data).filter(l=>l!==void 0).length>0?d.map(l=>l.data).filter(l=>l!==void 0):d.filter(l=>l!==void 0):null}):null,t.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:k,"aria-label":"Map area",children:(i||o)&&(s||v)&&e?t.jsxRuntimeExports.jsx(Me,{data:d,globeOffset:X,polygonData:e,colorDomain:ie,width:i||o,height:Math.max(m,s||(h?m?(i||o)*h>m?(i||o)*h:m:(i||o)*h:v)),colors:T||(P==="categorical"?O.Colors[q].sequentialColors[`neutralColorsx0${ie.length}`]:O.Colors[q].sequentialColors[`neutralColorsx0${ie.length+1}`]),mapNoDataColor:W,categorical:P==="categorical",mapBorderColor:K,tooltip:H,mapProperty:ee,styles:x,classNames:C,autoRotate:A===!0?1.5:A===!1?0:A,enableZoom:$,globeMaterial:F,atmosphereColor:te,colorLegendTitle:p,showColorScale:G,hoverStrokeColor:q==="light"?O.Colors.light.grays["gray-700"]:O.Colors.light.grays["gray-300"],highlightedIds:re,resetSelectionOnDoubleClick:D,detailsOnClick:n,onSeriesMouseOver:S,onSeriesMouseClick:L,scale:J,polygonAltitude:oe,centerLat:_[0],centerLng:_[1],atmosphereAltitude:se,globeCurvatureResolution:R,lightColor:Z,fogSettings:ne}):t.jsxRuntimeExports.jsx("div",{style:{height:`${Math.max(m,s||(h?m?(i||o)*h>m?(i||o)*h:m:(i||o)*h:v))}px`},className:"flex items-center justify-center",children:t.jsxRuntimeExports.jsx(pe.y,{"aria-label":"Loading graph"})})}),M||I?t.jsxRuntimeExports.jsx(we.GraphFooter,{styles:{footnote:x?.footnote,source:x?.source},classNames:{footnote:C?.footnote,source:C?.source},sources:M,footNote:I,width:i}):null]})})})})}exports.ThreeDGlobe=qe;
2
2
  //# sourceMappingURL=ThreeDGlobe.cjs.map
package/dist/ThreeDGlobe.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThreeDGlobe.cjs","sources":["../src/Components/Graphs/Maps/ThreeDGlobe/Graph.tsx","../src/Components/Graphs/Maps/ThreeDGlobe/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport Globe, { GlobeMethods } from 'react-globe.gl';\r\nimport isEqual from 'fast-deep-equal';\r\nimport { useEffect, useRef, useState } from 'react';\r\nimport { scaleOrdinal, scaleThreshold } from 'd3-scale';\r\nimport * as THREE from 'three';\r\nimport { Modal } from '@undp/design-system-react/Modal';\r\nimport { P } from '@undp/design-system-react/Typography';\r\n\r\nimport { ChoroplethMapDataType, ClassNameObject, FogDataType, StyleObject } from '@/Types';\r\nimport { Tooltip } from '@/Components/Elements/Tooltip';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n width: number;\r\n data: ChoroplethMapDataType[];\r\n autoRotate: number;\r\n enableZoom: boolean;\r\n categorical: boolean;\r\n colorDomain: number[] | string[];\r\n colors: string[];\r\n height: number;\r\n globeMaterial?: THREE.Material;\r\n polygonData: any;\r\n mapProperty: string;\r\n mapBorderColor: string;\r\n atmosphereColor: string;\r\n tooltip?: string | ((_d: any) => React.ReactNode);\r\n styles?: StyleObject;\r\n classNames?: ClassNameObject;\r\n onSeriesMouseOver?: (_d: any) => void;\r\n onSeriesMouseClick?: (_d: any) => void;\r\n mapNoDataColor: string;\r\n colorLegendTitle?: string;\r\n showColorScale: boolean;\r\n hoverStrokeColor: string;\r\n detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n resetSelectionOnDoubleClick: boolean;\r\n highlightedIds: string[];\r\n scale: number;\r\n globeOffset: [number, number];\r\n polygonAltitude: number;\r\n centerLng: number;\r\n centerLat: number;\r\n atmosphereAltitude: number;\r\n globeCurvatureResolution: number;\r\n lightColor: string;\r\n fogSettings?: FogDataType;\r\n}\r\n\r\nfunction Graph(props: Props) {\r\n const {\r\n width,\r\n autoRotate,\r\n data,\r\n enableZoom,\r\n categorical,\r\n colorDomain,\r\n colors,\r\n globeMaterial,\r\n height,\r\n polygonData,\r\n mapProperty,\r\n mapBorderColor,\r\n atmosphereColor,\r\n tooltip,\r\n styles,\r\n classNames,\r\n mapNoDataColor,\r\n colorLegendTitle,\r\n showColorScale,\r\n hoverStrokeColor,\r\n detailsOnClick,\r\n onSeriesMouseClick,\r\n onSeriesMouseOver,\r\n resetSelectionOnDoubleClick,\r\n highlightedIds,\r\n scale,\r\n globeOffset,\r\n polygonAltitude,\r\n centerLng,\r\n centerLat,\r\n atmosphereAltitude,\r\n globeCurvatureResolution,\r\n lightColor,\r\n fogSettings,\r\n } = props;\r\n const globeEl = useRef<GlobeMethods | undefined>(undefined);\r\n const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n const [showLegend, setShowLegend] = useState(!(width < 680));\r\n const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\r\n const [mouseOverData, setMouseOverData] = useState<ChoroplethMapDataType | undefined>(undefined);\r\n const colorScale = categorical\r\n ? scaleOrdinal<number | string, string>().domain(colorDomain).range(colors)\r\n : scaleThreshold<number, string>()\r\n .domain(colorDomain as number[])\r\n .range(colors);\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n globeEl.current.controls().enableZoom = enableZoom;\r\n }\r\n }, [enableZoom]);\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n if (mouseOverData) {\r\n globeEl.current.controls().autoRotate = false;\r\n } else {\r\n globeEl.current.controls().autoRotate = autoRotate === 0 ? false : true;\r\n globeEl.current.controls().autoRotateSpeed = autoRotate;\r\n }\r\n }\r\n }, [mouseOverData, autoRotate]);\r\n\r\n useEffect(() => {\r\n const canvas = globeEl.current?.renderer().domElement;\r\n if (!canvas) return;\r\n\r\n const handleMouseMove = (e: MouseEvent) => {\r\n setMousePos({ x: e.clientX, y: e.clientY });\r\n };\r\n\r\n canvas.addEventListener('mousemove', handleMouseMove);\r\n return () => canvas.removeEventListener('mousemove', handleMouseMove);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n globeEl.current.pointOfView({ lat: centerLat, lng: centerLng, altitude: scale }, 1000);\r\n }\r\n }, [scale, centerLng, centerLat]);\r\n const materials =\r\n globeMaterial ||\r\n new THREE.MeshBasicMaterial({\r\n color: '#FFF',\r\n });\r\n useEffect(() => {\r\n if (!globeEl.current) return;\r\n\r\n const scene = globeEl.current.scene();\r\n scene.children\r\n .filter(d => d.type === 'DirectionalLight' || d.type === 'AmbientLight')\r\n .forEach(d => scene.remove(d));\r\n const ambientLight = new THREE.AmbientLight(lightColor, 0.2);\r\n scene.add(ambientLight);\r\n setTimeout(() => {\r\n const polygons = scene.children[3]?.children[0]?.children[4]?.children || [];\r\n polygons.forEach(d => {\r\n const line = d.children[1];\r\n if (line) line.renderOrder = 2;\r\n });\r\n }, 300);\r\n if (fogSettings)\r\n scene.fog = new THREE.Fog(fogSettings.color, fogSettings.near, fogSettings.far);\r\n }, [lightColor, scale, fogSettings]);\r\n return (\r\n <div className='relative'>\r\n <Globe\r\n ref={globeEl}\r\n globeOffset={globeOffset}\r\n lineHoverPrecision={0}\r\n polygonsData={polygonData}\r\n polygonAltitude={(polygon: any) =>\r\n highlightedIds.includes(polygon?.properties?.[mapProperty])\r\n ? 0.1\r\n : polygon?.properties?.[mapProperty] === mouseOverData?.id\r\n ? 0.01\r\n : polygonAltitude\r\n }\r\n polygonCapColor={(polygon: any) => {\r\n const id = polygon?.properties?.[mapProperty];\r\n const val = data.find(el => el.id === id)?.x;\r\n if (val !== undefined && val !== null) {\r\n return colorScale(val as any);\r\n }\r\n return mapNoDataColor;\r\n }}\r\n polygonSideColor={(polygon: any) => {\r\n const id = polygon?.properties?.[mapProperty];\r\n const val = data.find(el => el.id === id)?.x;\r\n const color = val !== undefined && val !== null ? colorScale(val as any) : mapNoDataColor;\r\n return highlightedIds.includes(polygon?.properties?.[mapProperty])\r\n ? color\r\n : 'rgba(100,100,100,0)';\r\n }}\r\n polygonStrokeColor={(polygon: any) =>\r\n polygon?.properties?.[mapProperty] === mouseOverData?.id\r\n ? hoverStrokeColor\r\n : mapBorderColor\r\n }\r\n onPolygonClick={(polygon: any) => {\r\n const clickedData = polygon?.properties?.[mapProperty]\r\n ? data.find(el => el.id === polygon?.properties?.[mapProperty])\r\n : undefined;\r\n if (onSeriesMouseClick || detailsOnClick) {\r\n if (\r\n isEqual(mouseClickData, clickedData) &&\r\n resetSelectionOnDoubleClick &&\r\n clickedData\r\n ) {\r\n setMouseClickData(undefined);\r\n onSeriesMouseClick?.(undefined);\r\n } else {\r\n setMouseClickData(clickedData);\r\n onSeriesMouseClick?.(clickedData);\r\n }\r\n }\r\n setMouseClickData(clickedData);\r\n onSeriesMouseClick?.(clickedData);\r\n }}\r\n onPolygonHover={(polygon: any) => {\r\n const hoverData = polygon?.properties?.[mapProperty]\r\n ? data.find(el => el.id === polygon?.properties?.[mapProperty])\r\n : undefined;\r\n setMouseOverData(hoverData);\r\n onSeriesMouseOver?.(hoverData);\r\n }}\r\n atmosphereColor={atmosphereColor}\r\n atmosphereAltitude={atmosphereAltitude}\r\n globeCurvatureResolution={globeCurvatureResolution}\r\n globeMaterial={materials}\r\n backgroundColor='rgba(0, 0, 0, 0)'\r\n polygonsTransitionDuration={100}\r\n onGlobeReady={() => {\r\n if (globeEl.current) {\r\n globeEl.current.pointOfView({\r\n lat: centerLat,\r\n lng: centerLng,\r\n });\r\n const scene = globeEl.current.scene();\r\n setTimeout(() => {\r\n scene.children\r\n .filter(d => d.type === 'DirectionalLight')\r\n .map(d => {\r\n scene.remove(d);\r\n });\r\n const ambientLight = new THREE.AmbientLight(lightColor, 0.2);\r\n scene.add(ambientLight);\r\n\r\n const polygons = scene.children[3]?.children[0]?.children[4]?.children || [];\r\n polygons.forEach(d => {\r\n const line = d.children[1];\r\n line.renderOrder = 2;\r\n });\r\n }, 300);\r\n const light = new THREE.DirectionalLight(0xffffff, 0.1);\r\n const camera = globeEl.current.camera();\r\n light.position.set(0, 0, 1);\r\n camera.add(light);\r\n scene.add(camera);\r\n }\r\n }}\r\n />\r\n {showColorScale === false ? null : (\r\n <div className='absolute left-4 bottom-4'>\r\n {showLegend ? (\r\n <>\r\n <div\r\n style={{\r\n backgroundColor: 'rgba(240,240,240, 0.7)',\r\n border: '1px solid var(--gray-400)',\r\n borderRadius: '999px',\r\n width: '24px',\r\n height: '24px',\r\n padding: '3px',\r\n cursor: 'pointer',\r\n zIndex: 10,\r\n position: 'absolute',\r\n right: '-0.75rem',\r\n top: '-0.75rem',\r\n }}\r\n onClick={() => {\r\n setShowLegend(false);\r\n }}\r\n >\r\n <X />\r\n </div>\r\n <div\r\n className='p-2'\r\n style={{\r\n backgroundColor: 'rgba(240,240,240, 0.7)',\r\n width: categorical ? undefined : '340px',\r\n }}\r\n >\r\n {colorLegendTitle && colorLegendTitle !== '' ? (\r\n <P\r\n size='xs'\r\n marginBottom='xs'\r\n className='p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300'\r\n style={{\r\n display: '-webkit-box',\r\n WebkitLineClamp: '1',\r\n WebkitBoxOrient: 'vertical',\r\n }}\r\n >\r\n {colorLegendTitle}\r\n </P>\r\n ) : null}\r\n {!categorical ? (\r\n <svg width='100%' viewBox='0 0 320 30' direction='ltr'>\r\n <g>\r\n {colorDomain.map((d, i) => (\r\n <g key={i} className='cursor-pointer'>\r\n <rect\r\n x={(i * 320) / colors.length + 1}\r\n y={1}\r\n width={320 / colors.length - 2}\r\n height={8}\r\n style={{\r\n fill: colors[i],\r\n stroke: colors[i],\r\n }}\r\n />\r\n <text\r\n x={((i + 1) * 320) / colors.length}\r\n y={25}\r\n className='fill-primary-gray-700 dark:fill-primary-gray-300 text-xs'\r\n style={{ textAnchor: 'middle' }}\r\n >\r\n {numberFormattingFunction(d as number, 'NA')}\r\n </text>\r\n </g>\r\n ))}\r\n <g>\r\n <rect\r\n x={(colorDomain.length * 320) / colors.length + 1}\r\n y={1}\r\n width={320 / colors.length - 2}\r\n height={8}\r\n style={{\r\n fill: colors[colorDomain.length],\r\n stroke: colors[colorDomain.length],\r\n }}\r\n />\r\n </g>\r\n </g>\r\n </svg>\r\n ) : (\r\n <div className='flex flex-col gap-3'>\r\n {colorDomain.map((d, i) => (\r\n <div key={i} className='flex gap-2 items-center'>\r\n <div\r\n className='w-2 h-2 rounded-full'\r\n style={{ backgroundColor: colors[i % colors.length] }}\r\n />\r\n <P size='sm' marginBottom='none' leading='none'>\r\n {d}\r\n </P>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n ) : (\r\n <button\r\n type='button'\r\n className='mb-0 border-0 bg-transparent p-0 self-start'\r\n onClick={() => {\r\n setShowLegend(true);\r\n }}\r\n >\r\n <div className='items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500'>\r\n Show Legend\r\n </div>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {mouseOverData && tooltip ? (\r\n <Tooltip\r\n data={mouseOverData}\r\n body={tooltip}\r\n xPos={mousePos.x}\r\n yPos={mousePos.y}\r\n backgroundStyle={styles?.tooltip}\r\n className={classNames?.tooltip}\r\n />\r\n ) : null}\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 </div>\r\n );\r\n}\r\n\r\nexport default Graph;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\nimport * as THREE from 'three';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport Globe from 'react-globe.gl';\r\n\r\nimport Graph from './Graph';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport {\r\n ChoroplethMapDataType,\r\n ClassNameObject,\r\n FogDataType,\r\n Languages,\r\n ScaleDataType,\r\n SourcesDataType,\r\n StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { getUniqValue } from '@/Utils/getUniqValue';\r\nimport { getJenks } from '@/Utils/getJenks';\r\n\r\ntype GlobeProps = React.ComponentProps<typeof Globe>;\r\ninterface Props extends Partial<Omit<GlobeProps, 'backgroundColor'>> {\r\n // Data\r\n /** Array of data objects */\r\n data: ChoroplethMapDataType[];\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 /** Colors for the choropleth map */\r\n colors?: string[];\r\n /** Domain of colors for the graph */\r\n colorDomain?: number[] | string[];\r\n /** Title for the color legend */\r\n colorLegendTitle?: string;\r\n /** Color for the areas where data is no available */\r\n mapNoDataColor?: 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\r\n // Graph Parameters\r\n /** Map data as an object in geoJson format or a url for geoJson */\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n mapData?: any;\r\n /** Stroke color of the regions in the map */\r\n mapBorderColor?: string;\r\n /** Center point of the map */\r\n centerPoint?: [number, number];\r\n /** Defines if the globe rotates automatically */\r\n autoRotate?: number | boolean;\r\n /** Defines the material property applied to the sphere of the globe */\r\n globeMaterial?: THREE.Material;\r\n /** Defines the colo of the glow around the globe */\r\n atmosphereColor?: string;\r\n /** Defines if the globe can be zoomed when scrolled */\r\n enableZoom?: boolean;\r\n /** Position offset of the globe relative to the canvas center */\r\n globeOffset?: [number, number];\r\n /** Defines the camera distance from Earth. This helps in defining the default size of the globe. Smaller = closer camera therefore the globe is bigger) */\r\n scale?: number;\r\n /** Defines the spacing between the country shape polygon with the sphere */\r\n polygonAltitude?: number;\r\n /** Scale for the colors */\r\n scaleType?: Exclude<ScaleDataType, 'linear'>;\r\n /** Toggles if the color scaling is categorical or not */\r\n categorical?: boolean;\r\n /** Toggle visibility of color scale. */\r\n showColorScale?: boolean;\r\n /** The max altitude of the atmosphere, in terms of globe radius units. */\r\n atmosphereAltitude?: number;\r\n /** Resolution in angular degrees of the sphere curvature. The finer the resolution, the more the globe is fragmented into smaller faces to approximate the spheric surface, at the cost of performance. */\r\n globeCurvatureResolution?: number;\r\n /** Defines the color of the light and atmosphere. */\r\n lightColor?: string;\r\n /** Defines fog settings for the scene. */\r\n fogSettings?: FogDataType;\r\n /** Property in the property object in mapData geoJson object is used to match to the id in the data object */\r\n mapProperty?: string;\r\n /** Countries or regions to be highlighted */\r\n highlightedIds?: string[];\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\n/** For using these maps you will have to install [`three`](https://threejs.org/manual/) and [react-globe.gl](https://www.npmjs.com/package/react-globe.gl) package to your project */\r\nexport function ThreeDGlobe(props: Props) {\r\n const {\r\n data,\r\n mapData = 'https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json',\r\n graphTitle,\r\n colors,\r\n sources,\r\n graphDescription,\r\n height,\r\n width,\r\n footNote = 'The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.',\r\n colorDomain,\r\n colorLegendTitle,\r\n scaleType = 'threshold',\r\n padding,\r\n mapNoDataColor = Colors.light.graphNoData,\r\n backgroundColor = false,\r\n mapBorderColor = Colors.light.grays['gray-500'],\r\n relativeHeight,\r\n tooltip,\r\n graphID,\r\n mapProperty = 'ISO3',\r\n dataDownload = false,\r\n language = 'en',\r\n minHeight = 0,\r\n theme = 'light',\r\n ariaLabel,\r\n styles,\r\n classNames,\r\n autoRotate = true,\r\n enableZoom = true,\r\n globeMaterial,\r\n centerPoint = [0, 0],\r\n atmosphereColor = '#999',\r\n showColorScale = true,\r\n resetSelectionOnDoubleClick = true,\r\n detailsOnClick,\r\n onSeriesMouseOver,\r\n onSeriesMouseClick,\r\n highlightedIds = [],\r\n scale = 1,\r\n globeOffset = [0, 0],\r\n polygonAltitude = 0.01,\r\n globeCurvatureResolution = 4,\r\n atmosphereAltitude = 0.15,\r\n lightColor = '#dce9fe',\r\n fogSettings,\r\n } = props;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const [mapShape, setMapShape] = useState<any>(undefined);\r\n\r\n const [svgWidth, setSvgWidth] = useState(0);\r\n const [svgHeight, setSvgHeight] = useState(0);\r\n\r\n const graphDiv = useRef<HTMLDivElement>(null);\r\n\r\n useEffect(() => {\r\n const resizeObserver = new ResizeObserver(entries => {\r\n setSvgWidth(width || entries[0].target.clientWidth || 760);\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 || 760);\r\n if (!width) resizeObserver.observe(graphDiv.current);\r\n }\r\n return () => resizeObserver.disconnect();\r\n }, [width, height]);\r\n useEffect(() => {\r\n if (typeof mapData === 'string') {\r\n const fetchData = fetchAndParseJSON(mapData);\r\n fetchData.then(d => {\r\n if (\r\n mapData ===\r\n 'https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json'\r\n ) {\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const features = d.features.map((el: any) => {\r\n if (el.geometry.type === 'Polygon') {\r\n const reversed = [...el.geometry.coordinates[0]].reverse();\r\n const geometry = { ...el.geometry, coordinates: [reversed] };\r\n return { ...el, geometry };\r\n }\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const coord: any = [];\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n el.geometry.coordinates.forEach((c: any) => {\r\n const reversed = [...c[0]].reverse();\r\n coord.push([reversed]);\r\n });\r\n const geometry = { ...el.geometry, coordinates: coord };\r\n return { ...el, geometry };\r\n });\r\n setMapShape(features);\r\n } else setMapShape(d.features);\r\n });\r\n } else {\r\n setMapShape(mapData.features);\r\n }\r\n }, [mapData]);\r\n\r\n const domain =\r\n colorDomain ||\r\n (scaleType === 'categorical'\r\n ? getUniqValue(data, 'x')\r\n : getJenks(\r\n data.map(d => d.x as number | null | undefined),\r\n colors?.length || 4,\r\n ));\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 aria-label={\r\n ariaLabel ||\r\n `${\r\n graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n }This is a map.${graphDescription ? ` ${graphDescription}` : ''}`\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 || 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={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\r\n className='flex flex-col grow justify-center leading-0'\r\n ref={graphDiv}\r\n aria-label='Map area'\r\n >\r\n {(width || svgWidth) && (height || svgHeight) && mapShape ? (\r\n <Graph\r\n data={data}\r\n globeOffset={globeOffset}\r\n polygonData={mapShape}\r\n colorDomain={domain}\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 colors={\r\n colors ||\r\n (scaleType === 'categorical'\r\n ? Colors[theme].sequentialColors[\r\n `neutralColorsx0${domain.length as 4 | 5 | 6 | 7 | 8 | 9}`\r\n ]\r\n : Colors[theme].sequentialColors[\r\n `neutralColorsx0${(domain.length + 1) as 4 | 5 | 6 | 7 | 8 | 9}`\r\n ])\r\n }\r\n mapNoDataColor={mapNoDataColor}\r\n categorical={scaleType === 'categorical'}\r\n mapBorderColor={mapBorderColor}\r\n tooltip={tooltip}\r\n mapProperty={mapProperty}\r\n styles={styles}\r\n classNames={classNames}\r\n autoRotate={autoRotate === true ? 1.5 : autoRotate === false ? 0 : autoRotate}\r\n enableZoom={enableZoom}\r\n globeMaterial={globeMaterial}\r\n atmosphereColor={atmosphereColor}\r\n colorLegendTitle={colorLegendTitle}\r\n showColorScale={showColorScale}\r\n hoverStrokeColor={\r\n theme === 'light'\r\n ? Colors.light.grays['gray-700']\r\n : Colors.light.grays['gray-300']\r\n }\r\n highlightedIds={highlightedIds}\r\n resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\r\n detailsOnClick={detailsOnClick}\r\n onSeriesMouseOver={onSeriesMouseOver}\r\n onSeriesMouseClick={onSeriesMouseClick}\r\n scale={scale}\r\n polygonAltitude={polygonAltitude}\r\n centerLat={centerPoint[0]}\r\n centerLng={centerPoint[1]}\r\n atmosphereAltitude={atmosphereAltitude}\r\n globeCurvatureResolution={globeCurvatureResolution}\r\n lightColor={lightColor}\r\n fogSettings={fogSettings}\r\n />\r\n ) : (\r\n <div\r\n style={{\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 )}px`,\r\n }}\r\n className='flex items-center justify-center'\r\n >\r\n <Spinner aria-label='Loading graph' />\r\n </div>\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":["Graph","props","width","autoRotate","data","enableZoom","categorical","colorDomain","colors","globeMaterial","height","polygonData","mapProperty","mapBorderColor","atmosphereColor","tooltip","styles","classNames","mapNoDataColor","colorLegendTitle","showColorScale","hoverStrokeColor","detailsOnClick","onSeriesMouseClick","onSeriesMouseOver","resetSelectionOnDoubleClick","highlightedIds","scale","globeOffset","polygonAltitude","centerLng","centerLat","atmosphereAltitude","globeCurvatureResolution","lightColor","fogSettings","globeEl","useRef","mouseClickData","setMouseClickData","useState","showLegend","setShowLegend","mousePos","setMousePos","mouseOverData","setMouseOverData","colorScale","scaleOrdinal","scaleThreshold","useEffect","canvas","handleMouseMove","e","materials","THREE","scene","d","ambientLight","line","jsxs","jsx","Globe","polygon","id","val","el","color","clickedData","isEqual","hoverData","light","camera","Fragment","X","P","i","numberFormattingFunction","Tooltip","Modal","string2HTML","ThreeDGlobe","mapData","graphTitle","sources","graphDescription","footNote","scaleType","padding","Colors","backgroundColor","relativeHeight","graphID","dataDownload","language","minHeight","theme","ariaLabel","centerPoint","mapShape","setMapShape","svgWidth","setSvgWidth","svgHeight","setSvgHeight","graphDiv","resizeObserver","entries","fetchAndParseJSON","features","reversed","geometry","coord","c","domain","getUniqValue","getJenks","cn","GraphHeader","Spinner","GraphFooter"],"mappings":"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"}
1
+ {"version":3,"file":"ThreeDGlobe.cjs","sources":["../src/Components/Graphs/Maps/ThreeDGlobe/Graph.tsx","../src/Components/Graphs/Maps/ThreeDGlobe/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport Globe, { GlobeMethods } from 'react-globe.gl';\r\nimport isEqual from 'fast-deep-equal';\r\nimport { useEffect, useRef, useState } from 'react';\r\nimport { scaleOrdinal, scaleThreshold } from 'd3-scale';\r\nimport * as THREE from 'three';\r\nimport { Modal } from '@undp/design-system-react/Modal';\r\nimport { P } from '@undp/design-system-react/Typography';\r\n\r\nimport { ChoroplethMapDataType, ClassNameObject, FogDataType, StyleObject } from '@/Types';\r\nimport { Tooltip } from '@/Components/Elements/Tooltip';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n width: number;\r\n data: ChoroplethMapDataType[];\r\n autoRotate: number;\r\n enableZoom: boolean;\r\n categorical: boolean;\r\n colorDomain: number[] | string[];\r\n colors: string[];\r\n height: number;\r\n globeMaterial?: THREE.Material;\r\n polygonData: any;\r\n mapProperty: string;\r\n mapBorderColor: string;\r\n atmosphereColor: string;\r\n tooltip?: string | ((_d: any) => React.ReactNode);\r\n styles?: StyleObject;\r\n classNames?: ClassNameObject;\r\n onSeriesMouseOver?: (_d: any) => void;\r\n onSeriesMouseClick?: (_d: any) => void;\r\n mapNoDataColor: string;\r\n colorLegendTitle?: string;\r\n showColorScale: boolean;\r\n hoverStrokeColor: string;\r\n detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n resetSelectionOnDoubleClick: boolean;\r\n highlightedIds: string[];\r\n scale: number;\r\n globeOffset: [number, number];\r\n polygonAltitude: number;\r\n centerLng: number;\r\n centerLat: number;\r\n atmosphereAltitude: number;\r\n globeCurvatureResolution: number;\r\n lightColor: string;\r\n fogSettings?: FogDataType;\r\n}\r\n\r\nfunction Graph(props: Props) {\r\n const {\r\n width,\r\n autoRotate,\r\n data,\r\n enableZoom,\r\n categorical,\r\n colorDomain,\r\n colors,\r\n globeMaterial,\r\n height,\r\n polygonData,\r\n mapProperty,\r\n mapBorderColor,\r\n atmosphereColor,\r\n tooltip,\r\n styles,\r\n classNames,\r\n mapNoDataColor,\r\n colorLegendTitle,\r\n showColorScale,\r\n hoverStrokeColor,\r\n detailsOnClick,\r\n onSeriesMouseClick,\r\n onSeriesMouseOver,\r\n resetSelectionOnDoubleClick,\r\n highlightedIds,\r\n scale,\r\n globeOffset,\r\n polygonAltitude,\r\n centerLng,\r\n centerLat,\r\n atmosphereAltitude,\r\n globeCurvatureResolution,\r\n lightColor,\r\n fogSettings,\r\n } = props;\r\n const globeEl = useRef<GlobeMethods | undefined>(undefined);\r\n const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n const [showLegend, setShowLegend] = useState(!(width < 680));\r\n const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\r\n const [mouseOverData, setMouseOverData] = useState<ChoroplethMapDataType | undefined>(undefined);\r\n const colorScale = categorical\r\n ? scaleOrdinal<number | string, string>().domain(colorDomain).range(colors)\r\n : scaleThreshold<number, string>()\r\n .domain(colorDomain as number[])\r\n .range(colors);\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n globeEl.current.controls().enableZoom = enableZoom;\r\n }\r\n }, [enableZoom]);\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n if (mouseOverData) {\r\n globeEl.current.controls().autoRotate = false;\r\n } else {\r\n globeEl.current.controls().autoRotate = autoRotate === 0 ? false : true;\r\n globeEl.current.controls().autoRotateSpeed = autoRotate;\r\n }\r\n }\r\n }, [mouseOverData, autoRotate]);\r\n\r\n useEffect(() => {\r\n const canvas = globeEl.current?.renderer().domElement;\r\n if (!canvas) return;\r\n\r\n const handleMouseMove = (e: MouseEvent) => {\r\n setMousePos({ x: e.clientX, y: e.clientY });\r\n };\r\n\r\n canvas.addEventListener('mousemove', handleMouseMove);\r\n return () => canvas.removeEventListener('mousemove', handleMouseMove);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n globeEl.current.pointOfView({ lat: centerLat, lng: centerLng, altitude: scale }, 1000);\r\n }\r\n }, [scale, centerLng, centerLat]);\r\n const materials =\r\n globeMaterial ||\r\n new THREE.MeshBasicMaterial({\r\n color: '#FFF',\r\n });\r\n useEffect(() => {\r\n if (!globeEl.current) return;\r\n\r\n const scene = globeEl.current.scene();\r\n scene.children\r\n .filter(d => d.type === 'DirectionalLight' || d.type === 'AmbientLight')\r\n .forEach(d => scene.remove(d));\r\n const ambientLight = new THREE.AmbientLight(lightColor, 0.2);\r\n scene.add(ambientLight);\r\n setTimeout(() => {\r\n const polygons = scene.children[3]?.children[0]?.children[4]?.children || [];\r\n polygons.forEach(d => {\r\n const line = d.children[1];\r\n if (line) line.renderOrder = 2;\r\n });\r\n }, 300);\r\n if (fogSettings)\r\n scene.fog = new THREE.Fog(fogSettings.color, fogSettings.near, fogSettings.far);\r\n }, [lightColor, scale, fogSettings]);\r\n return (\r\n <div className='relative'>\r\n <Globe\r\n ref={globeEl}\r\n height={height}\r\n width={width}\r\n globeOffset={globeOffset}\r\n lineHoverPrecision={0}\r\n polygonsData={polygonData}\r\n polygonAltitude={(polygon: any) =>\r\n highlightedIds.includes(polygon?.properties?.[mapProperty])\r\n ? 0.1\r\n : polygon?.properties?.[mapProperty] === mouseOverData?.id\r\n ? 0.01\r\n : polygonAltitude\r\n }\r\n polygonCapColor={(polygon: any) => {\r\n const id = polygon?.properties?.[mapProperty];\r\n const val = data.find(el => el.id === id)?.x;\r\n if (val !== undefined && val !== null) {\r\n return colorScale(val as any);\r\n }\r\n return mapNoDataColor;\r\n }}\r\n polygonSideColor={(polygon: any) => {\r\n const id = polygon?.properties?.[mapProperty];\r\n const val = data.find(el => el.id === id)?.x;\r\n const color = val !== undefined && val !== null ? colorScale(val as any) : mapNoDataColor;\r\n return highlightedIds.includes(polygon?.properties?.[mapProperty])\r\n ? color\r\n : 'rgba(100,100,100,0)';\r\n }}\r\n polygonStrokeColor={(polygon: any) =>\r\n polygon?.properties?.[mapProperty] === mouseOverData?.id\r\n ? hoverStrokeColor\r\n : mapBorderColor\r\n }\r\n onPolygonClick={(polygon: any) => {\r\n const clickedData = polygon?.properties?.[mapProperty]\r\n ? data.find(el => el.id === polygon?.properties?.[mapProperty])\r\n : undefined;\r\n if (onSeriesMouseClick || detailsOnClick) {\r\n if (\r\n isEqual(mouseClickData, clickedData) &&\r\n resetSelectionOnDoubleClick &&\r\n clickedData\r\n ) {\r\n setMouseClickData(undefined);\r\n onSeriesMouseClick?.(undefined);\r\n } else {\r\n setMouseClickData(clickedData);\r\n onSeriesMouseClick?.(clickedData);\r\n }\r\n }\r\n setMouseClickData(clickedData);\r\n onSeriesMouseClick?.(clickedData);\r\n }}\r\n onPolygonHover={(polygon: any) => {\r\n const hoverData = polygon?.properties?.[mapProperty]\r\n ? data.find(el => el.id === polygon?.properties?.[mapProperty])\r\n : undefined;\r\n setMouseOverData(hoverData);\r\n onSeriesMouseOver?.(hoverData);\r\n }}\r\n atmosphereColor={atmosphereColor}\r\n atmosphereAltitude={atmosphereAltitude}\r\n globeCurvatureResolution={globeCurvatureResolution}\r\n globeMaterial={materials}\r\n backgroundColor='rgba(0, 0, 0, 0)'\r\n polygonsTransitionDuration={100}\r\n onGlobeReady={() => {\r\n if (globeEl.current) {\r\n globeEl.current.pointOfView({\r\n lat: centerLat,\r\n lng: centerLng,\r\n });\r\n const scene = globeEl.current.scene();\r\n setTimeout(() => {\r\n scene.children\r\n .filter(d => d.type === 'DirectionalLight')\r\n .map(d => {\r\n scene.remove(d);\r\n });\r\n const ambientLight = new THREE.AmbientLight(lightColor, 0.2);\r\n scene.add(ambientLight);\r\n\r\n const polygons = scene.children[3]?.children[0]?.children[4]?.children || [];\r\n polygons.forEach(d => {\r\n const line = d.children[1];\r\n line.renderOrder = 2;\r\n });\r\n }, 300);\r\n const light = new THREE.DirectionalLight(0xffffff, 0.1);\r\n const camera = globeEl.current.camera();\r\n light.position.set(0, 0, 1);\r\n camera.add(light);\r\n scene.add(camera);\r\n }\r\n }}\r\n />\r\n {showColorScale === false ? null : (\r\n <div className='absolute left-4 bottom-4'>\r\n {showLegend ? (\r\n <>\r\n <div\r\n style={{\r\n backgroundColor: 'rgba(240,240,240, 0.7)',\r\n border: '1px solid var(--gray-400)',\r\n borderRadius: '999px',\r\n width: '24px',\r\n height: '24px',\r\n padding: '3px',\r\n cursor: 'pointer',\r\n zIndex: 10,\r\n position: 'absolute',\r\n right: '-0.75rem',\r\n top: '-0.75rem',\r\n }}\r\n onClick={() => {\r\n setShowLegend(false);\r\n }}\r\n >\r\n <X />\r\n </div>\r\n <div\r\n className='p-2'\r\n style={{\r\n backgroundColor: 'rgba(240,240,240, 0.7)',\r\n width: categorical ? undefined : '340px',\r\n }}\r\n >\r\n {colorLegendTitle && colorLegendTitle !== '' ? (\r\n <P\r\n size='xs'\r\n marginBottom='xs'\r\n className='p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300'\r\n style={{\r\n display: '-webkit-box',\r\n WebkitLineClamp: '1',\r\n WebkitBoxOrient: 'vertical',\r\n }}\r\n >\r\n {colorLegendTitle}\r\n </P>\r\n ) : null}\r\n {!categorical ? (\r\n <svg width='100%' viewBox='0 0 320 30' direction='ltr'>\r\n <g>\r\n {colorDomain.map((d, i) => (\r\n <g key={i} className='cursor-pointer'>\r\n <rect\r\n x={(i * 320) / colors.length + 1}\r\n y={1}\r\n width={320 / colors.length - 2}\r\n height={8}\r\n style={{\r\n fill: colors[i],\r\n stroke: colors[i],\r\n }}\r\n />\r\n <text\r\n x={((i + 1) * 320) / colors.length}\r\n y={25}\r\n className='fill-primary-gray-700 dark:fill-primary-gray-300 text-xs'\r\n style={{ textAnchor: 'middle' }}\r\n >\r\n {numberFormattingFunction(d as number, 'NA')}\r\n </text>\r\n </g>\r\n ))}\r\n <g>\r\n <rect\r\n x={(colorDomain.length * 320) / colors.length + 1}\r\n y={1}\r\n width={320 / colors.length - 2}\r\n height={8}\r\n style={{\r\n fill: colors[colorDomain.length],\r\n stroke: colors[colorDomain.length],\r\n }}\r\n />\r\n </g>\r\n </g>\r\n </svg>\r\n ) : (\r\n <div className='flex flex-col gap-3'>\r\n {colorDomain.map((d, i) => (\r\n <div key={i} className='flex gap-2 items-center'>\r\n <div\r\n className='w-2 h-2 rounded-full'\r\n style={{ backgroundColor: colors[i % colors.length] }}\r\n />\r\n <P size='sm' marginBottom='none' leading='none'>\r\n {d}\r\n </P>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n ) : (\r\n <button\r\n type='button'\r\n className='mb-0 border-0 bg-transparent p-0 self-start'\r\n onClick={() => {\r\n setShowLegend(true);\r\n }}\r\n >\r\n <div className='items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500'>\r\n Show Legend\r\n </div>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {mouseOverData && tooltip ? (\r\n <Tooltip\r\n data={mouseOverData}\r\n body={tooltip}\r\n xPos={mousePos.x}\r\n yPos={mousePos.y}\r\n backgroundStyle={styles?.tooltip}\r\n className={classNames?.tooltip}\r\n />\r\n ) : null}\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 </div>\r\n );\r\n}\r\n\r\nexport default Graph;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\nimport * as THREE from 'three';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport Globe from 'react-globe.gl';\r\n\r\nimport Graph from './Graph';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport {\r\n ChoroplethMapDataType,\r\n ClassNameObject,\r\n FogDataType,\r\n Languages,\r\n ScaleDataType,\r\n SourcesDataType,\r\n StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { getUniqValue } from '@/Utils/getUniqValue';\r\nimport { getJenks } from '@/Utils/getJenks';\r\n\r\ntype GlobeProps = React.ComponentProps<typeof Globe>;\r\ninterface Props extends Partial<Omit<GlobeProps, 'backgroundColor'>> {\r\n // Data\r\n /** Array of data objects */\r\n data: ChoroplethMapDataType[];\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 /** Colors for the choropleth map */\r\n colors?: string[];\r\n /** Domain of colors for the graph */\r\n colorDomain?: number[] | string[];\r\n /** Title for the color legend */\r\n colorLegendTitle?: string;\r\n /** Color for the areas where data is no available */\r\n mapNoDataColor?: 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\r\n // Graph Parameters\r\n /** Map data as an object in geoJson format or a url for geoJson */\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n mapData?: any;\r\n /** Stroke color of the regions in the map */\r\n mapBorderColor?: string;\r\n /** Center point of the map */\r\n centerPoint?: [number, number];\r\n /** Defines if the globe rotates automatically */\r\n autoRotate?: number | boolean;\r\n /** Defines the material property applied to the sphere of the globe */\r\n globeMaterial?: THREE.Material;\r\n /** Defines the colo of the glow around the globe */\r\n atmosphereColor?: string;\r\n /** Defines if the globe can be zoomed when scrolled */\r\n enableZoom?: boolean;\r\n /** Position offset of the globe relative to the canvas center */\r\n globeOffset?: [number, number];\r\n /** Defines the camera distance from Earth. This helps in defining the default size of the globe. Smaller = closer camera therefore the globe is bigger) */\r\n scale?: number;\r\n /** Defines the spacing between the country shape polygon with the sphere */\r\n polygonAltitude?: number;\r\n /** Scale for the colors */\r\n scaleType?: Exclude<ScaleDataType, 'linear'>;\r\n /** Toggles if the color scaling is categorical or not */\r\n categorical?: boolean;\r\n /** Toggle visibility of color scale. */\r\n showColorScale?: boolean;\r\n /** The max altitude of the atmosphere, in terms of globe radius units. */\r\n atmosphereAltitude?: number;\r\n /** Resolution in angular degrees of the sphere curvature. The finer the resolution, the more the globe is fragmented into smaller faces to approximate the spheric surface, at the cost of performance. */\r\n globeCurvatureResolution?: number;\r\n /** Defines the color of the light and atmosphere. */\r\n lightColor?: string;\r\n /** Defines fog settings for the scene. */\r\n fogSettings?: FogDataType;\r\n /** Property in the property object in mapData geoJson object is used to match to the id in the data object */\r\n mapProperty?: string;\r\n /** Countries or regions to be highlighted */\r\n highlightedIds?: string[];\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\n/** For using these maps you will have to install [`three`](https://threejs.org/manual/) and [react-globe.gl](https://www.npmjs.com/package/react-globe.gl) package to your project */\r\nexport function ThreeDGlobe(props: Props) {\r\n const {\r\n data,\r\n mapData = 'https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json',\r\n graphTitle,\r\n colors,\r\n sources,\r\n graphDescription,\r\n height,\r\n width,\r\n footNote = 'The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.',\r\n colorDomain,\r\n colorLegendTitle,\r\n scaleType = 'threshold',\r\n padding,\r\n mapNoDataColor = Colors.light.graphNoData,\r\n backgroundColor = false,\r\n mapBorderColor = Colors.light.grays['gray-500'],\r\n relativeHeight,\r\n tooltip,\r\n graphID,\r\n mapProperty = 'ISO3',\r\n dataDownload = false,\r\n language = 'en',\r\n minHeight = 0,\r\n theme = 'light',\r\n ariaLabel,\r\n styles,\r\n classNames,\r\n autoRotate = true,\r\n enableZoom = true,\r\n globeMaterial,\r\n centerPoint = [0, 0],\r\n atmosphereColor = '#999',\r\n showColorScale = true,\r\n resetSelectionOnDoubleClick = true,\r\n detailsOnClick,\r\n onSeriesMouseOver,\r\n onSeriesMouseClick,\r\n highlightedIds = [],\r\n scale = 1,\r\n globeOffset = [0, 0],\r\n polygonAltitude = 0.01,\r\n globeCurvatureResolution = 4,\r\n atmosphereAltitude = 0.15,\r\n lightColor = '#dce9fe',\r\n fogSettings,\r\n } = props;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const [mapShape, setMapShape] = useState<any>(undefined);\r\n\r\n const [svgWidth, setSvgWidth] = useState(0);\r\n const [svgHeight, setSvgHeight] = useState(0);\r\n\r\n const graphDiv = useRef<HTMLDivElement>(null);\r\n\r\n useEffect(() => {\r\n const resizeObserver = new ResizeObserver(entries => {\r\n setSvgWidth(width || entries[0].target.clientWidth || 760);\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 || 760);\r\n if (!width) resizeObserver.observe(graphDiv.current);\r\n }\r\n return () => resizeObserver.disconnect();\r\n }, [width, height]);\r\n useEffect(() => {\r\n if (typeof mapData === 'string') {\r\n const fetchData = fetchAndParseJSON(mapData);\r\n fetchData.then(d => {\r\n if (\r\n mapData ===\r\n 'https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json'\r\n ) {\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const features = d.features.map((el: any) => {\r\n if (el.geometry.type === 'Polygon') {\r\n const reversed = [...el.geometry.coordinates[0]].reverse();\r\n const geometry = { ...el.geometry, coordinates: [reversed] };\r\n return { ...el, geometry };\r\n }\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const coord: any = [];\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n el.geometry.coordinates.forEach((c: any) => {\r\n const reversed = [...c[0]].reverse();\r\n coord.push([reversed]);\r\n });\r\n const geometry = { ...el.geometry, coordinates: coord };\r\n return { ...el, geometry };\r\n });\r\n setMapShape(features);\r\n } else setMapShape(d.features);\r\n });\r\n } else {\r\n setMapShape(mapData.features);\r\n }\r\n }, [mapData]);\r\n\r\n const domain =\r\n colorDomain ||\r\n (scaleType === 'categorical'\r\n ? getUniqValue(data, 'x')\r\n : getJenks(\r\n data.map(d => d.x as number | null | undefined),\r\n colors?.length || 4,\r\n ));\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 aria-label={\r\n ariaLabel ||\r\n `${\r\n graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n }This is a map.${graphDescription ? ` ${graphDescription}` : ''}`\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 || 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={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\r\n className='flex flex-col grow justify-center leading-0'\r\n ref={graphDiv}\r\n aria-label='Map area'\r\n >\r\n {(width || svgWidth) && (height || svgHeight) && mapShape ? (\r\n <Graph\r\n data={data}\r\n globeOffset={globeOffset}\r\n polygonData={mapShape}\r\n colorDomain={domain}\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 colors={\r\n colors ||\r\n (scaleType === 'categorical'\r\n ? Colors[theme].sequentialColors[\r\n `neutralColorsx0${domain.length as 4 | 5 | 6 | 7 | 8 | 9}`\r\n ]\r\n : Colors[theme].sequentialColors[\r\n `neutralColorsx0${(domain.length + 1) as 4 | 5 | 6 | 7 | 8 | 9}`\r\n ])\r\n }\r\n mapNoDataColor={mapNoDataColor}\r\n categorical={scaleType === 'categorical'}\r\n mapBorderColor={mapBorderColor}\r\n tooltip={tooltip}\r\n mapProperty={mapProperty}\r\n styles={styles}\r\n classNames={classNames}\r\n autoRotate={autoRotate === true ? 1.5 : autoRotate === false ? 0 : autoRotate}\r\n enableZoom={enableZoom}\r\n globeMaterial={globeMaterial}\r\n atmosphereColor={atmosphereColor}\r\n colorLegendTitle={colorLegendTitle}\r\n showColorScale={showColorScale}\r\n hoverStrokeColor={\r\n theme === 'light'\r\n ? Colors.light.grays['gray-700']\r\n : Colors.light.grays['gray-300']\r\n }\r\n highlightedIds={highlightedIds}\r\n resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\r\n detailsOnClick={detailsOnClick}\r\n onSeriesMouseOver={onSeriesMouseOver}\r\n onSeriesMouseClick={onSeriesMouseClick}\r\n scale={scale}\r\n polygonAltitude={polygonAltitude}\r\n centerLat={centerPoint[0]}\r\n centerLng={centerPoint[1]}\r\n atmosphereAltitude={atmosphereAltitude}\r\n globeCurvatureResolution={globeCurvatureResolution}\r\n lightColor={lightColor}\r\n fogSettings={fogSettings}\r\n />\r\n ) : (\r\n <div\r\n style={{\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 )}px`,\r\n }}\r\n className='flex items-center justify-center'\r\n >\r\n <Spinner aria-label='Loading graph' />\r\n </div>\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":["Graph","props","width","autoRotate","data","enableZoom","categorical","colorDomain","colors","globeMaterial","height","polygonData","mapProperty","mapBorderColor","atmosphereColor","tooltip","styles","classNames","mapNoDataColor","colorLegendTitle","showColorScale","hoverStrokeColor","detailsOnClick","onSeriesMouseClick","onSeriesMouseOver","resetSelectionOnDoubleClick","highlightedIds","scale","globeOffset","polygonAltitude","centerLng","centerLat","atmosphereAltitude","globeCurvatureResolution","lightColor","fogSettings","globeEl","useRef","mouseClickData","setMouseClickData","useState","showLegend","setShowLegend","mousePos","setMousePos","mouseOverData","setMouseOverData","colorScale","scaleOrdinal","scaleThreshold","useEffect","canvas","handleMouseMove","e","materials","THREE","scene","d","ambientLight","line","jsxs","jsx","Globe","polygon","id","val","el","color","clickedData","isEqual","hoverData","light","camera","Fragment","X","P","i","numberFormattingFunction","Tooltip","Modal","string2HTML","ThreeDGlobe","mapData","graphTitle","sources","graphDescription","footNote","scaleType","padding","Colors","backgroundColor","relativeHeight","graphID","dataDownload","language","minHeight","theme","ariaLabel","centerPoint","mapShape","setMapShape","svgWidth","setSvgWidth","svgHeight","setSvgHeight","graphDiv","resizeObserver","entries","fetchAndParseJSON","features","reversed","geometry","coord","c","domain","getUniqValue","getJenks","cn","GraphHeader","Spinner","GraphFooter"],"mappings":"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"}
package/dist/ThreeDGlobe.js CHANGED
@@ -18,48 +18,48 @@ import { f as Le } from "./fetchAndParseData-4gsYTy6_.js";
18
18
  import { Colors as R } from "./Colors.js";
19
19
  import { g as Me } from "./getUniqValue-BtUENB2H.js";
20
20
  import { g as Oe } from "./getJenks-VhM3GIoC.js";
21
- function Te(_) {
21
+ function Te(Y) {
22
22
  const {
23
- width: x,
24
- autoRotate: p,
25
- data: u,
23
+ width: p,
24
+ autoRotate: u,
25
+ data: f,
26
26
  enableZoom: E,
27
27
  categorical: O,
28
28
  colorDomain: l,
29
29
  colors: i,
30
30
  globeMaterial: s,
31
- height: Y,
31
+ height: z,
32
32
  polygonData: K,
33
33
  mapProperty: c,
34
34
  mapBorderColor: H,
35
- atmosphereColor: z,
36
- tooltip: U,
35
+ atmosphereColor: U,
36
+ tooltip: q,
37
37
  styles: v,
38
38
  classNames: Q,
39
39
  mapNoDataColor: d,
40
40
  colorLegendTitle: $,
41
41
  showColorScale: ee,
42
42
  hoverStrokeColor: te,
43
- detailsOnClick: f,
43
+ detailsOnClick: y,
44
44
  onSeriesMouseClick: b,
45
45
  onSeriesMouseOver: g,
46
46
  resetSelectionOnDoubleClick: T,
47
- highlightedIds: q,
47
+ highlightedIds: X,
48
48
  scale: h,
49
49
  globeOffset: w,
50
50
  polygonAltitude: A,
51
51
  centerLng: F,
52
52
  centerLat: B,
53
- atmosphereAltitude: X,
53
+ atmosphereAltitude: V,
54
54
  globeCurvatureResolution: oe,
55
55
  lightColor: G,
56
56
  fogSettings: D
57
- } = _, a = he(void 0), [k, P] = M(void 0), [re, V] = M(!(x < 680)), [Z, ie] = M({ x: 0, y: 0 }), [j, ae] = M(void 0), J = O ? De().domain(l).range(i) : ke().domain(l).range(i);
57
+ } = Y, a = he(void 0), [k, P] = M(void 0), [re, Z] = M(!(p < 680)), [J, ie] = M({ x: 0, y: 0 }), [j, ae] = M(void 0), _ = O ? De().domain(l).range(i) : ke().domain(l).range(i);
58
58
  L(() => {
59
59
  a.current && (a.current.controls().enableZoom = E);
60
60
  }, [E]), L(() => {
61
- a.current && (j ? a.current.controls().autoRotate = !1 : (a.current.controls().autoRotate = p !== 0, a.current.controls().autoRotateSpeed = p));
62
- }, [j, p]), L(() => {
61
+ a.current && (j ? a.current.controls().autoRotate = !1 : (a.current.controls().autoRotate = u !== 0, a.current.controls().autoRotateSpeed = u));
62
+ }, [j, u]), L(() => {
63
63
  const e = a.current?.renderer().domElement;
64
64
  if (!e) return;
65
65
  const o = (r) => {
@@ -79,8 +79,8 @@ function Te(_) {
79
79
  const o = new W.AmbientLight(G, 0.2);
80
80
  e.add(o), setTimeout(() => {
81
81
  (e.children[3]?.children[0]?.children[4]?.children || []).forEach((m) => {
82
- const y = m.children[1];
83
- y && (y.renderOrder = 2);
82
+ const x = m.children[1];
83
+ x && (x.renderOrder = 2);
84
84
  });
85
85
  }, 300), D && (e.fog = new W.Fog(D.color, D.near, D.far));
86
86
  }, [G, h, D]), /* @__PURE__ */ t.jsxs("div", { className: "relative", children: [
@@ -88,29 +88,31 @@ function Te(_) {
88
88
  ye,
89
89
  {
90
90
  ref: a,
91
+ height: z,
92
+ width: p,
91
93
  globeOffset: w,
92
94
  lineHoverPrecision: 0,
93
95
  polygonsData: K,
94
- polygonAltitude: (e) => q.includes(e?.properties?.[c]) ? 0.1 : e?.properties?.[c] === j?.id ? 0.01 : A,
96
+ polygonAltitude: (e) => X.includes(e?.properties?.[c]) ? 0.1 : e?.properties?.[c] === j?.id ? 0.01 : A,
95
97
  polygonCapColor: (e) => {
96
- const o = e?.properties?.[c], r = u.find((m) => m.id === o)?.x;
97
- return r != null ? J(r) : d;
98
+ const o = e?.properties?.[c], r = f.find((m) => m.id === o)?.x;
99
+ return r != null ? _(r) : d;
98
100
  },
99
101
  polygonSideColor: (e) => {
100
- const o = e?.properties?.[c], r = u.find((y) => y.id === o)?.x, m = r != null ? J(r) : d;
101
- return q.includes(e?.properties?.[c]) ? m : "rgba(100,100,100,0)";
102
+ const o = e?.properties?.[c], r = f.find((x) => x.id === o)?.x, m = r != null ? _(r) : d;
103
+ return X.includes(e?.properties?.[c]) ? m : "rgba(100,100,100,0)";
102
104
  },
103
105
  polygonStrokeColor: (e) => e?.properties?.[c] === j?.id ? te : H,
104
106
  onPolygonClick: (e) => {
105
- const o = e?.properties?.[c] ? u.find((r) => r.id === e?.properties?.[c]) : void 0;
106
- (b || f) && (xe(k, o) && T && o ? (P(void 0), b?.(void 0)) : (P(o), b?.(o))), P(o), b?.(o);
107
+ const o = e?.properties?.[c] ? f.find((r) => r.id === e?.properties?.[c]) : void 0;
108
+ (b || y) && (xe(k, o) && T && o ? (P(void 0), b?.(void 0)) : (P(o), b?.(o))), P(o), b?.(o);
107
109
  },
108
110
  onPolygonHover: (e) => {
109
- const o = e?.properties?.[c] ? u.find((r) => r.id === e?.properties?.[c]) : void 0;
111
+ const o = e?.properties?.[c] ? f.find((r) => r.id === e?.properties?.[c]) : void 0;
110
112
  ae(o), g?.(o);
111
113
  },
112
- atmosphereColor: z,
113
- atmosphereAltitude: X,
114
+ atmosphereColor: U,
115
+ atmosphereAltitude: V,
114
116
  globeCurvatureResolution: oe,
115
117
  globeMaterial: se,
116
118
  backgroundColor: "rgba(0, 0, 0, 0)",
@@ -156,7 +158,7 @@ function Te(_) {
156
158
  top: "-0.75rem"
157
159
  },
158
160
  onClick: () => {
159
- V(!1);
161
+ Z(!1);
160
162
  },
161
163
  children: /* @__PURE__ */ t.jsx(je, {})
162
164
  }
@@ -242,23 +244,23 @@ function Te(_) {
242
244
  type: "button",
243
245
  className: "mb-0 border-0 bg-transparent p-0 self-start",
244
246
  onClick: () => {
245
- V(!0);
247
+ Z(!0);
246
248
  },
247
249
  children: /* @__PURE__ */ t.jsx("div", { className: "items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500", children: "Show Legend" })
248
250
  }
249
251
  ) }),
250
- j && U ? /* @__PURE__ */ t.jsx(
252
+ j && q ? /* @__PURE__ */ t.jsx(
251
253
  be,
252
254
  {
253
255
  data: j,
254
- body: U,
255
- xPos: Z.x,
256
- yPos: Z.y,
256
+ body: q,
257
+ xPos: J.x,
258
+ yPos: J.y,
257
259
  backgroundStyle: v?.tooltip,
258
260
  className: Q?.tooltip
259
261
  }
260
262
  ) : null,
261
- f && k !== void 0 ? /* @__PURE__ */ t.jsx(
263
+ y && k !== void 0 ? /* @__PURE__ */ t.jsx(
262
264
  ve,
263
265
  {
264
266
  open: k !== void 0,
@@ -269,47 +271,47 @@ function Te(_) {
269
271
  "div",
270
272
  {
271
273
  className: "graph-modal-content m-0",
272
- dangerouslySetInnerHTML: typeof f == "string" ? { __html: Ce(f, k) } : void 0,
273
- children: typeof f == "function" ? f(k) : null
274
+ dangerouslySetInnerHTML: typeof y == "string" ? { __html: Ce(y, k) } : void 0,
275
+ children: typeof y == "function" ? y(k) : null
274
276
  }
275
277
  )
276
278
  }
277
279
  ) : null
278
280
  ] });
279
281
  }
280
- function Ye(_) {
282
+ function Ye(Y) {
281
283
  const {
282
- data: x,
283
- mapData: p = "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json",
284
- graphTitle: u,
284
+ data: p,
285
+ mapData: u = "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json",
286
+ graphTitle: f,
285
287
  colors: E,
286
288
  sources: O,
287
289
  graphDescription: l,
288
290
  height: i,
289
291
  width: s,
290
- footNote: Y = "The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.",
292
+ footNote: z = "The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.",
291
293
  colorDomain: K,
292
294
  colorLegendTitle: c,
293
295
  scaleType: H = "threshold",
294
- padding: z,
295
- mapNoDataColor: U = R.light.graphNoData,
296
+ padding: U,
297
+ mapNoDataColor: q = R.light.graphNoData,
296
298
  backgroundColor: v = !1,
297
299
  mapBorderColor: Q = R.light.grays["gray-500"],
298
300
  relativeHeight: d,
299
301
  tooltip: $,
300
302
  graphID: ee,
301
303
  mapProperty: te = "ISO3",
302
- dataDownload: f = !1,
304
+ dataDownload: y = !1,
303
305
  language: b = "en",
304
306
  minHeight: g = 0,
305
307
  theme: T = "light",
306
- ariaLabel: q,
308
+ ariaLabel: X,
307
309
  styles: h,
308
310
  classNames: w,
309
311
  autoRotate: A = !0,
310
312
  enableZoom: F = !0,
311
313
  globeMaterial: B,
312
- centerPoint: X = [0, 0],
314
+ centerPoint: V = [0, 0],
313
315
  atmosphereColor: oe = "#999",
314
316
  showColorScale: G = !0,
315
317
  resetSelectionOnDoubleClick: D = !0,
@@ -317,22 +319,22 @@ function Ye(_) {
317
319
  onSeriesMouseOver: k,
318
320
  onSeriesMouseClick: P,
319
321
  highlightedIds: re = [],
320
- scale: V = 1,
321
- globeOffset: Z = [0, 0],
322
+ scale: Z = 1,
323
+ globeOffset: J = [0, 0],
322
324
  polygonAltitude: ie = 0.01,
323
325
  globeCurvatureResolution: j = 4,
324
326
  atmosphereAltitude: ae = 0.15,
325
- lightColor: J = "#dce9fe",
327
+ lightColor: _ = "#dce9fe",
326
328
  fogSettings: se
327
- } = _, [e, o] = M(void 0), [r, m] = M(0), [y, C] = M(0), N = he(null);
329
+ } = Y, [e, o] = M(void 0), [r, m] = M(0), [x, C] = M(0), N = he(null);
328
330
  L(() => {
329
331
  const n = new ResizeObserver((I) => {
330
332
  m(s || I[0].target.clientWidth || 760), C(i || I[0].target.clientHeight || 480);
331
333
  });
332
334
  return N.current && (C(N.current.clientHeight || 480), m(N.current.clientWidth || 760), s || n.observe(N.current)), () => n.disconnect();
333
335
  }, [s, i]), L(() => {
334
- typeof p == "string" ? Le(p).then((I) => {
335
- if (p === "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json") {
336
+ typeof u == "string" ? Le(u).then((I) => {
337
+ if (u === "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json") {
336
338
  const me = I.features.map((S) => {
337
339
  if (S.geometry.type === "Polygon") {
338
340
  const le = [...S.geometry.coordinates[0]].reverse(), ce = { ...S.geometry, coordinates: [le] };
@@ -348,10 +350,10 @@ function Ye(_) {
348
350
  });
349
351
  o(me);
350
352
  } else o(I.features);
351
- }) : o(p.features);
352
- }, [p]);
353
- const ne = K || (H === "categorical" ? Me(x, "x") : Oe(
354
- x.map((n) => n.x),
353
+ }) : o(u.features);
354
+ }, [u]);
355
+ const ne = K || (H === "categorical" ? Me(p, "x") : Oe(
356
+ p.map((n) => n.x),
355
357
  E?.length || 4
356
358
  ));
357
359
  return /* @__PURE__ */ t.jsx(
@@ -371,14 +373,14 @@ function Ye(_) {
371
373
  ...v && v !== !0 ? { backgroundColor: v } : {}
372
374
  },
373
375
  id: ee,
374
- "aria-label": q || `${u ? `The graph shows ${u}. ` : ""}This is a map.${l ? ` ${l}` : ""}`,
376
+ "aria-label": X || `${f ? `The graph shows ${f}. ` : ""}This is a map.${l ? ` ${l}` : ""}`,
375
377
  children: /* @__PURE__ */ t.jsx(
376
378
  "div",
377
379
  {
378
380
  className: "flex grow",
379
- style: { padding: v ? z || "1rem" : z || 0 },
381
+ style: { padding: v ? U || "1rem" : U || 0 },
380
382
  children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
381
- u || l || f ? /* @__PURE__ */ t.jsx(
383
+ f || l || y ? /* @__PURE__ */ t.jsx(
382
384
  Ne,
383
385
  {
384
386
  styles: {
@@ -389,11 +391,11 @@ function Ye(_) {
389
391
  title: w?.title,
390
392
  description: w?.description
391
393
  },
392
- graphTitle: u,
394
+ graphTitle: f,
393
395
  graphDescription: l,
394
396
  width: s,
395
397
  graphDownload: void 0,
396
- dataDownload: f ? x.map((n) => n.data).filter((n) => n !== void 0).length > 0 ? x.map((n) => n.data).filter((n) => n !== void 0) : x.filter((n) => n !== void 0) : null
398
+ dataDownload: y ? p.map((n) => n.data).filter((n) => n !== void 0).length > 0 ? p.map((n) => n.data).filter((n) => n !== void 0) : p.filter((n) => n !== void 0) : null
397
399
  }
398
400
  ) : null,
399
401
  /* @__PURE__ */ t.jsx(
@@ -402,20 +404,20 @@ function Ye(_) {
402
404
  className: "flex flex-col grow justify-center leading-0",
403
405
  ref: N,
404
406
  "aria-label": "Map area",
405
- children: (s || r) && (i || y) && e ? /* @__PURE__ */ t.jsx(
407
+ children: (s || r) && (i || x) && e ? /* @__PURE__ */ t.jsx(
406
408
  Te,
407
409
  {
408
- data: x,
409
- globeOffset: Z,
410
+ data: p,
411
+ globeOffset: J,
410
412
  polygonData: e,
411
413
  colorDomain: ne,
412
414
  width: s || r,
413
415
  height: Math.max(
414
416
  g,
415
- i || (d ? g ? (s || r) * d > g ? (s || r) * d : g : (s || r) * d : y)
417
+ i || (d ? g ? (s || r) * d > g ? (s || r) * d : g : (s || r) * d : x)
416
418
  ),
417
419
  colors: E || (H === "categorical" ? R[T].sequentialColors[`neutralColorsx0${ne.length}`] : R[T].sequentialColors[`neutralColorsx0${ne.length + 1}`]),
418
- mapNoDataColor: U,
420
+ mapNoDataColor: q,
419
421
  categorical: H === "categorical",
420
422
  mapBorderColor: Q,
421
423
  tooltip: $,
@@ -434,13 +436,13 @@ function Ye(_) {
434
436
  detailsOnClick: a,
435
437
  onSeriesMouseOver: k,
436
438
  onSeriesMouseClick: P,
437
- scale: V,
439
+ scale: Z,
438
440
  polygonAltitude: ie,
439
- centerLat: X[0],
440
- centerLng: X[1],
441
+ centerLat: V[0],
442
+ centerLng: V[1],
441
443
  atmosphereAltitude: ae,
442
444
  globeCurvatureResolution: j,
443
- lightColor: J,
445
+ lightColor: _,
444
446
  fogSettings: se
445
447
  }
446
448
  ) : /* @__PURE__ */ t.jsx(
@@ -449,7 +451,7 @@ function Ye(_) {
449
451
  style: {
450
452
  height: `${Math.max(
451
453
  g,
452
- i || (d ? g ? (s || r) * d > g ? (s || r) * d : g : (s || r) * d : y)
454
+ i || (d ? g ? (s || r) * d > g ? (s || r) * d : g : (s || r) * d : x)
453
455
  )}px`
454
456
  },
455
457
  className: "flex items-center justify-center",
@@ -458,7 +460,7 @@ function Ye(_) {
458
460
  )
459
461
  }
460
462
  ),
461
- O || Y ? /* @__PURE__ */ t.jsx(
463
+ O || z ? /* @__PURE__ */ t.jsx(
462
464
  Se,
463
465
  {
464
466
  styles: { footnote: h?.footnote, source: h?.source },
@@ -467,7 +469,7 @@ function Ye(_) {
467
469
  source: w?.source
468
470
  },
469
471
  sources: O,
470
- footNote: Y,
472
+ footNote: z,
471
473
  width: s
472
474
  }
473
475
  ) : null
package/dist/ThreeDGlobe.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThreeDGlobe.js","sources":["../src/Components/Graphs/Maps/ThreeDGlobe/Graph.tsx","../src/Components/Graphs/Maps/ThreeDGlobe/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport Globe, { GlobeMethods } from 'react-globe.gl';\r\nimport isEqual from 'fast-deep-equal';\r\nimport { useEffect, useRef, useState } from 'react';\r\nimport { scaleOrdinal, scaleThreshold } from 'd3-scale';\r\nimport * as THREE from 'three';\r\nimport { Modal } from '@undp/design-system-react/Modal';\r\nimport { P } from '@undp/design-system-react/Typography';\r\n\r\nimport { ChoroplethMapDataType, ClassNameObject, FogDataType, StyleObject } from '@/Types';\r\nimport { Tooltip } from '@/Components/Elements/Tooltip';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n width: number;\r\n data: ChoroplethMapDataType[];\r\n autoRotate: number;\r\n enableZoom: boolean;\r\n categorical: boolean;\r\n colorDomain: number[] | string[];\r\n colors: string[];\r\n height: number;\r\n globeMaterial?: THREE.Material;\r\n polygonData: any;\r\n mapProperty: string;\r\n mapBorderColor: string;\r\n atmosphereColor: string;\r\n tooltip?: string | ((_d: any) => React.ReactNode);\r\n styles?: StyleObject;\r\n classNames?: ClassNameObject;\r\n onSeriesMouseOver?: (_d: any) => void;\r\n onSeriesMouseClick?: (_d: any) => void;\r\n mapNoDataColor: string;\r\n colorLegendTitle?: string;\r\n showColorScale: boolean;\r\n hoverStrokeColor: string;\r\n detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n resetSelectionOnDoubleClick: boolean;\r\n highlightedIds: string[];\r\n scale: number;\r\n globeOffset: [number, number];\r\n polygonAltitude: number;\r\n centerLng: number;\r\n centerLat: number;\r\n atmosphereAltitude: number;\r\n globeCurvatureResolution: number;\r\n lightColor: string;\r\n fogSettings?: FogDataType;\r\n}\r\n\r\nfunction Graph(props: Props) {\r\n const {\r\n width,\r\n autoRotate,\r\n data,\r\n enableZoom,\r\n categorical,\r\n colorDomain,\r\n colors,\r\n globeMaterial,\r\n height,\r\n polygonData,\r\n mapProperty,\r\n mapBorderColor,\r\n atmosphereColor,\r\n tooltip,\r\n styles,\r\n classNames,\r\n mapNoDataColor,\r\n colorLegendTitle,\r\n showColorScale,\r\n hoverStrokeColor,\r\n detailsOnClick,\r\n onSeriesMouseClick,\r\n onSeriesMouseOver,\r\n resetSelectionOnDoubleClick,\r\n highlightedIds,\r\n scale,\r\n globeOffset,\r\n polygonAltitude,\r\n centerLng,\r\n centerLat,\r\n atmosphereAltitude,\r\n globeCurvatureResolution,\r\n lightColor,\r\n fogSettings,\r\n } = props;\r\n const globeEl = useRef<GlobeMethods | undefined>(undefined);\r\n const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n const [showLegend, setShowLegend] = useState(!(width < 680));\r\n const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\r\n const [mouseOverData, setMouseOverData] = useState<ChoroplethMapDataType | undefined>(undefined);\r\n const colorScale = categorical\r\n ? scaleOrdinal<number | string, string>().domain(colorDomain).range(colors)\r\n : scaleThreshold<number, string>()\r\n .domain(colorDomain as number[])\r\n .range(colors);\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n globeEl.current.controls().enableZoom = enableZoom;\r\n }\r\n }, [enableZoom]);\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n if (mouseOverData) {\r\n globeEl.current.controls().autoRotate = false;\r\n } else {\r\n globeEl.current.controls().autoRotate = autoRotate === 0 ? false : true;\r\n globeEl.current.controls().autoRotateSpeed = autoRotate;\r\n }\r\n }\r\n }, [mouseOverData, autoRotate]);\r\n\r\n useEffect(() => {\r\n const canvas = globeEl.current?.renderer().domElement;\r\n if (!canvas) return;\r\n\r\n const handleMouseMove = (e: MouseEvent) => {\r\n setMousePos({ x: e.clientX, y: e.clientY });\r\n };\r\n\r\n canvas.addEventListener('mousemove', handleMouseMove);\r\n return () => canvas.removeEventListener('mousemove', handleMouseMove);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n globeEl.current.pointOfView({ lat: centerLat, lng: centerLng, altitude: scale }, 1000);\r\n }\r\n }, [scale, centerLng, centerLat]);\r\n const materials =\r\n globeMaterial ||\r\n new THREE.MeshBasicMaterial({\r\n color: '#FFF',\r\n });\r\n useEffect(() => {\r\n if (!globeEl.current) return;\r\n\r\n const scene = globeEl.current.scene();\r\n scene.children\r\n .filter(d => d.type === 'DirectionalLight' || d.type === 'AmbientLight')\r\n .forEach(d => scene.remove(d));\r\n const ambientLight = new THREE.AmbientLight(lightColor, 0.2);\r\n scene.add(ambientLight);\r\n setTimeout(() => {\r\n const polygons = scene.children[3]?.children[0]?.children[4]?.children || [];\r\n polygons.forEach(d => {\r\n const line = d.children[1];\r\n if (line) line.renderOrder = 2;\r\n });\r\n }, 300);\r\n if (fogSettings)\r\n scene.fog = new THREE.Fog(fogSettings.color, fogSettings.near, fogSettings.far);\r\n }, [lightColor, scale, fogSettings]);\r\n return (\r\n <div className='relative'>\r\n <Globe\r\n ref={globeEl}\r\n globeOffset={globeOffset}\r\n lineHoverPrecision={0}\r\n polygonsData={polygonData}\r\n polygonAltitude={(polygon: any) =>\r\n highlightedIds.includes(polygon?.properties?.[mapProperty])\r\n ? 0.1\r\n : polygon?.properties?.[mapProperty] === mouseOverData?.id\r\n ? 0.01\r\n : polygonAltitude\r\n }\r\n polygonCapColor={(polygon: any) => {\r\n const id = polygon?.properties?.[mapProperty];\r\n const val = data.find(el => el.id === id)?.x;\r\n if (val !== undefined && val !== null) {\r\n return colorScale(val as any);\r\n }\r\n return mapNoDataColor;\r\n }}\r\n polygonSideColor={(polygon: any) => {\r\n const id = polygon?.properties?.[mapProperty];\r\n const val = data.find(el => el.id === id)?.x;\r\n const color = val !== undefined && val !== null ? colorScale(val as any) : mapNoDataColor;\r\n return highlightedIds.includes(polygon?.properties?.[mapProperty])\r\n ? color\r\n : 'rgba(100,100,100,0)';\r\n }}\r\n polygonStrokeColor={(polygon: any) =>\r\n polygon?.properties?.[mapProperty] === mouseOverData?.id\r\n ? hoverStrokeColor\r\n : mapBorderColor\r\n }\r\n onPolygonClick={(polygon: any) => {\r\n const clickedData = polygon?.properties?.[mapProperty]\r\n ? data.find(el => el.id === polygon?.properties?.[mapProperty])\r\n : undefined;\r\n if (onSeriesMouseClick || detailsOnClick) {\r\n if (\r\n isEqual(mouseClickData, clickedData) &&\r\n resetSelectionOnDoubleClick &&\r\n clickedData\r\n ) {\r\n setMouseClickData(undefined);\r\n onSeriesMouseClick?.(undefined);\r\n } else {\r\n setMouseClickData(clickedData);\r\n onSeriesMouseClick?.(clickedData);\r\n }\r\n }\r\n setMouseClickData(clickedData);\r\n onSeriesMouseClick?.(clickedData);\r\n }}\r\n onPolygonHover={(polygon: any) => {\r\n const hoverData = polygon?.properties?.[mapProperty]\r\n ? data.find(el => el.id === polygon?.properties?.[mapProperty])\r\n : undefined;\r\n setMouseOverData(hoverData);\r\n onSeriesMouseOver?.(hoverData);\r\n }}\r\n atmosphereColor={atmosphereColor}\r\n atmosphereAltitude={atmosphereAltitude}\r\n globeCurvatureResolution={globeCurvatureResolution}\r\n globeMaterial={materials}\r\n backgroundColor='rgba(0, 0, 0, 0)'\r\n polygonsTransitionDuration={100}\r\n onGlobeReady={() => {\r\n if (globeEl.current) {\r\n globeEl.current.pointOfView({\r\n lat: centerLat,\r\n lng: centerLng,\r\n });\r\n const scene = globeEl.current.scene();\r\n setTimeout(() => {\r\n scene.children\r\n .filter(d => d.type === 'DirectionalLight')\r\n .map(d => {\r\n scene.remove(d);\r\n });\r\n const ambientLight = new THREE.AmbientLight(lightColor, 0.2);\r\n scene.add(ambientLight);\r\n\r\n const polygons = scene.children[3]?.children[0]?.children[4]?.children || [];\r\n polygons.forEach(d => {\r\n const line = d.children[1];\r\n line.renderOrder = 2;\r\n });\r\n }, 300);\r\n const light = new THREE.DirectionalLight(0xffffff, 0.1);\r\n const camera = globeEl.current.camera();\r\n light.position.set(0, 0, 1);\r\n camera.add(light);\r\n scene.add(camera);\r\n }\r\n }}\r\n />\r\n {showColorScale === false ? null : (\r\n <div className='absolute left-4 bottom-4'>\r\n {showLegend ? (\r\n <>\r\n <div\r\n style={{\r\n backgroundColor: 'rgba(240,240,240, 0.7)',\r\n border: '1px solid var(--gray-400)',\r\n borderRadius: '999px',\r\n width: '24px',\r\n height: '24px',\r\n padding: '3px',\r\n cursor: 'pointer',\r\n zIndex: 10,\r\n position: 'absolute',\r\n right: '-0.75rem',\r\n top: '-0.75rem',\r\n }}\r\n onClick={() => {\r\n setShowLegend(false);\r\n }}\r\n >\r\n <X />\r\n </div>\r\n <div\r\n className='p-2'\r\n style={{\r\n backgroundColor: 'rgba(240,240,240, 0.7)',\r\n width: categorical ? undefined : '340px',\r\n }}\r\n >\r\n {colorLegendTitle && colorLegendTitle !== '' ? (\r\n <P\r\n size='xs'\r\n marginBottom='xs'\r\n className='p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300'\r\n style={{\r\n display: '-webkit-box',\r\n WebkitLineClamp: '1',\r\n WebkitBoxOrient: 'vertical',\r\n }}\r\n >\r\n {colorLegendTitle}\r\n </P>\r\n ) : null}\r\n {!categorical ? (\r\n <svg width='100%' viewBox='0 0 320 30' direction='ltr'>\r\n <g>\r\n {colorDomain.map((d, i) => (\r\n <g key={i} className='cursor-pointer'>\r\n <rect\r\n x={(i * 320) / colors.length + 1}\r\n y={1}\r\n width={320 / colors.length - 2}\r\n height={8}\r\n style={{\r\n fill: colors[i],\r\n stroke: colors[i],\r\n }}\r\n />\r\n <text\r\n x={((i + 1) * 320) / colors.length}\r\n y={25}\r\n className='fill-primary-gray-700 dark:fill-primary-gray-300 text-xs'\r\n style={{ textAnchor: 'middle' }}\r\n >\r\n {numberFormattingFunction(d as number, 'NA')}\r\n </text>\r\n </g>\r\n ))}\r\n <g>\r\n <rect\r\n x={(colorDomain.length * 320) / colors.length + 1}\r\n y={1}\r\n width={320 / colors.length - 2}\r\n height={8}\r\n style={{\r\n fill: colors[colorDomain.length],\r\n stroke: colors[colorDomain.length],\r\n }}\r\n />\r\n </g>\r\n </g>\r\n </svg>\r\n ) : (\r\n <div className='flex flex-col gap-3'>\r\n {colorDomain.map((d, i) => (\r\n <div key={i} className='flex gap-2 items-center'>\r\n <div\r\n className='w-2 h-2 rounded-full'\r\n style={{ backgroundColor: colors[i % colors.length] }}\r\n />\r\n <P size='sm' marginBottom='none' leading='none'>\r\n {d}\r\n </P>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n ) : (\r\n <button\r\n type='button'\r\n className='mb-0 border-0 bg-transparent p-0 self-start'\r\n onClick={() => {\r\n setShowLegend(true);\r\n }}\r\n >\r\n <div className='items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500'>\r\n Show Legend\r\n </div>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {mouseOverData && tooltip ? (\r\n <Tooltip\r\n data={mouseOverData}\r\n body={tooltip}\r\n xPos={mousePos.x}\r\n yPos={mousePos.y}\r\n backgroundStyle={styles?.tooltip}\r\n className={classNames?.tooltip}\r\n />\r\n ) : null}\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 </div>\r\n );\r\n}\r\n\r\nexport default Graph;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\nimport * as THREE from 'three';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport Globe from 'react-globe.gl';\r\n\r\nimport Graph from './Graph';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport {\r\n ChoroplethMapDataType,\r\n ClassNameObject,\r\n FogDataType,\r\n Languages,\r\n ScaleDataType,\r\n SourcesDataType,\r\n StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { getUniqValue } from '@/Utils/getUniqValue';\r\nimport { getJenks } from '@/Utils/getJenks';\r\n\r\ntype GlobeProps = React.ComponentProps<typeof Globe>;\r\ninterface Props extends Partial<Omit<GlobeProps, 'backgroundColor'>> {\r\n // Data\r\n /** Array of data objects */\r\n data: ChoroplethMapDataType[];\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 /** Colors for the choropleth map */\r\n colors?: string[];\r\n /** Domain of colors for the graph */\r\n colorDomain?: number[] | string[];\r\n /** Title for the color legend */\r\n colorLegendTitle?: string;\r\n /** Color for the areas where data is no available */\r\n mapNoDataColor?: 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\r\n // Graph Parameters\r\n /** Map data as an object in geoJson format or a url for geoJson */\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n mapData?: any;\r\n /** Stroke color of the regions in the map */\r\n mapBorderColor?: string;\r\n /** Center point of the map */\r\n centerPoint?: [number, number];\r\n /** Defines if the globe rotates automatically */\r\n autoRotate?: number | boolean;\r\n /** Defines the material property applied to the sphere of the globe */\r\n globeMaterial?: THREE.Material;\r\n /** Defines the colo of the glow around the globe */\r\n atmosphereColor?: string;\r\n /** Defines if the globe can be zoomed when scrolled */\r\n enableZoom?: boolean;\r\n /** Position offset of the globe relative to the canvas center */\r\n globeOffset?: [number, number];\r\n /** Defines the camera distance from Earth. This helps in defining the default size of the globe. Smaller = closer camera therefore the globe is bigger) */\r\n scale?: number;\r\n /** Defines the spacing between the country shape polygon with the sphere */\r\n polygonAltitude?: number;\r\n /** Scale for the colors */\r\n scaleType?: Exclude<ScaleDataType, 'linear'>;\r\n /** Toggles if the color scaling is categorical or not */\r\n categorical?: boolean;\r\n /** Toggle visibility of color scale. */\r\n showColorScale?: boolean;\r\n /** The max altitude of the atmosphere, in terms of globe radius units. */\r\n atmosphereAltitude?: number;\r\n /** Resolution in angular degrees of the sphere curvature. The finer the resolution, the more the globe is fragmented into smaller faces to approximate the spheric surface, at the cost of performance. */\r\n globeCurvatureResolution?: number;\r\n /** Defines the color of the light and atmosphere. */\r\n lightColor?: string;\r\n /** Defines fog settings for the scene. */\r\n fogSettings?: FogDataType;\r\n /** Property in the property object in mapData geoJson object is used to match to the id in the data object */\r\n mapProperty?: string;\r\n /** Countries or regions to be highlighted */\r\n highlightedIds?: string[];\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\n/** For using these maps you will have to install [`three`](https://threejs.org/manual/) and [react-globe.gl](https://www.npmjs.com/package/react-globe.gl) package to your project */\r\nexport function ThreeDGlobe(props: Props) {\r\n const {\r\n data,\r\n mapData = 'https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json',\r\n graphTitle,\r\n colors,\r\n sources,\r\n graphDescription,\r\n height,\r\n width,\r\n footNote = 'The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.',\r\n colorDomain,\r\n colorLegendTitle,\r\n scaleType = 'threshold',\r\n padding,\r\n mapNoDataColor = Colors.light.graphNoData,\r\n backgroundColor = false,\r\n mapBorderColor = Colors.light.grays['gray-500'],\r\n relativeHeight,\r\n tooltip,\r\n graphID,\r\n mapProperty = 'ISO3',\r\n dataDownload = false,\r\n language = 'en',\r\n minHeight = 0,\r\n theme = 'light',\r\n ariaLabel,\r\n styles,\r\n classNames,\r\n autoRotate = true,\r\n enableZoom = true,\r\n globeMaterial,\r\n centerPoint = [0, 0],\r\n atmosphereColor = '#999',\r\n showColorScale = true,\r\n resetSelectionOnDoubleClick = true,\r\n detailsOnClick,\r\n onSeriesMouseOver,\r\n onSeriesMouseClick,\r\n highlightedIds = [],\r\n scale = 1,\r\n globeOffset = [0, 0],\r\n polygonAltitude = 0.01,\r\n globeCurvatureResolution = 4,\r\n atmosphereAltitude = 0.15,\r\n lightColor = '#dce9fe',\r\n fogSettings,\r\n } = props;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const [mapShape, setMapShape] = useState<any>(undefined);\r\n\r\n const [svgWidth, setSvgWidth] = useState(0);\r\n const [svgHeight, setSvgHeight] = useState(0);\r\n\r\n const graphDiv = useRef<HTMLDivElement>(null);\r\n\r\n useEffect(() => {\r\n const resizeObserver = new ResizeObserver(entries => {\r\n setSvgWidth(width || entries[0].target.clientWidth || 760);\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 || 760);\r\n if (!width) resizeObserver.observe(graphDiv.current);\r\n }\r\n return () => resizeObserver.disconnect();\r\n }, [width, height]);\r\n useEffect(() => {\r\n if (typeof mapData === 'string') {\r\n const fetchData = fetchAndParseJSON(mapData);\r\n fetchData.then(d => {\r\n if (\r\n mapData ===\r\n 'https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json'\r\n ) {\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const features = d.features.map((el: any) => {\r\n if (el.geometry.type === 'Polygon') {\r\n const reversed = [...el.geometry.coordinates[0]].reverse();\r\n const geometry = { ...el.geometry, coordinates: [reversed] };\r\n return { ...el, geometry };\r\n }\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const coord: any = [];\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n el.geometry.coordinates.forEach((c: any) => {\r\n const reversed = [...c[0]].reverse();\r\n coord.push([reversed]);\r\n });\r\n const geometry = { ...el.geometry, coordinates: coord };\r\n return { ...el, geometry };\r\n });\r\n setMapShape(features);\r\n } else setMapShape(d.features);\r\n });\r\n } else {\r\n setMapShape(mapData.features);\r\n }\r\n }, [mapData]);\r\n\r\n const domain =\r\n colorDomain ||\r\n (scaleType === 'categorical'\r\n ? getUniqValue(data, 'x')\r\n : getJenks(\r\n data.map(d => d.x as number | null | undefined),\r\n colors?.length || 4,\r\n ));\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 aria-label={\r\n ariaLabel ||\r\n `${\r\n graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n }This is a map.${graphDescription ? ` ${graphDescription}` : ''}`\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 || 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={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\r\n className='flex flex-col grow justify-center leading-0'\r\n ref={graphDiv}\r\n aria-label='Map area'\r\n >\r\n {(width || svgWidth) && (height || svgHeight) && mapShape ? (\r\n <Graph\r\n data={data}\r\n globeOffset={globeOffset}\r\n polygonData={mapShape}\r\n colorDomain={domain}\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 colors={\r\n colors ||\r\n (scaleType === 'categorical'\r\n ? Colors[theme].sequentialColors[\r\n `neutralColorsx0${domain.length as 4 | 5 | 6 | 7 | 8 | 9}`\r\n ]\r\n : Colors[theme].sequentialColors[\r\n `neutralColorsx0${(domain.length + 1) as 4 | 5 | 6 | 7 | 8 | 9}`\r\n ])\r\n }\r\n mapNoDataColor={mapNoDataColor}\r\n categorical={scaleType === 'categorical'}\r\n mapBorderColor={mapBorderColor}\r\n tooltip={tooltip}\r\n mapProperty={mapProperty}\r\n styles={styles}\r\n classNames={classNames}\r\n autoRotate={autoRotate === true ? 1.5 : autoRotate === false ? 0 : autoRotate}\r\n enableZoom={enableZoom}\r\n globeMaterial={globeMaterial}\r\n atmosphereColor={atmosphereColor}\r\n colorLegendTitle={colorLegendTitle}\r\n showColorScale={showColorScale}\r\n hoverStrokeColor={\r\n theme === 'light'\r\n ? Colors.light.grays['gray-700']\r\n : Colors.light.grays['gray-300']\r\n }\r\n highlightedIds={highlightedIds}\r\n resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\r\n detailsOnClick={detailsOnClick}\r\n onSeriesMouseOver={onSeriesMouseOver}\r\n onSeriesMouseClick={onSeriesMouseClick}\r\n scale={scale}\r\n polygonAltitude={polygonAltitude}\r\n centerLat={centerPoint[0]}\r\n centerLng={centerPoint[1]}\r\n atmosphereAltitude={atmosphereAltitude}\r\n globeCurvatureResolution={globeCurvatureResolution}\r\n lightColor={lightColor}\r\n fogSettings={fogSettings}\r\n />\r\n ) : (\r\n <div\r\n style={{\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 )}px`,\r\n }}\r\n className='flex items-center justify-center'\r\n >\r\n <Spinner aria-label='Loading graph' />\r\n </div>\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":["Graph","props","width","autoRotate","data","enableZoom","categorical","colorDomain","colors","globeMaterial","height","polygonData","mapProperty","mapBorderColor","atmosphereColor","tooltip","styles","classNames","mapNoDataColor","colorLegendTitle","showColorScale","hoverStrokeColor","detailsOnClick","onSeriesMouseClick","onSeriesMouseOver","resetSelectionOnDoubleClick","highlightedIds","scale","globeOffset","polygonAltitude","centerLng","centerLat","atmosphereAltitude","globeCurvatureResolution","lightColor","fogSettings","globeEl","useRef","mouseClickData","setMouseClickData","useState","showLegend","setShowLegend","mousePos","setMousePos","mouseOverData","setMouseOverData","colorScale","scaleOrdinal","scaleThreshold","useEffect","canvas","handleMouseMove","e","materials","THREE","scene","d","ambientLight","line","jsxs","jsx","Globe","polygon","id","val","el","color","clickedData","isEqual","hoverData","light","camera","Fragment","X","P","i","numberFormattingFunction","Tooltip","Modal","string2HTML","ThreeDGlobe","mapData","graphTitle","sources","graphDescription","footNote","scaleType","padding","Colors","backgroundColor","relativeHeight","graphID","dataDownload","language","minHeight","theme","ariaLabel","centerPoint","mapShape","setMapShape","svgWidth","setSvgWidth","svgHeight","setSvgHeight","graphDiv","resizeObserver","entries","fetchAndParseJSON","features","reversed","geometry","coord","c","domain","getUniqValue","getJenks","cn","GraphHeader","Spinner","GraphFooter"],"mappings":"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"}
1
+ {"version":3,"file":"ThreeDGlobe.js","sources":["../src/Components/Graphs/Maps/ThreeDGlobe/Graph.tsx","../src/Components/Graphs/Maps/ThreeDGlobe/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport Globe, { GlobeMethods } from 'react-globe.gl';\r\nimport isEqual from 'fast-deep-equal';\r\nimport { useEffect, useRef, useState } from 'react';\r\nimport { scaleOrdinal, scaleThreshold } from 'd3-scale';\r\nimport * as THREE from 'three';\r\nimport { Modal } from '@undp/design-system-react/Modal';\r\nimport { P } from '@undp/design-system-react/Typography';\r\n\r\nimport { ChoroplethMapDataType, ClassNameObject, FogDataType, StyleObject } from '@/Types';\r\nimport { Tooltip } from '@/Components/Elements/Tooltip';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n width: number;\r\n data: ChoroplethMapDataType[];\r\n autoRotate: number;\r\n enableZoom: boolean;\r\n categorical: boolean;\r\n colorDomain: number[] | string[];\r\n colors: string[];\r\n height: number;\r\n globeMaterial?: THREE.Material;\r\n polygonData: any;\r\n mapProperty: string;\r\n mapBorderColor: string;\r\n atmosphereColor: string;\r\n tooltip?: string | ((_d: any) => React.ReactNode);\r\n styles?: StyleObject;\r\n classNames?: ClassNameObject;\r\n onSeriesMouseOver?: (_d: any) => void;\r\n onSeriesMouseClick?: (_d: any) => void;\r\n mapNoDataColor: string;\r\n colorLegendTitle?: string;\r\n showColorScale: boolean;\r\n hoverStrokeColor: string;\r\n detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n resetSelectionOnDoubleClick: boolean;\r\n highlightedIds: string[];\r\n scale: number;\r\n globeOffset: [number, number];\r\n polygonAltitude: number;\r\n centerLng: number;\r\n centerLat: number;\r\n atmosphereAltitude: number;\r\n globeCurvatureResolution: number;\r\n lightColor: string;\r\n fogSettings?: FogDataType;\r\n}\r\n\r\nfunction Graph(props: Props) {\r\n const {\r\n width,\r\n autoRotate,\r\n data,\r\n enableZoom,\r\n categorical,\r\n colorDomain,\r\n colors,\r\n globeMaterial,\r\n height,\r\n polygonData,\r\n mapProperty,\r\n mapBorderColor,\r\n atmosphereColor,\r\n tooltip,\r\n styles,\r\n classNames,\r\n mapNoDataColor,\r\n colorLegendTitle,\r\n showColorScale,\r\n hoverStrokeColor,\r\n detailsOnClick,\r\n onSeriesMouseClick,\r\n onSeriesMouseOver,\r\n resetSelectionOnDoubleClick,\r\n highlightedIds,\r\n scale,\r\n globeOffset,\r\n polygonAltitude,\r\n centerLng,\r\n centerLat,\r\n atmosphereAltitude,\r\n globeCurvatureResolution,\r\n lightColor,\r\n fogSettings,\r\n } = props;\r\n const globeEl = useRef<GlobeMethods | undefined>(undefined);\r\n const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n const [showLegend, setShowLegend] = useState(!(width < 680));\r\n const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\r\n const [mouseOverData, setMouseOverData] = useState<ChoroplethMapDataType | undefined>(undefined);\r\n const colorScale = categorical\r\n ? scaleOrdinal<number | string, string>().domain(colorDomain).range(colors)\r\n : scaleThreshold<number, string>()\r\n .domain(colorDomain as number[])\r\n .range(colors);\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n globeEl.current.controls().enableZoom = enableZoom;\r\n }\r\n }, [enableZoom]);\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n if (mouseOverData) {\r\n globeEl.current.controls().autoRotate = false;\r\n } else {\r\n globeEl.current.controls().autoRotate = autoRotate === 0 ? false : true;\r\n globeEl.current.controls().autoRotateSpeed = autoRotate;\r\n }\r\n }\r\n }, [mouseOverData, autoRotate]);\r\n\r\n useEffect(() => {\r\n const canvas = globeEl.current?.renderer().domElement;\r\n if (!canvas) return;\r\n\r\n const handleMouseMove = (e: MouseEvent) => {\r\n setMousePos({ x: e.clientX, y: e.clientY });\r\n };\r\n\r\n canvas.addEventListener('mousemove', handleMouseMove);\r\n return () => canvas.removeEventListener('mousemove', handleMouseMove);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (globeEl.current) {\r\n globeEl.current.pointOfView({ lat: centerLat, lng: centerLng, altitude: scale }, 1000);\r\n }\r\n }, [scale, centerLng, centerLat]);\r\n const materials =\r\n globeMaterial ||\r\n new THREE.MeshBasicMaterial({\r\n color: '#FFF',\r\n });\r\n useEffect(() => {\r\n if (!globeEl.current) return;\r\n\r\n const scene = globeEl.current.scene();\r\n scene.children\r\n .filter(d => d.type === 'DirectionalLight' || d.type === 'AmbientLight')\r\n .forEach(d => scene.remove(d));\r\n const ambientLight = new THREE.AmbientLight(lightColor, 0.2);\r\n scene.add(ambientLight);\r\n setTimeout(() => {\r\n const polygons = scene.children[3]?.children[0]?.children[4]?.children || [];\r\n polygons.forEach(d => {\r\n const line = d.children[1];\r\n if (line) line.renderOrder = 2;\r\n });\r\n }, 300);\r\n if (fogSettings)\r\n scene.fog = new THREE.Fog(fogSettings.color, fogSettings.near, fogSettings.far);\r\n }, [lightColor, scale, fogSettings]);\r\n return (\r\n <div className='relative'>\r\n <Globe\r\n ref={globeEl}\r\n height={height}\r\n width={width}\r\n globeOffset={globeOffset}\r\n lineHoverPrecision={0}\r\n polygonsData={polygonData}\r\n polygonAltitude={(polygon: any) =>\r\n highlightedIds.includes(polygon?.properties?.[mapProperty])\r\n ? 0.1\r\n : polygon?.properties?.[mapProperty] === mouseOverData?.id\r\n ? 0.01\r\n : polygonAltitude\r\n }\r\n polygonCapColor={(polygon: any) => {\r\n const id = polygon?.properties?.[mapProperty];\r\n const val = data.find(el => el.id === id)?.x;\r\n if (val !== undefined && val !== null) {\r\n return colorScale(val as any);\r\n }\r\n return mapNoDataColor;\r\n }}\r\n polygonSideColor={(polygon: any) => {\r\n const id = polygon?.properties?.[mapProperty];\r\n const val = data.find(el => el.id === id)?.x;\r\n const color = val !== undefined && val !== null ? colorScale(val as any) : mapNoDataColor;\r\n return highlightedIds.includes(polygon?.properties?.[mapProperty])\r\n ? color\r\n : 'rgba(100,100,100,0)';\r\n }}\r\n polygonStrokeColor={(polygon: any) =>\r\n polygon?.properties?.[mapProperty] === mouseOverData?.id\r\n ? hoverStrokeColor\r\n : mapBorderColor\r\n }\r\n onPolygonClick={(polygon: any) => {\r\n const clickedData = polygon?.properties?.[mapProperty]\r\n ? data.find(el => el.id === polygon?.properties?.[mapProperty])\r\n : undefined;\r\n if (onSeriesMouseClick || detailsOnClick) {\r\n if (\r\n isEqual(mouseClickData, clickedData) &&\r\n resetSelectionOnDoubleClick &&\r\n clickedData\r\n ) {\r\n setMouseClickData(undefined);\r\n onSeriesMouseClick?.(undefined);\r\n } else {\r\n setMouseClickData(clickedData);\r\n onSeriesMouseClick?.(clickedData);\r\n }\r\n }\r\n setMouseClickData(clickedData);\r\n onSeriesMouseClick?.(clickedData);\r\n }}\r\n onPolygonHover={(polygon: any) => {\r\n const hoverData = polygon?.properties?.[mapProperty]\r\n ? data.find(el => el.id === polygon?.properties?.[mapProperty])\r\n : undefined;\r\n setMouseOverData(hoverData);\r\n onSeriesMouseOver?.(hoverData);\r\n }}\r\n atmosphereColor={atmosphereColor}\r\n atmosphereAltitude={atmosphereAltitude}\r\n globeCurvatureResolution={globeCurvatureResolution}\r\n globeMaterial={materials}\r\n backgroundColor='rgba(0, 0, 0, 0)'\r\n polygonsTransitionDuration={100}\r\n onGlobeReady={() => {\r\n if (globeEl.current) {\r\n globeEl.current.pointOfView({\r\n lat: centerLat,\r\n lng: centerLng,\r\n });\r\n const scene = globeEl.current.scene();\r\n setTimeout(() => {\r\n scene.children\r\n .filter(d => d.type === 'DirectionalLight')\r\n .map(d => {\r\n scene.remove(d);\r\n });\r\n const ambientLight = new THREE.AmbientLight(lightColor, 0.2);\r\n scene.add(ambientLight);\r\n\r\n const polygons = scene.children[3]?.children[0]?.children[4]?.children || [];\r\n polygons.forEach(d => {\r\n const line = d.children[1];\r\n line.renderOrder = 2;\r\n });\r\n }, 300);\r\n const light = new THREE.DirectionalLight(0xffffff, 0.1);\r\n const camera = globeEl.current.camera();\r\n light.position.set(0, 0, 1);\r\n camera.add(light);\r\n scene.add(camera);\r\n }\r\n }}\r\n />\r\n {showColorScale === false ? null : (\r\n <div className='absolute left-4 bottom-4'>\r\n {showLegend ? (\r\n <>\r\n <div\r\n style={{\r\n backgroundColor: 'rgba(240,240,240, 0.7)',\r\n border: '1px solid var(--gray-400)',\r\n borderRadius: '999px',\r\n width: '24px',\r\n height: '24px',\r\n padding: '3px',\r\n cursor: 'pointer',\r\n zIndex: 10,\r\n position: 'absolute',\r\n right: '-0.75rem',\r\n top: '-0.75rem',\r\n }}\r\n onClick={() => {\r\n setShowLegend(false);\r\n }}\r\n >\r\n <X />\r\n </div>\r\n <div\r\n className='p-2'\r\n style={{\r\n backgroundColor: 'rgba(240,240,240, 0.7)',\r\n width: categorical ? undefined : '340px',\r\n }}\r\n >\r\n {colorLegendTitle && colorLegendTitle !== '' ? (\r\n <P\r\n size='xs'\r\n marginBottom='xs'\r\n className='p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300'\r\n style={{\r\n display: '-webkit-box',\r\n WebkitLineClamp: '1',\r\n WebkitBoxOrient: 'vertical',\r\n }}\r\n >\r\n {colorLegendTitle}\r\n </P>\r\n ) : null}\r\n {!categorical ? (\r\n <svg width='100%' viewBox='0 0 320 30' direction='ltr'>\r\n <g>\r\n {colorDomain.map((d, i) => (\r\n <g key={i} className='cursor-pointer'>\r\n <rect\r\n x={(i * 320) / colors.length + 1}\r\n y={1}\r\n width={320 / colors.length - 2}\r\n height={8}\r\n style={{\r\n fill: colors[i],\r\n stroke: colors[i],\r\n }}\r\n />\r\n <text\r\n x={((i + 1) * 320) / colors.length}\r\n y={25}\r\n className='fill-primary-gray-700 dark:fill-primary-gray-300 text-xs'\r\n style={{ textAnchor: 'middle' }}\r\n >\r\n {numberFormattingFunction(d as number, 'NA')}\r\n </text>\r\n </g>\r\n ))}\r\n <g>\r\n <rect\r\n x={(colorDomain.length * 320) / colors.length + 1}\r\n y={1}\r\n width={320 / colors.length - 2}\r\n height={8}\r\n style={{\r\n fill: colors[colorDomain.length],\r\n stroke: colors[colorDomain.length],\r\n }}\r\n />\r\n </g>\r\n </g>\r\n </svg>\r\n ) : (\r\n <div className='flex flex-col gap-3'>\r\n {colorDomain.map((d, i) => (\r\n <div key={i} className='flex gap-2 items-center'>\r\n <div\r\n className='w-2 h-2 rounded-full'\r\n style={{ backgroundColor: colors[i % colors.length] }}\r\n />\r\n <P size='sm' marginBottom='none' leading='none'>\r\n {d}\r\n </P>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n ) : (\r\n <button\r\n type='button'\r\n className='mb-0 border-0 bg-transparent p-0 self-start'\r\n onClick={() => {\r\n setShowLegend(true);\r\n }}\r\n >\r\n <div className='items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500'>\r\n Show Legend\r\n </div>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {mouseOverData && tooltip ? (\r\n <Tooltip\r\n data={mouseOverData}\r\n body={tooltip}\r\n xPos={mousePos.x}\r\n yPos={mousePos.y}\r\n backgroundStyle={styles?.tooltip}\r\n className={classNames?.tooltip}\r\n />\r\n ) : null}\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 </div>\r\n );\r\n}\r\n\r\nexport default Graph;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\nimport * as THREE from 'three';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport Globe from 'react-globe.gl';\r\n\r\nimport Graph from './Graph';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport {\r\n ChoroplethMapDataType,\r\n ClassNameObject,\r\n FogDataType,\r\n Languages,\r\n ScaleDataType,\r\n SourcesDataType,\r\n StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { getUniqValue } from '@/Utils/getUniqValue';\r\nimport { getJenks } from '@/Utils/getJenks';\r\n\r\ntype GlobeProps = React.ComponentProps<typeof Globe>;\r\ninterface Props extends Partial<Omit<GlobeProps, 'backgroundColor'>> {\r\n // Data\r\n /** Array of data objects */\r\n data: ChoroplethMapDataType[];\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 /** Colors for the choropleth map */\r\n colors?: string[];\r\n /** Domain of colors for the graph */\r\n colorDomain?: number[] | string[];\r\n /** Title for the color legend */\r\n colorLegendTitle?: string;\r\n /** Color for the areas where data is no available */\r\n mapNoDataColor?: 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\r\n // Graph Parameters\r\n /** Map data as an object in geoJson format or a url for geoJson */\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n mapData?: any;\r\n /** Stroke color of the regions in the map */\r\n mapBorderColor?: string;\r\n /** Center point of the map */\r\n centerPoint?: [number, number];\r\n /** Defines if the globe rotates automatically */\r\n autoRotate?: number | boolean;\r\n /** Defines the material property applied to the sphere of the globe */\r\n globeMaterial?: THREE.Material;\r\n /** Defines the colo of the glow around the globe */\r\n atmosphereColor?: string;\r\n /** Defines if the globe can be zoomed when scrolled */\r\n enableZoom?: boolean;\r\n /** Position offset of the globe relative to the canvas center */\r\n globeOffset?: [number, number];\r\n /** Defines the camera distance from Earth. This helps in defining the default size of the globe. Smaller = closer camera therefore the globe is bigger) */\r\n scale?: number;\r\n /** Defines the spacing between the country shape polygon with the sphere */\r\n polygonAltitude?: number;\r\n /** Scale for the colors */\r\n scaleType?: Exclude<ScaleDataType, 'linear'>;\r\n /** Toggles if the color scaling is categorical or not */\r\n categorical?: boolean;\r\n /** Toggle visibility of color scale. */\r\n showColorScale?: boolean;\r\n /** The max altitude of the atmosphere, in terms of globe radius units. */\r\n atmosphereAltitude?: number;\r\n /** Resolution in angular degrees of the sphere curvature. The finer the resolution, the more the globe is fragmented into smaller faces to approximate the spheric surface, at the cost of performance. */\r\n globeCurvatureResolution?: number;\r\n /** Defines the color of the light and atmosphere. */\r\n lightColor?: string;\r\n /** Defines fog settings for the scene. */\r\n fogSettings?: FogDataType;\r\n /** Property in the property object in mapData geoJson object is used to match to the id in the data object */\r\n mapProperty?: string;\r\n /** Countries or regions to be highlighted */\r\n highlightedIds?: string[];\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\n/** For using these maps you will have to install [`three`](https://threejs.org/manual/) and [react-globe.gl](https://www.npmjs.com/package/react-globe.gl) package to your project */\r\nexport function ThreeDGlobe(props: Props) {\r\n const {\r\n data,\r\n mapData = 'https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json',\r\n graphTitle,\r\n colors,\r\n sources,\r\n graphDescription,\r\n height,\r\n width,\r\n footNote = 'The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.',\r\n colorDomain,\r\n colorLegendTitle,\r\n scaleType = 'threshold',\r\n padding,\r\n mapNoDataColor = Colors.light.graphNoData,\r\n backgroundColor = false,\r\n mapBorderColor = Colors.light.grays['gray-500'],\r\n relativeHeight,\r\n tooltip,\r\n graphID,\r\n mapProperty = 'ISO3',\r\n dataDownload = false,\r\n language = 'en',\r\n minHeight = 0,\r\n theme = 'light',\r\n ariaLabel,\r\n styles,\r\n classNames,\r\n autoRotate = true,\r\n enableZoom = true,\r\n globeMaterial,\r\n centerPoint = [0, 0],\r\n atmosphereColor = '#999',\r\n showColorScale = true,\r\n resetSelectionOnDoubleClick = true,\r\n detailsOnClick,\r\n onSeriesMouseOver,\r\n onSeriesMouseClick,\r\n highlightedIds = [],\r\n scale = 1,\r\n globeOffset = [0, 0],\r\n polygonAltitude = 0.01,\r\n globeCurvatureResolution = 4,\r\n atmosphereAltitude = 0.15,\r\n lightColor = '#dce9fe',\r\n fogSettings,\r\n } = props;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const [mapShape, setMapShape] = useState<any>(undefined);\r\n\r\n const [svgWidth, setSvgWidth] = useState(0);\r\n const [svgHeight, setSvgHeight] = useState(0);\r\n\r\n const graphDiv = useRef<HTMLDivElement>(null);\r\n\r\n useEffect(() => {\r\n const resizeObserver = new ResizeObserver(entries => {\r\n setSvgWidth(width || entries[0].target.clientWidth || 760);\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 || 760);\r\n if (!width) resizeObserver.observe(graphDiv.current);\r\n }\r\n return () => resizeObserver.disconnect();\r\n }, [width, height]);\r\n useEffect(() => {\r\n if (typeof mapData === 'string') {\r\n const fetchData = fetchAndParseJSON(mapData);\r\n fetchData.then(d => {\r\n if (\r\n mapData ===\r\n 'https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json'\r\n ) {\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const features = d.features.map((el: any) => {\r\n if (el.geometry.type === 'Polygon') {\r\n const reversed = [...el.geometry.coordinates[0]].reverse();\r\n const geometry = { ...el.geometry, coordinates: [reversed] };\r\n return { ...el, geometry };\r\n }\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const coord: any = [];\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n el.geometry.coordinates.forEach((c: any) => {\r\n const reversed = [...c[0]].reverse();\r\n coord.push([reversed]);\r\n });\r\n const geometry = { ...el.geometry, coordinates: coord };\r\n return { ...el, geometry };\r\n });\r\n setMapShape(features);\r\n } else setMapShape(d.features);\r\n });\r\n } else {\r\n setMapShape(mapData.features);\r\n }\r\n }, [mapData]);\r\n\r\n const domain =\r\n colorDomain ||\r\n (scaleType === 'categorical'\r\n ? getUniqValue(data, 'x')\r\n : getJenks(\r\n data.map(d => d.x as number | null | undefined),\r\n colors?.length || 4,\r\n ));\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 aria-label={\r\n ariaLabel ||\r\n `${\r\n graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n }This is a map.${graphDescription ? ` ${graphDescription}` : ''}`\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 || 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={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\r\n className='flex flex-col grow justify-center leading-0'\r\n ref={graphDiv}\r\n aria-label='Map area'\r\n >\r\n {(width || svgWidth) && (height || svgHeight) && mapShape ? (\r\n <Graph\r\n data={data}\r\n globeOffset={globeOffset}\r\n polygonData={mapShape}\r\n colorDomain={domain}\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 colors={\r\n colors ||\r\n (scaleType === 'categorical'\r\n ? Colors[theme].sequentialColors[\r\n `neutralColorsx0${domain.length as 4 | 5 | 6 | 7 | 8 | 9}`\r\n ]\r\n : Colors[theme].sequentialColors[\r\n `neutralColorsx0${(domain.length + 1) as 4 | 5 | 6 | 7 | 8 | 9}`\r\n ])\r\n }\r\n mapNoDataColor={mapNoDataColor}\r\n categorical={scaleType === 'categorical'}\r\n mapBorderColor={mapBorderColor}\r\n tooltip={tooltip}\r\n mapProperty={mapProperty}\r\n styles={styles}\r\n classNames={classNames}\r\n autoRotate={autoRotate === true ? 1.5 : autoRotate === false ? 0 : autoRotate}\r\n enableZoom={enableZoom}\r\n globeMaterial={globeMaterial}\r\n atmosphereColor={atmosphereColor}\r\n colorLegendTitle={colorLegendTitle}\r\n showColorScale={showColorScale}\r\n hoverStrokeColor={\r\n theme === 'light'\r\n ? Colors.light.grays['gray-700']\r\n : Colors.light.grays['gray-300']\r\n }\r\n highlightedIds={highlightedIds}\r\n resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\r\n detailsOnClick={detailsOnClick}\r\n onSeriesMouseOver={onSeriesMouseOver}\r\n onSeriesMouseClick={onSeriesMouseClick}\r\n scale={scale}\r\n polygonAltitude={polygonAltitude}\r\n centerLat={centerPoint[0]}\r\n centerLng={centerPoint[1]}\r\n atmosphereAltitude={atmosphereAltitude}\r\n globeCurvatureResolution={globeCurvatureResolution}\r\n lightColor={lightColor}\r\n fogSettings={fogSettings}\r\n />\r\n ) : (\r\n <div\r\n style={{\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 )}px`,\r\n }}\r\n className='flex items-center justify-center'\r\n >\r\n <Spinner aria-label='Loading graph' />\r\n </div>\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":["Graph","props","width","autoRotate","data","enableZoom","categorical","colorDomain","colors","globeMaterial","height","polygonData","mapProperty","mapBorderColor","atmosphereColor","tooltip","styles","classNames","mapNoDataColor","colorLegendTitle","showColorScale","hoverStrokeColor","detailsOnClick","onSeriesMouseClick","onSeriesMouseOver","resetSelectionOnDoubleClick","highlightedIds","scale","globeOffset","polygonAltitude","centerLng","centerLat","atmosphereAltitude","globeCurvatureResolution","lightColor","fogSettings","globeEl","useRef","mouseClickData","setMouseClickData","useState","showLegend","setShowLegend","mousePos","setMousePos","mouseOverData","setMouseOverData","colorScale","scaleOrdinal","scaleThreshold","useEffect","canvas","handleMouseMove","e","materials","THREE","scene","d","ambientLight","line","jsxs","jsx","Globe","polygon","id","val","el","color","clickedData","isEqual","hoverData","light","camera","Fragment","X","P","i","numberFormattingFunction","Tooltip","Modal","string2HTML","ThreeDGlobe","mapData","graphTitle","sources","graphDescription","footNote","scaleType","padding","Colors","backgroundColor","relativeHeight","graphID","dataDownload","language","minHeight","theme","ariaLabel","centerPoint","mapShape","setMapShape","svgWidth","setSvgWidth","svgHeight","setSvgHeight","graphDiv","resizeObserver","entries","fetchAndParseJSON","features","reversed","geometry","coord","c","domain","getUniqValue","getJenks","cn","GraphHeader","Spinner","GraphFooter"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@undp/data-viz",
3
- "version": "1.4.11",
3
+ "version": "1.4.12",
4
4
  "main": "./dist/index.cjs",
5
5
  "module": "./dist/index.js",
6
6
  "browser": "./dist/index.umd.js",