npm - @undp/data-viz - Versions diffs - 1.4.2 → 1.4.3 - Mend

@undp/data-viz 1.4.2 → 1.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/GriddedGraphs.d.ts +4 -7
package/dist/GriddedGraphsFromConfig.d.ts +4 -7
package/dist/MultiGraphDashboard.d.ts +4 -7
package/dist/MultiGraphDashboardFromConfig.d.ts +4 -7
package/dist/PerformanceIntensiveMultiGraphDashboard.d.ts +4 -7
package/dist/PerformanceIntensiveMultiGraphDashboardFromConfig.d.ts +4 -7
package/dist/PerformanceIntensiveScrollStory.d.ts +4 -7
package/dist/ScrollStory.d.ts +4 -7
package/dist/SingleGraphDashboard.d.ts +4 -7
package/dist/SingleGraphDashboardFromConfig.d.ts +4 -7
package/dist/SingleGraphDashboardGeoHubMaps.d.ts +4 -7
package/dist/SingleGraphDashboardGeoHubMapsFromConfig.d.ts +4 -7
package/dist/SingleGraphDashboardThreeDGraphs.cjs +1 -1
package/dist/SingleGraphDashboardThreeDGraphs.cjs.map +1 -1
package/dist/SingleGraphDashboardThreeDGraphs.d.ts +4 -7
package/dist/SingleGraphDashboardThreeDGraphs.js +28 -25
package/dist/SingleGraphDashboardThreeDGraphs.js.map +1 -1
package/dist/SingleGraphDashboardThreeDGraphsFromConfig.d.ts +4 -7
package/dist/ThreeDGlobe.cjs +1 -1
package/dist/ThreeDGlobe.cjs.map +1 -1
package/dist/ThreeDGlobe.d.ts +11 -2
package/dist/ThreeDGlobe.js +278 -253
package/dist/ThreeDGlobe.js.map +1 -1
package/dist/Types.d.ts +4 -7
package/dist/index.d.ts +15 -9
package/package.json +1 -1

package/dist/ThreeDGlobe.cjs.map CHANGED Viewed

	@@ -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.MeshPhongMaterialProperties;\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 centerPoint: [number, number];\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}\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 centerPoint,\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 } = 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 = new THREE.MeshLambertMaterial({\r\n color: '#fff',\r\n opacity: 1,\r\n transparent: false,\r\n ...(globeMaterial \|\| {}),\r\n });\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 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: centerPoint[0],\r\n lng: centerPoint[1],\r\n });\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\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\ninterface Props {\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.MeshPhongMaterialProperties;\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 /* 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 } = 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 centerPoint={centerPoint}\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 />\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","centerPoint","colorLegendTitle","showColorScale","hoverStrokeColor","detailsOnClick","onSeriesMouseClick","onSeriesMouseOver","resetSelectionOnDoubleClick","highlightedIds","scale","globeOffset","polygonAltitude","centerLng","centerLat","globeEl","useRef","mouseClickData","setMouseClickData","useState","showLegend","setShowLegend","mousePos","setMousePos","mouseOverData","setMouseOverData","colorScale","scaleOrdinal","scaleThreshold","useEffect","canvas","handleMouseMove","e","materials","THREE","jsxs","jsx","Globe","polygon","id","val","el","color","clickedData","isEqual","hoverData","Fragment","X","P","d","i","numberFormattingFunction","Tooltip","Modal","string2HTML","ThreeDGlobe","mapData","graphTitle","sources","graphDescription","footNote","scaleType","padding","Colors","backgroundColor","relativeHeight","graphID","dataDownload","language","minHeight","theme","ariaLabel","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 centerPoint: [number, number];\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 centerPoint,\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 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: centerPoint[0],\r\n lng: centerPoint[1],\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 scene.fog = new THREE.Fog(lightColor, 150, 300);\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 centerPoint={centerPoint}\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","centerPoint","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","jsxs","jsx","Globe","polygon","id","val","el","color","clickedData","isEqual","hoverData","scene","d","ambientLight","line","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","mapShape","setMapShape","svgWidth","setSvgWidth","svgHeight","setSvgHeight","graphDiv","resizeObserver","entries","fetchAndParseJSON","features","reversed","geometry","coord","c","domain","getUniqValue","getJenks","cn","GraphHeader","Spinner","GraphFooter"],"mappings":"ikCAoDA,SAASA,GAAMC,EAAc,CAC3B,KAAM,CACJ,MAAAC,EACA,WAAAC,EACA,KAAAC,EACA,WAAAC,EACA,YAAAC,EACA,YAAAC,EACA,OAAAC,EACA,cAAAC,EACA,OAAAC,EACA,YAAAC,EACA,YAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,OAAAC,EACA,WAAAC,EACA,eAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,4BAAAC,EACA,eAAAC,EACA,MAAAC,EACA,YAAAC,EACA,gBAAAC,GACA,UAAAC,EACA,UAAAC,EACA,mBAAAC,GACA,yBAAAC,GACA,WAAAC,CAAA,EACElC,EACEmC,EAAUC,EAAAA,OAAiC,MAAS,EACpD,CAACC,EAAgBC,CAAiB,EAAIC,EAAAA,SAAc,MAAS,EAC7D,CAACC,GAAYC,CAAa,EAAIF,EAAAA,SAAS,EAAEtC,EAAQ,IAAI,EACrD,CAACyC,EAAUC,EAAW,EAAIJ,EAAAA,SAAS,CAAE,EAAG,EAAG,EAAG,EAAG,EACjD,CAACK,EAAeC,EAAgB,EAAIN,EAAAA,SAA4C,MAAS,EACzFO,EAAazC,EACf0C,GAAAA,QAAA,EAAwC,OAAOzC,CAAW,EAAE,MAAMC,CAAM,EACxEyC,GAAAA,YACG,OAAO1C,CAAuB,EAC9B,MAAMC,CAAM,EACnB0C,EAAAA,UAAU,IAAM,CACVd,GAAS,UACXA,EAAQ,QAAQ,SAAA,EAAW,WAAajC,IAAe,EACvDiC,EAAQ,QAAQ,SAAA,EAAW,WAAa/B,EACxC+B,EAAQ,QAAQ,SAAA,EAAW,gBAAkBjC,EAEjD,EAAG,CAACA,EAAYE,CAAU,CAAC,EAC3B6C,EAAAA,UAAU,IAAM,CACVd,EAAQ,UACNS,EACFT,EAAQ,QAAQ,SAAA,EAAW,WAAa,GAExCA,EAAQ,QAAQ,SAAA,EAAW,WAAajC,IAAe,EAG7D,EAAG,CAAC0C,EAAe1C,CAAU,CAAC,EAE9B+C,EAAAA,UAAU,IAAM,CACd,MAAMC,EAASf,EAAQ,SAAS,SAAA,EAAW,WAC3C,GAAI,CAACe,EAAQ,OAEb,MAAMC,EAAmBC,GAAkB,CACzCT,GAAY,CAAE,EAAGS,EAAE,QAAS,EAAGA,EAAE,QAAS,CAC5C,EAEA,OAAAF,EAAO,iBAAiB,YAAaC,CAAe,EAC7C,IAAMD,EAAO,oBAAoB,YAAaC,CAAe,CACtE,EAAG,CAAA,CAAE,EAELF,EAAAA,UAAU,IAAM,CACVd,EAAQ,SACVA,EAAQ,QAAQ,YAAY,CAAE,IAAKJ,EAAW,IAAKD,EAAW,SAAUH,CAAA,EAAS,GAAI,CAEzF,EAAG,CAACA,EAAOG,EAAWC,CAAS,CAAC,EAChC,MAAMsB,EACJ7C,GACA,IAAI8C,EAAM,qBAAqB,CAC7B,MAAO,OACP,UAAW,GACX,aAAc,GAAA,CACf,EACH,OACEC,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,WACb,SAAA,CAAAC,EAAAA,kBAAAA,IAACC,GAAA,CACC,IAAKtB,EACL,MAAAlC,EACA,OAAAQ,EACA,YAAAmB,EACA,mBAAoB,EACpB,aAAclB,EACd,gBAAkBgD,GAChBhC,EAAe,SAASgC,GAAS,aAAa/C,CAAW,CAAC,EACtD,GACA+C,GAAS,aAAa/C,CAAW,IAAMiC,GAAe,GACpD,IACAf,GAER,gBAAkB6B,GAAiB,CACjC,MAAMC,EAAKD,GAAS,aAAa/C,CAAW,EACtCiD,EAAMzD,EAAK,QAAW0D,EAAG,KAAOF,CAAE,GAAG,EAC3C,OAAyBC,GAAQ,KACxBd,EAAWc,CAAU,EAEvB3C,CACT,EACA,iBAAmByC,GAAiB,CAClC,MAAMC,EAAKD,GAAS,aAAa/C,CAAW,EACtCiD,EAAMzD,EAAK,QAAW0D,EAAG,KAAOF,CAAE,GAAG,EACrCG,EAA6BF,GAAQ,KAAOd,EAAWc,CAAU,EAAI3C,EAC3E,OAAOS,EAAe,SAASgC,GAAS,aAAa/C,CAAW,CAAC,EAC7DmD,EACA,qBACN,EACA,mBAAqBJ,GACnBA,GAAS,aAAa/C,CAAW,IAAMiC,GAAe,GAClDvB,EACAT,EAEN,eAAiB8C,GAAiB,CAChC,MAAMK,EAAcL,GAAS,aAAa/C,CAAW,EACjDR,EAAK,KAAK0D,GAAMA,EAAG,KAAOH,GAAS,aAAa/C,CAAW,CAAC,EAC5D,QACAY,GAAsBD,KAEtB0C,GAAAA,QAAQ3B,EAAgB0B,CAAW,GACnCtC,GACAsC,GAEAzB,EAAkB,MAAS,EAC3Bf,IAAqB,MAAS,IAE9Be,EAAkByB,CAAW,EAC7BxC,IAAqBwC,CAAW,IAGpCzB,EAAkByB,CAAW,EAC7BxC,IAAqBwC,CAAW,CAClC,EACA,eAAiBL,GAAiB,CAChC,MAAMO,EAAYP,GAAS,aAAa/C,CAAW,EAC/CR,EAAK,KAAK0D,GAAMA,EAAG,KAAOH,GAAS,aAAa/C,CAAW,CAAC,EAC5D,OACJkC,GAAiBoB,CAAS,EAC1BzC,IAAoByC,CAAS,CAC/B,EACA,gBAAApD,EACA,mBAAAmB,GACA,yBAAAC,GACA,cAAeoB,EACf,gBAAgB,mBAChB,2BAA4B,IAC5B,aAAc,IAAM,CAClB,GAAIlB,EAAQ,QAAS,CACnBA,EAAQ,QAAQ,YAAY,CAC1B,IAAKjB,EAAY,CAAC,EAClB,IAAKA,EAAY,CAAC,CAAA,CACnB,EACD,MAAMgD,EAAQ/B,EAAQ,QAAQ,MAAA,EAC9B,WAAW,IAAM,CACf+B,EAAM,SACH,OAAOC,GAAKA,EAAE,OAAS,kBAAkB,EACzC,IAAIA,GAAK,CACRD,EAAM,OAAOC,CAAC,CAChB,CAAC,EACH,MAAMC,EAAe,IAAId,EAAM,aAAapB,EAAY,EAAG,EAC3DgC,EAAM,IAAIE,CAAY,GAELF,EAAM,SAAS,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC,GAAG,UAAY,CAAA,GACjE,QAAQC,GAAK,CACpB,MAAME,EAAOF,EAAE,SAAS,CAAC,EACzBE,EAAK,YAAc,CACrB,CAAC,CACH,EAAG,GAAG,EACN,MAAMC,EAAQ,IAAIhB,EAAM,iBAAiB,SAAU,EAAG,EAChDiB,EAASpC,EAAQ,QAAQ,OAAA,EAC/BmC,EAAM,SAAS,IAAI,EAAG,EAAG,CAAC,EAC1BC,EAAO,IAAID,CAAK,EAChBJ,EAAM,IAAIK,CAAM,EAChBL,EAAM,IAAM,IAAIZ,EAAM,IAAIpB,EAAY,IAAK,GAAG,CAChD,CACF,CAAA,CAAA,EAEDd,IAAmB,GAAQ,KAC1BoC,EAAAA,kBAAAA,IAAC,OAAI,UAAU,2BACZ,YACCD,EAAAA,kBAAAA,KAAAiB,EAAAA,kBAAAA,SAAA,CACE,SAAA,CAAAhB,EAAAA,kBAAAA,IAAC,MAAA,CACC,MAAO,CACL,gBAAiB,yBACjB,OAAQ,4BACR,aAAc,QACd,MAAO,OACP,OAAQ,OACR,QAAS,MACT,OAAQ,UACR,OAAQ,GACR,SAAU,WACV,MAAO,WACP,IAAK,UAAA,EAEP,QAAS,IAAM,CACbf,EAAc,EAAK,CACrB,EAEA,iCAACgC,GAAAA,EAAA,CAAA,CAAE,CAAA,CAAA,EAELlB,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAU,MACV,MAAO,CACL,gBAAiB,yBACjB,MAAOlD,EAAc,OAAY,OAAA,EAGlC,SAAA,CAAAc,GAAoBA,IAAqB,GACxCqC,EAAAA,kBAAAA,IAACkB,GAAAA,EAAA,CACC,KAAK,KACL,aAAa,KACb,UAAU,sFACV,MAAO,CACL,QAAS,cACT,gBAAiB,IACjB,gBAAiB,UAAA,EAGlB,SAAAvD,CAAA,CAAA,EAED,KACFd,EAwCAmD,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,sBACZ,SAAAlD,EAAY,IAAI,CAAC6D,EAAGQ,IACnBpB,EAAAA,kBAAAA,KAAC,MAAA,CAAY,UAAU,0BACrB,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,uBACV,MAAO,CAAE,gBAAiBjD,EAAOoE,EAAIpE,EAAO,MAAM,CAAA,CAAE,CAAA,EAEtDiD,EAAAA,kBAAAA,IAACkB,GAAAA,GAAE,KAAK,KAAK,aAAa,OAAO,QAAQ,OACtC,SAAAP,CAAA,CACH,CAAA,CAAA,EAPQQ,CAQV,CACD,CAAA,CACH,EAnDAnB,EAAAA,kBAAAA,IAAC,MAAA,CAAI,MAAM,OAAO,QAAQ,aAAa,UAAU,MAC/C,SAAAD,EAAAA,kBAAAA,KAAC,IAAA,CACE,SAAA,CAAAjD,EAAY,IAAI,CAAC6D,EAAGQ,IACnBpB,yBAAC,IAAA,CAAU,UAAU,iBACnB,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,OAAA,CACC,EAAImB,EAAI,IAAOpE,EAAO,OAAS,EAC/B,EAAG,EACH,MAAO,IAAMA,EAAO,OAAS,EAC7B,OAAQ,EACR,MAAO,CACL,KAAMA,EAAOoE,CAAC,EACd,OAAQpE,EAAOoE,CAAC,CAAA,CAClB,CAAA,EAEFnB,EAAAA,kBAAAA,IAAC,OAAA,CACC,GAAKmB,EAAI,GAAK,IAAOpE,EAAO,OAC5B,EAAG,GACH,UAAU,2DACV,MAAO,CAAE,WAAY,QAAA,EAEpB,SAAAqE,GAAAA,yBAAyBT,EAAa,IAAI,CAAA,CAAA,CAC7C,CAAA,EAlBMQ,CAmBR,CACD,0BACA,IAAA,CACC,SAAAnB,EAAAA,kBAAAA,IAAC,OAAA,CACC,EAAIlD,EAAY,OAAS,IAAOC,EAAO,OAAS,EAChD,EAAG,EACH,MAAO,IAAMA,EAAO,OAAS,EAC7B,OAAQ,EACR,MAAO,CACL,KAAMA,EAAOD,EAAY,MAAM,EAC/B,OAAQC,EAAOD,EAAY,MAAM,CAAA,CACnC,CAAA,CACF,CACF,CAAA,CAAA,CACF,CAAA,CACF,CAcA,CAAA,CAAA,CAEJ,CAAA,CACF,EAEAkD,EAAAA,kBAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAU,8CACV,QAAS,IAAM,CACbf,EAAc,EAAI,CACpB,EAEA,SAAAe,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,+MAA+M,SAAA,aAAA,CAE9N,CAAA,CAAA,EAGN,EAEDZ,GAAiB9B,EAChB0C,EAAAA,kBAAAA,IAACqB,GAAAA,QAAA,CACC,KAAMjC,EACN,KAAM9B,EACN,KAAM4B,EAAS,EACf,KAAMA,EAAS,EACf,gBAAiB3B,GAAQ,QACzB,UAAWC,GAAY,OAAA,CAAA,EAEvB,KACHM,GAAkBe,IAAmB,OACpCmB,EAAAA,kBAAAA,IAACsB,GAAAA,EAAA,CACC,KAAMzC,IAAmB,OACzB,QAAS,IAAM,CACbC,EAAkB,MAAS,CAC7B,EAEA,SAAAkB,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,0BACV,wBACE,OAAOlC,GAAmB,SACtB,CAAE,OAAQyD,GAAAA,YAAYzD,EAAgBe,CAAc,CAAA,EACpD,OAGL,SAAA,OAAOf,GAAmB,WAAaA,EAAee,CAAc,EAAI,IAAA,CAAA,CAC3E,CAAA,EAEA,IAAA,EACN,CAEJ,CC5PO,SAAS2C,GAAYhF,EAAc,CACxC,KAAM,CACJ,KAAAG,EACA,QAAA8E,EAAU,0GACV,WAAAC,EACA,OAAA3E,EACA,QAAA4E,EACA,iBAAAC,EACA,OAAA3E,EACA,MAAAR,EACA,SAAAoF,EAAW,mVACX,YAAA/E,EACA,iBAAAa,EACA,UAAAmE,EAAY,YACZ,QAAAC,EACA,eAAAtE,EAAiBuE,EAAAA,OAAO,MAAM,YAC9B,gBAAAC,EAAkB,GAClB,eAAA7E,EAAiB4E,EAAAA,OAAO,MAAM,MAAM,UAAU,EAC9C,eAAAE,EACA,QAAA5E,EACA,QAAA6E,EACA,YAAAhF,EAAc,OACd,aAAAiF,EAAe,GACf,SAAAC,EAAW,KACX,UAAAC,EAAY,EACZ,MAAAC,EAAQ,QACR,UAAAC,EACA,OAAAjF,EACA,WAAAC,EACA,WAAAd,EAAa,GACb,WAAAE,GAAa,GACb,cAAAI,EACA,YAAAU,EAAc,CAAC,EAAG,CAAC,EACnB,gBAAAL,GAAkB,OAClB,eAAAO,GAAiB,GACjB,4BAAAK,EAA8B,GAC9B,eAAAH,EACA,kBAAAE,EACA,mBAAAD,EACA,eAAAG,GAAiB,CAAA,EACjB,MAAAC,EAAQ,EACR,YAAAC,EAAc,CAAC,EAAG,CAAC,EACnB,gBAAAC,GAAkB,IAClB,yBAAAI,EAA2B,EAC3B,mBAAAD,GAAqB,IACrB,WAAAE,EAAa,SAAA,EACXlC,EAEE,CAACiG,EAAUC,CAAW,EAAI3D,EAAAA,SAAc,MAAS,EAEjD,CAAC4D,EAAUC,CAAW,EAAI7D,EAAAA,SAAS,CAAC,EACpC,CAAC8D,EAAWC,CAAY,EAAI/D,EAAAA,SAAS,CAAC,EAEtCgE,EAAWnE,EAAAA,OAAuB,IAAI,EAE5Ca,EAAAA,UAAU,IAAM,CACd,MAAMuD,EAAiB,IAAI,eAAeC,GAAW,CACnDL,EAAYnG,GAASwG,EAAQ,CAAC,EAAE,OAAO,aAAe,GAAG,EACzDH,EAAa7F,GAAUgG,EAAQ,CAAC,EAAE,OAAO,cAAgB,GAAG,CAC9D,CAAC,EACD,OAAIF,EAAS,UACXD,EAAaC,EAAS,QAAQ,cAAgB,GAAG,EACjDH,EAAYG,EAAS,QAAQ,aAAe,GAAG,EAC1CtG,GAAOuG,EAAe,QAAQD,EAAS,OAAO,GAE9C,IAAMC,EAAe,WAAA,CAC9B,EAAG,CAACvG,EAAOQ,CAAM,CAAC,EAClBwC,EAAAA,UAAU,IAAM,CACV,OAAOgC,GAAY,SACHyB,GAAAA,kBAAkBzB,CAAO,EACjC,KAAKd,GAAK,CAClB,GACEc,IACA,0GACA,CAEA,MAAM0B,GAAWxC,EAAE,SAAS,IAAKN,GAAY,CAC3C,GAAIA,EAAG,SAAS,OAAS,UAAW,CAClC,MAAM+C,GAAW,CAAC,GAAG/C,EAAG,SAAS,YAAY,CAAC,CAAC,EAAE,QAAA,EAC3CgD,GAAW,CAAE,GAAGhD,EAAG,SAAU,YAAa,CAAC+C,EAAQ,CAAA,EACzD,MAAO,CAAE,GAAG/C,EAAI,SAAAgD,EAAAA,CAClB,CAEA,MAAMC,GAAa,CAAA,EAEnBjD,EAAG,SAAS,YAAY,QAASkD,IAAW,CAC1C,MAAMH,GAAW,CAAC,GAAGG,GAAE,CAAC,CAAC,EAAE,QAAA,EAC3BD,GAAM,KAAK,CAACF,EAAQ,CAAC,CACvB,CAAC,EACD,MAAMC,GAAW,CAAE,GAAGhD,EAAG,SAAU,YAAaiD,EAAA,EAChD,MAAO,CAAE,GAAGjD,EAAI,SAAAgD,EAAA,CAClB,CAAC,EACDX,EAAYS,EAAQ,CACtB,MAAOT,EAAY/B,EAAE,QAAQ,CAC/B,CAAC,EAED+B,EAAYjB,EAAQ,QAAQ,CAEhC,EAAG,CAACA,CAAO,CAAC,EAEZ,MAAM+B,EACJ1G,IACCgF,IAAc,cACX2B,GAAAA,aAAa9G,EAAM,GAAG,EACtB+G,GAAAA,SACE/G,EAAK,IAAIgE,GAAKA,EAAE,CAA8B,EAC9C5D,GAAQ,QAAU,CAAA,GAE1B,OACEiD,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAW,GAAGuC,GAAS,OAAO,UAAU9F,EAAQ,eAAiB,aAAa,GAC9E,IAAK4F,IAAa,MAAQA,IAAa,KAAO,MAAQ,OAEtD,SAAArC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAW2D,EAAAA,GACT,GACG1B,EAEGA,IAAoB,GAClB,gDACA,GAHF,iBAIN,gDAAgDI,GAAY,IAAI,GAChE7E,GAAY,cAAA,EAEd,MAAO,CACL,GAAID,GAAQ,gBAAkB,CAAA,EAC9B,GAAI0E,GAAmBA,IAAoB,GAAO,CAAE,gBAAAA,CAAA,EAAoB,CAAA,CAAC,EAE3E,GAAIE,EACJ,aACEK,GACA,GACEd,EAAa,mBAAmBA,CAAU,KAAO,EACnD,iBAAiBE,EAAmB,IAAIA,CAAgB,GAAK,EAAE,GAGjE,SAAA5B,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,YACV,MAAO,CAAE,QAASiC,EAAkBF,GAAW,OAASA,GAAW,CAAA,EAEnE,SAAAhC,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,kDACZ,SAAA,CAAA2B,GAAcE,GAAoBQ,EACjCpC,EAAAA,kBAAAA,IAAC4D,GAAAA,YAAA,CACC,OAAQ,CACN,MAAOrG,GAAQ,MACf,YAAaA,GAAQ,WAAA,EAEvB,WAAY,CACV,MAAOC,GAAY,MACnB,YAAaA,GAAY,WAAA,EAE3B,WAAAkE,EACA,iBAAAE,EACA,MAAAnF,EACA,cAAe,OACf,aACE2F,EACIzF,EAAK,IAAIgE,GAAKA,EAAE,IAAI,EAAE,OAAOA,GAAKA,IAAM,MAAS,EAAE,OAAS,EAC1DhE,EAAK,IAAIgE,GAAKA,EAAE,IAAI,EAAE,OAAOA,GAAKA,IAAM,MAAS,EACjDhE,EAAK,OAAOgE,GAAKA,IAAM,MAAS,EAClC,IAAA,CAAA,EAGN,KACJX,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,8CACV,IAAK+C,EACL,aAAW,WAET,UAAAtG,GAASkG,KAAc1F,GAAU4F,IAAcJ,EAC/CzC,EAAAA,kBAAAA,IAACzD,GAAA,CACC,KAAAI,EACA,YAAAyB,EACA,YAAaqE,EACb,YAAae,EACb,MAAO/G,GAASkG,EAChB,OAAQ,KAAK,IACXL,EACArF,IACGiF,EACGI,GACG7F,GAASkG,GAAYT,EAAiBI,GACpC7F,GAASkG,GAAYT,EACtBI,GACD7F,GAASkG,GAAYT,EACxBW,EAAA,EAER,OACE9F,IACC+E,IAAc,cACXE,EAAAA,OAAOO,CAAK,EAAE,iBACZ,kBAAkBiB,EAAO,MAA+B,EAC1D,EACAxB,EAAAA,OAAOO,CAAK,EAAE,iBACZ,kBAAmBiB,EAAO,OAAS,CAA2B,EAChE,GAEN,eAAA/F,EACA,YAAaqE,IAAc,cAC3B,eAAA1E,EACA,QAAAE,EACA,YAAAH,EACA,OAAAI,EACA,WAAAC,EACA,WAAYd,IAAe,GAAO,IAAMA,IAAe,GAAQ,EAAIA,EACnE,WAAAE,GACA,cAAAI,EACA,gBAAAK,GACA,YAAAK,EACA,iBAAAC,EACA,eAAAC,GACA,iBACE2E,IAAU,QACNP,EAAAA,OAAO,MAAM,MAAM,UAAU,EAC7BA,EAAAA,OAAO,MAAM,MAAM,UAAU,EAEnC,eAAA9D,GACA,4BAAAD,EACA,eAAAH,EACA,kBAAAE,EACA,mBAAAD,EACA,MAAAI,EACA,gBAAAE,GACA,UAAWX,EAAY,CAAC,EACxB,UAAWA,EAAY,CAAC,EACxB,mBAAAc,GACA,yBAAAC,EACA,WAAAC,CAAA,CAAA,EAGFsB,EAAAA,kBAAAA,IAAC,MAAA,CACC,MAAO,CACL,OAAQ,GAAG,KAAK,IACdsC,EACArF,IACGiF,EACGI,GACG7F,GAASkG,GAAYT,EAAiBI,GACpC7F,GAASkG,GAAYT,EACtBI,GACD7F,GAASkG,GAAYT,EACxBW,EAAA,CACP,IAAA,EAEH,UAAU,mCAEV,SAAA7C,EAAAA,kBAAAA,IAAC6D,GAAAA,EAAA,CAAQ,aAAW,eAAA,CAAgB,CAAA,CAAA,CACtC,CAAA,EAGHlC,GAAWE,EACV7B,EAAAA,kBAAAA,IAAC8D,GAAAA,YAAA,CACC,OAAQ,CAAE,SAAUvG,GAAQ,SAAU,OAAQA,GAAQ,MAAA,EACtD,WAAY,CACV,SAAUC,GAAY,SACtB,OAAQA,GAAY,MAAA,EAEtB,QAAAmE,EACA,SAAAE,EACA,MAAApF,CAAA,CAAA,EAEA,IAAA,CAAA,CACN,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CAGN"}

package/dist/ThreeDGlobe.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { default as default_2 } from 'react';
+import { default as default_3 } from 'react-globe.gl';
 import { JSX } from 'react/jsx-runtime';
 import * as THREE from 'three';
@@ -40,9 +41,11 @@ declare interface ClassNameObject {
     dataCards?: string;
 }
+declare type GlobeProps = default_2.ComponentProps<typeof default_3>;
 declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
-declare interface Props {
+declare interface Props extends Partial<Omit<GlobeProps, 'backgroundColor'>> {
     /** Array of data objects */
     data: ChoroplethMapDataType[];
     /** Title of the graph */
@@ -88,7 +91,7 @@ declare interface Props {
     /** Defines if the globe rotates automatically */
     autoRotate?: number | boolean;
     /** Defines the material property applied to the sphere of the globe */
-    globeMaterial?: THREE.MeshPhongMaterialProperties;
+    globeMaterial?: THREE.Material;
     /** Defines the colo of the glow around the globe */
     atmosphereColor?: string;
     /** Defines if the globe can be zoomed when scrolled */
@@ -105,6 +108,12 @@ declare interface Props {
     categorical?: boolean;
     /** Toggle visibility of color scale. */
     showColorScale?: boolean;
+    /** The max altitude of the atmosphere, in terms of globe radius units. */
+    atmosphereAltitude?: number;
+    /** 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. */
+    globeCurvatureResolution?: number;
+    /** Defines the color of the light and atmosphere. */
+    lightColor?: string;
     /** Property in the property object in mapData geoJson object is used to match to the id in the data object */
     mapProperty?: string;
     /** Countries or regions to be highlighted */