Change chart legend format to tabular format
Problem to solve
Currently, our charts legends reside below each chart, following a format of Label Avg Max split into multiple columns, e.g.
Grafana has a very nice format, where it shows the legends in a single column, even adding some shades of colors to help distinguish odd from even rows.
We should probably use that format if possible, but there are some caveats.
- Do we want to create our own legend component? This would allow us to iterate a little bit faster as we have the control of the code from the get-go but it could also slow us down by introducing bugs and or unexpected regressions
- Do we want to contribute to echarts upstream? A little bit slower as we're not familiar with the echarts codebase, but this would make a good case to give back to them as they've been really helpful to us in the past.
Intended users
Further details
Design Proposal
We should not override the legend style that other GitLab charts are using right now. Only charts in Operations > Metrics and Kubernetes > Health should be updated.
gitlab-ui should support both views and enable them by configuration (e.g. legend-format). We can let the client (our dashboards) decide which mode to display.
Heatmap chart and single stat charts doesn't have to be updated to tabular format. The rest of the charts should benefit from the new layout.
| Legend scroll | Legend item hover | Disabled legend item | Scroll area |
|---|---|---|---|
 |
 |
 |
 |
In case of long metric labels or values we should enable horizontal scroll on the legend.
Design issue - #202145 (closed)