This commit is contained in:
Michael Quigley 2023-05-11 16:18:22 -04:00
parent ce4eac8e4c
commit 714b0b11d1
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
3 changed files with 10 additions and 9 deletions

View File

@ -21,7 +21,7 @@ const MetricsTab = (props) => {
.then(resp => {
setMetrics1(buildMetrics(resp.data));
});
}, []);
}, [props.selection.id]);
useEffect(() => {
let mounted = true;
@ -45,7 +45,7 @@ const MetricsTab = (props) => {
mounted = false;
clearInterval(interval);
}
}, []);
}, [props.selection.id]);
return (
<MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />

View File

@ -1,6 +1,6 @@
import {Col, Container, Row, Tooltip} from "react-bootstrap";
import {Col, Container, Row} from "react-bootstrap";
import {bytesToSize} from "./util";
import {Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis} from "recharts";
import {Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis} from "recharts";
import moment from "moment/moment";
import React from "react";
@ -46,14 +46,13 @@ const MetricsGraph = (props) => {
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={props.metrics.data}>
<AreaChart data={props.metrics.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={(v) => v.rx ? v.rx : 0} />
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={(v) => v.tx ? v.tx : 0} />
<Tooltip />
</BarChart>
<Area type={"basis"} stroke={"#231069"} fill={"#9BF316"} dataKey={(v) => v.tx ? v.tx : 0} stackId={"1"} />
<Area type={"basis"} stroke={"#231069"} fill={"#04adef"} dataKey={(v) => v.rx ? v.rx : 0} stackId={"1"} />
</AreaChart>
</ResponsiveContainer>
</Col>
</Row>

View File

@ -48,6 +48,8 @@ const Network = (props) => {
case "account":
nodeIcon.addPath(accountIcon, xform);
break;
default:
break;
}
ctx.fill(nodeIcon);