mirror of
https://github.com/owncast/owncast.git
synced 2024-10-10 19:16:02 +00:00
Combine hardware graphs into a single graph
This commit is contained in:
parent
9689f66d2e
commit
34458c1676
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user