Sun Inclination Calculator

Calculates and presents details of the sun's inclination for a chosen date and place (latitude, longitude & UTC offset)

• Deployed here: https://react-sunpos.simontharby.com/
• Accurate to +/- 1 minute (time), when compared to https://www.timeanddate.com/sun/
• Includes validation of form inputs
• Reasonably responsive layout (mobile x desktop)
• Makes use of Recharts charting library
• I'm still learning the basics of React, so don't take this implementation as exemplary!

Acknowledgement

• Algorithm to find inclination of sun for specific location and time based on: https://gml.noaa.gov/grad/solcalc/solareqns.PDF

Resources

• Tutorial: Intro to React
• Adding Bootstrap
• Recharts
• How to do Simple Form Validation in #Reactjs
• Setting up a custom domain for your React app on GitHub Pages

Development Phases

1. Create placeholder components.

• Pass value from parent child (via prop)
• Add Bootstrap & basic styling
• Modularize: each component in a separate file

screenshot:

2. Develop date-picker

• Pass value from date input to output
• Clean up basic form styling (use Bootstrap styling)
• Limit dates to 2002 - 2042

screenshot:

3. Develop basic chart plotting that dynamically updates

• Add recharts npm dependency and get basic static example working
• Pass input values to chart and dynamically update chart (simple example)

chart.mov

4. Rework simple form to get latitude, longitude and timezone (offset from UTC), and the existing date input

• Rename existing input components (and labels) accordingly
• Add input for timezone offset
• Ensure only valid values can be inputted
• Display useful validation errors and highlight invalid input elements
• Simplify props flow (really only need flow from parents to children)
• Add selection of presets (to showcase and illustrate functionality more easily)
• Improve responsiveness of layout (best on large screen, but now OK on mobile)

screenshot:

5. Calculate sun position (every minute of day = 1440 data points)

• Start by passing data to a function (as module) from page component, then on to chart after manipulating data in the function
• Plot sun's inclination over day

screenshot:

6. Calculate sunrise, sunset and zenith of sun (if any), as position is calculated for every minute

• Account for locations which may have 24-hour day or night.
• Present details in table
• Add daylight / darkness percentage graphic and duration details
• Finalise layout