📅 Datepicker: set initial range, use unambiguous date format, use `arrow`, dropdown for `timezone` option

[JGreenlee]

set initial date range on datepicker

On the initial load, the user has not selected a date and we fallback to only showing the last week of data. The datepicker should convey this information rather than showing blank initially.

This change sets initial start and end date values to the datepicker. As a result, we will no longer need extra checks for the initial condition when start date or end date have not been set yet. This simplifies the code in a few places.

use unambiguous format on datepicker (D MMM Y)

Consider "1/5/2024" – in the US this seems like January 5, while in most of the world it seems like May 1. Whether we did D/M/Y or M/D/Y, it'd probably cause some confusion since the project is used on an international scale.

So instead of just digits, the new format will be "5 Jan 2024". Unambiguous and still pretty concise.

[JGreenlee]

Here is what the datepicker now shows on the initial load:

[JGreenlee]

Switched to using arrow instead of datetime.

We do not import from datetime anymore, although the datetime object is still used internally (by pandas and by arrow itself)

[JGreenlee]

Added a dropdown for UTC time vs. Local timezone (as described in https://github.com/e-mission/op-admin-dashboard/issues/73#issuecomment-1908770258)

UI now looks like this:

[JGreenlee]

As it turns out, the datepicker does not keep current to "today's" date for the selection. Today, a user reported that the datepicker only allowed them to retrieve data up to January 15 (despite the date today being January 31).

The reason for this is to do with how Plotly Dash works – the DatePicker component gets generated once when the dashboard is deployed, and does not update on every page load. Our last production deployment was Jan 15, so that is what it is locked to.

Described in https://community.plotly.com/t/refreshing-the-start-date-everyday-for-datepickersingle/22234

According to https://dash.plotly.com/live-updates ("Updates on Page Load"), if we define the page content as a function rather than a variable, it will be generated on each page load / refresh.

[JGreenlee]

Fixed in d9c7df2915431b9fd0258e4502e0bd31a2083a3e

To prove that it was actually updating and for the purpose of testing, I injected a simple Span with a fully printed out datetime.

Every time I refresh, the 'seconds' updates, which proves that the controls are being re-computed.