diff --git a/webapp/src/components/GeoMap/CountryMap.js b/webapp/src/components/GeoMap/CountryMap.js index 89782bc3..6e8faa4b 100644 --- a/webapp/src/components/GeoMap/CountryMap.js +++ b/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 () { diff --git a/webapp/src/components/GeoMap/index.js b/webapp/src/components/GeoMap/index.js index 5c54a8a2..53dc3427 100644 --- a/webapp/src/components/GeoMap/index.js +++ b/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`, ) diff --git a/webapp/src/components/GeoMap/styles.js b/webapp/src/components/GeoMap/styles.js index 5af6705f..4514c7cc 100644 --- a/webapp/src/components/GeoMap/styles.js +++ b/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', } }, }) diff --git a/webapp/src/routes/Home/styles.js b/webapp/src/routes/Home/styles.js index cabb5aa4..508ff2a8 100644 --- a/webapp/src/routes/Home/styles.js +++ b/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)', + }, + } + } }, })