IO-306 Furhter dashboard development

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

@@ -32,13 +32,9 @@ export default function DashboardMonthlyLaborSales({ data, ...cardProps }) {
     return {
       name: t(`joblines.fields.lbr_types.${key.toUpperCase()}`),
       value: laborData[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.monthlylaborsales")} {...cardProps}>
@@ -72,36 +68,56 @@ export const DashboardMonthlyRevenueGraphGql = `
 
 `;
 
+const pieColor = (type) => {
+  if (type === "LAA") return "lightgreen";
+  else if (type === "LAB") return "dodgerblue";
+  else if (type === "LAD") return "aliceblue";
+  else if (type === "LAE") return "seafoam";
+  else if (type === "LAG") return "chartreuse";
+  else if (type === "LAF") return "magenta";
+  else if (type === "LAM") return "gold";
+  else if (type === "LAR") return "crimson";
+  else if (type === "LAU") return "slategray";
+  else if (type === "LA1") return "slategray";
+  else if (type === "LA2") return "slategray";
+  else if (type === "LA3") return "slategray";
+  else if (type === "LA4") return "slategray";
+  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}
@@ -120,29 +136,28 @@ 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>
   );
 };
+// <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>