chart and list added

site/src/chart/Chart.tsx

@@ -7,20 +7,20 @@ 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 { gropuedPrices, groupByOptions } from "../data";
 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 [group, setGroup] = React.useState<number>(0);
+  const [groupData, setGroupData] = React.useState(gropuedPrices[group]);
 
 
-  const handleChange = (event: SelectChangeEvent) => {
-    setGroup(event.target.value as tSelect);
-    setGroupData([countries, years, types][["Страна", "Год", "Тип"].indexOf(event.target.value)]);
+  const handleChange = (event: SelectChangeEvent<number>) => {
+    const selectedGroup = Number(event.target.value);
+    setGroup(selectedGroup);
+    setGroupData(gropuedPrices[selectedGroup]);
+    // console.log(gropuedPrices[selectedGroup]);
   }
 
   return (
@@ -28,16 +28,18 @@ function Chart() {
       <Navbar active="3" />
       <Box sx={{ width: "200px", m: "auto" }}>
         <FormControl fullWidth>
-          <InputLabel> Группировать по </InputLabel>
-          <Select
+          <InputLabel> Group by </InputLabel>
+          <Select<number>
             id="select-group"
             value={group}
-            label="Группировать по"
+            label="Group by"
             onChange={handleChange}
           >
-            <MenuItem value="Страна"> Стране </MenuItem>
-            <MenuItem value="Год"> Году </MenuItem>
-            <MenuItem value="Тип"> Типу </MenuItem>
+            {groupByOptions.map((option, index) => (
+              <MenuItem key={index} value={index}>
+                {option}
+              </MenuItem>
+            ))}
           </Select>
         </FormControl>
       </Box>