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 ✅ 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 - [ ] 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 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" *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 metrics: - suggestionSizeSum as 'Lines Shown' - (suggestionSizeSum * acceptanceRate / 100) as 'Lines Accepted' ``` ## 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)