andre-fong opened a new pull request, #36344: URL: https://github.com/apache/superset/pull/36344
<!--- Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/ Example: fix(dashboard): load charts correctly --> ### SUMMARY Use charts as custom component renderers in AG Grid (Table V2) to render charts in tables and create a POC to demonstrate custom cell renderers using the Community version. We will use AG Grid’s custom cell rendering functionality to support rendering different charts (e.g., sparkline, histogram, etc.) ourselves by building custom cell renderers for sparkline and minibar charts. These charts will visualise the values of the selected metrics columns within their row. #### User Requirements __Usage (inside Table V2):__ 1. Add a Chart Column (can add multiple) in the control panel for Table V2 2. Configure the Chart Column: - Click on "Add a new chart column" - Select chart type and input desired settings - The renderer will visualize all numeric values from that row **NOTE:** Charts are configured at the column level (TableColumnConfig); a column may only display **one type of chart**, all of which will have the **same configuration** (e.g. same color). This means there can only be one kind of chartType for each column (i.e., a column can and should only render either only sparkline charts or minibar charts, never more than one). 3. Requirements: - User Responsibility: Ensure row contains relevant columns (Renderers filter strings and null before drawing charts) - Ensure column order reflects desired visualisation sequence (e.g., Q1, Q2, Q3, Q4) __Example Use Cases:__ Expected Usage: __Product | Q1 | Q2 | Q3 | Q4 | Trend (new chart column)__ Widget A | 100 | 150 | 120 | 180 | [sparkline: 100→150→120→180] (Example) User Responsibility when selecting columns: __Product | Genre | Q1 | Q2 | Q3 | Q4 | Canada Total | Trend__ Widget A | Electronics | 100 | 150 | 120 | 180 | 550 | [sparkline: 100→150→120→180→550] - "Genre" is automatically skipped (string) - "Canada Total" is included in sparkline (numeric) - depending on user goals this may not be desired - User should exclude or reorder columns to avoid this __Known Limitations__ - No column-specific filtering (all columns with numeric values are considered for visualisation) - User cannot specify which columns to include/exclude per chart - Column order determines visualisation order __Future Enhancements__ - Add ability for users to select which columns to consider for visualisation - Separate chart configuration from table column configuration (maybe to potentially fetch data outside of the table?) - More supported charts! **Notes:** 1. All existing `TableColumnConfig` properties remain unchanged 2. New `chartType` and chart configuration fields (`color`, `strokeWidth`) are optional 3. Only columns with column type of `GenericDataType.Chart` will go through chart processing/transformation logic, other columns maintain their old data flow (backwards compatibility) ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF <!--- Skip this if not applicable --> <img width="1377" height="773" alt="image" src="https://github.com/user-attachments/assets/bb688c53-da77-47cc-b016-f91a5ade7545"; /> <img width="668" height="369" alt="image" src="https://github.com/user-attachments/assets/3b8bb67d-3446-4fcb-876a-30370f8eb0e2"; /> <img width="577" height="570" alt="image" src="https://github.com/user-attachments/assets/f6f09947-6f66-41ea-908a-d14fe6412e5c"; /> <img width="761" height="358" alt="image" src="https://github.com/user-attachments/assets/a6ea551d-6bf4-434e-a3b8-7fbcea2828fd"; /> And we have just created a sparkline chart column! Here's what the mini-bar chart looks like as well: <img width="1084" height="360" alt="image" src="https://github.com/user-attachments/assets/9f6b6eff-81d7-49fb-ba12-cfa491e9c124"; /> ### TESTING INSTRUCTIONS <!--- Required! What steps can be taken to manually verify the changes? --> 1. Set `AG_GRID_TABLE_ENABLED` to `True` in `superset/config.py` 2. Add a new 'Table V2' chart 4. Add dimensions and metrics to test 5. Under the new 'Chart columns' section, click on 'Add a new chart column' and enter a column label 6. View your newly added column in the table section with a rendered chart 7. (optional) Customize chart settings in the 'Customize' tab by clicking the chart column and clicking the 'Chart Settings' tab in the popover. Changes are rendered immediately ### ADDITIONAL INFORMATION <!--- Check any relevant boxes with "x" --> <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue --> - [ ] Has associated issue: - [x] Required feature flags: `AG_GRID_TABLE_ENABLED` - We enable `AG_GRID_TABLE_ENABLED` to turn on rendering for using the AG Grid table for Table V2, so that it can render the graphs in each cell - [x] Changes UI - Adds new cell renderers for Sparkline and Mini-bar charts in the table - Adds new 'Chart columns' control (draglist) in the 'Data' tab of the Table V2 control panel (and popover for setting column label) - Adds new column type under 'Customize columns' in the 'Customize' tab for a chart column (renders new chart anticon) - Adds new 'Chart Settings' tab in the 'Customize columns' popover - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [x] Introduces new feature or API - Introduced **new feature**, no API changes. Read more in the summary. - [ ] Removes existing feature or API -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
