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)
}