Adding new solar page

This commit is contained in:
Khalim Conn-Kowlessar 2024-07-10 12:55:41 +01:00
parent 5927a7d2be
commit 36c6e33a38
2 changed files with 79 additions and 2 deletions

View file

@ -89,3 +89,17 @@ export interface SolarInterface {
updatedAt: Date;
googleApiResponse: GoogleApiResponse;
}
export interface RoofSegment {
segmentIndex: number;
areaMeters2: number;
groundAreaMeters2: number;
sunshineQuantiles: number[];
center: {
latitude: number;
longitude: number;
};
pitchDegrees: number;
azimuthDegrees: number;
planeHeightAtCenterMeters: number;
}

View file

@ -3,9 +3,13 @@ import {
LightBulbIcon,
SunIcon,
InformationCircleIcon,
CloudIcon,
SparklesIcon,
} from "@heroicons/react/24/outline";
import { getPropertyMeta } from "../utils";
import { getSolarData } from "./utils";
import FeatureTable from "@/app/components/building-passport/FeatureTable";
import { roofSegmentsColumns } from "./roof-segments-table";
export default async function SolarAnalysisPage({
params,
@ -33,11 +37,41 @@ export default async function SolarAnalysisPage({
panelHeightMeters,
panelCapacityWatts,
panelLifetimeYears,
maxSunshineHoursPerYear,
carbonOffsetFactorKgPerMwh,
roofSegmentStats,
} = solarData.googleApiResponse.solarPotential;
const getDirectionFromAzimuth = (azimuth: number): string => {
if ((azimuth >= 330 && azimuth <= 360) || (azimuth >= 0 && azimuth < 30))
return "N";
if (azimuth >= 30 && azimuth < 60) return "NE";
if (azimuth >= 60 && azimuth < 120) return "E";
if (azimuth >= 120 && azimuth < 150) return "SE";
if (azimuth >= 150 && azimuth < 210) return "S";
if (azimuth >= 210 && azimuth < 240) return "SW";
if (azimuth >= 240 && azimuth < 300) return "W";
if (azimuth >= 300 && azimuth < 330) return "NW";
return "";
};
const transformedRoofSegmentStats = roofSegmentStats.map(
({ segmentIndex, stats, center, azimuthDegrees, ...rest }) => ({
...rest,
areaMeters2: stats.areaMeters2.toFixed(1),
groundAreaMeters2: stats.groundAreaMeters2.toFixed(1),
azimuthDegrees: azimuthDegrees.toFixed(1),
center: {
latitude: center.latitude.toFixed(6),
longitude: center.longitude.toFixed(6),
},
sunshineQuantiles: stats.sunshineQuantiles.join(", "), // Join sunshineQuantiles into a string
direction: getDirectionFromAzimuth(azimuthDegrees),
})
);
return (
<div className="leading-loose tracking-wider">
<div className="flex py-8 text-lg">Solar Analysis</div>
<div className="py-8 max-w-7xl mx-auto">
<div className="bg-white shadow-md rounded-lg p-6 mb-8 w-full">
<h2 className="text-l font-semibold text-gray-800 mb-4">
@ -70,7 +104,36 @@ export default async function SolarAnalysisPage({
</div>
</div>
</div>
{/* Add more sections here as needed */}
<div className="bg-white shadow-md rounded-lg p-6 mb-8 w-full">
<h2 className="text-l font-semibold text-gray-800 mb-4">
Weather and Environmental Data
</h2>
<div className="flex flex-col space-y-4">
<div className="flex items-center p-4 bg-indigo-50 rounded-lg shadow w-full">
<CloudIcon className="w-6 h-6 text-indigo-500 mr-2" />
<p className="text-lg text-gray-700">
Max Sunshine Hours per Year: {maxSunshineHoursPerYear} hours
</p>
</div>
<div className="flex items-center p-4 bg-teal-50 rounded-lg shadow w-full">
<SparklesIcon className="w-6 h-6 text-teal-500 mr-2" />
<p className="text-lg text-gray-700">
Carbon Offset Factor: {carbonOffsetFactorKgPerMwh} kg/MWh
</p>
</div>
</div>
</div>
<div className="bg-white shadow-md rounded-lg p-6 mb-8 w-full">
<h2 className="text-l font-semibold text-gray-800 mb-4">
Roof Segments Data
</h2>
<FeatureTable
data={transformedRoofSegmentStats}
columns={roofSegmentsColumns}
/>
</div>
</div>
</div>
);