Add `lineChart` display type support to GLQL, enabling line chart visualization for time-series and categorical data across any GLQL data type. **Important:** `lineChart` is designed primarily for **time-series trends**, where one dimension (typically a time segment) is plotted on the X-axis and one or more metrics form continuous lines on the Y-axis. For categorical vertical/horizontal comparisons, use `columnChart` ([#133](https://gitlab.com/gitlab-org/glql/-/work_items/133)) or `barChart` (gitlab#592782). This is a **GLQL-level visualization feature** that works with any data type once their aggregation engines are available. **Part of the visualization types** needed for SDLC dashboard migration: 1. Tables (gitlab#592262) - 18.11 GA ✅ 2. Stats (gitlab#592780) - Post-18.11 3. Sparklines (gitlab#592781) - Post-18.11 4. Bar Charts (gitlab#592782) - Post-18.11 - Horizontal bars 5. Column Charts ([#133](https://gitlab.com/gitlab-org/glql/-/work_items/133)) - Post-18.11 - Vertical bars 6. **Line Charts (this issue)** - Post-18.11 - Trend lines 7. Area Charts (gitlab#592783) - Post-18.11 **Aligned with research issue gitlab#589575** for GLQL visualization syntax. **SDLC Dashboard use cases:** - Median time-to-merge trends over time, comparing Duo vs. non-Duo users - GitLab Duo Code Suggestions acceptance rate trends - Pipeline success rate over time - Any metric evolution across a time window ## Acceptance Criteria - [x] GLQL UI renders queries with `display: lineChart` correctly as continuous lines - [x] Charts correctly display dimension labels on X-axis (bottom), typically time buckets - [x] Charts correctly display metric values on Y-axis (left side) - [x] Supports multiple metrics (multiple lines on the same chart, each with a distinct color) - [x] Lines connect data points in dimension order (chronological for time segments) - [x] Chart uses `GlLineChart` from `@gitlab/ui/src/charts` package - [x] Chart colors follow GitLab UI package defaults - [x] Hoverable data points show tooltip with exact values for each metric at that dimension - [x] Chart legend is clear and readable, showing each metric alias - [x] Supports sorting by dimension (default: ascending on dimension, essential for time series) - [x] Works with any GLQL data type (not feature-specific) - [ ] Feature flag `glql_linechart_display_type` gates functionality using a `gitlab_com_derisk` flag - [ ] When flag is disabled, returns error: "lineChart display type not available" - [x] No JavaScript console errors - [x] Frontend tests cover lineChart rendering ## Example GLQL Queries *Time-series with two metrics (Duo vs non-Duo time-to-merge):* ```yaml display: lineChart query: type = MergeRequest and merged > -6m aggregate: dimensions: timeSegment(1m) on merged metrics: medianTimeToMergeDuo as 'Using GitLab Duo', medianTimeToMergeNoDuo as 'Not using GitLab Duo' ``` *Single metric trend:* ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -90d display: lineChart aggregate: dimensions: timeSegment(1w) on timestamp as 'Week' metrics: acceptanceRate as 'Acceptance Rate' ``` *Multiple metrics over time (grouped lines):* ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -12m display: lineChart aggregate: dimensions: timeSegment(1m) on timestamp as 'Month' metrics: shownCount as 'Shown', acceptedCount as 'Accepted', rejectedCount as 'Rejected' ``` **Visual representation:** ``` Median Time to Merge (hours) 40 ┤ ╭─── Not using GitLab Duo 30 ┤ ╭──────╮ ╭────╯ 20 ┤────────╯ ╰───╯ 10 ┤ ╭─── Using GitLab Duo 0 ┼────╮───╮───╮───╮───╮───╯ Nov Dec Jan Feb Mar Apr ``` ## Implementation Notes *Files to modify:* - `app/assets/javascripts/glql/` - Add lineChart display type renderer *Component to use:* - Use `GlLineChart` from `@gitlab/ui/src/charts` package - Follow package's default color scheme *Chart requirements:* - Must have exactly 1 dimension (typically time-based) - Can have 1 or more metrics (one line per metric when multiple) - Dimension becomes X-axis - Metrics become Y-axis values; each metric renders as a separate line - Data points connected in dimension order *Line chart characteristics:* - Dimension labels on X-axis (bottom) - Metric values on Y-axis (left side) - Points joined by straight lines (smoothing optional, default off) - Optimized for continuous data and trends over time - **For categorical comparisons, use `columnChart` ([#133](https://gitlab.com/gitlab-org/glql/-/work_items/133)) or `barChart` (gitlab#592782)** *Time-series support:* - Primary use case: time dimensions via `timeSegment()` - Example: `timeSegment(1m)` for monthly points, `timeSegment(1w)` for weekly, `timeSegment(1d)` for daily - X-axis automatically formats dates based on granularity - Missing time buckets should render as gaps or zero-values (decision TBD during implementation) *Validation:* - Query must have exactly 1 dimension and at least 1 metric - Error if multiple dimensions or zero metrics - Dimension should be sortable (time or ordinal); error or warn otherwise *Interactivity:* - Hoverable: Show tooltip with dimension label and exact metric value(s) for all lines at the hovered position - Static otherwise (no click interactions) *Colors:* - Use `GlLineChart` default color scheme from GitLab UI package - Each metric gets a distinct color when multiple metrics present *Feature flag behavior:* - When `glql_linechart_display_type` is disabled, return error message *Future enhancements (document but don't implement):* 1. **Smoothing / curve type:** ```yaml display: lineChart displayConfig: smooth: true ``` 2. **Reference lines** (e.g., SLO target): ```yaml display: lineChart displayConfig: referenceLines: - type: goal value: 24 label: 'SLO: 24h' ``` 3. **Dual Y-axis** (for different metric scales): ```yaml display: lineChart displayConfig: dualAxis: true leftAxis: ['medianTimeToMerge'] rightAxis: ['mergeCount'] ``` 4. **Markers on data points:** ```yaml display: lineChart displayConfig: markers: true ``` ## Related Issues - Depends on: gitlab#592261 (GLQL Parser support) - Epic: [&21207](https://gitlab.com/groups/gitlab-org/-/work_items/21207) (Data Aggregation in GLQL) - Related: [#133](https://gitlab.com/gitlab-org/glql/-/work_items/133) (Column Charts), gitlab#592780 (Stats with showTrends), gitlab#592781 (Sparklines), gitlab#592782 (Bar Charts), gitlab#592783 (Area Charts), gitlab#592262 (Tables) - Research: gitlab#589575 (GLQL visualization requirements and syntax)