Added scoreboard initial design BOD-91

2020-06-26 16:25:54 -07:00
parent 4516491c8c
commit 3df456e2dd
41 changed files with 1388 additions and 11 deletions
--- a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
+++ b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
@@ -0,0 +1,113 @@
+import React from "react";
+import {
+  ComposedChart,
+  Line,
+  Area,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+import * as Utils from "../scoreboard-targets-table/scoreboard-targets-table.util";
+import moment from "moment";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardChart);
+
+export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
+  const listOfBusDays = Utils.ListOfDaysInCurrentMonth();
+
+  const data = listOfBusDays.reduce((acc, val) => {
+    //Sum up the current day.
+    let dayhrs;
+    if (!!sbEntriesByDate[val]) {
+      dayhrs = sbEntriesByDate[val].reduce(
+        (dayAcc, dayVal) => {
+          return {
+            bodyhrs: dayAcc.bodyhrs + dayVal.bodyhrs,
+            painthrs: dayAcc.painthrs + dayVal.painthrs,
+          };
+        },
+        { bodyhrs: 0, painthrs: 0 }
+      );
+    } else {
+      dayhrs = {
+        bodyhrs: 0,
+        painthrs: 0,
+      };
+    }
+
+    const theValue = {
+      date: moment(val).format("D dd"),
+      paintHrs: dayhrs.painthrs,
+      bodyHrs: dayhrs.bodyhrs,
+      accTargetHrs: Utils.AsOfDateTargetHours(
+        bodyshop.scoreboard_target.dailyBodyTarget +
+          bodyshop.scoreboard_target.dailyPaintTarget,
+        val
+      ),
+      accHrs:
+        acc.length > 0
+          ? acc[acc.length - 1].accHrs + dayhrs.painthrs + dayhrs.bodyhrs
+          : dayhrs.painthrs + dayhrs.bodyhrs,
+    };
+
+    return [...acc, theValue];
+  }, []);
+
+  return (
+    <div>
+      <ResponsiveContainer width="100%" height={475}>
+        <ComposedChart
+          data={data}
+          margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+        >
+          <CartesianGrid stroke="#f5f5f5" />
+          <XAxis dataKey="date" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Area
+            type="monotone"
+            name="Accumulated Hours"
+            dataKey="accHrs"
+            fill="#8884d8"
+            stroke="#8884d8"
+          />
+          <Bar
+            name="Body Hours"
+            dataKey="bodyHrs"
+            stackId="day"
+            barSize={20}
+            fill="#cecece"
+          />
+          <Bar
+            name="Paint Hours"
+            dataKey="paintHrs"
+            stackId="day"
+            barSize={20}
+            fill="#413ea0"
+          />
+          <Line
+            name="Target Hours"
+            type="monotone"
+            dataKey="accTargetHrs"
+            stroke="#ff7300"
+          />
+        </ComposedChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}