Add `barChart` display type support to GLQL, enabling **horizontal** bar chart visualization for any GLQL data type. **Important:** `barChart` displays **horizontal bars only**. For vertical bars (columns), use `columnChart` (gitlab#592784). This is a **GLQL-level visualization feature** that works with any data type once their aggregation engines are available. **Part 4 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 (this issue)** - Post-18.11 - Horizontal bars 5. Column Charts (gitlab#592784) - Post-18.11 - Vertical bars 6. Area Charts (gitlab#592783) - Post-18.11 **Aligned with research issue gitlab#589575** for GLQL visualization syntax. **SDLC Dashboard use cases (CodeSuggestion):** - GitLab Duo Code Suggestions acceptance by language (horizontal bars) - GitLab Duo Code Suggestions acceptance by IDE (horizontal bars) ## Acceptance Criteria - [ ] GLQL UI renders queries with `display: barChart` correctly as **horizontal bars** - [ ] Charts correctly display dimension labels on Y-axis (left side) - [ ] Charts correctly display metric values on X-axis (bottom) - [ ] Supports multiple metrics (grouped horizontal bars) - [ ] Supports stacked bars via `displayConfig.stacked: true` - [ ] Bars scale proportionally to metric values - [ ] Chart uses `GlBarChart` from `@gitlab/ui/src/charts` package in horizontal mode - [ ] Chart colors follow GitLab UI package defaults - [ ] Hoverable bars show tooltip with exact values - [ ] Chart legend/labels are clear and readable - [ ] Supports sorting by metric value - [ ] Works with any GLQL data type (not CodeSuggestion-specific) - [ ] Feature flag `glql_barchart_display_type` gates functionality using a `gitlab_com_derisk` flag - [ ] When flag is disabled, returns error: "barChart display type not available" - [ ] No JavaScript console errors - [ ] Frontend tests cover barChart rendering ## Example GLQL Queries *Single metric with horizontal bars:* ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -30d display: barChart aggregate: dimensions: language as 'Language' metrics: acceptanceRate as 'Acceptance Rate' sort: acceptanceRate desc limit: 10 ``` *Multiple metrics with grouped horizontal bars:* ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -30d display: barChart aggregate: dimensions: language as 'Language' metrics: shownCount as 'Shown', acceptedCount as 'Accepted', rejectedCount as 'Rejected' sort: shownCount desc limit: 10 ``` *Stacked horizontal bars:* ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -30d display: barChart displayConfig: stacked: true aggregate: dimensions: ideName as 'IDE' metrics: acceptedCount as 'Accepted', rejectedCount as 'Rejected' sort: acceptedCount desc limit: 5 ``` **Visual representation:** ``` Acceptance Rate by Language (Horizontal Bars) Ruby ████████████████ 77.6% JavaScript ██████████████ 68.4% Python ██████████████████ 81.2% Go █████████████ 65.1% TypeScript ███████████████ 72.3% 0% 50% 100% ``` ## Implementation Notes *Files to modify:* - `app/assets/javascripts/glql/` - Add barChart display type renderer *Component to use:* - Use `GlBarChart` from `@gitlab/ui/src/charts` package - Configure in horizontal mode - Follow package's default color scheme *Chart requirements:* - Must have exactly 1 dimension (categories) - Can have 1 or more metrics (grouped bars when multiple) - Dimension becomes Y-axis (categories on left) - Metrics become X-axis (values on bottom) - Bars extend horizontally to the right *Horizontal bar characteristics:* - Dimension labels appear on Y-axis (left side) - Metric values appear on X-axis (bottom) - Bars extend from left to right - Good for comparing categories, especially with long labels - **For vertical bars extending upward, use `columnChart` (gitlab#592784)** *Stacking behavior:* - Default: `stacked: false` - grouped bars (side by side) - Optional: `stacked: true` - metrics stack horizontally - Specified via `displayConfig.stacked` boolean *Validation:* - Query must have exactly 1 dimension and at least 1 metric - Error if multiple dimensions or zero metrics *Interactivity:* - Hoverable: Show tooltip with dimension label and exact metric value(s) on hover - Static otherwise (no click interactions) *Colors:* - Use `GlBarChart` default color scheme from GitLab UI package - Each metric gets a distinct color when multiple metrics present *Feature flag behavior:* - When `glql_barchart_display_type` is disabled, return error message *Future enhancements (document but don't implement):* 1. **Drill-down support:** ```yaml display: barChart displayConfig: drillDown: enabled: true query: # nested query definition ``` 2. **Reference lines** (e.g., average line): ```yaml display: barChart displayConfig: referenceLines: - type: average label: 'Avg Acceptance Rate' ``` ## Related Issues - Depends on: gitlab#592261 (GLQL Parser support) - Epic: gitlab-org&21212 (CodeSuggestion aggregations) - Related: gitlab#592780 (Stats), gitlab#592781 (Sparklines), gitlab#592783 (Area Charts), gitlab#592262 (Tables) - **See also:** gitlab#592784 (Column Charts - for vertical bars) - Research: gitlab#589575 (GLQL visualization requirements and syntax)