From 285cfa1400271c8db1e7e63cc9981803bbea6f1c Mon Sep 17 00:00:00 2001
From: Daniel Pettersson <danpe975@student.liu.se>
Date: Fri, 19 Apr 2024 15:03:52 +0200
Subject: [PATCH] Feature completed: Region selection on the map and region
selection through the search bar are now both dynamically linked to each
other and either one of those will change the represented region in the
visualiser
---
frontend/src/Components/Search/Searchbar.jsx | 3 ++-
frontend/src/Pages/Dashboard/Dashboard.jsx | 17 ++++++++++++++---
frontend/src/Pages/Dashboard/Map.jsx | 17 ++++++++++++++---
3 files changed, 30 insertions(+), 7 deletions(-)
diff --git a/frontend/src/Components/Search/Searchbar.jsx b/frontend/src/Components/Search/Searchbar.jsx
index f25bed7..a35d2a5 100644
--- a/frontend/src/Components/Search/Searchbar.jsx
+++ b/frontend/src/Components/Search/Searchbar.jsx
@@ -3,9 +3,10 @@ import * as MUI from '@mui/material';
import MultiSelectText from './MultiSelectText';
import "../../Css/Search.css";
-export const Searchbar = ({ data }) => {
+export const Searchbar = ({ data, handlerFunction, changeRegion }) => {
const [selectedProvince, setSelectedProvince] = useState(null);
+ changeRegion(selectedProvince)
const selection1 = {
title: "Tabellinnehåll",
diff --git a/frontend/src/Pages/Dashboard/Dashboard.jsx b/frontend/src/Pages/Dashboard/Dashboard.jsx
index 3f1d331..ec22a8a 100644
--- a/frontend/src/Pages/Dashboard/Dashboard.jsx
+++ b/frontend/src/Pages/Dashboard/Dashboard.jsx
@@ -6,21 +6,32 @@ import Visualiser from './Visualiser';
import { Searchbar } from '../../Components/Search/Searchbar';
export const Dashboard = () => {
const [data, setData] = useState({label: "", id: ""});
+ const [region, setRegion] = useState({});
+
const handlerFunction = (Region_data) => {
setData(Region_data)
-}
+ }
+ const changeRegion = (regionName) => {
+ // Update the region state to trigger re-render and change the color of the specified region's path
+ setRegion(regionName);
+ //const data = {label: regionName, id: "12"};
+
+ handlerFunction(data);
+
+
+ };
return (
<div className='dashboard'>
<TopNavBar/>
<div className='container'>
<div className='map_container' id="d3_map">
- <Map handlerFunction={handlerFunction}/>
+ <Map handlerFunction={handlerFunction} selectedRegion={region}/>
</div>
<div className='search_container'>
- <Searchbar data={data.label} handlerFunction={handlerFunction}/>
+ <Searchbar data={data.label} handlerFunction={handlerFunction} changeRegion= {changeRegion}/>
</div>
<div className='table_container'>
diff --git a/frontend/src/Pages/Dashboard/Map.jsx b/frontend/src/Pages/Dashboard/Map.jsx
index a30f1f4..95e37fe 100644
--- a/frontend/src/Pages/Dashboard/Map.jsx
+++ b/frontend/src/Pages/Dashboard/Map.jsx
@@ -12,12 +12,22 @@ function getgeoJson(){
return geojson;
}
-const Map = ({handlerFunction}) => {
+const Map = ({handlerFunction, selectedRegion}) => {
useEffect(() => {
+ function colorHandler(d){
+ if(d.properties.name === selectedRegion){
+ const data = {label: d.properties.name, id: d.properties.l_id};
+ handlerFunction(data);
+ return 'lightgray';
+ }else{
+ return 'white';
+ }
+ }
+
let geojson = getgeoJson();
//Filtering out non-topological data
@@ -46,7 +56,8 @@ const Map = ({handlerFunction}) => {
.data(geojson.features)
.enter().append('path')
.attr('d', geoGenerator)
- .attr('fill', 'white')
+ // .attr('fill', d => (d.properties.name === selectedRegion) ? 'lightgrey' : 'white') // Set fill color based on selectedRegion prop
+ .attr('fill', d => colorHandler(d))
.attr('stroke', 'black')
.on('click', function(event, d){ //OnClick event handler
// Handle the click event here
@@ -115,7 +126,7 @@ const Map = ({handlerFunction}) => {
// Remove SVG when component unmounts
svg.remove();
};
- }, []); // Empty dependency array to ensure useEffect runs only once
+ }, [selectedRegion]); // Empty dependency array to ensure useEffect runs only once
// Return null because the map is rendered using D3 inside useEffect
return null;
--
GitLab