p8/8 done lab7 done

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 (
         <Container maxWidth="lg">
-            <BarChart
+            {isBar && <BarChart
                 dataset={data}
                 xAxis={[{ scaleType: 'band', dataKey: 'Группа' }]}
                 series={seriesY}
@@ -40,8 +42,19 @@ function GroupChart({ data }: GroupProps) {
                     }
                 }}
                 {...chartSetting}
-            />
-            <SettingChart series={series} setSeries={setSeries} />
+            />}
+            {!isBar &&<LineChart
+                dataset={data}
+                xAxis={[{ scaleType: 'band', dataKey: 'Группа' }]}
+                series={seriesY}
+                slotProps={{
+                    legend: {
+                        position: { vertical: 'bottom', horizontal: 'center' },
+                    },
+                }}
+                {...chartSetting}
+            />}
+            <SettingChart series={series} setSeries={setSeries} isBar={isBar} setIsBar={setIsBar} />
         </Container>
     )
 };

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<tSeries>
-  >;
+  setSeries: React.Dispatch<React.SetStateAction<tSeries>>;
+  isBar: boolean;
+  setIsBar: React.Dispatch<React.SetStateAction<boolean>>
 };
 
-function SettingChart({ series, setSeries }: CheckboxProps) {
+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 (
-    <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
+      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;