search

fnproject / ui

User interface for fn project.
Apache License 2.0
89 stars 21 forks source link

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

Closed nigeldeakin closed 7 years ago

nigeldeakin commented 7 years ago

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 functions ui - mozilla firefox 26092017 171022 1160px browser width functions ui - mozilla firefox 26092017 171043 450px browser width functions ui - mozilla firefox 26092017 171103 400px browser width functions ui - mozilla firefox 26092017 171114

px browser**

nigeldeakin commented 7 years ago

@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 https://github.com/fnproject/ui/issues/17