добавлен фильтр количеста вывода записей на странице История тревог

frontend/components/dashboard/BarChart.tsx

@@ -3,9 +3,9 @@
 import React from 'react'
 
 interface ChartDataPoint {
-  value: number
+  critical?: number
+  warning?: number
   label?: string
-  color?: string
 }
 
 interface BarChartProps {
@@ -22,10 +22,14 @@ const BarChart: React.FC<BarChartProps> = ({ className = '', data }) => {
   const baselineY = margin.top + plotHeight
 
   const barData = (Array.isArray(data) && data.length > 0)
-    ? data.map(d => ({ value: d.value, label: d.label || '', color: d.color || 'rgb(37, 99, 235)' }))
-    : Array.from({ length: 12 }, (_, i) => ({ value: 0, label: `${i + 1}`, color: 'rgb(37, 99, 235)' }))
+    ? data.map(d => ({ 
+        critical: d.critical || 0, 
+        warning: d.warning || 0, 
+        label: d.label || '' 
+      }))
+    : Array.from({ length: 12 }, (_, i) => ({ critical: 0, warning: 0, label: `${i + 1}` }))
 
-  const maxVal = Math.max(...barData.map(b => b.value || 0), 1)
+  const maxVal = Math.max(...barData.map(b => (b.critical || 0) + (b.warning || 0)), 1)
 
   // Генерируем Y-оси метки
   const ySteps = 4
@@ -141,7 +145,7 @@ const BarChart: React.FC<BarChartProps> = ({ className = '', data }) => {
           fontFamily="Arial, sans-serif"
           transform={`rotate(-90, 20, ${margin.top + plotHeight / 2})`}
         >
-          Значение
+          Количество
         </text>
 
         {/* Подпись оси X */}
@@ -156,42 +160,98 @@ const BarChart: React.FC<BarChartProps> = ({ className = '', data }) => {
           Период
         </text>
 
-        {/* Столбцы */}
+        {/* Столбцы - сгруппированные по критическим и предупреждениям */}
         {barData.map((bar, index) => {
           const barWidth = Math.max(30, plotWidth / barData.length - 8)
           const barSpacing = (plotWidth - barWidth * barData.length) / (barData.length - 1 || 1)
-          const x = margin.left + index * (barWidth + barSpacing)
-          const barHeight = (bar.value / maxVal) * plotHeight
-          const y = baselineY - barHeight
+          const groupX = margin.left + index * (barWidth + barSpacing)
+          
+          const totalValue = (bar.critical || 0) + (bar.warning || 0)
+          
+          // Ширина каждого подстолбца
+          const subBarWidth = barWidth / 2 - 2
+
+          // Критический столбец (красный)
+          const criticalHeight = (bar.critical / maxVal) * plotHeight
+          const criticalY = baselineY - criticalHeight
+          
+          // Предупреждение столбец (оранжевый)
+          const warningHeight = (bar.warning / maxVal) * plotHeight
+          const warningY = baselineY - warningHeight
 
           return (
-            <g key={`bar-${index}`}>
-              <rect
-                x={x}
-                y={y}
-                width={barWidth}
-                height={barHeight}
-                fill={bar.color}
-                rx="4"
-                ry="4"
-                opacity="0.9"
-              />
-              {/* Тень для глубины */}
-              <rect
-                x={x}
-                y={y}
-                width={barWidth}
-                height={barHeight}
-                fill="none"
-                stroke={bar.color}
-                strokeWidth="1"
-                rx="4"
-                ry="4"
-                opacity="0.3"
-              />
+            <g key={`bar-group-${index}`}>
+              {/* Критический столбец */}
+              {bar.critical > 0 && (
+                <>
+                  <rect
+                    x={groupX}
+                    y={criticalY}
+                    width={subBarWidth}
+                    height={criticalHeight}
+                    fill="#ef4444"
+                    rx="4"
+                    ry="4"
+                    opacity="0.9"
+                  />
+                  <rect
+                    x={groupX}
+                    y={criticalY}
+                    width={subBarWidth}
+                    height={criticalHeight}
+                    fill="none"
+                    stroke="#ef4444"
+                    strokeWidth="1"
+                    rx="4"
+                    ry="4"
+                    opacity="0.3"
+                  />
+                </>
+              )}
+              
+              {/* Предупреждение столбец */}
+              {bar.warning > 0 && (
+                <>
+                  <rect
+                    x={groupX + subBarWidth + 4}
+                    y={warningY}
+                    width={subBarWidth}
+                    height={warningHeight}
+                    fill="#fb923c"
+                    rx="4"
+                    ry="4"
+                    opacity="0.9"
+                  />
+                  <rect
+                    x={groupX + subBarWidth + 4}
+                    y={warningY}
+                    width={subBarWidth}
+                    height={warningHeight}
+                    fill="none"
+                    stroke="#fb923c"
+                    strokeWidth="1"
+                    rx="4"
+                    ry="4"
+                    opacity="0.3"
+                  />
+                </>
+              )}
             </g>
           )
         })}
+        
+        {/* Легенда */}
+        <g transform={`translate(${width - margin.right - 120}, ${margin.top})`}>
+          <rect x="0" y="0" width="12" height="12" fill="#ef4444" rx="2" />
+          <text x="18" y="10" fontSize="11" fill="rgb(148, 163, 184)" fontFamily="Arial, sans-serif">
+            Критические
+          </text>
+          
+          <rect x="0" y="18" width="12" height="12" fill="#fb923c" rx="2" />
+          <text x="18" y="28" fontSize="11" fill="rgb(148, 163, 184)" fontFamily="Arial, sans-serif">
+            Предупреждения
+          </text>
+        </g>
       </svg>
     </div>
   )