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);