95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
import FormControl from '@mui/material/FormControl';
|
||
import FormLabel from '@mui/material/FormLabel';
|
||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||
import Checkbox from '@mui/material/Checkbox';
|
||
|
||
import Stack from '@mui/material/Stack';
|
||
import Divider from '@mui/material/Divider';
|
||
import RadioGroup from '@mui/material/RadioGroup';
|
||
import Radio from '@mui/material/Radio';
|
||
import Container from '@mui/material/Container';
|
||
type tSeries = {
|
||
'Максимальная высота': boolean,
|
||
'Средняя высота': boolean,
|
||
'Минимальная высота': boolean,
|
||
}
|
||
type CheckboxProps = {
|
||
series: tSeries;
|
||
setSeries: React.Dispatch<React.SetStateAction<tSeries>>;
|
||
isBar: boolean;
|
||
setIsBar: React.Dispatch<React.SetStateAction<boolean>>
|
||
};
|
||
|
||
function SettingChart({ series, setSeries, isBar, setIsBar }: CheckboxProps) {
|
||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
setSeries({
|
||
...series,
|
||
[event.target.name]: event.target.checked,
|
||
});
|
||
};
|
||
|
||
const handleRadioButtonChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
setIsBar(event.target.value === "bar");
|
||
};
|
||
return (
|
||
<Stack
|
||
direction="row"
|
||
divider={<Divider orientation="vertical" flexItem />}
|
||
spacing={2}
|
||
sx={{ m: "20px 0", justifyContent: "center", }}
|
||
>
|
||
<FormControl>
|
||
<FormLabel id="label-radio-group">
|
||
Тип диаграммы:
|
||
</FormLabel>
|
||
<RadioGroup
|
||
name="group-radio"
|
||
value={(isBar) ? "bar" : "dot"}
|
||
>
|
||
<FormControlLabel value="bar"
|
||
control={
|
||
<Radio checked={isBar} onChange={handleRadioButtonChange} />
|
||
}
|
||
label="Гистограмма"
|
||
/>
|
||
<FormControlLabel value="dot"
|
||
control={
|
||
<Radio checked={!isBar} onChange={handleRadioButtonChange} />
|
||
}
|
||
label="Линейная"
|
||
/>
|
||
</RadioGroup>
|
||
</FormControl>
|
||
<FormControl>
|
||
<FormLabel id="label-checkbox-group">
|
||
На диаграмме показать:
|
||
</FormLabel>
|
||
<FormControlLabel
|
||
control={
|
||
<Checkbox checked={series["Максимальная высота"]}
|
||
onChange={handleChange}
|
||
name="Максимальная высота" />
|
||
}
|
||
label="максимальную высоту"
|
||
/>
|
||
<FormControlLabel
|
||
control={
|
||
<Checkbox checked={series["Средняя высота"]}
|
||
onChange={handleChange}
|
||
name="Средняя высота" />
|
||
}
|
||
label="среднюю высоту"
|
||
/>
|
||
<FormControlLabel
|
||
control={
|
||
<Checkbox checked={series["Минимальная высота"]}
|
||
onChange={handleChange}
|
||
name="Минимальная высота" />
|
||
}
|
||
label="минимальную высоту"
|
||
/>
|
||
</FormControl>
|
||
</Stack>
|
||
)
|
||
}
|
||
export default SettingChart; |