diff --git a/frontend/src/Components/Search/MultiSelectText.jsx b/frontend/src/Components/Search/MultiSelectText.jsx
index 281307cae10451eb38283ab96a08197d090c8386..193329854fc3f49d7a53d538e6211cddd09ba70a 100644
--- a/frontend/src/Components/Search/MultiSelectText.jsx
+++ b/frontend/src/Components/Search/MultiSelectText.jsx
@@ -1,23 +1,36 @@
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import React from 'react';
-
+import * as MUI from '@mui/material';
const Wrapper = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
gap: theme.spacing(1),
cursor: 'pointer', // Make the entire area clickable
+ maxHeight: '130px', // Set a fixed height
+ overflowY: 'auto', // Make the content scrollable
+ border: `2px solid black`, // Solid border
}));
const SelectedText = styled(Typography)(({ theme, selected }) => ({
- color: selected ? theme.palette.primary.main : theme.palette.text.primary,
+ width: '100%', // Make Typography span the whole width
+ color: selected ? 'black' : theme.palette.text.primary, // Set text color to black for selected options
fontWeight: selected ? 'bold' : 'normal',
+ backgroundColor: selected ? theme.palette.grey[400] : 'transparent', // Darker grey background when clicked for non-selected options
+ '&:hover': {
+ backgroundColor: selected ? theme.palette.grey[400] : theme.palette.grey[200], // Grey background on hover for non-selected options
+ },
+ '&:focus': {
+ backgroundColor: theme.palette.grey[400], // Darker grey background when clicked
+ color: 'black', // Set text color to black when clicked
+ },
}));
-const options = ['Antal nominerade', 'Andel nominerade', 'Antal valda', 'Andel valda', 'Antal ej valda'];
+function MultiSelectText({ selection }) {
+ const options = selection.options;
+ const title = selection.title;
-function MultiSelectText() {
const [selectedValues, setSelectedValues] = React.useState([]);
const handleClick = (option) => {
@@ -34,8 +47,12 @@ function MultiSelectText() {
};
return (
+ <div>
+ <MUI.Typography variant='h6' fontWeight={'bold'}>
+ {title}
+</MUI.Typography>
<Wrapper>
- {options.map((option) => (
+ {options.slice(0, 5).map((option) => (
<SelectedText
key={option}
onClick={() => handleClick(option)}
@@ -45,6 +62,8 @@ function MultiSelectText() {
</SelectedText>
))}
</Wrapper>
+ </div>
);
}
-export default MultiSelectText;
\ No newline at end of file
+
+export default MultiSelectText;
diff --git a/frontend/src/Components/Search/MultiSelectText2.jsx b/frontend/src/Components/Search/MultiSelectText2.jsx
deleted file mode 100644
index afe3824db164a8e5d66b4e75ab988dd390978b14..0000000000000000000000000000000000000000
--- a/frontend/src/Components/Search/MultiSelectText2.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
-import React from 'react';
-
-const Wrapper = styled('div')(({ theme }) => ({
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'flex-start',
- gap: theme.spacing(1),
- cursor: 'pointer', // Make the entire area clickable
-}));
-
-const SelectedText = styled(Typography)(({ theme, selected }) => ({
- color: selected ? theme.palette.primary.main : theme.palette.text.primary,
- fontWeight: selected ? 'bold' : 'normal',
-}));
-
-const options = ['män', 'kvinnor', 'totalt'];
-
-function MultiSelectText2() {
- const [selectedValues, setSelectedValues] = React.useState([]);
-
- const handleClick = (option) => {
- const currentIndex = selectedValues.indexOf(option);
- const newSelectedValues = [...selectedValues];
-
- if (currentIndex === -1) {
- newSelectedValues.push(option);
- } else {
- newSelectedValues.splice(currentIndex, 1);
- }
-
- setSelectedValues(newSelectedValues);
- };
-
- return (
- <Wrapper>
- {options.map((option) => (
- <SelectedText
- key={option}
- onClick={() => handleClick(option)}
- selected={selectedValues.includes(option)}
- >
- {option}
- </SelectedText>
- ))}
- </Wrapper>
- );
-}
-export default MultiSelectText2;
\ No newline at end of file
diff --git a/frontend/src/Components/Search/Searchbar.jsx b/frontend/src/Components/Search/Searchbar.jsx
index aabf99eeaf44d65c962cd2c667041e07f4f0f6ad..4b10f3c31beaa2d1c42bcfd87c42b514d01fa58a 100644
--- a/frontend/src/Components/Search/Searchbar.jsx
+++ b/frontend/src/Components/Search/Searchbar.jsx
@@ -1,57 +1,89 @@
-import React from 'react'
+import React, { useState, useEffect, useMemo } from 'react';
import * as MUI from '@mui/material';
-import MultiSelectText from './MultiSelectText'
-import MultiSelectText2 from './MultiSelectText2';
-import "./Search.css"
-export const Searchbar = () => {
-
-
- 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 }
- ];
- const optionsAntal = ['Antal nominerade', 'Andel nominerade', 'Antal valda', 'Andel valda', 'Antal ej valda'];
- const optionsKön = ['män', 'kvinnor', 'totalt'];
+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 selection1 = {
+ title: "Tabellinnehåll",
+ options: ['Antal nominerade', 'Andel nominerade', 'Antal valda', 'Andel valda', 'Antal ej valda']
+ };
+
+ const selection2 = {
+ title: "Kön",
+ options: ['män', 'kvinnor', 'totalt']
+ };
+
+ const selection3 = {
+ title: "Valår",
+ options: ['1995', '1999', '2004', '2009', '2014', '2019']
+ };
+
+ 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 }
+ ];
+
+ const handleProvinceChange = (event, newValue) => {
+ setSelectedProvince(newValue);
+ };
+
+ const isOptionEqualToValue = (option, value) => option.label === value.label && option.id === value.id;
+
+ const memoizedProvince = useMemo(() => selectedProvince, [selectedProvince]);
+
return (
<div>
- <MUI.Autocomplete
+ <MUI.Autocomplete
disablePortal
id="combo-box-demo"
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" />}>
-
- </MUI.Autocomplete>
- <MUI.Typography variant='h6' fontWeight={'bold'}>
- Tabellinnehål
- </MUI.Typography>
- <div className='multi_select'><MultiSelectText/></div>
- <MUI.Typography variant='h6' fontWeight={'bold'}>
- Kön
- </MUI.Typography>
- <div className='multi_select'><MultiSelectText2 /></div>
-
-
+ renderInput={(params) => <MUI.TextField {...params} label="Län" />}
+ />
+
+ <div className='multi_select'><MultiSelectText selection={selection1} /></div>
+ <div className='multi_select'><MultiSelectText selection={selection2} /></div>
+ <div className='multi_select'><MultiSelectText selection={selection3} /></div>
</div>
+ );
+};
- )
-}
+export default Searchbar;
diff --git a/frontend/src/Components/Search/Search.css b/frontend/src/Css/Search.css
similarity index 85%
rename from frontend/src/Components/Search/Search.css
rename to frontend/src/Css/Search.css
index 52f2c3a00a18556fb5f7095dc810c54ea424d8af..f87be40f23d9308de61d57c25b9fdf6f58faa53e 100644
--- a/frontend/src/Components/Search/Search.css
+++ b/frontend/src/Css/Search.css
@@ -5,7 +5,7 @@
.multi_select{
margin: 5px;
margin-top: 20px;
- border-style: solid;
+
padding: 2px;
}
\ No newline at end of file
diff --git a/frontend/src/Pages/Dashboard/Dashboard.jsx b/frontend/src/Pages/Dashboard/Dashboard.jsx
index 9e6856dfc41e54702a245e4b2e3c73ac9e5264ea..d34c41b96eb3aab0ebd862923ba2daeac53104e8 100644
--- a/frontend/src/Pages/Dashboard/Dashboard.jsx
+++ b/frontend/src/Pages/Dashboard/Dashboard.jsx
@@ -20,7 +20,7 @@ export const Dashboard = () => {
</div>
<div className='search_container'>
- <Searchbar/>
+ <Searchbar data={data}/>
</div>
<div className='table_container'>
diff --git a/frontend/src/Pages/Dashboard/Map.jsx b/frontend/src/Pages/Dashboard/Map.jsx
index 3daa106880e73ef27ea2a2e695005aae21e851f0..f689b786cae90e5b316ace2a6e83f7790b8b96ad 100644
--- a/frontend/src/Pages/Dashboard/Map.jsx
+++ b/frontend/src/Pages/Dashboard/Map.jsx
@@ -49,10 +49,10 @@ const Map = ({handlerFunction}) => {
.attr('stroke', 'black')
.on('click', function(event, d){ //OnClick event handler
// Handle the click event here
- const data = {province: d.properties.name, id: d.properties.l_id};
+ const data = {label: d.properties.name, id: d.properties.l_id};
handlerFunction(data);
- console.log("province: " + data.province +' id: '+data.id);
+ console.log("province: " + data.label +' id: '+data.id);
}).on('mouseenter', function(event, d) {//OnMouseEnter event handler
// Update region state