140 lines
4.2 KiB
TypeScript
140 lines
4.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Legend,
|
|
} from 'recharts';
|
|
import { format } from 'date-fns';
|
|
import { fetchPowerTimeseries } from '@/app/utils/api';
|
|
|
|
interface MonthlyBarChartProps {
|
|
siteId: string;
|
|
}
|
|
|
|
interface TimeSeriesEntry {
|
|
time: string;
|
|
value: number;
|
|
}
|
|
|
|
const groupTimeSeries = (
|
|
data: TimeSeriesEntry[],
|
|
mode: 'monthly'
|
|
): TimeSeriesEntry[] => {
|
|
const groupMap = new Map<string, number[]>();
|
|
|
|
for (const entry of data) {
|
|
const date = new Date(entry.time);
|
|
const key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
|
|
if (!groupMap.has(key)) groupMap.set(key, []);
|
|
groupMap.get(key)!.push(entry.value);
|
|
}
|
|
|
|
return Array.from(groupMap.entries()).map(([time, values]) => ({
|
|
time,
|
|
value: values.reduce((sum, v) => sum + v, 0),
|
|
}));
|
|
};
|
|
|
|
const consumptionColor = '#003049';
|
|
const generationColor = '#669bbc';
|
|
|
|
const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteId }) => {
|
|
const [chartData, setChartData] = useState<
|
|
{ month: string; consumption: number; generation: number }[]
|
|
>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!siteId) return;
|
|
|
|
const fetchMonthlyData = async () => {
|
|
setLoading(true);
|
|
const start = '2025-01-01T00:00:00+08:00';
|
|
const end = '2025-12-31T23:59:59+08:00';
|
|
|
|
try {
|
|
const res = await fetchPowerTimeseries(siteId, start, end);
|
|
|
|
const groupedConsumption = groupTimeSeries(res.consumption, 'monthly');
|
|
const groupedGeneration = groupTimeSeries(res.generation, 'monthly');
|
|
|
|
const monthMap = new Map<string, { consumption: number; generation: number }>();
|
|
|
|
for (const entry of groupedConsumption) {
|
|
if (!monthMap.has(entry.time)) {
|
|
monthMap.set(entry.time, { consumption: 0, generation: 0 });
|
|
}
|
|
monthMap.get(entry.time)!.consumption = entry.value;
|
|
}
|
|
|
|
for (const entry of groupedGeneration) {
|
|
if (!monthMap.has(entry.time)) {
|
|
monthMap.set(entry.time, { consumption: 0, generation: 0 });
|
|
}
|
|
monthMap.get(entry.time)!.generation = entry.value;
|
|
}
|
|
|
|
const formatted = Array.from(monthMap.entries())
|
|
.sort(([a], [b]) => a.localeCompare(b))
|
|
.map(([key, val]) => ({
|
|
month: format(new Date(`${key}-01`), 'MMM'),
|
|
consumption: val.consumption,
|
|
generation: val.generation,
|
|
}));
|
|
|
|
setChartData(formatted.slice(-6)); // last 6 months
|
|
} catch (error) {
|
|
console.error('Failed to fetch monthly power data:', error);
|
|
setChartData([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchMonthlyData();
|
|
}, [siteId]);
|
|
|
|
if (loading || !siteId || chartData.length === 0) {
|
|
return (
|
|
<div className="bg-white p-4 rounded-lg shadow-md dark:bg-gray-800 dark:text-white-light">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<h2 className="text-lg font-bold pb-3">Monthly Energy Yield</h2>
|
|
</div>
|
|
<div className="h-96 w-full flex items-center justify-center">
|
|
<p className="text-white/70">
|
|
{loading ? 'Loading data...' : 'No data available for chart.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white p-4 rounded-lg shadow-md dark:bg-gray-800 dark:text-white-light">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<h2 className="text-lg font-bold pb-3">Monthly Energy Yield</h2>
|
|
</div>
|
|
|
|
<div className="lg:h-[22.6vw] h-[290px] w-full pt-10">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={chartData}>
|
|
<XAxis dataKey="month" tick={{ fontSize: 10 }} />
|
|
<YAxis tick={{ fontSize: 10 }} />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Bar dataKey="consumption" fill={consumptionColor} name="Consumption (kWh)" />
|
|
<Bar dataKey="generation" fill={generationColor} name="Generation (kWh)" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MonthlyBarChart;
|
|
|