chart data added

clever-developer-club · Nov 12, 2021 · 471faaf · 471faaf
1 parent da24ae5
commit 471faaf
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 19 deletions.
diff --git a/client/src/components/Dashboard/DashboardHome.jsx b/client/src/components/Dashboard/DashboardHome.jsx
@@ -49,8 +49,17 @@ const useStyles = makeStyles((theme) => ({
     text: {
       display: "flex",
       alignItems:"centre",
-
-  },
+      textAlign: 'center',
+    },
+    charttext: {
+      display: "flex",
+      alignItems:"centre",
+      textAlign: 'center',
+      marginLeft: "180px",
+    },
+    chartContainer: {
+      marginTop: "30px",
+    }
 }))
 
 
@@ -96,9 +105,45 @@ function DashboardHome() {
     return count;
   }
 
-  const stocks = [
+  const stocks1 = [
     {
-      name: ''
+      name: 'Wireless Earbuds',
+      quantity: 50,
+    },
+    {
+      name: 'mouse',
+      quantity: 40,
+    },
+    {
+      name: 'Sony Speaker',
+      quantity: 100,
+    },
+    {
+      name: 'surface laptop',
+      quantity: 46,
+    }
+  ]
+
+  const stocks2 = [
+    {
+      name: 'T-shirt',
+      quantity: 20,
+    },
+    {
+      name: "Sandle",
+      quantity: 45,
+    },
+    {
+      name: "Topwear",
+      quantity: 44,
+    },
+    {
+      name: "Handbag",
+      quantity: 44,
+    },
+    {
+      name: "Sandwich",
+      quantity: 37,
     }
   ]
 
@@ -154,31 +199,61 @@ function DashboardHome() {
 
             </Grid>
 
-            <Grid container spacing={5}>
+            <Grid container spacing={5} className={classes.chartContainer}>
 
-              <Grid item xs={12} sm={6} md={4}> 
+              <Grid item xs={12} sm={6} lg={6}> 
                 {
                   <BarChart
-                    width={500}
+                    width={600}
                     height={300}
-                    data={stocks}
+                    data={stocks1}
                     margin={{
                       top: 5,
-                      right: 10,
-                      left: 10,
-                      bottom: 5
+                      right: 30,
+                      left: 20,
+                      bottom: 5,
                     }}
                   >
                     <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="Product Name" />
-                    <YAxis dataKey="Quantity" />
+                    <XAxis dataKey="name" />
+                    <YAxis/>
                     <Tooltip />
                     <Legend />
 
                     <Bar dataKey="quantity" fill="#82ca9d" />
                   </BarChart>
                 }
-
+                <Typography variant="h6" className={classes.charttext}>
+                    M-Mart Store's Stock
+                </Typography>
+
+              </Grid>
+
+              <Grid item xs={12} sm={6} lg={6}> 
+                {
+                  <BarChart
+                    width={600}
+                    height={300}
+                    data={stocks2}
+                    margin={{
+                      top: 5,
+                      right: 30,
+                      left: 20,
+                      bottom: 5,
+                    }}
+                  >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="name" />
+                    <YAxis/>
+                    <Tooltip />
+                    <Legend />
+
+                    <Bar dataKey="quantity" fill="#8884d8" />
+                  </BarChart>
+                }
+                <Typography variant="h6" className={classes.charttext}>
+                  V-Mart Store's Stock
+                </Typography>
 
               </Grid>
             </Grid>

diff --git a/client/src/components/Dashboard/ProductList.jsx b/client/src/components/Dashboard/ProductList.jsx
@@ -211,7 +211,7 @@ function ProductList() {
                     }}
                     variant="outlined"
                   >
-                    {user.user.stores.map((store)=>{
+                    {user.user.stores.reverse().map((store)=>{
                       return(
                         <MenuItem value={store._id}>{store.name}</MenuItem>
                       )

diff --git a/client/src/components/Dashboard/ShopList.js b/client/src/components/Dashboard/ShopList.js
@@ -91,24 +91,24 @@ const ShopList = () => {
     {
       field: "_id",
       headerName: "ID",
-      width: 100,
+      width: 220,
     },
     {
       field: "name",
       headerName: "Store Name",
-      width: 200,
+      width: 180,
       editable: false,
     },
     {
       field: "description",
       headerName: "Description",
-      width: 300,
+      width: 520,
       editable: false,
     },
     {
       field: "action",
       headerName: "Action",
-      width: 120,
+      width: 150,
       renderCell: (params) => {
         const deleteProduct = async () => {
           const sure = window.confirm("This record will be deleted permanently.");