53 lines
1.6 KiB
TypeScript
53 lines
1.6 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 { gropuedPrices, groupByOptions } from "../data";
|
|
import GroupGrid from "./components/GroupGrid";
|
|
import GroupChart from "./components/GroupChart";
|
|
|
|
function Chart() {
|
|
const [group, setGroup] = React.useState<number>(0);
|
|
const [groupData, setGroupData] = React.useState(gropuedPrices[group]);
|
|
|
|
|
|
const handleChange = (event: SelectChangeEvent<number>) => {
|
|
const selectedGroup = Number(event.target.value);
|
|
setGroup(selectedGroup);
|
|
setGroupData(gropuedPrices[selectedGroup]);
|
|
// console.log(gropuedPrices[selectedGroup]);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Navbar active="3" />
|
|
<Box sx={{ width: "200px", m: "auto" }}>
|
|
<FormControl fullWidth>
|
|
<InputLabel> Group by </InputLabel>
|
|
<Select<number>
|
|
id="select-group"
|
|
value={group}
|
|
label="Group by"
|
|
onChange={handleChange}
|
|
>
|
|
{groupByOptions.map((option, index) => (
|
|
<MenuItem key={index} value={index}>
|
|
{option}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Box>
|
|
<GroupChart data={groupData} />
|
|
<GroupGrid data={groupData} />
|
|
<CustomFooter />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Chart; |