42 lines
1.5 KiB
JavaScript
Executable File
42 lines
1.5 KiB
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);
|
|
|
|
const CustomTooltip = ({ active, payload, label }) => {
|
|
if (active && payload && payload.length) {
|
|
return (
|
|
<div className="custom-tooltip" style={{
|
|
backgroundColor: '#fff',
|
|
padding: '10px',
|
|
border: '1px solid #ccc'
|
|
}}>
|
|
<p>{`Время: ${label}`}</p>
|
|
<p>{`Значение: ${payload[0].value}`}</p>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
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 content={<CustomTooltip />} />
|
|
<Line type="monotone" dataKey="status" stroke="#8884d8" activeDot={{ r: 8 }} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
};
|
|
|
|
export default SystemStatusChart; |