31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
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;
|