fardin-developer commented on issue #32496:
URL: https://github.com/apache/superset/issues/32496#issuecomment-2711494707
**Proposal: Stacked+Grouped Bar Chart with Line Overlay for Apache Superset**
### Introduction
This proposal outlines the implementation of a new visualization type for
Apache Superset that enables simultaneous stacking and grouping of bars with
line overlay capabilities. This feature will enhance data analysis by allowing
users to compare multiple metrics across categorical dimensions while
visualizing trends effectively.
### Problem Statement
Currently, Apache Superset supports bar charts that can either be stacked or
grouped, but not both simultaneously. Users frequently require a way to compare
total values across groups (via stacking) while also analyzing individual
components within each group (via grouping). Additionally, incorporating trend
lines and secondary metrics on a line chart would significantly improve
analytical capabilities.
### Proposed Solution
The proposed solution involves developing a new ECharts-based visualization
plugin that supports:
- Simultaneous grouping and stacking of bars.
- Time series or arbitrary dimensions on the X-axis.
- Line overlay for additional metrics on a secondary axis.
- Trend line visualization with multiple regression options.
### Implementation Plan
#### **Phase 1: Frontend Implementation**
**Plugin Structure**
- Create a new plugin directory in
`superset-frontend/plugins/plugin-chart-echarts/src/StackedGroupedBar/`.
- Set up plugin registration in `index.ts`.
- Add a thumbnail image for the chart type selector.
**Control Panel Development**
- Implement `controlPanel.ts` with options for:
- Group-by dimension selection.
- Stack-by dimension selection.
- Metrics for bars.
- Metrics for line overlay.
- Trend line configuration.
- Dual-axis formatting options.
**Data Transformation Logic**
- Develop `transformProps.ts` to convert query data into ECharts format.
- Create utility functions for data processing in `utils.ts`.
- Implement trend line calculations using ECharts statistical functions.
**Chart Component Development**
- Build `StackedGroupedBarChart.tsx` React component.
- Implement ECharts configuration logic.
- Develop dual-axis rendering logic.
- Handle legends for complex series effectively.
**Testing Infrastructure**
- Create test datasets with various configurations.
- Implement unit tests for data transformations.
- Develop component tests for rendering logic.
#### **Phase 2: Integration & Testing**
**Plugin Registration**
- Update `setupPlugins.ts` to register the new chart type.
- Add the new visualization to `MainPreset.js`.
- Configure proper typing and metadata.
**End-to-End Testing**
- Validate performance with large datasets.
- Test compatibility with dashboard filters.
- Ensure responsive behavior across devices.
**Edge Case Handling**
- Implement empty state handling.
- Add error boundaries for invalid data formats.
- Develop fallback strategies for unsupported configurations.
#### **Phase 3: Documentation**
- Write user documentation in Markdown.
- Add JSDoc comments for key functions.
- Document configuration options and best practices.
### Technical Details
#### **Key Files to Create/Modify:**
- `superset-frontend/plugins/plugin-chart-echarts/src/StackedGroupedBar/`
- `index.ts` - Plugin registration
- `StackedGroupedBarChart.tsx` - Main visualization component
- `controlPanel.ts` - Configuration panel
- `transformProps.ts` - Data transformation logic
- `buildQuery.ts` - Query generation
- `utils.ts` - Helper functions
- `types.ts` - TypeScript interfaces
- `superset-frontend/src/visualizations/presets/MainPreset.js`
- Register the new chart type.
#### **Relevant API Endpoints:**
- `/api/v1/chart/data` - Fetch visualization data.
- `/api/v1/dataset/{pk}` - Retrieve dataset schema information.
- `/api/v1/explore/form_data` - Fetch chart configuration.
### Conclusion
This visualization will address a critical gap in Apache Superset’s current
offerings, enabling more sophisticated data analysis without requiring users to
rely on external tools. The implementation adheres to modern Superset
development practices, ensuring maintainability and alignment with project
goals. I am excited to contribute this feature and look forward to your
feedback on this proposal.
--
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]
