Begin refactoring smart schedule calculations.

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.js

@@ -1,5 +1,5 @@
 import Icon from "@ant-design/icons";
-import { Popover, Statistic } from "antd";
+import { Popover } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { MdFileDownload, MdFileUpload } from "react-icons/md";
@@ -8,23 +8,21 @@ import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import {
   selectScheduleLoad,
-  selectScheduleLoadCalculating,
+  selectScheduleLoadCalculating
 } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
+import ScheduleCalendarHeaderGraph from "./schedule-calendar-header-graph.component";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
   load: selectScheduleLoad,
   calculating: selectScheduleLoadCalculating,
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = (dispatch) => ({});
 
 export function ScheduleCalendarHeaderComponent({
   bodyshop,
@@ -122,23 +120,7 @@ export function ScheduleCalendarHeaderComponent({
         <Icon component={MdFileUpload} style={{ color: "red" }} />
         {(loadData.hoursOut || 0) && loadData.hoursOut.toFixed(2)}
       </Popover>
-      <Statistic
-        value={(
-          ((loadData.expectedLoad || 0) / bodyshop.prodtargethrs) *
-          100
-        ).toFixed(1)}
-        suffix={"%"}
-        precision={0}
-        valueStyle={{
-          color:
-            Math.abs(
-              100 -
-                ((loadData.expectedLoad || 0) / bodyshop.prodtargethrs) * 100
-            ) <= 10
-              ? "green"
-              : "red",
-        }}
-      />
+      <ScheduleCalendarHeaderGraph loadData={loadData} />
     </div>
   ) : null;