From ed9d828e3b2a5525046f6561c87524ff3cbb0a65 Mon Sep 17 00:00:00 2001 From: lumijiez <59575049+lumijiez@users.noreply.github.com> Date: Wed, 21 May 2025 21:24:40 +0300 Subject: [PATCH] test --- src/app/api/solar-data/route.js | 69 ++++++++++++--------------- src/app/page.js | 47 +++++++------------ src/components/BatteryStatus.js | 82 ++++++++++++++++++++++++++++++++- src/components/Navbar.js | 20 ++++++++ src/components/SolarChart.js | 82 +++++++++++++++++++-------------- src/components/SystemStatus.js | 57 ++++++++++++++++++++++- src/lib/mongodb.js | 31 +++++++++++++ 7 files changed, 281 insertions(+), 107 deletions(-) create mode 100644 src/components/Navbar.js create mode 100644 src/lib/mongodb.js diff --git a/src/app/api/solar-data/route.js b/src/app/api/solar-data/route.js index a66d32a..e99898d 100644 --- 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 }) } } \ No newline at end of file diff --git a/src/app/page.js b/src/app/page.js index 99fe38b..cb3c995 100644 --- 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 (
+
-
- -

- Solar Management Dashboard -

-

Real-time monitoring of your solar system

- - {lastUpdateTime && } -
- - + - + @@ -116,24 +103,24 @@ export default function Dashboard() { animate="visible" className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6" > - - - - - - - - - - - + + + + + + + + + + + - + diff --git a/src/components/BatteryStatus.js b/src/components/BatteryStatus.js index 0985763..4cbc125 100644 --- 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 ( +
+ + + + + +
+ ) + } + return (

Battery Status

@@ -42,7 +81,7 @@ export function BatteryStatus({ data }) { {isCharging && ( @@ -71,6 +111,44 @@ export function BatteryStatus({ data }) {
)}
+
+ + + + + + + + + + { + if (!payload || !payload[0] || !payload[0].payload) return label + return payload[0].payload.timestamp + }} + formatter={(value) => [`${value}%`, 'Battery Level']} + /> + + + +
diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..519bd8d --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,20 @@ +import { LastRefresh } from './LastRefresh' + +export function Navbar({ lastUpdateTime }) { + return ( + + ) +} \ No newline at end of file diff --git a/src/components/SolarChart.js b/src/components/SolarChart.js index 4a983f5..b5a6fd3 100644 --- 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 }) {

{getChartTitle()}