Create tick range for both charts
Closed this issue · 12 comments
Here's the problem: For the overview and detailed chart (see #27 and #26) we want nice, evenly spaced ticks on the x-axis, always on the first of the year or month. This can only be done by loading an array with the dates for all those ticks (otherwise C3 decides on which dates to place ticks).
All of this currently functions, but for the array of ticks I need the know the extent of the data (i.e. the first and last dates), on a day precision (YYYY-MM-DD). As the ticks are part of the chart creation, I need these data before I call any other functions.
So, is it possible to create an endpoint where I get back two values: the first and last dates in the data, i.e. the extent?
https://epu-index.herokuapp.com/api/extent/?format=json
Result: [2001-01-05,2013-12-15]
Other suggestions on how to solve this are welcome, but the current JS code is structured quite nicely and works well.
What's wrong with doing it in JS with d3.extent()?
This are the steps I need to take:
- Get to know the extent
- Draw the charts with the known extent
- Get all month data for the overview chart
- Get one year's worth of day data for the detailed chart
Alternatives to a separate service
In step 1, I could use the same service as in step 4: request all data via the day API and then do d3.extent(), but wouldn't it be a waste of broadband to ask ALL data to basically only get two values? Note that in step 4 I don't request all day data, just day data for one year.
I could also use the same service as in step 3: request all month data and then do d3.extent(). Since I need to ask all data in step 3 anyway, I can reuse the data, BUT the month aggregate might not give me the true extent of the data: e.g. per month 2010-01 - 2013-12, while the actual extent is 2010-01-09 - 2013-12-14.
Maybe I could cheat and use the month data and then apply -01 to the first and -31 to the last date to just cover everything, but 31 isn't always correct.
BUT the month aggregate might not give me the true extent of the data
Ok, now I get the issue. But what do you use the entire extent for? Because for the overview chart, the extent of the per-month data is probably what you need. And for the per-day chart, you'll need the extent of the region you'll display.
So why not do:
- Get all month data
- Determine the extent and the extent of the last year
- Draw the overview chart
- Get the day data
- Draw the day chart
I'll try to use the month API. Since for the ticks we don't need the actual range, but just one that is big enough to include the actual range, I'll take the first of the first month and the first of the next month. So, for a range of 2001-01-05,2013-12-15 I would make 2001-01-01,2014-01-01.
Blocked by #39
So @niconoe, no work is required from you regarding this issue.
@bartaelterman, I now use the month api to calculate the extent (b191ad0).
Since I only get months back, I hardcode the day to -01. So, I currently get: [2000-01-01, 2015-05-01]. As the last date is probably not the first of the month (it is actually 2015-05-06), I add another month for creating the ticks: [2000-01-01, 2015-06-01], covering the whole range. I also reuse the month data for loading the overview chart (89c72b4). So all of that works fine.
However, I also need an initial date for loading the detailedChart. Normally we want to show the last year in the data. That would be: [2014-05-06, 2015-05-06]. However, I cannot retrieve 2015-05-06 from the month data. How would you solve this?
Use 2015-05-01
The detailed chart will show a full year [2014-05-01, 2015-05-01] including the latest full month, but excluding more recent data. That leads to the odd situation we have now, where we have data for 2015-05-06 which generates the spike in the overview chart, but no data beforehand (i.e. in the selected range for the overview chart), which causes the overview chart to be empty. Regular visitors of the website won't see any changes in the detailed chart until the month is over (not good).
Use 2015-06-01
The detailed chart will show a bit less then a full year [2014-06-01, 2015-05-06]. It won't show a full [2014-06-01, 2015-06-01], as dates with no data at the start or finish of a range ar not displayed (which leads to some odd effects if the data are not evenly distributed: maybe to be discussed?). At least the most recent data is included.
Use today
Similar situation as above, but the selected date is not necessarily one with -01 at the end. If the project is discontinued however and no more data are collected, the detailed chart will always load empty.
I would go for 2014-06-01 - 2015-06-01. In fact, I think the fact that those last days having no data are not shown is a good thing. The range is not an entire year, but I think that's fine. By the way, if I would click in the small chart on the last day, then what would be the result of your -6 months/+6 months function? Does that return a full year?
If you click on the last point (not day) in the overview chart, the selectedDate would be 2015-05-01T00:00:00 UTC (i.e. the last month with data). The range is then: [2014-11-01, 2015-11-01]. The detailedChart would only show data from [2014-11-01, 2015-05-06] or in the current case, where there is no data for 2014: [2015-05-05, 2015-05-06].
Then I think using 2014-06-01 - 2015-05-06 as initial range is consistent with this behaviour.
OK, done in 27219ce.