Loading
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: valueAndSharedisplayConfigoption 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 asusersCountortotalCount. 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: categorydisplayConfigoption 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 becauseGlBarChartonly colors whole series. The point style also sets the border color, so the bar's outline and its tooltip swatch match the fill instead ofGlBarChart's default blue. This matches the design's solid, distinct bars and only applies with one dimension and one metric. - Adds a
showAxisTitles: falsedisplayConfigoption 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.jsfrom 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
subtitlefrom the merged visualization options, not only from data source runtime overrides, so any dashboard YAML can set asubtitleunder a panel'svisualization.options. Addssubtitleto the closedOptionsdefinition 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 |
|---|---|
![]() |
![]() |
How to set up and validate locally
- Seed Code Suggestions data if needed:
FILTER=ai_usage_stats PROJECT_ID=2 SEED_AI_USAGE_STATS=1 bundle exec rake db:seed_fu. - On a project with Code Suggestions data, add a GLQL block to an issue description with
display: barChart,mode: analytics,displayConfigcontainingcategoryLabels: valueAndShare,colorBy: category,showAxisTitles: false,query: type = CodeSuggestion and timestamp >= -30d,dimensions: language,metrics: usersCount, andsort: usersCount asc. Confirm labels likeruby · 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. - Remove
categoryLabelsfromdisplayConfig, add a second metric, or switch to a rate metric such asacceptanceRate, and confirm the plain labels come back. - In an analytics dashboard YAML, add
subtitle: Some textunder a panel'svisualization.options, rungdk 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

