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` (#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 (#592262) - 18.11 GA ✅ 2. Stats (#592780) - Post-18.11 3. Sparklines (#592781) - Post-18.11 4. Bar Charts (#592782) - Post-18.11 - Horizontal bars 5. **Column Charts (this issue)** - Post-18.11 - Vertical bars 6. Area Charts (#592783) - Post-18.11 **Aligned with research issue #589575** for GLQL visualization syntax. **Note:** This issue replaces the original "change indicator" scope, which has been merged into #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` (#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: #592261 (GLQL Parser support) - Epic: &21212 (CodeSuggestion aggregations) - Related: #592780 (Stats with showTrends), #592781 (Sparklines), #592783 (Area Charts), #592262 (Tables) - **See also:** #592782 (Bar Charts - for horizontal bars) - Research: #589575 (GLQL visualization requirements and syntax) - **Supersedes:** Originally this issue was for "change indicators", which is now part of #592780 (stat with showTrends)