From 16a05a4a31c04281cf2c85cc96d4e8237d4a6ff6 Mon Sep 17 00:00:00 2001
From: Nikita <jb357506@gmail.com>
Date: Sat, 28 Oct 2023 15:15:57 +0300
Subject: [PATCH 1/6] Fix route

---
 apps/py-categories-service/main.py                | 15 +++++++++++++++
 apps/py-categories-service/requirements.txt       |  1 +
 .../py-conveyor-service/api/response/analytics.py |  1 +
 .../migrations/versions/3c651a0d1fe0_initial.py   | 11 ++++++++---
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/apps/py-categories-service/main.py b/apps/py-categories-service/main.py
index e69de29..ddb4111 100644
--- a/apps/py-categories-service/main.py
+++ b/apps/py-categories-service/main.py
@@ -0,0 +1,15 @@
+import asyncio
+from websockets.server import serve
+
+
+async def handler(websocket):
+    async for message in websocket:
+        print('recv msg', message)
+        # await websocket.recv(message)
+
+
+async def main():
+    async with serve(handler, '0.0.0.0', 8765):
+        await asyncio.Future()  # run forever
+
+asyncio.run(main())
diff --git a/apps/py-categories-service/requirements.txt b/apps/py-categories-service/requirements.txt
index e69de29..14774b4 100644
--- a/apps/py-categories-service/requirements.txt
+++ b/apps/py-categories-service/requirements.txt
@@ -0,0 +1 @@
+websockets
diff --git a/apps/py-conveyor-service/api/response/analytics.py b/apps/py-conveyor-service/api/response/analytics.py
index 7a1bf17..27bb64d 100644
--- a/apps/py-conveyor-service/api/response/analytics.py
+++ b/apps/py-conveyor-service/api/response/analytics.py
@@ -63,6 +63,7 @@ class ResponseAnalyticsFactory:
     @classmethod
     def get_from_model_timeline_chart(cls, models: list[DBConveer]) -> list[TimelineCharts]:
         response = []
+        print(len(models))
         for i in models:
             response.append(cls.get_from_model_timeline_charts(name='wood', value=i.wood, time=i.created_at))
             response.append(cls.get_from_model_timeline_charts(name='glass', value=i.glass, time=i.created_at))
diff --git a/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py b/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
index 932d123..25b0a8d 100644
--- a/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
+++ b/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
@@ -7,6 +7,7 @@ Create Date: 2023-10-27 18:19:47.402501
 """
 import random
 import time
+from datetime import datetime, timedelta
 
 from alembic import op
 import sqlalchemy as sa
@@ -49,9 +50,13 @@ def upgrade():
                     )
     op.execute('''INSERT INTO camera(id,order_numb, camera_type) VALUES (1,1, 'По умолчанию')''')
     for i in range(0, 12):
-        op.execute('''INSERT INTO conveer (metal, glass, plastic, wood, camera_id) VALUES (floor(random() * 20 + 1),
-        floor(random() * 10 + 1), floor(random() * 15 + 1), floor(random() * 30 + 1), 1);''')
-        time.sleep(random.randint(0, 3))
+        import random
+        from datetime import datetime, timedelta
+
+        for _ in range(0, 100):
+            random_date = datetime.now() - timedelta(days=random.randint(1, 365))  # Генерация случайной даты за последний год
+            op.execute(f'''INSERT INTO conveer (metal, glass, plastic, wood, camera_id, created_at)
+                         VALUES (floor(random() * 20 + 1), floor(random() * 10 + 1), floor(random() * 15 + 1), floor(random() * 30 + 1), 1,'{random_date}');''')
 
 
 def downgrade():

From dbe428e6e0c6408d179617743435c86c15b288f6 Mon Sep 17 00:00:00 2001
From: Nikita <jb357506@gmail.com>
Date: Sat, 28 Oct 2023 15:21:47 +0300
Subject: [PATCH 2/6] Fix route

---
 apps/py-categories-service/main.py                  |  5 ++++-
 apps/py-categories-service/main2.py                 |  0
 .../db/migrations/versions/3c651a0d1fe0_initial.py  | 13 ++++++-------
 3 files changed, 10 insertions(+), 8 deletions(-)
 create mode 100644 apps/py-categories-service/main2.py

diff --git a/apps/py-categories-service/main.py b/apps/py-categories-service/main.py
index ddb4111..79c623d 100644
--- a/apps/py-categories-service/main.py
+++ b/apps/py-categories-service/main.py
@@ -2,10 +2,13 @@ import asyncio
 from websockets.server import serve
 
 
+
+
+
 async def handler(websocket):
     async for message in websocket:
         print('recv msg', message)
-        # await websocket.recv(message)
+
 
 
 async def main():
diff --git a/apps/py-categories-service/main2.py b/apps/py-categories-service/main2.py
new file mode 100644
index 0000000..e69de29
diff --git a/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py b/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
index 25b0a8d..5199c56 100644
--- a/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
+++ b/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
@@ -49,14 +49,13 @@ def upgrade():
                     sa.UniqueConstraint('id', name=op.f('uq_conveer_id'))
                     )
     op.execute('''INSERT INTO camera(id,order_numb, camera_type) VALUES (1,1, 'По умолчанию')''')
-    for i in range(0, 12):
-        import random
-        from datetime import datetime, timedelta
+    import random
+    from datetime import datetime, timedelta
 
-        for _ in range(0, 100):
-            random_date = datetime.now() - timedelta(days=random.randint(1, 365))  # Генерация случайной даты за последний год
-            op.execute(f'''INSERT INTO conveer (metal, glass, plastic, wood, camera_id, created_at)
-                         VALUES (floor(random() * 20 + 1), floor(random() * 10 + 1), floor(random() * 15 + 1), floor(random() * 30 + 1), 1,'{random_date}');''')
+    for _ in range(0, 100):
+        random_date = datetime.now() - timedelta(days=random.randint(1, 365))  # Генерация случайной даты за последний год
+        op.execute(f'''INSERT INTO conveer (metal, glass, plastic, wood, camera_id, created_at)
+                     VALUES (floor(random() * 20 + 1), floor(random() * 10 + 1), floor(random() * 15 + 1), floor(random() * 30 + 1), 1,'{random_date}');''')
 
 
 def downgrade():

From 0ec72f41778b8ebd96c9ab29d4186dc84a2ea0fd Mon Sep 17 00:00:00 2001
From: Nikita <jb357506@gmail.com>
Date: Sat, 28 Oct 2023 15:27:44 +0300
Subject: [PATCH 3/6] Fix route

---
 .../versions/3c651a0d1fe0_initial.py          | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py b/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
index 5199c56..8425ebd 100644
--- a/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
+++ b/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
@@ -18,7 +18,8 @@ down_revision = None
 branch_labels = None
 depends_on = None
 
-
+def generate_normal_random(mean, std_dev):
+    return int(random.gauss(mean, std_dev))
 def upgrade():
     # ### commands auto generated by Alembic - please adjust! ###
     op.create_table('camera',
@@ -52,10 +53,31 @@ def upgrade():
     import random
     from datetime import datetime, timedelta
 
-    for _ in range(0, 100):
-        random_date = datetime.now() - timedelta(days=random.randint(1, 365))  # Генерация случайной даты за последний год
+    # Устанавливаем параметры нормального распределения
+    mean_metal = 10  # Среднее значение для металла
+    std_dev_metal = 3  # Стандартное отклонение для металла
+
+    mean_glass = 5  # Среднее значение для стекла
+    std_dev_glass = 2  # Стандартное отклонение для стекла
+
+    mean_plastic = 7.5  # Среднее значение для пластика
+    std_dev_plastic = 2.5  # Стандартное отклонение для пластика
+
+    mean_wood = 15  # Среднее значение для дерева
+    std_dev_wood = 5  # Стандартное отклонение для дерева
+
+    for _ in range(0, 50):
+        random_date = datetime.now() - timedelta(days=random.randint(1, 365))
+
+        # Генерируем случайные значения, следующие нормальному распределению
+        metal = generate_normal_random(mean_metal, std_dev_metal)
+        glass = generate_normal_random(mean_glass, std_dev_glass)
+        plastic = generate_normal_random(mean_plastic, std_dev_plastic)
+        wood = generate_normal_random(mean_wood, std_dev_wood)
+
+        # Далее вы можете выполнить ваш SQL-запрос с этими случайными значениями
         op.execute(f'''INSERT INTO conveer (metal, glass, plastic, wood, camera_id, created_at)
-                     VALUES (floor(random() * 20 + 1), floor(random() * 10 + 1), floor(random() * 15 + 1), floor(random() * 30 + 1), 1,'{random_date}');''')
+                     VALUES ({metal}, {glass}, {plastic}, {wood}, 1, '{random_date}');''')
 
 
 def downgrade():

From 47cc3c4bd682522ecca13610b4e8df247ad2cad5 Mon Sep 17 00:00:00 2001
From: Nikita <jb357506@gmail.com>
Date: Sat, 28 Oct 2023 15:28:48 +0300
Subject: [PATCH 4/6] Fix route

---
 .../db/migrations/versions/3c651a0d1fe0_initial.py              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py b/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
index 8425ebd..2cda785 100644
--- a/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
+++ b/apps/py-conveyor-service/db/migrations/versions/3c651a0d1fe0_initial.py
@@ -66,7 +66,7 @@ def upgrade():
     mean_wood = 15  # Среднее значение для дерева
     std_dev_wood = 5  # Стандартное отклонение для дерева
 
-    for _ in range(0, 50):
+    for _ in range(0, 10):
         random_date = datetime.now() - timedelta(days=random.randint(1, 365))
 
         # Генерируем случайные значения, следующие нормальному распределению

From dc55a46cf92159e041db16db9bbf3137091a24d0 Mon Sep 17 00:00:00 2001
From: Anton Zhuravlev <abramoff.job@gmail.com>
Date: Sat, 28 Oct 2023 17:07:41 +0300
Subject: [PATCH 5/6] add statistics

---
 apps/crud/src/main.tsx                        |   19 +-
 .../store/features/statisticsFilterSlice.ts   |   32 +
 apps/crud/src/store/index.ts                  |   20 +
 .../src/store/services/statisticsFilterApi.ts |   16 +
 package-lock.json                             | 1083 ++++++++++++++++-
 package.json                                  |    6 +-
 .../src/lib/statistics/statistics.module.scss |    2 -
 page/src/lib/statistics/statistics.tsx        |   18 +-
 tsconfig.base.json                            |   42 +-
 ui/src/index.ts                               |    1 +
 ui/src/lib/camera/camera.module.scss          |    2 +-
 ui/src/lib/filters/filters.module.scss        |    6 +
 ui/src/lib/filters/filters.tsx                |  151 ++-
 .../lib/sidebar-item/sidebar-item.module.scss |   97 +-
 ui/src/lib/sidebar-item/sidebar-item.tsx      |  106 +-
 ui/src/lib/sidebar/sidebar.module.scss        |    2 +-
 16 files changed, 1377 insertions(+), 226 deletions(-)
 create mode 100644 apps/crud/src/store/features/statisticsFilterSlice.ts
 create mode 100644 apps/crud/src/store/index.ts
 create mode 100644 apps/crud/src/store/services/statisticsFilterApi.ts

diff --git a/apps/crud/src/main.tsx b/apps/crud/src/main.tsx
index 19e01fb..6a4e9f8 100644
--- a/apps/crud/src/main.tsx
+++ b/apps/crud/src/main.tsx
@@ -1,16 +1,21 @@
-import { StrictMode } from 'react';
+import {StrictMode} from 'react';
 import * as ReactDOM from 'react-dom/client';
 
 import App from './app/app';
 import {BrowserRouter} from "react-router-dom";
+import {Provider} from "react-redux";
+import store from "./store";
+
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+    document.getElementById('root') as HTMLElement
 );
 root.render(
-  <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </StrictMode>
+    <StrictMode>
+        <BrowserRouter>
+            <Provider store={store}>
+                <App/>
+            </Provider>
+        </BrowserRouter>
+    </StrictMode>
 );
diff --git a/apps/crud/src/store/features/statisticsFilterSlice.ts b/apps/crud/src/store/features/statisticsFilterSlice.ts
new file mode 100644
index 0000000..c360be1
--- /dev/null
+++ b/apps/crud/src/store/features/statisticsFilterSlice.ts
@@ -0,0 +1,32 @@
+import {createSlice} from "@reduxjs/toolkit";
+import {timeFormatEnum} from "@perm-hack/ui";
+
+
+export interface IStatFilters {
+    data: {
+        start_date: string
+    } | {
+        start_data: string,
+        end_date: string
+    } | {}
+    type: "date" | "period"
+}
+
+const initialState: IStatFilters = {
+    data: {},
+    type: "date"
+}
+const statisticsFilterSlice = createSlice({
+    name: "statFilter",
+    initialState,
+    reducers: {
+        setData: (state, action) => {
+            state.data = action.payload;
+        },
+        setType: (state, action) => {
+            state.type = state.type === "date" ? "period" : "date"
+        }
+    }
+})
+export const {setData, setType} = statisticsFilterSlice.actions;
+export default statisticsFilterSlice.reducer
diff --git a/apps/crud/src/store/index.ts b/apps/crud/src/store/index.ts
new file mode 100644
index 0000000..ea8d734
--- /dev/null
+++ b/apps/crud/src/store/index.ts
@@ -0,0 +1,20 @@
+import {configureStore} from "@reduxjs/toolkit"
+import {TypedUseSelectorHook, useDispatch, useSelector} from "react-redux";
+import statisticsFilterSlice from "./features/statisticsFilterSlice";
+import {statisticsFilterApi} from "./services/statisticsFilterApi";
+
+const store = configureStore({
+    reducer: {
+        statFilter: statisticsFilterSlice,
+        [statisticsFilterApi.reducerPath]: statisticsFilterApi.reducer
+    },
+    middleware: (getDefaultMiddleware) =>
+        getDefaultMiddleware().concat(statisticsFilterApi.middleware),
+})
+export default store;
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export const useAppDispatch: (data: any) => AppDispatch = useDispatch // Export a hook that can be reused to resolve types
+
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
diff --git a/apps/crud/src/store/services/statisticsFilterApi.ts b/apps/crud/src/store/services/statisticsFilterApi.ts
new file mode 100644
index 0000000..c5316d7
--- /dev/null
+++ b/apps/crud/src/store/services/statisticsFilterApi.ts
@@ -0,0 +1,16 @@
+import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/query/react";
+
+export const statisticsFilterApi = createApi({
+    reducerPath: "statFilterApi",
+    baseQuery: fetchBaseQuery({baseUrl: "https://ayin.k-lab.su/api/analytics"}),
+    endpoints: (build) => ({
+        getDate: build.mutation({
+            query: (data) => ({
+                url: '/all',
+                method: 'POST',
+                body: data,
+            }),
+        }),
+    }),
+})
+export const {useGetDateMutation} = statisticsFilterApi
diff --git a/package-lock.json b/package-lock.json
index a1f41be..75db157 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,15 +12,18 @@
         "@nestjs/common": "^10.0.2",
         "@nestjs/core": "^10.0.2",
         "@nestjs/platform-express": "^10.0.2",
+        "@reduxjs/toolkit": "^1.9.7",
         "@swc/helpers": "~0.5.2",
-        "@tanstack/react-query": "^5.0.5",
         "@types/classnames": "^2.3.1",
+        "@types/react-icons": "^3.0.0",
         "@types/react-router-dom": "^5.3.3",
         "antd": "^5.10.2",
         "axios": "^1.0.0",
         "classnames": "^2.3.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-icons": "^4.11.0",
+        "react-redux": "^8.1.3",
         "react-router-dom": "^6.17.0",
         "react-switch-selector": "^2.2.1",
         "reflect-metadata": "^0.1.13",
@@ -28,6 +31,7 @@
         "tslib": "^2.3.0"
       },
       "devDependencies": {
+        "@ant-design/plots": "^1.2.5",
         "@babel/core": "^7.14.5",
         "@babel/preset-react": "^7.14.5",
         "@nestjs/schematics": "^10.0.1",
@@ -272,6 +276,21 @@
       "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
       "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
     },
+    "node_modules/@ant-design/plots": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@ant-design/plots/-/plots-1.2.5.tgz",
+      "integrity": "sha512-8Jvu2xC5y5/B38/9Qr6CBiXCZopsGEA3IR4pjLFlkLoT4OHIKr4y8oIvhahM9mh9ZATyjkrZLWJBI8yETrReGg==",
+      "dev": true,
+      "dependencies": {
+        "@antv/g2plot": "^2.2.11",
+        "@antv/util": "^2.0.9",
+        "react-content-loader": "^5.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.4",
+        "react-dom": ">=16.8.4"
+      }
+    },
     "node_modules/@ant-design/react-slick": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.0.2.tgz",
@@ -287,6 +306,320 @@
         "react": ">=16.9.0"
       }
     },
+    "node_modules/@antv/adjust": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@antv/adjust/-/adjust-0.2.5.tgz",
+      "integrity": "sha512-MfWZOkD9CqXRES6MBGRNe27Q577a72EIwyMnE29wIlPliFvJfWwsrONddpGU7lilMpVKecS3WAzOoip3RfPTRQ==",
+      "dev": true,
+      "dependencies": {
+        "@antv/util": "~2.0.0",
+        "tslib": "^1.10.0"
+      }
+    },
+    "node_modules/@antv/adjust/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
+    "node_modules/@antv/attr": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@antv/attr/-/attr-0.3.5.tgz",
+      "integrity": "sha512-wuj2gUo6C8Q2ASSMrVBuTcb5LcV+Tc0Egiy6bC42D0vxcQ+ta13CLxgMmHz8mjD0FxTPJDXSciyszRSC5TdLsg==",
+      "dev": true,
+      "dependencies": {
+        "@antv/color-util": "^2.0.1",
+        "@antv/scale": "^0.3.0",
+        "@antv/util": "~2.0.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@antv/color-util": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@antv/color-util/-/color-util-2.0.6.tgz",
+      "integrity": "sha512-KnPEaAH+XNJMjax9U35W67nzPI+QQ2x27pYlzmSIWrbj4/k8PGrARXfzDTjwoozHJY8qG62Z+Ww6Alhu2FctXQ==",
+      "dev": true,
+      "dependencies": {
+        "@antv/util": "^2.0.9",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/component": {
+      "version": "0.8.35",
+      "resolved": "https://registry.npmjs.org/@antv/component/-/component-0.8.35.tgz",
+      "integrity": "sha512-VnRa5X77nBPI952o2xePEEMSNZ6g2mcUDrQY8mVL2kino/8TFhqDq5fTRmDXZyWyIYd4ulJTz5zgeSwAnX/INQ==",
+      "dev": true,
+      "dependencies": {
+        "@antv/color-util": "^2.0.3",
+        "@antv/dom-util": "~2.0.1",
+        "@antv/g-base": "^0.5.9",
+        "@antv/matrix-util": "^3.1.0-beta.1",
+        "@antv/path-util": "~2.0.7",
+        "@antv/scale": "~0.3.1",
+        "@antv/util": "~2.0.0",
+        "fecha": "~4.2.0",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/component/node_modules/@antv/path-util": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/@antv/path-util/-/path-util-2.0.15.tgz",
+      "integrity": "sha512-R2VLZ5C8PLPtr3VciNyxtjKqJ0XlANzpFb5sE9GE61UQqSRuSVSzIakMxjEPrpqbgc+s+y8i+fmc89Snu7qbNw==",
+      "dev": true,
+      "dependencies": {
+        "@antv/matrix-util": "^3.0.4",
+        "@antv/util": "^2.0.9",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/component/node_modules/@antv/path-util/node_modules/@antv/matrix-util": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@antv/matrix-util/-/matrix-util-3.0.4.tgz",
+      "integrity": "sha512-BAPyu6dUliHcQ7fm9hZSGKqkwcjEDVLVAstlHULLvcMZvANHeLXgHEgV7JqcAV/GIhIz8aZChIlzM1ZboiXpYQ==",
+      "dev": true,
+      "dependencies": {
+        "@antv/util": "^2.0.9",
+        "gl-matrix": "^3.3.0",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/coord": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@antv/coord/-/coord-0.3.1.tgz",
+      "integrity": "sha512-rFE94C8Xzbx4xmZnHh2AnlB3Qm1n5x0VT3OROy257IH6Rm4cuzv1+tZaUBATviwZd99S+rOY9telw/+6C9GbRw==",
+      "dev": true,
+      "dependencies": {
+        "@antv/matrix-util": "^3.1.0-beta.2",
+        "@antv/util": "~2.0.12",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@antv/dom-util": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@antv/dom-util/-/dom-util-2.0.4.tgz",
+      "integrity": "sha512-2shXUl504fKwt82T3GkuT4Uoc6p9qjCKnJ8gXGLSW4T1W37dqf9AV28aCfoVPHp2BUXpSsB+PAJX2rG/jLHsLQ==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/event-emitter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@antv/event-emitter/-/event-emitter-0.1.3.tgz",
+      "integrity": "sha512-4ddpsiHN9Pd4UIlWuKVK1C4IiZIdbwQvy9i7DUSI3xNJ89FPUFt8lxDYj8GzzfdllV0NkJTRxnG+FvLk0llidg==",
+      "dev": true
+    },
+    "node_modules/@antv/g-base": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@antv/g-base/-/g-base-0.5.15.tgz",
+      "integrity": "sha512-QOtq50QpnKez9J75/Z8j2yZ7QDQdk8R8mVQJiHtaEO5eI7DM4ZbrsWff/Ew26JYmPWdq7nbRuARMAD4PX9uuLA==",
+      "dev": true,
+      "dependencies": {
+        "@antv/event-emitter": "^0.1.1",
+        "@antv/g-math": "^0.1.9",
+        "@antv/matrix-util": "^3.1.0-beta.1",
+        "@antv/path-util": "~2.0.5",
+        "@antv/util": "~2.0.13",
+        "@types/d3-timer": "^2.0.0",
+        "d3-ease": "^1.0.5",
+        "d3-interpolate": "^3.0.1",
+        "d3-timer": "^1.0.9",
+        "detect-browser": "^5.1.0",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/g-base/node_modules/@antv/path-util": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/@antv/path-util/-/path-util-2.0.15.tgz",
+      "integrity": "sha512-R2VLZ5C8PLPtr3VciNyxtjKqJ0XlANzpFb5sE9GE61UQqSRuSVSzIakMxjEPrpqbgc+s+y8i+fmc89Snu7qbNw==",
+      "dev": true,
+      "dependencies": {
+        "@antv/matrix-util": "^3.0.4",
+        "@antv/util": "^2.0.9",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/g-base/node_modules/@antv/path-util/node_modules/@antv/matrix-util": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@antv/matrix-util/-/matrix-util-3.0.4.tgz",
+      "integrity": "sha512-BAPyu6dUliHcQ7fm9hZSGKqkwcjEDVLVAstlHULLvcMZvANHeLXgHEgV7JqcAV/GIhIz8aZChIlzM1ZboiXpYQ==",
+      "dev": true,
+      "dependencies": {
+        "@antv/util": "^2.0.9",
+        "gl-matrix": "^3.3.0",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/g-canvas": {
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/@antv/g-canvas/-/g-canvas-0.5.14.tgz",
+      "integrity": "sha512-IUGLEMIMAUYgaBMT8h3FTmYQYz7sjQkKWwh6Psqx+UPK86fySa+G8fMRrh1EqAL07jVB+GRnn6Ym+3FoFUgeFg==",
+      "dev": true,
+      "dependencies": {
+        "@antv/g-base": "^0.5.12",
+        "@antv/g-math": "^0.1.9",
+        "@antv/matrix-util": "^3.1.0-beta.1",
+        "@antv/path-util": "~2.0.5",
+        "@antv/util": "~2.0.0",
+        "gl-matrix": "^3.0.0",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/g-canvas/node_modules/@antv/path-util": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/@antv/path-util/-/path-util-2.0.15.tgz",
+      "integrity": "sha512-R2VLZ5C8PLPtr3VciNyxtjKqJ0XlANzpFb5sE9GE61UQqSRuSVSzIakMxjEPrpqbgc+s+y8i+fmc89Snu7qbNw==",
+      "dev": true,
+      "dependencies": {
+        "@antv/matrix-util": "^3.0.4",
+        "@antv/util": "^2.0.9",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/g-canvas/node_modules/@antv/path-util/node_modules/@antv/matrix-util": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@antv/matrix-util/-/matrix-util-3.0.4.tgz",
+      "integrity": "sha512-BAPyu6dUliHcQ7fm9hZSGKqkwcjEDVLVAstlHULLvcMZvANHeLXgHEgV7JqcAV/GIhIz8aZChIlzM1ZboiXpYQ==",
+      "dev": true,
+      "dependencies": {
+        "@antv/util": "^2.0.9",
+        "gl-matrix": "^3.3.0",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/g-math": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@antv/g-math/-/g-math-0.1.9.tgz",
+      "integrity": "sha512-KHMSfPfZ5XHM1PZnG42Q2gxXfOitYveNTA7L61lR6mhZ8Y/aExsYmHqaKBsSarU0z+6WLrl9C07PQJZaw0uljQ==",
+      "dev": true,
+      "dependencies": {
+        "@antv/util": "~2.0.0",
+        "gl-matrix": "^3.0.0"
+      }
+    },
+    "node_modules/@antv/g-svg": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@antv/g-svg/-/g-svg-0.5.7.tgz",
+      "integrity": "sha512-jUbWoPgr4YNsOat2Y/rGAouNQYGpw4R0cvlN0YafwOyacFFYy2zC8RslNd6KkPhhR3XHNSqJOuCYZj/YmLUwYw==",
+      "dev": true,
+      "dependencies": {
+        "@antv/g-base": "^0.5.12",
+        "@antv/g-math": "^0.1.9",
+        "@antv/util": "~2.0.0",
+        "detect-browser": "^5.0.0",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/g2": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/@antv/g2/-/g2-4.2.10.tgz",
+      "integrity": "sha512-/ZlJ/DFJBCvtEQgE6roxdd6sBml0fZ8ZVfzG+HdjGpA7/ceURb8XkxUcqa0E8NV+e4sFijnaAhBCdUm2whiuyA==",
+      "dev": true,
+      "dependencies": {
+        "@antv/adjust": "^0.2.1",
+        "@antv/attr": "^0.3.1",
+        "@antv/color-util": "^2.0.2",
+        "@antv/component": "^0.8.27",
+        "@antv/coord": "^0.3.0",
+        "@antv/dom-util": "^2.0.2",
+        "@antv/event-emitter": "~0.1.0",
+        "@antv/g-base": "~0.5.6",
+        "@antv/g-canvas": "~0.5.10",
+        "@antv/g-svg": "~0.5.6",
+        "@antv/matrix-util": "^3.1.0-beta.3",
+        "@antv/path-util": "^2.0.15",
+        "@antv/scale": "^0.3.14",
+        "@antv/util": "~2.0.5",
+        "tslib": "^2.0.0"
+      }
+    },
+    "node_modules/@antv/g2/node_modules/@antv/path-util": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/@antv/path-util/-/path-util-2.0.15.tgz",
+      "integrity": "sha512-R2VLZ5C8PLPtr3VciNyxtjKqJ0XlANzpFb5sE9GE61UQqSRuSVSzIakMxjEPrpqbgc+s+y8i+fmc89Snu7qbNw==",
+      "dev": true,
+      "dependencies": {
+        "@antv/matrix-util": "^3.0.4",
+        "@antv/util": "^2.0.9",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/g2/node_modules/@antv/path-util/node_modules/@antv/matrix-util": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@antv/matrix-util/-/matrix-util-3.0.4.tgz",
+      "integrity": "sha512-BAPyu6dUliHcQ7fm9hZSGKqkwcjEDVLVAstlHULLvcMZvANHeLXgHEgV7JqcAV/GIhIz8aZChIlzM1ZboiXpYQ==",
+      "dev": true,
+      "dependencies": {
+        "@antv/util": "^2.0.9",
+        "gl-matrix": "^3.3.0",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/g2plot": {
+      "version": "2.4.31",
+      "resolved": "https://registry.npmjs.org/@antv/g2plot/-/g2plot-2.4.31.tgz",
+      "integrity": "sha512-SlWHYVsJgRN7E1Oe5Qk6yWBrSWmctmloknFmklaqe9vEeK+YB9ZLUffZvtAHT10mA2NZ+VjGUhlnMNgR9M1PQg==",
+      "dev": true,
+      "dependencies": {
+        "@antv/color-util": "^2.0.6",
+        "@antv/event-emitter": "^0.1.2",
+        "@antv/g-base": "^0.5.11",
+        "@antv/g2": "^4.1.26",
+        "@antv/matrix-util": "^3.1.0-beta.2",
+        "@antv/path-util": "^3.0.1",
+        "@antv/scale": "^0.3.18",
+        "@antv/util": "^2.0.17",
+        "d3-hierarchy": "^2.0.0",
+        "d3-regression": "^1.3.5",
+        "fmin": "^0.0.2",
+        "pdfast": "^0.2.0",
+        "size-sensor": "^1.0.1",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/matrix-util": {
+      "version": "3.1.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@antv/matrix-util/-/matrix-util-3.1.0-beta.3.tgz",
+      "integrity": "sha512-W2R6Za3A6CmG51Y/4jZUM/tFgYSq7vTqJL1VD9dKrvwxS4sE0ZcXINtkp55CdyBwJ6Cwm8pfoRpnD4FnHahN0A==",
+      "dev": true,
+      "dependencies": {
+        "@antv/util": "^2.0.9",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/path-util": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@antv/path-util/-/path-util-3.0.1.tgz",
+      "integrity": "sha512-tpvAzMpF9Qm6ik2YSMqICNU5tco5POOW7S4XoxZAI/B0L26adU+Md/SmO0BBo2SpuywKvzPH3hPT3xmoyhr04Q==",
+      "dev": true,
+      "dependencies": {
+        "gl-matrix": "^3.1.0",
+        "lodash-es": "^4.17.21",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/scale": {
+      "version": "0.3.18",
+      "resolved": "https://registry.npmjs.org/@antv/scale/-/scale-0.3.18.tgz",
+      "integrity": "sha512-GHwE6Lo7S/Q5fgaLPaCsW+CH+3zl4aXpnN1skOiEY0Ue9/u+s2EySv6aDXYkAqs//i0uilMDD/0/4n8caX9U9w==",
+      "dev": true,
+      "dependencies": {
+        "@antv/util": "~2.0.3",
+        "fecha": "~4.2.0",
+        "tslib": "^2.0.0"
+      }
+    },
+    "node_modules/@antv/util": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@antv/util/-/util-2.0.17.tgz",
+      "integrity": "sha512-o6I9hi5CIUvLGDhth0RxNSFDRwXeywmt6ExR4+RmVAzIi48ps6HUy+svxOCayvrPBN37uE6TAc2KDofRo0nK9Q==",
+      "dev": true,
+      "dependencies": {
+        "csstype": "^3.0.8",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.22.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
@@ -3437,6 +3770,30 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "node_modules/@ljharb/resumer": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@ljharb/resumer/-/resumer-0.0.1.tgz",
+      "integrity": "sha512-skQiAOrCfO7vRTq53cxznMpks7wS1va95UCidALlOVWqvBAzwPVErwizDwoMqNVMEn1mDq0utxZd02eIrvF1lw==",
+      "dev": true,
+      "dependencies": {
+        "@ljharb/through": "^2.3.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/@ljharb/through": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/@ljharb/through/-/through-2.3.11.tgz",
+      "integrity": "sha512-ccfcIDlogiXNq5KcbAwbaO7lMh3Tm1i3khMPYpxlK8hH/W53zN81KM9coerRLOnTGu3nfXIniAmQbRI9OxbC0w==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/@lukeed/csprng": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@lukeed/csprng/-/csprng-1.1.0.tgz",
@@ -4604,6 +4961,29 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.7.tgz",
+      "integrity": "sha512-t7v8ZPxhhKgOKtU+uyJT13lu4vL7az5aFi4IdoDs/eS548edn2M8Ik9h8fxgvMjGoAUVFSt6ZC1P5cWmQ014QQ==",
+      "dependencies": {
+        "immer": "^9.0.21",
+        "redux": "^4.2.1",
+        "redux-thunk": "^2.4.2",
+        "reselect": "^4.1.8"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.0.2"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz",
@@ -5374,40 +5754,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@tanstack/query-core": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.0.5.tgz",
-      "integrity": "sha512-MThCETMkHDHTnFZHp71L+SqTtD5d6XHftFCVR1xRJdWM3qGrlQ2VCXaj0SKVcyJej2e1Opa2c7iknu1llxCDNQ==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/react-query": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.0.5.tgz",
-      "integrity": "sha512-ZG0Q4HZ0iuI8mWiZ2/MdVYPHbrmAVhMn7+gLOkxJh6zLIgCL4luSZlohzN5Xt4MjxfxxWioO1nemwpudaTsmQg==",
-      "dependencies": {
-        "@tanstack/query-core": "5.0.5"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0",
-        "react-native": "*"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.3",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
@@ -5719,6 +6065,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/d3-timer": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-2.0.2.tgz",
+      "integrity": "sha512-Dz39VLKZhWWeqSqbgYKF5BDJDUiPITo9M2cev/+HQBvXs+biES2d3LndnopuJ5YwaKK1h56CPWqDB+ghUXhm9A==",
+      "dev": true
+    },
     "node_modules/@types/eslint": {
       "version": "8.44.6",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.6.tgz",
@@ -5783,6 +6135,15 @@
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
       "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.4.tgz",
+      "integrity": "sha512-ZchYkbieA+7tnxwX/SCBySx9WwvWR8TaP5tb2jRAzwvLb/rWchGw3v0w3pqUbUvj0GCwW2Xz/AVPSk6kUGctXQ==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/http-cache-semantics": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.3.tgz",
@@ -5928,11 +6289,20 @@
       "version": "18.2.9",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.9.tgz",
       "integrity": "sha512-6nNhVzZ9joQ6F7lozrASuQKC0Kf6ArYMU+DqA2ZrUbB+d+9lC6ZLn1GxiEBI1edmAwvTULtuJ6uPZpv3XudwUg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-icons": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-icons/-/react-icons-3.0.0.tgz",
+      "integrity": "sha512-Vefs6LkLqF61vfV7AiAqls+vpR94q67gunhMueDznG+msAkrYgRxl7gYjNem/kZ+as2l2mNChmF1jRZzzQQtMg==",
+      "deprecated": "This is a stub types definition. react-icons provides its own type definitions, so you do not need this installed.",
+      "dependencies": {
+        "react-icons": "*"
+      }
+    },
     "node_modules/@types/react-router": {
       "version": "5.1.20",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
@@ -6041,6 +6411,11 @@
       "integrity": "sha512-95Sfz4nvMAb0Nl9DTxN3j64adfwfbBPEYq14VN7zT5J5O2M9V6iZMIIQU1U+pJyl9agHYHNCqhCXgyEtIRRa5A==",
       "dev": true
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.8",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.8.tgz",
@@ -6841,6 +7216,29 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/align-text": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
+      "integrity": "sha512-GrTZLRpmp6wIC2ztrWW9MjjTgSKccffgFagbNDOX95/dcjEcYZibYTeaOntySQLcdw1ztBoFkviiUvTMbb9MYg==",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^3.0.2",
+        "longest": "^1.0.1",
+        "repeat-string": "^1.5.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.2"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -8206,6 +8604,19 @@
       "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
       "dev": true
     },
+    "node_modules/center-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+      "integrity": "sha512-Baz3aNe2gd2LP2qk5U+sDk/m4oSuwSDcBfayTCTBoWpfIGO5XFxPmjILQII4NGiZjD6DoDI6kf7gKaxkf7s3VQ==",
+      "dev": true,
+      "dependencies": {
+        "align-text": "^0.1.3",
+        "lazy-cache": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/chai": {
       "version": "4.3.10",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.10.tgz",
@@ -8723,6 +9134,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/contour_plot": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/contour_plot/-/contour_plot-0.0.1.tgz",
+      "integrity": "sha512-Nil2HI76Xux6sVGORvhSS8v66m+/h5CwFkBJDO+U5vWaMdNC0yXNCsGDPbzPhvqOEU5koebhdEvD372LI+IyLw==",
+      "dev": true
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -9519,6 +9936,51 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==",
+      "dev": true
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz",
+      "integrity": "sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw==",
+      "dev": true
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dev": true,
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-regression": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/d3-regression/-/d3-regression-1.3.10.tgz",
+      "integrity": "sha512-PF8GWEL70cHHWpx2jUQXc68r1pyPHIA+St16muk/XRokETzlegj5LriNKg7o4LR0TySug4nHYPJNNRz/W+/Niw==",
+      "dev": true
+    },
+    "node_modules/d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
+      "dev": true
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -9573,6 +10035,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -9824,6 +10295,12 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-browser": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.3.0.tgz",
+      "integrity": "sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==",
+      "dev": true
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -10046,6 +10523,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/dotignore": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dotignore/-/dotignore-0.1.2.tgz",
+      "integrity": "sha512-UGGGWfSauusaVJC+8fgV+NVvBXkCTmVv7sk6nojDZZvuOUNGUy0Zk4UpHQD6EDjS0jpBwcACvH4eofvyzBcRDw==",
+      "dev": true,
+      "dependencies": {
+        "minimatch": "^3.0.4"
+      },
+      "bin": {
+        "ignored": "bin/ignored"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -11434,6 +11923,12 @@
         "pend": "~1.2.0"
       }
     },
+    "node_modules/fecha": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
+      "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==",
+      "dev": true
+    },
     "node_modules/fflate": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.1.tgz",
@@ -11681,6 +12176,109 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
+    "node_modules/fmin": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/fmin/-/fmin-0.0.2.tgz",
+      "integrity": "sha512-sSi6DzInhl9d8yqssDfGZejChO8d2bAGIpysPsvYsxFe898z89XhCZg6CPNV3nhUhFefeC/AXZK2bAJxlBjN6A==",
+      "dev": true,
+      "dependencies": {
+        "contour_plot": "^0.0.1",
+        "json2module": "^0.0.3",
+        "rollup": "^0.25.8",
+        "tape": "^4.5.1",
+        "uglify-js": "^2.6.2"
+      }
+    },
+    "node_modules/fmin/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fmin/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fmin/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fmin/node_modules/rollup": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.25.8.tgz",
+      "integrity": "sha512-a2S4Bh3bgrdO4BhKr2E4nZkjTvrJ2m2bWjMTzVYtoqSCn0HnuxosXnaJUHrMEziOWr3CzL9GjilQQKcyCQpJoA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^1.1.1",
+        "minimist": "^1.2.0",
+        "source-map-support": "^0.3.2"
+      },
+      "bin": {
+        "rollup": "bin/rollup"
+      }
+    },
+    "node_modules/fmin/node_modules/source-map": {
+      "version": "0.1.32",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
+      "integrity": "sha512-htQyLrrRLkQ87Zfrir4/yN+vAUd6DNjVayEjTSHXu29AYQJw57I4/xEL/M6p6E/woPNJwvZt6rVlzc7gFEJccQ==",
+      "dev": true,
+      "dependencies": {
+        "amdefine": ">=0.0.4"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/fmin/node_modules/source-map-support": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.3.3.tgz",
+      "integrity": "sha512-9O4+y9n64RewmFoKUZ/5Tx9IHIcXM6Q+RTSw6ehnqybUz4a7iwR3Eaw80uLtqqQ5D0C+5H03D4KKGo9PdP33Gg==",
+      "dev": true,
+      "dependencies": {
+        "source-map": "0.1.32"
+      }
+    },
+    "node_modules/fmin/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fmin/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.3",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
@@ -12011,6 +12609,12 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==",
+      "dev": true
+    },
     "node_modules/glob": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
@@ -12198,6 +12802,27 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-ansi/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -12292,6 +12917,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.1.tgz",
@@ -12640,6 +13278,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/immer": {
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
@@ -12894,6 +13541,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true
+    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -14324,6 +14977,18 @@
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
       "dev": true
     },
+    "node_modules/json2module": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/json2module/-/json2module-0.0.3.tgz",
+      "integrity": "sha512-qYGxqrRrt4GbB8IEOy1jJGypkNsjWoIMlZt4bAsmUScCA507Hbc2p1JOhBzqn45u3PWafUgH2OnzyNU7udO/GA==",
+      "dev": true,
+      "dependencies": {
+        "rw": "^1.3.2"
+      },
+      "bin": {
+        "json2module": "bin/json2module"
+      }
+    },
     "node_modules/json2mq": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
@@ -14419,6 +15084,18 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -14477,6 +15154,15 @@
         "node": "> 0.8"
       }
     },
+    "node_modules/lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha512-RE2g0b5VGZsOCFOCgP7omTRYFqydmZkBwl5oNnQ1lDYC57uyO9KqNnNVxT7COSHTxrRCWVcAVOcbjk+tvh/rgQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/less": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
@@ -14697,6 +15383,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -14804,6 +15496,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/longest": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
+      "integrity": "sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -15138,6 +15839,26 @@
         "ufo": "^1.3.0"
       }
     },
+    "node_modules/mock-property": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/mock-property/-/mock-property-1.0.3.tgz",
+      "integrity": "sha512-2emPTb1reeLLYwHxyVx993iYyCHEiRRO+y8NFXFPL5kl5q14sgTK76cXyEKkeKCHeRw35SfdkUJ10Q1KfHuiIQ==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.1",
+        "functions-have-names": "^1.2.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "hasown": "^2.0.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -15963,6 +16684,12 @@
         "node": "*"
       }
     },
+    "node_modules/pdfast": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/pdfast/-/pdfast-0.2.0.tgz",
+      "integrity": "sha512-cq6TTu6qKSFUHwEahi68k/kqN2mfepjkGrG9Un70cgdRRKLKY6Rf8P8uvP2NvZktaQZNF3YE7agEkLj0vGK9bA==",
+      "dev": true
+    },
     "node_modules/peek-readable": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/peek-readable/-/peek-readable-5.0.0.tgz",
@@ -17674,6 +18401,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-content-loader": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-5.1.4.tgz",
+      "integrity": "sha512-hTq7pZi2GKCK6a9d3u6XStozm0QGCEjw8cSqQReiWnh2up6IwCha5R5TF0o6SY5qUDpByloEZEZtnFxpJyENFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -17686,11 +18425,57 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/react-redux": {
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
+      "integrity": "sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8 || ^17.0 || ^18.0",
+        "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react-native": ">=0.59",
+        "redux": "^4 || ^5.0.0-beta.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -17830,6 +18615,22 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
     "node_modules/reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@@ -17964,6 +18765,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -18081,6 +18887,18 @@
       "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
       "dev": true
     },
+    "node_modules/right-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+      "integrity": "sha512-yqINtL/G7vs2v+dFIZmFUDbnVyFUJFKd6gK22Kgo6R4jfJGFtisKyncWDDULgjfqf4ASQuIQyjJ7XZ+3aWpsAg==",
+      "dev": true,
+      "dependencies": {
+        "align-text": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -18141,6 +18959,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "dev": true
+    },
     "node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -18634,6 +19458,12 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
       "dev": true
     },
+    "node_modules/size-sensor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-1.0.2.tgz",
+      "integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw==",
+      "dev": true
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -19415,6 +20245,94 @@
         "node": ">=6"
       }
     },
+    "node_modules/tape": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/tape/-/tape-4.17.0.tgz",
+      "integrity": "sha512-KCuXjYxCZ3ru40dmND+oCLsXyuA8hoseu2SS404Px5ouyS0A99v8X/mdiLqsR5MTAyamMBN7PRwt2Dv3+xGIxw==",
+      "dev": true,
+      "dependencies": {
+        "@ljharb/resumer": "~0.0.1",
+        "@ljharb/through": "~2.3.9",
+        "call-bind": "~1.0.2",
+        "deep-equal": "~1.1.1",
+        "defined": "~1.0.1",
+        "dotignore": "~0.1.2",
+        "for-each": "~0.3.3",
+        "glob": "~7.2.3",
+        "has": "~1.0.3",
+        "inherits": "~2.0.4",
+        "is-regex": "~1.1.4",
+        "minimist": "~1.2.8",
+        "mock-property": "~1.0.0",
+        "object-inspect": "~1.12.3",
+        "resolve": "~1.22.6",
+        "string.prototype.trim": "~1.2.8"
+      },
+      "bin": {
+        "tape": "bin/tape"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tape/node_modules/deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "dev": true,
+      "dependencies": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tape/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/tape/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/tape/node_modules/object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -20073,6 +20991,73 @@
       "integrity": "sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==",
       "dev": true
     },
+    "node_modules/uglify-js": {
+      "version": "2.8.29",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+      "integrity": "sha512-qLq/4y2pjcU3vhlhseXGGJ7VbFO4pBANu0kwl8VCa9KEI0V8VfZIx2Fy3w01iSTA/pGwKZSmu/+I4etLNDdt5w==",
+      "dev": true,
+      "dependencies": {
+        "source-map": "~0.5.1",
+        "yargs": "~3.10.0"
+      },
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      },
+      "optionalDependencies": {
+        "uglify-to-browserify": "~1.0.0"
+      }
+    },
+    "node_modules/uglify-js/node_modules/camelcase": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+      "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/uglify-js/node_modules/cliui": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+      "integrity": "sha512-GIOYRizG+TGoc7Wgc1LiOTLare95R3mzKgoln+Q/lE4ceiYH19gUpl0l0Ffq4lJDEf3FxujMe6IBfOCs7pfqNA==",
+      "dev": true,
+      "dependencies": {
+        "center-align": "^0.1.1",
+        "right-align": "^0.1.1",
+        "wordwrap": "0.0.2"
+      }
+    },
+    "node_modules/uglify-js/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/uglify-js/node_modules/yargs": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+      "integrity": "sha512-QFzUah88GAGy9lyDKGBqZdkYApt63rCXYBGYnEP4xDJPXNqXXnBDACnbrXnViV6jRSqAePwrATi2i8mfYm4L1A==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^1.0.2",
+        "cliui": "^2.1.0",
+        "decamelize": "^1.0.0",
+        "window-size": "0.1.0"
+      }
+    },
+    "node_modules/uglify-to-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+      "integrity": "sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/uid": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/uid/-/uid-2.0.2.tgz",
@@ -20238,6 +21223,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -21053,6 +22046,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/window-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+      "integrity": "sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1PXhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/wordwrap": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+      "integrity": "sha512-xSBsCeh+g+dinoBv3GAOWM4LcVVO68wLXRanibtBSdUvkGWQRGeE9P7IwU9EmDDi4jA6L44lz15CGMwdw9N5+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
diff --git a/package.json b/package.json
index f2ccd54..c7d4ce4 100644
--- a/package.json
+++ b/package.json
@@ -8,15 +8,18 @@
     "@nestjs/common": "^10.0.2",
     "@nestjs/core": "^10.0.2",
     "@nestjs/platform-express": "^10.0.2",
+    "@reduxjs/toolkit": "^1.9.7",
     "@swc/helpers": "~0.5.2",
-    "@tanstack/react-query": "^5.0.5",
     "@types/classnames": "^2.3.1",
+    "@types/react-icons": "^3.0.0",
     "@types/react-router-dom": "^5.3.3",
     "antd": "^5.10.2",
     "axios": "^1.0.0",
     "classnames": "^2.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.11.0",
+    "react-redux": "^8.1.3",
     "react-router-dom": "^6.17.0",
     "react-switch-selector": "^2.2.1",
     "reflect-metadata": "^0.1.13",
@@ -24,6 +27,7 @@
     "tslib": "^2.3.0"
   },
   "devDependencies": {
+    "@ant-design/plots": "^1.2.5",
     "@babel/core": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
     "@nestjs/schematics": "^10.0.1",
diff --git a/page/src/lib/statistics/statistics.module.scss b/page/src/lib/statistics/statistics.module.scss
index 9888053..bc4cb86 100644
--- a/page/src/lib/statistics/statistics.module.scss
+++ b/page/src/lib/statistics/statistics.module.scss
@@ -1,5 +1,3 @@
 .container {
   padding: 20px;
-  display: flex;
-  flex-direction: column;
 }
diff --git a/page/src/lib/statistics/statistics.tsx b/page/src/lib/statistics/statistics.tsx
index 7e84aef..7fe020d 100644
--- a/page/src/lib/statistics/statistics.tsx
+++ b/page/src/lib/statistics/statistics.tsx
@@ -1,15 +1,19 @@
 import cls from './statistics.module.scss';
-import {Filters} from "@perm-hack/ui";
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import {Filters, Sidebar, StatisticsCharts} from "@perm-hack/ui";
+import {useState} from "react";
 
 /* eslint-disable-next-line */
-export interface StatisticsProps {}
+export interface StatisticsProps {
+}
 
 export function Statistics(props: StatisticsProps) {
-  return (
-    <div className={cls.container}>
-      <Filters/>
-    </div>
-  );
+    return (
+        <div className={cls.container}>
+            <Filters/>
+            <StatisticsCharts/>
+        </div>
+    );
 }
 
 export default Statistics;
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 89c1ff3..f55a6ec 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -1,23 +1,23 @@
 {
-  "compileOnSave": false,
-  "compilerOptions": {
-    "rootDir": ".",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "target": "es2015",
-    "module": "esnext",
-    "lib": ["es2020", "dom"],
-    "skipLibCheck": true,
-    "skipDefaultLibCheck": true,
-    "baseUrl": ".",
-    "paths": {
-      "@perm-hack/page": ["page/src/index.ts"],
-      "@perm-hack/ui": ["ui/src/index.ts"]
-    }
-  },
-  "exclude": ["node_modules", "tmp"]
+    "compileOnSave": false,
+    "compilerOptions": {
+        "rootDir": ".",
+        "sourceMap": true,
+        "declaration": false,
+        "moduleResolution": "node",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "importHelpers": true,
+        "target": "es2015",
+        "module": "esnext",
+        "lib": ["es2020", "dom"],
+        "skipLibCheck": true,
+        "skipDefaultLibCheck": true,
+        "baseUrl": ".",
+        "paths": {
+            "@perm-hack/page": ["page/src/index.ts"],
+            "@perm-hack/ui": ["ui/src/index.ts"]
+        }
+    },
+    "exclude": ["node_modules", "tmp"]
 }
diff --git a/ui/src/index.ts b/ui/src/index.ts
index 2656081..6c0a5bc 100644
--- a/ui/src/index.ts
+++ b/ui/src/index.ts
@@ -1,3 +1,4 @@
+export * from './lib/statistics-charts/statistics-charts';
 export * from './lib/filters/filters';
 export * from './lib/button/button';
 export * from './lib/sidebar-item/sidebar-item';
diff --git a/ui/src/lib/camera/camera.module.scss b/ui/src/lib/camera/camera.module.scss
index 4ab1b21..7376335 100644
--- a/ui/src/lib/camera/camera.module.scss
+++ b/ui/src/lib/camera/camera.module.scss
@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  align-items: end;
+  align-items: flex-end;
   flex: 1 1 auto;
   padding: 20px;
   background-color: var(--white);
diff --git a/ui/src/lib/filters/filters.module.scss b/ui/src/lib/filters/filters.module.scss
index 1c38f2f..843b5a3 100644
--- a/ui/src/lib/filters/filters.module.scss
+++ b/ui/src/lib/filters/filters.module.scss
@@ -1,12 +1,18 @@
 .container {
+  grid-area: 1 / 1 / 2 / 6;
   display: flex;
   flex-direction: row;
   gap: 30px;
 }
+
 .button {
   font-size: 14px;
   border-radius: 20px;
   padding: 5px 10px;
   color: var(--white);
   background-color: #94BF5E;
+
+  &:disabled {
+    background-color: #eee;
+  }
 }
diff --git a/ui/src/lib/filters/filters.tsx b/ui/src/lib/filters/filters.tsx
index 2e54e82..ccd9b8d 100644
--- a/ui/src/lib/filters/filters.tsx
+++ b/ui/src/lib/filters/filters.tsx
@@ -1,64 +1,111 @@
-import cls from './filters.module.scss';
-import {ConfigProvider, DatePicker} from "antd";
+import React, {useEffect, useState} from "react";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import utc from "dayjs/plugin/utc";
 import SwitchSelector from "react-switch-selector";
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import {useState} from "react";
-
-/* eslint-disable-next-line */
+import {ConfigProvider, DatePicker} from "antd";
+import cls from "./filters.module.scss";
+import {useGetDateMutation} from "../../../../apps/crud/src/store/services/statisticsFilterApi";
+import {useAppDispatch} from "../../../../apps/crud/src/store";
+import {setData, setType} from "../../../../apps/crud/src/store/features/statisticsFilterSlice";
 
-enum timeFormatEnum {
-  DATE = "date",
-  PERIOD = "period"
+export enum timeFormatEnum {
+    DATE = "date",
+    PERIOD = "period",
 }
 
 export function Filters() {
-  const [timeFormat, setTimeFormat] = useState<timeFormatEnum>(timeFormatEnum.DATE)
-  const options = [
-    {
-      label: "Дата",
-      value: "date",
-      selectedBackgroundColor: "#94BF5E"
-    },
-    {
-      label: "Период",
-      value: "period",
-      selectedBackgroundColor: "#94BF5E"
-    },
-  ]
+    const [timeFormat, setTimeFormat] = useState<timeFormatEnum>(timeFormatEnum.DATE);
+    const [timeData, setTimeData] = useState<string>();
+    const [mutation, {data}] = useGetDateMutation();
+    const dispatch = useAppDispatch();
+
+    const options = [
+        {
+            label: "Дата",
+            value: "date",
+            selectedBackgroundColor: "#94BF5E",
+        },
+        {
+            label: "Период",
+            value: "period",
+            selectedBackgroundColor: "#94BF5E",
+        },
+    ];
+
+    dayjs.extend(customParseFormat);
+    dayjs.extend(utc);
 
-  const handleChange = (time: never, timeString: string) => {
-    console.log(timeString)
-  }
-  const onChange = (newValue: timeFormatEnum) => {
-    setTimeFormat(newValue)
-  };
+    function convertToISO8601(timeString: string): string {
+        const parsedTime = dayjs(timeString, {format: "YYYY-MM-DD HH:mm:ss"});
+        const iso8601Time = parsedTime.utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]");
+        return iso8601Time;
+    }
 
-  return (
-    <div className={cls.container}>
-      <div className="your-required-wrapper" style={{width: 200, height: 30}}>
-        <SwitchSelector
-          onChange={onChange}
-          options={options}
-          fontSize={16}
-          backgroundColor={"#fff"}
-          fontColor={"#94BF5E"}
-          border={"1px solid #94BF5E"}
-        />
-      </div>
-      <ConfigProvider theme={{
-        token: {
-          colorPrimary: "#94BF5E"
+    const handleChange = (time: never, timeString: string) => {
+        setTimeData(timeString);
+    };
+
+    const onChange = (newValue: timeFormatEnum) => {
+        setTimeFormat(newValue);
+        dispatch(setType())
+    };
+
+    async function handleData() {
+        if (timeFormat === timeFormatEnum.DATE) {
+            mutation({start_date: convertToISO8601(timeData)});
+        } else {
+            mutation({
+                start_date: convertToISO8601(timeData[0]),
+                end_date: convertToISO8601(timeData[1]),
+            });
         }
-      }}>
-        {timeFormat === timeFormatEnum.PERIOD ?
-          <DatePicker.RangePicker placeholder={["Время начала", "Время конца"]} onChange={handleChange} showTime/> :
-          <DatePicker onChange={handleChange} showTime placeholder="Дата и время"/>
+    }
+
+    useEffect(() => {
+        if (data) {
+            dispatch(setData(data));
         }
-      </ConfigProvider>
-      <button className={cls.button}>Показать</button>
-    </div>
-  );
+    }, [data]);
+
+    return (
+        <div className={cls.container}>
+            <div className="your-required-wrapper" style={{width: 200, height: 30}}>
+                <SwitchSelector
+                    onChange={onChange}
+                    options={options}
+                    fontSize={16}
+                    backgroundColor={"#fff"}
+                    fontColor={"#94BF5E"}
+                    border={"1px solid #94BF5E"}
+                />
+            </div>
+            <ConfigProvider
+                theme={{
+                    token: {
+                        colorPrimary: "#94BF5E",
+                    },
+                }}
+            >
+                {timeFormat === timeFormatEnum.PERIOD ? (
+                    <DatePicker.RangePicker
+                        placeholder={["Время начала", "Время конца"]}
+                        onChange={handleChange}
+                        showTime
+                    />
+                ) : (
+                    <DatePicker
+                        onChange={handleChange}
+                        showTime
+                        placeholder="Дата и время"
+                    />
+                )}
+            </ConfigProvider>
+            <button disabled={!timeData} onClick={handleData} className={cls.button}>
+                Показать
+            </button>
+        </div>
+    );
 }
 
 export default Filters;
diff --git a/ui/src/lib/sidebar-item/sidebar-item.module.scss b/ui/src/lib/sidebar-item/sidebar-item.module.scss
index 4153ee0..74a2598 100644
--- a/ui/src/lib/sidebar-item/sidebar-item.module.scss
+++ b/ui/src/lib/sidebar-item/sidebar-item.module.scss
@@ -1,59 +1,64 @@
 .item {
-  background: var(--white);
-  border-radius: var(--border-medium);
-  padding: 10px 20px;
-  display: flex;
-  gap: 0 8px;
-  justify-content: space-between;
+    background: var(--white);
+    border-radius: var(--border-medium);
+    padding: 10px 20px;
+    display: flex;
+    gap: 0 8px;
+    justify-content: space-between;
 }
 
 .line {
-  width: 1px;
-  background-color: var(--black);
+    width: 1px;
+    background-color: var(--black);
 }
 
 .heading {
-  display: flex;
-  flex-direction: column;
-  gap: 0 10px;
-  justify-content: center;
-  .text {
-    text-align: end;
-    color: var(--gray);
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 300;
-    line-height: normal;
-  }
+    display: flex;
+    flex-direction: column;
+    gap: 0 10px;
+    justify-content: center;
+    .text {
+        display: flex;
+        align-items: center;
+        color: var(--gray);
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 300;
+        line-height: normal;
+        & svg {
+            margin-right: 5px;
+        }
+    }
 
-  .percent {
-    font-size: 54px;
-    font-style: normal;
-    font-weight: 300;
-    line-height: normal;
-  }
+    .percent {
+        font-size: 54px;
+        font-style: normal;
+        font-weight: 300;
+        line-height: normal;
+    }
 }
 
 .info {
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  & p {
-    padding: 0;
-    margin: 0;
-    font-size: 36px;
-    font-style: normal;
-    font-weight: 300;
-    line-height: normal;
-    color: var(--black
-    );
-  }
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
 
-  & span {
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 300;
-    line-height: normal;
-  }
+    & p {
+        padding: 0;
+        margin: 0;
+        font-size: 36px;
+        font-style: normal;
+        font-weight: 300;
+        line-height: normal;
+        color: var(--black
+        );
+    }
+
+    & span {
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 300;
+        line-height: normal;
+    }
 }
diff --git a/ui/src/lib/sidebar-item/sidebar-item.tsx b/ui/src/lib/sidebar-item/sidebar-item.tsx
index 4390169..09c46c5 100644
--- a/ui/src/lib/sidebar-item/sidebar-item.tsx
+++ b/ui/src/lib/sidebar-item/sidebar-item.tsx
@@ -1,63 +1,65 @@
 import styles from './sidebar-item.module.scss';
 import Button from "../button/button";
+import {ImLeaf} from "react-icons/im"
 
 /* eslint-disable-next-line */
 export interface SidebarItemProps {
-  name: string
-  percent: number | string
-  weight: number | string
-  href: string
+    name: string
+    percent: number | string
+    weight: number | string
+    href: string
 }
 
 export function SidebarItem() {
-  const obj: SidebarItemProps[] = [
-    {
-      name: "Дерево",
-      href: "some",
-      percent: "10%",
-      weight: 200
-    },
-    {
-      name: "Металл",
-      href: "some",
-      percent: "10%",
-      weight: 200
-    },
-    {
-      name: "Пластик",
-      href: "some",
-      percent: "10%",
-      weight: 200
-    },
-    {
-      name: "Стекло",
-      href: "some",
-      percent: "10%",
-      weight: 200
-    }
-  ]
-  return (
-    <>
-      {obj.map((item, i) => (
-        <div className={styles.item} key={i * 2}>
-          <div className={styles.heading}>
-            <p className={styles.text}>
-              {item.name}
-            </p>
-            <p className={styles.percent}>
-              {item.percent}
-            </p>
-          </div>
-          <span className={styles.line}></span>
-          <div className={styles.info}>
-            <p>{item.weight}</p>
-            <span>Тонн</span>
-            <Button link={"some"} className={styles.link}>Аналитика</Button>
-          </div>
-        </div>
-      ))}
-    </>
-  );
+    const obj: SidebarItemProps[] = [
+        {
+            name: "Дерево",
+            href: "some",
+            percent: "10%",
+            weight: 200
+        },
+        {
+            name: "Металл",
+            href: "some",
+            percent: "10%",
+            weight: 200
+        },
+        {
+            name: "Пластик",
+            href: "some",
+            percent: "10%",
+            weight: 200
+        },
+        {
+            name: "Стекло",
+            href: "some",
+            percent: "10%",
+            weight: 200
+        }
+    ]
+    return (
+        <>
+            {obj.map((item, i) => (
+                <div className={styles.item} key={i * 2}>
+                    <div className={styles.heading}>
+                        <p className={styles.text}>
+                            <ImLeaf color="#94BF5E"/>
+                            {item.name}
+                        </p>
+                        <p className={styles.percent}>
+                            {item.percent}
+                        </p>
+                    </div>
+                    <span className={styles.line}></span>
+                    <div className={styles.info}>
+                        <p>{item.weight}</p>
+                        <span>Тонн</span>
+                        <Button link={"some"} className={styles.link}>Аналитика</Button>
+                    </div>
+                </div>
+            ))}
+        </>
+    );
 }
 
 export default SidebarItem;
diff --git a/ui/src/lib/sidebar/sidebar.module.scss b/ui/src/lib/sidebar/sidebar.module.scss
index 6048683..97a56d8 100644
--- a/ui/src/lib/sidebar/sidebar.module.scss
+++ b/ui/src/lib/sidebar/sidebar.module.scss
@@ -1,5 +1,5 @@
 .container {
-  flex: 0 0 20%;
+  flex: 0 0 25%;
   display: flex;
   flex-direction: column;
   gap: 30px;

From 0ca606265aa412962bf6687b80d9e0eb48efa955 Mon Sep 17 00:00:00 2001
From: Anton Zhuravlev <abramoff.job@gmail.com>
Date: Sat, 28 Oct 2023 22:12:50 +0300
Subject: [PATCH 6/6] add websocket ex

---
 package-lock.json            | 150 ++++++++++++++++++++++++++++++++++-
 package.json                 |   3 +-
 ui/src/lib/camera/camera.tsx |  80 +++++++++++--------
 3 files changed, 198 insertions(+), 35 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 75db157..e587289 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,8 @@
         "react-switch-selector": "^2.2.1",
         "reflect-metadata": "^0.1.13",
         "rxjs": "^7.8.0",
-        "tslib": "^2.3.0"
+        "tslib": "^2.3.0",
+        "websocket": "^1.0.34"
       },
       "devDependencies": {
         "@ant-design/plots": "^1.2.5",
@@ -8371,6 +8372,18 @@
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
     },
+    "node_modules/bufferutil": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
+      "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/builtins": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
@@ -9936,6 +9949,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "dependencies": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
     "node_modules/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
@@ -10799,6 +10821,39 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es5-ext": {
+      "version": "0.10.62",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
@@ -11770,6 +11825,14 @@
         }
       ]
     },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
     "node_modules/ext-list": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/ext-list/-/ext-list-2.2.2.tgz",
@@ -11795,6 +11858,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/ext/node_modules/type": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -13840,8 +13908,7 @@
     "node_modules/is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-      "dev": true
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
@@ -15976,6 +16043,11 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+    },
     "node_modules/no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@@ -16039,6 +16111,16 @@
         "node": ">= 6.13.0"
       }
     },
+    "node_modules/node-gyp-build": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.1.tgz",
+      "integrity": "sha512-24vnklJmyRS8ViBNI8KbtK/r/DmXQMRiOMXTNz2nrTnAYUwjmEEbnnpB/+kt+yWRv73bPsSPRFddrcIbAxSiMQ==",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -20851,6 +20933,11 @@
       "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
       "dev": true
     },
+    "node_modules/type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -20972,6 +21059,14 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
     },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
@@ -21231,6 +21326,18 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/utf-8-validate": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -21908,6 +22015,22 @@
         }
       }
     },
+    "node_modules/websocket": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
+      "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
+      "dependencies": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.50",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
@@ -21931,6 +22054,19 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/websocket/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/websocket/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "node_modules/whatwg-encoding": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
@@ -22153,6 +22289,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
+      "engines": {
+        "node": ">=0.10.32"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index c7d4ce4..92d31a3 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "react-switch-selector": "^2.2.1",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.8.0",
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.0",
+    "websocket": "^1.0.34"
   },
   "devDependencies": {
     "@ant-design/plots": "^1.2.5",
diff --git a/ui/src/lib/camera/camera.tsx b/ui/src/lib/camera/camera.tsx
index 55e1f8d..9d3acb3 100644
--- a/ui/src/lib/camera/camera.tsx
+++ b/ui/src/lib/camera/camera.tsx
@@ -1,42 +1,60 @@
 import cls from './camera.module.scss';
+import {useEffect, useState} from "react";
 
 /* eslint-disable-next-line */
 export interface CameraProps {
 }
 
 export function Camera(props: CameraProps) {
-  return (
-    <div className={cls.container}>
-      <div className={cls.select}>
-        <div>
-          <p className={cls.date}>
-            2020-23-21
-          </p>
-          <p className={cls.time}>
-            14:32
-          </p>
-        </div>
-        <span className={cls.line}></span>
-        <div>
-          <p className={cls.name}>
-            Cum
-          </p>
-          <p className={cls.number}>
-            №69
-          </p>
-          <svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M21 9.16699H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
-            <path d="M21 5.5H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
-            <path d="M21 12.833H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
-            <path d="M21 16.5H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
-          </svg>
+    const [randomNumber, setRandomNumber] = useState(null);
+
+    useEffect(() => {
+        // Создаем WebSocket-соединение
+        const ws = new WebSocket('ws://localhost:8765/');
+
+        // Обработка сообщений от сервера
+        ws.onmessage = (event) => {
+            const newRandomNumber = event.data;
+            setRandomNumber(newRandomNumber);
+        };
+
+        // Закрытие соединения при размонтировании компонента
+        return () => {
+            ws.close();
+        };
+    }, []);
+    return (
+        <div className={cls.container}>
+            <div className={cls.select}>
+                <div>
+                    <p className={cls.date}>
+                        2020-23-21
+                    </p>
+                    <p className={cls.time}>
+                        14:32
+                    </p>
+                </div>
+                <span className={cls.line}></span>
+                <div>
+                    <p className={cls.name}>
+                        Cum
+                    </p>
+                    <p className={cls.number}>
+                        №69
+                    </p>
+                    <svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M21 9.16699H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
+                        <path d="M21 5.5H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
+                        <path d="M21 12.833H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
+                        <path d="M21 16.5H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                </div>
+            </div>
+            <div>
+                {randomNumber}
+            </div>
         </div>
-      </div>
-      <div>
-        here camera
-      </div>
-    </div>
-  );
+    );
 }
 
 export default Camera;