Compare commits
No commits in common. "master" and "v.0.0.5" have entirely different histories.
@ -38,8 +38,7 @@ jobs:
|
||||
tags: |
|
||||
rooftopenergy/powermeter-frontend:${{ steps.extract_tag.outputs.tag }}
|
||||
build-args: |
|
||||
NEXT_PUBLIC_FASTAPI_URL=${{ secrets.NEXT_PUBLIC_FASTAPI_URL }}
|
||||
NEXT_PUBLIC_GOOGLE_DRIVE_FOLDER_ID=${{ secrets.NEXT_PUBLIC_GOOGLE_DRIVE_FOLDER_ID }}
|
||||
NEXT_PUBLIC_FASTAPI_URL=${{ secrets.NEXT_PUBLIC_FASTAPI_URL }}
|
||||
|
||||
- name: SSH and Deploy
|
||||
uses: appleboy/ssh-action@master
|
||||
|
||||
@ -8,10 +8,8 @@ WORKDIR /app
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
# Build-time public env hook
|
||||
ARG NEXT_PUBLIC_FASTAPI_URL\
|
||||
NEXT_PUBLIC_GOOGLE_DRIVE_FOLDER_ID
|
||||
ENV NEXT_PUBLIC_FASTAPI_URL=${NEXT_PUBLIC_FASTAPI_URL}\
|
||||
NEXT_PUBLIC_GOOGLE_DRIVE_FOLDER_ID=${NEXT_PUBLIC_GOOGLE_DRIVE_FOLDER_ID}
|
||||
ARG NEXT_PUBLIC_FASTAPI_URL
|
||||
ENV NEXT_PUBLIC_FASTAPI_URL=${NEXT_PUBLIC_FASTAPI_URL}
|
||||
|
||||
# 1) Install deps with caching
|
||||
COPY package.json package-lock.json* ./
|
||||
|
||||
@ -14,7 +14,6 @@ import KpiBottom from '@/components/dashboards/kpibottom';
|
||||
import { formatAddress } from '@/app/utils/formatAddress';
|
||||
import { formatCrmTimestamp } from '@/app/utils/datetime';
|
||||
import LoggingControlCard from '@/components/dashboards/LoggingControl';
|
||||
import { buildExportUrl, getFilenameFromCD } from "@/utils/export";
|
||||
|
||||
const EnergyLineChart = dynamic(() => import('@/components/dashboards/EnergyLineChart'), { ssr: false });
|
||||
const MonthlyBarChart = dynamic(() => import('@/components/dashboards/MonthlyBarChart'), { ssr: false });
|
||||
@ -41,7 +40,7 @@ type CrmProject = {
|
||||
custom_mobile_phone_no?: string | null;
|
||||
};
|
||||
|
||||
const API = process.env.NEXT_PUBLIC_FASTAPI_URL;
|
||||
const API = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
// Adjust this to your FastAPI route
|
||||
const START_LOGGING_ENDPOINT = (siteId: string) =>
|
||||
@ -337,95 +336,6 @@ useEffect(() => {
|
||||
}
|
||||
};
|
||||
|
||||
// helpers
|
||||
// helpers
|
||||
const ymd = (d: Date) => d.toISOString().slice(0, 10);
|
||||
const excelUrl = (site: string, device: string, fn: 'grid' | 'solar', dateYMD: string) =>
|
||||
`${API}/excel-fs/${encodeURIComponent(site)}/${encodeURIComponent(device)}/${fn}/${dateYMD}.xlsx`;
|
||||
|
||||
// popup state
|
||||
const [isDownloadOpen, setIsDownloadOpen] = useState(false);
|
||||
const [meter, setMeter] = useState('01'); // ADW300 device id
|
||||
const [fn, setFn] = useState<'grid' | 'solar'>('grid'); // which function
|
||||
const [downloadDate, setDownloadDate] = useState(ymd(new Date())); // YYYY-MM-DD
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
|
||||
// action
|
||||
// util: parse filename from Content-Disposition
|
||||
function getFilenameFromCD(h: string | null): string | null {
|
||||
if (!h) return null;
|
||||
// filename*=UTF-8''name.ext (RFC 5987)
|
||||
const star = /filename\*\s*=\s*([^']*)''([^;]+)/i.exec(h);
|
||||
if (star && star[2]) return decodeURIComponent(star[2]);
|
||||
|
||||
// filename="name.ext" or filename=name.ext
|
||||
const plain = /filename\s*=\s*("?)([^";]+)\1/i.exec(h);
|
||||
if (plain && plain[2]) return plain[2];
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const downloadExcel = async () => {
|
||||
if (!selectedProject) return;
|
||||
try {
|
||||
setDownloading(true);
|
||||
|
||||
// Prefer the simple day-based export
|
||||
const url = buildExportUrl({
|
||||
baseUrl: process.env.NEXT_PUBLIC_FASTAPI_URL,
|
||||
site: selectedProject.name,
|
||||
suffix: fn,
|
||||
serial: meter?.trim() || undefined,
|
||||
day: downloadDate, // "YYYY-MM-DD"
|
||||
});
|
||||
|
||||
|
||||
const resp = await fetch(url, { credentials: "include" });
|
||||
|
||||
if (!resp.ok) {
|
||||
// server might return JSON error; try to surface it nicely
|
||||
const ctype = resp.headers.get("Content-Type") || "";
|
||||
let msg = `HTTP ${resp.status}`;
|
||||
if (ctype.includes("application/json")) {
|
||||
const j = await resp.json().catch(() => null);
|
||||
if (j?.detail) msg = String(j.detail);
|
||||
} else {
|
||||
const t = await resp.text().catch(() => "");
|
||||
if (t) msg = t;
|
||||
}
|
||||
throw new Error(msg);
|
||||
}
|
||||
|
||||
const blob = await resp.blob();
|
||||
|
||||
// 1) use server-provided filename if present
|
||||
const cd = resp.headers.get("Content-Disposition");
|
||||
let downloadName = getFilenameFromCD(cd);
|
||||
|
||||
// 2) client-side fallback (date-only as requested)
|
||||
if (!downloadName) {
|
||||
const serialPart = meter?.trim() ? meter.trim() : "ALL";
|
||||
downloadName = `${selectedProject.name}_${serialPart}_${fn}_${downloadDate}.xlsx`;
|
||||
}
|
||||
|
||||
const a = document.createElement("a");
|
||||
const href = URL.createObjectURL(blob);
|
||||
a.href = href;
|
||||
a.download = downloadName;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
URL.revokeObjectURL(href);
|
||||
setIsDownloadOpen(false);
|
||||
} catch (e: any) {
|
||||
alert(`Download failed: ${e?.message ?? e}`);
|
||||
} finally {
|
||||
setDownloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// ---------- RENDER ----------
|
||||
if (!authChecked) {
|
||||
return <div>Checking authentication…</div>;
|
||||
@ -552,151 +462,10 @@ const downloadExcel = async () => {
|
||||
<button onClick={handlePDFExport} className="text-sm lg:text-lg btn-primary">
|
||||
Export Chart Images to PDF
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setIsDownloadOpen(true)}
|
||||
className="text-sm lg:text-lg btn-primary"
|
||||
>
|
||||
Download Excel Log
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)}
|
||||
|
||||
{isDownloadOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
onKeyDown={(e) => e.key === 'Escape' && setIsDownloadOpen(false)}
|
||||
>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50"
|
||||
onClick={() => setIsDownloadOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<div className="relative w-full max-w-lg mx-4 rounded-2xl bg-white dark:bg-rtgray-800 shadow-2xl">
|
||||
<div className="p-5 sm:p-6 border-b border-black/5 dark:border-white/10">
|
||||
<h3 className="text-lg font-semibold text-black/90 dark:text-white">
|
||||
Download Excel Log
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-black/60 dark:text-white/60">
|
||||
Choose device, function, and date to export the .xlsx generated by the logger.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-5 sm:p-6 space-y-5">
|
||||
{/* Site (read-only preview) */}
|
||||
<div>
|
||||
<label className="block text-sm opacity-80 mb-1 dark:text-white">Site</label>
|
||||
<div className="px-3 py-2 rounded-lg bg-black/5 dark:bg-white/5 text-sm truncate dark:text-white">
|
||||
{selectedProject?.project_name || selectedProject?.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Device + Function */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm opacity-80 mb-1 dark:text-white">Meter (Device)</label>
|
||||
<input
|
||||
value={meter}
|
||||
onChange={(e) => setMeter(e.target.value)}
|
||||
placeholder="01"
|
||||
className="input input-bordered w-full pl-2 rounded-lg"
|
||||
/>
|
||||
<p className="mt-1 text-xs opacity-70 dark:text-white">
|
||||
Matches topic: <code>ADW300/<site>/<b>{meter || '01'}</b>/…</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm opacity-80 mb-1 dark:text-white">Function</label>
|
||||
<div className="flex rounded-xl overflow-hidden border border-black/10 dark:border-white/10">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFn('grid')}
|
||||
className={`flex-1 px-3 py-2 text-sm ${
|
||||
fn === 'grid'
|
||||
? 'bg-rtyellow-200 text-black'
|
||||
: 'bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 dark:text-white'
|
||||
}`}
|
||||
>
|
||||
Grid
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFn('solar')}
|
||||
className={`flex-1 px-3 py-2 text-sm ${
|
||||
fn === 'solar'
|
||||
? 'bg-rtyellow-200 text-black'
|
||||
: 'bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 dark:text-white'
|
||||
}`}
|
||||
>
|
||||
Solar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Date + quick picks */}
|
||||
<div>
|
||||
<label className="block text-sm opacity-80 mb-1 dark:text-white">Date</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="date"
|
||||
value={downloadDate}
|
||||
onChange={(e) => setDownloadDate(e.target.value)}
|
||||
className="input input-bordered w-48 pl-2 rounded-lg"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="px-3 py-1 rounded-full text-xs border border-black/10 dark:border-white/15 hover:bg-black/5 dark:hover:bg-white/10 dark:text-white"
|
||||
onClick={() => setDownloadDate(ymd(new Date()))}
|
||||
>
|
||||
Today
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="px-3 py-1 rounded-full text-xs border border-black/10 dark:border-white/15 hover:bg-black/5 dark:hover:bg:white/10 dark:text-white"
|
||||
onClick={() => {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() - 1);
|
||||
setDownloadDate(ymd(d));
|
||||
}}
|
||||
>
|
||||
Yesterday
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-5 sm:p-6 flex justify-end gap-3 border-t border-black/5 dark:border-white/10">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary bg-red-500 hover:bg-red-600 border-transparent"
|
||||
onClick={() => setIsDownloadOpen(false)}
|
||||
disabled={downloading}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary border-transparent"
|
||||
onClick={downloadExcel}
|
||||
disabled={downloading || !meter || !downloadDate}
|
||||
>
|
||||
{downloading ? 'Preparing…' : 'Download'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
|
||||
@ -16,7 +16,7 @@ type CrmProject = {
|
||||
custom_mobile_phone_no?: string | null;
|
||||
};
|
||||
|
||||
const API = process.env.NEXT_PUBLIC_FASTAPI_URL;
|
||||
const API = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
const SitesPage = () => {
|
||||
const [projects, setProjects] = useState<CrmProject[]>([]);
|
||||
|
||||
@ -11,7 +11,7 @@ export default function LoginPage() {
|
||||
const [ready, setReady] = useState(false); // gate to avoid UI flash
|
||||
|
||||
// Use ONE client-exposed API env var everywhere
|
||||
const API = process.env.NEXT_PUBLIC_FASTAPI_URL;
|
||||
const API = process.env.NEXT_PUBLIC_FASTAPI_URL || 'http://127.0.0.1:8000';
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
@ -55,7 +55,7 @@ const RegisterPage = (props: Props) => {
|
||||
<div className="mt-6 text-sm text-gray-200 dark:text-gray-300">
|
||||
Already have an account ?{" "}
|
||||
<Link
|
||||
href="/login"
|
||||
href="/register"
|
||||
className="text-yellow-400 font-semibold underline transition hover:text-white"
|
||||
>
|
||||
SIGN IN
|
||||
|
||||
261
app/(defaults)/chint/inverters/[id]/page.tsx
Normal file
261
app/(defaults)/chint/inverters/[id]/page.tsx
Normal file
@ -0,0 +1,261 @@
|
||||
'use client';
|
||||
|
||||
import PanelCodeHighlight from '@/components/panel-code-highlight'
|
||||
import React, { Fragment, useEffect, useState } from 'react';
|
||||
import { Tab } from '@headlessui/react';
|
||||
import IconHome from '@/components/icon/icon-home';
|
||||
import IconUser from '@/components/icon/icon-user';
|
||||
import IconPhone from '@/components/icon/icon-phone';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useParams } from 'next/navigation';
|
||||
import axios from 'axios';
|
||||
|
||||
type Props = {}
|
||||
|
||||
const InverterViewPage = (props: Props) => {
|
||||
const [isMounted, setIsMounted] = useState(false)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const params = useParams()
|
||||
const [inverter, setInverter] = useState<any>({})
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
fetchData()
|
||||
}, [])
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
if (!params || !params.id) {
|
||||
throw new Error("Invalid params or params.id is missing");
|
||||
}
|
||||
const res = await axios.get(`https://api-a.fomware.com.cn/asset/v1/list?type=2&key=${params.id.toString()}`, {
|
||||
headers: {
|
||||
"Authorization": "Bearer " + process.env.NEXT_PUBLIC_CHINT_TOKEN
|
||||
}
|
||||
})
|
||||
console.log("res", res.data.data.devices[0])
|
||||
setInverter(res.data.data.devices[0])
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{loading ? <p>Loading...</p> : (
|
||||
<>
|
||||
<PanelCodeHighlight title={params?.id?.toString() || ""}>
|
||||
<div className="mb-5">
|
||||
{isMounted && (
|
||||
<Tab.Group>
|
||||
<Tab.List className="mt-3 flex flex-wrap border-b border-white-light dark:border-[#191e3a]">
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Brief
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Chart
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
<div className="active pt-5">
|
||||
<p className="mb-3 text-base font-semibold">Last Updated ( 2025-02-24 16:03:10 +0800 )</p>
|
||||
|
||||
<blockquote className="rounded-br-md rounded-tr-md border-l-2 !border-l-primary bg-white py-2 px-2 text-black dark:border-[#060818] dark:bg-[#060818]">
|
||||
<div className="flex items-start">
|
||||
<p className="m-0 font-semibold text-sm not-italic text-[#515365] dark:text-white-light">Basic Information</p>
|
||||
</div>
|
||||
</blockquote>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-gray-600 mt-3">
|
||||
<p><span className="font-semibold text-gray-400">Model: </span>{inverter.model}</p>
|
||||
<p><span className="font-semibold text-gray-400">SN: </span>{inverter.sn}</p>
|
||||
<p><span className="font-semibold text-gray-400">Total Energy: </span>{inverter.eTotalWithUnit}</p>
|
||||
<p><span className="font-semibold text-gray-400">Today Energy: </span>{inverter.eTodayWithUnit}</p>
|
||||
<p><span className="font-semibold text-gray-400">Reactive Power: </span>{inverter.lastRTP["Reactive Power"].value} var</p>
|
||||
<p><span className="font-semibold text-gray-400">Active Power: </span>{inverter.activePowerWithUnit}</p>
|
||||
<p><span className="font-semibold text-gray-400">Inverter Mode: </span>{inverter.lastRTP["Inverter Mode"].value}</p>
|
||||
<p><span className="font-semibold text-gray-400">Inner Temperature: </span>{inverter.lastRTP["Inner Temperature"].value} °C</p>
|
||||
<p><span className="font-semibold text-gray-400">Create Time: </span>{inverter.createdAtStr}</p>
|
||||
<p><span className="font-semibold text-gray-400">Modules: </span>{inverter.moduleFw.map((item: {module:string, value:string}) => `${item.module}: ${item.value}`.trim()).join(", ")}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>Chart</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
)}
|
||||
</div>
|
||||
</PanelCodeHighlight>
|
||||
|
||||
|
||||
<div className="panel pt-1 mt-3">
|
||||
{isMounted && (
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex flex-wrap border-b border-white-light dark:border-[#191e3a]">
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
INV-DC
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
INV-AC
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Meter-AC
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Meter-Load
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
<div className="active pt-5">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-200 text-gray-600 text-left">
|
||||
<th className="p-2"></th>
|
||||
<th className="p-2">Voltage(V)</th>
|
||||
<th className="p-2">Current(A)</th>
|
||||
<th className="p-2">Power(W)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b text-gray-600">
|
||||
<td className="p-2">PV1/PV1</td>
|
||||
<td className="p-2">{inverter.lastRTP["PV1 Voltage"] && inverter.lastRTP["PV1 Voltage"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["PV1 Current"] && inverter.lastRTP["PV1 Current"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["MPPT1 Power"] && inverter.lastRTP["MPPT1 Power"].value}</td>
|
||||
</tr>
|
||||
<tr className="border-b text-gray-600">
|
||||
<td className="p-2">PV2/PV2</td>
|
||||
<td className="p-2">{inverter.lastRTP["PV2 Voltage"] && inverter.lastRTP["PV2 Voltage"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["PV2 Current"] && inverter.lastRTP["PV2 Current"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["MPPT2 Power"] && inverter.lastRTP["MPPT2 Power"].value}</td>
|
||||
</tr>
|
||||
<tr className="border-b text-gray-600">
|
||||
<td className="p-2">PV3/PV3</td>
|
||||
<td className="p-2">{inverter.lastRTP["PV3 Voltage"] && inverter.lastRTP["PV3 Voltage"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["PV3 Current"] && inverter.lastRTP["PV3 Current"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["MPPT3 Power"] && inverter.lastRTP["MPPT3 Power"].value}</td>
|
||||
</tr>
|
||||
<tr className="border-b text-gray-600">
|
||||
<td className="p-2">PV3/PV3</td>
|
||||
<td className="p-2">{inverter.lastRTP["PV4 Voltage"] && inverter.lastRTP["PV4 Voltage"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["PV4 Current"] && inverter.lastRTP["PV4 Current"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["MPPT4 Power"] && inverter.lastRTP["MPPT4 Power"].value}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<div className="pt-5">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-200 text-gray-600 text-left">
|
||||
<th className="p-2"></th>
|
||||
<th className="p-2">Voltage(V)</th>
|
||||
<th className="p-2">Current(A)</th>
|
||||
<th className="p-2">Power(W)</th>
|
||||
<th className="p-2">Frequency(Hz)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b text-gray-600">
|
||||
<td className="p-2">A</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L1 Voltage"] && inverter.lastRTP["Phase L1 Voltage"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L1 Current"] && inverter.lastRTP["Phase L1 Current"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L1 Power"] && inverter.lastRTP["Phase L1 Power"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L1 Frequency"] && inverter.lastRTP["Phase L1 Frequency"].value}</td>
|
||||
</tr>
|
||||
<tr className="border-b text-gray-600">
|
||||
<td className="p-2">B</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L2 Voltage"] && inverter.lastRTP["Phase L2 Voltage"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L2 Current"] && inverter.lastRTP["Phase L2 Current"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L2 Power"] && inverter.lastRTP["Phase L2 Power"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L2 Frequency"] && inverter.lastRTP["Phase L2 Frequency"].value}</td>
|
||||
</tr>
|
||||
<tr className="border-b text-gray-600">
|
||||
<td className="p-2">C</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L3 Voltage"] && inverter.lastRTP["Phase L3 Voltage"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L3 Current"] && inverter.lastRTP["Phase L3 Current"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L3 Power"] && inverter.lastRTP["Phase L3 Power"].value}</td>
|
||||
<td className="p-2">{inverter.lastRTP["Phase L3 Frequency"] && inverter.lastRTP["Phase L3 Frequency"].value}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<div className="pt-5">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 text-gray-600 mt-3">
|
||||
<p><span className="font-semibold text-gray-400">Today import Energy: </span>{inverter.lastRTP["Today import Energy"] && inverter.lastRTP["Today import Energy"].value} kWh</p>
|
||||
<p><span className="font-semibold text-gray-400">L1-N phase voltage of grid: </span>{inverter.lastRTP["L1-N phase voltage of grid"] && inverter.lastRTP["L1-N phase voltage of grid"].value} V</p>
|
||||
<p><span className="font-semibold text-gray-400">L2-N phase voltage of grid: </span>{inverter.lastRTP["L2-N phase voltage of grid"] && inverter.lastRTP["L2-N phase voltage of grid"].value} V</p>
|
||||
<p><span className="font-semibold text-gray-400">L3-N phase voltage of grid: </span>{inverter.lastRTP["L3-N phase voltage of grid"] && inverter.lastRTP["L3-N phase voltage of grid"].value} V</p>
|
||||
<p><span className="font-semibold text-gray-400">Today export Energy: </span>{inverter.lastRTP["Today export Energy"] && inverter.lastRTP["Today export Energy"].value} kWh</p>
|
||||
<p><span className="font-semibold text-gray-400">L1 current of grid: </span>{inverter.lastRTP["L1 current of grid"] && inverter.lastRTP["L1 current of grid"].value} A</p>
|
||||
<p><span className="font-semibold text-gray-400">L2 current of grid: </span>{inverter.lastRTP["L2 current of grid"] && inverter.lastRTP["L2 current of grid"].value} A</p>
|
||||
<p><span className="font-semibold text-gray-400">L3 current of grid: </span>{inverter.lastRTP["L3 current of grid"] && inverter.lastRTP["L3 current of grid"].value} A</p>
|
||||
<p><span className="font-semibold text-gray-400">Accumulated energy of positive: </span>{inverter.lastRTP["Accumulated energy of positive"] && inverter.lastRTP["Accumulated energy of positive"].value} kWh</p>
|
||||
<p><span className="font-semibold text-gray-400">Phase L1 watt of grid: </span>{inverter.lastRTP["Phase L1 watt of grid"] && inverter.lastRTP["Phase L1 watt of grid"].value} KW</p>
|
||||
<p><span className="font-semibold text-gray-400">Phase L2 watt of grid: </span>{inverter.lastRTP["Phase L2 watt of grid"] && inverter.lastRTP["Phase L2 watt of grid"].value} KW</p>
|
||||
<p><span className="font-semibold text-gray-400">Phase L3 watt of grid: </span>{inverter.lastRTP["Phase L3 watt of grid"] && inverter.lastRTP["Phase L3 watt of grid"].value} KW</p>
|
||||
<p><span className="font-semibold text-gray-400">Accumulated energy of negative: </span>{inverter.lastRTP["Accumulated energy of negative"] && inverter.lastRTP["Accumulated energy of negative"].value} kWh</p>
|
||||
</div>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<div className="pt-5">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 text-gray-600 mt-3">
|
||||
<p><span className="font-semibold text-gray-400">Today load Energy: </span>{inverter.lastRTP["Today load Energy"] && inverter.lastRTP["Today load Energy"].value} kWh</p>
|
||||
<p><span className="font-semibold text-gray-400">L1-N phase voltage of load: </span>{inverter.lastRTP["L1-N phase voltage of load"] && inverter.lastRTP["L1-N phase voltage of load"].value} V</p>
|
||||
<p><span className="font-semibold text-gray-400">L2-N phase voltage of load: </span>{inverter.lastRTP["L2-N phase voltage of load"] && inverter.lastRTP["L2-N phase voltage of load"].value} V</p>
|
||||
<p><span className="font-semibold text-gray-400">L3-N phase voltage of load: </span>{inverter.lastRTP["L3-N phase voltage of load"] && inverter.lastRTP["L3-N phase voltage of load"].value} V</p>
|
||||
<p><span className="font-semibold text-gray-400">Accumulated energy of load: </span>{inverter.lastRTP["Accumulated energy of load"] && inverter.lastRTP["Accumulated energy of load"].value} kWh</p>
|
||||
<p><span className="font-semibold text-gray-400">L1 current of load: </span>{inverter.lastRTP["L1 current of load"] && inverter.lastRTP["L1 current of load"].value} A</p>
|
||||
<p><span className="font-semibold text-gray-400">L2 current of load: </span>{inverter.lastRTP["L2 current of load"] && inverter.lastRTP["L2 current of load"].value} A</p>
|
||||
<p><span className="font-semibold text-gray-400">L3 current of load: </span>{inverter.lastRTP["L3 current of load"] && inverter.lastRTP["L3 current of load"].value} A</p>
|
||||
</div>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default InverterViewPage
|
||||
174
app/(defaults)/chint/inverters/page.tsx
Normal file
174
app/(defaults)/chint/inverters/page.tsx
Normal file
@ -0,0 +1,174 @@
|
||||
"use client";
|
||||
import IconTrashLines from '@/components/icon/icon-trash-lines';
|
||||
import PanelCodeHighlight from '@/components/panel-code-highlight';
|
||||
import ComponentsTablesSimple from '@/components/tables/components-tables-simple';
|
||||
import { formatUnixTimestamp } from '@/utils/helpers';
|
||||
import Tippy from '@tippyjs/react';
|
||||
import axios from 'axios';
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
// import ReactApexChart from 'react-apexcharts';
|
||||
import dynamic from 'next/dynamic';
|
||||
import Link from 'next/link';
|
||||
const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
|
||||
|
||||
type Props = {}
|
||||
|
||||
const SungrowInverters = (props: Props) => {
|
||||
const [inverters, setInverters] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [isMounted, setIsMounted] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const res = await axios.get("https://api-a.fomware.com.cn/asset/v1/list?type=2", {
|
||||
headers: {
|
||||
"Authorization": "Bearer " + process.env.NEXT_PUBLIC_CHINT_TOKEN
|
||||
}
|
||||
})
|
||||
console.log("res", res.data.data.devices)
|
||||
setInverters(res.data.data.devices)
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData()
|
||||
}, [])
|
||||
|
||||
|
||||
const chartConfigs: any = {
|
||||
options: {
|
||||
chart: {
|
||||
height: 58,
|
||||
type: 'line',
|
||||
fontFamily: 'Nunito, sans-serif',
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 3,
|
||||
color: '#009688',
|
||||
opacity: 0.4,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2,
|
||||
},
|
||||
colors: ['#009688'],
|
||||
grid: {
|
||||
padding: {
|
||||
top: 5,
|
||||
bottom: 5,
|
||||
left: 5,
|
||||
right: 5,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: () => {
|
||||
return '';
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// inverter status 0: initial, 1: standby, 2: fault, 3: running, 5: offline, 9: shutdown, 10: unknown
|
||||
|
||||
return (
|
||||
<div>
|
||||
{loading ? <p>Loading...</p> : (
|
||||
<PanelCodeHighlight title="Chint Inverters">
|
||||
<div className="table-responsive mb-5">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Inverter Name</th>
|
||||
<th>Site Name</th>
|
||||
<th>Gateway SN</th>
|
||||
<th>Inverter Status</th>
|
||||
<th>Model</th>
|
||||
<th>SN</th>
|
||||
<th>Real Time Power</th>
|
||||
<th>E-Today</th>
|
||||
<th>WeekData</th>
|
||||
<th>Created At</th>
|
||||
<th>Updated At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{inverters.map((data) => (
|
||||
<tr key={data.id}>
|
||||
<td>
|
||||
<div className="whitespace-nowrap"><Link href={`/chint/inverters/${data.name}`}>{data.name}</Link></div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="whitespace-nowrap">{data.siteName}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>{data.gatewaySn}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className={`whitespace-nowrap ${
|
||||
data.status === 0 ? "text-gray-500" // Initial
|
||||
: data.status === 1 ? "text-blue-500" // Standby
|
||||
: data.status === 2 ? "text-red-500" // Fault
|
||||
: data.status === 3 ? "text-green-500" // Running
|
||||
: data.status === 5 ? "text-yellow-500" // Offline
|
||||
: data.status === 9 ? "text-purple-500" // Shutdown
|
||||
: "text-gray-400" // Unknown (default)
|
||||
}`}>
|
||||
{data.statusLabel}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>{data.model}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>{data.sn}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>{data.activePowerWithUnit}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>{data.eTodayWithUnit}</div>
|
||||
</td>
|
||||
<td>
|
||||
{isMounted && (
|
||||
<ReactApexChart
|
||||
series={[{ data: data.weekTrend.map((point: any) => point.y) }]}
|
||||
options={{
|
||||
...chartConfigs.options,
|
||||
xaxis: { categories: data.weekTrend.map((point: any) => point.x) },
|
||||
}}
|
||||
type="line"
|
||||
height={58}
|
||||
width={'100%'}
|
||||
/>
|
||||
)} </td>
|
||||
<td>{formatUnixTimestamp(data.createdAt)}</td>
|
||||
<td>{formatUnixTimestamp(data.updatedAt)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</PanelCodeHighlight>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SungrowInverters
|
||||
13
app/(defaults)/chint/page.tsx
Normal file
13
app/(defaults)/chint/page.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import axios from 'axios';
|
||||
import { Metadata } from 'next';
|
||||
import React from 'react';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
};
|
||||
|
||||
|
||||
const SungrowIndex = async () => {
|
||||
return <div>SungrowIndex</div>;
|
||||
};
|
||||
|
||||
export default SungrowIndex;
|
||||
39
app/(defaults)/chint/sites/page.tsx
Normal file
39
app/(defaults)/chint/sites/page.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
// app/(defaults)/sungrow/assets/page.tsx
|
||||
|
||||
import ComponentsTablesSimple from "@/components/tables/components-tables-simple";
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const SungrowAssets = () => {
|
||||
const [sites, setSites] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const res = await axios.get("https://api-a.fomware.com.cn/site/v1/list", {
|
||||
headers: {
|
||||
"Authorization": "Bearer " + process.env.NEXT_PUBLIC_CHINT_TOKEN
|
||||
}
|
||||
})
|
||||
console.log("res", res.data.data.siteInfos)
|
||||
setSites(res.data.data.siteInfos)
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
{loading ? <p>Loading...</p> : <ComponentsTablesSimple tableData={sites} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SungrowAssets;
|
||||
105
app/(defaults)/sungrow/plant/page.tsx
Normal file
105
app/(defaults)/sungrow/plant/page.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import IconTrashLines from '@/components/icon/icon-trash-lines';
|
||||
import PanelCodeHighlight from '@/components/panel-code-highlight';
|
||||
import ComponentsTablesSimple from '@/components/tables/components-tables-simple'
|
||||
import { formatUnixTimestamp } from '@/utils/helpers';
|
||||
import Tippy from '@tippyjs/react';
|
||||
import axios from 'axios';
|
||||
import React, { useEffect, useState } from "react"
|
||||
|
||||
type Props = {}
|
||||
|
||||
const SungrowPlant = (props: Props) => {
|
||||
const [sites, setSites] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSites = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/sungrow/site")
|
||||
const data = await res.json()
|
||||
console.log("data", data)
|
||||
setSites(data)
|
||||
} catch (error) {
|
||||
console.error("Error fetching inverters:", error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchSites()
|
||||
}, [])
|
||||
|
||||
const statusLabels: Record<number, string> = {
|
||||
0: "Offline",
|
||||
1: "Normal",
|
||||
}
|
||||
const plantTypeLabel: Record<number, string> = {
|
||||
3: "Commercial PV",
|
||||
4: "Residential PV",
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
{loading ? <p>Loading...</p> : (
|
||||
<PanelCodeHighlight title="Sungrow Sites">
|
||||
<div className="table-responsive mb-5">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Site Name</th>
|
||||
<th>Status</th>
|
||||
<th>Plant Type</th>
|
||||
{/* <th>Installed Power</th>
|
||||
<th>Real-time Power</th>
|
||||
<th>Yield Today</th>
|
||||
<th>Monthly Yield</th>
|
||||
<th>Annual Yield</th>
|
||||
<th>Total Yield</th>
|
||||
<th>Equivalent Hours</th>
|
||||
<th>Remarks</th> */}
|
||||
<th className="text-center">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sites.map((data) => (
|
||||
<tr key={data.id}>
|
||||
<td>
|
||||
<div className="whitespace-nowrap">{data.ps_name}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className={`whitespace-nowrap ${ data.online_status !== 1 ? "text-danger" : "text-success" }`} >
|
||||
{statusLabels[data.online_status] || "-"}
|
||||
</div>
|
||||
</td>
|
||||
<td>{plantTypeLabel[data.ps_type] || "-"}</td>
|
||||
{/* <td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td> */}
|
||||
<td className="text-center">
|
||||
<Tippy content="Delete">
|
||||
<button type="button">
|
||||
<IconTrashLines className="m-auto" />
|
||||
</button>
|
||||
</Tippy>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</PanelCodeHighlight>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SungrowPlant
|
||||
22
app/api/sungrow/site/route.ts
Normal file
22
app/api/sungrow/site/route.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import axios from "axios";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const res = await axios.post("https://gateway.isolarcloud.com.hk/openapi/platform/queryPowerStationList", {
|
||||
"page": 1,
|
||||
"size": 10,
|
||||
"appkey": `${process.env.SUNGROW_APP_KEY}`
|
||||
} ,{
|
||||
headers: {
|
||||
"Authorization": `Bearer ${process.env.SUNGROW_ACCESS_TOKEN}`,
|
||||
"x-access-key": `${process.env.SUNGROW_SECRET_KEY}`
|
||||
}
|
||||
})
|
||||
// console.log("res", res.data)
|
||||
return NextResponse.json(res.data.result_data.pageList)
|
||||
} catch (error) {
|
||||
console.error("API fetch error:", error);
|
||||
return NextResponse.json({ error: "Failed to fetch inverters" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@ -9,12 +9,12 @@ export interface TimeSeriesResponse {
|
||||
generation: TimeSeriesEntry[];
|
||||
}
|
||||
|
||||
const API_URL =
|
||||
process.env.NEXT_PUBLIC_FASTAPI_URL ;
|
||||
const API_BASE_URL =
|
||||
process.env.FASTAPI_URL ?? "http://127.0.0.1:8000";
|
||||
|
||||
export const crmapi = {
|
||||
getProjects: async () => {
|
||||
const res = await fetch(`${API_URL}/crm/projects`, {
|
||||
const res = await fetch(`${API_BASE_URL}/crm/projects`, {
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
return res.json();
|
||||
@ -28,7 +28,7 @@ export async function fetchPowerTimeseries(
|
||||
): Promise<TimeSeriesResponse> { // <-- Change here
|
||||
const params = new URLSearchParams({ site, start, end });
|
||||
|
||||
const res = await fetch(`${API_URL}/power-timeseries?${params.toString()}`);
|
||||
const res = await fetch(`http://localhost:8000/power-timeseries?${params.toString()}`);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to fetch data: ${res.status}`);
|
||||
@ -54,7 +54,7 @@ export async function fetchForecast(
|
||||
kwp: kwp.toString(),
|
||||
}).toString();
|
||||
|
||||
const res = await fetch(`${API_URL}/forecast?${query}`);
|
||||
const res = await fetch(`http://localhost:8000/forecast?${query}`);
|
||||
if (!res.ok) throw new Error("Failed to fetch forecast");
|
||||
|
||||
return res.json();
|
||||
@ -73,7 +73,7 @@ export type MonthlyKPI = {
|
||||
error?: string;
|
||||
};
|
||||
|
||||
const API = process.env.NEXT_PUBLIC_FASTAPI_URL;
|
||||
const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
|
||||
|
||||
export async function fetchMonthlyKpi(params: {
|
||||
site: string;
|
||||
|
||||
@ -12,7 +12,7 @@ const ComponentsAuthLoginForm = () => {
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
const API = process.env.NEXT_PUBLIC_FASTAPI_URL;
|
||||
const API = process.env.NEXT_PUBLIC_FASTAPI_URL; // e.g. http://localhost:8000
|
||||
|
||||
const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
@ -18,8 +18,6 @@ import { color } from 'html2canvas/dist/types/css/types/color';
|
||||
import DatePicker from 'react-datepicker';
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
import './datepicker-dark.css'; // custom dark mode styles
|
||||
import 'chartjs-adapter-date-fns';
|
||||
|
||||
|
||||
|
||||
ChartJS.register(zoomPlugin);
|
||||
@ -70,6 +68,7 @@ function powerSeriesToEnergySeries(
|
||||
return out;
|
||||
}
|
||||
|
||||
|
||||
function groupTimeSeries(
|
||||
data: TimeSeriesEntry[],
|
||||
mode: 'day' | 'daily' | 'weekly' | 'monthly' | 'yearly',
|
||||
@ -83,11 +82,11 @@ function groupTimeSeries(
|
||||
|
||||
switch (mode) {
|
||||
case 'day': {
|
||||
// Snap to 5-minute buckets in local (KL) time
|
||||
const local = new Date(
|
||||
date.toLocaleString('en-US', { timeZone: 'Asia/Kuala_Lumpur' })
|
||||
);
|
||||
local.setSeconds(0, 0);
|
||||
const minute = local.getMinutes() < 30 ? 0 : 30;
|
||||
local.setMinutes(minute, 0, 0);
|
||||
key = local.toISOString();
|
||||
break;
|
||||
}
|
||||
@ -126,17 +125,7 @@ function groupTimeSeries(
|
||||
});
|
||||
}
|
||||
|
||||
// ---- NEW: build a 5-minute time grid for the day view
|
||||
function buildTimeGrid(start: Date, end: Date, stepMinutes = 5): string[] {
|
||||
const grid: string[] = [];
|
||||
const t = new Date(start);
|
||||
t.setSeconds(0, 0);
|
||||
while (t.getTime() <= end.getTime()) {
|
||||
grid.push(new Date(t).toISOString());
|
||||
t.setTime(t.getTime() + stepMinutes * 60 * 1000);
|
||||
}
|
||||
return grid;
|
||||
}
|
||||
|
||||
|
||||
const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
|
||||
const chartRef = useRef<any>(null);
|
||||
@ -149,6 +138,7 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
|
||||
const LIVE_REFRESH_MS = 300000; // 5min when viewing a single day
|
||||
const SLOW_REFRESH_MS = 600000; // 10min for weekly/monthly/yearly
|
||||
|
||||
|
||||
const fetchAndSet = React.useCallback(async () => {
|
||||
const now = new Date();
|
||||
let start: Date;
|
||||
@ -184,6 +174,15 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
|
||||
const res = await fetchPowerTimeseries(siteId, isoStart, isoEnd);
|
||||
setConsumption(res.consumption);
|
||||
setGeneration(res.generation);
|
||||
|
||||
// Forecast only needs updating for the selected day
|
||||
const forecastData = await fetchForecast(3.15, 101.7, 37, 0, 25.67);
|
||||
const selectedDateStr = selectedDate.toISOString().split('T')[0];
|
||||
setForecast(
|
||||
forecastData
|
||||
.filter(({ time }: any) => time.startsWith(selectedDateStr))
|
||||
.map(({ time, forecast }: any) => ({ time, value: forecast }))
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch energy timeseries:', error);
|
||||
}
|
||||
@ -223,22 +222,23 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
|
||||
};
|
||||
}, [fetchAndSet, viewMode]);
|
||||
|
||||
|
||||
function useIsDarkMode() {
|
||||
const [isDark, setIsDark] = useState(() =>
|
||||
typeof document !== 'undefined'
|
||||
? document.body.classList.contains('dark')
|
||||
: false
|
||||
);
|
||||
const [isDark, setIsDark] = useState(() =>
|
||||
typeof document !== 'undefined'
|
||||
? document.body.classList.contains('dark')
|
||||
: false
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const check = () => setIsDark(document.body.classList.contains('dark'));
|
||||
const observer = new MutationObserver(check);
|
||||
observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
const check = () => setIsDark(document.body.classList.contains('dark'));
|
||||
const observer = new MutationObserver(check);
|
||||
observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return isDark;
|
||||
}
|
||||
return isDark;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const now = new Date();
|
||||
@ -278,17 +278,17 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
|
||||
setGeneration(res.generation);
|
||||
|
||||
// ⬇️ ADD THIS here — fetch forecast
|
||||
const forecastData = await fetchForecast(3.15, 101.7, 37, 0, 30.67);
|
||||
const selectedDateStr = selectedDate.toISOString().split('T')[0];
|
||||
const forecastData = await fetchForecast(3.15, 101.7, 37, 0, 30.67);
|
||||
const selectedDateStr = selectedDate.toISOString().split('T')[0];
|
||||
|
||||
setForecast(
|
||||
forecastData
|
||||
.filter(({ time }) => time.startsWith(selectedDateStr)) // ✅ filter only selected date
|
||||
.map(({ time, forecast }) => ({
|
||||
time,
|
||||
value: forecast
|
||||
}))
|
||||
);
|
||||
setForecast(
|
||||
forecastData
|
||||
.filter(({ time }) => time.startsWith(selectedDateStr)) // ✅ filter only selected date
|
||||
.map(({ time, forecast }) => ({
|
||||
time,
|
||||
value: forecast
|
||||
}))
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch energy timeseries:', error);
|
||||
@ -300,58 +300,48 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
|
||||
|
||||
const isEnergyView = viewMode !== 'day';
|
||||
|
||||
// Convert to energy series for aggregated views
|
||||
const consumptionForGrouping = isEnergyView
|
||||
? powerSeriesToEnergySeries(consumption, 30)
|
||||
: consumption;
|
||||
// Convert to energy series for aggregated views
|
||||
const consumptionForGrouping = isEnergyView
|
||||
? powerSeriesToEnergySeries(consumption, 30)
|
||||
: consumption;
|
||||
|
||||
const generationForGrouping = isEnergyView
|
||||
? powerSeriesToEnergySeries(generation, 30)
|
||||
: generation;
|
||||
const generationForGrouping = isEnergyView
|
||||
? powerSeriesToEnergySeries(generation, 30)
|
||||
: generation;
|
||||
|
||||
const forecastForGrouping = isEnergyView
|
||||
? powerSeriesToEnergySeries(forecast, 60) // if forecast is hourly, guess 60
|
||||
: forecast;
|
||||
const forecastForGrouping = isEnergyView
|
||||
? powerSeriesToEnergySeries(forecast, 60) // if forecast is hourly, guess 60
|
||||
: forecast;
|
||||
|
||||
// Group: sum for energy views, mean for day view
|
||||
const groupedConsumption = groupTimeSeries(
|
||||
consumptionForGrouping,
|
||||
viewMode,
|
||||
isEnergyView ? 'sum' : 'mean'
|
||||
);
|
||||
// Group: sum for energy views, mean for day view
|
||||
const groupedConsumption = groupTimeSeries(
|
||||
consumptionForGrouping,
|
||||
viewMode,
|
||||
isEnergyView ? 'sum' : 'mean'
|
||||
);
|
||||
|
||||
const groupedGeneration = groupTimeSeries(
|
||||
generationForGrouping,
|
||||
viewMode,
|
||||
isEnergyView ? 'sum' : 'mean'
|
||||
);
|
||||
const groupedGeneration = groupTimeSeries(
|
||||
generationForGrouping,
|
||||
viewMode,
|
||||
isEnergyView ? 'sum' : 'mean'
|
||||
);
|
||||
|
||||
const groupedForecast = groupTimeSeries(
|
||||
forecastForGrouping,
|
||||
viewMode,
|
||||
isEnergyView ? 'sum' : 'mean'
|
||||
);
|
||||
const groupedForecast = groupTimeSeries(
|
||||
forecastForGrouping,
|
||||
viewMode,
|
||||
isEnergyView ? 'sum' : 'mean'
|
||||
);
|
||||
|
||||
const forecastMap = Object.fromEntries(groupedForecast.map(d => [d.time, d.value]));
|
||||
|
||||
const dataTimesDay = [
|
||||
...groupedConsumption.map(d => Date.parse(d.time)),
|
||||
...groupedGeneration.map(d => Date.parse(d.time)),
|
||||
...groupedForecast.map(d => Date.parse(d.time)),
|
||||
].filter(Number.isFinite).sort((a, b) => a - b);
|
||||
|
||||
const dayGrid = viewMode === 'day'
|
||||
? buildTimeGrid(startOfDay(selectedDate), endOfDay(selectedDate), 1)
|
||||
: [];
|
||||
|
||||
|
||||
const unionTimes = Array.from(new Set([
|
||||
...groupedConsumption.map(d => d.time),
|
||||
...groupedGeneration.map(d => d.time),
|
||||
...groupedForecast.map(d => d.time),
|
||||
])).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
|
||||
const allTimes = Array.from(new Set([
|
||||
...groupedConsumption.map(d => d.time),
|
||||
...groupedGeneration.map(d => d.time),
|
||||
...groupedForecast.map(d => d.time),
|
||||
])).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
|
||||
|
||||
|
||||
const allTimes = viewMode === 'day' ? dayGrid : unionTimes;
|
||||
|
||||
const consumptionMap = Object.fromEntries(groupedConsumption.map(d => [d.time, d.value]));
|
||||
const generationMap = Object.fromEntries(groupedGeneration.map(d => [d.time, d.value]));
|
||||
@ -359,39 +349,7 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
|
||||
const [startIndex, setStartIndex] = useState(0);
|
||||
const [endIndex, setEndIndex] = useState(allTimes.length - 1);
|
||||
|
||||
// after allTimes, consumptionMap, generationMap, forecastMap
|
||||
const hasDataAt = (t: string) =>
|
||||
t in consumptionMap || t in generationMap || t in forecastMap;
|
||||
|
||||
const firstAvailableIndex = allTimes.findIndex(hasDataAt);
|
||||
const lastAvailableIndex = (() => {
|
||||
for (let i = allTimes.length - 1; i >= 0; i--) {
|
||||
if (hasDataAt(allTimes[i])) return i;
|
||||
}
|
||||
return -1;
|
||||
})();
|
||||
|
||||
const selectableIndices =
|
||||
firstAvailableIndex === -1 || lastAvailableIndex === -1
|
||||
? []
|
||||
: Array.from(
|
||||
{ length: lastAvailableIndex - firstAvailableIndex + 1 },
|
||||
(_, k) => firstAvailableIndex + k
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectableIndices.length === 0) {
|
||||
setStartIndex(0);
|
||||
setEndIndex(Math.max(0, allTimes.length - 1));
|
||||
return;
|
||||
}
|
||||
const minIdx = selectableIndices[0];
|
||||
const maxIdx = selectableIndices[selectableIndices.length - 1];
|
||||
setStartIndex(prev => Math.min(Math.max(prev, minIdx), maxIdx));
|
||||
setEndIndex(prev => Math.min(Math.max(prev, minIdx), maxIdx));
|
||||
}, [viewMode, allTimes.length, firstAvailableIndex, lastAvailableIndex]);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
import('hammerjs');
|
||||
@ -399,18 +357,9 @@ const selectableIndices =
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectableIndices.length) {
|
||||
const minIdx = selectableIndices[0];
|
||||
const maxIdx = selectableIndices[selectableIndices.length - 1];
|
||||
setStartIndex(minIdx);
|
||||
setEndIndex(maxIdx);
|
||||
} else {
|
||||
setStartIndex(0);
|
||||
setEndIndex(Math.max(0, allTimes.length - 1));
|
||||
}
|
||||
// run whenever mode changes or the timeline changes
|
||||
}, [viewMode, allTimes, firstAvailableIndex, lastAvailableIndex]);
|
||||
|
||||
setEndIndex(allTimes.length - 1);
|
||||
}, [viewMode, allTimes.length]);
|
||||
|
||||
const formatLabel = (key: string) => {
|
||||
switch (viewMode) {
|
||||
@ -431,47 +380,35 @@ const selectableIndices =
|
||||
};
|
||||
|
||||
const filteredLabels = allTimes.slice(startIndex, endIndex + 1);
|
||||
const filteredConsumption = filteredLabels.map(t => consumptionMap[t] ?? 0);
|
||||
const filteredGeneration = filteredLabels.map(t => generationMap[t] ?? 0);
|
||||
const filteredForecast = filteredLabels.map(t => forecastMap[t] ?? null);
|
||||
|
||||
const minutesOfDayForLabels =
|
||||
viewMode === 'day'
|
||||
? filteredLabels.map((iso) => {
|
||||
const d = new Date(iso);
|
||||
const kl = new Date(d.toLocaleString('en-US', { timeZone: 'Asia/Kuala_Lumpur' }));
|
||||
return kl.getHours() * 60 + kl.getMinutes();
|
||||
})
|
||||
: [];
|
||||
|
||||
// ---- CHANGED: use nulls for missing buckets (not zeros)
|
||||
const filteredConsumption = filteredLabels.map(t => (t in consumptionMap ? consumptionMap[t] : null));
|
||||
const filteredGeneration = filteredLabels.map(t => (t in generationMap ? generationMap[t] : null));
|
||||
const filteredForecast = filteredLabels.map(t => (t in forecastMap ? forecastMap[t] : null));
|
||||
|
||||
const allValues = [...filteredConsumption, ...filteredGeneration].filter(
|
||||
(v): v is number => v !== null
|
||||
);
|
||||
const allValues = [...filteredConsumption, ...filteredGeneration].filter(v => v !== null) as number[];
|
||||
const maxValue = allValues.length > 0 ? Math.max(...allValues) : 0;
|
||||
const yAxisSuggestedMax = maxValue * 1.15;
|
||||
|
||||
const isDark = useIsDarkMode();
|
||||
|
||||
const axisColor = isDark ? '#fff' : '#222';
|
||||
const axisColor = isDark ? '#fff' : '#222';
|
||||
|
||||
function areaGradient(ctx: any, hex: string, alphaTop = 0.22, alphaBottom = 0.02) {
|
||||
const { ctx: g, chartArea } = ctx.chart;
|
||||
if (!chartArea) return hex; // initial render fallback
|
||||
const gradient = g.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
|
||||
// top more opaque → bottom fades out
|
||||
gradient.addColorStop(0, hex + Math.floor(alphaTop * 255).toString(16).padStart(2, '0'));
|
||||
gradient.addColorStop(1, hex + Math.floor(alphaBottom * 255).toString(16).padStart(2, '0'));
|
||||
return gradient;
|
||||
}
|
||||
function areaGradient(ctx: any, hex: string, alphaTop = 0.22, alphaBottom = 0.02) {
|
||||
const { ctx: g, chartArea } = ctx.chart;
|
||||
if (!chartArea) return hex; // initial render fallback
|
||||
const gradient = g.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
|
||||
// top more opaque → bottom fades out
|
||||
gradient.addColorStop(0, hex + Math.floor(alphaTop * 255).toString(16).padStart(2, '0'));
|
||||
gradient.addColorStop(1, hex + Math.floor(alphaBottom * 255).toString(16).padStart(2, '0'));
|
||||
return gradient;
|
||||
}
|
||||
|
||||
// Define colors for both light and dark modes
|
||||
const consumptionColor = isDark ? '#B80F0A' : '#EF4444'; // Example: Brighter red for dark mode
|
||||
const generationColor = isDark ? '#48A860' : '#22C55E'; // Example: Brighter green for dark mode
|
||||
const forecastColor = '#fcd913'; // A golden yellow that works well in both modes
|
||||
const yUnit = isEnergyView ? 'kWh' : 'kW';
|
||||
const yTitle = isEnergyView ? 'Energy (kWh)' : 'Power (kW)';
|
||||
// Define colors for both light and dark modes
|
||||
const consumptionColor = isDark ? '#B80F0A' : '#EF4444'; // Example: Brighter red for dark mode
|
||||
const generationColor = isDark ? '#48A860' : '#22C55E'; // Example: Brighter green for dark mode
|
||||
const forecastColor = '#fcd913'; // A golden yellow that works well in both modes
|
||||
const yUnit = isEnergyView ? 'kWh' : 'kW';
|
||||
const yTitle = isEnergyView ? 'Energy (kWh)' : 'Power (kW)';
|
||||
|
||||
const data = {
|
||||
labels: filteredLabels.map(formatLabel),
|
||||
@ -481,57 +418,42 @@ const selectableIndices =
|
||||
data: filteredConsumption,
|
||||
borderColor: consumptionColor,
|
||||
backgroundColor: (ctx: any) => areaGradient(ctx, consumptionColor),
|
||||
fill: true,
|
||||
tension: 0.2,
|
||||
fill: true, // <-- fill under line
|
||||
tension: 0.4,
|
||||
spanGaps: true,
|
||||
pointRadius: 0.7, // default is 3, make smaller
|
||||
pointHoverRadius: 4, // a bit bigger on hover
|
||||
borderWidth: 2,
|
||||
},
|
||||
{
|
||||
label: 'Generation',
|
||||
data: filteredGeneration,
|
||||
borderColor: generationColor,
|
||||
backgroundColor: (ctx: any) => areaGradient(ctx, generationColor),
|
||||
fill: true,
|
||||
tension: 0.2,
|
||||
fill: true, // <-- fill under line
|
||||
tension: 0.4,
|
||||
spanGaps: true,
|
||||
pointRadius: 0.7, // default is 3, make smaller
|
||||
pointHoverRadius: 4, // a bit bigger on hover
|
||||
borderWidth: 2,
|
||||
},
|
||||
{
|
||||
label: 'Forecasted Solar',
|
||||
data: filteredForecast,
|
||||
borderColor: '#fcd913',
|
||||
backgroundColor: (ctx: any) => areaGradient(ctx, '#fcd913', 0.18, 0.03),
|
||||
tension: 0.4,
|
||||
borderDash: [5, 5],
|
||||
fill: true,
|
||||
spanGaps: true,
|
||||
pointRadius: 1, // default is 3, make smaller
|
||||
pointHoverRadius: 4, // a bit bigger on hover
|
||||
borderWidth: 2,
|
||||
}
|
||||
label: 'Forecasted Solar',
|
||||
data: filteredForecast,
|
||||
borderColor: '#fcd913', // orange
|
||||
backgroundColor: (ctx: any) => areaGradient(ctx, '#fcd913', 0.18, 0.03),
|
||||
tension: 0.4,
|
||||
borderDash: [5, 5], // dashed line to distinguish forecast
|
||||
fill: true,
|
||||
spanGaps: true,
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
normalized: true, // faster lookup
|
||||
plugins: {
|
||||
decimation: {
|
||||
enabled: true,
|
||||
algorithm: 'lttb', // best visual fidelity
|
||||
samples: 400, // cap points actually drawn (~400 is a good default)
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
labels: {
|
||||
color: axisColor, // legend text color
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
labels: {
|
||||
color: axisColor, // legend text color
|
||||
},
|
||||
},
|
||||
zoom: {
|
||||
zoom: {
|
||||
wheel: { enabled: true },
|
||||
@ -541,26 +463,25 @@ const selectableIndices =
|
||||
pan: { enabled: true, mode: 'x' as const },
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
backgroundColor: isDark ? '#232b3e' : '#fff',
|
||||
titleColor: axisColor,
|
||||
bodyColor: axisColor,
|
||||
borderColor: isDark ? '#444' : '#ccc',
|
||||
borderWidth: 1,
|
||||
callbacks: {
|
||||
label: (ctx: any) => {
|
||||
const dsLabel = ctx.dataset.label || '';
|
||||
const val = ctx.parsed.y;
|
||||
return `${dsLabel}: ${val?.toFixed(2)} ${yUnit}`;
|
||||
},
|
||||
},
|
||||
enabled: true,
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
backgroundColor: isDark ? '#232b3e' : '#fff',
|
||||
titleColor: axisColor,
|
||||
bodyColor: axisColor,
|
||||
borderColor: isDark ? '#444' : '#ccc',
|
||||
borderWidth: 1,
|
||||
callbacks: {
|
||||
label: (ctx: any) => {
|
||||
const dsLabel = ctx.dataset.label || '';
|
||||
const val = ctx.parsed.y;
|
||||
return `${dsLabel}: ${val?.toFixed(2)} ${yUnit}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'category' as const,
|
||||
title: {
|
||||
display: true,
|
||||
color: axisColor,
|
||||
@ -577,44 +498,18 @@ const selectableIndices =
|
||||
font: { weight: 'normal' as const },
|
||||
},
|
||||
ticks: {
|
||||
color: axisColor,
|
||||
autoSkip: false, // let our callback decide
|
||||
maxRotation: 0,
|
||||
callback(
|
||||
this: any,
|
||||
tickValue: string | number,
|
||||
index: number,
|
||||
ticks: any[]
|
||||
) {
|
||||
if (viewMode !== 'day') return this.getLabelForValue(tickValue as number);
|
||||
|
||||
const scale = this.chart.scales.x;
|
||||
const min = Math.max(0, Math.floor(scale.min ?? 0));
|
||||
const max = Math.min(ticks.length - 1, Math.ceil(scale.max ?? ticks.length - 1));
|
||||
const visibleCount = Math.max(1, max - min + 1);
|
||||
|
||||
let step = 30; // ≥ 6h
|
||||
if (visibleCount < 80) step = 10;// 2–6h
|
||||
|
||||
// On a category scale, tickValue is usually the index (number).
|
||||
const idx = typeof tickValue === 'number' ? tickValue : index;
|
||||
const m = minutesOfDayForLabels[idx];
|
||||
|
||||
if (m != null && m % step === 0) {
|
||||
return this.getLabelForValue(idx);
|
||||
}
|
||||
return ''; // hide crowded labels
|
||||
color: axisColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
suggestedMax: yAxisSuggestedMax,
|
||||
title: { display: true, text: yTitle, color: axisColor, font: { weight: 'normal' as const } },
|
||||
ticks: {
|
||||
color: axisColor,
|
||||
},
|
||||
color: axisColor,
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
} as const;
|
||||
|
||||
@ -624,7 +519,7 @@ const selectableIndices =
|
||||
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-lg shadow-md dark:bg-rtgray-800 dark:text-white-light">
|
||||
<div className="h-98 w-full" onDoubleClick={handleResetZoom}>
|
||||
<div className="h-98 w-full">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-lg font-bold dark:text-white-light">Energy Consumption & Generation</h2>
|
||||
<button onClick={handleResetZoom} className="btn-primary px-8 py-2 text-sm">
|
||||
@ -653,15 +548,13 @@ const selectableIndices =
|
||||
const val = Number(e.target.value);
|
||||
setStartIndex(val <= endIndex ? val : endIndex);
|
||||
}}
|
||||
disabled={selectableIndices.length === 0}
|
||||
className="dark:bg-rtgray-700 border dark:border-rtgray-700 rounded p-1"
|
||||
>
|
||||
{selectableIndices.map((absIdx) => (
|
||||
<option key={absIdx} value={absIdx}>{formatLabel(allTimes[absIdx])}</option>
|
||||
{allTimes.map((label, idx) => (
|
||||
<option key={idx} value={idx}>{formatLabel(label)}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="font-medium ">
|
||||
To:{' '}
|
||||
<select
|
||||
@ -670,15 +563,13 @@ const selectableIndices =
|
||||
const val = Number(e.target.value);
|
||||
setEndIndex(val >= startIndex ? val : startIndex);
|
||||
}}
|
||||
disabled={selectableIndices.length === 0}
|
||||
className="dark:bg-rtgray-700 border dark:border-rtgray-700 rounded p-1"
|
||||
>
|
||||
{selectableIndices.map((absIdx) => (
|
||||
<option key={absIdx} value={absIdx}>{formatLabel(allTimes[absIdx])}</option>
|
||||
{allTimes.map((label, idx) => (
|
||||
<option key={idx} value={idx}>{formatLabel(label)}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="font-medium">
|
||||
View:{' '}
|
||||
<select
|
||||
@ -703,4 +594,11 @@ const selectableIndices =
|
||||
);
|
||||
};
|
||||
|
||||
export default EnergyLineChart;
|
||||
export default EnergyLineChart;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -21,8 +21,6 @@ const KPI_Table: React.FC<KPI_TableProps> = ({ siteId, month }) => {
|
||||
const [kpiData, setKpiData] = useState<MonthlyKPI | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_FASTAPI_URL;
|
||||
|
||||
useEffect(() => {
|
||||
if (!siteId || !month) return;
|
||||
|
||||
@ -30,7 +28,7 @@ const KPI_Table: React.FC<KPI_TableProps> = ({ siteId, month }) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${API_URL}/kpi/monthly?site=${siteId}&month=${month}`
|
||||
`http://localhost:8000/kpi/monthly?site=${siteId}&month=${month}`
|
||||
);
|
||||
setKpiData(await res.json());
|
||||
} catch (err) {
|
||||
|
||||
@ -11,7 +11,7 @@ interface LoggingControlCardProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_FASTAPI_URL;
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
type FnState = {
|
||||
serial: string;
|
||||
|
||||
@ -26,7 +26,7 @@ interface SiteCardProps {
|
||||
fallbackStatus?: string; // optional backup status if CRM is missing it
|
||||
}
|
||||
|
||||
const API = process.env.NEXT_PUBLIC_FASTAPI_URL;
|
||||
const API = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
const SiteCard: React.FC<SiteCardProps> = ({ siteId, className = '', fallbackStatus }) => {
|
||||
const [project, setProject] = useState<CrmProject | null>(null);
|
||||
|
||||
@ -15,7 +15,8 @@ interface SiteStatusProps {
|
||||
lastSyncTimestamp: string;
|
||||
}
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_FASTAPI_URL;
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
|
||||
const WS_URL = process.env.NEXT_PUBLIC_WS_URL ?? "ws://localhost:8000/ws";
|
||||
|
||||
const SiteStatus = ({
|
||||
selectedSite,
|
||||
@ -29,7 +30,7 @@ const SiteStatus = ({
|
||||
|
||||
// --- WebSocket to receive MQTT-forwarded messages ---
|
||||
useEffect(() => {
|
||||
const ws = new WebSocket(`${API_URL}/ws`);
|
||||
const ws = new WebSocket(WS_URL);
|
||||
|
||||
ws.onopen = () => console.log("WebSocket connected");
|
||||
ws.onclose = () => console.log("WebSocket disconnected");
|
||||
|
||||
@ -26,7 +26,7 @@ export default function Header() {
|
||||
const [user, setUser] = useState<UserData | null>(null);
|
||||
const [loadingUser, setLoadingUser] = useState(true);
|
||||
|
||||
const API = process.env.NEXT_PUBLIC_FASTAPI_URL;
|
||||
const API = process.env.NEXT_PUBLIC_FASTAPI_URL || 'http://127.0.0.1:8000';
|
||||
|
||||
// highlight active menu
|
||||
useEffect(() => {
|
||||
|
||||
17
package-lock.json
generated
17
package-lock.json
generated
@ -22,7 +22,6 @@
|
||||
"axios": "^1.7.9",
|
||||
"bcrypt": "^5.1.1",
|
||||
"chart.js": "^4.4.9",
|
||||
"chartjs-adapter-date-fns": "^3.0.0",
|
||||
"chartjs-plugin-zoom": "^2.2.0",
|
||||
"cookie": "^1.0.2",
|
||||
"date-fns": "^4.1.0",
|
||||
@ -4795,16 +4794,6 @@
|
||||
"pnpm": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/chartjs-adapter-date-fns": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz",
|
||||
"integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"chart.js": ">=2.8.0",
|
||||
"date-fns": ">=2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/chartjs-plugin-zoom": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.2.0.tgz",
|
||||
@ -13085,12 +13074,6 @@
|
||||
"@kurkle/color": "^0.3.0"
|
||||
}
|
||||
},
|
||||
"chartjs-adapter-date-fns": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz",
|
||||
"integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==",
|
||||
"requires": {}
|
||||
},
|
||||
"chartjs-plugin-zoom": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.2.0.tgz",
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
"axios": "^1.7.9",
|
||||
"bcrypt": "^5.1.1",
|
||||
"chart.js": "^4.4.9",
|
||||
"chartjs-adapter-date-fns": "^3.0.0",
|
||||
"chartjs-plugin-zoom": "^2.2.0",
|
||||
"cookie": "^1.0.2",
|
||||
"date-fns": "^4.1.0",
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
// utils/export.ts
|
||||
export type ExportParams = {
|
||||
baseUrl?: string; // e.g. process.env.NEXT_PUBLIC_API_URL
|
||||
site: string; // PROJ-0028
|
||||
suffix?: "grid" | "solar"; // default "grid"
|
||||
serial?: string | null; // device id like "01"
|
||||
day?: string; // "YYYY-MM-DD" (preferred)
|
||||
start?: string; // ISO string (if not using day)
|
||||
end?: string; // ISO string (if not using day)
|
||||
columns?: string[]; // optional list of columns
|
||||
localTz?: string; // default "Asia/Kuala_Lumpur"
|
||||
};
|
||||
|
||||
export function buildExportUrl(p: ExportParams): string {
|
||||
const {
|
||||
baseUrl = "",
|
||||
site,
|
||||
suffix = "grid",
|
||||
serial,
|
||||
day,
|
||||
start,
|
||||
end,
|
||||
columns,
|
||||
localTz = "Asia/Kuala_Lumpur",
|
||||
} = p;
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.set("site", site);
|
||||
params.set("suffix", suffix);
|
||||
params.set("local_tz", localTz);
|
||||
|
||||
const s = serial?.trim();
|
||||
if (s) params.set("serial", s);
|
||||
|
||||
if (day) {
|
||||
params.set("day", day); // simple whole-day export
|
||||
} else {
|
||||
if (!start || !end) throw new Error("Provide either day=YYYY-MM-DD or both start and end.");
|
||||
params.set("start", start); // URLSearchParams will encode '+' correctly
|
||||
params.set("end", end);
|
||||
}
|
||||
|
||||
if (columns?.length) {
|
||||
// backend expects ?columns=... repeated; append each
|
||||
columns.forEach(c => params.append("columns", c));
|
||||
}
|
||||
|
||||
// ensure there's a single slash join for /export/xlsx
|
||||
const root = baseUrl.replace(/\/+$/, "");
|
||||
return `${root}/export/xlsx?${params.toString()}`;
|
||||
}
|
||||
|
||||
/** Parse filename from Content-Disposition (handles RFC5987 filename*) */
|
||||
export function getFilenameFromCD(cd: string | null): string | null {
|
||||
if (!cd) return null;
|
||||
|
||||
// filename*=UTF-8''encoded-name.xlsx
|
||||
const star = /filename\*\s*=\s*([^']*)''([^;]+)/i.exec(cd);
|
||||
if (star && star[2]) {
|
||||
try {
|
||||
return decodeURIComponent(star[2]);
|
||||
} catch {
|
||||
return star[2];
|
||||
}
|
||||
}
|
||||
|
||||
// filename="name.xlsx" OR filename=name.xlsx
|
||||
const plain = /filename\s*=\s*("?)([^";]+)\1/i.exec(cd);
|
||||
return plain ? plain[2] : null;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user