Implement timeline

[stevenguh]

There are two large bodies of work included in this issue.

First, implementation the data structure of the timeline should be able to power heatmap, timeline and notification (#7). I am thinking this would utilized the IndexDB in the browser and its ability to query data. Maybe we can utilized Dexie.js wrapper to simplify the access espically it's filter on the date dexie/Dexie.js#748. However, some older browser might not support IndexDB, we can either drop support for those are polyfill an in-memory IndexDB implementation.

Second big body of work is to figure out the UX/UI and implement it. This can largely work in parallel with the first work. I am thinking about the timeline will be scrollable and only show every touches on the timeline in the past hour, and show a aggregated number of touches for the rest of the timeline. A user can scroll/drag a control to change which hour to see all the touches. No matter what we come up, we need to figure out how to facilitate that UX, may that be d3.js or simple DOM element with react.js.

A rough view of that concept:

3h ago       |    53 m ago   30m ago
2 times      |    touch      touch
   |         |     |          |
-------------------------------------
         |               |
     5 times            touch
     2h ago             45m ago

• Implement the structure to facilitate both heatmap and timeline
• Convert the heatmap to use this structure
• Figure out the UX for the timeline
• Implement the timeline UI
• Timeline may have granularity control