95 lines
3.2 KiB
JavaScript
95 lines
3.2 KiB
JavaScript
import { RadarChartOutlined } from "@ant-design/icons";
|
|
import { Popover, Space } from "antd";
|
|
import { 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";
|
|
import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
|
|
import { upsellEnum, UpsellMaskWrapper } from "../upsell/upsell.component";
|
|
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
|
|
import { logImEXEvent } from "../../firebase/firebase.utils";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop
|
|
});
|
|
const mapDispatchToProps = () => ({
|
|
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
|
});
|
|
|
|
export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
|
|
const { ssbuckets } = bodyshop;
|
|
const { t } = useTranslation();
|
|
const data = useMemo(() => {
|
|
return (
|
|
(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?.target
|
|
};
|
|
})) ||
|
|
[]
|
|
);
|
|
}, [loadData, ssbuckets]);
|
|
const hasSmartSchedulingAccess = HasFeatureAccess({ featureName: "smartscheduling", bodyshop });
|
|
|
|
const chartContents = (
|
|
<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>
|
|
);
|
|
|
|
const popContent = (
|
|
<div>
|
|
<Space>
|
|
{t("appointments.labels.expectedprodhrs")}
|
|
<BlurWrapperComponent featureName="smartscheduling">
|
|
<strong>{loadData?.expectedHours?.toFixed(1)}</strong>
|
|
</BlurWrapperComponent>
|
|
{t("appointments.labels.expectedjobs")}
|
|
<BlurWrapperComponent featureName="smartscheduling">
|
|
<strong>{loadData?.expectedJobCount}</strong>
|
|
</BlurWrapperComponent>
|
|
</Space>
|
|
<BlurWrapperComponent featureName="smartscheduling">
|
|
{hasSmartSchedulingAccess ? (
|
|
chartContents
|
|
) : (
|
|
<UpsellMaskWrapper upsell={upsellEnum().smartscheduling.general}>{chartContents}</UpsellMaskWrapper>
|
|
)}
|
|
</BlurWrapperComponent>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<Popover
|
|
trigger="hover"
|
|
placement="bottom"
|
|
onOpenChange={(open) => open && logImEXEvent("schedule_spider_graph", {})}
|
|
content={popContent}
|
|
>
|
|
<RadarChartOutlined />
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ScheduleCalendarHeaderGraph);
|