27 lines
1020 B
JavaScript
Executable File
27 lines
1020 B
JavaScript
Executable File
import React from 'react';
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
|
|
|
const SystemStatusChart = ({ data }) => {
|
|
// Обрезаем массив, оставляя только последние 20 точек
|
|
const trimmedData = data.slice(-20);
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<LineChart
|
|
data={trimmedData} // Используем обрезанный массив
|
|
margin={{
|
|
top: 5, right: 30, left: 20, bottom: 5,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="time" />
|
|
<YAxis domain={[0, 100]} />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Line type="monotone" dataKey="status" stroke="#8884d8" activeDot={{ r: 8 }} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
};
|
|
|
|
export default SystemStatusChart; |