feat: add line chart 2 stats page

react-client/package.json

@@ -3,11 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/core": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "babel-core": "^7.0.0-bridge.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "boxicons": "^2.1.4",
+    "chart.js": "^4.0.0",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.0.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-router-dom": "^6.15.0",

react-client/src/components/BarDiagram.js

@@ -0,0 +1,57 @@
+import React from "react";
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+} from "chart.js";
+import {Line} from "react-chartjs-2";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+ChartJS.defaults.color = "white";
+
+export default function BarDiagram(dataset, labels, titleDates) {
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: "none",
+      },
+      title: {
+        display: true,
+        text: `Средние сахара за ${titleDates}`,
+        color: "white",
+      }
+    }
+  };
+
+  const data = {
+    labels,
+    datasets: [
+      {
+        data: dataset,
+        borderColor: "rgba(116, 33, 72, 1)",
+        backgroundColor: "rgba(116, 33, 72, 0.5)",
+      }
+    ],
+  };
+
+  return (
+    <div className="single-diagram-wrapper">
+      <Line className="single-diagram" options={options} data={data}/>
+    </div>
+  )
+}

react-client/src/index.css

@@ -85,14 +85,15 @@ main {
     position: relative;
     margin-top: 2ex;
     left: 68px;
-    width: calc(100% - 56.8px);
+    width: calc(100% - 68px);
     display: flex;
     justify-content: space-evenly;
     height: 100%;
 }
 
 .board-view-centered {
     align-items: center;
+    flex-direction: column;
 }
 
 .input-stats-area {
@@ -119,6 +120,12 @@ main {
     margin-top: 2ex;
 }
 
+.text-stats {
+    display: flex;
+    flex-direction: row;
+    gap: 3ex;
+}
+
 .input-single-date {
     display: flex;
     flex-direction: column;
@@ -322,6 +329,22 @@ ul {
     list-style-type: none;
 }
 
+.single-diagram-wrapper {
+    padding: 2ex;
+    box-shadow: inset 0 0 0 3000px rgba(150, 150, 150, 0.292);
+    backdrop-filter: blur(10px);
+    border-radius: 2ex;
+}
+
+.single-diagram {
+    width: 450px;
+    height: 200px;
+    padding: 1ex;
+    background: rgba(255, 255, 255, 0.192);
+    backdrop-filter: blur(10px);
+    border-radius: 1ex;
+}
+
 @media screen and (max-width: 1180px) {
     .board-view {
         display: flex;