IO-306 Creation of dashboard.

client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx

@@ -2,29 +2,32 @@ import { Card } from "antd";
 import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import _ from "lodash";
 import {
-    Area,
-    Bar,
-    CartesianGrid,
-    ComposedChart,
-    Legend,
-    ResponsiveContainer,
-    Tooltip,
-    XAxis,
-    YAxis
+  Area,
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
 } from "recharts";
+import Dinero from "dinero.js";
 import * as Utils from "../../scoreboard-targets-table/scoreboard-targets-table.util";
 
 export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
   const { t } = useTranslation();
+  if (!data) return null;
 
-  const jobsByDate = {
-    "2020-07-5": [{ clm_total: 1224 }],
-    "2020-07-8": [{ clm_total: 987 }, { clm_total: 8755 }],
-    "2020-07-12": [{ clm_total: 684 }, { clm_total: 12022 }],
-    "2020-07-21": [{ clm_total: 15000 }],
-    "2020-07-28": [{ clm_total: 122 }, { clm_total: 4522 }],
-  };
+  const jobsByDate = _.groupBy(data.monthly_sales, (item) =>
+    moment(item.date_invoiced).format("YYYY-MM-DD")
+  );
+  console.log(
+    "🚀  ~ file: monthly-revenue-graph.component.jsx  ~ line 27  ~ jobsByDate",
+    jobsByDate
+  );
 
   const listOfDays = Utils.ListOfDaysInCurrentMonth();
 
@@ -33,17 +36,19 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
     let dailySales;
     if (!!jobsByDate[val]) {
       dailySales = jobsByDate[val].reduce((dayAcc, dayVal) => {
-        return dayAcc + dayVal.clm_total;
-      }, 0);
+        return dayAcc.add(Dinero(dayVal.job_totals.totals.subtotal));
+      }, Dinero());
     } else {
-      dailySales = 0;
+      dailySales = Dinero();
     }
 
     const theValue = {
-      date: moment(val).format("D dd"),
-      dailySales,
+      date: moment(val).format("DD"),
+      dailySales: dailySales.getAmount() / 100,
       accSales:
-        acc.length > 0 ? acc[acc.length - 1].accSales + dailySales : dailySales,
+        acc.length > 0
+          ? acc[acc.length - 1].accSales + dailySales.getAmount() / 100
+          : dailySales.getAmount() / 100,
     };
 
     return [...acc, theValue];
@@ -80,3 +85,15 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
     </Card>
   );
 }
+
+export const DashboardMonthlyRevenueGraphGql = `
+  monthly_sales: jobs(where: {_and: [{date_invoiced: {_gte: "${moment()
+    .startOf("month")
+    .format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment()
+  .endOf("month")
+  .format("YYYY-MM-DD")}"}}]}) {
+    id
+    date_invoiced
+    job_totals
+  }
+`;