1
- ' use client'
1
+ " use client" ;
2
2
3
- import * as React from ' react'
4
- import { scaleLinear } from ' d3-scale'
3
+ import * as React from " react" ;
4
+ import { scaleLinear } from " d3-scale" ;
5
5
import {
6
6
ComposableMap ,
7
7
Geographies ,
8
8
Geography ,
9
9
Marker ,
10
10
ZoomableGroup ,
11
- } from 'react-simple-maps'
12
- import ReactTooltip from 'react-tooltip'
13
- import { CircularProgress } from '@mui/material'
14
- import { useTheme } from '@mui/material/styles'
15
- import { ApiState , CountryDataResponse } from '../typeDefs/explorer-api'
16
- import MAP_TOPOJSON from '../assets/world-110m.json'
11
+ } from "react-simple-maps" ;
12
+ import { Tooltip as ReactTooltip } from "react-tooltip" ;
13
+ import { CircularProgress } from "@mui/material" ;
14
+ import { useTheme } from "@mui/material/styles" ;
15
+ import { ApiState , CountryDataResponse } from "../typeDefs/explorer-api" ;
16
+ import MAP_TOPOJSON from "../assets/world-110m.json" ;
17
+
18
+ import "react-tooltip/dist/react-tooltip.css" ;
17
19
18
20
type MapProps = {
19
- userLocation ?: [ number , number ]
20
- countryData ?: ApiState < CountryDataResponse >
21
- loading : boolean
22
- }
21
+ userLocation ?: [ number , number ] ;
22
+ countryData ?: ApiState < CountryDataResponse > ;
23
+ loading : boolean ;
24
+ } ;
23
25
24
26
export const WorldMap : FCWithChildren < MapProps > = ( {
25
27
countryData,
26
28
userLocation,
27
29
loading,
28
30
} ) => {
29
- const { palette } = useTheme ( )
31
+ const { palette } = useTheme ( ) ;
30
32
31
33
const colorScale = React . useMemo ( ( ) => {
32
34
if ( countryData ?. data ) {
33
35
const heighestNumberOfNodes = Math . max (
34
36
...Object . values ( countryData . data ) . map ( ( country ) => country . nodes )
35
- )
37
+ ) ;
36
38
return scaleLinear < string , string > ( )
37
39
. domain ( [
38
40
0 ,
@@ -42,17 +44,17 @@ export const WorldMap: FCWithChildren<MapProps> = ({
42
44
heighestNumberOfNodes ,
43
45
] )
44
46
. range ( palette . nym . networkExplorer . map . fills )
45
- . unknown ( palette . nym . networkExplorer . map . fills [ 0 ] )
47
+ . unknown ( palette . nym . networkExplorer . map . fills [ 0 ] ) ;
46
48
}
47
- return ( ) => palette . nym . networkExplorer . map . fills [ 0 ]
48
- } , [ countryData , palette ] )
49
+ return ( ) => palette . nym . networkExplorer . map . fills [ 0 ] ;
50
+ } , [ countryData , palette ] ) ;
49
51
50
52
const [ tooltipContent , setTooltipContent ] = React . useState < string | null > (
51
53
null
52
- )
54
+ ) ;
53
55
54
56
if ( loading ) {
55
- return < CircularProgress />
57
+ return < CircularProgress /> ;
56
58
}
57
59
58
60
return (
@@ -61,8 +63,8 @@ export const WorldMap: FCWithChildren<MapProps> = ({
61
63
data-tip = ""
62
64
style = { {
63
65
backgroundColor : palette . nym . networkExplorer . background . tertiary ,
64
- width : ' 100%' ,
65
- height : ' auto' ,
66
+ width : " 100%" ,
67
+ height : " auto" ,
66
68
} }
67
69
viewBox = "0, 50, 800, 350"
68
70
projection = "geoMercator"
@@ -75,7 +77,7 @@ export const WorldMap: FCWithChildren<MapProps> = ({
75
77
< Geographies geography = { MAP_TOPOJSON } >
76
78
{ ( { geographies } ) =>
77
79
geographies . map ( ( geo ) => {
78
- const d = ( countryData ?. data || { } ) [ geo . properties . ISO_A3 ]
80
+ const d = ( countryData ?. data || { } ) [ geo . properties . ISO_A3 ] ;
79
81
return (
80
82
< Geography
81
83
key = { geo . rsmKey }
@@ -84,25 +86,25 @@ export const WorldMap: FCWithChildren<MapProps> = ({
84
86
stroke = { palette . nym . networkExplorer . map . stroke }
85
87
strokeWidth = { 0.2 }
86
88
onMouseEnter = { ( ) => {
87
- const { NAME_LONG } = geo . properties
89
+ const { NAME_LONG } = geo . properties ;
88
90
if ( ! userLocation ) {
89
- setTooltipContent ( `${ NAME_LONG } | ${ d ?. nodes || 0 } ` )
91
+ setTooltipContent ( `${ NAME_LONG } | ${ d ?. nodes || 0 } ` ) ;
90
92
}
91
93
} }
92
94
onMouseLeave = { ( ) => {
93
- setTooltipContent ( '' )
95
+ setTooltipContent ( "" ) ;
94
96
} }
95
97
style = { {
96
98
hover :
97
99
! userLocation && countryData
98
100
? {
99
101
fill : palette . nym . highlight ,
100
- outline : ' white' ,
102
+ outline : " white" ,
101
103
}
102
104
: undefined ,
103
105
} }
104
106
/>
105
- )
107
+ ) ;
106
108
} )
107
109
}
108
110
</ Geographies >
@@ -123,7 +125,7 @@ export const WorldMap: FCWithChildren<MapProps> = ({
123
125
) }
124
126
</ ZoomableGroup >
125
127
</ ComposableMap >
126
- < ReactTooltip > { tooltipContent } </ ReactTooltip >
128
+ < ReactTooltip id = "tooltip" > { tooltipContent } </ ReactTooltip >
127
129
</ >
128
- )
129
- }
130
+ ) ;
131
+ } ;
0 commit comments