Pretranslation monitoring: Insights page

[mathjazz]

Part 3/3 of #2923.

This PR adds the third and final part of Pretranslation Monitoring, namely the new "Insights" page.

The PR is based on #2929, the first commit specific to this PR is 86283b6, which (together with e48f0d0) is just a preparation for the actual changes introduced in f4f5355.

It is deployed to stage:
https://mozilla-pontoon-staging.herokuapp.com/insights/

TODO:

• Filed an issue to upgrade Chart.js: Upgrade Chart.js #2939

[mathjazz]

Investigating the funkiness of the sl (and All) charts. Seems like an issue with the X-axis.

[mathjazz]

Investigating the funkiness of the sl (and All) charts. Seems like an issue with the X-axis.

Switched from a built-in time-based scale on an X-axis to a default one and that solved the problem.

That charts no longer looks like this:

🤯

Also, we should upgrade the chart library. Will file a bug for that.

[flodolo]

No familiar with the chart library, but would it be possible to have a "select/deselect all" in the legend (or have the "double click = disable all but this" behavior)?

[mathjazz]

Yeah, took me about a second of using the chart to had the same wish. :)

We can render the legend manually in a custom div, which allows for such customization. It will also allow us to align both charts horizontally and enable to scale better when more locales / projects are added. I'll give it a shot.

[mathjazz]

We can render the legend manually in a custom div, which allows for such customization. It will also allow us to align both charts horizontally and enable to scale better when more locales / projects are added. I'll give it a shot.

Done. Cmd + Click or Alt + Click shows only the clicked item. Let me know how it feels.

[flodolo]

Done. Cmd + Click or Alt + Click shows only the clicked item. Let me know how it feels.

Works great. Doesn't feel like it needs a "select all", since you can always reload the page to go back.

[eemeli]

Mostly minor JS issues, see inline. Otherwise fine.

[mathjazz]

Fixed percentages in db32055.

Honestly, I'm not sure I like this approach better, because the values are actual percentages.

[eemeli]

Would recommend that you spin off the "Upgrade Chart.js" todo item into a separately tracked issue, so it's not blocking this PR.