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:

  1. 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.
  2. GLQL passed date-bucket dimension values (2026-01-01, the bucket start from toStartOfInterval) to the chart as raw strings.

This MR:

  • Formats date-bucket dimension values as localized dates (Jan 1, 2026 — locale-aware via localeDateFormat, timezone-safe via newDate) at the dimensionValue choke point in app/assets/javascripts/glql/utils/chart_data.js, so bar, column, and line charts, tooltips, and stacked legends all benefit. A round trip through toISODateFormat rejects date-shaped strings that are not real dates (for example 2026-02-30), which Date would 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 existing option prop, which GlBarChart deep-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.

Chart Before After
Bar chart, date dimension (monthly buckets) before-1-bar-date-dimension after-1-bar-date-dimension
Bar chart, long string labels (pipeline refs) before-2-bar-long-string-labels after-2-bar-long-string-labels
Two-dimension bar chart (weekly buckets + status) before-3-bar-two-dimensions after-3-bar-two-dimensions
Column chart, date dimension before-4-column-date-dimension after-4-column-date-dimension
Line chart, date dimension before-5-line-date-dimension after-5-line-date-dimension

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

  1. 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
    ```
  2. The y-axis labels render as localized dates ("Jan 1, 2026") instead of "2026...", and the axis title has clearance from the labels.

  3. Repeat with display: columnChart and display: lineChart — axis labels and tooltips show formatted dates.

  4. 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.

Edited by Daniele Rossetti

Merge request reports

Loading
Loading