Remove Chartsjs and react-chartjs-2 (#2677)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

Author: dvaldivia

portal-ui/package.json

@@ -12,28 +12,14 @@
     "@mui/styles": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
     "@reduxjs/toolkit": "^1.9.1",
-    "@types/lodash": "^4.14.191",
-    "@types/minio": "^7.0.15",
-    "@types/node": "18.11.18",
-    "@types/react": "18.0.27",
-    "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-dom": "18.0.10",
-    "@types/react-grid-layout": "^1.1.1",
-    "@types/react-redux": "^7.1.25",
-    "@types/react-virtualized": "^9.21.21",
-    "@types/superagent": "^4.1.16",
-    "@types/webpack-env": "^1.14.1",
-    "@types/websocket": "^1.0.0",
     "@uiw/react-textarea-code-editor": "^2.0.6",
-    "chart.js": "^2.9.3",
     "kbar": "^0.1.0-beta.39",
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
     "luxon": "^3.2.1",
     "mds": "https://github.com/minio/mds.git#v0.2.5",
     "minio": "^7.0.32",
     "react": "^18.1.0",
-    "react-chartjs-2": "^2.9.0",
     "react-component-export-image": "^1.0.6",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^18.1.0",
@@ -79,6 +65,18 @@
     "@types/react-window": "^1.8.5",
     "@types/react-window-infinite-loader": "^1.0.6",
     "@types/recharts": "^1.8.24",
+    "@types/lodash": "^4.14.191",
+    "@types/minio": "^7.0.15",
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.27",
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-dom": "18.0.10",
+    "@types/react-grid-layout": "^1.1.1",
+    "@types/react-redux": "^7.1.25",
+    "@types/react-virtualized": "^9.21.21",
+    "@types/superagent": "^4.1.16",
+    "@types/webpack-env": "^1.14.1",
+    "@types/websocket": "^1.0.0",
     "prettier": "2.8.3",
     "react-scripts": "5.0.1",
     "testcafe": "^2.3.0",

portal-ui/src/screens/Console/Common/Components/FeatureNotAvailable.tsx

@@ -16,7 +16,6 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { HorizontalBar } from "react-chartjs-2";
 import {
   FormControl,
   Grid,
@@ -53,6 +52,16 @@ import DistributedOnly from "../Common/DistributedOnly/DistributedOnly";
 import { selDistSet } from "../../../systemSlice";
 import makeStyles from "@mui/styles/makeStyles";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { Legend } from "recharts";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -227,25 +236,32 @@ const Heal = () => {
     }
   }, [start, bucketName, forceStart, forceStop, prefix, recursive]);
 
-  let data = {
-    labels: ["Green", "Yellow", "Red", "Grey"],
-    datasets: [
-      {
-        label: "After Healing",
-        data: hStatus.afterHeal,
-        backgroundColor: "rgba(0, 0, 255, 0.2)",
-        borderColor: "rgba(54, 162, 235, 1)",
-        borderWidth: 1,
-      },
-      {
-        label: "Before Healing",
-        data: hStatus.beforeHeal,
-        backgroundColor: "rgba(153, 102, 255, 0.2)",
-        borderColor: "rgba(153, 102, 255, 1)",
-        borderWidth: 1,
-      },
-    ],
-  };
+  let data = [
+    {
+      name: "Green",
+      ah: hStatus.afterHeal[0],
+      bh: hStatus.beforeHeal[0],
+      amt: 100,
+    },
+    {
+      name: "Yellow",
+      ah: hStatus.afterHeal[1],
+      bh: hStatus.beforeHeal[1],
+      amt: 100,
+    },
+    {
+      name: "Red",
+      ah: hStatus.afterHeal[2],
+      bh: hStatus.beforeHeal[2],
+      amt: 100,
+    },
+    {
+      name: "Grey",
+      ah: hStatus.afterHeal[3],
+      bh: hStatus.beforeHeal[3],
+      amt: 100,
+    },
+  ];
   const bucketNames = bucketList.map((bucketName) => ({
     label: bucketName.name,
     value: bucketName.name,
@@ -352,22 +368,37 @@ const Heal = () => {
               </Grid>
             </Grid>
             <Grid item xs={12} className={classes.graphContainer}>
-              <HorizontalBar
-                data={data}
-                width={80}
-                height={30}
-                options={{
-                  title: {
-                    display: true,
-                    text: "Item's Health Status [%]",
-                    fontSize: 20,
-                  },
-                  legend: {
-                    display: true,
-                    position: "right",
-                  },
-                }}
-              />
+              <ResponsiveContainer width={"90%"} height={400}>
+                <BarChart
+                  width={600}
+                  height={400}
+                  data={data}
+                  margin={{
+                    top: 5,
+                    right: 30,
+                    left: 20,
+                    bottom: 5,
+                  }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="name" />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend verticalAlign={"top"} layout={"vertical"} />
+                  <Bar
+                    dataKey="ah"
+                    name={"After Healing"}
+                    fill="rgba(0, 0, 255, 0.2)"
+                    stroke="rgba(0, 0, 255, 1)"
+                  />
+                  <Bar
+                    dataKey="bh"
+                    name={"Before Healing"}
+                    fill="rgba(153, 102, 255, 0.2)"
+                    stroke="rgba(153, 102, 255, 1)"
+                  />
+                </BarChart>
+              </ResponsiveContainer>
               <Grid item xs={12} className={classes.scanInfo}>
                 <div className={classes.scanData}>
                   <strong>Size scanned:</strong> {hStatus.sizeScanned}

portal-ui/src/screens/Console/Common/Components/FeatureNotAvailablePage.tsx

@@ -3878,29 +3878,6 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
-chart.js@^2.9.3:
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
-  dependencies:
-    chartjs-color "^2.1.0"
-    moment "^2.10.2"
-
-chartjs-color-string@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
-
 check-error@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
@@ -4022,7 +3999,7 @@ collect-v8-coverage@^1.0.0:
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
   integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
 
-color-convert@^1.9.0, color-convert@^1.9.3:
+color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -4041,7 +4018,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
+color-name@^1.1.4, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -8355,7 +8332,7 @@ moment-duration-format-commonjs@^1.0.0:
   resolved "https://registry.yarnpkg.com/moment-duration-format-commonjs/-/moment-duration-format-commonjs-1.0.1.tgz#ca8776466dba736a30cb7cda4e07026b5aec8cf1"
   integrity sha512-KhKZRH21/+ihNRWrmdNFOyBptFi7nAWZFeFsRRpXkzgk/Yublb4fxyP0jU6EY1VDxUL/VUPdCmm/wAnpbfXdfw==
 
-moment@^2.10.2, moment@^2.14.1, moment@^2.29.4:
+moment@^2.14.1, moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
@@ -9704,14 +9681,6 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
-react-chartjs-2@^2.9.0:
-  version "2.11.2"
-  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-2.11.2.tgz#156c0d2618600561efc23bef278bd48a335cadb6"
-  integrity sha512-hcPS9vmRJeAALPPf0uo02BiD8BDm0HNmneJYTZVR74UKprXOpql+Jy1rVuj93rKw0Jfx77mkcRfXPxTe5K83uw==
-  dependencies:
-    lodash "^4.17.19"
-    prop-types "^15.7.2"
-
 react-component-export-image@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/react-component-export-image/-/react-component-export-image-1.0.6.tgz#725ec7636245f4042fa05c57ece02e9ee4b00117"