Added pie to job costinng, combined columns on job costing IO-569

client/src/components/job-costing-modal/job-costing-modal.pie.component.jsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useMemo } from "react";
+import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+
+export default function JobCostingPieComponent({
+  type = "sales",
+  costCenterData,
+}) {
+  const Calculatedata = useCallback(
+    (data) => {
+      if (data && data.length > 0) {
+        return data.reduce((acc, i) => {
+          const value =
+            type === "sales"
+              ? i.sales_dinero.getAmount()
+              : i.costs_dinero.getAmount();
+
+          if (value > 0) {
+            acc.push({
+              name: i.cost_center,
+              color: "#" + Math.floor(Math.random() * 16777215).toString(16),
+
+              label: `${i.cost_center} - ${
+                type === "sales"
+                  ? i.sales_dinero.toFormat()
+                  : i.costs_dinero.toFormat()
+              }`,
+              value:
+                type === "sales"
+                  ? i.sales_dinero.getAmount()
+                  : i.costs_dinero.getAmount(),
+            });
+          }
+          return acc;
+        }, []);
+      } else {
+        return [];
+      }
+    },
+    [type]
+  );
+
+  const memoizedData = useMemo(() => Calculatedata(costCenterData), [
+    costCenterData,
+    Calculatedata,
+  ]);
+
+  console.log(type, memoizedData);
+
+  return (
+    <ResponsiveContainer width="100%" height={175}>
+      <PieChart>
+        <Pie
+          data={memoizedData}
+          innerRadius={40}
+          outerRadius={50}
+          fill="#8884d8"
+          paddingAngle={5}
+          dataKey="value"
+          label={(entry) => entry.label}
+          labelLine
+        >
+          {memoizedData.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.color} />
+          ))}
+        </Pie>
+      </PieChart>
+    </ResponsiveContainer>
+  );
+}