diff --git a/labs/lab7/src/chart/components/GroupChart.tsx b/labs/lab7/src/chart/components/GroupChart.tsx index 363b591..cfd7bfc 100644 --- a/labs/lab7/src/chart/components/GroupChart.tsx +++ b/labs/lab7/src/chart/components/GroupChart.tsx @@ -1,4 +1,5 @@ import { BarChart } from '@mui/x-charts/BarChart'; +import { LineChart } from '@mui/x-charts/LineChart'; import Container from '@mui/material/Container'; import type { tGroup } from "../groupdata"; import { useState } from 'react'; @@ -10,6 +11,7 @@ type GroupProps = { function GroupChart({ data }: GroupProps) { + const [isBar, setIsBar] = useState(true); const [series, setSeries] = useState({ 'Максимальная высота': true, 'Средняя высота': false, @@ -30,7 +32,7 @@ function GroupChart({ data }: GroupProps) { return ( - - + />} + {!isBar &&} + ) }; diff --git a/labs/lab7/src/chart/components/SettingChart.tsx b/labs/lab7/src/chart/components/SettingChart.tsx index 5e0af01..36f239d 100644 --- a/labs/lab7/src/chart/components/SettingChart.tsx +++ b/labs/lab7/src/chart/components/SettingChart.tsx @@ -2,6 +2,12 @@ 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, @@ -9,48 +15,81 @@ type tSeries = { } type CheckboxProps = { series: tSeries; - setSeries: React.Dispatch< - React.SetStateAction - >; + setSeries: React.Dispatch>; + isBar: boolean; + setIsBar: React.Dispatch> }; -function SettingChart({ series, setSeries }: CheckboxProps) { +function SettingChart({ series, setSeries, isBar, setIsBar }: CheckboxProps) { const handleChange = (event: React.ChangeEvent) => { setSeries({ ...series, [event.target.name]: event.target.checked, }); }; + + const handleRadioButtonChange = (event: React.ChangeEvent) => { + setIsBar(event.target.value === "bar"); + }; return ( - - - На диаграмме показать: - - - } - label="максимальную высоту" - /> - - } - label="среднюю высоту" - /> - - } - label="минимальную высоту" - /> - + } + spacing={2} + sx={{ m: "20px 0", justifyContent: "center", }} + > + + + Тип диаграммы: + + + + } + label="Гистограмма" + /> + + } + label="Линейная" + /> + + + + + На диаграмме показать: + + + } + label="максимальную высоту" + /> + + } + label="среднюю высоту" + /> + + } + label="минимальную высоту" + /> + + ) } export default SettingChart; \ No newline at end of file