62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
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';
|
|
import SettingChart from "./SettingChart";
|
|
|
|
type GroupProps = {
|
|
data: tGroup;
|
|
};
|
|
|
|
|
|
function GroupChart({ data }: GroupProps) {
|
|
const [isBar, setIsBar] = useState(true);
|
|
const [series, setSeries] = useState({
|
|
'Максимальная высота': true,
|
|
'Средняя высота': false,
|
|
'Минимальная высота': false,
|
|
});
|
|
const selectedSeries = Object.entries(series).filter(item => item[1] === true);
|
|
let seriesY = selectedSeries.map(item => {
|
|
return {
|
|
dataKey: item[0],
|
|
label: item[0],
|
|
barLabel: selectedSeries.length === 1 ? ('value' as const) : undefined,
|
|
}
|
|
});
|
|
const chartSetting = {
|
|
yAxis: [{ label: 'Высота (м)' }],
|
|
height: 400,
|
|
};
|
|
|
|
return (
|
|
<Container maxWidth="lg">
|
|
{isBar && <BarChart
|
|
dataset={data}
|
|
xAxis={[{ scaleType: 'band', dataKey: 'Группа' }]}
|
|
series={seriesY}
|
|
slotProps={{
|
|
legend: {
|
|
position: { vertical: 'bottom', horizontal: 'center' },
|
|
}
|
|
}}
|
|
{...chartSetting}
|
|
/>}
|
|
{!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>
|
|
)
|
|
};
|
|
|
|
export default GroupChart; |