diff --git a/webapp/src/components/GeoMap/CountryMap.js b/webapp/src/components/GeoMap/CountryMap.js index 89782bc3..e4d58707 100644 --- a/webapp/src/components/GeoMap/CountryMap.js +++ b/webapp/src/components/GeoMap/CountryMap.js @@ -18,12 +18,67 @@ const ClusterMap = ({ data, map, mapCode }) => { const navigate = useNavigate() const myRef = useRef() + const find2DPointDistance = (p0, p1) => { + return 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 = '') => { + + data = data.reduce((result, current) => { + if (result.every(node => node.name !== current.name)) { + result.push(current) + } + + return result + }, []) + + for (const index in data) { + const node = data[index] + const point = { x: node.lon, y: node.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(point,auxPoint) + + if (distance < 0.5) { + const newPoint = getNew2DPoint( + point, + 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 +87,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 +114,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/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)', + }, + } + } }, })