test

2025-05-21 21:24:40 +03:00
parent 13cc494111
commit ed9d828e3b
7 changed files with 281 additions and 107 deletions
--- a/src/app/api/solar-data/route.js
+++ b/src/app/api/solar-data/route.js
@@ -1,63 +1,54 @@
-import { MongoClient } from 'mongodb'
-
-const uri = process.env.MONGODB_URI
-const client = new MongoClient(uri)
+import { NextResponse } from 'next/server'
+import { connectToDatabase } from '@/lib/mongodb'

 export async function GET(request) {
  const { searchParams } = new URL(request.url)
-  const timeRange = searchParams.get('timeRange') || '1d'
-  const dataType = searchParams.get('dataType') || 'all'
+  const timeRange = searchParams.get('timeRange') || 'today'

  try {
-    await client.connect()
-    const db = client.db('solar')
+    const { db } = await connectToDatabase()
    const collection = db.collection('solar_data')
-
+    
    const now = new Date()
    let startDate = new Date()
+    let endDate = new Date()

    switch (timeRange) {
-      case '1d':
+      case 'today':
+        startDate.setHours(0, 0, 0, 0)
+        endDate = now
+        break
+      case 'yesterday':
        startDate.setDate(now.getDate() - 1)
+        startDate.setHours(0, 0, 0, 0)
+        endDate = new Date(startDate)
+        endDate.setHours(23, 59, 59, 999)
        break
-      case '3d':
-        startDate.setDate(now.getDate() - 3)
-        break
-      case '1w':
+      case 'week':
        startDate.setDate(now.getDate() - 7)
+        startDate.setHours(0, 0, 0, 0)
+        endDate = now
        break
-      case '1m':
+      case 'month':
        startDate.setMonth(now.getMonth() - 1)
+        startDate.setHours(0, 0, 0, 0)
+        endDate = now
        break
      default:
-        startDate.setDate(now.getDate() - 1)
+        startDate.setHours(0, 0, 0, 0)
+        endDate = now
    }

-    let query = {
-      timestamp: { $gte: startDate }
-    }
-
-    if (dataType === 'day') {
-      query['$expr'] = {
-        $and: [
-          { $gte: [{ $hour: '$timestamp' }, 6] },
-          { $lt: [{ $hour: '$timestamp' }, 18] }
-        ]
+    const data = await collection.find({
+      timestamp: { 
+        $gte: startDate,
+        $lte: endDate
      }
-    } else if (dataType === 'night') {
-      query['$expr'] = {
-        $or: [
-          { $lt: [{ $hour: '$timestamp' }, 6] },
-          { $gte: [{ $hour: '$timestamp' }, 18] }
-        ]
-      }
-    }
+    }).sort({ timestamp: 1 }).toArray()

-    const data = await collection.find(query).sort({ timestamp: 1 }).toArray()
-    return Response.json(data)
+    return NextResponse.json(data)
  } catch (error) {
-    return Response.json({ error: error.message }, { status: 500 })
-  } finally {
-    await client.close()
+    console.error('Error fetching data:', error)
+    return NextResponse.json({ error: 'Failed to fetch data' }, { status: 500 })
  }
 } 
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -9,10 +9,11 @@ import { SolarChart } from '@/components/SolarChart'
 import { LastRefresh } from '@/components/LastRefresh'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { motion, AnimatePresence } from 'framer-motion'
+import { Navbar } from '@/components/Navbar'

 export default function Dashboard() {
  const [data, setData] = useState([])
-  const [timeRange, setTimeRange] = useState('1d')
+  const [timeRange, setTimeRange] = useState('today')
  const [loading, setLoading] = useState(true)

  const fetchData = async () => {
@@ -77,22 +78,8 @@ export default function Dashboard() {

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white">
+      <Navbar lastUpdateTime={lastUpdateTime} />
      <div className="max-w-[1400px] mx-auto p-4 sm:p-6 space-y-6">
-        <div className="flex flex-col items-center">
-          <motion.div 
-            initial={{ y: -20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ duration: 0.5 }}
-            className="text-center mb-4"
-          >
-            <h1 className="text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-400 via-emerald-400 to-blue-400 bg-clip-text text-transparent animate-gradient mb-4">
-              Solar Management Dashboard
-            </h1>
-            <p className="text-gray-400 text-lg">Real-time monitoring of your solar system</p>
-          </motion.div>
-          {lastUpdateTime && <LastRefresh timestamp={lastUpdateTime} />}
-        </div>
-
        <motion.div 
          variants={containerVariants}
          initial="hidden"
@@ -100,13 +87,13 @@ export default function Dashboard() {
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6"
        >
          <motion.div variants={itemVariants} className="h-full">
-            <BatteryStatus data={latestData} />
+            <BatteryStatus data={latestData} history={data} />
          </motion.div>
          <motion.div variants={itemVariants} className="h-full">
            <PowerStats data={latestData} />
          </motion.div>
          <motion.div variants={itemVariants} className="h-full">
-            <SystemStatus data={latestData} />
+            <SystemStatus data={latestData} history={data} />
          </motion.div>
        </motion.div>

@@ -116,24 +103,24 @@ export default function Dashboard() {
          animate="visible"
          className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6"
        >
-          <motion.div variants={itemVariants} className="h-full">
-            <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-blue-500/10">
-              <SolarChart data={data} type="power" />
-            </Card>
-          </motion.div>
-          <motion.div variants={itemVariants} className="h-full">
-            <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-emerald-500/10">
-              <SolarChart data={data} type="battery" />
-            </Card>
-          </motion.div>
          <motion.div variants={itemVariants} className="h-full">
            <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-purple-500/10">
-              <SolarChart data={data} type="voltage" />
+              <SolarChart data={data} type="voltage" timeRange={timeRange} onTimeRangeChange={setTimeRange} />
+            </Card>
+          </motion.div>
+          <motion.div variants={itemVariants} className="h-full">
+            <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-blue-500/10">
+              <SolarChart data={data} type="power" timeRange={timeRange} onTimeRangeChange={setTimeRange} />
+            </Card>
+          </motion.div>
+          <motion.div variants={itemVariants} className="h-full">
+            <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-amber-500/10">
+              <SolarChart data={data} type="current" timeRange={timeRange} onTimeRangeChange={setTimeRange} />
            </Card>
          </motion.div>
          <motion.div variants={itemVariants} className="h-full">
            <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-red-500/10">
-              <SolarChart data={data} type="temperature" />
+              <SolarChart data={data} type="temperature" timeRange={timeRange} onTimeRangeChange={setTimeRange} />
            </Card>
          </motion.div>
        </motion.div>
--- a/src/components/BatteryStatus.js
+++ b/src/components/BatteryStatus.js
@@ -1,8 +1,9 @@
 import { Card } from '@/components/ui/card'
 import { Progress } from '@/components/ui/progress'
 import { motion } from 'framer-motion'
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'

-export function BatteryStatus({ data }) {
+export function BatteryStatus({ data, history }) {
  const batteryLevel = data.battery_capacity || 0
  const batteryVoltage = data.battery_voltage || 0
  const chargingCurrent = data.battery_charging_current || 0
@@ -10,6 +11,7 @@ export function BatteryStatus({ data }) {
  const isChargingToFloat = data.is_charging_to_float === 1
  const batteryVoltageFromScc = data.battery_voltage_from_scc || 0
  const batteryDischargeCurrent = data.battery_discharge_current || 0
+  const inverterTemp = data.inverter_heat_sink_temperature || 0

  const getBatteryColor = (level) => {
    if (level >= 80) return 'bg-emerald-500'
@@ -23,6 +25,43 @@ export function BatteryStatus({ data }) {
    return 'from-red-500 to-red-400'
  }

+  const formatHistoryData = (history) => {
+    return history.map(item => {
+      const dateStr = item.timestamp.$date || item.timestamp
+      const date = new Date(dateStr)
+      return {
+        timestamp: date.toLocaleString('en-US', {
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: true
+        }),
+        capacity: item.data.battery_capacity
+      }
+    })
+  }
+
+  const MiniChart = ({ data, dataKey, color, height = 40 }) => {
+    if (!data || data.length === 0) return null
+    return (
+      <div className={`h-[${height}px] w-full mt-1`}>
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={data} margin={{ top: 2, right: 2, left: 2, bottom: 2 }}>
+            <Line
+              type="monotone"
+              dataKey={dataKey}
+              stroke={color}
+              strokeWidth={1}
+              dot={false}
+              isAnimationActive={false}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    )
+  }
+
  return (
    <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-emerald-500/10">
      <h2 className="text-xl sm:text-2xl font-semibold mb-4 text-white">Battery Status</h2>
@@ -42,7 +81,7 @@ export function BatteryStatus({ data }) {
            <motion.div
              className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent"
              animate={{
-                x: ["0%", "100%"],
+                x: ["0%", `${batteryLevel}%`],
              }}
              transition={{
                duration: 2,
@@ -53,6 +92,7 @@ export function BatteryStatus({ data }) {
                width: "50%",
                height: "100%",
                background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)",
+                maxWidth: `${batteryLevel}%`,
              }}
            />
            {isCharging && (
@@ -71,6 +111,44 @@ export function BatteryStatus({ data }) {
              </div>
            )}
          </div>
+          <div className="h-16 mt-2">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={formatHistoryData(history)} margin={{ top: 5, right: 5, left: 0, bottom: 5 }}>
+                <defs>
+                  <linearGradient id="capacityGradient" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#10B981" stopOpacity={0.3}/>
+                    <stop offset="95%" stopColor="#10B981" stopOpacity={0}/>
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" stroke="#374151" opacity={0.1} />
+                <Tooltip 
+                  contentStyle={{ 
+                    backgroundColor: '#1F2937',
+                    border: 'none',
+                    borderRadius: '0.5rem',
+                    color: '#F3F4F6',
+                    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                    fontSize: '11px'
+                  }}
+                  labelStyle={{ color: '#F3F4F6', fontSize: '11px' }}
+                  labelFormatter={(label, payload) => {
+                    if (!payload || !payload[0] || !payload[0].payload) return label
+                    return payload[0].payload.timestamp
+                  }}
+                  formatter={(value) => [`${value}%`, 'Battery Level']}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="capacity"
+                  name="Battery Level"
+                  stroke="#10B981"
+                  strokeWidth={2}
+                  dot={false}
+                  activeDot={{ r: 4, fill: '#10B981' }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
        </div>
        <div className="grid grid-cols-2 gap-3 flex-grow">
          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -0,0 +1,20 @@
+import { LastRefresh } from './LastRefresh'
+
+export function Navbar({ lastUpdateTime }) {
+  return (
+    <nav className="bg-gray-800/50 backdrop-blur-sm border-b border-gray-700">
+      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 py-4">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+          <h1 className="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-blue-400 via-emerald-400 to-blue-400 bg-clip-text text-transparent animate-gradient">
+            Solar Management Dashboard
+          </h1>
+          {lastUpdateTime && (
+            <div className="flex items-center gap-2 text-gray-400">
+              <LastRefresh timestamp={lastUpdateTime} />
+            </div>
+          )}
+        </div>
+      </div>
+    </nav>
+  )
+} 
--- a/src/components/SolarChart.js
+++ b/src/components/SolarChart.js
@@ -2,9 +2,7 @@ import { Card } from '@/components/ui/card'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'
 import { useState } from 'react'

-export function SolarChart({ data, type }) {
-  const [interval, setInterval] = useState('today')
-
+export function SolarChart({ data, type, timeRange, onTimeRangeChange }) {
  const getFilteredData = (data) => {
    const now = new Date()
    const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate())
@@ -16,7 +14,7 @@ export function SolarChart({ data, type }) {
    startOfMonth.setMonth(startOfDay.getMonth() - 1)

    let startTime
-    switch (interval) {
+    switch (timeRange) {
      case 'today':
        startTime = startOfDay
        break
@@ -92,9 +90,12 @@ export function SolarChart({ data, type }) {
      case 'battery':
        return {
          lines: [
-            { key: 'batteryLevel', name: 'Battery Level (%)', color: '#10B981' },
-            { key: 'batteryVoltage', name: 'Battery Voltage (V)', color: '#3B82F6' },
-            { key: 'batteryVoltageFromScc', name: 'SCC Battery Voltage (V)', color: '#8B5CF6' },
+            { key: 'batteryVoltage', name: 'Battery Voltage (V)', color: '#3B82F6' }
+          ]
+        }
+      case 'current':
+        return {
+          lines: [
            { key: 'chargingCurrent', name: 'Charging Current (A)', color: '#F59E0B' },
            { key: 'batteryDischargeCurrent', name: 'Discharge Current (A)', color: '#EF4444' }
          ]
@@ -102,10 +103,11 @@ export function SolarChart({ data, type }) {
      case 'voltage':
        return {
          lines: [
+            { key: 'batteryVoltage', name: 'Battery Voltage (V)', color: '#3B82F6' },
            { key: 'pvInputVoltage', name: 'PV Input Voltage (V)', color: '#10B981' },
-            { key: 'acInputVoltage', name: 'AC Input Voltage (V)', color: '#3B82F6' },
-            { key: 'acOutputVoltage', name: 'AC Output Voltage (V)', color: '#8B5CF6' },
-            { key: 'busVoltage', name: 'Bus Voltage (V)', color: '#F59E0B' }
+            { key: 'acInputVoltage', name: 'AC Input Voltage (V)', color: '#8B5CF6' },
+            { key: 'acOutputVoltage', name: 'AC Output Voltage (V)', color: '#F59E0B' },
+            { key: 'busVoltage', name: 'Bus Voltage (V)', color: '#EF4444' }
          ]
        }
      case 'temperature':
@@ -128,12 +130,12 @@ export function SolarChart({ data, type }) {
    switch(type) {
      case 'power':
        return 'Power Statistics'
-      case 'battery':
-        return 'Battery Statistics'
+      case 'current':
+        return 'Battery Current'
      case 'voltage':
-        return 'Voltage Statistics'
+        return 'System Voltage'
      case 'temperature':
-        return 'Temperature Statistics'
+        return 'Temp Stats'
      default:
        return 'Statistics'
    }
@@ -145,41 +147,41 @@ export function SolarChart({ data, type }) {
        <h2 className="text-xl sm:text-2xl font-semibold text-white">{getChartTitle()}</h2>
        <div className="flex flex-wrap gap-2">
          <button
-            onClick={() => setInterval('today')}
-            className={`px-3 py-1 text-sm rounded-md transition-colors ${
-              interval === 'today'
-                ? 'bg-blue-500 text-white'
-                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            onClick={() => onTimeRangeChange('today')}
+            className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-all duration-200 ${
+              timeRange === 'today'
+                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/20'
+                : 'bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white'
            }`}
          >
            Today
          </button>
          <button
-            onClick={() => setInterval('yesterday')}
-            className={`px-3 py-1 text-sm rounded-md transition-colors ${
-              interval === 'yesterday'
-                ? 'bg-blue-500 text-white'
-                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            onClick={() => onTimeRangeChange('yesterday')}
+            className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-all duration-200 ${
+              timeRange === 'yesterday'
+                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/20'
+                : 'bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white'
            }`}
          >
            Yesterday
          </button>
          <button
-            onClick={() => setInterval('week')}
-            className={`px-3 py-1 text-sm rounded-md transition-colors ${
-              interval === 'week'
-                ? 'bg-blue-500 text-white'
-                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            onClick={() => onTimeRangeChange('week')}
+            className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-all duration-200 ${
+              timeRange === 'week'
+                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/20'
+                : 'bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white'
            }`}
          >
            Week
          </button>
          <button
-            onClick={() => setInterval('month')}
-            className={`px-3 py-1 text-sm rounded-md transition-colors ${
-              interval === 'month'
-                ? 'bg-blue-500 text-white'
-                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            onClick={() => onTimeRangeChange('month')}
+            className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-all duration-200 ${
+              timeRange === 'month'
+                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/20'
+                : 'bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white'
            }`}
          >
            Month
@@ -203,6 +205,18 @@ export function SolarChart({ data, type }) {
              stroke="#6B7280"
              tick={{ fill: '#6B7280', fontSize: 11 }}
              tickLine={{ stroke: '#6B7280' }}
+              interval="preserveStartEnd"
+              minTickGap={50}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                if (timeRange === 'today' || timeRange === 'yesterday') {
+                  return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
+                } else if (timeRange === 'week') {
+                  return date.toLocaleDateString('en-US', { weekday: 'short', hour: 'numeric', hour12: true })
+                } else {
+                  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+                }
+              }}
            />
            <YAxis 
              stroke="#6B7280"
--- a/src/components/SystemStatus.js
+++ b/src/components/SystemStatus.js
@@ -1,6 +1,7 @@
 import { Card } from '@/components/ui/card'
+import { LineChart, Line, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'

-export function SystemStatus({ data }) {
+export function SystemStatus({ data, history }) {
  const inverterTemp = data.inverter_heat_sink_temperature || 0
  const isLoadOn = data.is_load_on === 1
  const isSystemOn = data.is_switched_on === 1
@@ -13,13 +14,65 @@ export function SystemStatus({ data }) {
    return 'text-emerald-500'
  }

+  const formatHistoryData = (history) => {
+    if (!history) return []
+    return history.map(item => {
+      const date = new Date(item.timestamp.$date || item.timestamp)
+      return {
+        timestamp: date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }),
+        temperature: item.data.inverter_heat_sink_temperature
+      }
+    })
+  }
+
  return (
    <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-purple-500/10">
      <h2 className="text-xl sm:text-2xl font-semibold mb-4 text-white">System Status</h2>
      <div className="flex flex-col h-[calc(100%-3rem)]">
        <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm mb-4">
          <p className="text-sm text-gray-400">Inverter Temperature</p>
-          <p className={`text-lg font-semibold ${getTemperatureColor(inverterTemp)}`}>{inverterTemp}°C</p>
+          <div className="flex items-baseline gap-1">
+            <p className={`text-lg font-semibold ${getTemperatureColor(inverterTemp)}`}>{inverterTemp}</p>
+            <p className="text-sm font-medium text-red-400">°C</p>
+          </div>
+          <div className="h-16 mt-2">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={formatHistoryData(history)} margin={{ top: 5, right: 5, left: 0, bottom: 5 }}>
+                <defs>
+                  <linearGradient id="tempGradient" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#EF4444" stopOpacity={0.3}/>
+                    <stop offset="95%" stopColor="#EF4444" stopOpacity={0}/>
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" stroke="#374151" opacity={0.1} />
+                <Tooltip 
+                  contentStyle={{ 
+                    backgroundColor: '#1F2937',
+                    border: 'none',
+                    borderRadius: '0.5rem',
+                    color: '#F3F4F6',
+                    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                    fontSize: '11px'
+                  }}
+                  labelStyle={{ color: '#F3F4F6', fontSize: '11px' }}
+                  formatter={(value) => [`${value}°C`, 'Temperature']}
+                  labelFormatter={(label, payload) => {
+                    if (!payload || !payload[0] || !payload[0].payload) return label
+                    return payload[0].payload.timestamp
+                  }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="temperature"
+                  stroke="#EF4444"
+                  strokeWidth={1}
+                  dot={false}
+                  isAnimationActive={false}
+                  activeDot={{ r: 4, fill: '#EF4444' }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
        </div>
        <div className="grid grid-cols-2 gap-3 flex-grow">
          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
--- a/src/lib/mongodb.js
+++ b/src/lib/mongodb.js
@@ -0,0 +1,31 @@
+import { MongoClient } from 'mongodb'
+
+if (!process.env.MONGODB_URI) {
+  throw new Error('Please add your Mongo URI to .env.local')
+}
+
+const uri = process.env.MONGODB_URI
+const options = {}
+
+let client
+let clientPromise
+
+if (process.env.NODE_ENV === 'development') {
+  // In development mode, use a global variable so that the value
+  // is preserved across module reloads caused by HMR (Hot Module Replacement).
+  if (!global._mongoClientPromise) {
+    client = new MongoClient(uri, options)
+    global._mongoClientPromise = client.connect()
+  }
+  clientPromise = global._mongoClientPromise
+} else {
+  // In production mode, it's best to not use a global variable.
+  client = new MongoClient(uri, options)
+  clientPromise = client.connect()
+}
+
+export async function connectToDatabase() {
+  const client = await clientPromise
+  const db = client.db('solar')
+  return { client, db }
+}