@undp/data-viz 1.4.4 → 1.4.6

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 +98 -100
  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"),l=require("react"),ge=require("./Spinner-DA6Z5E4n.cjs"),pe=require("react-globe.gl"),he=require("./index-BXns0-ng.cjs"),me=require("three"),xe=require("./Modal-tXZlLE5s.cjs"),ce=require("./Typography-k-kOjICQ.cjs"),fe=require("./Tooltip-n8z5bfav.cjs"),ye=require("./numberFormattingFunction-02t-wJta.cjs"),ve=require("./index-BW_-wD2k.cjs"),je=require("./string2HTML-D2Avudmb.cjs"),be=require("./ordinal-BOeNbyae.cjs"),Ee=require("./threshold-DNsSUf8Q.cjs"),Re=require("./GraphHeader.cjs"),Ce=require("./GraphFooter.cjs"),we=require("./fetchAndParseData-CQyVGCul.cjs"),L=require("./Colors.cjs"),De=require("./getUniqValue-CHqgSss5.cjs"),Se=require("./getJenks-TWQvbuOz.cjs");function ke(f){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const i in f)if(i!=="default"){const u=Object.getOwnPropertyDescriptor(f,i);Object.defineProperty(d,i,u.get?u:{enumerable:!0,get:()=>f[i]})}}return d.default=f,Object.freeze(d)}const X=ke(me);function Ne(f){const{width:d,autoRotate:i,data:u,enableZoom:O,categorical:N,colorDomain:g,colors:s,globeMaterial:a,height:z,polygonData:Z,mapProperty:p,mapBorderColor:T,atmosphereColor:B,tooltip:I,styles:b,classNames:Y,mapNoDataColor:h,colorLegendTitle:P,showColorScale:K,hoverStrokeColor:Q,detailsOnClick:y,onSeriesMouseClick:E,onSeriesMouseOver:m,resetSelectionOnDoubleClick:M,highlightedIds:U,scale:v,globeOffset:R,polygonAltitude:H,centerLng:A,centerLat:$,atmosphereAltitude:W,globeCurvatureResolution:ee,lightColor:F}=f,n=l.useRef(void 0),[D,q]=l.useState(void 0),[te,V]=l.useState(!(d<680)),[_,re]=l.useState({x:0,y:0}),[C,oe]=l.useState(void 0),J=N?be.ordinal().domain(g).range(s):Ee.threshold().domain(g).range(s);l.useEffect(()=>{n?.current&&(n.current.controls().autoRotate=i!==0,n.current.controls().enableZoom=O,n.current.controls().autoRotateSpeed=i)},[i,O]),l.useEffect(()=>{n.current&&(C?n.current.controls().autoRotate=!1:n.current.controls().autoRotate=i!==0)},[C,i]),l.useEffect(()=>{const e=n.current?.renderer().domElement;if(!e)return;const r=o=>{re({x:o.clientX,y:o.clientY})};return e.addEventListener("mousemove",r),()=>e.removeEventListener("mousemove",r)},[]),l.useEffect(()=>{n.current&&n.current.pointOfView({lat:$,lng:A,altitude:v},1e3)},[v,A,$]);const se=a||new X.MeshPhysicalMaterial({color:"#FFF",roughness:.5,reflectivity:1.2});return l.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 X.AmbientLight(F,.2);e.add(r),setTimeout(()=>{(e.children[3]?.children[0]?.children[4]?.children||[]).forEach(x=>{const j=x.children[1];j&&(j.renderOrder=2)})},300)},[F]),t.jsxRuntimeExports.jsxs("div",{className:"relative",children:[t.jsxRuntimeExports.jsx(pe,{ref:n,width:d,height:z,globeOffset:R,lineHoverPrecision:0,polygonsData:Z,polygonAltitude:e=>U.includes(e?.properties?.[p])?.1:e?.properties?.[p]===C?.id?.01:H,polygonCapColor:e=>{const r=e?.properties?.[p],o=u.find(x=>x.id===r)?.x;return o!=null?J(o):h},polygonSideColor:e=>{const r=e?.properties?.[p],o=u.find(j=>j.id===r)?.x,x=o!=null?J(o):h;return U.includes(e?.properties?.[p])?x:"rgba(100,100,100,0)"},polygonStrokeColor:e=>e?.properties?.[p]===C?.id?Q:T,onPolygonClick:e=>{const r=e?.properties?.[p]?u.find(o=>o.id===e?.properties?.[p]):void 0;(E||y)&&(he.isEqual(D,r)&&M&&r?(q(void 0),E?.(void 0)):(q(r),E?.(r))),q(r),E?.(r)},onPolygonHover:e=>{const r=e?.properties?.[p]?u.find(o=>o.id===e?.properties?.[p]):void 0;oe(r),m?.(r)},atmosphereColor:B,atmosphereAltitude:W,globeCurvatureResolution:ee,globeMaterial:se,backgroundColor:"rgba(0, 0, 0, 0)",polygonsTransitionDuration:100,onGlobeReady:()=>{if(n.current){n.current.pointOfView({lat:$,lng:A});const e=n.current.scene();setTimeout(()=>{e.children.filter(w=>w.type==="DirectionalLight").map(w=>{e.remove(w)});const x=new X.AmbientLight(F,.2);e.add(x),(e.children[3]?.children[0]?.children[4]?.children||[]).forEach(w=>{const S=w.children[1];S.renderOrder=2})},300);const r=new X.DirectionalLight(16777215,.1),o=n.current.camera();r.position.set(0,0,1),o.add(r),e.add(o)}}}),K===!1?null:t.jsxRuntimeExports.jsx("div",{className:"absolute left-4 bottom-4",children:te?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:()=>{V(!1)},children:t.jsxRuntimeExports.jsx(ve.X,{})}),t.jsxRuntimeExports.jsxs("div",{className:"p-2",style:{backgroundColor:"rgba(240,240,240, 0.7)",width:N?void 0:"340px"},children:[P&&P!==""?t.jsxRuntimeExports.jsx(ce.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:P}):null,N?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(ce.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:ye.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:()=>{V(!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"})})}),C&&I?t.jsxRuntimeExports.jsx(fe.Tooltip,{data:C,body:I,xPos:_.x,yPos:_.y,backgroundStyle:b?.tooltip,className:Y?.tooltip}):null,y&&D!==void 0?t.jsxRuntimeExports.jsx(xe.X,{open:D!==void 0,onClose:()=>{q(void 0)},children:t.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof y=="string"?{__html:je.string2HTML(y,D)}:void 0,children:typeof y=="function"?y(D):null})}):null]})}function Me(f){const{data:d,mapData:i="https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json",graphTitle:u,colors:O,sources:N,graphDescription:g,height:s,width:a,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:Z,colorLegendTitle:p,scaleType:T="threshold",padding:B,mapNoDataColor:I=L.Colors.light.graphNoData,backgroundColor:b=!1,mapBorderColor:Y=L.Colors.light.grays["gray-500"],relativeHeight:h,tooltip:P,graphID:K,mapProperty:Q="ISO3",dataDownload:y=!1,language:E="en",minHeight:m=0,theme:M="light",ariaLabel:U,styles:v,classNames:R,autoRotate:H=!0,enableZoom:A=!0,globeMaterial:$,centerPoint:W=[0,0],atmosphereColor:ee="#999",showColorScale:F=!0,resetSelectionOnDoubleClick:n=!0,detailsOnClick:D,onSeriesMouseOver:q,onSeriesMouseClick:te,highlightedIds:V=[],scale:_=1,globeOffset:re=[0,0],polygonAltitude:C=.01,globeCurvatureResolution:oe=4,atmosphereAltitude:J=.15,lightColor:se="#dce9fe"}=f,[e,r]=l.useState(void 0),[o,x]=l.useState(0),[j,w]=l.useState(0),S=l.useRef(null);l.useEffect(()=>{const c=new ResizeObserver(G=>{x(a||G[0].target.clientWidth||760),w(s||G[0].target.clientHeight||480)});return S.current&&(w(S.current.clientHeight||480),x(S.current.clientWidth||760),a||c.observe(S.current)),()=>c.disconnect()},[a,s]),l.useEffect(()=>{typeof i=="string"?we.fetchAndParseJSON(i).then(G=>{if(i==="https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json"){const de=G.features.map(k=>{if(k.geometry.type==="Polygon"){const ie=[...k.geometry.coordinates[0]].reverse(),ae={...k.geometry,coordinates:[ie]};return{...k,geometry:ae}}const le=[];k.geometry.coordinates.forEach(ie=>{const ae=[...ie[0]].reverse();le.push([ae])});const ue={...k.geometry,coordinates:le};return{...k,geometry:ue}});r(de)}else r(G.features)}):r(i.features)},[i]);const ne=Z||(T==="categorical"?De.getUniqValue(d,"x"):Se.getJenks(d.map(c=>c.x),O?.length||4));return t.jsxRuntimeExports.jsx("div",{className:`${M||"light"} flex ${a?"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"}`,R?.graphContainer),style:{...v?.graphContainer||{},...b&&b!==!0?{backgroundColor:b}:{}},id:K,"aria-label":U||`${u?`The graph shows ${u}. `:""}This is a map.${g?` ${g}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:b?B||"1rem":B||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[u||g||y?t.jsxRuntimeExports.jsx(Re.GraphHeader,{styles:{title:v?.title,description:v?.description},classNames:{title:R?.title,description:R?.description},graphTitle:u,graphDescription:g,width:a,graphDownload:void 0,dataDownload:y?d.map(c=>c.data).filter(c=>c!==void 0).length>0?d.map(c=>c.data).filter(c=>c!==void 0):d.filter(c=>c!==void 0):null}):null,t.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:S,"aria-label":"Map area",children:(a||o)&&(s||j)&&e?t.jsxRuntimeExports.jsx(Ne,{data:d,globeOffset:re,polygonData:e,colorDomain:ne,width:a||o,height:Math.max(m,s||(h?m?(a||o)*h>m?(a||o)*h:m:(a||o)*h:j)),colors:O||(T==="categorical"?L.Colors[M].sequentialColors[`neutralColorsx0${ne.length}`]:L.Colors[M].sequentialColors[`neutralColorsx0${ne.length+1}`]),mapNoDataColor:I,categorical:T==="categorical",mapBorderColor:Y,tooltip:P,mapProperty:Q,styles:v,classNames:R,autoRotate:H===!0?1.5:H===!1?0:H,enableZoom:A,globeMaterial:$,atmosphereColor:ee,colorLegendTitle:p,showColorScale:F,hoverStrokeColor:M==="light"?L.Colors.light.grays["gray-700"]:L.Colors.light.grays["gray-300"],highlightedIds:V,resetSelectionOnDoubleClick:n,detailsOnClick:D,onSeriesMouseOver:q,onSeriesMouseClick:te,scale:_,polygonAltitude:C,centerLat:W[0],centerLng:W[1],atmosphereAltitude:J,globeCurvatureResolution:oe,lightColor:se}):t.jsxRuntimeExports.jsx("div",{style:{height:`${Math.max(m,s||(h?m?(a||o)*h>m?(a||o)*h:m:(a||o)*h:j))}px`},className:"flex items-center justify-center",children:t.jsxRuntimeExports.jsx(ge.y,{"aria-label":"Loading graph"})})}),N||z?t.jsxRuntimeExports.jsx(Ce.GraphFooter,{styles:{footnote:v?.footnote,source:v?.source},classNames:{footnote:R?.footnote,source:R?.source},sources:N,footNote:z,width:a}):null]})})})})}exports.ThreeDGlobe=Me;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),l=require("react"),ge=require("./Spinner-DA6Z5E4n.cjs"),pe=require("react-globe.gl"),he=require("./index-BXns0-ng.cjs"),me=require("three"),xe=require("./Modal-tXZlLE5s.cjs"),ce=require("./Typography-k-kOjICQ.cjs"),fe=require("./Tooltip-n8z5bfav.cjs"),ye=require("./numberFormattingFunction-02t-wJta.cjs"),je=require("./index-BW_-wD2k.cjs"),ve=require("./string2HTML-D2Avudmb.cjs"),be=require("./ordinal-BOeNbyae.cjs"),Ee=require("./threshold-DNsSUf8Q.cjs"),Re=require("./GraphHeader.cjs"),Ce=require("./GraphFooter.cjs"),we=require("./fetchAndParseData-CQyVGCul.cjs"),O=require("./Colors.cjs"),De=require("./getUniqValue-CHqgSss5.cjs"),Se=require("./getJenks-TWQvbuOz.cjs");function ke(f){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const i in f)if(i!=="default"){const u=Object.getOwnPropertyDescriptor(f,i);Object.defineProperty(d,i,u.get?u:{enumerable:!0,get:()=>f[i]})}}return d.default=f,Object.freeze(d)}const B=ke(me);function Ne(f){const{width:d,autoRotate:i,data:u,enableZoom:T,categorical:N,colorDomain:g,colors:s,globeMaterial:a,height:z,polygonData:Z,mapProperty:p,mapBorderColor:P,atmosphereColor:I,tooltip:U,styles:b,classNames:Y,mapNoDataColor:h,colorLegendTitle:H,showColorScale:K,hoverStrokeColor:Q,detailsOnClick:y,onSeriesMouseClick:E,onSeriesMouseOver:m,resetSelectionOnDoubleClick:M,highlightedIds:W,scale:j,globeOffset:R,polygonAltitude:A,centerLng:$,centerLat:F,atmosphereAltitude:V,globeCurvatureResolution:ee,lightColor:q}=f,n=l.useRef(void 0),[D,L]=l.useState(void 0),[te,_]=l.useState(!(d<680)),[J,re]=l.useState({x:0,y:0}),[C,oe]=l.useState(void 0),X=N?be.ordinal().domain(g).range(s):Ee.threshold().domain(g).range(s);l.useEffect(()=>{n?.current&&(n.current.controls().autoRotate=i!==0,n.current.controls().enableZoom=T,n.current.controls().autoRotateSpeed=i)},[i,T]),l.useEffect(()=>{n.current&&(C?n.current.controls().autoRotate=!1:n.current.controls().autoRotate=i!==0)},[C,i]),l.useEffect(()=>{const e=n.current?.renderer().domElement;if(!e)return;const r=o=>{re({x:o.clientX,y:o.clientY})};return e.addEventListener("mousemove",r),()=>e.removeEventListener("mousemove",r)},[]),l.useEffect(()=>{n.current&&n.current.pointOfView({lat:F,lng:$,altitude:j},1e3)},[j,$,F]);const se=a||new B.MeshBasicMaterial({color:"#FFF"});return l.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 B.AmbientLight(q,.2);e.add(r),setTimeout(()=>{(e.children[3]?.children[0]?.children[4]?.children||[]).forEach(x=>{const v=x.children[1];v&&(v.renderOrder=2)})},300),e.fog=new B.Fog(q,150,300)},[q]),t.jsxRuntimeExports.jsxs("div",{className:"relative",children:[t.jsxRuntimeExports.jsx(pe,{ref:n,width:d,height:z,globeOffset:R,lineHoverPrecision:0,polygonsData:Z,polygonAltitude:e=>W.includes(e?.properties?.[p])?.1:e?.properties?.[p]===C?.id?.01:A,polygonCapColor:e=>{const r=e?.properties?.[p],o=u.find(x=>x.id===r)?.x;return o!=null?X(o):h},polygonSideColor:e=>{const r=e?.properties?.[p],o=u.find(v=>v.id===r)?.x,x=o!=null?X(o):h;return W.includes(e?.properties?.[p])?x:"rgba(100,100,100,0)"},polygonStrokeColor:e=>e?.properties?.[p]===C?.id?Q:P,onPolygonClick:e=>{const r=e?.properties?.[p]?u.find(o=>o.id===e?.properties?.[p]):void 0;(E||y)&&(he.isEqual(D,r)&&M&&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;oe(r),m?.(r)},atmosphereColor:I,atmosphereAltitude:V,globeCurvatureResolution:ee,globeMaterial:se,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 x=new B.AmbientLight(q,.2);e.add(x),(e.children[3]?.children[0]?.children[4]?.children||[]).forEach(w=>{const S=w.children[1];S.renderOrder=2})},300);const r=new B.DirectionalLight(16777215,.1),o=n.current.camera();r.position.set(0,0,1),o.add(r),e.add(o)}}}),K===!1?null:t.jsxRuntimeExports.jsx("div",{className:"absolute left-4 bottom-4",children:te?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(je.X,{})}),t.jsxRuntimeExports.jsxs("div",{className:"p-2",style:{backgroundColor:"rgba(240,240,240, 0.7)",width:N?void 0:"340px"},children:[H&&H!==""?t.jsxRuntimeExports.jsx(ce.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,N?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(ce.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:ye.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"})})}),C&&U?t.jsxRuntimeExports.jsx(fe.Tooltip,{data:C,body:U,xPos:J.x,yPos:J.y,backgroundStyle:b?.tooltip,className:Y?.tooltip}):null,y&&D!==void 0?t.jsxRuntimeExports.jsx(xe.X,{open:D!==void 0,onClose:()=>{L(void 0)},children:t.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof y=="string"?{__html:ve.string2HTML(y,D)}:void 0,children:typeof y=="function"?y(D):null})}):null]})}function Me(f){const{data:d,mapData:i="https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json",graphTitle:u,colors:T,sources:N,graphDescription:g,height:s,width:a,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:Z,colorLegendTitle:p,scaleType:P="threshold",padding:I,mapNoDataColor:U=O.Colors.light.graphNoData,backgroundColor:b=!1,mapBorderColor:Y=O.Colors.light.grays["gray-500"],relativeHeight:h,tooltip:H,graphID:K,mapProperty:Q="ISO3",dataDownload:y=!1,language:E="en",minHeight:m=0,theme:M="light",ariaLabel:W,styles:j,classNames:R,autoRotate:A=!0,enableZoom:$=!0,globeMaterial:F,centerPoint:V=[0,0],atmosphereColor:ee="#999",showColorScale:q=!0,resetSelectionOnDoubleClick:n=!0,detailsOnClick:D,onSeriesMouseOver:L,onSeriesMouseClick:te,highlightedIds:_=[],scale:J=1,globeOffset:re=[0,0],polygonAltitude:C=.01,globeCurvatureResolution:oe=4,atmosphereAltitude:X=.15,lightColor:se="#dce9fe"}=f,[e,r]=l.useState(void 0),[o,x]=l.useState(0),[v,w]=l.useState(0),S=l.useRef(null);l.useEffect(()=>{const c=new ResizeObserver(G=>{x(a||G[0].target.clientWidth||760),w(s||G[0].target.clientHeight||480)});return S.current&&(w(S.current.clientHeight||480),x(S.current.clientWidth||760),a||c.observe(S.current)),()=>c.disconnect()},[a,s]),l.useEffect(()=>{typeof i=="string"?we.fetchAndParseJSON(i).then(G=>{if(i==="https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json"){const de=G.features.map(k=>{if(k.geometry.type==="Polygon"){const ie=[...k.geometry.coordinates[0]].reverse(),ae={...k.geometry,coordinates:[ie]};return{...k,geometry:ae}}const le=[];k.geometry.coordinates.forEach(ie=>{const ae=[...ie[0]].reverse();le.push([ae])});const ue={...k.geometry,coordinates:le};return{...k,geometry:ue}});r(de)}else r(G.features)}):r(i.features)},[i]);const ne=Z||(P==="categorical"?De.getUniqValue(d,"x"):Se.getJenks(d.map(c=>c.x),T?.length||4));return t.jsxRuntimeExports.jsx("div",{className:`${M||"light"} flex ${a?"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"}`,R?.graphContainer),style:{...j?.graphContainer||{},...b&&b!==!0?{backgroundColor:b}:{}},id:K,"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||y?t.jsxRuntimeExports.jsx(Re.GraphHeader,{styles:{title:j?.title,description:j?.description},classNames:{title:R?.title,description:R?.description},graphTitle:u,graphDescription:g,width:a,graphDownload:void 0,dataDownload:y?d.map(c=>c.data).filter(c=>c!==void 0).length>0?d.map(c=>c.data).filter(c=>c!==void 0):d.filter(c=>c!==void 0):null}):null,t.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:S,"aria-label":"Map area",children:(a||o)&&(s||v)&&e?t.jsxRuntimeExports.jsx(Ne,{data:d,globeOffset:re,polygonData:e,colorDomain:ne,width:a||o,height:Math.max(m,s||(h?m?(a||o)*h>m?(a||o)*h:m:(a||o)*h:v)),colors:T||(P==="categorical"?O.Colors[M].sequentialColors[`neutralColorsx0${ne.length}`]:O.Colors[M].sequentialColors[`neutralColorsx0${ne.length+1}`]),mapNoDataColor:U,categorical:P==="categorical",mapBorderColor:Y,tooltip:H,mapProperty:Q,styles:j,classNames:R,autoRotate:A===!0?1.5:A===!1?0:A,enableZoom:$,globeMaterial:F,atmosphereColor:ee,colorLegendTitle:p,showColorScale:q,hoverStrokeColor:M==="light"?O.Colors.light.grays["gray-700"]:O.Colors.light.grays["gray-300"],highlightedIds:_,resetSelectionOnDoubleClick:n,detailsOnClick:D,onSeriesMouseOver:L,onSeriesMouseClick:te,scale:J,polygonAltitude:C,centerLat:V[0],centerLng:V[1],atmosphereAltitude:X,globeCurvatureResolution:oe,lightColor:se}):t.jsxRuntimeExports.jsx("div",{style:{height:`${Math.max(m,s||(h?m?(a||o)*h>m?(a||o)*h:m:(a||o)*h:v))}px`},className:"flex items-center justify-center",children:t.jsxRuntimeExports.jsx(ge.y,{"aria-label":"Loading graph"})})}),N||z?t.jsxRuntimeExports.jsx(Ce.GraphFooter,{styles:{footnote:j?.footnote,source:j?.source},classNames:{footnote:R?.footnote,source:R?.source},sources:N,footNote:z,width:a}):null]})})})})}exports.ThreeDGlobe=Me;
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-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, 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}\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 } = 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().autoRotate = autoRotate === 0 ? false : true;\r\n globeEl.current.controls().enableZoom = enableZoom;\r\n globeEl.current.controls().autoRotateSpeed = autoRotate;\r\n }\r\n }, [autoRotate, 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 }\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.MeshPhysicalMaterial({\r\n color: '#FFF',\r\n roughness: 0.5,\r\n reflectivity: 1.2,\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 }, [lightColor]);\r\n return (\r\n <div className='relative'>\r\n <Globe\r\n ref={globeEl}\r\n width={width}\r\n height={height}\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 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 /** 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 } = 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 />\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","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, 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}\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 } = 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().autoRotate = autoRotate === 0 ? false : true;\r\n globeEl.current.controls().enableZoom = enableZoom;\r\n globeEl.current.controls().autoRotateSpeed = autoRotate;\r\n }\r\n }, [autoRotate, 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 }\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\r\n scene.fog = new THREE.Fog(lightColor, 150, 300);\r\n }, [lightColor]);\r\n return (\r\n <div className='relative'>\r\n <Globe\r\n ref={globeEl}\r\n width={width}\r\n height={height}\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 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 /** 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 } = 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 />\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","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
@@ -3,19 +3,19 @@ import { useRef as ge, useState as L, useEffect as S } from "react";
3
3
  import { y as ue } from "./Spinner-C85UF28E.js";
4
4
  import fe from "react-globe.gl";
5
5
  import { i as ye } from "./index-27yTRcko.js";
6
- import * as J from "three";
6
+ import * as I from "three";
7
7
  import { X as xe } from "./Modal-DVVwpKhP.js";
8
8
  import { u as de } from "./Typography-Ctgfl1J5.js";
9
9
  import { T as ve } from "./Tooltip-DyM5snqx.js";
10
10
  import { n as be } from "./numberFormattingFunction-14YCbkN2.js";
11
- import { X as je } from "./index-BmCqpO1B.js";
12
- import { s as we } from "./string2HTML-CWHGfz_d.js";
11
+ import { X as we } from "./index-BmCqpO1B.js";
12
+ import { s as je } from "./string2HTML-CWHGfz_d.js";
13
13
  import { o as Ce } from "./ordinal-w9Lu4Stb.js";
14
14
  import { t as De } from "./threshold-DFfqcDMa.js";
15
15
  import { GraphHeader as ke } from "./GraphHeader.js";
16
16
  import { GraphFooter as Ne } from "./GraphFooter.js";
17
17
  import { f as Se } from "./fetchAndParseData-4gsYTy6_.js";
18
- import { Colors as T } from "./Colors.js";
18
+ import { Colors as R } from "./Colors.js";
19
19
  import { g as Le } from "./getUniqValue-BtUENB2H.js";
20
20
  import { g as Me } from "./getJenks-VhM3GIoC.js";
21
21
  function Oe(_) {
@@ -23,42 +23,42 @@ function Oe(_) {
23
23
  width: p,
24
24
  autoRotate: d,
25
25
  data: u,
26
- enableZoom: R,
26
+ enableZoom: E,
27
27
  categorical: M,
28
28
  colorDomain: l,
29
29
  colors: i,
30
30
  globeMaterial: s,
31
- height: I,
31
+ height: W,
32
32
  polygonData: Y,
33
33
  mapProperty: c,
34
- mapBorderColor: E,
35
- atmosphereColor: W,
36
- tooltip: z,
34
+ mapBorderColor: H,
35
+ atmosphereColor: z,
36
+ tooltip: U,
37
37
  styles: v,
38
38
  classNames: K,
39
39
  mapNoDataColor: g,
40
- colorLegendTitle: H,
40
+ colorLegendTitle: $,
41
41
  showColorScale: Q,
42
42
  hoverStrokeColor: ee,
43
43
  detailsOnClick: f,
44
44
  onSeriesMouseClick: b,
45
45
  onSeriesMouseOver: h,
46
46
  resetSelectionOnDoubleClick: O,
47
- highlightedIds: U,
47
+ highlightedIds: q,
48
48
  scale: y,
49
- globeOffset: j,
50
- polygonAltitude: $,
51
- centerLng: A,
52
- centerLat: F,
53
- atmosphereAltitude: q,
49
+ globeOffset: w,
50
+ polygonAltitude: A,
51
+ centerLng: F,
52
+ centerLat: B,
53
+ atmosphereAltitude: X,
54
54
  globeCurvatureResolution: te,
55
- lightColor: B
56
- } = _, a = ge(void 0), [D, P] = L(void 0), [oe, X] = L(!(p < 680)), [V, re] = L({ x: 0, y: 0 }), [w, ie] = L(void 0), Z = M ? Ce().domain(l).range(i) : De().domain(l).range(i);
55
+ lightColor: T
56
+ } = _, a = ge(void 0), [D, P] = L(void 0), [oe, V] = L(!(p < 680)), [Z, re] = L({ x: 0, y: 0 }), [j, ie] = L(void 0), J = M ? Ce().domain(l).range(i) : De().domain(l).range(i);
57
57
  S(() => {
58
- a?.current && (a.current.controls().autoRotate = d !== 0, a.current.controls().enableZoom = R, a.current.controls().autoRotateSpeed = d);
59
- }, [d, R]), S(() => {
60
- a.current && (w ? a.current.controls().autoRotate = !1 : a.current.controls().autoRotate = d !== 0);
61
- }, [w, d]), S(() => {
58
+ a?.current && (a.current.controls().autoRotate = d !== 0, a.current.controls().enableZoom = E, a.current.controls().autoRotateSpeed = d);
59
+ }, [d, E]), S(() => {
60
+ a.current && (j ? a.current.controls().autoRotate = !1 : a.current.controls().autoRotate = d !== 0);
61
+ }, [j, d]), S(() => {
62
62
  const e = a.current?.renderer().domElement;
63
63
  if (!e) return;
64
64
  const o = (r) => {
@@ -66,44 +66,42 @@ function Oe(_) {
66
66
  };
67
67
  return e.addEventListener("mousemove", o), () => e.removeEventListener("mousemove", o);
68
68
  }, []), S(() => {
69
- a.current && a.current.pointOfView({ lat: F, lng: A, altitude: y }, 1e3);
70
- }, [y, A, F]);
71
- const ae = s || new J.MeshPhysicalMaterial({
72
- color: "#FFF",
73
- roughness: 0.5,
74
- reflectivity: 1.2
69
+ a.current && a.current.pointOfView({ lat: B, lng: F, altitude: y }, 1e3);
70
+ }, [y, F, B]);
71
+ const ae = s || new I.MeshBasicMaterial({
72
+ color: "#FFF"
75
73
  });
76
74
  return S(() => {
77
75
  if (!a.current) return;
78
76
  const e = a.current.scene();
79
77
  e.children.filter((r) => r.type === "DirectionalLight" || r.type === "AmbientLight").forEach((r) => e.remove(r));
80
- const o = new J.AmbientLight(B, 0.2);
78
+ const o = new I.AmbientLight(T, 0.2);
81
79
  e.add(o), setTimeout(() => {
82
80
  (e.children[3]?.children[0]?.children[4]?.children || []).forEach((m) => {
83
81
  const x = m.children[1];
84
82
  x && (x.renderOrder = 2);
85
83
  });
86
- }, 300);
87
- }, [B]), /* @__PURE__ */ t.jsxs("div", { className: "relative", children: [
84
+ }, 300), e.fog = new I.Fog(T, 150, 300);
85
+ }, [T]), /* @__PURE__ */ t.jsxs("div", { className: "relative", children: [
88
86
  /* @__PURE__ */ t.jsx(
89
87
  fe,
90
88
  {
91
89
  ref: a,
92
90
  width: p,
93
- height: I,
94
- globeOffset: j,
91
+ height: W,
92
+ globeOffset: w,
95
93
  lineHoverPrecision: 0,
96
94
  polygonsData: Y,
97
- polygonAltitude: (e) => U.includes(e?.properties?.[c]) ? 0.1 : e?.properties?.[c] === w?.id ? 0.01 : $,
95
+ polygonAltitude: (e) => q.includes(e?.properties?.[c]) ? 0.1 : e?.properties?.[c] === j?.id ? 0.01 : A,
98
96
  polygonCapColor: (e) => {
99
97
  const o = e?.properties?.[c], r = u.find((m) => m.id === o)?.x;
100
- return r != null ? Z(r) : g;
98
+ return r != null ? J(r) : g;
101
99
  },
102
100
  polygonSideColor: (e) => {
103
- const o = e?.properties?.[c], r = u.find((x) => x.id === o)?.x, m = r != null ? Z(r) : g;
104
- return U.includes(e?.properties?.[c]) ? m : "rgba(100,100,100,0)";
101
+ const o = e?.properties?.[c], r = u.find((x) => x.id === o)?.x, m = r != null ? J(r) : g;
102
+ return q.includes(e?.properties?.[c]) ? m : "rgba(100,100,100,0)";
105
103
  },
106
- polygonStrokeColor: (e) => e?.properties?.[c] === w?.id ? ee : E,
104
+ polygonStrokeColor: (e) => e?.properties?.[c] === j?.id ? ee : H,
107
105
  onPolygonClick: (e) => {
108
106
  const o = e?.properties?.[c] ? u.find((r) => r.id === e?.properties?.[c]) : void 0;
109
107
  (b || f) && (ye(D, o) && O && o ? (P(void 0), b?.(void 0)) : (P(o), b?.(o))), P(o), b?.(o);
@@ -112,8 +110,8 @@ function Oe(_) {
112
110
  const o = e?.properties?.[c] ? u.find((r) => r.id === e?.properties?.[c]) : void 0;
113
111
  ie(o), h?.(o);
114
112
  },
115
- atmosphereColor: W,
116
- atmosphereAltitude: q,
113
+ atmosphereColor: z,
114
+ atmosphereAltitude: X,
117
115
  globeCurvatureResolution: te,
118
116
  globeMaterial: ae,
119
117
  backgroundColor: "rgba(0, 0, 0, 0)",
@@ -121,21 +119,21 @@ function Oe(_) {
121
119
  onGlobeReady: () => {
122
120
  if (a.current) {
123
121
  a.current.pointOfView({
124
- lat: F,
125
- lng: A
122
+ lat: B,
123
+ lng: F
126
124
  });
127
125
  const e = a.current.scene();
128
126
  setTimeout(() => {
129
127
  e.children.filter((C) => C.type === "DirectionalLight").map((C) => {
130
128
  e.remove(C);
131
129
  });
132
- const m = new J.AmbientLight(B, 0.2);
130
+ const m = new I.AmbientLight(T, 0.2);
133
131
  e.add(m), (e.children[3]?.children[0]?.children[4]?.children || []).forEach((C) => {
134
132
  const k = C.children[1];
135
133
  k.renderOrder = 2;
136
134
  });
137
135
  }, 300);
138
- const o = new J.DirectionalLight(16777215, 0.1), r = a.current.camera();
136
+ const o = new I.DirectionalLight(16777215, 0.1), r = a.current.camera();
139
137
  o.position.set(0, 0, 1), r.add(o), e.add(r);
140
138
  }
141
139
  }
@@ -159,9 +157,9 @@ function Oe(_) {
159
157
  top: "-0.75rem"
160
158
  },
161
159
  onClick: () => {
162
- X(!1);
160
+ V(!1);
163
161
  },
164
- children: /* @__PURE__ */ t.jsx(je, {})
162
+ children: /* @__PURE__ */ t.jsx(we, {})
165
163
  }
166
164
  ),
167
165
  /* @__PURE__ */ t.jsxs(
@@ -173,7 +171,7 @@ function Oe(_) {
173
171
  width: M ? void 0 : "340px"
174
172
  },
175
173
  children: [
176
- H && H !== "" ? /* @__PURE__ */ t.jsx(
174
+ $ && $ !== "" ? /* @__PURE__ */ t.jsx(
177
175
  de,
178
176
  {
179
177
  size: "xs",
@@ -184,7 +182,7 @@ function Oe(_) {
184
182
  WebkitLineClamp: "1",
185
183
  WebkitBoxOrient: "vertical"
186
184
  },
187
- children: H
185
+ children: $
188
186
  }
189
187
  ) : null,
190
188
  M ? /* @__PURE__ */ t.jsx("div", { className: "flex flex-col gap-3", children: l.map((e, o) => /* @__PURE__ */ t.jsxs("div", { className: "flex gap-2 items-center", children: [
@@ -245,18 +243,18 @@ function Oe(_) {
245
243
  type: "button",
246
244
  className: "mb-0 border-0 bg-transparent p-0 self-start",
247
245
  onClick: () => {
248
- X(!0);
246
+ V(!0);
249
247
  },
250
248
  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" })
251
249
  }
252
250
  ) }),
253
- w && z ? /* @__PURE__ */ t.jsx(
251
+ j && U ? /* @__PURE__ */ t.jsx(
254
252
  ve,
255
253
  {
256
- data: w,
257
- body: z,
258
- xPos: V.x,
259
- yPos: V.y,
254
+ data: j,
255
+ body: U,
256
+ xPos: Z.x,
257
+ yPos: Z.y,
260
258
  backgroundStyle: v?.tooltip,
261
259
  className: K?.tooltip
262
260
  }
@@ -272,7 +270,7 @@ function Oe(_) {
272
270
  "div",
273
271
  {
274
272
  className: "graph-modal-content m-0",
275
- dangerouslySetInnerHTML: typeof f == "string" ? { __html: we(f, D) } : void 0,
273
+ dangerouslySetInnerHTML: typeof f == "string" ? { __html: je(f, D) } : void 0,
276
274
  children: typeof f == "function" ? f(D) : null
277
275
  }
278
276
  )
@@ -285,46 +283,46 @@ function _e(_) {
285
283
  data: p,
286
284
  mapData: d = "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json",
287
285
  graphTitle: u,
288
- colors: R,
286
+ colors: E,
289
287
  sources: M,
290
288
  graphDescription: l,
291
289
  height: i,
292
290
  width: s,
293
- 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.",
291
+ footNote: W = "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.",
294
292
  colorDomain: Y,
295
293
  colorLegendTitle: c,
296
- scaleType: E = "threshold",
297
- padding: W,
298
- mapNoDataColor: z = T.light.graphNoData,
294
+ scaleType: H = "threshold",
295
+ padding: z,
296
+ mapNoDataColor: U = R.light.graphNoData,
299
297
  backgroundColor: v = !1,
300
- mapBorderColor: K = T.light.grays["gray-500"],
298
+ mapBorderColor: K = R.light.grays["gray-500"],
301
299
  relativeHeight: g,
302
- tooltip: H,
300
+ tooltip: $,
303
301
  graphID: Q,
304
302
  mapProperty: ee = "ISO3",
305
303
  dataDownload: f = !1,
306
304
  language: b = "en",
307
305
  minHeight: h = 0,
308
306
  theme: O = "light",
309
- ariaLabel: U,
307
+ ariaLabel: q,
310
308
  styles: y,
311
- classNames: j,
312
- autoRotate: $ = !0,
313
- enableZoom: A = !0,
314
- globeMaterial: F,
315
- centerPoint: q = [0, 0],
309
+ classNames: w,
310
+ autoRotate: A = !0,
311
+ enableZoom: F = !0,
312
+ globeMaterial: B,
313
+ centerPoint: X = [0, 0],
316
314
  atmosphereColor: te = "#999",
317
- showColorScale: B = !0,
315
+ showColorScale: T = !0,
318
316
  resetSelectionOnDoubleClick: a = !0,
319
317
  detailsOnClick: D,
320
318
  onSeriesMouseOver: P,
321
319
  onSeriesMouseClick: oe,
322
- highlightedIds: X = [],
323
- scale: V = 1,
320
+ highlightedIds: V = [],
321
+ scale: Z = 1,
324
322
  globeOffset: re = [0, 0],
325
- polygonAltitude: w = 0.01,
323
+ polygonAltitude: j = 0.01,
326
324
  globeCurvatureResolution: ie = 4,
327
- atmosphereAltitude: Z = 0.15,
325
+ atmosphereAltitude: J = 0.15,
328
326
  lightColor: ae = "#dce9fe"
329
327
  } = _, [e, o] = L(void 0), [r, m] = L(0), [x, C] = L(0), k = ge(null);
330
328
  S(() => {
@@ -352,9 +350,9 @@ function _e(_) {
352
350
  } else o(G.features);
353
351
  }) : o(d.features);
354
352
  }, [d]);
355
- const se = Y || (E === "categorical" ? Le(p, "x") : Me(
353
+ const se = Y || (H === "categorical" ? Le(p, "x") : Me(
356
354
  p.map((n) => n.x),
357
- R?.length || 4
355
+ E?.length || 4
358
356
  ));
359
357
  return /* @__PURE__ */ t.jsx(
360
358
  "div",
@@ -366,19 +364,19 @@ function _e(_) {
366
364
  {
367
365
  className: pe(
368
366
  `${v ? v === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${b || "en"}`,
369
- j?.graphContainer
367
+ w?.graphContainer
370
368
  ),
371
369
  style: {
372
370
  ...y?.graphContainer || {},
373
371
  ...v && v !== !0 ? { backgroundColor: v } : {}
374
372
  },
375
373
  id: Q,
376
- "aria-label": U || `${u ? `The graph shows ${u}. ` : ""}This is a map.${l ? ` ${l}` : ""}`,
374
+ "aria-label": q || `${u ? `The graph shows ${u}. ` : ""}This is a map.${l ? ` ${l}` : ""}`,
377
375
  children: /* @__PURE__ */ t.jsx(
378
376
  "div",
379
377
  {
380
378
  className: "flex grow",
381
- style: { padding: v ? W || "1rem" : W || 0 },
379
+ style: { padding: v ? z || "1rem" : z || 0 },
382
380
  children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
383
381
  u || l || f ? /* @__PURE__ */ t.jsx(
384
382
  ke,
@@ -388,8 +386,8 @@ function _e(_) {
388
386
  description: y?.description
389
387
  },
390
388
  classNames: {
391
- title: j?.title,
392
- description: j?.description
389
+ title: w?.title,
390
+ description: w?.description
393
391
  },
394
392
  graphTitle: u,
395
393
  graphDescription: l,
@@ -416,31 +414,31 @@ function _e(_) {
416
414
  h,
417
415
  i || (g ? h ? (s || r) * g > h ? (s || r) * g : h : (s || r) * g : x)
418
416
  ),
419
- colors: R || (E === "categorical" ? T[O].sequentialColors[`neutralColorsx0${se.length}`] : T[O].sequentialColors[`neutralColorsx0${se.length + 1}`]),
420
- mapNoDataColor: z,
421
- categorical: E === "categorical",
417
+ colors: E || (H === "categorical" ? R[O].sequentialColors[`neutralColorsx0${se.length}`] : R[O].sequentialColors[`neutralColorsx0${se.length + 1}`]),
418
+ mapNoDataColor: U,
419
+ categorical: H === "categorical",
422
420
  mapBorderColor: K,
423
- tooltip: H,
421
+ tooltip: $,
424
422
  mapProperty: ee,
425
423
  styles: y,
426
- classNames: j,
427
- autoRotate: $ === !0 ? 1.5 : $ === !1 ? 0 : $,
428
- enableZoom: A,
429
- globeMaterial: F,
424
+ classNames: w,
425
+ autoRotate: A === !0 ? 1.5 : A === !1 ? 0 : A,
426
+ enableZoom: F,
427
+ globeMaterial: B,
430
428
  atmosphereColor: te,
431
429
  colorLegendTitle: c,
432
- showColorScale: B,
433
- hoverStrokeColor: O === "light" ? T.light.grays["gray-700"] : T.light.grays["gray-300"],
434
- highlightedIds: X,
430
+ showColorScale: T,
431
+ hoverStrokeColor: O === "light" ? R.light.grays["gray-700"] : R.light.grays["gray-300"],
432
+ highlightedIds: V,
435
433
  resetSelectionOnDoubleClick: a,
436
434
  detailsOnClick: D,
437
435
  onSeriesMouseOver: P,
438
436
  onSeriesMouseClick: oe,
439
- scale: V,
440
- polygonAltitude: w,
441
- centerLat: q[0],
442
- centerLng: q[1],
443
- atmosphereAltitude: Z,
437
+ scale: Z,
438
+ polygonAltitude: j,
439
+ centerLat: X[0],
440
+ centerLng: X[1],
441
+ atmosphereAltitude: J,
444
442
  globeCurvatureResolution: ie,
445
443
  lightColor: ae
446
444
  }
@@ -459,16 +457,16 @@ function _e(_) {
459
457
  )
460
458
  }
461
459
  ),
462
- M || I ? /* @__PURE__ */ t.jsx(
460
+ M || W ? /* @__PURE__ */ t.jsx(
463
461
  Ne,
464
462
  {
465
463
  styles: { footnote: y?.footnote, source: y?.source },
466
464
  classNames: {
467
- footnote: j?.footnote,
468
- source: j?.source
465
+ footnote: w?.footnote,
466
+ source: w?.source
469
467
  },
470
468
  sources: M,
471
- footNote: I,
469
+ footNote: W,
472
470
  width: s
473
471
  }
474
472
  ) : 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-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, 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}\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 } = 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().autoRotate = autoRotate === 0 ? false : true;\r\n globeEl.current.controls().enableZoom = enableZoom;\r\n globeEl.current.controls().autoRotateSpeed = autoRotate;\r\n }\r\n }, [autoRotate, 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 }\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.MeshPhysicalMaterial({\r\n color: '#FFF',\r\n roughness: 0.5,\r\n reflectivity: 1.2,\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 }, [lightColor]);\r\n return (\r\n <div className='relative'>\r\n <Globe\r\n ref={globeEl}\r\n width={width}\r\n height={height}\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 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 /** 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 } = 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 />\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","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":";;;;;;;;;;;;;;;;;;;;AAmDA,SAASA,GAAMC,GAAc;AAC3B,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,6BAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACEjC,GACEkC,IAAUC,GAAiC,MAAS,GACpD,CAACC,GAAgBC,CAAiB,IAAIC,EAAc,MAAS,GAC7D,CAACC,IAAYC,CAAa,IAAIF,EAAS,EAAErC,IAAQ,IAAI,GACrD,CAACwC,GAAUC,EAAW,IAAIJ,EAAS,EAAE,GAAG,GAAG,GAAG,GAAG,GACjD,CAACK,GAAeC,EAAgB,IAAIN,EAA4C,MAAS,GACzFO,IAAaxC,IACfyC,GAAA,EAAwC,OAAOxC,CAAW,EAAE,MAAMC,CAAM,IACxEwC,KACG,OAAOzC,CAAuB,EAC9B,MAAMC,CAAM;AACnB,EAAAyC,EAAU,MAAM;AACd,IAAId,GAAS,YACXA,EAAQ,QAAQ,SAAA,EAAW,aAAahC,MAAe,GACvDgC,EAAQ,QAAQ,SAAA,EAAW,aAAa9B,GACxC8B,EAAQ,QAAQ,SAAA,EAAW,kBAAkBhC;AAAA,EAEjD,GAAG,CAACA,GAAYE,CAAU,CAAC,GAC3B4C,EAAU,MAAM;AACd,IAAId,EAAQ,YACNS,IACFT,EAAQ,QAAQ,SAAA,EAAW,aAAa,KAExCA,EAAQ,QAAQ,SAAA,EAAW,aAAahC,MAAe;AAAA,EAG7D,GAAG,CAACyC,GAAezC,CAAU,CAAC,GAE9B8C,EAAU,MAAM;AACd,UAAMC,IAASf,EAAQ,SAAS,SAAA,EAAW;AAC3C,QAAI,CAACe,EAAQ;AAEb,UAAMC,IAAkB,CAACC,MAAkB;AACzC,MAAAT,GAAY,EAAE,GAAGS,EAAE,SAAS,GAAGA,EAAE,SAAS;AAAA,IAC5C;AAEA,WAAAF,EAAO,iBAAiB,aAAaC,CAAe,GAC7C,MAAMD,EAAO,oBAAoB,aAAaC,CAAe;AAAA,EACtE,GAAG,CAAA,CAAE,GAELF,EAAU,MAAM;AACd,IAAId,EAAQ,WACVA,EAAQ,QAAQ,YAAY,EAAE,KAAKJ,GAAW,KAAKD,GAAW,UAAUH,EAAA,GAAS,GAAI;AAAA,EAEzF,GAAG,CAACA,GAAOG,GAAWC,CAAS,CAAC;AAChC,QAAMsB,KACJ5C,KACA,IAAI6C,EAAM,qBAAqB;AAAA,IAC7B,OAAO;AAAA,IACP,WAAW;AAAA,IACX,cAAc;AAAA,EAAA,CACf;AACH,SAAAL,EAAU,MAAM;AACd,QAAI,CAACd,EAAQ,QAAS;AAEtB,UAAMoB,IAAQpB,EAAQ,QAAQ,MAAA;AAC9B,IAAAoB,EAAM,SACH,OAAO,CAAAC,MAAKA,EAAE,SAAS,sBAAsBA,EAAE,SAAS,cAAc,EACtE,QAAQ,CAAAA,MAAKD,EAAM,OAAOC,CAAC,CAAC;AAC/B,UAAMC,IAAe,IAAIH,EAAM,aAAapB,GAAY,GAAG;AAC3D,IAAAqB,EAAM,IAAIE,CAAY,GACtB,WAAW,MAAM;AAEf,OADiBF,EAAM,SAAS,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC,GAAG,YAAY,CAAA,GACjE,QAAQ,CAAAC,MAAK;AACpB,cAAME,IAAOF,EAAE,SAAS,CAAC;AACzB,QAAIE,QAAW,cAAc;AAAA,MAC/B,CAAC;AAAA,IACH,GAAG,GAAG;AAAA,EACR,GAAG,CAACxB,CAAU,CAAC,GAEbyB,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAAC,gBAAAA,EAAAA;AAAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAK1B;AAAA,QACL,OAAAjC;AAAA,QACA,QAAAQ;AAAA,QACA,aAAAkB;AAAA,QACA,oBAAoB;AAAA,QACpB,cAAcjB;AAAA,QACd,iBAAiB,CAACmD,MAChBpC,EAAe,SAASoC,GAAS,aAAalD,CAAW,CAAC,IACtD,MACAkD,GAAS,aAAalD,CAAW,MAAMgC,GAAe,KACpD,OACAf;AAAA,QAER,iBAAiB,CAACiC,MAAiB;AACjC,gBAAMC,IAAKD,GAAS,aAAalD,CAAW,GACtCoD,IAAM5D,EAAK,KAAK,OAAM6D,EAAG,OAAOF,CAAE,GAAG;AAC3C,iBAAyBC,KAAQ,OACxBlB,EAAWkB,CAAU,IAEvB9C;AAAA,QACT;AAAA,QACA,kBAAkB,CAAC4C,MAAiB;AAClC,gBAAMC,IAAKD,GAAS,aAAalD,CAAW,GACtCoD,IAAM5D,EAAK,KAAK,OAAM6D,EAAG,OAAOF,CAAE,GAAG,GACrCG,IAA6BF,KAAQ,OAAOlB,EAAWkB,CAAU,IAAI9C;AAC3E,iBAAOQ,EAAe,SAASoC,GAAS,aAAalD,CAAW,CAAC,IAC7DsD,IACA;AAAA,QACN;AAAA,QACA,oBAAoB,CAACJ,MACnBA,GAAS,aAAalD,CAAW,MAAMgC,GAAe,KAClDvB,KACAR;AAAA,QAEN,gBAAgB,CAACiD,MAAiB;AAChC,gBAAMK,IAAcL,GAAS,aAAalD,CAAW,IACjDR,EAAK,KAAK,CAAA6D,MAAMA,EAAG,OAAOH,GAAS,aAAalD,CAAW,CAAC,IAC5D;AACJ,WAAIW,KAAsBD,OAEtB8C,GAAQ/B,GAAgB8B,CAAW,KACnC1C,KACA0C,KAEA7B,EAAkB,MAAS,GAC3Bf,IAAqB,MAAS,MAE9Be,EAAkB6B,CAAW,GAC7B5C,IAAqB4C,CAAW,KAGpC7B,EAAkB6B,CAAW,GAC7B5C,IAAqB4C,CAAW;AAAA,QAClC;AAAA,QACA,gBAAgB,CAACL,MAAiB;AAChC,gBAAMO,IAAYP,GAAS,aAAalD,CAAW,IAC/CR,EAAK,KAAK,CAAA6D,MAAMA,EAAG,OAAOH,GAAS,aAAalD,CAAW,CAAC,IAC5D;AACJ,UAAAiC,GAAiBwB,CAAS,GAC1B7C,IAAoB6C,CAAS;AAAA,QAC/B;AAAA,QACA,iBAAAvD;AAAA,QACA,oBAAAkB;AAAA,QACA,0BAAAC;AAAA,QACA,eAAeoB;AAAA,QACf,iBAAgB;AAAA,QAChB,4BAA4B;AAAA,QAC5B,cAAc,MAAM;AAClB,cAAIlB,EAAQ,SAAS;AACnB,YAAAA,EAAQ,QAAQ,YAAY;AAAA,cAC1B,KAAKJ;AAAA,cACL,KAAKD;AAAA,YAAA,CACN;AACD,kBAAMyB,IAAQpB,EAAQ,QAAQ,MAAA;AAC9B,uBAAW,MAAM;AACf,cAAAoB,EAAM,SACH,OAAO,CAAAC,MAAKA,EAAE,SAAS,kBAAkB,EACzC,IAAI,CAAAA,MAAK;AACR,gBAAAD,EAAM,OAAOC,CAAC;AAAA,cAChB,CAAC;AACH,oBAAMC,IAAe,IAAIH,EAAM,aAAapB,GAAY,GAAG;AAC3D,cAAAqB,EAAM,IAAIE,CAAY,IAELF,EAAM,SAAS,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC,GAAG,YAAY,CAAA,GACjE,QAAQ,CAAAC,MAAK;AACpB,sBAAME,IAAOF,EAAE,SAAS,CAAC;AACzB,gBAAAE,EAAK,cAAc;AAAA,cACrB,CAAC;AAAA,YACH,GAAG,GAAG;AACN,kBAAMY,IAAQ,IAAIhB,EAAM,iBAAiB,UAAU,GAAG,GAChDiB,IAASpC,EAAQ,QAAQ,OAAA;AAC/B,YAAAmC,EAAM,SAAS,IAAI,GAAG,GAAG,CAAC,GAC1BC,EAAO,IAAID,CAAK,GAChBf,EAAM,IAAIgB,CAAM;AAAA,UAClB;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEDnD,MAAmB,KAAQ,OAC1BwC,gBAAAA,EAAAA,IAAC,SAAI,WAAU,4BACZ,eACCD,gBAAAA,EAAAA,KAAAa,EAAAA,UAAA,EACE,UAAA;AAAA,MAAAZ,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,QAAQ;AAAA,YACR,cAAc;AAAA,YACd,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UAEP,SAAS,MAAM;AACb,YAAAnB,EAAc,EAAK;AAAA,UACrB;AAAA,UAEA,gCAACgC,IAAA,CAAA,CAAE;AAAA,QAAA;AAAA,MAAA;AAAA,MAELd,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,iBAAiB;AAAA,YACjB,OAAOrD,IAAc,SAAY;AAAA,UAAA;AAAA,UAGlC,UAAA;AAAA,YAAAa,KAAoBA,MAAqB,KACxCyC,gBAAAA,EAAAA;AAAAA,cAACc;AAAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAa;AAAA,gBACb,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,SAAS;AAAA,kBACT,iBAAiB;AAAA,kBACjB,iBAAiB;AAAA,gBAAA;AAAA,gBAGlB,UAAAvD;AAAA,cAAA;AAAA,YAAA,IAED;AAAA,YACFb,IAwCAsD,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,uBACZ,UAAArD,EAAY,IAAI,CAACiD,GAAGmB,MACnBhB,gBAAAA,EAAAA,KAAC,OAAA,EAAY,WAAU,2BACrB,UAAA;AAAA,cAAAC,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,iBAAiBpD,EAAOmE,IAAInE,EAAO,MAAM,EAAA;AAAA,gBAAE;AAAA,cAAA;AAAA,cAEtDoD,gBAAAA,EAAAA,IAACc,MAAE,MAAK,MAAK,cAAa,QAAO,SAAQ,QACtC,UAAAlB,EAAA,CACH;AAAA,YAAA,EAAA,GAPQmB,CAQV,CACD,EAAA,CACH,IAnDAf,gBAAAA,EAAAA,IAAC,OAAA,EAAI,OAAM,QAAO,SAAQ,cAAa,WAAU,OAC/C,UAAAD,gBAAAA,EAAAA,KAAC,KAAA,EACE,UAAA;AAAA,cAAApD,EAAY,IAAI,CAACiD,GAAGmB,MACnBhB,gBAAAA,OAAC,KAAA,EAAU,WAAU,kBACnB,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,GAAIe,IAAI,MAAOnE,EAAO,SAAS;AAAA,oBAC/B,GAAG;AAAA,oBACH,OAAO,MAAMA,EAAO,SAAS;AAAA,oBAC7B,QAAQ;AAAA,oBACR,OAAO;AAAA,sBACL,MAAMA,EAAOmE,CAAC;AAAA,sBACd,QAAQnE,EAAOmE,CAAC;AAAA,oBAAA;AAAA,kBAClB;AAAA,gBAAA;AAAA,gBAEFf,gBAAAA,EAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAKe,IAAI,KAAK,MAAOnE,EAAO;AAAA,oBAC5B,GAAG;AAAA,oBACH,WAAU;AAAA,oBACV,OAAO,EAAE,YAAY,SAAA;AAAA,oBAEpB,UAAAoE,GAAyBpB,GAAa,IAAI;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC7C,EAAA,GAlBMmB,CAmBR,CACD;AAAA,oCACA,KAAA,EACC,UAAAf,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,GAAIrD,EAAY,SAAS,MAAOC,EAAO,SAAS;AAAA,kBAChD,GAAG;AAAA,kBACH,OAAO,MAAMA,EAAO,SAAS;AAAA,kBAC7B,QAAQ;AAAA,kBACR,OAAO;AAAA,oBACL,MAAMA,EAAOD,EAAY,MAAM;AAAA,oBAC/B,QAAQC,EAAOD,EAAY,MAAM;AAAA,kBAAA;AAAA,gBACnC;AAAA,cAAA,EACF,CACF;AAAA,YAAA,EAAA,CACF,EAAA,CACF;AAAA,UAcA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ,EAAA,CACF,IAEAqD,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM;AACb,UAAAnB,EAAc,EAAI;AAAA,QACpB;AAAA,QAEA,UAAAmB,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,gNAA+M,UAAA,cAAA,CAE9N;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,IAEDhB,KAAiB7B,IAChB6C,gBAAAA,EAAAA;AAAAA,MAACiB;AAAA,MAAA;AAAA,QACC,MAAMjC;AAAA,QACN,MAAM7B;AAAA,QACN,MAAM2B,EAAS;AAAA,QACf,MAAMA,EAAS;AAAA,QACf,iBAAiB1B,GAAQ;AAAA,QACzB,WAAWC,GAAY;AAAA,MAAA;AAAA,IAAA,IAEvB;AAAA,IACHK,KAAkBe,MAAmB,SACpCuB,gBAAAA,EAAAA;AAAAA,MAACkB;AAAAA,MAAA;AAAA,QACC,MAAMzC,MAAmB;AAAA,QACzB,SAAS,MAAM;AACb,UAAAC,EAAkB,MAAS;AAAA,QAC7B;AAAA,QAEA,UAAAsB,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,yBACE,OAAOtC,KAAmB,WACtB,EAAE,QAAQyD,GAAYzD,GAAgBe,CAAc,EAAA,IACpD;AAAA,YAGL,UAAA,OAAOf,KAAmB,aAAaA,EAAee,CAAc,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3E;AAAA,IAAA,IAEA;AAAA,EAAA,GACN;AAEJ;AC1QO,SAAS2C,GAAY/E,GAAc;AACxC,QAAM;AAAA,IACJ,MAAAG;AAAA,IACA,SAAA6E,IAAU;AAAA,IACV,YAAAC;AAAA,IACA,QAAA1E;AAAA,IACA,SAAA2E;AAAA,IACA,kBAAAC;AAAA,IACA,QAAA1E;AAAA,IACA,OAAAR;AAAA,IACA,UAAAmF,IAAW;AAAA,IACX,aAAA9E;AAAA,IACA,kBAAAY;AAAA,IACA,WAAAmE,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,gBAAArE,IAAiBsE,EAAO,MAAM;AAAA,IAC9B,iBAAAC,IAAkB;AAAA,IAClB,gBAAA5E,IAAiB2E,EAAO,MAAM,MAAM,UAAU;AAAA,IAC9C,gBAAAE;AAAA,IACA,SAAA3E;AAAA,IACA,SAAA4E;AAAA,IACA,aAAA/E,KAAc;AAAA,IACd,cAAAgF,IAAe;AAAA,IACf,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,WAAAC;AAAA,IACA,QAAAhF;AAAA,IACA,YAAAC;AAAA,IACA,YAAAd,IAAa;AAAA,IACb,YAAAE,IAAa;AAAA,IACb,eAAAI;AAAA,IACA,aAAAwF,IAAc,CAAC,GAAG,CAAC;AAAA,IACnB,iBAAAnF,KAAkB;AAAA,IAClB,gBAAAM,IAAiB;AAAA,IACjB,6BAAAK,IAA8B;AAAA,IAC9B,gBAAAH;AAAA,IACA,mBAAAE;AAAA,IACA,oBAAAD;AAAA,IACA,gBAAAG,IAAiB,CAAA;AAAA,IACjB,OAAAC,IAAQ;AAAA,IACR,aAAAC,KAAc,CAAC,GAAG,CAAC;AAAA,IACnB,iBAAAC,IAAkB;AAAA,IAClB,0BAAAI,KAA2B;AAAA,IAC3B,oBAAAD,IAAqB;AAAA,IACrB,YAAAE,KAAa;AAAA,EAAA,IACXjC,GAEE,CAACiG,GAAUC,CAAW,IAAI5D,EAAc,MAAS,GAEjD,CAAC6D,GAAUC,CAAW,IAAI9D,EAAS,CAAC,GACpC,CAAC+D,GAAWC,CAAY,IAAIhE,EAAS,CAAC,GAEtCiE,IAAWpE,GAAuB,IAAI;AAE5C,EAAAa,EAAU,MAAM;AACd,UAAMwD,IAAiB,IAAI,eAAe,CAAAC,MAAW;AACnD,MAAAL,EAAYnG,KAASwG,EAAQ,CAAC,EAAE,OAAO,eAAe,GAAG,GACzDH,EAAa7F,KAAUgG,EAAQ,CAAC,EAAE,OAAO,gBAAgB,GAAG;AAAA,IAC9D,CAAC;AACD,WAAIF,EAAS,YACXD,EAAaC,EAAS,QAAQ,gBAAgB,GAAG,GACjDH,EAAYG,EAAS,QAAQ,eAAe,GAAG,GAC1CtG,KAAOuG,EAAe,QAAQD,EAAS,OAAO,IAE9C,MAAMC,EAAe,WAAA;AAAA,EAC9B,GAAG,CAACvG,GAAOQ,CAAM,CAAC,GAClBuC,EAAU,MAAM;AACd,IAAI,OAAOgC,KAAY,WACH0B,GAAkB1B,CAAO,EACjC,KAAK,CAAAzB,MAAK;AAClB,UACEyB,MACA,2GACA;AAEA,cAAM2B,KAAWpD,EAAE,SAAS,IAAI,CAACS,MAAY;AAC3C,cAAIA,EAAG,SAAS,SAAS,WAAW;AAClC,kBAAM4C,KAAW,CAAC,GAAG5C,EAAG,SAAS,YAAY,CAAC,CAAC,EAAE,QAAA,GAC3C6C,KAAW,EAAE,GAAG7C,EAAG,UAAU,aAAa,CAAC4C,EAAQ,EAAA;AACzD,mBAAO,EAAE,GAAG5C,GAAI,UAAA6C,GAAAA;AAAAA,UAClB;AAEA,gBAAMC,KAAa,CAAA;AAEnB,UAAA9C,EAAG,SAAS,YAAY,QAAQ,CAAC+C,OAAW;AAC1C,kBAAMH,KAAW,CAAC,GAAGG,GAAE,CAAC,CAAC,EAAE,QAAA;AAC3B,YAAAD,GAAM,KAAK,CAACF,EAAQ,CAAC;AAAA,UACvB,CAAC;AACD,gBAAMC,KAAW,EAAE,GAAG7C,EAAG,UAAU,aAAa8C,GAAA;AAChD,iBAAO,EAAE,GAAG9C,GAAI,UAAA6C,GAAA;AAAA,QAClB,CAAC;AACD,QAAAX,EAAYS,EAAQ;AAAA,MACtB,MAAO,CAAAT,EAAY3C,EAAE,QAAQ;AAAA,IAC/B,CAAC,IAED2C,EAAYlB,EAAQ,QAAQ;AAAA,EAEhC,GAAG,CAACA,CAAO,CAAC;AAEZ,QAAMgC,KACJ1G,MACC+E,MAAc,gBACX4B,GAAa9G,GAAM,GAAG,IACtB+G;AAAA,IACE/G,EAAK,IAAI,CAAAoD,MAAKA,EAAE,CAA8B;AAAA,IAC9ChD,GAAQ,UAAU;AAAA,EAAA;AAE1B,SACEoD,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGmC,KAAS,OAAO,UAAU7F,IAAQ,iBAAiB,aAAa;AAAA,MAC9E,KAAK2F,MAAa,QAAQA,MAAa,OAAO,QAAQ;AAAA,MAEtD,UAAAjC,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWwD;AAAAA,YACT,GACG3B,IAEGA,MAAoB,KAClB,kDACA,KAHF,iBAIN,gDAAgDI,KAAY,IAAI;AAAA,YAChE5E,GAAY;AAAA,UAAA;AAAA,UAEd,OAAO;AAAA,YACL,GAAID,GAAQ,kBAAkB,CAAA;AAAA,YAC9B,GAAIyE,KAAmBA,MAAoB,KAAO,EAAE,iBAAAA,EAAA,IAAoB,CAAA;AAAA,UAAC;AAAA,UAE3E,IAAIE;AAAA,UACJ,cACEK,KACA,GACEd,IAAa,mBAAmBA,CAAU,OAAO,EACnD,iBAAiBE,IAAmB,IAAIA,CAAgB,KAAK,EAAE;AAAA,UAGjE,UAAAxB,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,SAAS6B,IAAkBF,KAAW,SAASA,KAAW,EAAA;AAAA,cAEnE,UAAA5B,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAU,mDACZ,UAAA;AAAA,gBAAAuB,KAAcE,KAAoBQ,IACjChC,gBAAAA,EAAAA;AAAAA,kBAACyD;AAAA,kBAAA;AAAA,oBACC,QAAQ;AAAA,sBACN,OAAOrG,GAAQ;AAAA,sBACf,aAAaA,GAAQ;AAAA,oBAAA;AAAA,oBAEvB,YAAY;AAAA,sBACV,OAAOC,GAAY;AAAA,sBACnB,aAAaA,GAAY;AAAA,oBAAA;AAAA,oBAE3B,YAAAiE;AAAA,oBACA,kBAAAE;AAAA,oBACA,OAAAlF;AAAA,oBACA,eAAe;AAAA,oBACf,cACE0F,IACIxF,EAAK,IAAI,CAAAoD,MAAKA,EAAE,IAAI,EAAE,OAAO,CAAAA,MAAKA,MAAM,MAAS,EAAE,SAAS,IAC1DpD,EAAK,IAAI,CAAAoD,MAAKA,EAAE,IAAI,EAAE,OAAO,CAAAA,MAAKA,MAAM,MAAS,IACjDpD,EAAK,OAAO,CAAAoD,MAAKA,MAAM,MAAS,IAClC;AAAA,kBAAA;AAAA,gBAAA,IAGN;AAAA,gBACJI,gBAAAA,EAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,KAAK4C;AAAA,oBACL,cAAW;AAAA,oBAET,WAAAtG,KAASkG,OAAc1F,KAAU4F,MAAcJ,IAC/CtC,gBAAAA,EAAAA;AAAAA,sBAAC5D;AAAA,sBAAA;AAAA,wBACC,MAAAI;AAAA,wBACA,aAAAwB;AAAA,wBACA,aAAasE;AAAA,wBACb,aAAae;AAAA,wBACb,OAAO/G,KAASkG;AAAA,wBAChB,QAAQ,KAAK;AAAA,0BACXN;AAAA,0BACApF,MACGgF,IACGI,KACG5F,KAASkG,KAAYV,IAAiBI,KACpC5F,KAASkG,KAAYV,IACtBI,KACD5F,KAASkG,KAAYV,IACxBY;AAAA,wBAAA;AAAA,wBAER,QACE9F,MACC8E,MAAc,gBACXE,EAAOO,CAAK,EAAE,iBACZ,kBAAkBkB,GAAO,MAA+B,EAC1D,IACAzB,EAAOO,CAAK,EAAE,iBACZ,kBAAmBkB,GAAO,SAAS,CAA2B,EAChE;AAAA,wBAEN,gBAAA/F;AAAA,wBACA,aAAaoE,MAAc;AAAA,wBAC3B,gBAAAzE;AAAA,wBACA,SAAAE;AAAA,wBACA,aAAAH;AAAA,wBACA,QAAAI;AAAA,wBACA,YAAAC;AAAA,wBACA,YAAYd,MAAe,KAAO,MAAMA,MAAe,KAAQ,IAAIA;AAAA,wBACnE,YAAAE;AAAA,wBACA,eAAAI;AAAA,wBACA,iBAAAK;AAAA,wBACA,kBAAAK;AAAA,wBACA,gBAAAC;AAAA,wBACA,kBACE2E,MAAU,UACNP,EAAO,MAAM,MAAM,UAAU,IAC7BA,EAAO,MAAM,MAAM,UAAU;AAAA,wBAEnC,gBAAA9D;AAAA,wBACA,6BAAAD;AAAA,wBACA,gBAAAH;AAAA,wBACA,mBAAAE;AAAA,wBACA,oBAAAD;AAAA,wBACA,OAAAI;AAAA,wBACA,iBAAAE;AAAA,wBACA,WAAWoE,EAAY,CAAC;AAAA,wBACxB,WAAWA,EAAY,CAAC;AAAA,wBACxB,oBAAAjE;AAAA,wBACA,0BAAAC;AAAA,wBACA,YAAAC;AAAA,sBAAA;AAAA,oBAAA,IAGF0B,gBAAAA,EAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,OAAO;AAAA,0BACL,QAAQ,GAAG,KAAK;AAAA,4BACdkC;AAAA,4BACApF,MACGgF,IACGI,KACG5F,KAASkG,KAAYV,IAAiBI,KACpC5F,KAASkG,KAAYV,IACtBI,KACD5F,KAASkG,KAAYV,IACxBY;AAAA,0BAAA,CACP;AAAA,wBAAA;AAAA,wBAEH,WAAU;AAAA,wBAEV,UAAA1C,gBAAAA,EAAAA,IAAC0D,IAAA,EAAQ,cAAW,gBAAA,CAAgB;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACtC;AAAA,gBAAA;AAAA,gBAGHnC,KAAWE,IACVzB,gBAAAA,EAAAA;AAAAA,kBAAC2D;AAAA,kBAAA;AAAA,oBACC,QAAQ,EAAE,UAAUvG,GAAQ,UAAU,QAAQA,GAAQ,OAAA;AAAA,oBACtD,YAAY;AAAA,sBACV,UAAUC,GAAY;AAAA,sBACtB,QAAQA,GAAY;AAAA,oBAAA;AAAA,oBAEtB,SAAAkE;AAAA,oBACA,UAAAE;AAAA,oBACA,OAAAnF;AAAA,kBAAA;AAAA,gBAAA,IAEA;AAAA,cAAA,EAAA,CACN;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
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, 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}\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 } = 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().autoRotate = autoRotate === 0 ? false : true;\r\n globeEl.current.controls().enableZoom = enableZoom;\r\n globeEl.current.controls().autoRotateSpeed = autoRotate;\r\n }\r\n }, [autoRotate, 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 }\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\r\n scene.fog = new THREE.Fog(lightColor, 150, 300);\r\n }, [lightColor]);\r\n return (\r\n <div className='relative'>\r\n <Globe\r\n ref={globeEl}\r\n width={width}\r\n height={height}\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 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 /** 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 } = 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 />\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","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.4",
3
+ "version": "1.4.6",
4
4
  "main": "./dist/index.cjs",
5
5
  "module": "./dist/index.js",
6
6
  "browser": "./dist/index.umd.js",