Add stacked two-dimension support to the GLQL bar list

What does this MR do and why?

Lets the GLQL bar list take a second dimension: each row's bar splits into stacked segments with a legend below the chart, so panels like the DAP Impact Spend tab's "Credits by model, by capability" reuse the same component as the other dashboard bar lists.

  • Rows sort descending by value; the first maxRows rows show with a Load more button for the rest, so the biggest contributors lead and every category stays reachable. Secondary values beyond the new maxSeries option roll up into an Other (N) segment.
  • Hiding a series via the legend rescales the remaining segments and row labels to the visible total, since a dominant series (Chat is ~90% of credits) otherwise leaves the rest unreadable. The track background and row labels survive hiding any series.
  • The single-dimension path is unchanged; valueLabels, color, and scale apply to one dimension only, as documented.

References

Needed for the DAP Impact Spend tab: https://gitlab.com/groups/gitlab-org/-/work_items/23470 Builds on the bar list options from !254987 (merged) Consumed by the Spend view panels in !255841 (merged)

Screenshots or screen recordings

Two dimensions (model by capability) on a seeded GDK, with the Other segment roll-up and row-total labels:

modelchart-barlist

How to set up and validate locally

yarn jest spec/frontend/glql/components/presenters/bar_list_spec.js spec/frontend/analytics/analytics_dashboards/components/visualizations/bar_list_chart_spec.js

Or point any analytics GLQL panel at display: barList with two dimensions and one metric.

Edited by Abhinaba Ghosh

Merge request reports

Loading
Loading