Updated parts status graph and formatting. BOD-328

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 <div>Parts Pie</div>;
-  //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 <div>{JSON.stringify(pieData)}</div>;
+      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 (
+    <div>
+      <ResponsiveContainer width="100%" height={175}>
+        <PieChart>
+          <Pie
+            data={memoizedData}
+            innerRadius={40}
+            outerRadius={50}
+            fill="#8884d8"
+            paddingAngle={5}
+            dataKey="value"
+            label={(entry) => `${entry.name} - ${entry.value}`}
+            labelLine
+          >
+            {memoizedData.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
 }
+export default connect(mapStateToProps, null)(PartsStatusPie);