Telegram Chart Contest: Round 2

These charts are made with canvas. Apparently drawing SVG is not too performant (also animating complex SVG transitions would drive me crazy). Canvas content is animated via JavaScript, everything else is handled by browser.

When using two Y axes, there's a fixed coefficient linking them together. This way, they always animate as one, without jarring separation.

Zooming on mobile is performed by tapping on selection tooltip. However, on desktop the tooltip is moving as you move your mouse cursor. So on desktop zooming works by clicking not on the tooltip, but on the chart itself.

Data for zoomed in mode is fetched from server dynamically, on zoom. However, to ensure a smoother transition, it is prefetched early, when user selects a point. And to prevent firing requests too frequently, a debounce with a 250ms delay is applied.

As was noted in the review of the first stage, resizing active area via mouse wheel on overview broke page scrolling (on desktop). To resolve this issue, zooming with mouse wheel is now available only while holding Ctrl key.

It would be nice to display dates/times in the user's time zone. However, the provided zoomed-in data start from 00:00 UTC, so I assumed GMT+0 instead of a local time zone (otherwise there would be a gap at the start or the end of the 7 day chart). In a more real-world scenario, the data for the ±3 day range will be queried via API, so a correct time zone could be used instead.

Another minor flaw is that the zoomed-in data ends at 23:00 UTC. This creates a small gap when viewing the last day.