GLQL: Add stat display type support
Add `stat` display type support to GLQL, enabling single metric visualization for any GLQL data type.
{width=900 height=282}
**Note:** For trend indicators (% change), see gitlab#592912 which adds `showTrends` support for both stats and tables.
This is a **GLQL-level visualization feature** that works with any data type (CodeSuggestion, Pipeline, MergeRequest, etc.) once their respective aggregation engines are available.
**Part 2 of 6 visualization types** needed for SDLC dashboard migration:
1. Tables (gitlab#592262) - 18.11 GA :white_check_mark:
2. **Stats (this issue)** - Post-18.11 - Basic stat display
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 (gitlab#592783) - Post-18.11
7. showTrends (gitlab#592912) - Post-18.11 - Adds trends to stats and tables
**Aligned with research issue gitlab#589575** for GLQL visualization syntax.
**SDLC Dashboard use cases (CodeSuggestion):**
- GitLab Duo Code Suggestions usage (Last 30 days) - count metric
- GitLab Duo Code Suggestions acceptance rate (Last 30 days) - percentage metric
- (For trends/% change, see gitlab#592912)
## Acceptance Criteria
- [ ] GLQL UI renders queries with `display: stat` correctly
- [ ] Query validation: Must have exactly 1 metric and 0 dimensions, otherwise error
- [ ] Percentage-based metrics display with % formatting (e.g., "73.5%")
- [ ] Count-based metrics display with comma formatting (e.g., "1,234")
- [ ] Single stat shows metric label/title
- [ ] Works with any GLQL data type (not CodeSuggestion-specific)
- [ ] No JavaScript console errors
- [ ] Frontend tests cover stat rendering and validation
## Example GLQL Queries
_Valid - Percentage metric:_
```yaml
type: CodeSuggestion
mode: analytics
query: timestamp >= -30d
display: stat
metrics: acceptanceRate as 'Acceptance Rate'
```
_Valid - Count metric:_
```yaml
type: CodeSuggestion
mode: analytics
query: timestamp >= -30d
display: stat
metrics: totalCount as 'Total Suggestions'
```
_Invalid - Multiple metrics (returns error):_
```yaml
type: CodeSuggestion
mode: analytics
display: stat
metrics: totalCount as 'Total', acceptanceRate as 'Rate'
# Error: "stat display type requires exactly 1 metric"
```
_Invalid - Has dimensions (returns error):_
```yaml
type: CodeSuggestion
mode: analytics
display: stat
dimensions: language
metrics: totalCount as 'Total'
# Error: "stat display type cannot have dimensions (use showTrends in #592912 for time-based comparisons)"
```
## Implementation Notes
_Files to modify:_
- `app/assets/javascripts/glql/` - Add stat display type renderer
_Query validation:_
- Must have exactly 1 metric
- Must have 0 dimensions
- Error if multiple metrics or any dimensions specified
_Automatic formatting:_
- Metrics ending in "Rate" or "Percentage" → format as percentage
- Numeric count metrics → comma-separated formatting
- Should handle any numeric metric from any data type
_Size handling:_
- Single default size
- Dashboard layout framework controls actual sizing/positioning
-
_Relationship to showTrends (gitlab#592912):_
- This issue covers basic stat display only
- For trend indicators (▲ 12.5%), see gitlab#592912
- showTrends requires a time dimension and is a separate feature
- This keeps stat display simple and focused
## Related Issues
- Depends on: gitlab#592261 (GLQL Parser support)
- Epic: gitlab-org&21212 (CodeSuggestion aggregations)
- Related: gitlab#592262 (Tables), gitlab#592781 (Sparklines), gitlab#592782 (Bar Charts), gitlab#592783 (Area Charts), gitlab#592784 (Column Charts)
- **See also:** gitlab#592912 (showTrends - adds % change indicators to stats and tables)
- Research: gitlab#589575 (GLQL visualization requirements and syntax)
issue