From c9a4b287c634efadc52aa886c4aa6f5ec5c436b4 Mon Sep 17 00:00:00 2001 From: JaberHPranto Date: Fri, 15 Oct 2021 19:22:16 +0600 Subject: [PATCH] added sales by month graph --- client/package-lock.json | 13 ++++ client/package.json | 2 + .../components/Ecommerce/Charts/BarChart.js | 75 +++++++++++++++++++ .../components/Ecommerce/Charts/LineChart.js | 46 ++++++++++++ .../Ecommerce/Screen/SaleDataScreen.js | 54 ++++++++++--- client/src/styles/ecommerce.css | 11 +++ 6 files changed, 192 insertions(+), 9 deletions(-) create mode 100644 client/src/components/Ecommerce/Charts/BarChart.js create mode 100644 client/src/components/Ecommerce/Charts/LineChart.js diff --git a/client/package-lock.json b/client/package-lock.json index f5f67aa..f94acbd 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -4154,6 +4154,11 @@ "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==" }, + "chart.js": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.1.tgz", + "integrity": "sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==" + }, "check-types": { "version": "11.1.2", "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz", @@ -11862,6 +11867,14 @@ } } }, + "react-chartjs-2": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.5.tgz", + "integrity": "sha512-fYr4E82agaZi9IFMe5GtOZ6WE/HWdxy/KywLNOzXsqgPkD2oo1IlrQLKMLUki/2UXko3p95TR2L8Q2rEss/opQ==", + "requires": { + "lodash": "^4.17.19" + } + }, "react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", diff --git a/client/package.json b/client/package.json index 6855ee9..e2445b6 100644 --- a/client/package.json +++ b/client/package.json @@ -12,10 +12,12 @@ "@testing-library/user-event": "^12.1.10", "axios": "^0.21.1", "bootstrap": "^5.0.1", + "chart.js": "^3.5.1", "concurrently": "^6.2.0", "image-to-base64": "^2.2.0", "react": "^17.0.2", "react-bootstrap": "^1.6.1", + "react-chartjs-2": "^3.0.5", "react-dom": "^17.0.2", "react-file-base64": "^1.0.3", "react-google-login": "^5.2.2", diff --git a/client/src/components/Ecommerce/Charts/BarChart.js b/client/src/components/Ecommerce/Charts/BarChart.js new file mode 100644 index 0000000..8708946 --- /dev/null +++ b/client/src/components/Ecommerce/Charts/BarChart.js @@ -0,0 +1,75 @@ +import React from 'react'; +import { Bar } from 'react-chartjs-2'; + +function BarChart({ orderData }) { + + const saleByMonth = [] + if (orderData) { + for (let od of orderData) { + saleByMonth.push(od.numOfOrder) + } + } + + + const data = { + labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + datasets: [ + { + label: '# of Sales by Months', + data: saleByMonth, + backgroundColor: [ + 'rgba(0,158,96, 0.2)', + 'rgba(0,158,96, 0.2)', + 'rgba(0,158,96, 0.2)', + 'rgba(0,158,96, 0.2)', + 'rgba(0,158,96, 0.2)', + 'rgba(0,158,96, 0.2)', + 'rgba(0,158,96, 0.2)', + 'rgba(0,158,96, 0.2)', + 'rgba(0,158,96, 0.2)', + 'rgba(0,158,96, 0.2)', + 'rgba(0,158,96, 0.2)', + 'rgba(0,158,96, 0.2)', + + ], + + borderColor: [ + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + 'rgba(0,158,96, 0.8)', + ], + + borderWidth: 1, + }, + ], + }; + + const options = { + scales: { + yAxes: [ + { + ticks: { + beginAtZero: true, + }, + }, + ], + }, + }; + return ( +
+ +
+ ) +} + +export default BarChart diff --git a/client/src/components/Ecommerce/Charts/LineChart.js b/client/src/components/Ecommerce/Charts/LineChart.js new file mode 100644 index 0000000..2d40921 --- /dev/null +++ b/client/src/components/Ecommerce/Charts/LineChart.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { Line } from 'react-chartjs-2'; + +function LineChart({ orderData }) { + const saleByMonth=[] + if (orderData) { + for (let od of orderData) { + saleByMonth.push(od.numOfOrder) + } + } + const data = { + + labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + datasets: [ + { + label: '# of Sales By Month', + data: saleByMonth, + fill: false, + pointRadius:5, + backgroundColor: 'rgb(0,158,96)', + borderColor: 'rgba(0,158,96, 0.2)', + }, + ], + }; + + + const options = { + scales: { + yAxes: [ + { + ticks: { + beginAtZero: true, + }, + }, + ], + }, + }; + + return ( +
+ +
+ ) +} + +export default LineChart diff --git a/client/src/components/Ecommerce/Screen/SaleDataScreen.js b/client/src/components/Ecommerce/Screen/SaleDataScreen.js index 63bacb3..aec0901 100644 --- a/client/src/components/Ecommerce/Screen/SaleDataScreen.js +++ b/client/src/components/Ecommerce/Screen/SaleDataScreen.js @@ -1,8 +1,15 @@ -import React, { useEffect } from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { getSaleData } from '../../../redux/actions/orderActions' +import React, { useEffect, useState } from 'react'; +import { Col, Dropdown, DropdownButton, Row } from 'react-bootstrap'; +import { useDispatch, useSelector } from 'react-redux'; +import { getSaleData } from '../../../redux/actions/orderActions'; +import "../../../styles/ecommerce.css"; +import BarChart from '../Charts/BarChart'; +import LineChart from '../Charts/LineChart'; +import Sidebar from '../Sidebar'; -function SaleDataScreen({history}) { +function SaleDataScreen({ history }) { + + const [graphType, setGraphType] = useState("line") const dispatch = useDispatch() const { userInfo: { user } } = useSelector(state => state.userLogin) @@ -10,7 +17,8 @@ function SaleDataScreen({history}) { const order = useSelector(state => state.orderSaleData) const { loading, error, orderSaleData } = order - if(orderSaleData) console.log(orderSaleData) + if (orderSaleData) console.log(orderSaleData) + useEffect(() => { if (user && user.isAdmin) { @@ -18,12 +26,40 @@ function SaleDataScreen({history}) { } else { history.push("/login") } - }, [dispatch,history,user]) + }, [dispatch, history, user]) + + const handleSelect = (e) => { + setGraphType(e) + } return ( -
- hello -
+ <> + + + + <> +
+

Month wise sale

+
+ + Line Graph + Bar Graph + +
+
+ {orderSaleData && <>{graphType === 'line' ? : } } + + + + + + + ) } diff --git a/client/src/styles/ecommerce.css b/client/src/styles/ecommerce.css index f420683..b363b03 100644 --- a/client/src/styles/ecommerce.css +++ b/client/src/styles/ecommerce.css @@ -214,3 +214,14 @@ main { font-size: 1.9rem !important; margin-bottom: 1rem; } +.sale-dw-info .dropdown .dropdown-toggle { + background-color: #00c073 !important; +} +.sale-month-wise { + display: flex; + justify-content: space-between; + margin-bottom: 1rem; +} +.sale-month-wise h2 { + font-family: "Nunito"; +}