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>