Combine hardware graphs into a single graph

This commit is contained in:
Gabe Kangas 2020-10-28 19:28:52 -07:00
parent 9689f66d2e
commit 34458c1676
2 changed files with 44 additions and 8 deletions

View File

@ -14,6 +14,7 @@ interface ChartProps {
data: number, data: number,
color: string, color: string,
unit: string, unit: string,
dataCollections?: [],
} }
function CustomizedTooltip(props: ToolTipProps) { function CustomizedTooltip(props: ToolTipProps) {
@ -32,21 +33,30 @@ function CustomizedTooltip(props: ToolTipProps) {
} }
CustomizedTooltip.defaultProps = defaultProps; CustomizedTooltip.defaultProps = defaultProps;
export default function Chart({ data, color, unit }: ChartProps) { export default function Chart({ data, color, unit, dataCollections }: ChartProps) {
const timeFormatter = (tick: string) => { const timeFormatter = (tick: string) => {
return timeFormat("%I:%M")(new Date(tick)); return timeFormat("%I:%M")(new Date(tick));
}; };
if (dataCollections) {
var ticks = dataCollections[0]?.data.map(function (collection) {
return collection?.time;
})
} else {
var ticks = data.map(function (item) {
return item?.time;
});
}
return ( return (
<LineChart width={1200} height={400} data={data}> <LineChart width={1200} height={400} data={data}>
<XAxis <XAxis
dataKey="time" dataKey="time"
// type="number"
tickFormatter={timeFormatter} tickFormatter={timeFormatter}
interval="preserveStartEnd" interval="preserveStartEnd"
tickCount={5} tickCount={5}
minTickGap={15} minTickGap={15}
domain={["dataMin", "dataMax"]} domain={["dataMin", "dataMax"]}
ticks={ticks}
/> />
<YAxis <YAxis
dataKey="value" dataKey="value"
@ -63,6 +73,18 @@ export default function Chart({ data, color, unit }: ChartProps) {
dot={null} dot={null}
strokeWidth={3} strokeWidth={3}
/> />
{dataCollections?.map((s) => (
<Line
dataKey="value"
data={s.data}
name={s.name}
key={s.name}
type="monotone"
stroke={s.color}
dot={null}
strokeWidth={3}
/>
))}
</LineChart> </LineChart>
); );
} }

View File

@ -45,6 +45,25 @@ export default function HardwareInfo() {
hardwareStatus.memory[hardwareStatus.memory.length - 1]?.value; hardwareStatus.memory[hardwareStatus.memory.length - 1]?.value;
const currentDiskUsage = const currentDiskUsage =
hardwareStatus.disk[hardwareStatus.disk.length - 1]?.value; hardwareStatus.disk[hardwareStatus.disk.length - 1]?.value;
const series = [
{
name: "CPU",
color: "#FF7700",
data: hardwareStatus.cpu,
},
{
name: "Memory",
color: "#004777",
data: hardwareStatus.memory,
},
{
name: "Disk",
color: "#A9E190",
data: hardwareStatus.disk,
},
];
return ( return (
<div> <div>
<div> <div>
@ -68,12 +87,7 @@ export default function HardwareInfo() {
</Row> </Row>
<div className="chart-container"> <div className="chart-container">
<h3>CPU</h3> <Chart dataCollections={series} color="#FF7700" unit="%" />
<Chart data={hardwareStatus.cpu} color="#FF7700" unit="%" />
<h3>Memory</h3>
<Chart data={hardwareStatus.memory} color="#004777" unit="%" />
<h3>Disk</h3>
<Chart data={hardwareStatus.disk} color="#A9E190" unit="%" />
</div> </div>
</div> </div>
<p>cpu:[], disk: [], memory: []; value = %age.</p> <p>cpu:[], disk: [], memory: []; value = %age.</p>