chart and list added

site/package-lock.json

@@ -14,6 +14,7 @@
         "@mui/material": "^9.0.0",
         "@mui/x-charts": "^9.0.1",
         "@mui/x-data-grid": "^9.0.1",
+        "@types/d3": "^7.4.3",
         "d3": "^7.9.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
@@ -1518,24 +1519,159 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
       "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
       "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-format": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
       "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
@@ -1551,6 +1687,24 @@
       "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-scale": {
       "version": "4.0.9",
       "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
@@ -1560,6 +1714,18 @@
         "@types/d3-time": "*"
       }
     },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-shape": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
@@ -1587,6 +1753,25 @@
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1594,6 +1779,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",

site/package.json

@@ -16,6 +16,7 @@
     "@mui/material": "^9.0.0",
     "@mui/x-charts": "^9.0.1",
     "@mui/x-data-grid": "^9.0.1",
+    "@types/d3": "^7.4.3",
     "d3": "^7.9.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

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 [group, setGroup] = React.useState<number>(0);
-  const [groupData, setGroupData] = React.useState(countries);
+  const [groupData, setGroupData] = React.useState(gropuedPrices[group]);
 
 
-  const handleChange = (event: SelectChangeEvent) => {
+  const handleChange = (event: SelectChangeEvent<number>) => {
-    setGroup(event.target.value as tSelect);
+    const selectedGroup = Number(event.target.value);
-    setGroupData([countries, years, types][["Страна", "Год", "Тип"].indexOf(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>
+          <InputLabel> Group by </InputLabel>
-          <Select
+          <Select<number>
             id="select-group"
             value={group}
-            label="Группировать по"
+            label="Group by"
             onChange={handleChange}
           >
-            <MenuItem value="Страна"> Стране </MenuItem>
+            {groupByOptions.map((option, index) => (
-            <MenuItem value="Год"> Году </MenuItem>
+              <MenuItem key={index} value={index}>
-            <MenuItem value="Тип"> Типу </MenuItem>
+                {option}
+              </MenuItem>
+            ))}
           </Select>
         </FormControl>
       </Box>

site/src/chart/components/GroupChart.tsx

@@ -1,21 +1,21 @@
 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 { gropuedPrices } from "../../data";
 import { useState } from 'react';
 import SettingChart from "./SettingChart";
 
 type GroupProps = {
-    data: tGroup;
+    data: typeof gropuedPrices[number];
 };
 
 
 function GroupChart({ data }: GroupProps) {
     const [isBar, setIsBar] = useState(true);
     const [series, setSeries] = useState({
-        'Максимальная высота': true,
+        'max': true,
-        'Средняя высота': false,
+        'mean': false,
-        'Минимальная высота': false,
+        'min': false,
     });
     const selectedSeries = Object.entries(series).filter(item => item[1] === true);
     let seriesY = selectedSeries.map(item => {
@@ -34,7 +34,7 @@ function GroupChart({ data }: GroupProps) {
         <Container maxWidth="lg">
             {isBar && <BarChart
                 dataset={data}
-                xAxis={[{ scaleType: 'band', dataKey: 'Группа' }]}
+                xAxis={[{ scaleType: 'band', dataKey: 'group' }]}
                 series={seriesY}
                 slotProps={{
                     legend: {
@@ -45,7 +45,7 @@ function GroupChart({ data }: GroupProps) {
             />}
             {!isBar &&<LineChart
                 dataset={data}
-                xAxis={[{ scaleType: 'band', dataKey: 'Группа' }]}
+                xAxis={[{ scaleType: 'band', dataKey: 'group' }]}
                 series={seriesY}
                 slotProps={{
                     legend: {

site/src/chart/components/GroupGrid.tsx

@@ -3,18 +3,18 @@ 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";
+import { gropuedPrices } from "../../data";
 type GroupProps = {
- data: tGroup;
+ data: typeof gropuedPrices[number];
 };
 
 function GroupGrid({ data }: GroupProps) {
   const rows: GridRowsProp = data;
   const columns: GridColDef[] = [
-    { field: 'Группа', headerName: 'Группа', flex: 1},
+    { field: 'group', headerName: 'Group', flex: 1},
-    { field: 'Минимальная высота', flex: 0.5},
+    { field: 'min', headerName: 'Price min', flex: 0.5},
-    { field: 'Максимальная высота', flex: 0.5},
+    { field: 'max', headerName: 'Price max', flex: 0.5},
-    { field: 'Средняя высота', flex: 0.5},
+    { field: 'mean',headerName: 'Price mean',flex: 0.5},
   ]
   return (
    <Container maxWidth="lg" sx={{height: '700px', mt: '20px'}}>

site/src/chart/components/SettingChart.tsx

@@ -7,11 +7,12 @@ import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 import RadioGroup from '@mui/material/RadioGroup';
 import Radio from '@mui/material/Radio';
-import Container from '@mui/material/Container';
+
+
 type tSeries = {
-  'Максимальная высота': boolean,
+  'max': boolean,
-  'Средняя высота': boolean,
+  'mean': boolean,
-  'Минимальная высота': boolean,
+  'min': boolean,
 }
 type CheckboxProps = {
   series: tSeries;
@@ -50,13 +51,13 @@ function SettingChart({ series, setSeries, isBar, setIsBar }: CheckboxProps) {
             control={
               <Radio checked={isBar} onChange={handleRadioButtonChange} />
             }
-            label="Гистограмма"
+            label="Histogram"
           />
           <FormControlLabel value="dot"
             control={
               <Radio checked={!isBar} onChange={handleRadioButtonChange} />
             }
-            label="Линейная"
+            label="Linear"
           />
         </RadioGroup>
       </FormControl>
@@ -66,27 +67,27 @@ function SettingChart({ series, setSeries, isBar, setIsBar }: CheckboxProps) {
         </FormLabel>
         <FormControlLabel
           control={
-            <Checkbox checked={series["Максимальная высота"]}
+            <Checkbox checked={series["max"]}
               onChange={handleChange}
-              name="Максимальная высота" />
+              name="max" />
           }
-          label="максимальную высоту"
+          label="Max price"
         />
         <FormControlLabel
           control={
-            <Checkbox checked={series["Средняя высота"]}
+            <Checkbox checked={series["mean"]}
               onChange={handleChange}
-              name="Средняя высота" />
+              name="mean" />
           }
-          label="среднюю высоту"
+          label="Mean price"
         />
         <FormControlLabel
           control={
-            <Checkbox checked={series["Минимальная высота"]}
+            <Checkbox checked={series["min"]}
               onChange={handleChange}
-              name="Минимальная высота" />
+              name="min" />
           }
-          label="минимальную высоту"
+          label="Min price"
         />
       </FormControl>
     </Stack>

site/src/chart/groupdata.tsx

@@ -1,87 +0,0 @@
-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 },        
-    ]; 

site/src/data.tsx

@@ -27,7 +27,7 @@ import SidecardPhoto3 from "./images/sidecards/remote.jpeg";
 
 
 import hardliyWorkingImage from "./images/hardly-working.gif";
-import instititePhoto from "./images/institute.png"; 
+import instititePhoto from "./images/institute.png";
 
 const sidecardData = [
     {
@@ -67,7 +67,7 @@ const sidecardData = [
 ];
 
 
-const mainCards =  [
+const mainCards = [
     {
         title: "funny thingy",
         img: hardliyWorkingImage,
@@ -93,7 +93,7 @@ const mainCards =  [
 
 
 const ramPricesListNoIds = [
-       { "type": "DDR3", "name": "DDR3-1600-4GB-A1", "size": 4, "maker": "Kingston", "release": "2014-03", "price": 18, },
+    { "type": "DDR3", "name": "DDR3-1600-4GB-A1", "size": 4, "maker": "Kingston", "release": "2014-03", "price": 18, },
     { "type": "DDR3", "name": "DDR3-1600-8GB-A2", "size": 8, "maker": "Corsair", "release": "2015-06", "price": 26, },
     { "type": "DDR3", "name": "DDR3-1866-8GB-A3", "size": 8, "maker": "G.Skill", "release": "2016-02", "price": 29, },
     { "type": "DDR4", "name": "DDR4-2133-8GB-B1", "size": 8, "maker": "Crucial", "release": "2017-01", "price": 24, },
@@ -157,14 +157,55 @@ const ramPricesListNoIds = [
 
 ]
 
-import * as d3 from "d3";
+const ramPricesList = ramPricesListNoIds.map((x, index) => ({
-const ramPricesList = ramPricesListNoIds.map((x,index) => ({
     ...x,
     id: index + 1,
     // release: Number(x.release.split("-")[0]),
 }))
 
 
+import * as d3 from "d3";
+type RamPrice = (typeof ramPricesList)[number];
+const groupBycolumns: Array<keyof RamPrice> = ["type", "maker", "size", "release"];
 
 
-export { realPhotos, sidecardData, mainCards, playbackVideo,ramPricesList };
+type GroupedRamPrice =Array<{
+    id: number;
+    group: string | number;
+    min:number;
+    max:number;
+    mean:number;
+}>;
+
+const gropuedPrices = groupBycolumns.map((col) => {
+    const out:GroupedRamPrice = [];
+    d3.group(ramPricesList, (d) => d[col]).forEach((values, key) => {
+        const prices = values.map((v) => v.price);
+        out.push({
+            id: out.length + 1,
+            group: key,
+            min: d3.min(prices) ?? 0,
+            max: d3.max(prices) ?? 0,
+            mean: Math.round((d3.mean(prices) ?? 0)*1000)/1000,
+        });
+    });
+
+    out.sort((a, b) => {
+        if (typeof a.group === "number" && typeof b.group === "number") {
+            return a.group - b.group;
+        }
+        else if (col === "release" && typeof a.group === "string" && typeof b.group === "string") {
+            return Number(a.group.replace("-", "0")) - Number(b.group.replace("-", "0"));
+        }
+        else {
+            return String(a.group).localeCompare(String(b.group));
+        }
+
+    });
+    return out;
+})
+
+
+export type { GroupedRamPrice };
+export { groupBycolumns as groupByOptions }; 
+export { realPhotos, sidecardData, mainCards, playbackVideo, ramPricesList, gropuedPrices };