Remove Chartsjs and react-chartjs-2 (#2677)
Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
GitHub
@@ -12,20 +12,7 @@
|
||||
"@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",
|
||||
@@ -33,7 +20,6 @@
|
||||
"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",
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2021 MinIO, Inc.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU Affero General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU Affero General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React from "react";
|
||||
import { Box, Grid } from "@mui/material";
|
||||
import { HelpBox } from "mds";
|
||||
|
||||
interface IFeatureNotAvailable {
|
||||
iconComponent?: any;
|
||||
title?: string;
|
||||
helpCls?: any;
|
||||
message?: any;
|
||||
}
|
||||
|
||||
const FeatureNotAvailable = ({
|
||||
iconComponent = null,
|
||||
title = "",
|
||||
message = "",
|
||||
}: IFeatureNotAvailable) => {
|
||||
return (
|
||||
<Grid container alignItems={"center"}>
|
||||
<Grid item xs={12}>
|
||||
<HelpBox
|
||||
title={title}
|
||||
iconComponent={iconComponent}
|
||||
help={
|
||||
<Box
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
display: "flex",
|
||||
border: "none",
|
||||
flexFlow: {
|
||||
xs: "column",
|
||||
md: "row",
|
||||
},
|
||||
"& a": {
|
||||
color: (theme) => theme.colors.link,
|
||||
textDecoration: "underline",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{message}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureNotAvailable;
|
||||
@@ -1,31 +0,0 @@
|
||||
import React from "react";
|
||||
import FeatureNotAvailable from "./FeatureNotAvailable";
|
||||
import PageLayout from "../Layout/PageLayout";
|
||||
import PageHeaderWrapper from "../PageHeaderWrapper/PageHeaderWrapper";
|
||||
|
||||
const FeatureNotAvailablePage = ({
|
||||
pageHeaderText = "",
|
||||
icon = null,
|
||||
title = "",
|
||||
message = null,
|
||||
}: {
|
||||
pageHeaderText?: string;
|
||||
icon?: any;
|
||||
title?: string;
|
||||
message?: any;
|
||||
}) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<PageHeaderWrapper label={pageHeaderText} />
|
||||
<PageLayout>
|
||||
<FeatureNotAvailable
|
||||
iconComponent={icon}
|
||||
title={title}
|
||||
message={message}
|
||||
/>
|
||||
</PageLayout>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureNotAvailablePage;
|
||||
@@ -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}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user