From 0e295faae6a9db99933f3ad7877facb4b59ed0d1 Mon Sep 17 00:00:00 2001 From: Theo DUPIN Date: Fri, 28 Oct 2022 17:02:45 +0200 Subject: [PATCH] =?UTF-8?q?Cr=C3=A9ation=20page=20Analyse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 11 ++ package.json | 1 + src/App.js | 8 +- src/components/NavigationDashboard.js | 13 +++ src/pages/Analyse.js | 70 +++++++++++++ src/styles/components/_analyse.scss | 143 ++++++++++++++++++++++++++ src/styles/index.scss | 10 +- 7 files changed, 249 insertions(+), 7 deletions(-) create mode 100644 src/components/NavigationDashboard.js create mode 100644 src/pages/Analyse.js create mode 100644 src/styles/components/_analyse.scss diff --git a/package-lock.json b/package-lock.json index 3e50602..b01b54f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.1.3", + "chart.js": "^3.9.1", "crypto-js": "^4.1.1", "pg": "^8.8.0", "react": "^18.2.0", @@ -5596,6 +5597,11 @@ "node": ">=10" } }, + "node_modules/chart.js": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz", + "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==" + }, "node_modules/check-types": { "version": "11.1.2", "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz", @@ -20976,6 +20982,11 @@ "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==" }, + "chart.js": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz", + "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==" + }, "check-types": { "version": "11.1.2", "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz", diff --git a/package.json b/package.json index 6381b45..b5df2c0 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.1.3", + "chart.js": "^3.9.1", "crypto-js": "^4.1.1", "pg": "^8.8.0", "react": "^18.2.0", diff --git a/src/App.js b/src/App.js index ab22e69..ebde1e4 100644 --- a/src/App.js +++ b/src/App.js @@ -2,10 +2,11 @@ import React from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Compte from './pages/Compte'; import Connexion from './pages/Connexion'; -import Admin from './pages/Admin.js'; -import Admin_modif from './pages/Admin_modif.js'; -import Admin_supp from './pages/Admin_supp.js'; +import Admin from './pages/Admin'; +import Admin_modif from './pages/Admin_modif'; +import Admin_supp from './pages/Admin_supp'; import Dashboard from './pages/Dashboard'; +import Analyse from './pages/Analyse'; const App = () => { return ( @@ -17,6 +18,7 @@ const App = () => { } /> } /> } /> + } /> ); diff --git a/src/components/NavigationDashboard.js b/src/components/NavigationDashboard.js new file mode 100644 index 0000000..152f4a6 --- /dev/null +++ b/src/components/NavigationDashboard.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { NavLink } from 'react-router-dom'; + + +const NavigationDashboard = () => { + return ( +
+ +
+ ); +}; + +export default NavigationDashboard; \ No newline at end of file diff --git a/src/pages/Analyse.js b/src/pages/Analyse.js new file mode 100644 index 0000000..c376c2f --- /dev/null +++ b/src/pages/Analyse.js @@ -0,0 +1,70 @@ +import React from 'react'; +import axios from 'axios' +import Chart from 'chart.js/auto' +window.Chart = Chart + +const api = axios.create({ + baseURL: 'http://localhost:8080' + }) + + +const Analyse = () => { + return ( +
+ {/* Create an analysis page */} +
+

Analyse

+
+
+ + + + +
+ +
+
+ +
+
+
+ +
+
+ + + +
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ ); +}; + + + + +export default Analyse; \ No newline at end of file diff --git a/src/styles/components/_analyse.scss b/src/styles/components/_analyse.scss new file mode 100644 index 0000000..ca2783c --- /dev/null +++ b/src/styles/components/_analyse.scss @@ -0,0 +1,143 @@ +.page_analyse { + display: flex; + flex-direction: column; + //justify-content: space-evenly; + width: auto; + height: 100vh; + + background: rgba(255, 255, 255, 0.143); + border-radius: 15px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(15px); + + .haut_de_page { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 50px; + width: auto; + height: 10%; + align-items: center; + margin: 10px 10px 5px 10px; + + background: rgba(255, 255, 255, 0.143); + border-radius: 15px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(15px); + + .titre { + font-size: 40px; + } + + .rechLogo { + display: flex; + flex-direction: row; + justify-content: space-between; + + .input_box { + display: flex; + justify-content: center; + align-items: center; + position: relative; + height: 40px; + max-width: 350px; + width: 100%; + margin: 30px 30px; + border-radius: 25px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + + input { + position: relative; + width: 100%; + height: 100%; + padding: 0 15px 0 65px; + outline: none; + border: none; + border-radius: 25px; + font-size: 16px; + font-weight: 400; + color: #333; + } + + .search { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 60px; + border-radius: 25px 0 0 25px; + + .search-icon { + font-size: 30px; + color: black; + } + } + } + + .logo { + display: flex; + width: 100px; + height: 100px; + } + } + } + + .bas_de_page { + display: flex; + flex-direction: row; + //justify-content: space-between; + width: auto; + height: 86%; + + .nav_bar_verticale { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + width: 5%; + margin: 5px 5px 10px 10px; + + background: rgba(255, 255, 255, 0.143); + border-radius: 15px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(15px); + + .button { + display: flex; + object-fit: cover; + background-color: transparent; + border: none; + cursor: pointer; + + .logo_nav_bar{ + display: flex; + margin: 10px; + height: 50px; + width: 50px; + } + } + } + + .statistiques_1 { + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 50px; + width: 1423px; + height: 627px; + margin: 5px 5px 10px 10px; + + background: rgba(255, 255, 255, 0.143); + border-radius: 15px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(15px); + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 2105f87..0551ad6 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,6 @@ -@import "./settings.scss"; -@import "./components/connexion.scss"; -@import "./components/admin.scss"; -@import "./components/compte.scss"; \ No newline at end of file +@import "./settings"; +@import "./components/connexion"; +@import "./components/admin"; +@import "./components/compte"; +@import "./components/dashboard"; +@import "./components/analyse"; \ No newline at end of file