import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const NegativeStatusChart = ({ data }) => {
    // Подсчет количества негативных статусов
    const processedData = data.map(entry => ({
        time: entry.time,
        negativeCount: entry.statuses.filter(status => ['yellow', 'orange', 'red'].includes(status)).length
    }));

    return (
        <ResponsiveContainer width="100%" height={300}>
            <LineChart
                data={processedData}
                margin={{
                    top: 5, right: 30, left: 20, bottom: 5,
                }}
            >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="time" />
                <YAxis domain={[0, 'dataMax']} />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="negativeCount" stroke="#FF5733" activeDot={{ r: 8 }} />
            </LineChart>
        </ResponsiveContainer>
    );
};

export default NegativeStatusChart;