<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=592784) </details> <!--IssueSummary end--> Add `columnChart` display type support to GLQL, enabling **vertical** bar (column) chart visualization for any GLQL data type. **Important:** `columnChart` displays **vertical bars (columns) only**. For horizontal bars, use `barChart` (gitlab#592782). This is a **GLQL-level visualization feature** that works with any data type once their aggregation engines are available. **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 - Horizontal bars 5. **Column Charts (this issue)** - Post-18.11 - Vertical bars 6. Area Charts (gitlab#592783) - Post-18.11 **Aligned with research issue gitlab#589575** for GLQL visualization syntax. **Note:** This issue replaces the original "change indicator" scope, which has been merged into gitlab#592780 (stat with showTrends). **SDLC Dashboard use cases (CodeSuggestion):** - GitLab Duo Code Suggestions by language (vertical columns) - GitLab Duo Code Suggestions by IDE (vertical columns) - Time-series trends (e.g., monthly usage with vertical columns) ## Acceptance Criteria - [ ] GLQL UI renders queries with `display: columnChart` correctly as **vertical columns** - [ ] Charts correctly display dimension labels on X-axis (bottom) - [ ] Charts correctly display metric values on Y-axis (left side) - [ ] Supports multiple metrics (grouped vertical columns) - [ ] Supports stacked columns via `displayConfig.stacked: true` - [ ] Columns scale proportionally to metric values - [ ] Chart uses `GlColumnChart` (or `GlBarChart` in vertical mode) from `@gitlab/ui/src/charts` package - [ ] Chart colors follow GitLab UI package defaults - [ ] Hoverable columns 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_columnchart_display_type` gates functionality using a `gitlab_com_derisk` flag - [ ] When flag is disabled, returns error: "columnChart display type not available" - [ ] No JavaScript console errors - [ ] Frontend tests cover columnChart rendering ## Example GLQL Queries _Single metric with vertical columns:_ ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -30d display: columnChart aggregate: dimensions: language as 'Language' metrics: totalCount as 'Total Suggestions' sort: totalCount desc limit: 10 ``` _Multiple metrics with grouped vertical columns:_ ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -30d display: columnChart aggregate: dimensions: language as 'Language' metrics: shownCount as 'Shown', acceptedCount as 'Accepted', rejectedCount as 'Rejected' sort: shownCount desc limit: 10 ``` _Stacked vertical columns:_ ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -30d display: columnChart displayConfig: stacked: true aggregate: dimensions: ideName as 'IDE' metrics: acceptedCount as 'Accepted', rejectedCount as 'Rejected' sort: acceptedCount desc limit: 5 ``` _Time-series with monthly columns:_ ```yaml type: CodeSuggestion mode: analytics query: timestamp >= -12m display: columnChart aggregate: dimensions: timeSegment(1m) on timestamp as 'Month' metrics: totalCount as 'Total Suggestions' ``` **Visual representation:** ``` Total Suggestions by Language (Vertical Columns) 2000 ┤ 1500 ┤ █ 1000 ┤ █ █ █ 500 ┤ █ █ █ █ █ 0 ┼──█──█──█──█──█── Ruby JS Py Go TS ``` ## Implementation Notes _Files to modify:_ - `app/assets/javascripts/glql/` - Add columnChart display type renderer _Component to use:_ - Use `GlColumnChart` from `@gitlab/ui/src/charts` package (if available) - Or use `GlBarChart` configured in vertical mode - Follow package's default color scheme _Chart requirements:_ - Must have exactly 1 dimension (categories or time) - Can have 1 or more metrics (grouped columns when multiple) - Dimension becomes X-axis (categories on bottom) - Metrics become Y-axis (values on left) - Columns extend vertically upward _Vertical column characteristics:_ - Dimension labels appear on X-axis (bottom) - Metric values appear on Y-axis (left side) - Columns extend upward from bottom - Standard chart type for categorical and time-series data - **For horizontal bars extending right, use `barChart` (gitlab#592782)** _Stacking behavior:_ - Default: `stacked: false` - grouped columns (side by side) - Optional: `stacked: true` - metrics stack vertically - Specified via `displayConfig.stacked` boolean _Time-series support:_ - Works with time dimensions using `timeSegment()` - Example: `timeSegment(1m)` for monthly columns, `timeSegment(1w)` for weekly - X-axis automatically formats dates based on granularity _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 `GlColumnChart` default color scheme from GitLab UI package - Each metric gets a distinct color when multiple metrics present _Feature flag behavior:_ - When `glql_columnchart_display_type` is disabled, return error message _Future enhancements (document but don't implement):_ 1. **Drill-down support:** ```yaml display: columnChart displayConfig: drillDown: enabled: true query: # nested query definition ``` 2. **Reference lines** (e.g., goal line): ```yaml display: columnChart displayConfig: referenceLines: - type: goal value: 1000 label: 'Target' ``` 3. **Dual Y-axis** (for different metric scales): ```yaml display: columnChart displayConfig: dualAxis: true leftAxis: ['totalCount'] rightAxis: ['acceptanceRate'] ``` ## Related Issues - Depends on: gitlab#592261 (GLQL Parser support) - Epic: gitlab-org&amp;21212 (CodeSuggestion aggregations) - Related: gitlab#592780 (Stats with showTrends), gitlab#592781 (Sparklines), gitlab#592783 (Area Charts), gitlab#592262 (Tables) - **See also:** gitlab#592782 (Bar Charts - for horizontal bars) - Research: gitlab#589575 (GLQL visualization requirements and syntax) - **Supersedes:** Originally this issue was for "change indicators", which is now part of gitlab#592780 (stat with showTrends)