51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import Navbar from "../components/Navbar";
|
||
import CustomFooter from "../components/CustomFooter";
|
||
import Select from '@mui/material/Select';
|
||
import type { SelectChangeEvent } from '@mui/material/Select';
|
||
import Box from '@mui/material/Box';
|
||
import InputLabel from '@mui/material/InputLabel';
|
||
import MenuItem from '@mui/material/MenuItem';
|
||
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 = "Страна" | "Год" | "Тип";
|
||
|
||
function Chart() {
|
||
const [group, setGroup] = React.useState<tSelect>("Страна");
|
||
const [groupData, setGroupData] = React.useState(countries);
|
||
|
||
|
||
const handleChange = (event: SelectChangeEvent) => {
|
||
setGroup(event.target.value as tSelect);
|
||
setGroupData([countries, years, types][["Страна", "Год", "Тип"].indexOf(event.target.value)]);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Navbar active="3" />
|
||
<Box sx={{ width: "200px", m: "auto" }}>
|
||
<FormControl fullWidth>
|
||
<InputLabel> Группировать по </InputLabel>
|
||
<Select
|
||
id="select-group"
|
||
value={group}
|
||
label="Группировать по"
|
||
onChange={handleChange}
|
||
>
|
||
<MenuItem value="Страна"> Стране </MenuItem>
|
||
<MenuItem value="Год"> Году </MenuItem>
|
||
<MenuItem value="Тип"> Типу </MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
</Box>
|
||
<GroupChart data={groupData} />
|
||
<GroupGrid data={groupData} />
|
||
<CustomFooter />
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Chart; |