src/Charts/NegativeStatusChart.jsx

@@ -2,12 +2,13 @@ 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}
+                data={trimmedData} // Используем обрезанный массив
                 margin={{
                     top: 5, right: 30, left: 20, bottom: 5,
                 }}
@@ -17,13 +18,7 @@ const SystemStatusChart = ({ data }) => {
                 <YAxis domain={[0, 100]} />
                 <Tooltip />
                 <Legend />
-                <Line
-                    type="monotone"
-                    dataKey="status"
-                    stroke="#8884d8"
-                    activeDot={{ r: 8 }}
-                    name=""
-                />
+                <Line type="monotone" dataKey="status" stroke="#8884d8" activeDot={{ r: 8 }} />
             </LineChart>
         </ResponsiveContainer>
     );

src/Charts/SystemStatusChart.jsx

@@ -5,22 +5,6 @@ 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
@@ -32,7 +16,8 @@ const SystemStatusChart = ({ data }) => {
                 <CartesianGrid strokeDasharray="3 3" />
                 <XAxis dataKey="time" />
                 <YAxis domain={[0, 100]} />
-                <Tooltip content={<CustomTooltip />} />
+                <Tooltip />
+                <Legend />
                 <Line type="monotone" dataKey="status" stroke="#8884d8" activeDot={{ r: 8 }} />
             </LineChart>
         </ResponsiveContainer>