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

frontend/components/dashboard/AreaChart.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import React from 'react'
+
+interface ChartDataPoint {
+  value: number
+  label?: string
+  timestamp?: string
+}
+
+interface AreaChartProps {
+  className?: string
+  data?: ChartDataPoint[]
+}
+
+const AreaChart: React.FC<AreaChartProps> = ({ className = '' }) => {
+  return (
+    <div className={`w-full h-full ${className}`}>
+      <svg className="w-full h-full" viewBox="0 0 635 200">
+        <defs>
+          <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="rgb(42, 157, 144)" stopOpacity="0.3" />
+            <stop offset="100%" stopColor="rgb(42, 157, 144)" stopOpacity="0" />
+          </linearGradient>
+        </defs> 
+        <path
+          d="M0,180 L100,120 L200,140 L300,80 L400,60 L500,100 L635,90 L635,200 L0,200 Z"
+          fill="url(#areaGradient)"
+        /> 
+        <path
+          d="M0,180 L100,120 L200,140 L300,80 L400,60 L500,100 L635,90"
+          stroke="rgb(42, 157, 144)"
+          strokeWidth="2"
+          fill="none"
+        /> 
+        <circle cx="0" cy="180" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="100" cy="120" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="200" cy="140" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="300" cy="80" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="400" cy="60" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="500" cy="100" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="635" cy="90" r="3" fill="rgb(42, 157, 144)" />
+      </svg>
+    </div>
+  )
+}
+
+export default AreaChart