From 26e4bd95a4568a044ffc832a62b735a3755c354c Mon Sep 17 00:00:00 2001
From: Mohammed Abdi <48661743+mamy-CS@users.noreply.github.com>
Date: Wed, 8 Sep 2021 11:29:37 -0400
Subject: [PATCH] Dashboard Piecharts legend position/ hide- when entries are
 too many (#27)

* position top legends on right side

Signed-off-by: Mohammed Abdi <mohammed.munir.abdi@ibm.com>

* remove dead code

Signed-off-by: Mohammed Abdi <mohammed.munir.abdi@ibm.com>

Co-authored-by: Mohammed Abdi <mohammed.munir.abdi@ibm.com>
---
 tornjak-frontend/package-lock.json      | 13 +++++++++++++
 tornjak-frontend/package.json           |  2 ++
 tornjak-frontend/src/charts/PieChart.js |  9 +++++++--
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/tornjak-frontend/package-lock.json b/tornjak-frontend/package-lock.json
index 2ed61a4f..a671f20f 100644
--- a/tornjak-frontend/package-lock.json
+++ b/tornjak-frontend/package-lock.json
@@ -5245,6 +5245,11 @@
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
     },
+    "chart.js": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.1.tgz",
+      "integrity": "sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ=="
+    },
     "check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -15162,6 +15167,14 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-chartjs-2": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.4.tgz",
+      "integrity": "sha512-pcbFNpkPMTkGXXJ7k7hnukbRD0ZV01qB6JQY1ontITc2IYvhGlK6BBDy28VeydYs1Dl/c5ZpRgRVEtT5GUnxcQ==",
+      "requires": {
+        "lodash": "^4.17.19"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
diff --git a/tornjak-frontend/package.json b/tornjak-frontend/package.json
index c4b6356a..d435a9eb 100644
--- a/tornjak-frontend/package.json
+++ b/tornjak-frontend/package.json
@@ -15,10 +15,12 @@
     "carbon-components": "^10.36.0",
     "carbon-components-react": "^7.30.0",
     "carbon-icons": "^7.0.7",
+    "chart.js": "^3.5.1",
     "d3": "^5.16.0",
     "dotenv": "^8.2.0",
     "node-sass": "^6.0.1",
     "react": "^16.6.3",
+    "react-chartjs-2": "^3.0.4",
     "react-dom": "^16.6.3",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
diff --git a/tornjak-frontend/src/charts/PieChart.js b/tornjak-frontend/src/charts/PieChart.js
index c2c401ee..546478b6 100644
--- a/tornjak-frontend/src/charts/PieChart.js
+++ b/tornjak-frontend/src/charts/PieChart.js
@@ -10,10 +10,15 @@ class PieChart1 extends React.Component {
         resizable: true,
         height: "300px",
         legend: {
-          alignment: "center"
+          position: "right",
+          truncation: {
+            "type": "mid_line",
+            "threshold": 15,
+            "numCharacter": 12
+          },
         },
         pie: {
-          alignment: "center"
+          alignment: "center",
         }
       }
     };