87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
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);
|