Skip to content
Snippets Groups Projects
Commit 9ac37717 authored by danielmyren's avatar danielmyren
Browse files

Replaced with MultiLevelOptions, needed a more dynamic and straigtforward way to render options

parent 19348efb
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/Components/Search/MultiSelectText.jsx deleted 100644 → 0
+ 0
− 115
View file @ 19348efb
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import React from 'react';
import * as MUI from '@mui/material';
/**
* Styled wrapper component for a clickable, scrollable flex container with a fixed height.
*
* @param {Object} theme - The theme object containing styling variables.
* @returns {JSX.Element} - A styled div component.
*/
const Wrapper = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
gap: theme.spacing(1),
cursor: 'pointer', // Make the entire area clickable
maxHeight: '300px', // Set a fixed height
overflowY: 'auto', // Make the content scrollable
border: `2px solid white`, // Solid border
textColor: "white",
}));
/**
* Styled Typography component with conditional styling based on selection state.
*
* @param {Object} theme - The theme object containing styling variables.
* @param {boolean} selected - Flag to determine if the text is selected.
* @returns {JSX.Element} - A styled Typography component.
*/
const SelectedText = styled(Typography)(({ theme, selected }) => ({
width: '100%', // Make Typography span the whole width
color:"white",
fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;",
padding: "4px 4px 4px 8px",
fontWeight: selected ? 'bold' : '700',
fontSize: "15px",
backgroundColor: selected ? "#3D96B1" : 'transparent', // Darker grey background when clicked for non-selected options
'&:hover': {
backgroundColor: selected ? "#3D96B1" : "#82d5ee", // Grey background on hover for non-selected options
},
}));
/**
* Multi-select text component displaying a title and a list of selectable options.
*
* @param {Object} selection - The selection object containing title and options.
* @param {boolean} multiSelect - Flag to determine if multiple options can be selected.
* @param {Function} indexHandler - Callback function to handle the selected option index.
* @returns {JSX.Element} - A component with a title and a list of selectable text options.
*/
function MultiSelectText({ selection, multiSelect, indexHandler }) {
const options = selection.options;
const title = selection.title;
const [selectedValues, setSelectedValues] = React.useState([]);
const handleClick = (option) => {
if (!multiSelect) {
setSelectedValues([option]);
const optionIndex = options.indexOf(option);
console.log(optionIndex)
indexHandler(optionIndex);
} else {
const currentIndex = selectedValues.indexOf(option);
const newSelectedValues = [...selectedValues];
if (currentIndex === -1) {
newSelectedValues.push(option);
} else {
newSelectedValues.splice(currentIndex, 1);
}
setSelectedValues(newSelectedValues);
}
};
return (
<div>
<MUI.Typography
variant='h6'
sx={{
//transform: 'translateX(-6px)',
width: "100%",
marginTop: "36px",
fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;",
fontSize: "36px",
backgroundColor: "#061525",
lineHeight: "1.1",
}}
fontWeight={'bold'}
label="County">
{title}
</MUI.Typography>
<Wrapper>
{options.map((option) => (
<SelectedText
key={option}
onClick={() => handleClick(option)}
selected={selectedValues.includes(option)}
>
{option}
</SelectedText>
))}
</Wrapper>
</div>
);
}
export default MultiSelectText;
frontend/src/Components/Search/Selections.jsx deleted 100644 → 0
+ 0
− 154
View file @ 19348efb
/**
PSEUDO CODE for future Tree data structure with root, traversal method and helper functions
let root = selectionTree.root()
root.getID():
0
root.getTitle():
"EU Election"
root.getOptions():
[01, 02, 03]
let selection = root.traverse(id = 01)
*/
export const euElection = {
childrens: ['a','b','c'],
title: "EU Election",
options: ['Nominated and Elected', "Voter Survey", "Election Results"]
};
export const level_0_selection = {
childrens: ['a','b','c'],
title: "EU Election",
options: ['Nominated and Elected', "Voter Survey", "Election Results"]
};
export const level_1_1_selection = {
parent: ['a'],
id: [0, 1, 2, 3, 4, 5],
title: "Candidates in EU Elections (1995 - 2019)",
options: ['Gender', 'Gender and Age', 'Gender and Birthplace', 'Gender and Education', 'Gender and Income', 'Gender and Party']
};
export const level_1_2_selection = {
parent: ['b'],
id: [0, 1, 2, 3, 4, 5],
title: "Voter Participation in EU Elections: ",
options: [
'All voters by gender and age (2004 - 2014)',
'Swedish citizens in Sweden by gender and age (2004 - 2014)',
'Swedes abroad by gender and age (2004 - 2014)',
'Foreign citizens in Sweden by gender and age (2004 - 2014)',
'Swedish citizens by region, gender, and age (2004 - 2014)',
'Swedes by birth country, gender, and age (2004 - 2014)',
'Swedes by birth region and gender (2004 - 2014)',
'Swedes by foreign/Swedish background and gender (2004 - 2014)',
'Swedes by marital status, gender, and age (2004 - 2014)',
'Swedes by income, gender, and age (2004 - 2014)',
'Swedes by income percentile, gender, and age (2004 - 2014)',
'Swedes aged 18-64 by household type, employment, and gender (2004 - 2014)',
'Employed Swedes aged 18-64 by occupation and gender (2004 - 2014)',
'Employed Swedes aged 18-64 by socio-economic group, gender, and age (2004 - 2014)',
'Swedes by region, gender, and background (2019)',
'Employed/unemployed Swedes aged 18-64 by union membership, gender, and age (2004 - 2014)',
]
};
export const level_1_3_selection = {
parent: ['c'],
id: [0, 1, 2, 3, 4, 5],
title: "Voters / Results",
options: ['Voters', 'Results']
};
export const level_1_selections = {
level_1_1_selection, level_1_2_selection, level_1_3_selection
}
export const level1_3_1_selection = {
title: 'Voters',
options: [
'Region and citizenship (1995 - 2019)',
'Municipality, voter group, and gender (2004 - 2019)',
'Voter group, gender, and age (2004 - 2009)',
'Swedish citizens in Sweden by gender and birth region (2004 - 2019)',
'Swedes in Sweden by gender and background (2004 - 2019)',
'Swedes in Sweden by gender and education (2004 - 2019)',
'Voter group, gender, and age/first-time voters (2004 - 2019)'
]
};
export const level1_3_2_selection = {
title: 'Voters',
options: [
'Seats by party (1995 - 2019)',
'Personal votes by region, party, and gender (1995 - 2019)',
'Results by region and party (1995 - 2019)',
'Region, percentages (1995 - 2019)'
]
};
export const nomineeSelection = {
parent: ['a'],
id: [0, 1, 2, 3, 4, 5],
title: "Table Content",
options: ['Nominated Count', 'Nominated Percent', 'Elected Count', 'Elected Percent', 'Not Elected Count', 'Not Elected Percent']
};
export const genderSelection = {
parent: ['a'],
id: [0, 1, 2, 3, 4, 5],
title: "Gender",
options: ['Men', 'Women', 'Total']
};
export const yearSelection = {
parent: ['a'],
id: [0, 1, 2, 3, 4, 5],
title: "Election Year",
options: ['1995', '1999', '2004', '2009', '2014', '2019']
};
export const ageSelection = {
parent: ['a'],
id: [1],
title: "Age",
options: ['0-29 years', '30-49 years', '50-64 years', '65+ years']
};
export const bornSelection = {
parent: ['a'],
id: [2],
title: "Born in Sweden/Abroad",
options: ['Born in Sweden', 'Born Abroad']
};
export const educationSelection = {
parent: ['a'],
id: [3],
title: "Education",
options: ['Pre-"gymnasial" Education', '"Gymnasial" Education', 'Post-"gymnasial" Education, <3 years', 'Post-"gymnasial" Education, 3+ years', 'Unknown']
};
export const incomeSelection = {
parent: ['a'],
id: [4],
title: "Income Percentiles",
options: ['Zero/Unknown', '0-20 %', '21-40 %', '41-60 %', '61-80 %', '81-100 %'],
};
export const partySelection = {
parent: ['a'],
id: [5],
title: "Parti",
options: ["Moderates", 'Center Party', 'Liberals', 'Christian Democrats', 'Green Party', 'Social Democrats', 'Left Party', 'June List', 'Pirate Party', 'Feminist Initiative', 'Sweden Democrats', 'Other Parties']};
export const selections = {
nomineeSelection, genderSelection, yearSelection, ageSelection, bornSelection, educationSelection, incomeSelection, partySelection
};
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment