Add lineChart display type to GLQL

Robert Huntrequested to merge
feature/glql-linechart-display-type into master

What does this MR do and why?

Adds display: lineChart support to GLQL, enabling line chart visualisation for time-series and categorical data. This is part of the visualization types needed for SDLC dashboard migration, alongside the existing table and columnChart display types.

Line charts are the primary visualization for trend data: metrics plotted as continuous lines over a dimension (typically time). Each metric in the query becomes a separate line series, with dimension values on the X-axis and metric values on the Y-axis. The component uses GlLineChart from @gitlab/ui/src/charts and reuses the existing chart data utilities and value formatters.

The implementation follows the same patterns established by the columnChart display type (!233250 (merged)), with a simpler structure since line charts support exactly one dimension (no two-dimension variant or stacking modes).

As part of this work, the shared FormattedTooltipContent component has been moved from column_chart/ to a new chart/ directory, since it is now consumed by both chart types.

No feature flag is needed. The display type is opt-in: it only activates when a user explicitly writes display: lineChart in their GLQL block, so there is no risk of breaking existing queries.

References

Screenshots or screen recordings

Query Result 
display: lineChart
mode: analytics
title: "Code Suggestions Total Usage by Language"
query: type = CodeSuggestion and timestamp >= -3m and group = "halcyon-software"
dimensions: language
metrics: totalCount
sort: totalCount desc

image.png

 
display: lineChart
mode: analytics
title: "Code Suggestions Adoption by Language"
query: type = CodeSuggestion and timestamp >= -3m and group = "halcyon-software"
dimensions: language
metrics: totalCount, acceptedCount, usersCount
sort: totalCount desc

image.png

 
display: lineChart
mode: analytics
title: "Code Suggestions – Active Users & Volume Over Time"
query: type = CodeSuggestion and timestamp >= -3m and group = "halcyon-software"
dimensions: timestamp
metrics: usersCount, totalCount, acceptedCount
sort: timestamp asc

image.png
Missing metrics

image.png
More than one dimension

Google Chrome Beta 2026-06-10 21.26.30.png
Missing dimensions

image.png

How to set up and validate locally

Prerequisites

  • Setup clickhouse
  • Make sure to run migrations: bundle exec rake gitlab:clickhouse:migrate
  • Enable clickhouse analytics: echo "Gitlab::CurrentSettings.current_application_settings.update(use_clickhouse_for_analytics: true)" | rails c
  • Seed test data: FILTER=ai_usage_stats bundle exec rake db:seed_fu

UI Testing

  1. Navigate to a seeded project and open a markdown-enabled field (issue description, comment, etc.)

  2. Add a GLQL block with display: lineChart:

    mode: analytics
query: type = CodeSuggestion and timestamp >= -30d
dimensions: language
metrics: totalCount
display: lineChart

  3. The block should render an SVG line chart with dimension labels on the X-axis and metric values on the Y-axis

  4. Hover over data points to see per-metric tooltips with formatted values

  5. Try multiple metrics to verify each renders as a separate line:

    mode: analytics
query: type = CodeSuggestion and timestamp >= -30d
dimensions: language
metrics: shownCount, acceptedCount, rejectedCount
display: lineChart

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 Robert Hunt

Merge request reports