update viewers page
This commit is contained in:
+10
-4
@@ -2513,7 +2513,11 @@ function ViewersPage({ viewers }) {
|
|||||||
function LocationSignalMap({ countries, locations }) {
|
function LocationSignalMap({ countries, locations }) {
|
||||||
const mapRef = useRef(null)
|
const mapRef = useRef(null)
|
||||||
const markersRef = useRef(null)
|
const markersRef = useRef(null)
|
||||||
const maxCountryVisitors = Math.max(1, ...countries.map((country) => Number(country.visitors || 0)))
|
const maxMarkerVisitors = Math.max(
|
||||||
|
1,
|
||||||
|
...countries.map((country) => Number(country.visitors || 0)),
|
||||||
|
...locations.map((location) => Number(location.visitors || 0)),
|
||||||
|
)
|
||||||
const countryMarkers = countries
|
const countryMarkers = countries
|
||||||
.map((country) => {
|
.map((country) => {
|
||||||
const lat = Number(country.latitude)
|
const lat = Number(country.latitude)
|
||||||
@@ -2594,7 +2598,8 @@ function LocationSignalMap({ countries, locations }) {
|
|||||||
layer.clearLayers()
|
layer.clearLayers()
|
||||||
|
|
||||||
countryMarkers.forEach((country) => {
|
countryMarkers.forEach((country) => {
|
||||||
const radius = 10 + (Number(country.visitors || 0) / maxCountryVisitors) * 22
|
const share = Number(country.visitors || 0) / maxMarkerVisitors
|
||||||
|
const radius = 8 + Math.sqrt(share) * 34
|
||||||
L.circleMarker([country.lat, country.lon], {
|
L.circleMarker([country.lat, country.lon], {
|
||||||
color: '#e82517',
|
color: '#e82517',
|
||||||
fillColor: '#e82517',
|
fillColor: '#e82517',
|
||||||
@@ -2611,7 +2616,8 @@ function LocationSignalMap({ countries, locations }) {
|
|||||||
})
|
})
|
||||||
|
|
||||||
cityMarkers.forEach((location) => {
|
cityMarkers.forEach((location) => {
|
||||||
const radius = 7 + (Number(location.visitors || 0) / maxCountryVisitors) * 16
|
const share = Number(location.visitors || 0) / maxMarkerVisitors
|
||||||
|
const radius = 5 + Math.sqrt(share) * 24
|
||||||
L.circleMarker([location.lat, location.lon], {
|
L.circleMarker([location.lat, location.lon], {
|
||||||
color: '#000000',
|
color: '#000000',
|
||||||
fillColor: '#000000',
|
fillColor: '#000000',
|
||||||
@@ -2626,7 +2632,7 @@ function LocationSignalMap({ countries, locations }) {
|
|||||||
})
|
})
|
||||||
.addTo(layer)
|
.addTo(layer)
|
||||||
})
|
})
|
||||||
}, [cityMarkers, countryMarkers, maxCountryVisitors])
|
}, [cityMarkers, countryMarkers, maxMarkerVisitors])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-5">
|
<div className="p-5">
|
||||||
|
|||||||
Reference in New Issue
Block a user