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;
 

client/src/components/shop-info/shop-info.scheduling.component.jsx

@@ -102,7 +102,7 @@ export default function ShopInfoSchedulingComponent({ form }) {
                       key={field.key}
                       style={{ padding: 0, margin: 2 }}
                     >
-                      <div className="imex-flex-row">
+                      <LayoutFormRow>
                         <Form.Item
                           label={t("bodyshop.fields.ssbuckets.id")}
                           key={`${index}id`}
@@ -165,17 +165,19 @@ export default function ShopInfoSchedulingComponent({ form }) {
                         >
                           <InputNumber />
                         </Form.Item>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows
-                          move={move}
-                          index={index}
-                          total={fields.length}
-                        />
-                      </div>
+                        <div>
+                          <DeleteFilled
+                            onClick={() => {
+                              remove(field.name);
+                            }}
+                          />
+                          <FormListMoveArrows
+                            move={move}
+                            index={index}
+                            total={fields.length}
+                          />
+                        </div>
+                      </LayoutFormRow>
                     </Form.Item>
                   ))}
                   <Form.Item>