Fix GLQL bar chart axis label truncation and date formatting
What does this MR do and why?
GLQL bar charts rendered timestamp dimension labels truncated to 7 characters ("2026...") with the category axis title cramped against the labels. Two defects compound:
GlBarChart(GitLab UI) truncates every category (y) axis label to 7 characters and reserves a fixed 64px gutter shared by the labels and the axis title.- GLQL passed date-bucket dimension values (
2026-01-01, the bucket start fromtoStartOfInterval) to the chart as raw strings.
This MR:
- Formats date-bucket dimension values as localized dates (
Jan 1, 2026— locale-aware vialocaleDateFormat, timezone-safe vianewDate) at thedimensionValuechoke point inapp/assets/javascripts/glql/utils/chart_data.js, so bar, column, and line charts, tooltips, and stacked legends all benefit. A round trip throughtoISODateFormatrejects date-shaped strings that are not real dates (for example2026-02-30), whichDatewould otherwise silently roll over to another day. - Adds
barCategoryAxisOptions(app/assets/javascripts/glql/utils/bar_chart_options.js), which sizes the bar chart category (y) axis gutter from the actual labels (~7px per character, clamped to 49–160px) and replaces the 7-character truncation with ECharts pixel-based ellipsis for overly long labels. Both bar chart presenters spread these overrides into their existingoptionprop, whichGlBarChartdeep-merges over its defaults.
This works for all date-bucket granularities (daily/weekly/monthly/yearly) because every bucket start is day-aligned. When bucket granularity metadata becomes available to the frontend, dimensionValue is the single place to make the format granularity-aware (for example Jan 2026 for monthly buckets).
Screenshots or screen recordings
All charts query real gitlab.com (gitlab-org/gitlab) data through GLQL analytics mode.
The column and line charts pick up the date formatting through the shared dimensionValue; their axis geometry is unchanged.
How to set up and validate locally
-
In a project with ClickHouse analytics available, add a GLQL block with a bar chart over a date dimension to any issue or MR description, As an alternative to setting up ClickHouse locally, you can pull !235812 (closed) to route GLQL queries to GitLab.com.
```glql display: barChart mode: analytics query: type = Contribution and project = "<group/project>" and created > -6m dimensions: created metrics: totalCount sort: created asc ``` -
The y-axis labels render as localized dates ("Jan 1, 2026") instead of "2026...", and the axis title has clearance from the labels.
-
Repeat with
display: columnChartanddisplay: lineChart— axis labels and tooltips show formatted dates. -
Frontend specs:
yarn jest spec/frontend/glql.
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.









