Add share labels, category colors and subtitles to GLQL bar chart

What does this MR do and why?

This MR adds the display options the DAP Impact dashboard design (GitLab Duo Agent Platform) needs for its "New vs returning" bar chart, extending the GLQL barChart display type and analytics dashboard panels.

  • Adds a categoryLabels: valueAndShare displayConfig option that appends each category's value and its share of the total to the category label, formatted as a count, so a label reads "Returning · 1,555 · 78%". This matches the design's bar labels and only applies with one dimension and one count metric, such as usersCount or totalCount. With several metrics there is no single total to share against, and rates or durations are excluded because a share of a sum of rates has no meaning.
  • Adds a colorBy: category displayConfig option that gives each bar its own solid color from a five-step blue scale, darkest on the top row, set per data point through ECharts item styles because GlBarChart only colors whole series. The point style also sets the border color, so the bar's outline and its tooltip swatch match the fill instead of GlBarChart's default blue. This matches the design's solid, distinct bars and only applies with one dimension and one metric.
  • Adds a showAxisTitles: false displayConfig option that hides both axis titles on one- and two-dimension bar charts, matching the design, while the tooltip still names the dimensions so that context is not lost.
  • Sizes both bar chart variants from their row count, 48px per row plus GlBarChart's grid padding, capped at gitlab-ui's 400px default. Before this, a two-row chart stretched its bars to fill 400px and overflowed the dashboard panel body, which scrolls. Tiled charts with several metrics add half a row (24px) for each extra bar sharing a row, so bars stay roughly as thick as a single one. Charts with many rows render as before.
  • Grows the category label gutter cap in bar_chart_options.js from 160px to 240px, but only when share labels are shown, so a label such as "Returning · 1,555 · 78%" is not ellipsized. Plain labels keep the 160px cap, so existing charts render as before. Also stops reserving space for axis titles when they are hidden.
  • Makes the shared panel wrapper read subtitle from the merged visualization options, not only from data source runtime overrides, so any dashboard YAML can set a subtitle under a panel's visualization.options. Adds subtitle to the closed Options definition in both analytics visualization JSON schemas so the key is not rejected. Overrides from data sources still win because they are merged over the YAML options.
  • The data source for the new-versus-returning split itself is separate work. The dashboard YAML that will use these options is in a follow-up MR, !254195 (merged), which will adopt them once this schema change lands.

References

Screenshots or screen recordings

New custom styled chart Confirmed existing embedded view isn't impacted
Screenshot_2026-09-09_at_09.42.13 Screenshot_2026-09-09_at_09.42.05

How to set up and validate locally

  1. Seed Code Suggestions data if needed: FILTER=ai_usage_stats PROJECT_ID=2 SEED_AI_USAGE_STATS=1 bundle exec rake db:seed_fu.
  2. On a project with Code Suggestions data, add a GLQL block to an issue description with display: barChart, mode: analytics, displayConfig containing categoryLabels: valueAndShare, colorBy: category, showAxisTitles: false, query: type = CodeSuggestion and timestamp >= -30d, dimensions: language, metrics: usersCount, and sort: usersCount asc. Confirm labels like ruby · 21 · 60%, solid bars in different shades with no lighter outline and the darkest shade on top, a tooltip swatch matching each bar, no axis titles, and a chart only as tall as its rows need.
  3. Remove categoryLabels from displayConfig, add a second metric, or switch to a rate metric such as acceptanceRate, and confirm the plain labels come back.
  4. In an analytics dashboard YAML, add subtitle: Some text under a panel's visualization.options, run gdk restart rails-web, and confirm the text renders under the panel title.

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 Brandon Labuschagne

Merge request reports

Loading
Loading