Initial Vite Configuration & addition of prettierrc.

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

@@ -0,0 +1,86 @@
+import {RadarChartOutlined} from "@ant-design/icons";
+import {Popover, Space} from "antd";
+import React, {useMemo} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {Legend, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, Tooltip,} 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 {t} = useTranslation();
+    const data = useMemo(() => {
+        return (
+            (loadData &&
+                loadData.expectedLoad &&
+                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,
+                    };
+                })) ||
+            []
+        );
+    }, [loadData, ssbuckets]);
+
+    const popContent = (
+        <div>
+            <Space>
+                {t("appointments.labels.expectedprodhrs")}
+                <strong>{loadData?.expectedHours?.toFixed(1)}</strong>
+                {t("appointments.labels.expectedjobs")}
+                <strong>{loadData?.expectedJobCount}</strong>
+            </Space>
+            <RadarChart
+                // cx={300}
+                // cy={250}
+                // outerRadius={150}
+                width={800}
+                height={600}
+                data={data}
+            >
+                <PolarGrid/>
+                <PolarAngleAxis dataKey="bucket"/>
+                <PolarRadiusAxis angle={90}/>
+                <Radar
+                    name="Ideal Load"
+                    dataKey="target"
+                    stroke="darkgreen"
+                    fill="white"
+                    fillOpacity={0}
+                />
+                <Radar
+                    name="EOD Load"
+                    dataKey="current"
+                    stroke="dodgerblue"
+                    fill="dodgerblue"
+                    fillOpacity={0.6}
+                />
+                <Tooltip/>
+                <Legend/>
+            </RadarChart>
+        </div>
+    );
+
+    return (
+        <Popover trigger="hover" placement="bottom" content={popContent}>
+            <RadarChartOutlined/>
+        </Popover>
+    );
+}
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(ScheduleCalendarHeaderGraph);