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;