Break out legend into a separate HTML element and adjust chart widths

[nigeldeakin]

In this change I have rewritten the legend code so that the legend is a separate div which we can style directly. Previously the legend was part of the chart canvas so we could to control it directly. The legend is now floated on top of the chart, with each legend entry in a neat vertical list.

I have also changed the responsive styles used to determine how many charts are displayed in a row. This is very easy to change, but currently I have it so that
Displays wider than 1500px: 4 charts/row
Displays wider than 1160px up to 1499: 3 charts/row
Displays wider than 450px up to 1159: 2 charts/row
Displays narrower than 449px: 1 chart/row
The transitions are defined at the bottom of StatsChart.vue. Inevitably close to the transition points the chart may be wider or narrower than is ideal: this is a matter of judgement.

Screenshots:
1500px browser width

1160px browser width

450px browser width

400px browser width

px browser**

[hibooboo2]

👍 What happens when there are a ton of functions registered?

[nigeldeakin]

@hibooboo2 If there are lots of functions then the chart has lots of lines on it, and the legend above it had many rows.

I have suggested that I add charts to the "app" page (the page you see if you click on a particular app) that show only the functions for that app. That might make things more manageable (and would be fairly easy to implement). Also I could add charts for individual functions. I've logged issue #17