Tonyvanswet/ele 1346 UI panel rankingintro

[tonypls]

Started on ranking panel.

Realised that we need the translations and a solid way to shape the data.

I'd mostly like feedback around how we handle the fetching, caching and shaping of data.

Here's my logic around the process here:

Use react query solely for fetching and caching the data blobs returned by the apis, useGetState / useGetDetail will always mirror the last api response for the given time period we're interested in i.e. Month

Use the useMemo hook for calling functions that map that data from useGetState / useGetDetail based on the datetime we're interested in and the data shape that suits the function.

I tried loading all the logic into useQuery and yes it's possible to create more hooks to do the data shaping, I feel like we already have the benefit of react query (stale time etc) at the api level and useMemo makes things a bit more simple.

[Kongkille]

Heyo @tonypls,

I've moved some things around on the map logic (#27) to get the colors blazingly fast. To do so, we separate the geometries from map data.

That is slightly different than this version, so to not disrupt your work, i've created a new PR #32 which follows up on this PR.

Overall I agree with your thoughts on when to useMemo, however, in this case I removed the useMemo because setting up a memo on a value that depends on the datetimeindex is probably not worth it due to the initialization costs. It works pretty fast now, if we want to speed it up we can do some other things, such as only rendering the top 10 results or something like that.

There may be some cases on using memo for derived data-states but otherwise we should consider when we're using memo whether it makes more sense to just send the data directly from the app-backend instead of computing it in the frontend.