Разработка интерфейса фронт

2025-09-05 03:16:17 +03:00
parent 6c2ea027a4
commit 4d6b7b48d7
35 changed files with 3806 additions and 276 deletions
--- a/frontend/components/dashboard/DetectorChart.tsx
+++ b/frontend/components/dashboard/DetectorChart.tsx
@@ -0,0 +1,103 @@
+'use client'
+
+import React from 'react'
+
+interface DetectorDataPoint {
+  value: number
+  label?: string
+  timestamp?: string
+  status?: string
+}
+
+interface DetectorChartProps {
+  className?: string
+  data?: DetectorDataPoint[]
+  type?: 'line' | 'bar'
+}
+
+const DetectorChart: React.FC<DetectorChartProps> = ({ 
+  className = '', 
+  type = 'line' 
+}) => {
+  if (type === 'bar') {
+    const barData = [
+      { value: 85, label: 'Янв' },
+      { value: 70, label: 'Фев' },
+      { value: 90, label: 'Мар' },
+      { value: 65, label: 'Апр' },
+      { value: 80, label: 'Май' },
+      { value: 95, label: 'Июн' }
+    ]
+
+    return (
+      <div className={`w-full h-full ${className}`}>
+        <svg className="w-full h-full" viewBox="0 0 400 200">
+          <g>
+            {barData.map((bar, index) => {
+              const barWidth = 50
+              const barSpacing = 15
+              const x = index * (barWidth + barSpacing) + 20
+              const barHeight = (bar.value / 100) * 150
+              const y = 160 - barHeight
+              
+              return (
+                <g key={index}>
+                  <rect
+                    x={x}
+                    y={y}
+                    width={barWidth}
+                    height={barHeight}
+                    fill="rgb(42, 157, 144)"
+                    rx="4"
+                    ry="4"
+                  />
+                  <text
+                    x={x + barWidth / 2}
+                    y={180}
+                    textAnchor="middle"
+                    fill="#71717a"
+                    fontSize="12"
+                  >
+                    {bar.label}
+                  </text>
+                </g>
+              )
+            })}
+          </g>
+        </svg>
+      </div>
+    )
+  }
+ 
+  return (
+    <div className={`w-full h-full ${className}`}>
+      <svg className="w-full h-full" viewBox="0 0 400 200">
+        <defs>
+          <linearGradient id="detectorGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="rgb(231, 110, 80)" stopOpacity="0.3" />
+            <stop offset="100%" stopColor="rgb(231, 110, 80)" stopOpacity="0" />
+          </linearGradient>
+        </defs> 
+        <path
+          d="M20,150 L80,120 L140,100 L200,80 L260,90 L320,70 L380,60 L380,180 L20,180 Z"
+          fill="url(#detectorGradient)"
+        /> 
+        <path
+          d="M20,150 L80,120 L140,100 L200,80 L260,90 L320,70 L380,60"
+          stroke="rgb(231, 110, 80)"
+          strokeWidth="2"
+          fill="none"
+        /> 
+        <circle cx="20" cy="150" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="80" cy="120" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="140" cy="100" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="200" cy="80" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="260" cy="90" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="320" cy="70" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="380" cy="60" r="3" fill="rgb(231, 110, 80)" />
+      </svg>
+    </div>
+  )
+}
+
+export default DetectorChart