Merge pull request #174 from webaccess/charts

pie chart component done

Author: tanviGanesh

webapp/package-lock.json

@@ -17,6 +17,9 @@
     "@types/react-dom": "^16.9.8",
     "autosuggest-highlight": "^3.1.1",
     "axios": "^0.19.2",
+    "chart.js": "^2.9.3",
+    "chart.piecelabel.js": "^0.15.0",
+    "chartjs-plugin-datalabels": "^0.7.0",
     "clsx": "^1.1.0",
     "cors": "^2.8.5",
     "date-fns": "^2.8.1",
@@ -26,6 +29,7 @@
     "moment": "^2.27.0",
     "react": "^16.12.0",
     "react-autosuggest": "^9.4.3",
+    "react-chartjs-2": "^2.10.0",
     "react-data-table-component": "^6.3.1",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",

webapp/package.json

@@ -0,0 +1,53 @@
+import React from "react";
+import { Pie } from "react-chartjs-2";
+import "chartjs-plugin-datalabels";
+
+const Piechart = (props) => (
+  <Pie
+    data={{
+      labels: props.labels ? props.labels : [],
+      datasets: props.datasets ? props.datasets : [],
+    }}
+    options={{
+      plugins: {
+        datalabels: {
+          display: true,
+          color: "white",
+          font: {
+            weight: "bold",
+            size: 16,
+          },
+        },
+      },
+      tooltips: {
+        enabled: false,
+      },
+      legend: {
+        labels: {
+          fontSize: 19,
+        },
+      },
+    }}
+    responsive="true"
+    maintainAspectRatio="true"
+    {...props}
+  />
+);
+
+export default Piechart;
+
+/**
+ * usage:
+ * example:
+ * import Piechart from "../UI/Piechart/Piechart";
+ *  <Piechart
+          labels={["A", "B", "C"]}
+          datasets={[
+            {
+              data: [20, 30, 60],
+              backgroundColor: ["red", "blue", "green"],
+              fontSize: "20px",
+            },
+          ]}
+        />
+ */