Spike Chart Tool
Summary
Section titled SummaryAs our roadmap planed, Heartbeat application will show charts with the all metrics data. So that, the user can compare the historical data with different sprint.
But now, there is no chart implementation in this project, and we need to choose a charting library to implement the design.
Context
Section titled ContextAccording to the new business requirements and the roadmap, there is a need to introduce a general-purpose chart library to support corresponding development needs. Based on business requirements, there are several requirements for charts:
- Responsive support
- Support for multiple y-axes and composite charts
- Support for customizing tooltips
- Support for filtering charts by clicking the legends
Scope
Section titled ScopeFrontend
Current Status
Section titled Current StatusNone chart tools
Options
Section titled Options| ECharts | Recharts | Nivo | Victory | |
|---|---|---|---|---|
| Description | A ASF open JS visualization library | Currently the most common React lightweight chart library, supports interactive building using JSX | Heavyweight chart library supporting a wide range of chart types, allowing for custom charts | Completely custom, interactive chart library with customization options |
| Pros | 1. Pure dependencies(just depends on zrender), Frame independent2. Customization for diff charts 3. Controlled by the Apache rog 4. Multiple chart types 5. Active community | 1. Implemented based on D3. 2. Supports responsive layout and is friendly to React, with comprehensive documentation and examples. 3. Simple configuration, allowing mixed chart implementation through nesting, and supports custom tooltip rendering. 4. Filtering charts can be achieved through custom legends. 5. Basic level of extensibility, allowing for custom chart combinations to meet business needs through configuration. However 6. Intuitive for developers, easy to get started with. | 1. Implemented based on D3. 2. Supports responsive layout. 3. Supports on-demand importing of charts. 4. Offers a wide range of configurable options, supporting custom composite charts. 5. Supports custom tooltips. 6. Documentation is readily available, and demo code can be generated through configuration. 7. Supports custom composite charts. | 1. Completely implemented based on customization and personalization for charts. 2. Friendly to React, allowing chart construction using JSX nodes. 3. Complete extensibility, capable of building charts entirely from scratch. |
| Cons | 1. Not support more complex combinations and customizations of charts. 2. Depends on the React framework | 1. High configuration cost. 2. Manually implement legend filtering. 3. Manually implement custom tooltips. 4. Moderate difficulty getting started. | 1. High configuration cost. 2. Difficulty in getting started. 3. High learning cost. | |
| Developer experience Friendly | HIGH | HIGH | MEDIUM | LOW |
| Learning Curve | Low | Low | MEDIUM | LOW |
| Chart Type Supported | Extensive | Common Charts | Common Charts | Common Charts |
| Extensibility | HIGH | MEDIUM | MEDIUM | HIGH |
| Performance | HIGH | HIGH | HIGH | HIGH |
| Testability | HIGH | MEDIUM | LOW | MEDIUM |
| Implementation Effort | Low | MEDIUM | HIGH | HIGH |
| Maintenance Effort | Low | MEDIUM | MEDIUM | HIGH |
| Recommendation | RECOMMEND | CONSIDER | CONSIDER | DECLINE |
Decision
Section titled DecisionChoosing to use Echarts as the new charting library.