src/Charts2/Components/LineChartComponent.jsx

@@ -8,37 +8,26 @@ import {
   Tooltip,
   Legend,
   ResponsiveContainer,
-  ReferenceArea,
-  ReferenceLine
+  ReferenceArea
 } from 'recharts';
-import { Tag } from 'antd';
-
-// Цвета для граничных значений
-const rangeColors = {
-  1: '#4CAF50', // зеленый (норма)
-  2: '#FFC107', // желтый (предупреждение)
-  3: '#FF9800', // оранжевый (опасно)
-  4: '#F44336'  // красный (критично)
-};
 
+// ====== Вспомогательные функции ======
 const getStatusColor = (status) => {
-  switch (status) {
-    case 0: return '#757575';   // серый (нет связи)
-    case 1: return rangeColors[1]; // зеленый
-    case 2: return rangeColors[2]; // желтый
-    case 3: return rangeColors[3]; // оранжевый
-    case 4: return rangeColors[4]; // красный
-    default: return '#BDBDBD';  // серый по умолчанию
-  }
-};
+    switch(status) {
+      case 0: return '#757575';   // тёмно-серый
+      case 1: return '#00C853';   // ярко-зелёный
+      case 2: return '#FF6D00';   // ярко-оранжевый
+      case 3: return '#D50000';   // ярко-красный
+      default: return '#BDBDBD';  // fallback-серый
+    }
+  };
 
 const getStatusText = (status) => {
   return {
     0: 'Нет соединения',
     1: 'Норма',
     2: 'Отклонение',
-    3: 'Критично',
-    4: 'Авария'
+    3: 'Критично'
   }[status] || 'Неизвестно';
 };
 
@@ -47,8 +36,7 @@ const getStatusDescription = (status) => {
     0: 'Устройство не отвечает',
     1: 'Параметры в норме',
     2: 'Обнаружены отклонения от нормы',
-    3: 'Критическое состояние системы',
-    4: 'Авария'
+    3: 'Критическое состояние системы'
   }[status] || 'Статус неизвестен';
 };
 
@@ -110,15 +98,14 @@ const CustomTooltip = ({ active, payload, label }) => {
   );
 };
 
+// ====== Основной компонент ======
 const LineChartComponent = ({
   data,
   title,
   description,
   metaInfo,
   dataKey = 'value',
-  height = 400,
-  ranges = [], 
-  statusBoundaries = [] 
+  height = 400
 }) => {
 
   const getStatusAreas = () => {
@@ -141,91 +128,11 @@ const LineChartComponent = ({
 
     return areas.map((area, i) => (
       <ReferenceArea
-  key={`area-${i}`}
-  x1={area.start}
-  x2={area.end}
-  fill={getStatusColor(area.status)}
-  fillOpacity={0.12}
-  stroke={getStatusColor(area.status)}
-  strokeWidth={1}
-  strokeOpacity={0.5}
-/>
-
-    ));
-  };
-
-  const renderRangeLines = () => {
-    if (!ranges || ranges.length === 0) return null;
-  
-    // Собираем только уникальные граничные значения, исключая дубликаты на стыках диапазонов
-    const boundaryValues = [];
-    ranges.forEach((range, index) => {
-      // Для первого диапазона добавляем и min и max
-      if (index === 0) {
-        boundaryValues.push(range.min);
-        boundaryValues.push(range.max);
-      } 
-      // Для остальных добавляем только max (min будет совпадать с max предыдущего)
-      else {
-        boundaryValues.push(range.max);
-      }
-    });
-  
-    return boundaryValues.map((value, index) => {
-      // Находим диапазон, к которому принадлежит эта граница
-      const range = ranges.find(r => r.min === value || r.max === value);
-      const status = range ? range.status : 1;
-      
-      const lineStyle = {
-        1: { strokeWidth: 1, strokeDasharray: "none", opacity: 0.7 },
-        2: { strokeWidth: 2, strokeDasharray: "none", opacity: 0.9 },
-        3: { strokeWidth: 2, strokeDasharray: "none", opacity: 1 },
-        4: { strokeWidth: 2, strokeDasharray: "none", opacity: 1 }
-      }[status] || { strokeWidth: 1, strokeDasharray: "3 3", opacity: 0.7 };
-  
-      return (
-        <ReferenceLine
-          key={`line-${value}`} // Используем значение как ключ для стабильности
-          y={value}
-          stroke={rangeColors[status] || '#888'}
-          strokeWidth={lineStyle.strokeWidth}
-          strokeDasharray={lineStyle.strokeDasharray}
-          strokeOpacity={lineStyle.opacity}
-          ifOverflow="extendDomain"
-          label={{
-            value: value.toFixed(1),
-            position: 'right',
-            fill: rangeColors[status] || '#888',
-            fontSize: 12,
-            fontWeight: 'bold',
-            background: 'rgba(255, 255, 255, 0.9)',
-            padding: [4, 6],
-            borderRadius: 4,
-            stroke: 'none',
-            boxShadow: '0 0 2px rgba(0,0,0,0.1)',
-            textAnchor: 'start'
-          }}
-        />
-      );
-    });
-  };
-
-  const renderStatusBoundaries = () => {
-    if (!statusBoundaries || statusBoundaries.length === 0) return null;
-
-    return statusBoundaries.map((boundary, index) => (
-      <ReferenceLine
-        key={`boundary-${index}`}
-        x={boundary.timestamp}
-        stroke={getStatusColor(boundary.status)}
-        strokeWidth={2}
-        strokeDasharray="5 3"
-        label={{
-          value: boundary.label || `Граница ${index + 1}`,
-          position: 'top',
-          fill: getStatusColor(boundary.status),
-          fontSize: 12
-        }}
+        key={`area-${i}`}
+        x1={area.start}
+        x2={area.end}
+        fill={getStatusColor(area.status)}
+        fillOpacity={0.1}
       />
     ));
   };
@@ -242,80 +149,31 @@ const LineChartComponent = ({
         </div>
       )}
 
-      {/* Легенда граничных значений */}
-      {ranges.length > 0 && (
-        <div style={{ marginBottom: 10 }}>
-          <span style={{ marginRight: 8, fontWeight: 'bold' }}>Диапазоны:</span>
-          {ranges
-            .sort((a, b) => a.min - b.min)
-            .map((range, index) => (
-              <Tag
-                key={`range-tag-${index}`}
-                color={rangeColors[range.status] || 'default'}
-                style={{
-                  marginRight: 5,
-                  marginBottom: 5,
-                  border: `1px solid ${rangeColors[range.status]}`,
-                  background: `${rangeColors[range.status]}20`,
-                  color: '#000000'
-                }}
-              >
-                {range.min.toFixed(0)}-{range.max.toFixed(0)} (Ур. {range.status})
-              </Tag>
-            ))}
-        </div>
-      )}
-
-      {/* Легенда границ статусов */}
-      {statusBoundaries.length > 0 && (
-        <div style={{ marginBottom: 10 }}>
-          <span style={{ marginRight: 8, fontWeight: 'bold' }}>Границы статусов:</span>
-          {statusBoundaries.map((boundary, index) => (
-            <Tag
-              key={`boundary-tag-${index}`}
-              color={getStatusColor(boundary.status)}
-              style={{
-                marginRight: 5,
-                marginBottom: 5,
-                border: `1px solid ${getStatusColor(boundary.status)}`,
-                background: `${getStatusColor(boundary.status)}20`
-              }}
-            >
-              {boundary.label || `Граница ${index + 1}`} ({new Date(boundary.timestamp).toLocaleString()})
-            </Tag>
-          ))}
-        </div>
-      )}
-
-      <ResponsiveContainer width="100%" height="75%">
-      <LineChart
-  data={data}
-  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
->
-  <CartesianGrid strokeDasharray="3 3" />
-  <XAxis
-    dataKey="timestamp"
-    tickFormatter={(ts) => new Date(ts).toLocaleTimeString()}
-  />
-  <YAxis />
-  {renderRangeLines()}                
-  {renderStatusBoundaries()}
-  {getStatusAreas()}                 
-  <Tooltip content={<CustomTooltip />} />
-  <Legend />
-  <Line
-    type="monotone"
-    dataKey={dataKey}
-    stroke="#8884d8"
-    strokeWidth={2}
-    dot={<StatusIndicator />}
-    activeDot={{ r: 8 }}
-    isAnimationActive={false}
-    name={title}
-  />
-</LineChart>
-
-
+      <ResponsiveContainer width="100%" height="80%">
+        <LineChart
+          data={data}
+          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis
+            dataKey="timestamp"
+            tickFormatter={(ts) => new Date(ts).toLocaleTimeString()}
+          />
+          <YAxis />
+          {getStatusAreas()}
+          <Tooltip content={<CustomTooltip />} />
+          <Legend />
+          <Line
+            type="monotone"
+            dataKey={dataKey}
+            stroke="#8884d8"
+            strokeWidth={2}
+            dot={<StatusIndicator />}
+            activeDot={{ r: 8 }}
+            isAnimationActive={false}
+            name={title}
+          />
+        </LineChart>
       </ResponsiveContainer>
 
       {/* Легенда статусов */}
@@ -327,17 +185,16 @@ const LineChartComponent = ({
         flexWrap: 'wrap'
       }}>
         {[
-          { status: 1, label: '1 - Норма' },
-          { status: 2, label: '2 - Отклонение' },
-          { status: 3, label: '3 - Критично' },
-          { status: 4, label: '4 - Авария' },
-          { status: 0, label: '0 - Нет связи' }
+          { status: 1, label: '1 - Норма', color: '#4CAF50' },
+          { status: 2, label: '2 - Отклонение', color: '#FF9800' },
+          { status: 3, label: '3 - Критично', color: '#F44336' },
+          { status: 0, label: '0 - Нет связи', color: '#888' }
         ].map(item => (
           <div key={item.status} style={{ display: 'flex', alignItems: 'center' }}>
             <div style={{
               width: 16,
               height: 16,
-              backgroundColor: getStatusColor(item.status),
+              backgroundColor: item.color,
               marginRight: 8,
               borderRadius: '50%'
             }}></div>

src/Charts2/Components/StatusLogTable.jsx

@@ -1,3 +1,4 @@
+// src/Components/StatusLogTable.jsx
 import React from 'react';
 import {
   Table,
@@ -11,13 +12,11 @@ import {
   Typography
 } from '@mui/material';
 
-// Используем те же цвета, что и в LineChartComponent
 const statusColors = {
-  '0': '#757575',   // серый (нет связи)
-  '1': '#4CAF50',   // зеленый (норма)
-  '2': '#FFC107',   // желтый (отклонение)
-  '3': '#FF9800',   // оранжевый (критично)
-  '4': '#F44336'    // красный (авария)
+  '0': 'default',
+  '1': 'success',
+  '2': 'warning',
+  '3': 'error'
 };
 
 const StatusLogTable = ({ logs }) => {
@@ -45,12 +44,7 @@ const StatusLogTable = ({ logs }) => {
               <TableCell>
                 <Chip 
                   label={getStatusText(log.status)}
-                  style={{ 
-                    backgroundColor: statusColors[log.status],
-                    color: '#ffffff', // белый текст для лучшей читаемости
-                    fontWeight: 'bold',
-                    border: 'none'
-                  }}
+                  color={statusColors[log.status] || 'default'}
                   size="small"
                 />
               </TableCell>
@@ -68,14 +62,13 @@ const StatusLogTable = ({ logs }) => {
   );
 };
 
-// Вспомогательные функции (оставляем без изменений)
+// Вспомогательные функции
 const getStatusText = (status) => {
   const statusMap = {
     '0': 'Нет соединения',
     '1': 'Норма',
     '2': 'Отклонение',
-    '3': 'Критично',
-    '4': 'Авария'
+    '3': 'Критично'
   };
   return statusMap[status] || 'Неизвестно';
 };
@@ -85,8 +78,7 @@ const getStatusDescription = (status) => {
     '0': 'Устройство не отвечает',
     '1': 'Параметры в норме',
     '2': 'Обнаружены отклонения от нормы',
-    '3': 'Критическое состояние системы',
-    '4': 'Аварийное состояние системы'
+    '3': 'Критическое состояние системы'
   };
   return descriptions[status] || 'Статус неизвестен';
 };

src/Charts2/PrometheusChart.jsx

@@ -8,14 +8,13 @@ import StatusLogTable from './Components/StatusLogTable';
 import { Box, IconButton, Tooltip as MuiTooltip } from '@mui/material';
 import { ListAlt } from '@mui/icons-material';
 
-const PrometheusChart = ({ metricInfo, chartHeight = 580 }) => {
+const PrometheusChart = ({ metricInfo, chartHeight = 560 }) => {
     const {
         name: metricName,
         filters = {},
         title = metricName,
         description,
-        context = {},
-        ranges = []
+        context = {}
     } = metricInfo || {};
 
     const { device, source_id } = context;
@@ -45,7 +44,7 @@ const PrometheusChart = ({ metricInfo, chartHeight = 580 }) => {
                 timestamp: item.timestamp,
                 value: parseFloat(item.value),
                 name: item.__name__ || metricName,
-                status: parseInt(item.status) || 0,
+                status: item.status?.toString() || '0',
                 device: item.device?.trim() || null,
                 source_id: item.source_id || null,
                 description: item.description || description
@@ -53,19 +52,6 @@ const PrometheusChart = ({ metricInfo, chartHeight = 580 }) => {
             .sort((a, b) => a.timestamp - b.timestamp);
     };
 
-    const downsampleData = (data, maxPoints = 500) => {
-        if (data.length <= maxPoints) return data;
-    
-        const ratio = Math.ceil(data.length / maxPoints);
-        return data.filter((_, index) => index % ratio === 0);
-    };
-
-    const calculateStep = (startTime, endTime, maxPoints = 10000) => {
-        const seconds = (endTime.getTime() - startTime.getTime()) / 1000;
-        return Math.max(Math.ceil(seconds / maxPoints), 1); // в секундах
-    };
-    
-
     // Обновляем логи при изменении данных
     useEffect(() => {
         if (chartData.length > 0) {
@@ -91,17 +77,15 @@ const PrometheusChart = ({ metricInfo, chartHeight = 580 }) => {
                 ...(source_id && { source_id: source_id.toString() })
             };
 
-            const step = calculateStep(start, end);
-const data = await metricsService.fetchMetricsRange(
-    metricName,
-    Math.floor(start.getTime() / 1000),
-    Math.floor(end.getTime() / 1000),
-    step,
-    extendedFilters
-);
+            const data = await metricsService.fetchMetricsRange(
+                metricName,
+                Math.floor(start.getTime() / 1000),
+                Math.floor(end.getTime() / 1000),
+                15,
+                extendedFilters
+            );
 
-
-            const formattedData = downsampleData(formatMetricData(data), 100); //КОЛИЧЕСТВО ТОЧЕК НА ГРАФИКЕ 
+            const formattedData = formatMetricData(data);
             if (formattedData.length > 0) {
                 setMetricMeta({
                     type: data[0]?.type,
@@ -255,13 +239,6 @@ const data = await metricsService.fetchMetricsRange(
                                 device,
                                 source_id
                             }}
-                            ranges={ranges}
-                        /*ranges={ranges.length > 0 ? ranges : [
-                            { min: 0, max: 60, status: 1 },
-                            { min: 60, max: 80, status: 2 },
-                            { min: 80, max: 90, status: 3 },
-                            { min: 90, max: 100, status: 4 }
-                        ]}*/
                         />
                         {showLogs && (
                             <StatusLogTable logs={statusLogs} />

src/Components/Layout/Dashboard.jsx

@@ -84,6 +84,7 @@ const Dashboard = ({ isDarkMode, setIsDarkMode }) => {
     const tabId = `tab_${item.id}`;
     const tabTitle = item.title || 'Новая вкладка';
 
+    // Если это метрика, создаём специальный контент с графиком
     const tabContent = item.metric
       ? <MetricTabContent
         metricInfo={{
@@ -91,7 +92,6 @@ const Dashboard = ({ isDarkMode, setIsDarkMode }) => {
           filters: item.filters,
           title: item.title,
           description: item.description,
-          ranges: item.ranges, 
           context: {
             device: item.filters?.device,
             source_id: item.filters?.source_id,
@@ -110,14 +110,13 @@ const Dashboard = ({ isDarkMode, setIsDarkMode }) => {
         content: tabContent,
         type: item.metric ? 'metric' : 'menuItem',
         metric: item.metric,
-        filters: item.filters,
-        ranges: item.ranges 
+        filters: item.filters
       };
       handleOpenTab(newTab);
     } else {
       setActiveTab(tabId);
     }
-};
+  };
 
   // Вспомогательная функция для получения всех дочерних элементов
   const getAllChildren = (node) => {