mirror of
https://github.com/openziti/zrok.git
synced 2025-06-19 17:27:54 +02:00
standardize on @mui/x-charts (#828)
This commit is contained in:
Michael Quigley
parent
3ef44bf690
commit
c5381b5ae3
129
ui100/package-lock.json
generated
129
ui100/package-lock.json
generated
@ -15,13 +15,12 @@
|
||||
"@mui/x-charts": "^7.24.1",
|
||||
"@xyflow/react": "^12.3.5",
|
||||
"d3-hierarchy": "^3.1.2",
|
||||
"date-fns": "^4.1.0",
|
||||
"formik": "^2.4.6",
|
||||
"material-react-table": "^3.1.0",
|
||||
"moment": "^2.30.1",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router": "^7.0.1",
|
||||
"recharts": "^2.15.1",
|
||||
"yup": "^1.6.1",
|
||||
"zustand": "^5.0.2"
|
||||
},
|
||||
@ -2026,12 +2025,6 @@
|
||||
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-array": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
|
||||
"integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-color": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
|
||||
@ -2053,12 +2046,6 @@
|
||||
"@types/d3-selection": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-ease": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
|
||||
"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-hierarchy": {
|
||||
"version": "3.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
|
||||
@ -2111,12 +2098,6 @@
|
||||
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-timer": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
|
||||
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-transition": {
|
||||
"version": "3.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
|
||||
@ -3017,6 +2998,16 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
|
||||
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||
@ -3034,12 +3025,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/decimal.js-light": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
|
||||
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/deep-is": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
|
||||
@ -3329,12 +3314,6 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eventemitter3": {
|
||||
"version": "4.0.7",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
|
||||
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
@ -3342,15 +3321,6 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fast-equals": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
|
||||
"integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fast-glob": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
|
||||
@ -3948,6 +3918,8 @@
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
@ -4298,21 +4270,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-smooth": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
|
||||
"integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fast-equals": "^5.0.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-transition-group": "^4.4.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
@ -4329,38 +4286,6 @@
|
||||
"react-dom": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/recharts": {
|
||||
"version": "2.15.1",
|
||||
"resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz",
|
||||
"integrity": "sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"clsx": "^2.0.0",
|
||||
"eventemitter3": "^4.0.1",
|
||||
"lodash": "^4.17.21",
|
||||
"react-is": "^18.3.1",
|
||||
"react-smooth": "^4.0.4",
|
||||
"recharts-scale": "^0.4.4",
|
||||
"tiny-invariant": "^1.3.1",
|
||||
"victory-vendor": "^36.6.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/recharts-scale": {
|
||||
"version": "0.4.5",
|
||||
"resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
|
||||
"integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"decimal.js-light": "^2.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/regenerator-runtime": {
|
||||
"version": "0.14.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
|
||||
@ -4595,12 +4520,6 @@
|
||||
"integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
|
||||
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
@ -4759,28 +4678,6 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/victory-vendor": {
|
||||
"version": "36.9.2",
|
||||
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
|
||||
"integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
|
||||
"license": "MIT AND ISC",
|
||||
"dependencies": {
|
||||
"@types/d3-array": "^3.0.3",
|
||||
"@types/d3-ease": "^3.0.0",
|
||||
"@types/d3-interpolate": "^3.0.1",
|
||||
"@types/d3-scale": "^4.0.2",
|
||||
"@types/d3-shape": "^3.1.0",
|
||||
"@types/d3-time": "^3.0.0",
|
||||
"@types/d3-timer": "^3.0.0",
|
||||
"d3-array": "^3.1.6",
|
||||
"d3-ease": "^3.0.1",
|
||||
"d3-interpolate": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-shape": "^3.1.0",
|
||||
"d3-time": "^3.0.0",
|
||||
"d3-timer": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "5.4.14",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz",
|
||||
|
||||
@ -17,13 +17,12 @@
|
||||
"@mui/x-charts": "^7.24.1",
|
||||
"@xyflow/react": "^12.3.5",
|
||||
"d3-hierarchy": "^3.1.2",
|
||||
"date-fns": "^4.1.0",
|
||||
"formik": "^2.4.6",
|
||||
"material-react-table": "^3.1.0",
|
||||
"moment": "^2.30.1",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router": "^7.0.1",
|
||||
"recharts": "^2.15.1",
|
||||
"yup": "^1.6.1",
|
||||
"zustand": "^5.0.2"
|
||||
},
|
||||
|
||||
@ -12,7 +12,7 @@ interface AccountMetricsModalProps {
|
||||
user: User;
|
||||
}
|
||||
|
||||
const AccountMetricsModal = ({ close, isOpen, user}: AccountMetricsModalProps) => {
|
||||
const AccountMetricsModal = ({ close, isOpen, user }: AccountMetricsModalProps) => {
|
||||
const [metrics30, setMetrics30] = useState(buildMetrics([]));
|
||||
const [metrics7, setMetrics7] = useState(buildMetrics([]));
|
||||
const [metrics1, setMetrics1] = useState(buildMetrics([]));
|
||||
@ -46,7 +46,7 @@ const AccountMetricsModal = ({ close, isOpen, user}: AccountMetricsModalProps) =
|
||||
console.log("accountMetricsModal", ex.message);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<Modal open={isOpen} onClose={close}>
|
||||
@ -54,9 +54,9 @@ const AccountMetricsModal = ({ close, isOpen, user}: AccountMetricsModalProps) =
|
||||
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
|
||||
<Typography variant="h5"><strong>Account Metrics</strong></Typography>
|
||||
</Grid2>
|
||||
<MetricsGraph title="30 Days" data={metrics30.data} />
|
||||
<MetricsGraph title="7 Days" data={metrics7.data} />
|
||||
<MetricsGraph title="24 Hours" data={metrics1.data} />
|
||||
<MetricsGraph title="Last 30 Days" data={metrics30.data} />
|
||||
<MetricsGraph title="Last 7 Days" data={metrics7.data} showTime />
|
||||
<MetricsGraph title="Last 24 Hours" data={metrics1.data} showTime />
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
@ -48,7 +48,7 @@ const EnvironmentMetricsModal = ({ close, isOpen, user, environment }: Environme
|
||||
console.log("environmentMetricsModal", ex.message);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
}, [isOpen, environment]);
|
||||
|
||||
return (
|
||||
<Modal open={isOpen} onClose={close}>
|
||||
@ -56,9 +56,9 @@ const EnvironmentMetricsModal = ({ close, isOpen, user, environment }: Environme
|
||||
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
|
||||
<Typography variant="h5"><strong>Environment Metrics</strong></Typography>
|
||||
</Grid2>
|
||||
<MetricsGraph title="30 Days" data={metrics30.data} />
|
||||
<MetricsGraph title="7 Days" data={metrics7.data} />
|
||||
<MetricsGraph title="24 Hours" data={metrics1.data} />
|
||||
<MetricsGraph title="Last 30 Days" data={metrics30.data} />
|
||||
<MetricsGraph title="Last 7 Days" data={metrics7.data} showTime />
|
||||
<MetricsGraph title="Last 24 Hours" data={metrics1.data} showTime />
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
@ -1,19 +1,33 @@
|
||||
import {Grid2, Typography} from "@mui/material";
|
||||
import {Area, AreaChart, CartesianGrid, XAxis, YAxis} from "recharts";
|
||||
import moment from "moment";
|
||||
import {LineChart} from "@mui/x-charts";
|
||||
import {useEffect, useState} from "react";
|
||||
import {bytesToSize} from "./model/util.ts";
|
||||
import {format} from "date-fns";
|
||||
|
||||
const MetricsGraph = ({ title, showTime, data }) => {
|
||||
const [rxData, setRxData] = useState([]);
|
||||
const [txData, setTxData] = useState([]);
|
||||
const [timestamps, setTimestamps] = useState([]);
|
||||
const dateFormat = showTime ? "dd-MMM H:mm" : "dd-MMM"
|
||||
|
||||
useEffect(() => {
|
||||
if(data) {
|
||||
setRxData(data.map(v => v.rx ? v.rx : 0));
|
||||
setTxData(data.map(v => v.tx ? v.tx : 0 ));
|
||||
setTimestamps(data.map(v => v.timestamp));
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const MetricsGraph = ({ title, data }) => {
|
||||
return (
|
||||
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
|
||||
<Typography variant="body1"><strong>{title}</strong></Typography>
|
||||
<AreaChart data={data} width={600} height={150}>
|
||||
<CartesianGrid strokeDasharay={"3 3"} />
|
||||
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%', fontFamily: "Poppins" }}/>
|
||||
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%', fontFamily: "Poppins" }}/>
|
||||
<Area type={"basis"} stroke={"#231069"} fill={"#04adef"} dataKey={(v) => v.tx ? v.tx : 0} stackId={"1"} />
|
||||
<Area type={"basis"} stroke={"#231069"} fill={"#9BF316"} dataKey={(v) => v.rx ? v.rx : 0} stackId={"1"} />
|
||||
</AreaChart>
|
||||
<Typography variant="body1"><strong>{title}</strong></Typography>
|
||||
<LineChart width={560} height={200} slotProps={{ legend: {hidden: true}}} grid={{ vertical: true, horizontal: true }} series={[
|
||||
{ data: rxData, label: "rx", color: "#04adef", area: true, stack: "total", showMark: false, valueFormatter: (v) => { return bytesToSize(v as number) } },
|
||||
{ data: txData, label: "tx", color: "#9bf316", area: true, stack: "total", showMark: false, valueFormatter: (v) => { return bytesToSize(v as number) } }
|
||||
]}
|
||||
xAxis={[{ scaleType: "time", data: timestamps, valueFormatter: (v) => { return format(new Date(v), dateFormat) } }]}
|
||||
yAxis={[{ valueFormatter: (v) => { return bytesToSize(v) } }]}
|
||||
/>
|
||||
</Grid2>
|
||||
);
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@ const ShareMetricsModal = ({ close, isOpen, user, share }: ShareMetricsModalProp
|
||||
console.log("shareMetricsModal", ex.message);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
}, [isOpen, share]);
|
||||
|
||||
return (
|
||||
<Modal open={isOpen} onClose={close}>
|
||||
@ -56,9 +56,9 @@ const ShareMetricsModal = ({ close, isOpen, user, share }: ShareMetricsModalProp
|
||||
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
|
||||
<Typography variant="h5"><strong>Share Metrics</strong></Typography>
|
||||
</Grid2>
|
||||
<MetricsGraph title="30 Days" data={metrics30.data} />
|
||||
<MetricsGraph title="7 Days" data={metrics7.data} />
|
||||
<MetricsGraph title="24 Hours" data={metrics1.data} />
|
||||
<MetricsGraph title="Last 30 Days" data={metrics30.data} />
|
||||
<MetricsGraph title="Last 7 Days" data={metrics7.data} showTime />
|
||||
<MetricsGraph title="Last 24 Hours" data={metrics1.data} showTime />
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user