amar-gill/clima-viz

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

clima-viz's Issues

sunrise and sunset times based on elevation angle calculations off due to TZ

the UTC offset calculation SolarCalculator.calculateUTCOffset is based strictly on longitude which geometrically speaking is correct. But in practice TZs are friggin weird.

i.e. Madrid, Berlin and Warsaw share the same TZ (+2) despite spanning a large longitudinal range.

Maybe look into geo-tz package to get the correct UTC offset to return? How can we use strictly lat / lng points?

It starts with localSolarTime method. Can add optional argument to override the default calculation that is strictly based on longitude.

  public calculateUTCOffset(position = this.position): number {
    return Math.round(position.lng / 15);
  }

  public localSolarTime(dayOfYear: number, elapsedMinutes: number): number {
    // TODO this can be saved as a constant outside the method
    const localSolarTimeMeridian = 15 * this.calculateUTCOffset();

    const timeCorrection =
      4 * (this.position.lng - localSolarTimeMeridian) +
      this.alternateEquationOfTime(dayOfYear);

    return (elapsedMinutes + timeCorrection) / 60;
  }

easy example to work with: Seoul calculates as +8 based on lng. But in reality it is +9 because why.

use geoapify react component instead of leaflet plugin

see docs:

https://apidocs.geoapify.com/samples/autocomplete/react-geoapify-geocoder-autocomplete/

vs. initial attempt with plug in:

https://github.com/geoapify/leaflet-address-search-plugin

performance - use SSG on solar-calculations page for arrays

No point mapping new arrays of dates for each chart for each state change. Terribly performant.

Can generate all that info at build time with SSG. The only real challenge is leap years. Can ignore handling leap years for now.

calculator performance - use time stamps in functions instead of Date object to help chart rendering

Each run of a calculator method to generate a point on a chart, requires instantiating a brand new date object.

Alternative approach is to have a single date object, and keep updating it's present time with prototype.setTime(Date.now()) -- Date.now() is a static method and is more performant than doing dateFns.addDays(startDate, i) 365 times for each chart.

Or we can simply use an array of timestamps.

Calculator method should also accept time stamps instead of Date type to facilitate this.

performance - charts - make new api route to generate data and options for each chart, based on year

Route params:

• position - to instantiate calculator class
• year - to generate data / labels

If api returns all options / data for each chart, we can deprecate the existing chart components, and use <Line> component directly in index.ts

solar data api performance

The api performs several array maps using different calculator methods.

We should develop a new method that gives all the data points per chart per day. Because each method for individual chart requires many of the same calculations, resulting in duplication of work.

Then we can have a single map inside api end point.

array.map((date) => calc.getAllData(date))

getAllData(date): {prop1, prop2, prop3 etc...}