Begin refactoring smart schedule calculations.

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

@@ -0,0 +1,68 @@
+import { Popover } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+} from "recharts";
+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 function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
+  const { ssbuckets } = bodyshop;
+
+  const data = Object.keys(loadData.expectedLoad).map((key) => {
+    const metadataBucket = ssbuckets.filter((b) => b.id === key)[0];
+
+    return {
+      bucket: loadData.expectedLoad[key].label,
+      current: loadData.expectedLoad[key].count,
+      target: metadataBucket && metadataBucket.target,
+    };
+  });
+
+//d  console.log("data", data);
+  const popContent = (
+    <div>
+      <RadarChart
+        cx={300}
+        cy={250}
+        outerRadius={150}
+        width={600}
+        height={500}
+        data={data}
+      >
+        <PolarGrid />
+        <PolarAngleAxis dataKey="bucket" />
+        <PolarRadiusAxis />
+        <Radar
+          name="Current"
+          dataKey="current"
+          stroke="#8884d8"
+          fill="#8884d8"
+          fillOpacity={0.6}
+        />
+      </RadarChart>
+    </div>
+  );
+
+  return (
+    <Popover trigger="hover" placement="bottom" content={popContent}>
+      G
+    </Popover>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScheduleCalendarHeaderGraph);

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;