Loading
Add bar list chart visualization component
What does this MR do and why?
Adds a BarListChart visualization component, Storybook stories, and specs for the analytics dashboards system.
Renders a horizontal bar list: one row per entry, with a right-aligned category label, a full-width track, a proportional filled bar, and an 89% · 85.6k label past the bar's end. No x-axis or gridlines.
Storybook only for now. Deliberately not registered in visualizations/index.js, so it isn't yet a selectable dashboard visualization type — that comes with the follow-up panel work.
Design notes:
- Bar length is each row's
shareof the total, not scaled against the largest row, so a bar's length reads as its percentage of the whole. The component doesn't sort or deriveshare— the caller does, so an "Other (N)" rollup row can carry the true total's share. - Built on base
GlChart, notGlBarChart.GlBarChartbuilds its own series and appends any calleroption.seriesas an extra series rather than merging, so a serieslabelandshowBackgroundare unreachable, and fill opacity is fixed at 20%. This design needs all three. - Fills its container height, same as
area_chart.vue/line_chart.vue.
References
- https://gitlab.com/gitlab-org/gitlab/-/work_items/623319+
- https://gitlab.com/gitlab-org/gitlab/-/work_items/624280+
- https://gitlab.com/gitlab-org/gitlab/-/work_items/622518+
Screenshots or screen recordings
| full size | smaller size |
|---|---|
![]() |
![]() |
How to set up and validate locally
yarn storybook:start- Open
http://localhost:6006/?path=/story/analytics-analytics-dashboards-components-visualizations-bar-list-chart--default - Step through the five stories:
Default,LongTail,EvenDistribution,LongCategoryLabels,InDashboardPanel VUE_VERSION=3 yarn jest spec/frontend/analytics/analytics_dashboards/components/visualizations/bar_list_chart_spec.js
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Ezekiel Kigbo

