test

src/app/api/solar-data/route.js

@@ -1,63 +1,54 @@
-import { MongoClient } from 'mongodb'
+import { NextResponse } from 'next/server'
-
+import { connectToDatabase } from '@/lib/mongodb'
-const uri = process.env.MONGODB_URI
-const client = new MongoClient(uri)
 
 export async function GET(request) {
   const { searchParams } = new URL(request.url)
-  const timeRange = searchParams.get('timeRange') || '1d'
+  const timeRange = searchParams.get('timeRange') || 'today'
-  const dataType = searchParams.get('dataType') || 'all'
 
   try {
-    await client.connect()
+    const { db } = await connectToDatabase()
-    const db = client.db('solar')
     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':
+      case 'week':
-        startDate.setDate(now.getDate() - 3)
-        break
-      case '1w':
         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 = {
+    const data = await collection.find({
-      timestamp: { $gte: startDate }
+      timestamp: { 
+        $gte: startDate,
+        $lte: endDate
       }
+    }).sort({ timestamp: 1 }).toArray()
 
-    if (dataType === 'day') {
+    return NextResponse.json(data)
-      query['$expr'] = {
-        $and: [
-          { $gte: [{ $hour: '$timestamp' }, 6] },
-          { $lt: [{ $hour: '$timestamp' }, 18] }
-        ]
-      }
-    } else if (dataType === 'night') {
-      query['$expr'] = {
-        $or: [
-          { $lt: [{ $hour: '$timestamp' }, 6] },
-          { $gte: [{ $hour: '$timestamp' }, 18] }
-        ]
-      }
-    }
-
-    const data = await collection.find(query).sort({ timestamp: 1 }).toArray()
-    return Response.json(data)
   } catch (error) {
-    return Response.json({ error: error.message }, { status: 500 })
+    console.error('Error fetching data:', error)
-  } finally {
+    return NextResponse.json({ error: 'Failed to fetch data' }, { status: 500 })
-    await client.close()
   }
 } 

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>

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">

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>
+  )
+} 

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 }) {
+export function SolarChart({ data, type, timeRange, onTimeRangeChange }) {
-  const [interval, setInterval] = useState('today')
-
   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: 'batteryVoltage', name: 'Battery Voltage (V)', color: '#3B82F6' },
+          ]
-            { key: 'batteryVoltageFromScc', name: 'SCC Battery Voltage (V)', color: '#8B5CF6' },
+        }
+      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: 'acInputVoltage', name: 'AC Input Voltage (V)', color: '#8B5CF6' },
-            { key: 'acOutputVoltage', name: 'AC Output Voltage (V)', color: '#8B5CF6' },
+            { key: 'acOutputVoltage', name: 'AC Output Voltage (V)', color: '#F59E0B' },
-            { key: 'busVoltage', name: 'Bus 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':
+      case 'current':
-        return 'Battery Statistics'
+        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')}
+            onClick={() => onTimeRangeChange('today')}
-            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+            className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-all duration-200 ${
-              interval === 'today'
+              timeRange === 'today'
-                ? 'bg-blue-500 text-white'
+                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/20'
-                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                : 'bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white'
             }`}
           >
             Today
           </button>
           <button
-            onClick={() => setInterval('yesterday')}
+            onClick={() => onTimeRangeChange('yesterday')}
-            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+            className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-all duration-200 ${
-              interval === 'yesterday'
+              timeRange === 'yesterday'
-                ? 'bg-blue-500 text-white'
+                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/20'
-                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                : 'bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white'
             }`}
           >
             Yesterday
           </button>
           <button
-            onClick={() => setInterval('week')}
+            onClick={() => onTimeRangeChange('week')}
-            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+            className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-all duration-200 ${
-              interval === 'week'
+              timeRange === 'week'
-                ? 'bg-blue-500 text-white'
+                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/20'
-                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                : 'bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white'
             }`}
           >
             Week
           </button>
           <button
-            onClick={() => setInterval('month')}
+            onClick={() => onTimeRangeChange('month')}
-            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+            className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-all duration-200 ${
-              interval === 'month'
+              timeRange === 'month'
-                ? 'bg-blue-500 text-white'
+                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/20'
-                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                : '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"

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">

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 }
+}