94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Legend,
|
|
} from 'recharts';
|
|
import { SiteDetails } from '@/types/SiteData';
|
|
|
|
interface MonthlyBarChartProps {
|
|
siteData: SiteDetails | null;
|
|
}
|
|
|
|
const consumptionColor = '#003049';
|
|
const generationColor = '#669bbc';
|
|
|
|
// Month names for X-axis labels
|
|
const MONTHS = [
|
|
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
|
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
|
|
];
|
|
|
|
const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteData }) => {
|
|
const chartData = React.useMemo(() => {
|
|
if (
|
|
!siteData ||
|
|
siteData.consumptionData.length === 0 ||
|
|
siteData.generationData.length === 0
|
|
) {
|
|
return [];
|
|
}
|
|
|
|
// Initialize totals
|
|
const monthlyData = Array.from({ length: 12 }, (_, month) => ({
|
|
month: MONTHS[month],
|
|
consumption: 0,
|
|
generation: 0,
|
|
}));
|
|
|
|
// Group daily data into months (assume data is in order from Jan 1 to Dec 31)
|
|
// Group daily data into months (assume data is in order from Jan 1 to Dec 31)
|
|
for (let i = 0; i < siteData.consumptionData.length; i++) {
|
|
const monthIndex = Math.floor(i / 30.42); // Rough approximation
|
|
if (monthIndex < 12) {
|
|
monthlyData[monthIndex].consumption += siteData.consumptionData[i];
|
|
monthlyData[monthIndex].generation += siteData.generationData[i];
|
|
}
|
|
}
|
|
|
|
// ✅ Only return the last 6 months
|
|
return monthlyData.slice(-6);
|
|
|
|
}, [siteData]);
|
|
|
|
if (!siteData || 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">No data available for chart. Please select a site.</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;
|