Add label, color, scale and trend options to the GLQL bar list

What does this MR do and why?

The GLQL barList display type gains three displayConfig options, each defaulting to the existing behaviour so no current panel changes:

• valueLabels: value labels each bar with the full count alone, in bold (for example 1,071), instead of the default shareAndValue label like 89% · 85.6k.
• color: blue draws bars in the chart palette's first colour, the same blue the other GLQL charts use for their first series. Default stays orange.
• scale: max sizes bars against the largest row, which fills the track. Default total keeps bars as a share of the whole. Labels still show the share of the total under either scale.

With showTrends: true in the dashboard panel's visualization options (the same option GLQL stat and table panels use), each row's label ends in a pill showing the signed change against the previous period, for example +7% or -4%, coloured from the GlBadge success, danger and neutral tokens. A move away from zero reads New. A row with no counterpart in the previous period gets no pill. The Other (N) roll-up row compares the sum of its folded rows, and gets no pill if any folded row is unknown.

Rows are paired on dimension identity using the helpers introduced by the table trend column MR (withTrendValues, hasUniqueRowKeys, hasTemporalDimension in app/assets/javascripts/glql/components/presenters/utils/table.js), with the same guards: no date-bucketed dimensions, no duplicate identities on either side. formatSignedChange was added to app/assets/javascripts/glql/components/presenters/utils/trend.js.

The pill is ECharts rich text inside the chart's SVG, because the label is drawn by the chart, not by Vue. GlChart's SVG renderer resolves the CSS variables.

The motivation is the DAP Impact "Users by activity" design, which shows user counts with a previous-period change on bars sized against the largest activity.

Files touched: app/assets/javascripts/analytics/analytics_dashboards/components/visualizations/bar_list_chart.vue (chart props valueLabels, color, scale, rich-text pill), new bar_list_chart_options.js (shared option constants), app/assets/javascripts/glql/components/presenters/bar_list.vue (reads displayConfig, pairs previous-period rows), data.vue (forwards comparisonData and source to the bar list presenter), Storybook stories, docs in doc/user/glql/display_types.md (Bar list section), and Jest specs.

References

Related issue: https://gitlab.com/gitlab-org/gitlab/-/work_items/628026 (DAP Impact V1: Users by activity visualization)

Builds on !254539 (merged) (merged), which introduced the previous-period trend pairing helpers this MR reuses

The bar list display type was introduced in !252906 (merged)

Screenshots or screen recordings

"Before" is the unchanged default look of a bar list panel (orange bars, share-and-value labels), shown here by the "Where credits went" panel, which this MR does not change. "After" is the "Users by activity" panel with valueLabels: value, color: blue, scale: max, maxRows: 20 and showTrends: true. Only dark mode was rendered.

Before	After

How to set up and validate locally

1. Enable ClickHouse in the GDK and seed some AgentPlatformSession data.

2. Edit the "Users by activity" panel in ee/lib/gitlab/analytics/dashboards/system/dap_impact.yaml to this GLQL block, and add showTrends: true under visualization.options:

   display: barList
   displayConfig:
     valueLabels: value
     color: blue
     scale: max
     maxRows: 20
   mode: analytics
   query: type = AgentPlatformSession and created >= "%{startDate}" and created <= "%{endDate}"
   dimensions: flowType
   metrics: usersCount

3. Run gdk restart rails-web. The system dashboards loader caches the YAML, so this is needed to pick up the edit.

4. Open http://127.0.0.1:3000/explore/analytics_dashboards/dap_impact?view=1 and choose a group in the scope picker.

The Storybook stories ValueLabels and WithTrends under analytics/analytics_dashboards/components/visualizations/bar_list_chart show the new options without a backend.

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.

🤖 Generated with Claude Code