first

frontend/components/dashboard/Dashboard.tsx

@@ -1,12 +1,14 @@
 'use client'
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useMemo } from 'react'
 import { useRouter } from 'next/navigation'
 import Sidebar from '../ui/Sidebar'
+import AnimatedBackground from '../ui/AnimatedBackground'
 import useNavigationStore from '../../app/store/navigationStore'
 import ChartCard from './ChartCard'
 import AreaChart from './AreaChart'
 import BarChart from './BarChart'
+import { aggregateChartDataByDays } from '../../lib/chartDataAggregator'
  
 const Dashboard: React.FC = () => {
   const router = useRouter()
@@ -14,7 +16,7 @@ const Dashboard: React.FC = () => {
   const objectTitle = currentObject?.title
 
   const [dashboardAlerts, setDashboardAlerts] = useState<any[]>([])
-  const [chartData, setChartData] = useState<{ timestamp: string; value: number }[]>([])
+  const [rawChartData, setRawChartData] = useState<{ timestamp: string; value: number }[]>([])
   const [sensorTypes] = useState<Array<{code: string, name: string}>>([
     { code: '', name: 'Все датчики' },
     { code: 'GA', name: 'Инклинометр' },
@@ -52,7 +54,7 @@ const Dashboard: React.FC = () => {
         setDashboardAlerts(tableData as any[])
 
         const cd = Array.isArray(payload?.data?.chart_data) ? payload.data.chart_data : []
-        setChartData(cd as any[])
+        setRawChartData(cd as any[])
       } catch (e) {
         console.error('Failed to load dashboard:', e)
       }
@@ -129,14 +131,25 @@ const Dashboard: React.FC = () => {
   const handleTablePeriodChange = (period: string) => {
     setSelectedTablePeriod(period)
   }
+
+  // Агрегируем данные графика в зависимости от периода
+  const chartData = useMemo(() => {
+    return aggregateChartDataByDays(rawChartData, selectedChartPeriod)
+  }, [rawChartData, selectedChartPeriod])
+
+  const interSemiboldStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 600 }
+  const interRegularStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 400 }
  
   return (
-    <div className="flex h-screen bg-[#0e111a]"> 
-      <Sidebar 
-        activeItem={1} // Dashboard  
-      />
+    <div className="relative flex h-screen bg-[#0e111a] overflow-hidden"> 
+      <AnimatedBackground />
+      <div className="relative z-20">
+        <Sidebar 
+          activeItem={1} // Dashboard  
+        />
+      </div>
        
-      <div className="flex-1 flex flex-col"> 
+      <div className="relative z-10 flex-1 flex flex-col"> 
         <header className="bg-[#161824] border-b border-gray-700 px-6 py-4">
           <div className="flex items-center gap-4">
             <button 
@@ -158,7 +171,7 @@ const Dashboard: React.FC = () => {
          
         <div className="flex-1 p-6 overflow-auto"> 
            <div className="mb-6">
-             <h1 className="text-white text-2xl font-semibold mb-6">{objectTitle || 'Объект'}</h1>
+             <h1 style={interSemiboldStyle} className="text-white text-2xl mb-6">{objectTitle || 'Объект'}</h1>
               
              <div className="flex items-center gap-3 mb-6">
                <div className="relative">
@@ -215,7 +228,7 @@ const Dashboard: React.FC = () => {
                <ChartCard 
                  title="Статистика"  
                >
-                 <BarChart data={chartData?.map((d: any) => ({ value: d.value }))} />
+                 <BarChart data={chartData?.map((d: any) => ({ value: d.value, label: d.label }))} />
                </ChartCard>
              </div>
            </div>
@@ -224,7 +237,7 @@ const Dashboard: React.FC = () => {
           <div>
             <div>
               <div className="flex items-center justify-between mb-6">
-                <h2 className="text-white text-2xl font-semibold">Тренды</h2>
+                <h2 style={interSemiboldStyle} className="text-white text-2xl">Тренды</h2>
                 <div className="relative">
                   <select 
                     value={selectedTablePeriod}
@@ -248,63 +261,64 @@ const Dashboard: React.FC = () => {
                   <table className="w-full">
                     <thead>
                       <tr className="border-b border-gray-700">
-                        <th className="text-left text-white font-medium py-3">Детектор</th>
-                        <th className="text-left text-white font-medium py-3">Сообщение</th>
-                        <th className="text-left text-white font-medium py-3">Серьезность</th>
-                        <th className="text-left text-white font-medium py-3">Дата</th>
-                        <th className="text-left text-white font-medium py-3">Решен</th>
+                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Детектор</th>
+                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Сообщение</th>
+                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Серьезность</th>
+                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Дата</th>
+                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Решен</th>
                       </tr>
                     </thead>
                     <tbody>
                       {filteredAlerts.map((alert: any) => (
                         <tr key={alert.id} className="border-b border-gray-800">
-                          <td className="py-3 text-white text-sm">{alert.name}</td>
-                          <td className="py-3 text-gray-300 text-sm">{alert.message}</td>
+                          <td style={interRegularStyle} className="py-3 text-white text-sm">{alert.name}</td>
+                          <td style={interRegularStyle} className="py-3 text-gray-300 text-sm">{alert.message}</td>
                           <td className="py-3">
-                            <span className={`text-sm ${alert.severity === 'critical' ? 'text-red-500' : alert.severity === 'warning' ? 'text-orange-500' : 'text-green-500'}`}>
+                            <span style={interRegularStyle} className={`text-sm ${alert.severity === 'critical' ? 'text-red-500' : alert.severity === 'warning' ? 'text-orange-500' : 'text-green-500'}`}>
                               {alert.severity === 'critical' ? 'Критическое' : alert.severity === 'warning' ? 'Предупреждение' : 'Норма'}
                             </span>
                           </td>
-                          <td className="py-3 text-gray-400 text-sm">{new Date(alert.created_at).toLocaleString()}</td>
+                          <td style={interRegularStyle} className="py-3 text-gray-400 text-sm">{new Date(alert.created_at).toLocaleString()}</td>
                           <td className="py-3">
                             {alert.resolved ? (
-                              <span className="text-sm text-green-500">Да</span>
+                              <span style={interRegularStyle} className="text-sm text-green-500">Да</span>
                             ) : (
-                              <span className="text-sm text-gray-500">Нет</span>
-                            )}
+                              <span style={interRegularStyle} className="text-sm text-gray-500">Нет</span>
+                            )
+                            }
                           </td>
                         </tr>
                       ))}
                     </tbody>
                   </table>
                 </div>
-                
-                {/* Статы */}
-                 <div className="mt-6 grid grid-cols-4 gap-4">
-                   <div className="text-center">
-                     <div className="text-2xl font-bold text-white">{filteredAlerts.length}</div>
-                     <div className="text-sm text-gray-400">Всего</div>
-                   </div>
-                   <div className="text-center">
-                     <div className="text-2xl font-bold text-green-500">{statusCounts.normal}</div>
-                     <div className="text-sm text-gray-400">Норма</div>
-                   </div>
-                   <div className="text-center">
-                     <div className="text-2xl font-bold text-orange-500">{statusCounts.warning}</div>
-                     <div className="text-sm text-gray-400">Предупреждения</div>
-                   </div>
-                   <div className="text-center">
-                     <div className="text-2xl font-bold text-red-500">{statusCounts.critical}</div>
-                     <div className="text-sm text-gray-400">Критические</div>
-                   </div>
-                 </div>
-               </div>
-             </div>
-           </div>
+              </div>
+              
+              {/* Статистика */}
+              <div className="mt-6 grid grid-cols-4 gap-4">
+                <div className="text-center">
+                  <div style={interSemiboldStyle} className="text-2xl text-white">{filteredAlerts.length}</div>
+                  <div style={interRegularStyle} className="text-sm text-gray-400">Всего</div>
+                </div>
+                <div className="text-center">
+                  <div style={interSemiboldStyle} className="text-2xl text-green-500">{statusCounts.normal}</div>
+                  <div style={interRegularStyle} className="text-sm text-gray-400">Норма</div>
+                </div>
+                <div className="text-center">
+                  <div style={interSemiboldStyle} className="text-2xl text-orange-500">{statusCounts.warning}</div>
+                  <div style={interRegularStyle} className="text-sm text-gray-400">Предупреждения</div>
+                </div>
+                <div className="text-center">
+                  <div style={interSemiboldStyle} className="text-2xl text-red-500">{statusCounts.critical}</div>
+                  <div style={interRegularStyle} className="text-sm text-gray-400">Критические</div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   )
 }
 
-export default Dashboard
+export default Dashboard