IO-306 Furhter dashboard development

client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx

@@ -29,13 +29,9 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) {
     return {
       name: t(`joblines.fields.part_types.${key.toUpperCase()}`),
       value: partData[key].getAmount() / 100,
-      // color: pieColor(i.status),
+      color: pieColor(key.toUpperCase()),
     };
   });
-  console.log(
-    "🚀  ~ file: monthly-parts-sales.component.jsx  ~ line 34  ~ chartData",
-    chartData
-  );
 
   return (
     <Card title={t("dashboard.titles.monthlypartssales")} {...cardProps}>
@@ -68,37 +64,55 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) {
 export const DashboardMonthlyRevenueGraphGql = `
 
 `;
+const pieColor = (type) => {
+  if (type === "PAA") return "darkgreen";
+  else if (type === "PAC") return "green";
+  else if (type === "PAE") return "gold";
+  else if (type === "PAG") return "seafoam";
+  else if (type === "PAL") return "chartreuse";
+  else if (type === "PAM") return "magenta";
+  else if (type === "PAN") return "crimson";
+  else if (type === "PAO") return "gold";
+  else if (type === "PAP") return "crimson";
+  else if (type === "PAR") return "indigo";
+  else if (type === "PAS") return "dodgerblue";
+  else if (type === "PASL") return "dodgerblue";
+  return "slategray";
+};
 
 const renderActiveShape = (props) => {
-  const RADIAN = Math.PI / 180;
+  // const RADIAN = Math.PI / 180;
   const {
     cx,
     cy,
-    midAngle,
+    //  midAngle,
     innerRadius,
     outerRadius,
     startAngle,
     endAngle,
     fill,
     payload,
-    percent,
+    //   percent,
     value,
   } = props;
-  const sin = Math.sin(-RADIAN * midAngle);
-  const cos = Math.cos(-RADIAN * midAngle);
-  const sx = cx + (outerRadius + 10) * cos;
-  const sy = cy + (outerRadius + 10) * sin;
-  const mx = cx + (outerRadius + 30) * cos;
-  const my = cy + (outerRadius + 30) * sin;
-  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
-  const ey = my;
-  const textAnchor = cos >= 0 ? "start" : "end";
+  // const sin = Math.sin(-RADIAN * midAngle);
+  // const cos = Math.cos(-RADIAN * midAngle);
+  // const sx = cx + (outerRadius + 10) * cos;
+  //const sy = cy + (outerRadius + 10) * sin;
+  // const mx = cx + (outerRadius + 30) * cos;
+  //const my = cy + (outerRadius + 30) * sin;
+  // const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+  // const ey = my;
+  // const textAnchor = cos >= 0 ? "start" : "end";
 
   return (
     <g>
-      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
+      <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
         {payload.name}
       </text>
+      <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
+        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+      </text>
       <Sector
         cx={cx}
         cy={cy}
@@ -117,29 +131,6 @@ const renderActiveShape = (props) => {
         outerRadius={outerRadius + 10}
         fill={fill}
       />
-      <path
-        d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
-        stroke={fill}
-        fill="none"
-      />
-
-      <text
-        x={ex + (cos >= 0 ? 1 : -1) * 12}
-        y={ey}
-        textAnchor={textAnchor}
-        fill="#333"
-      >
-        {payload.name}
-      </text>
-      <text
-        x={ex + (cos >= 0 ? 1 : -1) * 12}
-        y={ey}
-        dy={18}
-        textAnchor={textAnchor}
-        fill="#999"
-      >
-        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
-      </text>
     </g>
   );
 };