Add `areaChart` display type support to GLQL, enabling area chart visualization for time-series data with single or multiple metrics. Supports both regular (separate) and stacked area charts. This is a **GLQL-level visualization feature** that works with any data type once their aggregation engines support time-series data. **Part 5 of 5 visualization types** needed for SDLC dashboard migration: 1. Tables (#592262) - 18.11 GA ✅ 2. Stats (#592780) - Post-18.11 3. Sparklines (#592781) - Post-18.11 4. Bar Charts (#592782) - Post-18.11 5. Column Charts (#592784) - Post-18.11 6. **Area Charts (this issue)** - Post-18.11 **Aligned with research issue #589575** for GLQL visualization syntax. **SDLC Dashboard use case (CodeSuggestion):** - Code generation volume trends (lines shown vs lines accepted over time) ## Acceptance Criteria - [ ] GLQL UI renders queries with `display: areaChart` correctly - [ ] Regular area chart works (default - multiple separate areas) - [ ] Stacked area chart works (when `displayConfig.stacked: true` specified) - [ ] Time-series data displays correctly on X-axis - [ ] Single metric creates simple area chart - [ ] Multiple metrics create multiple areas (separate or stacked based on config) - [ ] Chart legend identifies each metric - [ ] Hover/tooltip shows date and values for all metrics at that point - [ ] Chart uses `GlAreaChart` from `@gitlab/ui/src/charts` package - [ ] Chart colors follow GitLab UI package defaults - [ ] Time granularity follows GLQL's `timeSegment()` syntax - [ ] Works with any GLQL data type that has time-series data - [ ] Feature flag `glql_areachart_display_type` gates functionality using a `gitlab_com_derisk` flag - [ ] When flag is disabled, returns error: "areaChart display type not available" - [ ] No JavaScript console errors - [ ] Frontend tests cover both regular and stacked area chart rendering ## Example GLQL Queries *Single metric area chart:* ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -90d display: areaChart aggregate: dimensions: timeSegment(1d) on timestamp as 'Date' metrics: totalCount as 'Total Suggestions' ``` *Multiple metrics - regular areas (default):* ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -90d display: areaChart aggregate: dimensions: timeSegment(1d) on timestamp as 'Date' metrics: shownCount as 'Shown', acceptedCount as 'Accepted' ``` *Multiple metrics - stacked areas:* ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -90d display: areaChart displayConfig: stacked: true aggregate: dimensions: timeSegment(1d) on timestamp as 'Date' metrics: suggestionSizeSum as 'Lines Shown', acceptedLinesSum as 'Lines Accepted' ``` ## Implementation Notes *Files to modify:* - `app/assets/javascripts/glql/` - Add areaChart display type renderer *Component to use:* - Use `GlAreaChart` from `@gitlab/ui/src/charts` package - Follow package's default color scheme *Chart requirements:* - Must have exactly 1 time-series dimension (using `timeSegment()`) - Can have 1 or more metrics - Time dimension becomes X-axis - Metrics become area(s) on Y-axis *Stacking behavior:* - Default: `stacked: false` - multiple separate overlapping areas - Optional: `stacked: true` - metrics stack cumulatively - Specified via `displayConfig.stacked` boolean *Validation:* - Query must have exactly 1 dimension (must be time-based using `timeSegment()`) - Query must have at least 1 metric - Error if requirements not met *Time granularity:* - Uses `timeSegment()` function syntax: `timeSegment(1d)`, `timeSegment(1w)`, `timeSegment(1m)` - Supported granularities: daily (1d), weekly (1w), monthly (1m) - Chart adapts X-axis formatting based on granularity *Metric calculations:* - All metrics must be pre-calculated by backend or provided as fixed metrics - No inline GLQL calculations supported (e.g., no `metric1 * metric2`) - Backend must provide calculated metrics (e.g., `acceptedLinesSum` calculated server-side) *Colors:* - Use `GlAreaChart` default color scheme from GitLab UI package - Each metric gets a distinct color - Semi-transparent fills to show overlapping areas when not stacked *Tooltip format:* - Show date/time point based on granularity - List all metric values at that point - Example: "Mar 5, 2026\nLines Shown: 1,234\nLines Accepted: 906" *Feature flag behavior:* - When `glql_areachart_display_type` is disabled, return error message *Future enhancements (document but don't implement):* 1. **Zoom/pan for large time ranges:** ```yaml display: areaChart displayConfig: interactive: zoom: true pan: true ``` 2. **Inline metric calculations** (if GLQL adds expression support): ```yaml aggregate: metrics: - suggestionSizeSum as 'Lines Shown' - (suggestionSizeSum * acceptanceRate / 100) as 'Lines Accepted' ``` ## Related Issues - Depends on: #592261 (GLQL Parser support) - Epic: &21212 (CodeSuggestion aggregations) - Related: #592780 (Stats), #592781 (Sparklines), #592782 (Bar Charts), #592784 (Column Charts), #592262 (Tables) - Research: #589575 (GLQL visualization requirements and syntax)