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 share of 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 derive share — the caller does, so an "Other (N)" rollup row can carry the true total's share.
  • Built on base GlChart, not GlBarChart. GlBarChart builds its own series and appends any caller option.series as an extra series rather than merging, so a series label and showBackground are 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

Screenshots or screen recordings

full size smaller size
analytics-analytics-dashboards-components-visualizations-bar-list-chart--in-dashboard-panel bar-list-chart--default-468px

How to set up and validate locally

  1. yarn storybook:start
  2. Open http://localhost:6006/?path=/story/analytics-analytics-dashboards-components-visualizations-bar-list-chart--default
  3. Step through the five stories: Default, LongTail, EvenDistribution, LongCategoryLabels, InDashboardPanel
  4. 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

Merge request reports

Loading
Loading