From 5eda2243935486d8691f8cdfd938d2b00dfeb83f Mon Sep 17 00:00:00 2001
From: swtmply <delosreyesjohnallen@gmail.com>
Date: Fri, 28 Apr 2023 01:42:22 +0800
Subject: [PATCH] IO-1053 Added Job Total to graph

---
 .../scoreboard-chart/chart-custom-tooltip.jsx | 39 +++++++++++++++++++
 .../scoreboard-chart.component.jsx            | 34 +++++++++++++++-
 client/src/graphql/scoreboard.queries.js      |  1 +
 3 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/scoreboard-chart/chart-custom-tooltip.jsx

diff --git a/client/src/components/scoreboard-chart/chart-custom-tooltip.jsx b/client/src/components/scoreboard-chart/chart-custom-tooltip.jsx
new file mode 100644
index 000000000..5dba79e71
--- /dev/null
+++ b/client/src/components/scoreboard-chart/chart-custom-tooltip.jsx
@@ -0,0 +1,39 @@
+import Dinero from "dinero.js";
+
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div
+        style={{
+          backgroundColor: "white",
+          border: "1px solid gray",
+          padding: "0.5rem",
+        }}
+      >
+        <p style={{ margin: "0" }}>{label}</p>
+        {payload.map((data, index) => {
+          if (data.dataKey === "sales")
+            return (
+              <p
+                style={{ margin: "10px 0", color: data.color }}
+                key={index}
+              >{`${data.name} : ${Dinero({
+                amount: data.value,
+              }).toFormat()}`}</p>
+            );
+
+          return (
+            <p
+              style={{ margin: "10px 0", color: data.color }}
+              key={index}
+            >{`${data.name} : ${data.value}`}</p>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default CustomTooltip;
diff --git a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
index 7b1fd410e..800f04515 100644
--- a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
+++ b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
@@ -18,6 +18,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import * as Utils from "../scoreboard-targets-table/scoreboard-targets-table.util";
 import _ from "lodash";
+import CustomTooltip from "./chart-custom-tooltip";
 
 const graphProps = {
   strokeWidth: 3,
@@ -55,6 +56,14 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
       };
     }
 
+    const yesterdaySales = acc.length > 0 && acc[acc.length - 1].sales;
+    const sales =
+      sbEntriesByDate[val]?.reduce((acc, sb) => {
+        return acc + sb.job.job_totals.totals.subtotal.amount;
+      }, 0) || 0;
+
+    const accSales = yesterdaySales + sales;
+
     const theValue = {
       date: moment(val).format("D ddd"),
       paintHrs: _.round(dayhrs.painthrs, 1),
@@ -73,6 +82,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
           : dayhrs.painthrs + dayhrs.bodyhrs,
         1
       ),
+      sales: accSales,
     };
 
     return [...acc, theValue];
@@ -87,8 +97,15 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
         >
           <CartesianGrid stroke="#f5f5f5" />
           <XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
-          <YAxis strokeWidth={graphProps.strokeWidth} />
-          <Tooltip />
+          <YAxis
+            strokeWidth={graphProps.strokeWidth}
+            allowDataOverflow
+            dataKey="sales"
+            yAxisId="right"
+            orientation="right"
+          />
+          <YAxis yAxisId="left" strokeWidth={graphProps.strokeWidth} />
+          <Tooltip content={<CustomTooltip />} />
           <Legend />
           <Area
             type="monotone"
@@ -96,6 +113,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
             dataKey="accHrs"
             fill="lightgreen"
             stroke="green"
+            yAxisId="left"
           />
           <Bar
             name="Body Hours"
@@ -103,6 +121,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
             stackId="day"
             barSize={20}
             fill="darkblue"
+            yAxisId="left"
           />
           <Bar
             name="Paint Hours"
@@ -110,12 +129,23 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
             stackId="day"
             barSize={20}
             fill="darkred"
+            yAxisId="left"
           />
           <Line
             name="Target Hours"
             type="monotone"
             dataKey="accTargetHrs"
             stroke="#ff7300"
+            yAxisId="left"
+            strokeWidth={graphProps.strokeWidth}
+          />
+
+          <Line
+            name="Sales"
+            type="monotone"
+            dataKey="sales"
+            stroke="#8F00FF"
+            yAxisId="right"
             strokeWidth={graphProps.strokeWidth}
           />
         </ComposedChart>
diff --git a/client/src/graphql/scoreboard.queries.js b/client/src/graphql/scoreboard.queries.js
index 4dc7d522b..0d3efb31e 100644
--- a/client/src/graphql/scoreboard.queries.js
+++ b/client/src/graphql/scoreboard.queries.js
@@ -19,6 +19,7 @@ export const QUERY_SCOREBOARD = gql`
         v_make_desc
         v_model_desc
         v_model_yr
+        job_totals
       }
     }
   }