IO-1391 Scoreboard Improvements

client/src/components/scoreboard-chart/scoreboard-chart.component.jsx

@@ -18,6 +18,11 @@ 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";
+
+const graphProps = {
+  strokeWidth: 3,
+};
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -51,7 +56,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
     }
 
     const theValue = {
-      date: moment(val).format("D dd"),
+      date: moment(val).format("D ddd"),
       paintHrs: _.round(dayhrs.painthrs, 1),
       bodyHrs: _.round(dayhrs.bodyhrs, 1),
       accTargetHrs: _.round(
@@ -81,36 +86,37 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
           margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
         >
           <CartesianGrid stroke="#f5f5f5" />
-          <XAxis dataKey="date" />
-          <YAxis />
+          <XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
+          <YAxis strokeWidth={graphProps.strokeWidth} />
           <Tooltip />
           <Legend />
           <Area
             type="monotone"
             name="Accumulated Hours"
             dataKey="accHrs"
-            fill="#8884d8"
-            stroke="#8884d8"
+            fill="lightgreen"
+            stroke="green"
           />
           <Bar
             name="Body Hours"
             dataKey="bodyHrs"
             stackId="day"
             barSize={20}
-            fill="#cecece"
+            fill="darkblue"
           />
           <Bar
             name="Paint Hours"
             dataKey="paintHrs"
             stackId="day"
             barSize={20}
-            fill="#413ea0"
+            fill="darkred"
           />
           <Line
             name="Target Hours"
             type="monotone"
             dataKey="accTargetHrs"
             stroke="#ff7300"
+            strokeWidth={graphProps.strokeWidth}
           />
         </ComposedChart>
       </ResponsiveContainer>

client/src/components/scoreboard-display/scoreboard-display.component.jsx

@@ -1,12 +1,33 @@
 import { Col, Row } from "antd";
-import React from "react";
+import React, { useEffect } from "react";
 import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component";
 import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component";
 import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
 
-export default function ScoreboardDisplayComponent({ scoreboardSubscription }) {
-  const { data } = scoreboardSubscription;
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import moment from "moment";
+import { useApolloClient } from "@apollo/client";
+import { GET_BLOCKED_DAYS } from "../../graphql/scoreboard.queries";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScoreboardDisplayComponent);
 
+export function ScoreboardDisplayComponent({
+  bodyshop,
+  scoreboardSubscription,
+}) {
+  const { data } = scoreboardSubscription;
+  const client = useApolloClient();
   const scoreBoardlist = (data && data.scoreboard) || [];
 
   const sbEntriesByDate = {};
@@ -19,6 +40,29 @@ export default function ScoreboardDisplayComponent({ scoreboardSubscription }) {
     sbEntriesByDate[entryDate].push(i);
   });
 
+  useEffect(() => {
+    //Update the locals.
+    async function setMomentSettings() {
+      const {
+        data: { appointments },
+      } = await client.query({
+        query: GET_BLOCKED_DAYS,
+        variables: {
+          start: moment().startOf("month"),
+          end: moment().endOf("month"),
+        },
+      });
+
+      moment.updateLocale("ca", {
+        workingWeekdays: translateSettingsToWorkingDays(bodyshop.workingdays),
+        holidays: appointments.map((h) => moment(h.start).format("MM-DD-YYYY")),
+        holidayFormat: "MM-DD-YYYY",
+      });
+    }
+
+    setMomentSettings();
+  }, [client, bodyshop]);
+
   return (
     <Row gutter={[16, 16]}>
       <Col span={24}>
@@ -35,3 +79,30 @@ export default function ScoreboardDisplayComponent({ scoreboardSubscription }) {
     </Row>
   );
 }
+
+function translateSettingsToWorkingDays(workingdays) {
+  const days = [];
+
+  if (workingdays.monday) {
+    days.push(1);
+  }
+  if (workingdays.tuesday) {
+    days.push(2);
+  }
+  if (workingdays.wednesday) {
+    days.push(3);
+  }
+  if (workingdays.thursday) {
+    days.push(4);
+  }
+  if (workingdays.friday) {
+    days.push(5);
+  }
+  if (workingdays.saturday) {
+    days.push(6);
+  }
+  if (workingdays.sunday) {
+    days.push(0);
+  }
+  return days;
+}

client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js

@@ -1,8 +1,8 @@
 import moment from "moment-business-days";
 
-moment.updateLocale("ca", {
-  workingWeekdays: [1, 2, 3, 4, 5],
-});
+// moment.updateLocale("ca", {
+//   workingWeekdays: [1, 2, 3, 4, 5, 6],
+// });
 
 export const CalculateWorkingDaysThisMonth = () => {
   return moment().endOf("month").businessDaysIntoMonth();

client/src/graphql/scoreboard.queries.js

@@ -62,3 +62,23 @@ export const QUERY_SCOREBOARD_ENTRY = gql`
     }
   }
 `;
+
+export const GET_BLOCKED_DAYS = gql`
+  query GET_BLOCKED_DAYS($start: timestamptz, $end: timestamptz) {
+    appointments(
+      where: {
+        _and: [
+          { block: { _eq: true } }
+          { canceled: { _eq: false } }
+          { start: { _gte: $start } }
+          { end: { _lte: $end } }
+        ]
+      }
+    ) {
+      id
+      block
+      start
+      end
+    }
+  }
+`;