Add sparkline visualization support within table cells for GLQL, showing inline time-series trends using a simple boolean flag. This is a **GLQL-level visualization feature** that works with any data type once their aggregation engines support time-series data. **Part 3 of 5 visualization types** needed for SDLC dashboard migration: 1. Tables (#592262) - 18.11 GA ✅ 2. Stats (#592780) - Post-18.11 3. **Sparklines (this issue)** - Post-18.11 4. Bar Charts (#592782) - Post-18.11 5. Column Charts (#592784) - Post-18.11 6. Area Charts (#592783) - Post-18.11 **Aligned with research issue #589575** for GLQL visualization syntax. **SDLC Dashboard use cases (CodeSuggestion):** - Code Suggestions usage (7-day trend sparkline) - Code Suggestions acceptance rate (7-day trend sparkline) ## Acceptance Criteria - [ ] GLQL syntax supports sparkline via `displayConfig.showSparklines: true` boolean flag - [ ] Parser correctly interprets showSparklines configuration - [ ] Table cells render sparklines using `GlSparklineChart` from `@gitlab/ui/src/charts` - [ ] Frontend renders sparkline from time-series dimension data - [ ] Sparklines show trend direction clearly - [ ] Hover tooltip shows date range and value (e.g., "Mar 2 - Mar 9: 145") - [ ] Implicit "Trend" column added automatically when enabled - [ ] Works with any GLQL data type that has time-series data - [ ] Feature flag `glql_sparkline_display_type` gates functionality using a `gitlab_com_derisk` flag - [ ] When flag is disabled, returns error: "sparkline display type not available" - [ ] No JavaScript console errors - [ ] Frontend tests cover sparkline rendering ## GLQL Syntax ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -30d display: table displayConfig: showSparklines: true # Adds implicit "Trend" column with sparkline chart aggregate: dimensions: user as 'User', timeSegment(1d) on timestamp metrics: totalCount as 'Total' sort: totalCount desc limit: 10 ``` **Expected output:** ``` | User | Total | Trend | | -------- | ----- | ------- | | @alice | 1,234 | [chart] | | @bob | 2,456 | [chart] | | @charlie | 987 | [chart] | ``` *On hover over sparkline chart:* ``` Tooltip: "Mar 2 - Mar 9: 145" ``` ## Implementation Notes *Files to modify:* - `app/assets/javascripts/glql/` - Add sparkline cell renderer using GlSparklineChart - Parser needs to support `displayConfig.showSparklines` boolean flag *Component to use:* - Use `GlSparklineChart` from `@gitlab/ui/src/charts` package - This is the standard GitLab UI component for sparklines *How it works:* - When `showSparklines: true` is detected, frontend looks for time dimension in aggregate - Sparkline is automatically rendered using the time-series data from that dimension - Implicit "Trend" column is added after all metrics - Each row's sparkline shows the time-series for that dimensional value *Time dimension requirement:* - Query must include a time dimension using `timeSegment()` in the aggregate section - Example: `timeSegment(1d) on timestamp` - Sparkline uses this time-series data automatically *Frontend calculation:* - Frontend renders sparkline from the time-series data already returned by backend - No additional backend queries needed - Time range is inferred from the main query's time filter *Tooltip format:* - Show date range and value: "Mar 2 - Mar 9: 145" - Format adjusts based on granularity (daily shows dates, monthly shows months) *Feature flag behavior:* - When `glql_sparkline_display_type` is disabled, return error message *Column ordering (initial implementation):* - **FIFO (First In, First Out)** based on syntax order - Dimensions appear first, then metrics, then sparkline column ("Trend") - Sparkline column always appears last *Limitations (document for future enhancement):* The simplified boolean approach has trade-offs: - ✅ **Simpler syntax:** Just `showSparklines: true` - ✅ **Easier to implement:** Uses existing time dimension - ❌ **Less flexible:** Can't specify custom time ranges per sparkline - ❌ **Single sparkline only:** Can't have multiple sparklines with different configs - ❌ **Fixed column name:** Always "Trend", can't customize Future enhancement could add explicit sparkline configuration: ```yaml display: type: table sparklines: - column: "7-Day Trend" metric: totalCount range: -7d granularity: daily - column: "30-Day Trend" metric: totalCount range: -30d granularity: daily ``` This would allow multiple sparklines with different ranges, but adds complexity. ## Related Issues - Depends on: #592261 (GLQL Parser support), #592262 (Tables - builds on table rendering) - Epic: &21212 (CodeSuggestion aggregations) - Related: #592780 (Stats), #592782 (Bar Charts), #592783 (Area Charts), #592784 (Column Charts) - Research: #589575 (GLQL visualization requirements and syntax)