@@ -63,42 +63,52 @@ const UserEngagementByRegionChart = ({ data }: Props) => {
6363}
6464} , [ ] )
6565
66+ const geoPoints = useMemo ( ( ) => {
67+ return data . reduce ( ( acc , log ) => {
68+ const region = log ?. geolocationDataJsonb ?. city ?. names ?. en || 'Unknown' ; // assuming `region` is added to each event
69+ let regionData = {
70+ latitude :log ?. geolocationDataJsonb ?. location ?. latitude ?? 55 ,
71+ longitude :log ?. geolocationDataJsonb ?. location ?. longitude ?? 15 ,
72+ count :0 ,
73+ } ;
74+ if ( acc [ region ] ) {
75+ acc [ region ] = {
76+ ...acc [ region ] ,
77+ count :acc [ region ] . count + 1 ,
78+ }
79+ } else {
80+ acc [ region ] = regionData ;
81+ }
82+ return acc ;
83+ } , { } as Record < string , number > ) ;
84+ } , [ data ] ) ;
85+
6686const series = useMemo ( ( ) => {
6787return [
6888{
69- "name" :"Company Size " ,
89+ "name" :"Users/Region " ,
7090"type" :"scatter" ,
7191"coordinateSystem" :"gmap" ,
7292"itemStyle" :{
7393"color" :"#ff00ff"
7494} ,
75- "data" :data
76- // .filter(item => {
77- // if (!item.geolocationDataJsonb) return false;
78- // return item.geolocationDataJsonb.longitude !== null &&
79- // item.geolocationDataJsonb.latitude !== null
80- // })
81- . map ( item => ( {
82- name :item . details ?. applicationName ,
83- value :[
84- ...getRandomLatLng ( 35 , 72 , 25 , 65 ) ,
85- 1 ,
86- ]
87- // value: [
88- // geoLocation.location.longitude, // item.longitude,
89- // geoLocation.location.latitude, // item.latitude,
90- // 1
91- // ]
92- } ) )
93- ,
95+ "data" :Object . keys ( geoPoints ) . map ( key => ( {
96+ name :key ,
97+ value :[
98+ geoPoints [ key ] . longitude ,
99+ geoPoints [ key ] . latitude ,
100+ geoPoints [ key ] . count ,
101+ ]
102+ } ) ) ,
103+ "symbolSize" :( val :number [ ] ) => { return 8 + ( ( Math . log ( val [ 2 ] ) - Math . log ( 2 ) ) / ( Math . log ( 40 ) - Math . log ( 2 ) ) ) * ( 40 - 8 ) } ,
94104"encode" :{
95105"value" :2 ,
96106"lng" :0 ,
97107"lat" :1
98108}
99109}
100110]
101- } , [ data ] ) ;
111+ } , [ geoPoints ] ) ;
102112
103113return (
104114< >
@@ -115,7 +125,9 @@ const UserEngagementByRegionChart = ({ data }: Props) => {
115125} ,
116126tooltip :{
117127trigger :"item" ,
118- formatter :"{b}"
128+ formatter :( params :{ data :{ name :string ; value :any [ ] ; } ; } ) => {
129+ return `${ params . data . name } ${ params . data . value [ 2 ] } ;
130+ }
119131} ,
120132animation :true ,
121133series :series ,