From d4f5aa13aeb9924eea233059960d3afffed2e750 Mon Sep 17 00:00:00 2001 From: "jeremy.ducourthial" Date: Sun, 27 Nov 2022 19:07:56 +0100 Subject: [PATCH] =?UTF-8?q?API=20Sales=20+=20D=C3=A9but=20Affichage=20Pie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 33 ++++++++++++---- package.json | 3 +- server-api/api.js | 15 ++++++++ src/pages/Analyse.js | 92 ++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 132 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6583b16..61260d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "addeventlistener": "^2.0.0", "axios": "^1.2.0", "chart": "^0.1.2", - "chart.js": "^3.9.1", + "chart.js": "^4.0.1", "crypto-js": "^4.1.1", "darkreader": "^4.9.58", "date-fns": "^2.29.3", @@ -30,6 +30,7 @@ "pg": "^8.8.0", "react": "^18.2.0", "react-big-calendar": "^1.5.0", + "react-chartjs-2": "^5.0.1", "react-datepicker": "^4.8.0", "react-dom": "^18.2.0", "react-loading": "^2.0.3", @@ -6127,9 +6128,12 @@ } }, "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==" + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.0.1.tgz", + "integrity": "sha512-5/8/9eBivwBZK81mKvmIwTb2Pmw4D/5h1RK9fBWZLLZ8mCJ+kfYNmV9rMrGoa5Hgy2/wVDBMLSUDudul2/9ihA==", + "engines": { + "pnpm": "^7.0.0" + } }, "node_modules/check-types": { "version": "11.1.2", @@ -14776,6 +14780,15 @@ "react-dom": "^16.14.0 || ^17 || ^18" } }, + "node_modules/react-chartjs-2": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.0.1.tgz", + "integrity": "sha512-u38C9OxynlNCBp+79grgXRs7DSJ9w8FuQ5/HO5FbYBbri8HSZW+9SWgjVshLkbXBfXnMGWakbHEtvN0nL2UG7Q==", + "peerDependencies": { + "chart.js": "^4.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-datepicker": { "version": "4.8.0", "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz", @@ -22197,9 +22210,9 @@ } }, "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==" + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.0.1.tgz", + "integrity": "sha512-5/8/9eBivwBZK81mKvmIwTb2Pmw4D/5h1RK9fBWZLLZ8mCJ+kfYNmV9rMrGoa5Hgy2/wVDBMLSUDudul2/9ihA==" }, "check-types": { "version": "11.1.2", @@ -28276,6 +28289,12 @@ "uncontrollable": "^7.2.1" } }, + "react-chartjs-2": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.0.1.tgz", + "integrity": "sha512-u38C9OxynlNCBp+79grgXRs7DSJ9w8FuQ5/HO5FbYBbri8HSZW+9SWgjVshLkbXBfXnMGWakbHEtvN0nL2UG7Q==", + "requires": {} + }, "react-datepicker": { "version": "4.8.0", "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz", diff --git a/package.json b/package.json index 10f2b72..11d87d7 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "addeventlistener": "^2.0.0", "axios": "^1.2.0", "chart": "^0.1.2", - "chart.js": "^3.9.1", + "chart.js": "^4.0.1", "crypto-js": "^4.1.1", "darkreader": "^4.9.58", "date-fns": "^2.29.3", @@ -25,6 +25,7 @@ "pg": "^8.8.0", "react": "^18.2.0", "react-big-calendar": "^1.5.0", + "react-chartjs-2": "^5.0.1", "react-datepicker": "^4.8.0", "react-dom": "^18.2.0", "react-loading": "^2.0.3", diff --git a/server-api/api.js b/server-api/api.js index c95ec21..28df8a1 100644 --- a/server-api/api.js +++ b/server-api/api.js @@ -125,6 +125,21 @@ app.get('/Role/All/', (req, res) => { }); }); +app.get('/Sale/Pie/:iduser/:month/:year', (req, res) => { + + const iduser = req.params.iduser; + const month = req.params.month; + const year = req.params.year; + let sql = 'SELECT DISTINCT SUM(s.amount) as total,cu.name FROM sales s,customers cu,contacts co WHERE co.iduser = ? AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND s.month >= ? AND s.year >= ? GROUP BY cu.name ORDER BY total DESC'; + + db.query(sql, [iduser,month,year], (err, result) => { + if (err) throw err; + + console.log(result); + res.send(result); + }); +}); + app.get('/User/All', (req, res) => { let sql = 'SELECT iduser,lastname,firstname,login,phone,mail,roles.name FROM users,roles where users.idrole = roles.idrole Order by roles.idrole,lastname,firstname;'; diff --git a/src/pages/Analyse.js b/src/pages/Analyse.js index cbc7bed..727682e 100644 --- a/src/pages/Analyse.js +++ b/src/pages/Analyse.js @@ -1,18 +1,103 @@ -import React, {useState} from 'react'; +import React, {useState,useEffect} from 'react'; import axios from 'axios' import Chart from 'chart.js/auto' import NavigationDashboard from '../components/NavigationDashboard'; -window.Chart = Chart +import { Pie } from "react-chartjs-2"; +import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'; +import { setDefaultLocale } from 'react-datepicker'; +import { private_excludeVariablesFromRoot } from '@mui/material'; + +ChartJS.register(ArcElement, Tooltip, Legend); const api = axios.create({ baseURL: 'http://localhost:8080' }) - const Analyse = () => { const [theme, setTheme] = useState("light"); if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) { setTheme(localStorage.getItem("theme")) + } + + const [pieDatas, setPieDatas] = useState([]); + + useEffect(() => { + const date = new Date(); + const nbMonths = 12; + date.setMonth(date.getMonth() - nbMonths); + + const year = date.getFullYear(); + const month = (date.getMonth() + 1); + + const apiString = '/Sale/Pie/' + 41 + '/' + month + '/' + year; + api.get(apiString).then((response) => { + + // Don't work !! + /* + const data = { + labels: [response.data.map((d) => d.name)], + datasets: [ + { + label: 'Sales', + data: [response.data.map((d) => d.total)], + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(255, 159, 64, 0.2)', + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)', + ], + borderWidth: 1, + }, + ], + }; + setPieDatas(data); + */ + + setPieDatas(response.data); + }); + }, []); + + const data = { + labels: [], + datasets: [ + { + label: 'Sales', + data: [], + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(255, 159, 64, 0.2)', + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)', + ], + borderWidth: 1, + }, + ], + }; + + for(let i = 0; i < pieDatas.length; i++) + { + data.labels[i] = pieDatas[i].name; + data.datasets[0].data[i] = pieDatas[i].total; } return ( @@ -40,6 +125,7 @@ const Analyse = () => {
Tendances des ventes +
Statistique n°2