- {totals ? (
+ {data.job_totals ? (
) : (
diff --git a/client/src/components/parts-status-pie/parts-status-pie.component.jsx b/client/src/components/parts-status-pie/parts-status-pie.component.jsx
index 1afe6abc6..ee574c527 100644
--- a/client/src/components/parts-status-pie/parts-status-pie.component.jsx
+++ b/client/src/components/parts-status-pie/parts-status-pie.component.jsx
@@ -1,25 +1,93 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
+import { connect } from "react-redux";
+import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+const mapStateToProps = createStructuredSelector({
+ bodyshop: selectBodyshop,
+});
-export default function PartsStatusPie({ partsList }) {
- return Parts Pie
;
- //const [pieData, setPieData] = useState([]);
+export function PartsStatusPie({ bodyshop, joblines_status }) {
+ const { t } = useTranslation();
+ const pieColor = useCallback(
+ (status) => {
+ if (status === bodyshop.md_order_statuses.default_ordered)
+ return "lightgreen";
+ if (status === bodyshop.md_order_statuses.default_bo) return "crimson";
- // const result = partsList
- // ? partsList.reduce((names, name) => {
- // const val = name || "?";
- // const count = names[val] || 0;
- // names[val] = count + 1;
- // return names;
- // }, {})
- // : {};
+ if (status === bodyshop.md_order_statuses.default_canceled)
+ return "dodgerblue";
- // const pieData = Object.keys(result).map((i) => {
- // return {
- // id: i,
- // label: i,
- // value: result[i],
- // };
- // });
+ if (status === bodyshop.md_order_statuses.default_returned)
+ return "powderblue";
+ if (status === bodyshop.md_order_statuses.default_received)
+ return "seagreen";
- // return {JSON.stringify(pieData)}
;
+ return "slategray";
+ },
+ [
+ bodyshop.md_order_statuses.default_ordered,
+ bodyshop.md_order_statuses.default_bo,
+ bodyshop.md_order_statuses.default_canceled,
+ bodyshop.md_order_statuses.default_returned,
+ bodyshop.md_order_statuses.default_received,
+ ]
+ );
+
+ const Calculatedata = useCallback(
+ (data) => {
+ if (data.length > 0) {
+ const statusMapping = {};
+ data.map((i) => {
+ if (!statusMapping[i.status])
+ statusMapping[i.status] = {
+ name: i.status || t("joblines.labels.nostatus"),
+ value: 0,
+ color: pieColor(i.status),
+ };
+ statusMapping[i.status].value =
+ statusMapping[i.status].value + i.count;
+ return null;
+ });
+ return Object.keys(statusMapping).map((key) => {
+ return statusMapping[key];
+ });
+ } else {
+ return [];
+ }
+ },
+ [pieColor, t]
+ );
+
+ const memoizedData = useMemo(() => Calculatedata(joblines_status), [
+ joblines_status,
+ Calculatedata,
+ ]);
+
+ console.log("PartsStatusPie -> memoizedData", memoizedData);
+
+ return (
+
+
+
+ `${entry.name} - ${entry.value}`}
+ labelLine
+ >
+ {memoizedData.map((entry, index) => (
+ |
+ ))}
+
+
+
+