Add year chart

[peterdesmet]

Load a calendar heatmap in year-chart with data on the selected bird. The calendar is similar to a Github calendar and should/could show the distance from catch location, as that gives an indication if the bird is breeding or migrating.

Tasks

• [x] 12 months horizontally
• [x] 7 days vertically
• [x] Labels for months
• [x] Labels for days of the week
• [x] Load a metric in each block (e.g. average distance from home)
• [ ] Decide on metric with @ericstienen and separate in useful blocks: e.g. average distance from home, with grey (no data), close to catch location (blue), and migrating (pink).
• [x] Add legend
• [x] Show a tooltip with the chosen metric when hoovering over a day (use Bootstrap tooltips, cf. GitHub)
• [x] Think about mobile reloading (as SVG is fixed width)

[bartaelterman]

There are a couple of issues here:

1. Labels for days of the week is not standard included in the cal-heatmap library. I know the github chart has them, but the cal-heatmap documentation does not explain how to get them. I also don't really like them.
2. The github chart shows no clear separation between the months. There is only one way to do that with cal-heatmap, and that is to set the domain to be years and the subdomain to be days. However, you can only add labels for domain (above or below), and for the subdomain (in each cell). So if you want labels for the months, you have to use "months" as domain, resulting in empty space between months. You can checkout the release-2 branch to see what I mean.
3. What do you mean with "each block"? There is only year-chart right? I'm currently implementing the maximum distance from home, as we did in the first release.
4. The legend scale will definitely need to be discussed to make sure we don't end up with only 2 colors (as most of our data will be either very close to home, or very far away from home). I want to get the whole explorer back operational right now. The metrics and the legend can be optimized afterwards.

[peterdesmet]

1. Ok to drop them, just label axis something like "Weekday"?
2. I have release-2 running locally. What should I see? With months as subdomain, do you mean like example 6 here? That might be an option (ask Eric if this makes sense)... otherwise, go for days without month labels and rely on labeling the axis Months.
3. By each block I just meant: load data in each square on the chart.
4. OK on priorities.

[bartaelterman]

1. Ok, I'll see how I can do that
2. A heatmap is only shown if you select a bird that actually has data. Currently, you should know which bird to select (eric, luc, jurgen, anne, ...) because most of the birds don't have data yet.
3. ok
4. ok

[peterdesmet]

Seeing it live, I would:

• [x] Not add a y-axis label
• [x] Continue to use months as subcategories: the month labels are more useful that it is bothersome that the chart is broken up in chunks
• [x] Remove the legend, especially if there are no numbers. It will also balance the height of the chart.
• [x] Set the color for no data to #dddddd, which gives a bit more contrast with the gray background.
• [x] Optional: detect the width of the container and stretch the chart accordingly. Note that with the bootstrap grid the width will have distinct values, not everything in between.

[bartaelterman]

As requested in #27 the metric is now distance travelled instead of distance from catch location.

[bartaelterman]

@peterdesmet what shall we display when a bird has no data? Currently, no chart is being rendered. If a chart was present from a previous bird, it is destroyed. We could show a message No tracking data for this bird yet.

[bartaelterman]

Width of the container is now detected (see 859795c). The calendar is not really stretched, but the number of domains rendered is based on the width of the container. The formula is nr = Math.floor(svg.width / 88) where 88 is empirically defined, but dependent on the cell size set (currently: 14). We cannot define this value correctly because: a month with 30 days starting on sunday will have 6 columns (96 pixels) while a month starting on monday will have 5 columns (80 pixels) and it is very hard to determine all that in advance. So I'm using the average, and this seems to work fine. Note that the width of the svg cannot take any number of pixels. There is a limited number of allowed widths. For all of these, the algorithm works fine. Sometimes it leaves some space, but never enough to allow for an additional domain to be rendered.

[peterdesmet]

Haven't checked it yet, but your formula seems to be a good solution.