Started modifying chart components. Removed chartjs and added Nivo. Fixed signout functionality.

client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx

@@ -1,41 +1,67 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CardTemplate from "./job-detail-cards.template.component";
-import { Pie } from "react-chartjs-2";
-
+import { Pie } from "@nivo/pie";
 export default function JobDetailCardsPartsComponent({ loading, data }) {
   const { t } = useTranslation();
 
-  const p = {
-    labels: ["Not Ordered", "Ordered", "Received", "Backordered"],
-    datasets: [
-      {
-        data: [5, 15, 10, 2],
-        backgroundColor: [
-          "rgba(255, 99, 132, 0.2)",
-          "rgba(54, 162, 235, 0.2)",
-          "rgba(255, 206, 86, 0.2)",
-          "rgba(75, 192, 192, 0.2)",
-          "rgba(153, 102, 255, 0.2)",
-          "rgba(255, 159, 64, 0.2)"
-        ],
-        borderColor: [
-          "rgba(255, 99, 132, 1)",
-          "rgba(54, 162, 235, 1)",
-          "rgba(255, 206, 86, 1)",
-          "rgba(75, 192, 192, 1)",
-          "rgba(153, 102, 255, 1)",
-          "rgba(255, 159, 64, 1)"
-        ],
-        borderWidth: 1
-      }
-    ]
+  const commonProperties = {
+    width: 225,
+    height: 225,
+    margin: { top: 20, right: 30, bottom: 20, left: 30 },
+    animate: true
   };
 
+  const cdata = [
+    {
+      id: "elixir",
+      label: "elixir",
+      value: 558,
+      color: "hsl(21, 70%, 50%)"
+    },
+    {
+      id: "erlang",
+      label: "erlang",
+      value: 443,
+      color: "hsl(91, 70%, 50%)"
+    },
+    {
+      id: "css",
+      label: "css",
+      value: 161,
+      color: "hsl(271, 70%, 50%)"
+    },
+    {
+      id: "python",
+      label: "python",
+      value: 305,
+      color: "hsl(33, 70%, 50%)"
+    },
+    {
+      id: "php",
+      label: "php",
+      value: 360,
+      color: "hsl(296, 70%, 50%)"
+    }
+  ];
+
   return (
     <div>
       <CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
-        {data ? <Pie data={p} /> : null}
+        <Pie
+          {...commonProperties}
+          data={cdata}
+          innerRadius={0.5}
+          padAngle={2}
+          cornerRadius={5}
+          enableRadialLabels={false}
+          legends={[
+            {
+              anchor: "bottom",
+              direction: "row"
+            }
+          ]}
+        />
       </CardTemplate>
     </div>
   );