added sales by month graph

JaberHPranto · Oct 15, 2021 · c9a4b28 · c9a4b28
1 parent 572f7d0
commit c9a4b28
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 9 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git 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
@@ -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 (
+        <div>
+            <Bar data={data} options={options} />
+        </div>
+    )
+}
+
+export default BarChart
diff --git a/client/src/components/Ecommerce/Charts/LineChart.js 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 (
+        <div>
+            <Line data={data} options={options} />
+        </div>
+    )
+}
+
+export default LineChart
diff --git a/client/src/components/Ecommerce/Screen/SaleDataScreen.js b/client/src/components/Ecommerce/Screen/SaleDataScreen.js
@@ -1,29 +1,65 @@
-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)
 
     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) {
             dispatch(getSaleData())
         } else {
             history.push("/login")
         }
-    }, [dispatch,history,user])
+    }, [dispatch, history, user])
+
+    const handleSelect = (e) => {
+        setGraphType(e)
+    }
 
     return (
-        <div>
-            hello
-        </div>
+        <>
+            <Row>
+                <Col md={2}><Sidebar /></Col>
+                <Col md={10}>
+                    <>
+                        <div className="sale-month-wise">
+                            <h2>Month wise sale</h2>
+                            <div className="sale-dw-info">
+                                <DropdownButton  
+                                    alignRight
+                                    title="Select Graph Type"          
+                                    id="dropdown-menu-align-right"
+                                    onSelect={handleSelect}
+                                >
+                                    <Dropdown.Item key="line" eventKey="line">Line Graph</Dropdown.Item>
+                                    <Dropdown.Item key="bar" eventKey="bar">Bar Graph</Dropdown.Item>
+                                </DropdownButton>
+                            </div>
+                        </div>
+                        {orderSaleData && <>{graphType === 'line' ? <LineChart orderData={orderSaleData} /> : <BarChart orderData={orderSaleData} />} </>}
+
+
+
+                    </>
+                </Col>
+            </Row>
+        </>
     )
 }
 

diff --git 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";
+}