diff --git a/.gitignore b/.gitignore index fad250df..692e12ef 100644 --- a/.gitignore +++ b/.gitignore @@ -51,3 +51,4 @@ src/web3/#walletConnect.js# # Sentry Config File .sentryclirc /.env +/.env.local diff --git a/src/components/Posts/Graphs/Map/handlingFunctions.js b/src/components/Posts/Graphs/Map/handlingFunctions.js index e6b26d35..115a973f 100644 --- a/src/components/Posts/Graphs/Map/handlingFunctions.js +++ b/src/components/Posts/Graphs/Map/handlingFunctions.js @@ -5,62 +5,70 @@ import { toRaw } from 'vue' export const handleLikesAndDislikes = (data, mapRef) => { if (!Array.isArray(data)) return - const countryWithMostInteractions = data.reduce((prev, current) => - current.interactions.likes + current.interactions.dislikes > (prev?.interactions.likes + prev?.interactions.dislikes || 0) - ? current - : prev - ) - - const countryCoordinates = countries.find((country) => country.code === countryWithMostInteractions.location)?.coordinates - if (countryCoordinates) { - toRaw(mapRef.value).setView(countryCoordinates, 3) - - const minRadius = 20000 - data.forEach((countryData) => { - const totalInteractions = countryData.interactions.likes + countryData.interactions.dislikes - if (totalInteractions > 0) { - const commentsLocation = countries.find((country) => country.code === countryData.location)?.country - const popupContent = `Country: ${commentsLocation}
Total Likes: ${countryData.interactions.likes}
Total Dislikes: ${countryData.interactions.dislikes}` - const calcRadius = totalInteractions * 30000 - const radius = Math.max(calcRadius, minRadius) - const circleOptions = { - autoClose: false, - closeOnClick: false, - radius, - fillOpacity: 0.5, - color: '#e54757', - fillColor: '#e54757', - weight: 1.4 - } - const countryCoordinates = countries.find((country) => country.code === countryData.location)?.coordinates + const minLikes = Math.min(...data.map((item) => item.interactions.likes + item.interactions.dislikes || 0)) + const maxLikes = Math.max(...data.map((item) => item.interactions.likes + item.interactions.dislikes || 0)) - if (countryCoordinates) { - L.circle(countryCoordinates, circleOptions).addTo(toRaw(mapRef.value)).bindPopup(popupContent) - } + const minRadius = 20000 + const maxRadius = 150000 + + data.forEach((countryData) => { + const totalInteractions = countryData.interactions.likes + countryData.interactions.dislikes + if (totalInteractions > 0) { + const commentsLocation = countries.find((country) => country.code === countryData.location)?.country + const popupContent = `Country: ${commentsLocation}
Total Likes: ${countryData.interactions.likes}
Total Dislikes: ${countryData.interactions.dislikes}` + + let normalizedRadius = minRadius + ((totalInteractions - minLikes) / (maxLikes - minLikes)) * (maxRadius - minRadius) + normalizedRadius = Math.max(minRadius, Math.min(normalizedRadius, maxRadius)) + + const circleOptions = { + autoClose: false, + closeOnClick: false, + radius: normalizedRadius, + fillOpacity: 0.5, + color: '#e54757', + fillColor: '#e54757', + weight: 1.4 } - }) - } + + const countryCoordinates = countries.find((country) => country.code === countryData.location)?.coordinates + if (countryCoordinates) { + L.circle(countryCoordinates, circleOptions).addTo(toRaw(mapRef.value)).bindPopup(popupContent) + } + } + }) } export const handleComments = (data, mapRef) => { if (!Array.isArray(data)) return - const minRadius = 40000 + + const minComments = Math.min(...data.map((item) => item.comments || 0)) + const maxComments = Math.max(...data.map((item) => item.comments || 0)) + + const minRadius = 20000 + const maxRadius = 120000 + data.forEach((countryData) => { const commentsCount = countryData.comments || 0 if (commentsCount > 0) { const commentsCoordinates = countries.find((country) => country.code === countryData.location)?.coordinates const commentsLocation = countries.find((country) => country.code === countryData.location)?.country + if (commentsCoordinates) { + let normalizedRadius = minRadius + ((commentsCount - minComments) / (maxComments - minComments)) * (maxRadius - minRadius) + normalizedRadius = Math.max(minRadius, Math.min(normalizedRadius, maxRadius)) + const popupContent = `Country: ${commentsLocation}
Total Comments: ${commentsCount}` - const calcRadius = Math.sqrt(commentsCount / Math.PI) * 4000 - const radius = Math.max(calcRadius, minRadius) + const circleOptions = { - radius, + autoClose: false, + closeOnClick: false, + radius: normalizedRadius, fillOpacity: 0.5, color: '#e54757', fillColor: '#e54757', weight: 1.4 } + toRaw(mapRef.value).setView(commentsCoordinates, 3) L.circle(commentsCoordinates, circleOptions).addTo(toRaw(mapRef.value)).bindPopup(popupContent) } @@ -70,23 +78,33 @@ export const handleComments = (data, mapRef) => { export const handleShares = (data, mapRef) => { if (!Array.isArray(data)) return + const minShares = Math.min(...data.map((item) => item.shares || 0)) + const maxShares = Math.max(...data.map((item) => item.shares || 0)) const minRadius = 40000 + const maxRadius = 150000 + data.forEach((countryData) => { const sharesCount = countryData?.shares || 0 if (sharesCount > 0) { const sharesCoordinates = countries.find((country) => country.code === countryData.location)?.coordinates const sharesLocation = countries.find((country) => country.code === countryData.location)?.country + if (sharesCoordinates) { + let normalizedRadius = minRadius + ((sharesCount - minShares) / (maxShares - minShares)) * (maxRadius - minRadius) + normalizedRadius = Math.max(minRadius, Math.min(normalizedRadius, maxRadius)) + const popupContent = `Country: ${sharesLocation}
Total Shares: ${sharesCount}` - const calcRadius = Math.sqrt(sharesCount / Math.PI) * 4000 - const radius = Math.max(calcRadius, minRadius) + const circleOptions = { - radius, + autoClose: false, + closeOnClick: false, + radius: normalizedRadius, fillOpacity: 0.5, color: '#e54757', fillColor: '#e54757', weight: 1.4 } + toRaw(mapRef.value).setView(sharesCoordinates, 3) L.circle(sharesCoordinates, circleOptions).addTo(toRaw(mapRef.value)).bindPopup(popupContent) }