init
This commit is contained in:
lumijiez
3167
package-lock.json
generated
3167
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
@@ -3,18 +3,22 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack",
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"next": "15.3.2"
|
||||
"framer-motion": "^12.12.1",
|
||||
"mongodb": "^6.3.0",
|
||||
"next": "14.1.0",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"recharts": "^2.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"tailwindcss": "^4"
|
||||
"autoprefixer": "^10.4.17",
|
||||
"postcss": "^8.4.35",
|
||||
"tailwindcss": "^3.4.1"
|
||||
}
|
||||
}
|
||||
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
63
src/app/api/solar-data/route.js
Normal file
63
src/app/api/solar-data/route.js
Normal file
@@ -0,0 +1,63 @@
|
||||
import { MongoClient } from '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 dataType = searchParams.get('dataType') || 'all'
|
||||
|
||||
try {
|
||||
await client.connect()
|
||||
const db = client.db('solar')
|
||||
const collection = db.collection('solar_data')
|
||||
|
||||
const now = new Date()
|
||||
let startDate = new Date()
|
||||
|
||||
switch (timeRange) {
|
||||
case '1d':
|
||||
startDate.setDate(now.getDate() - 1)
|
||||
break
|
||||
case '3d':
|
||||
startDate.setDate(now.getDate() - 3)
|
||||
break
|
||||
case '1w':
|
||||
startDate.setDate(now.getDate() - 7)
|
||||
break
|
||||
case '1m':
|
||||
startDate.setMonth(now.getMonth() - 1)
|
||||
break
|
||||
default:
|
||||
startDate.setDate(now.getDate() - 1)
|
||||
}
|
||||
|
||||
let query = {
|
||||
timestamp: { $gte: startDate }
|
||||
}
|
||||
|
||||
if (dataType === 'day') {
|
||||
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 })
|
||||
} finally {
|
||||
await client.close()
|
||||
}
|
||||
}
|
||||
@@ -1,26 +1,218 @@
|
||||
@import "tailwindcss";
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@layer base {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 221.2 83.2% 53.3%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 221.2 83.2% 53.3%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 217.2 91.2% 59.8%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 224.3 76.3% 48%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-gradient {
|
||||
background-size: 200% 200%;
|
||||
animation: gradient 8s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px) rotate(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
animation: shimmer 2s infinite linear;
|
||||
background: linear-gradient(to right, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 100%);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(31, 41, 55, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(75, 85, 99, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(75, 85, 99, 0.7);
|
||||
}
|
||||
|
||||
/* Glass effect */
|
||||
.glass {
|
||||
background: rgba(31, 41, 55, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(75, 85, 99, 0.2);
|
||||
}
|
||||
|
||||
/* Card hover effects */
|
||||
.card-hover {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* Neon glow effects */
|
||||
.neon-glow {
|
||||
box-shadow: 0 0 5px rgba(59, 130, 246, 0.5),
|
||||
0 0 20px rgba(59, 130, 246, 0.3),
|
||||
0 0 40px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.neon-glow:hover {
|
||||
box-shadow: 0 0 10px rgba(59, 130, 246, 0.6),
|
||||
0 0 30px rgba(59, 130, 246, 0.4),
|
||||
0 0 60px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
/* Gradient text animation */
|
||||
.gradient-text {
|
||||
background: linear-gradient(90deg, #3B82F6, #10B981, #3B82F6);
|
||||
background-size: 200% auto;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
animation: gradient 8s linear infinite;
|
||||
}
|
||||
|
||||
/* Button hover effects */
|
||||
.button-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.button-hover:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* Chart animations */
|
||||
.chart-animate {
|
||||
animation: chartFade 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes chartFade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading animation */
|
||||
.loading-dots::after {
|
||||
content: '...';
|
||||
animation: loadingDots 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes loadingDots {
|
||||
0% { content: '.'; }
|
||||
33% { content: '..'; }
|
||||
66% { content: '...'; }
|
||||
}
|
||||
|
||||
@@ -1,29 +1,17 @@
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
export const metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
title: 'Solar Management Dashboard',
|
||||
description: 'Real-time solar system monitoring dashboard',
|
||||
}
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
231
src/app/page.js
231
src/app/page.js
@@ -1,103 +1,144 @@
|
||||
import Image from "next/image";
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { BatteryStatus } from '@/components/BatteryStatus'
|
||||
import { PowerStats } from '@/components/PowerStats'
|
||||
import { SystemStatus } from '@/components/SystemStatus'
|
||||
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'
|
||||
|
||||
export default function Dashboard() {
|
||||
const [data, setData] = useState([])
|
||||
const [timeRange, setTimeRange] = useState('1d')
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/solar-data?timeRange=${timeRange}`)
|
||||
const newData = await response.json()
|
||||
setData(newData)
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
const interval = setInterval(fetchData, 20000)
|
||||
return () => clearInterval(interval)
|
||||
}, [timeRange])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
|
||||
<motion.div
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="w-32 h-32 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="w-24 h-24 border-4 border-emerald-500 border-t-transparent rounded-full animate-spin" style={{ animationDirection: 'reverse' }}></div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const latestData = data[data.length - 1]?.data || {}
|
||||
const lastUpdateTime = data[data.length - 1]?.timestamp?.$date || data[data.length - 1]?.timestamp
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
||||
<li className="mb-2 tracking-[-.01em]">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
|
||||
src/app/page.js
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li className="tracking-[-.01em]">
|
||||
Save and see your changes instantly.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white">
|
||||
<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"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
<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>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<motion.div variants={itemVariants} className="h-full">
|
||||
<BatteryStatus data={latestData} />
|
||||
</motion.div>
|
||||
<motion.div variants={itemVariants} className="h-full">
|
||||
<PowerStats data={latestData} />
|
||||
</motion.div>
|
||||
<motion.div variants={itemVariants} className="h-full">
|
||||
<SystemStatus data={latestData} />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
<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" />
|
||||
</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" />
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
118
src/components/BatteryStatus.js
Normal file
118
src/components/BatteryStatus.js
Normal file
@@ -0,0 +1,118 @@
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export function BatteryStatus({ data }) {
|
||||
const batteryLevel = data.battery_capacity || 0
|
||||
const batteryVoltage = data.battery_voltage || 0
|
||||
const chargingCurrent = data.battery_charging_current || 0
|
||||
const isCharging = data.is_charging_on === 1
|
||||
const isChargingToFloat = data.is_charging_to_float === 1
|
||||
const batteryVoltageFromScc = data.battery_voltage_from_scc || 0
|
||||
const batteryDischargeCurrent = data.battery_discharge_current || 0
|
||||
|
||||
const getBatteryColor = (level) => {
|
||||
if (level >= 80) return 'bg-emerald-500'
|
||||
if (level >= 40) return 'bg-yellow-500'
|
||||
return 'bg-red-500'
|
||||
}
|
||||
|
||||
const getBatteryGradient = (level) => {
|
||||
if (level >= 80) return 'from-emerald-500 to-emerald-400'
|
||||
if (level >= 40) return 'from-yellow-500 to-yellow-400'
|
||||
return 'from-red-500 to-red-400'
|
||||
}
|
||||
|
||||
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>
|
||||
<div className="flex flex-col h-[calc(100%-3rem)]">
|
||||
<div className="relative mb-4">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-300">Battery Level</span>
|
||||
<span className="text-sm font-medium text-gray-300">{batteryLevel}%</span>
|
||||
</div>
|
||||
<div className="relative h-10 bg-gray-700/50 rounded-full overflow-hidden">
|
||||
<motion.div
|
||||
className={`absolute inset-0 bg-gradient-to-r ${getBatteryGradient(batteryLevel)}`}
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${batteryLevel}%` }}
|
||||
transition={{ duration: 1, ease: "easeOut" }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent"
|
||||
animate={{
|
||||
x: ["0%", "100%"],
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
style={{
|
||||
width: "50%",
|
||||
height: "100%",
|
||||
background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)",
|
||||
}}
|
||||
/>
|
||||
{isCharging && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<motion.svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className="w-6 h-6 text-white/80"
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<path fillRule="evenodd" d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z" clipRule="evenodd" />
|
||||
</motion.svg>
|
||||
</div>
|
||||
)}
|
||||
</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">
|
||||
<p className="text-sm text-gray-400">Main Voltage</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{batteryVoltage}</p>
|
||||
<p className="text-sm font-medium text-blue-400">V</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">SCC Voltage</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{batteryVoltageFromScc}</p>
|
||||
<p className="text-sm font-medium text-blue-400">V</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">Charging Current</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{chargingCurrent}</p>
|
||||
<p className="text-sm font-medium text-emerald-400">A</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">Discharge Current</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{batteryDischargeCurrent}</p>
|
||||
<p className="text-sm font-medium text-emerald-400">A</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 mt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-3 h-3 rounded-full ${isCharging ? 'bg-emerald-500 animate-pulse' : 'bg-gray-400'}`} />
|
||||
<span className="text-sm text-gray-300">{isCharging ? 'Charging' : 'Not Charging'}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-3 h-3 rounded-full ${isChargingToFloat ? 'bg-emerald-500' : 'bg-gray-400'}`} />
|
||||
<span className="text-sm text-gray-300">Float Mode</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
39
src/components/LastRefresh.js
Normal file
39
src/components/LastRefresh.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export function LastRefresh({ timestamp }) {
|
||||
const [relativeTime, setRelativeTime] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
const updateRelativeTime = () => {
|
||||
const now = new Date()
|
||||
const lastRefresh = new Date(timestamp)
|
||||
const diffInSeconds = Math.floor((now - lastRefresh) / 1000)
|
||||
|
||||
if (diffInSeconds < 60) {
|
||||
setRelativeTime(`${diffInSeconds} seconds ago`)
|
||||
} else if (diffInSeconds < 3600) {
|
||||
const minutes = Math.floor(diffInSeconds / 60)
|
||||
setRelativeTime(`${minutes} minute${minutes > 1 ? 's' : ''} ago`)
|
||||
} else {
|
||||
const hours = Math.floor(diffInSeconds / 3600)
|
||||
setRelativeTime(`${hours} hour${hours > 1 ? 's' : ''} ago`)
|
||||
}
|
||||
}
|
||||
|
||||
updateRelativeTime()
|
||||
const interval = setInterval(updateRelativeTime, 1000)
|
||||
return () => clearInterval(interval)
|
||||
}, [timestamp])
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex items-center gap-2 text-sm text-gray-400"
|
||||
>
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span>Last updated {relativeTime}</span>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
102
src/components/PowerStats.js
Normal file
102
src/components/PowerStats.js
Normal file
@@ -0,0 +1,102 @@
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
export function PowerStats({ data }) {
|
||||
const acInputVoltage = data.ac_input_voltage || 0
|
||||
const acInputFrequency = data.ac_input_frequency || 0
|
||||
const acOutputVoltage = data.ac_output_voltage || 0
|
||||
const acOutputFrequency = data.ac_output_frequency || 0
|
||||
const acOutputApparentPower = data.ac_output_apparent_power || 0
|
||||
const acOutputActivePower = data.ac_output_active_power || 0
|
||||
const acOutputLoad = data.ac_output_load || 0
|
||||
const busVoltage = data.bus_voltage || 0
|
||||
const pvInputVoltage = data.pv_input_voltage || 0
|
||||
const pvInputCurrent = data.pv_input_current_for_battery || 0
|
||||
const pvInputPower = data.pv_input_power || 0
|
||||
|
||||
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-blue-500/10">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold mb-4 text-white">Power Statistics</h2>
|
||||
<div className="flex flex-col h-[calc(100%-3rem)]">
|
||||
<div className="grid grid-cols-2 gap-3 flex-grow">
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">AC Input Voltage</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{acInputVoltage}</p>
|
||||
<p className="text-sm font-medium text-blue-400">V</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">AC Input Frequency</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{acInputFrequency}</p>
|
||||
<p className="text-sm font-medium text-purple-400">Hz</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">AC Output Voltage</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{acOutputVoltage}</p>
|
||||
<p className="text-sm font-medium text-blue-400">V</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">AC Output Frequency</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{acOutputFrequency}</p>
|
||||
<p className="text-sm font-medium text-purple-400">Hz</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">AC Apparent Power</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{acOutputApparentPower}</p>
|
||||
<p className="text-sm font-medium text-amber-400">VA</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">AC Active Power</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{acOutputActivePower}</p>
|
||||
<p className="text-sm font-medium text-amber-400">W</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">AC Output Load</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{acOutputLoad}</p>
|
||||
<p className="text-sm font-medium text-amber-400">%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">Bus Voltage</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{busVoltage}</p>
|
||||
<p className="text-sm font-medium text-blue-400">V</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">PV Input Voltage</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{pvInputVoltage}</p>
|
||||
<p className="text-sm font-medium text-blue-400">V</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<p className="text-sm text-gray-400">PV Input Current</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{pvInputCurrent}</p>
|
||||
<p className="text-sm font-medium text-emerald-400">A</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm col-span-2">
|
||||
<p className="text-sm text-gray-400">PV Input Power</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className="text-lg font-semibold text-white">{pvInputPower}</p>
|
||||
<p className="text-sm font-medium text-amber-400">W</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
249
src/components/SolarChart.js
Normal file
249
src/components/SolarChart.js
Normal file
@@ -0,0 +1,249 @@
|
||||
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')
|
||||
|
||||
const getFilteredData = (data) => {
|
||||
const now = new Date()
|
||||
const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate())
|
||||
const startOfYesterday = new Date(startOfDay)
|
||||
startOfYesterday.setDate(startOfDay.getDate() - 1)
|
||||
const startOfWeek = new Date(startOfDay)
|
||||
startOfWeek.setDate(startOfDay.getDate() - 7)
|
||||
const startOfMonth = new Date(startOfDay)
|
||||
startOfMonth.setMonth(startOfDay.getMonth() - 1)
|
||||
|
||||
let startTime
|
||||
switch (interval) {
|
||||
case 'today':
|
||||
startTime = startOfDay
|
||||
break
|
||||
case 'yesterday':
|
||||
startTime = startOfYesterday
|
||||
break
|
||||
case 'week':
|
||||
startTime = startOfWeek
|
||||
break
|
||||
case 'month':
|
||||
startTime = startOfMonth
|
||||
break
|
||||
default:
|
||||
startTime = startOfDay
|
||||
}
|
||||
|
||||
return data.filter(item => {
|
||||
const dateStr = item.timestamp.$date || item.timestamp
|
||||
const date = new Date(dateStr)
|
||||
return date >= startTime && date <= now
|
||||
})
|
||||
}
|
||||
|
||||
const formatData = (data) => {
|
||||
return getFilteredData(data).map(item => {
|
||||
// Handle both MongoDB date format and regular date string
|
||||
const dateStr = item.timestamp.$date || item.timestamp
|
||||
const date = new Date(dateStr)
|
||||
|
||||
// Check if date is valid
|
||||
if (isNaN(date.getTime())) {
|
||||
console.error('Invalid date:', dateStr)
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
timestamp: date.toLocaleString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: true
|
||||
}),
|
||||
batteryLevel: item.data.battery_capacity,
|
||||
batteryVoltage: item.data.battery_voltage,
|
||||
batteryVoltageFromScc: item.data.battery_voltage_from_scc,
|
||||
chargingCurrent: item.data.battery_charging_current,
|
||||
batteryDischargeCurrent: item.data.battery_discharge_current,
|
||||
pvInputPower: item.data.pv_input_power,
|
||||
acOutputPower: item.data.ac_output_active_power,
|
||||
acOutputApparentPower: item.data.ac_output_apparent_power,
|
||||
acOutputLoad: item.data.ac_output_load,
|
||||
inverterTemp: item.data.inverter_heat_sink_temperature,
|
||||
pvInputVoltage: item.data.pv_input_voltage,
|
||||
acInputVoltage: item.data.ac_input_voltage,
|
||||
acOutputVoltage: item.data.ac_output_voltage,
|
||||
busVoltage: item.data.bus_voltage
|
||||
}
|
||||
}).filter(Boolean) // Remove any null entries from invalid dates
|
||||
}
|
||||
|
||||
const getChartConfig = () => {
|
||||
switch(type) {
|
||||
case 'power':
|
||||
return {
|
||||
lines: [
|
||||
{ key: 'pvInputPower', name: 'PV Input Power (W)', color: '#10B981' },
|
||||
{ key: 'acOutputPower', name: 'AC Output Power (W)', color: '#3B82F6' },
|
||||
{ key: 'acOutputApparentPower', name: 'AC Apparent Power (VA)', color: '#F59E0B' },
|
||||
{ key: 'acOutputLoad', name: 'AC Output Load (%)', color: '#EF4444' }
|
||||
]
|
||||
}
|
||||
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: 'chargingCurrent', name: 'Charging Current (A)', color: '#F59E0B' },
|
||||
{ key: 'batteryDischargeCurrent', name: 'Discharge Current (A)', color: '#EF4444' }
|
||||
]
|
||||
}
|
||||
case 'voltage':
|
||||
return {
|
||||
lines: [
|
||||
{ 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' }
|
||||
]
|
||||
}
|
||||
case 'temperature':
|
||||
return {
|
||||
lines: [
|
||||
{ key: 'inverterTemp', name: 'Inverter Temperature (°C)', color: '#EF4444' }
|
||||
]
|
||||
}
|
||||
default:
|
||||
return {
|
||||
lines: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const config = getChartConfig()
|
||||
const formattedData = formatData(data)
|
||||
|
||||
const getChartTitle = () => {
|
||||
switch(type) {
|
||||
case 'power':
|
||||
return 'Power Statistics'
|
||||
case 'battery':
|
||||
return 'Battery Statistics'
|
||||
case 'voltage':
|
||||
return 'Voltage Statistics'
|
||||
case 'temperature':
|
||||
return 'Temperature Statistics'
|
||||
default:
|
||||
return 'Statistics'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
|
||||
<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'
|
||||
}`}
|
||||
>
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
Month
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[400px] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={formattedData} margin={{ top: 10, right: 20, left: 0, bottom: 10 }}>
|
||||
<defs>
|
||||
{config.lines.map(line => (
|
||||
<linearGradient key={line.key} id={`gradient-${line.key}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={line.color} stopOpacity={0.3}/>
|
||||
<stop offset="95%" stopColor={line.color} stopOpacity={0}/>
|
||||
</linearGradient>
|
||||
))}
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#374151" opacity={0.1} />
|
||||
<XAxis
|
||||
dataKey="timestamp"
|
||||
stroke="#6B7280"
|
||||
tick={{ fill: '#6B7280', fontSize: 11 }}
|
||||
tickLine={{ stroke: '#6B7280' }}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="#6B7280"
|
||||
tick={{ fill: '#6B7280', fontSize: 11 }}
|
||||
tickLine={{ stroke: '#6B7280' }}
|
||||
/>
|
||||
<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' }}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{
|
||||
paddingTop: '0.5rem',
|
||||
color: '#6B7280',
|
||||
fontSize: '10px'
|
||||
}}
|
||||
/>
|
||||
{config.lines.map(line => (
|
||||
<Line
|
||||
key={line.key}
|
||||
type="monotone"
|
||||
dataKey={line.key}
|
||||
name={line.name}
|
||||
stroke={line.color}
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
activeDot={{ r: 6, fill: line.color }}
|
||||
animationDuration={1500}
|
||||
animationBegin={0}
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
57
src/components/SystemStatus.js
Normal file
57
src/components/SystemStatus.js
Normal file
@@ -0,0 +1,57 @@
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
export function SystemStatus({ data }) {
|
||||
const inverterTemp = data.inverter_heat_sink_temperature || 0
|
||||
const isLoadOn = data.is_load_on === 1
|
||||
const isSystemOn = data.is_switched_on === 1
|
||||
const isSccCharging = data.is_scc_charging_on === 1
|
||||
const isAcCharging = data.is_ac_charging_on === 1
|
||||
|
||||
const getTemperatureColor = (temp) => {
|
||||
if (temp >= 60) return 'text-red-500'
|
||||
if (temp >= 45) return 'text-yellow-500'
|
||||
return 'text-emerald-500'
|
||||
}
|
||||
|
||||
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>
|
||||
<div className="grid grid-cols-2 gap-3 flex-grow">
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-3 h-3 rounded-full ${isLoadOn ? 'bg-emerald-500' : 'bg-gray-400'}`} />
|
||||
<span className="text-sm text-gray-300">Load Status</span>
|
||||
</div>
|
||||
<p className="text-lg font-semibold text-white mt-2">{isLoadOn ? 'On' : 'Off'}</p>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-3 h-3 rounded-full ${isSystemOn ? 'bg-emerald-500' : 'bg-gray-400'}`} />
|
||||
<span className="text-sm text-gray-300">System Status</span>
|
||||
</div>
|
||||
<p className="text-lg font-semibold text-white mt-2">{isSystemOn ? 'On' : 'Off'}</p>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-3 h-3 rounded-full ${isSccCharging ? 'bg-emerald-500' : 'bg-gray-400'}`} />
|
||||
<span className="text-sm text-gray-300">SCC Charging</span>
|
||||
</div>
|
||||
<p className="text-lg font-semibold text-white mt-2">{isSccCharging ? 'Active' : 'Inactive'}</p>
|
||||
</div>
|
||||
<div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-3 h-3 rounded-full ${isAcCharging ? 'bg-emerald-500' : 'bg-gray-400'}`} />
|
||||
<span className="text-sm text-gray-300">AC Charging</span>
|
||||
</div>
|
||||
<p className="text-lg font-semibold text-white mt-2">{isAcCharging ? 'Active' : 'Inactive'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
14
src/components/ui/button.js
Normal file
14
src/components/ui/button.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import * as React from "react"
|
||||
|
||||
const Button = React.forwardRef(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={`inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button }
|
||||
12
src/components/ui/card.js
Normal file
12
src/components/ui/card.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import * as React from "react"
|
||||
|
||||
const Card = React.forwardRef(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Card.displayName = "Card"
|
||||
|
||||
export { Card }
|
||||
17
src/components/ui/progress.js
Normal file
17
src/components/ui/progress.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import * as React from "react"
|
||||
|
||||
const Progress = React.forwardRef(({ className, value, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`relative h-2 w-full overflow-hidden rounded-full bg-gray-200 ${className}`}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
className="h-full w-full flex-1 transition-all"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
Progress.displayName = "Progress"
|
||||
|
||||
export { Progress }
|
||||
54
src/components/ui/select.js
Normal file
54
src/components/ui/select.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import * as React from "react"
|
||||
|
||||
const Select = React.forwardRef(({ children, ...props }, ref) => (
|
||||
<select
|
||||
ref={ref}
|
||||
className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</select>
|
||||
))
|
||||
Select.displayName = "Select"
|
||||
|
||||
const SelectTrigger = React.forwardRef(({ children, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
))
|
||||
SelectTrigger.displayName = "SelectTrigger"
|
||||
|
||||
const SelectValue = React.forwardRef(({ children, ...props }, ref) => (
|
||||
<span ref={ref} className="text-sm" {...props}>
|
||||
{children}
|
||||
</span>
|
||||
))
|
||||
SelectValue.displayName = "SelectValue"
|
||||
|
||||
const SelectContent = React.forwardRef(({ children, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className="relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
))
|
||||
SelectContent.displayName = "SelectContent"
|
||||
|
||||
const SelectItem = React.forwardRef(({ children, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
))
|
||||
SelectItem.displayName = "SelectItem"
|
||||
|
||||
export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem }
|
||||
48
tailwind.config.js
Normal file
48
tailwind.config.js
Normal file
@@ -0,0 +1,48 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user