feat(plugin-chart-echarts): add native candlestick chart plugin#39990
feat(plugin-chart-echarts): add native candlestick chart plugin#39990Chaithanya5gif wants to merge 5 commits into
Conversation
✅ Deploy Preview for superset-docs-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![codeant-ai-for-open-source[bot]](https://avatars.githubusercontent.com/u/151810221?s=60&v=4){kind=small}
|
The flagged issue is correct. The transformProps function returns props without the required interaction fields (groupby, labelMap, onContextMenu), and selectedValues is hardcoded as an empty object instead of deriving from filterState. This mismatch will cause runtime errors when allEventHandlers tries to access groupby.length and other fields, preventing the Interactive/Drill behaviors from working. To resolve, align with other interactive ECharts plugins by adding the missing fields to the destructuring and return statement. superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/transformProps.ts superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/transformProps.ts |
![bito-code-review[bot]](https://avatars.githubusercontent.com/in/1061978?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review Agent Run #7d3f19
Actionable Suggestions - 1
-
superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/types.ts - 1
- Type Mismatch in Form Data · Line 29-40
Review Details
-
Files reviewed - 9 · Commit Range:
63dc887..90c89ac- superset-frontend/packages/superset-ui-core/src/chart/types/VizType.ts
- superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/EchartsCandlestick.tsx
- superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/buildQuery.ts
- superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/controlPanel.ts
- superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/index.ts
- superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/transformProps.ts
- superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/types.ts
- superset-frontend/plugins/plugin-chart-echarts/src/index.ts
- superset-frontend/src/visualizations/presets/MainPreset.ts
-
Files skipped - 0
-
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful
- Eslint (Linter) - ✔︎ Successful
Bito Usage Guide
Commands
Type the following command in the pull request comment and save the comment.
-
/review- Manually triggers a full AI review. -
/pause- Pauses automatic reviews on this pull request. -
/resume- Resumes automatic reviews. -
/resolve- Marks all Bito-posted review comments as resolved. -
/abort- Cancels all in-progress reviews.
Refer to the documentation for additional commands.
Configuration
This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.
Documentation & Help
AI Code Review powered by
✅ Deploy Preview for superset-docs-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Code Review Agent Run #e426aa
Actionable Suggestions - 1
-
superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/transformProps.ts - 1
- CWE-1321: Object injection vulnerability via dynamic property access · Line 61-67
Review Details
-
Files reviewed - 3 · Commit Range:
63dc887..bb05eee- superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/controlPanel.ts
- superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/transformProps.ts
- superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/types.ts
-
Files skipped - 0
-
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful
- Eslint (Linter) - ✔︎ Successful
Bito Usage Guide
Commands
Type the following command in the pull request comment and save the comment.
-
/review- Manually triggers a full AI review. -
/pause- Pauses automatic reviews on this pull request. -
/resume- Resumes automatic reviews. -
/resolve- Marks all Bito-posted review comments as resolved. -
/abort- Cancels all in-progress reviews.
Refer to the documentation for additional commands.
Configuration
This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.
Documentation & Help
AI Code Review powered by
| let xAxisLabel = getXAxisLabel(chartProps.rawFormData) || '__timestamp'; | ||
| if ( | ||
| isPhysicalColumn(chartProps.rawFormData?.x_axis) && | ||
| isDefined(verboseMap[xAxisLabel]) | ||
| ) { | ||
| xAxisLabel = verboseMap[xAxisLabel]; | ||
| } |
There was a problem hiding this comment.
Lines 64 and 66 use dynamic property access on verboseMap object without validation, creating an object injection vulnerability (CWE-1321). Validate or sanitize xAxisLabel before using it as an object key to prevent potential security issues.
Code suggestion
Check the AI-generated fix before applying
| let xAxisLabel = getXAxisLabel(chartProps.rawFormData) || '__timestamp'; | |
| if ( | |
| isPhysicalColumn(chartProps.rawFormData?.x_axis) && | |
| isDefined(verboseMap[xAxisLabel]) | |
| ) { | |
| xAxisLabel = verboseMap[xAxisLabel]; | |
| } | |
| let xAxisLabel = getXAxisLabel(chartProps.rawFormData) || '__timestamp'; | |
| if ( | |
| isPhysicalColumn(chartProps.rawFormData?.x_axis) && | |
| isDefined(verboseMap[xAxisLabel]) && | |
| Object.prototype.hasOwnProperty.call(verboseMap, xAxisLabel) | |
| ) { | |
| const safeLabel = verboseMap[xAxisLabel]; | |
| if (typeof safeLabel === 'string') { | |
| xAxisLabel = safeLabel; | |
| } | |
| } |
Code Review Run #e426aa
Should Bito avoid suggestions like this for future reviews? (Manage Rules)
- Yes, avoid them
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a native ECharts Candlestick (OHLC/K-Line) chart plugin and wires it into Superset so it can be selected as a visualization type.
Changes:
- Registers a new
Candlestickviz type and adds the plugin toMainPreset. - Introduces the Candlestick plugin implementation (buildQuery, control panel, transformProps, chart component).
- Exports the plugin and its transformProps from
@superset-ui/plugin-chart-echarts.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| superset-frontend/src/visualizations/presets/MainPreset.ts | Registers the new candlestick plugin in the main preset. |
| superset-frontend/plugins/plugin-chart-echarts/src/index.ts | Exposes the new plugin and transformProps exports. |
| superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/types.ts | Adds form-data/types and defaults for the candlestick plugin. |
| superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/transformProps.ts | Implements ECharts option-building, data mapping, tooltip, and zoom. |
| superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/index.ts | Declares plugin metadata and lazy-load entrypoint. |
| superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/controlPanel.ts | Adds OHLC metric controls and chart options. |
| superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/buildQuery.ts | Builds query context for OHLC metrics + time column. |
| superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/EchartsCandlestick.tsx | Renders the chart using the shared Echart component. |
| superset-frontend/packages/superset-ui-core/src/chart/types/VizType.ts | Adds VizType.Candlestick. |
|
|
||
| let xAxisLabel = getXAxisLabel(chartProps.rawFormData) || '__timestamp'; | ||
| if ( | ||
| isPhysicalColumn(chartProps.rawFormData?.x_axis) && | ||
| isDefined(verboseMap[xAxisLabel]) | ||
| ) { | ||
| xAxisLabel = verboseMap[xAxisLabel]; | ||
| } | ||
|
|
||
| const timeFormatter = getTimeFormatter('%Y-%m-%d %H:%M:%S'); | ||
| const numberFormatter = getNumberFormatter(); | ||
|
|
||
| const transformedData = data | ||
| .map(datum => { | ||
| const time = datum[xAxisLabel]; | ||
| const o = datum[openLabel]; | ||
| const c = datum[closeLabel]; | ||
| const l = datum[lowLabel]; | ||
| const h = datum[highLabel]; | ||
|
|
||
| if (o == null || c == null || l == null || h == null) { | ||
| return null; | ||
| } | ||
|
|
| itemStyle: { | ||
| // International standard: Green for Up, Red for Down | ||
| color: '#14b143', | ||
| color0: '#ef232a', | ||
| borderColor: '#14b143', | ||
| borderColor0: '#ef232a', | ||
| }, | ||
| }, |
| import { buildQueryContext, getXAxisColumn } from '@superset-ui/core'; | ||
| import { CandlestickQueryFormData } from './types'; | ||
|
|
||
| export default function buildQuery(formData: CandlestickQueryFormData) { | ||
| return buildQueryContext(formData, baseQueryObject => { | ||
| // Collect all OHLC metrics and remove duplicates | ||
| const metrics = Array.from( | ||
| new Set( | ||
| [formData.open, formData.close, formData.high, formData.low].filter( | ||
| Boolean, | ||
| ), | ||
| ), | ||
| ); |
| const transformedData = data | ||
| .map(datum => { | ||
| const time = datum[xAxisLabel]; | ||
| const o = datum[openLabel]; | ||
| const c = datum[closeLabel]; | ||
| const l = datum[lowLabel]; | ||
| const h = datum[highLabel]; | ||
|
|
||
| if (o == null || c == null || l == null || h == null) { | ||
| return null; | ||
| } | ||
|
|
||
| return [time, o, c, l, h]; | ||
| }) | ||
| .filter(Boolean) as [any, number, number, number, number][]; |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## master #39990 +/- ##
==========================================
- Coverage 64.14% 64.11% -0.03%
==========================================
Files 2590 2596 +6
Lines 138033 138089 +56
Branches 32019 32030 +11
==========================================
- Hits 88537 88533 -4
- Misses 47977 48037 +60
Partials 1519 1519
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Summary
This PR implements a native ECharts-based Candlestick (K-Line) chart plugin for Apache Superset. Currently, Superset lacks a native financial charting solution within the ECharts plugin library.
Technical Details
EchartsCandlestickChartPluginto@superset-ui/plugin-chart-echarts.transformPropshandler with international financial color standards (Green=Up, Red=Down) and rich interactive tooltips.MainPreset.ts.Why this is needed
Financial data visualization is a core requirement for many enterprise BI users. This plugin provides a high-performance, interactive way to visualize OHLC data using the proven ECharts engine already present in Superset.