Video-43-Dashboard-Chart (basir#43)

Author: basir

backend/routers/orderRouter.js

@@ -3,6 +3,7 @@ import expressAsyncHandler from 'express-async-handler';
 import { isAuth, isAdmin } from '../utils';
 import Order from '../models/orderModel';
 import User from '../models/userModel';
+import Product from '../models/productModel';
 
 const orderRouter = express.Router();
 orderRouter.get(
@@ -27,7 +28,24 @@ orderRouter.get(
  },
  },
  ]);
- res.send({ users, orders });
+ const dailyOrders = await Order.aggregate([
+ {
+ $group: {
+ _id: { $dateToString: { format: '%Y-%m-%d', date: '$createdAt' } },
+ orders: { $sum: 1 },
+ sales: { $sum: '$totalPrice' },
+ },
+ },
+ ]);
+ const productCategories = await Product.aggregate([
+ {
+ $group: {
+ _id: '$category',
+ count: { $sum: 1 },
+ },
+ },
+ ]);
+ res.send({ users, orders, dailyOrders, productCategories });
  })
 );
 orderRouter.get(

frontend/index.html

@@ -7,6 +7,10 @@
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
  />
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"
+ />
  <link rel="stylesheet" href="style.css" />
  <title>JS Amazona</title>
  </head>

frontend/package.json

@@ -16,6 +16,7 @@
  "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
- "axios": "^0.19.2"
+ "axios": "^0.19.2",
+ "chartist": "^0.11.4"
  }
 }

frontend/src/srceens/DashboardScreen.js

@@ -1,9 +1,36 @@
+/* eslint-disable no-new */
+import Chartist from 'chartist';
 import DashboardMenu from '../components/DashboardMenu';
 import { getSummary } from '../api';
 
 let summary = {};
 const DashboardScreen = {
- after_render: () => {},
+ after_render: () => {
+ new Chartist.Line(
+ '.ct-chart-line',
+ {
+ labels: summary.dailyOrders.map((x) => x._id),
+ series: [summary.dailyOrders.map((x) => x.sales)],
+ },
+ {
+ showArea: true,
+ }
+ );
+ new Chartist.Pie(
+ '.ct-chart-pie',
+ {
+ labels: summary.productCategories.map((x) => x._id),
+ series: summary.productCategories.map((x) => x.count),
+ },
+ {
+ donut: true,
+ donutWidth: 60,
+ startAngle: 270,
+ showLabel: true,
+ donutSolid: true,
+ }
+ );
+ },
  render: async () => {
  summary = await getSummary();
  return `
@@ -32,6 +59,16 @@ const DashboardScreen = {
  <div class="summary-body">$${summary.orders[0].totalSales}</div>
  </li>
  </ul>
+ <div class="charts">
+ <div>
+ <h2>Sales</h2>
+ <div class="ct-perfect-fourth ct-chart-line"></div>
+ </div>
+ <div>
+ <h2>Categories</h2>
+ <div class="ct-perfect-fourth ct-chart-pie"></div>
+ </div>
+ </div> 
  </div>
  </div>
  `;

frontend/style.css

@@ -449,3 +449,10 @@ td {
 .summary-title.color3 {
  background-color: #e0e0f0;
 }
+.charts {
+ display: flex;
+ justify-content: space-between;
+}
+.charts > div {
+ flex: 1;
+}