Add brushing to sub line chart

[peterdesmet]

The user should be able to select a specific range on the sub line chart to be displayed on the main chart.

• [x] Date range: fixed at one year (so the width of the window is fixed)
• [x] Brushing steps: one month
• [x] Brushing triggers an update in the main chart:
  • Update happens immediately (drawing data left and right) OR
  • Update happens on click release (drawing can happen in place)
• [x] Selection is indicated on the sub line chart

[peterdesmet]

Finished in 8f490b13223fdc6cc5f39802b27b2a0377661702. Please review

Remarks

1. The detailed chart loads all x-axis ticks beforehand. Some of the labels might appear cut off on the left. Not much I can do if we want those labels ("YYYY-MM" on the first of the month, evenly spaced).

   

2. The selected year is indicated with two lines, not a region (as region API is buggy):

   

3. On page load, the last year is shown in the detailed chart, but this range is not indicated in the overview chart. Should it (bit tricky with async)?
4. The detailed chart will always show one year + 1 one day, e.g. from 2001-01-01 to 2002-01-01. OK?

[bartaelterman]

I tested it, and I think it looks and works great!

I don't see labels of the x axis cut off. I do get cut off labels on the y axis when the labels contain decimal values:

This can be easily fixed by setting a slightly larger margin.

I do would try to show the vertical bars for the region displayed on page load. The range (one year + 1 day) is fine. I wondered why you added 1 day, but it's not confusing in the chart so that's fine.

[peterdesmet]

Margin issue fixed in 1360ea5d5511124a3088033e64e973d3de651cdf

[peterdesmet]

One day is added to the year by the moment.js library. I do: take a date (e.g. 2013-03-21) and it subtracts and adds 6 months: 2012-09-21 to 2013-09-21.

I'll document the on page load bars in another issue.