diff --git a/frontend/public/index.html b/frontend/public/index.html
index aa069f27cbd9d53394428171c3989fd03db73c76..23f2ec8fe34a40ced4af45d0116c1d114e9ee724 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -9,12 +9,15 @@
name="description"
content="Web site created using create-react-app"
/>
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <!--link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+ -->
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
diff --git a/frontend/src/Components/Search/Searchbar.jsx b/frontend/src/Components/Search/Searchbar.jsx
index 4b10f3c31beaa2d1c42bcfd87c42b514d01fa58a..f25bed7ed1cd9442a9289dcc693ebafcfee8b0ab 100644
--- a/frontend/src/Components/Search/Searchbar.jsx
+++ b/frontend/src/Components/Search/Searchbar.jsx
@@ -4,19 +4,8 @@ import MultiSelectText from './MultiSelectText';
import "../../Css/Search.css";
export const Searchbar = ({ data }) => {
-
- const [selectedProvince, setSelectedProvince] = useState(null);
- useEffect(() => {
- if (data) {
- const selected = provinceOptions.find(option => option.label === data.label && option.id === data.id);
- if (selected) {
- setSelectedProvince(selected);
- } else {
- setSelectedProvince(null); // Reset to null if the province doesn't exist in the options
- }
- }
- }, [data]);
+ const [selectedProvince, setSelectedProvince] = useState(null);
const selection1 = {
title: "Tabellinnehåll",
@@ -34,34 +23,27 @@ export const Searchbar = ({ data }) => {
};
const provinceOptions = [
- { label: 'Stockholm', id: 1 },
- { label: 'Uppsala', id: 3 },
- { label: 'Södermanland', id: 4 },
- { label: 'Östergötland', id: 5 },
- { label: 'Jönköping', id: 6 },
- { label: 'Kronobergs', id: 7 },
- { label: 'Kalmar', id: 8 },
- { label: 'Gotland', id: 9 },
- { label: 'Blekinge', id: 10 },
- { label: 'Skåne', id: 12 },
- { label: 'Halland', id: 13 },
- { label: 'Västra Götaland', id: 14 },
- { label: 'Värmland', id: 17 },
- { label: 'Örebro', id: 18 },
- { label: 'Västmanland', id: 19 },
- { label: 'Dalarna', id: 20 },
- { label: 'Gävleborg', id: 21 },
- { label: 'Västernorrland', id: 22 },
- { label: 'Jämtland', id: 23 },
- { label: 'Västerbotten', id: 24 },
- { label: 'Norrbotten', id: 25 }
+ 'Stockholm', 'Uppsala', 'Södermanland', 'Östergötland', 'Jönköping',
+ 'Kronobergs', 'Kalmar', 'Gotland', 'Blekinge', 'Skåne', 'Halland',
+ 'Västra Götaland', 'Värmland', 'Örebro', 'Västmanland', 'Dalarna',
+ 'Gävleborg', 'Västernorrland', 'Jämtland', 'Västerbotten', 'Norrbotten'
];
+ useEffect(() => {
+ if (data && provinceOptions.includes(data)) {
+ setSelectedProvince(data);
+
+
+ } else {
+ setSelectedProvince(null);
+ }
+ }, [data]);
+
const handleProvinceChange = (event, newValue) => {
setSelectedProvince(newValue);
};
- const isOptionEqualToValue = (option, value) => option.label === value.label && option.id === value.id;
+ const isOptionEqualToValue = (option, value) => option === value;
const memoizedProvince = useMemo(() => selectedProvince, [selectedProvince]);
@@ -73,7 +55,6 @@ export const Searchbar = ({ data }) => {
options={provinceOptions}
value={memoizedProvince}
onChange={handleProvinceChange}
- getOptionLabel={(option) => option.label}
getOptionSelected={isOptionEqualToValue} // Custom equality test
sx={{ width: 300 }}
renderInput={(params) => <MUI.TextField {...params} label="Län" />}
diff --git a/frontend/src/Components/Search/asssets.txt b/frontend/src/Components/Search/asssets.txt
new file mode 100644
index 0000000000000000000000000000000000000000..4a719621280a223d81a8343e50c0ab93b6fce851
--- /dev/null
+++ b/frontend/src/Components/Search/asssets.txt
@@ -0,0 +1,23 @@
+ const provinceOptions = [
+ { label: 'Stockholm', id: 1 },
+ { label: 'Uppsala', id: 3 },
+ { label: 'Södermanland', id: 4 },
+ { label: 'Östergötland', id: 5 },
+ { label: 'Jönköping', id: 6 },
+ { label: 'Kronobergs', id: 7 },
+ { label: 'Kalmar', id: 8 },
+ { label: 'Gotland', id: 9 },
+ { label: 'Blekinge', id: 10 },
+ { label: 'Skåne', id: 12 },
+ { label: 'Halland', id: 13 },
+ { label: 'Västra Götaland', id: 14 },
+ { label: 'Värmland', id: 17 },
+ { label: 'Örebro', id: 18 },
+ { label: 'Västmanland', id: 19 },
+ { label: 'Dalarna', id: 20 },
+ { label: 'Gävleborg', id: 21 },
+ { label: 'Västernorrland', id: 22 },
+ { label: 'Jämtland', id: 23 },
+ { label: 'Västerbotten', id: 24 },
+ { label: 'Norrbotten', id: 25 }
+ ];
\ No newline at end of file
diff --git a/frontend/src/Css/Map.css b/frontend/src/Css/Map.css
index a9a62fb05cc76c4885618c48ab48dce3495051b4..35ba0ed3ba015eb3aebc240e6c55f3656cd8259b 100644
--- a/frontend/src/Css/Map.css
+++ b/frontend/src/Css/Map.css
@@ -5,10 +5,10 @@ svg {
path {
stroke: rgb(0, 0, 0);
stroke-width: 1px;
- fill: white;
+
}
path:hover {
stroke-width: 2px;
- fill: rgb(214, 214, 214);
+ /* fill: rgb(214, 214, 214);*/
}
\ No newline at end of file
diff --git a/frontend/src/Pages/Dashboard/Dashboard.jsx b/frontend/src/Pages/Dashboard/Dashboard.jsx
index d34c41b96eb3aab0ebd862923ba2daeac53104e8..3f1d33181634652fc327bf43360f7e41376ca92a 100644
--- a/frontend/src/Pages/Dashboard/Dashboard.jsx
+++ b/frontend/src/Pages/Dashboard/Dashboard.jsx
@@ -5,7 +5,7 @@ import Map from './Map';
import Visualiser from './Visualiser';
import { Searchbar } from '../../Components/Search/Searchbar';
export const Dashboard = () => {
- const [data, setData] = useState({province: "", id: ""});
+ const [data, setData] = useState({label: "", id: ""});
const handlerFunction = (Region_data) => {
setData(Region_data)
@@ -20,7 +20,7 @@ export const Dashboard = () => {
</div>
<div className='search_container'>
- <Searchbar data={data}/>
+ <Searchbar data={data.label} handlerFunction={handlerFunction}/>
</div>
<div className='table_container'>
diff --git a/frontend/src/Pages/Dashboard/Map.jsx b/frontend/src/Pages/Dashboard/Map.jsx
index f689b786cae90e5b316ace2a6e83f7790b8b96ad..a30f1f449c56ef93f21b7b3b6d311f056ac31a1b 100644
--- a/frontend/src/Pages/Dashboard/Map.jsx
+++ b/frontend/src/Pages/Dashboard/Map.jsx
@@ -39,37 +39,48 @@ const Map = ({handlerFunction}) => {
let rectY = 25;
-
+ let clickedPath = null;
+
// Join GeoJSON data to path elements
svg.selectAll('path')
.data(geojson.features)
.enter().append('path')
.attr('d', geoGenerator)
- .attr('fill', 'lightgray')
+ .attr('fill', 'white')
.attr('stroke', 'black')
.on('click', function(event, d){ //OnClick event handler
// Handle the click event here
- const data = {label: d.properties.name, id: d.properties.l_id};
+ // Change the fill color to black on click
+ // Reset the fill color of the previously clicked path
+ if (clickedPath) {
+ clickedPath.attr('fill', 'white');
+ }
+ // Set the fill color of the clicked path to black
+ d3.select(this).attr('fill', 'lightgrey');
+ clickedPath = d3.select(this);
+ console.log(d3.select(this))
+
+ const data = {label: d.properties.name, id: d.properties.l_id};
+
handlerFunction(data);
console.log("province: " + data.label +' id: '+data.id);
+ // Prevent event bubbling
}).on('mouseenter', function(event, d) {//OnMouseEnter event handler
- // Update region state
+
// Handle mouse enter event
const [x, y] = d3.pointer(event);
let length = d.properties.name.length
// Add background rectangle
- const textBackground = svg.append('rect')
- .attr('id', 'tooltip-background')
- .attr('x', x+5)
- .attr('y', y - rectY) // Adjust as needed
- .attr('width', 160 + (2^length)) // Adjust as needed
- .attr('height', 20) // Adjust as needed
- .attr('fill', 'white'); // Adjust background color as needed
-
-
+ const textBackground = svg.append('rect')
+ .attr('id', 'tooltip-background')
+ .attr('x', x+5)
+ .attr('y', y - rectY) // Adjust as needed
+ .attr('width', 160 + (2^length)) // Adjust as needed
+ .attr('height', 20) // Adjust as needed
+ .attr('fill', 'white'); // Adjust background color as needed
// Show text
svg.append('text')
.attr('id', 'tooltip')
diff --git a/frontend/src/Pages/Dashboard/Visualiser.jsx b/frontend/src/Pages/Dashboard/Visualiser.jsx
index 7dc2014643e5b86aa552344dba781b3bc8184664..447e2f636c6d07e5ae03ca8d148c13f0c5d9a07f 100644
--- a/frontend/src/Pages/Dashboard/Visualiser.jsx
+++ b/frontend/src/Pages/Dashboard/Visualiser.jsx
@@ -16,7 +16,7 @@ const Visualiser = ({Regiondata}) => {
{Regiondata.province}
</h2>
- <h3>LÄNSKOD: {Regiondata.id}</h3>
+ LÄNSKOD: {Regiondata.id}
<div className='table'>
<BarChart selectedKey={Regiondata.id}/>