p7/8 done

labs/lab7/src/chart/Chart.tsx

@@ -9,6 +9,7 @@ import FormControl from '@mui/material/FormControl';
 import * as React from 'react';
 import {years, countries, types } from "./groupdata";
 import GroupGrid from "./components/GroupGrid";
+import GroupChart from "./components/GroupChart";
 
 type tSelect = "Страна" | "Год" | "Тип";
 
@@ -40,6 +41,7 @@ function Chart() {
           </Select>
         </FormControl>
       </Box>
+      <GroupChart data={groupData} />
       <GroupGrid data={groupData} />
       <CustomFooter />
     </>

labs/lab7/src/chart/components/GroupChart.tsx

@@ -0,0 +1,49 @@
+import { BarChart } from '@mui/x-charts/BarChart';
+import Container from '@mui/material/Container';
+import type { tGroup } from "../groupdata";
+import { useState } from 'react';
+import SettingChart from "./SettingChart";
+
+type GroupProps = {
+    data: tGroup;
+};
+
+
+function GroupChart({ data }: GroupProps) {
+    const [series, setSeries] = useState({
+        'Максимальная высота': true,
+        'Средняя высота': false,
+        'Минимальная высота': false,
+    });
+    let seriesY = Object.entries(series)
+        .filter(item => item[1] == true)
+        .map(item => {
+            return {
+                "dataKey": item[0], "label": item[0], barLabel: Object.entries(series)
+                    .filter(item => item[1] == true).length == 1 ? "value" : ""
+            }
+        });
+    const chartSetting = {
+        yAxis: [{ label: 'Высота (м)' }],
+        height: 400,
+    };
+
+    return (
+        <Container maxWidth="lg">
+            <BarChart
+                dataset={data}
+                xAxis={[{ scaleType: 'band', dataKey: 'Группа' }]}
+                series={seriesY}
+                slotProps={{
+                    legend: {
+                        position: { vertical: 'bottom', horizontal: 'center' },
+                    }
+                }}
+                {...chartSetting}
+            />
+            <SettingChart series={series} setSeries={setSeries} />
+        </Container>
+    )
+};
+
+export default GroupChart;

labs/lab7/src/chart/components/SettingChart.tsx

@@ -0,0 +1,56 @@
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+type tSeries = {
+  'Максимальная высота': boolean,
+  'Средняя высота': boolean,
+  'Минимальная высота': boolean,
+}
+type CheckboxProps = {
+  series: tSeries;
+  setSeries: React.Dispatch<
+    React.SetStateAction<tSeries>
+  >;
+};
+
+function SettingChart({ series, setSeries }: CheckboxProps) {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSeries({
+      ...series,
+      [event.target.name]: event.target.checked,
+    });
+  };
+  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>
+  )
+}
+export default SettingChart;