perf: use another, faster charts library - echarts

[ivan-aksamentov]

Reimplements charts using echarts instead of recharts.

eharts is based on HTML5 canvas (as opposed to SVG in recharts), and should render much faster.

As a bonus, echarts supports pan&zoom and many other features.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
covariants	✅ Ready (Inspect)	Visit Preview	Jul 19, 2022 at 3:36PM (UTC)

[emmahodcroft]

Hi @ivan-aksamentov I'm sorry for such a delay here! I've just tried this out for Per Country and it's AMAZING. It's so smooth, looks so good, and I love that the overlay boxes are shorter! I ALSO LOVE THE ZOOMING!!!

I actually think this is almost great as it is, but we would need to add counts to the mouse-over-box (as currently shows on Per Country).

Optionally it would be super cool to know how possible the following would be:

• Potentially get rid of the Y-axis line thing for the mouseover - I'm just not sure it's informative. But also no strong feelings. Maybe it is useful?
• Can we set it so that to zoom, you press CTRL+SCROLL (or other button combo) rather than just SCROLL? I found the zoom by accident while trying to scroll down the page. I love it - but - it would be good if it doesn't happen when you're trying to scroll the page!
• Can we add back in some kind of grid bars to be plotted, as we currently have in light grey? I imagine with such a powerful plotting program this may be possible and even be able to scale with zooming. I just think they're a nice touch.

I'm super excited by this! I assume we could also extend to Per Variant & Cases?

[emmahodcroft]

Oh - there is also one small issue - the colors don't seem to be matching up in the mouse-over 🙃

(Actual colors:

)

[ivan-aksamentov]

• [x] Add counts to the mouse-over-box (as currently shows on Per Country)
• [x] Fix colors in the tooltip
• [x] Remove Y-axis pointer on mouseover
• [x] Zoom only when Shift key is pressed. (Ctrl cannot be used because it triggers built-in browser's page zoom).
• [x] Add grid bars
• [x] Also port Cases plots
• [ ] Also port Per Variant plots
• [ ] Resolve linter warnings

[richardgoater]

Hi folks! Just checking this out and I think the dots are still different colours? I could be wrong.

[emmahodcroft]

Good catch @richardgoater - it looks like at least the mouseover legend matches the plot now, but you're right that the dots aren't matching. For me this is a little less critical - I'd be ok if they were just black/grey/neutral colour (if that's easier) - or if they matched. But having them coloured but not matching is a bit odd!

[emmahodcroft]

This makes me sad because of the zooming. :(

[richardgoater]

I will implement zooming soon! 🙏🏽