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

frontend/components/dashboard/BarChart.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import React from 'react'
+
+interface ChartDataPoint {
+  value: number
+  label?: string
+  color?: string
+}
+
+interface BarChartProps {
+  className?: string
+  data?: ChartDataPoint[]
+}
+
+const BarChart: React.FC<BarChartProps> = ({ className = '' }) => {
+  const barData = [
+    { value: 80, color: 'rgb(42, 157, 144)' },
+    { value: 65, color: 'rgb(42, 157, 144)' },
+    { value: 90, color: 'rgb(42, 157, 144)' },
+    { value: 45, color: 'rgb(42, 157, 144)' },
+    { value: 75, color: 'rgb(42, 157, 144)' },
+    { value: 55, color: 'rgb(42, 157, 144)' },
+    { value: 85, color: 'rgb(42, 157, 144)' },
+    { value: 70, color: 'rgb(42, 157, 144)' },
+    { value: 60, color: 'rgb(42, 157, 144)' },
+    { value: 95, color: 'rgb(42, 157, 144)' },
+    { value: 40, color: 'rgb(42, 157, 144)' },
+    { value: 80, color: 'rgb(42, 157, 144)' }
+  ]
+
+  return (
+    <div className={`w-full h-full ${className}`}>
+      <svg className="w-full h-full" viewBox="0 0 635 200">
+        <g>
+          {barData.map((bar, index) => {
+            const barWidth = 40
+            const barSpacing = 12
+            const x = index * (barWidth + barSpacing) + 20
+            const barHeight = (bar.value / 100) * 160
+            const y = 180 - barHeight
+            
+            return (
+              <rect
+                key={index}
+                x={x}
+                y={y}
+                width={barWidth}
+                height={barHeight}
+                fill={bar.color}
+                rx="4"
+                ry="4"
+              />
+            )
+          })}
+        </g>
+      </svg>
+    </div>
+  )
+}
+
+export default BarChart