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 (gitlab#592262) - 18.11 GA :white_check_mark: 2. Stats (gitlab#592780) - Post-18.11 3. Sparklines (gitlab#592781) - Post-18.11 4. Bar Charts (gitlab#592782) - Post-18.11 5. Column Charts (gitlab#592784) - Post-18.11 6. **Area Charts (this issue)** - Post-18.11 **Aligned with research issue gitlab#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 parameterised field syntax (see glql#130) - [ ] Works with any GLQL data type that has time-series data - [ ] 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 dimensions: timestamp(granularity=daily) as 'Date' metrics: totalCount as 'Total Suggestions' ``` _Multiple metrics - regular areas (default):_ ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -90d display: areaChart dimensions: timestamp(granularity=daily) 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 dimensions: timestamp(granularity=daily) 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 (with a granularity parameter) - 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 with a granularity parameter) - Query must have at least 1 metric - Error if requirements not met _Time granularity:_ - Uses parameterised field syntax: `timestamp(granularity=daily)`, `timestamp(granularity=weekly)`, `timestamp(granularity=monthly)` - Supported granularities: daily, weekly, monthly - 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" ## Related Issues - Depends on: gitlab#592261 (GLQL Parser support) - Epic: gitlab-org&21212 (CodeSuggestion aggregations) - Related: gitlab#592780 (Stats), gitlab#592781 (Sparklines), gitlab#592782 (Bar Charts), gitlab#592784 (Column Charts), gitlab#592262 (Tables) - Research: gitlab#589575 (GLQL visualization requirements and syntax)