Fix/adjust links in geo map 1348

webapp/src/components/GeoMap/CountryMap.js

@@ -18,12 +18,51 @@ const ClusterMap = ({ data, map, mapCode }) => {
   const navigate = useNavigate()
   const myRef = useRef()
 
+  const find2DPointDistance = (p0, p1) =>
+    Math.sqrt((p0.x - p1.x) ** 2 + (p0.y - p1.y) ** 2)
+
+  const getNew2DPoint = (p0, p1, distance) => ({
+    x: (distance + 1) * p1.x + -distance * p0.x,
+    y: (distance + 1) * p1.y + -distance * p0.y,
+  })
+
   const setupMapData = useCallback(
     (data, map, mapCode = '') => {
+      for (const index in data) {
+        const currentPoint = { x: data[index].lon, y: data[index].lat }
+
+        for (const auxIndex in data) {
+          if (parseInt(index) >= parseInt(auxIndex)) continue
+
+          const auxPoint = { x: data[auxIndex].lon, y: data[auxIndex].lat }
+          const distance = find2DPointDistance(currentPoint, auxPoint)
+
+          if (distance < 0.5) {
+            const newPoint = getNew2DPoint(currentPoint, auxPoint, distance)
+
+            data[auxIndex].lon = newPoint.x
+            data[auxIndex].lat = newPoint.y
+          }
+        }
+      }
+
       const options = {
         chart: {
           map,
           backgroundColor: theme.palette.background.default,
+          events: {
+            load() {
+              const chart = this
+
+              chart.renderer
+                .button('Reset zoom', chart.plotLeft, chart.plotTop + 70)
+                .on('click', () => {
+                  chart.zoomOut()
+                })
+                .add()
+                .toFront()
+            },
+          },
         },
         legend: {
           enabled: false,
@@ -32,15 +71,15 @@ const ClusterMap = ({ data, map, mapCode }) => {
           text: countries[mapCode].name,
           style: {
             color: theme.palette.text.primary,
-          }
+          },
         },
         mapNavigation: {
-          enableButtons: false,
-          enabled: false,
+          enableButtons: true,
+          enabled: true,
           enableDoubleClickZoom: false,
           enableDoubleClickZoomTo: false,
           enableMouseWheelZoom: false,
-          enableTouchZoom: false,
+          enableTouchZoom: true,
         },
         tooltip: {
           enabled: false,
@@ -59,7 +98,7 @@ const ClusterMap = ({ data, map, mapCode }) => {
               useHTML: true,
               style: {
                 fontWeight: 'bold',
-                fontSize: '0.8rem',
+                fontSize: '1.1em',
                 paddingBottom: '8px',
               },
               formatter: function () {

webapp/src/components/GeoMap/index.js

@@ -87,9 +87,16 @@ const GeoMap = ({ data }) => {
     if (!mapSelected) return
 
     const getMap = async () => {
-      const mapDataSelected = data.filter(
-        ({ country }) => country === mapSelected.toUpperCase(),
-      )
+      const mapDataSelected = data.reduce((result, current) => {
+        if (
+          current.country === mapSelected.toUpperCase() &&
+          result.every(node => node.name !== current.name)
+        ) {
+          result.push(current)
+        }
+
+        return result
+      }, [])
       const { data: mapRes } = await axios.get(
         `${generalConfig.highchartsMapURL}${mapSelected}/${mapSelected}-all.geo.json`,
       )

webapp/src/components/GeoMap/styles.js

@@ -9,6 +9,9 @@ export default (theme) => ({
     height: '100vh',
     '& a': {
       color: theme.palette.primary.main
+    },
+    '& .highcharts-label': {
+      opacity: '1 !important',
     }
   },
 })

webapp/src/routes/Home/styles.js

@@ -22,5 +22,14 @@ export default (theme) => ({
       width: '100%',
       marginBottom: '10px',
     },
+    '& > .MuiCard-root': {
+      height: '100%',
+      '& :nth-child(2)': {
+        [theme.breakpoints.up('lg')]: {
+          position: 'relative',
+          top: 'calc(50% - 232px)',
+        },
+      }
+    }
   },
 })