p6/8 done
This commit is contained in:
49
labs/lab7/src/chart/Chart.tsx
Normal file
49
labs/lab7/src/chart/Chart.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
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";
|
||||
|
||||
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>
|
||||
<GroupGrid data={groupData} />
|
||||
<CustomFooter />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Chart;
|
||||
30
labs/lab7/src/chart/components/GroupGrid.tsx
Normal file
30
labs/lab7/src/chart/components/GroupGrid.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
|
||||
import { DataGrid } from "@mui/x-data-grid";
|
||||
import type { GridRowsProp, GridColDef } from "@mui/x-data-grid";
|
||||
import Container from '@mui/material/Container';
|
||||
import { ruRU } from '@mui/x-data-grid/locales';
|
||||
import type { tGroup } from "../groupdata";
|
||||
type GroupProps = {
|
||||
data: tGroup;
|
||||
};
|
||||
|
||||
function GroupGrid({ data }: GroupProps) {
|
||||
const rows: GridRowsProp = data;
|
||||
const columns: GridColDef[] = [
|
||||
{ field: 'Группа', headerName: 'Группа', flex: 1},
|
||||
{ field: 'Минимальная высота', flex: 0.5},
|
||||
{ field: 'Максимальная высота', flex: 0.5},
|
||||
{ field: 'Средняя высота', flex: 0.5},
|
||||
]
|
||||
return (
|
||||
<Container maxWidth="lg" sx={{height: '700px', mt: '20px'}}>
|
||||
<DataGrid
|
||||
localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
/>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default GroupGrid;
|
||||
87
labs/lab7/src/chart/groupdata.tsx
Normal file
87
labs/lab7/src/chart/groupdata.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
export type tGroup = {
|
||||
"id": number,
|
||||
"Группа": string | number,
|
||||
"Минимальная высота": number ,
|
||||
"Максимальная высота": number ,
|
||||
"Средняя высота": number,
|
||||
}[];
|
||||
|
||||
export const countries: tGroup = [
|
||||
{ "id": 1, "Группа": "Вьетнам" , "Минимальная высота": 461 , "Максимальная высота": 461 , "Средняя высота": 461 },
|
||||
{ "id": 2, "Группа": "Германия" , "Минимальная высота": 368 , "Максимальная высота": 368 , "Средняя высота": 368 },
|
||||
{ "id": 3, "Группа": "Гонконг" , "Минимальная высота": 367 , "Максимальная высота": 484 , "Средняя высота": 410 },
|
||||
{ "id": 4, "Группа": "Испания" , "Минимальная высота": 356 , "Максимальная высота": 356 , "Средняя высота": 356 },
|
||||
{ "id": 5, "Группа": "Иран" , "Минимальная высота": 435 , "Максимальная высота": 435 , "Средняя высота": 435 },
|
||||
{ "id": 6, "Группа": "Казахстан" , "Минимальная высота": 372 , "Максимальная высота": 420 , "Средняя высота": 391 },
|
||||
{ "id": 7, "Группа": "Канада" , "Минимальная высота": 355 , "Максимальная высота": 553 , "Средняя высота": 429 },
|
||||
{ "id": 8, "Группа": "КНР" , "Минимальная высота": 356 , "Максимальная высота": 632 , "Средняя высота": 464 },
|
||||
{ "id": 9, "Группа": "Кувейт" , "Минимальная высота": 372 , "Максимальная высота": 412 , "Средняя высота": 392 },
|
||||
{ "id": 10, "Группа": "Латвия" , "Минимальная высота": 369 , "Максимальная высота": 369 , "Средняя высота": 369 },
|
||||
{ "id": 11, "Группа": "Малайзия" , "Минимальная высота": 421 , "Максимальная высота": 452 , "Средняя высота": 437 },
|
||||
{ "id": 12, "Группа": "ОАЭ" , "Минимальная высота": 355 , "Максимальная высота": 828 , "Средняя высота": 461 },
|
||||
{ "id": 13, "Группа": "Польша" , "Минимальная высота": 646 , "Максимальная высота": 646 , "Средняя высота": 646 },
|
||||
{ "id": 14, "Группа": "Россия" , "Минимальная высота": 354 , "Максимальная высота": 540 , "Средняя высота": 420 },
|
||||
{ "id": 15, "Группа": "Румыния" , "Минимальная высота": 352 , "Максимальная высота": 352 , "Средняя высота": 352 },
|
||||
{ "id": 16, "Группа": "Словения" , "Минимальная высота": 360 , "Максимальная высота": 360 , "Средняя высота": 360 },
|
||||
{ "id": 17, "Группа": "США" , "Минимальная высота": 350 , "Максимальная высота": 629 , "Средняя высота": 437 },
|
||||
{ "id": 18, "Группа": "Тайвань" , "Минимальная высота": 378 , "Максимальная высота": 509 , "Средняя высота": 444 },
|
||||
{ "id": 19, "Группа": "Узбекистан" , "Минимальная высота": 350 , "Максимальная высота": 375 , "Средняя высота": 363 },
|
||||
{ "id": 20, "Группа": "Украина" , "Минимальная высота": 354 , "Максимальная высота": 385 , "Средняя высота": 370 },
|
||||
{ "id": 21, "Группа": "Южная Корея" , "Минимальная высота": 555 , "Максимальная высота": 555 , "Средняя высота": 555 },
|
||||
{ "id": 22, "Группа": "Япония" , "Минимальная высота": 634 , "Максимальная высота": 634 , "Средняя высота": 634 },
|
||||
];
|
||||
|
||||
|
||||
export const years: tGroup = [
|
||||
{ "id": 1 , "Группа": 1931 , "Максимальная высота": 449 , "Минимальная высота": 449 , "Средняя высота": 449 },
|
||||
{ "id": 2 , "Группа": 1961 , "Максимальная высота": 354 , "Минимальная высота": 354 , "Средняя высота": 354 },
|
||||
{ "id": 3 , "Группа": 1963 , "Максимальная высота": 629 , "Минимальная высота": 629 , "Средняя высота": 629 },
|
||||
{ "id": 4 , "Группа": 1967 , "Максимальная высота": 540 , "Минимальная высота": 540 , "Средняя высота": 540 },
|
||||
{ "id": 5 , "Группа": 1968 , "Максимальная высота": 368 , "Минимальная высота": 368 , "Средняя высота": 368 },
|
||||
{ "id": 6 , "Группа": 1969 , "Максимальная высота": 457 , "Минимальная высота": 368 , "Средняя высота": 413 },
|
||||
{ "id": 7 , "Группа": 1971 , "Максимальная высота": 380 , "Минимальная высота": 380 , "Средняя высота": 380 },
|
||||
{ "id": 8 , "Группа": 1973 , "Максимальная высота": 385 , "Минимальная высота": 385 , "Средняя высота": 385 },
|
||||
{ "id": 9 , "Группа": 1974 , "Максимальная высота": 646 , "Минимальная высота": 356 , "Средняя высота": 510 },
|
||||
{ "id": 10 , "Группа": 1976 , "Максимальная высота": 553 , "Минимальная высота": 355 , "Средняя высота": 423 },
|
||||
{ "id": 11 , "Группа": 1977 , "Максимальная высота": 371 , "Минимальная высота": 371 , "Средняя высота": 371 },
|
||||
{ "id": 12 , "Группа": 1980 , "Максимальная высота": 350 , "Минимальная высота": 350 , "Средняя высота": 350 },
|
||||
{ "id": 13 , "Группа": 1983 , "Максимальная высота": 372 , "Минимальная высота": 372 , "Средняя высота": 372 },
|
||||
{ "id": 14 , "Группа": 1985 , "Максимальная высота": 375 , "Минимальная высота": 370 , "Средняя высота": 373 },
|
||||
{ "id": 15 , "Группа": 1987 , "Максимальная высота": 420 , "Минимальная высота": 369 , "Средняя высота": 395 },
|
||||
{ "id": 16 , "Группа": 1990 , "Максимальная высота": 367 , "Минимальная высота": 367 , "Средняя высота": 367 },
|
||||
{ "id": 17 , "Группа": 1991 , "Максимальная высота": 415 , "Минимальная высота": 415 , "Средняя высота": 415 },
|
||||
{ "id": 18 , "Группа": 1992 , "Максимальная высота": 405 , "Минимальная высота": 374 , "Средняя высота": 390 },
|
||||
{ "id": 19 , "Группа": 1994 , "Максимальная высота": 468 , "Минимальная высота": 468 , "Средняя высота": 468 },
|
||||
{ "id": 20 , "Группа": 1995 , "Максимальная высота": 421 , "Минимальная высота": 352 , "Средняя высота": 387 },
|
||||
{ "id": 21 , "Группа": 1996 , "Максимальная высота": 384 , "Минимальная высота": 350 , "Средняя высота": 369 },
|
||||
{ "id": 22 , "Группа": 1997 , "Максимальная высота": 391 , "Минимальная высота": 378 , "Средняя высота": 385 },
|
||||
{ "id": 23 , "Группа": 1998 , "Максимальная высота": 452 , "Минимальная высота": 452 , "Средняя высота": 452 },
|
||||
{ "id": 24 , "Группа": 1999 , "Максимальная высота": 421 , "Минимальная высота": 421 , "Средняя высота": 421 },
|
||||
{ "id": 25 , "Группа": 2000 , "Максимальная высота": 356 , "Минимальная высота": 355 , "Средняя высота": 356 },
|
||||
{ "id": 26 , "Группа": 2003 , "Максимальная высота": 435 , "Минимальная высота": 416 , "Средняя высота": 426 },
|
||||
{ "id": 27 , "Группа": 2004 , "Максимальная высота": 509 , "Минимальная высота": 509 , "Средняя высота": 509 },
|
||||
{ "id": 28 , "Группа": 2008 , "Максимальная высота": 492 , "Минимальная высота": 363 , "Средняя высота": 407 },
|
||||
{ "id": 29 , "Группа": 2009 , "Максимальная высота": 600 , "Минимальная высота": 423 , "Средняя высота": 489 },
|
||||
{ "id": 30 , "Группа": 2010 , "Максимальная высота": 828 , "Минимальная высота": 376 , "Средняя высота": 514 },
|
||||
{ "id": 31 , "Группа": 2011 , "Максимальная высота": 440 , "Минимальная высота": 440 , "Средняя высота": 440 },
|
||||
{ "id": 32 , "Группа": 2012 , "Максимальная высота": 634 , "Минимальная высота": 634 , "Средняя высота": 634 },
|
||||
{ "id": 33 , "Группа": 2013 , "Максимальная высота": 632 , "Минимальная высота": 632 , "Средняя высота": 632 },
|
||||
{ "id": 34 , "Группа": 2014 , "Максимальная высота": 381 , "Минимальная высота": 381 , "Средняя высота": 381 },
|
||||
{ "id": 35 , "Группа": 2015 , "Максимальная высота": 426 , "Минимальная высота": 354 , "Средняя высота": 387 },
|
||||
{ "id": 36 , "Группа": 2016 , "Максимальная высота": 374 , "Минимальная высота": 374 , "Средняя высота": 374 },
|
||||
{ "id": 37 , "Группа": 2017 , "Максимальная высота": 600 , "Минимальная высота": 555 , "Средняя высота": 578 },
|
||||
{ "id": 38 , "Группа": 2018 , "Максимальная высота": 462 , "Минимальная высота": 461 , "Средняя высота": 462 },
|
||||
|
||||
|
||||
];
|
||||
|
||||
export const types: tGroup = [
|
||||
{ "id": 1 , "Группа": "Антенная мачта" , "Максимальная высота": 646 , "Минимальная высота": 646 , "Средняя высота": 646 },
|
||||
{ "id": 2 , "Группа": "Башня" , "Максимальная высота": 375 , "Минимальная высота": 372 , "Средняя высота": 374 },
|
||||
{ "id": 3 , "Группа": "Бетонная башня" , "Максимальная высота": 634 , "Минимальная высота": 350 , "Средняя высота": 444 },
|
||||
{ "id": 4 , "Группа": "Гиперболоидная башня" , "Максимальная высота": 600 , "Минимальная высота": 600 , "Средняя высота": 600 },
|
||||
{ "id": 5 , "Группа": "Дымовая труба" , "Максимальная высота": 420 , "Минимальная высота": 350 , "Средняя высота": 370 },
|
||||
{ "id": 6 , "Группа": "Небоскрёб" , "Максимальная высота": 828 , "Минимальная высота": 354 , "Средняя высота": 441 },
|
||||
{ "id": 7 , "Группа": "Радиомачта" , "Максимальная высота": 629 , "Минимальная высота": 354 , "Средняя высота": 492 },
|
||||
{ "id": 8 , "Группа": "Решётчатая мачта" , "Максимальная высота": 385 , "Минимальная высота": 385 , "Средняя высота": 385 },
|
||||
];
|
||||
@@ -77,9 +77,11 @@ function NavBar({ active }: ComponentProps) {
|
||||
Список зданий
|
||||
</Button>
|
||||
</Link>
|
||||
<Button variant={active == '3' ? 'contained' : 'text'} color="info" size="medium">
|
||||
Контакты
|
||||
</Button>
|
||||
<Link to="/chart">
|
||||
<Button variant={active == '3' ? 'contained' : 'text'} color="info" size="medium">
|
||||
Контакты
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
</Box>
|
||||
<Box sx={{ display: { xs: 'flex', md: 'none' } }}>
|
||||
@@ -97,13 +99,15 @@ function NavBar({ active }: ComponentProps) {
|
||||
</IconButton>
|
||||
</Box>
|
||||
<MenuList>
|
||||
<Link to="/">
|
||||
<Link style={{ textDecoration: 'none' }} to="/">
|
||||
<StyledMenuItem selected={active == '1'}> Главная </StyledMenuItem>
|
||||
</Link>
|
||||
<Link to="/list">
|
||||
<Link style={{ textDecoration: 'none' }} to="/list">
|
||||
<StyledMenuItem selected={active == '2'}>Список зданий</StyledMenuItem>
|
||||
</Link>
|
||||
<StyledMenuItem selected={active == '3'}>Контакты</StyledMenuItem>
|
||||
<Link style={{ textDecoration: 'none' }} to="/chart">
|
||||
<StyledMenuItem selected={active == '3'}>Диаграммы</StyledMenuItem>
|
||||
</Link>
|
||||
</MenuList>
|
||||
</Drawer>
|
||||
</Box>
|
||||
|
||||
@@ -6,9 +6,10 @@ import {
|
||||
RouterProvider,
|
||||
} from "react-router-dom";
|
||||
|
||||
import List from "./list/List";
|
||||
import Main from "./main/Main";
|
||||
import Building from "./building/Building";
|
||||
import List from "./list/List";
|
||||
import Main from "./main/Main";
|
||||
import Building from "./building/Building";
|
||||
import Chart from "./chart/Chart";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
@@ -19,6 +20,10 @@ const router = createBrowserRouter([
|
||||
path: "/list",
|
||||
element: <List />,
|
||||
},
|
||||
{
|
||||
path: "/chart",
|
||||
element: <Chart />,
|
||||
},
|
||||
{
|
||||
path: "/building/:id",
|
||||
element: <Building />,
|
||||
|
||||
Reference in New Issue
Block a user