Skip to content

feat: add ECharts integration for advanced chart rendering - #21

Open
jordanking211 wants to merge 1 commit into
omdsh-dev:mainfrom
jordanking211:feat/echarts-support
Open

feat: add ECharts integration for advanced chart rendering#21
jordanking211 wants to merge 1 commit into
omdsh-dev:mainfrom
jordanking211:feat/echarts-support

Conversation

@jordanking211

Copy link
Copy Markdown

Add a new 'echart' node type that renders full ECharts charts with theme-aware colors, tooltips, and legends.

Two modes:

  • Preset shorthand: 'preset: bar|line|area|pie|scatter' + 'data'/'series' for quick upgrade from the 'chart' node
  • Full option: 'option' field for custom chart types (radar, combo, heatmap, dataZoom, visualMap, etc.)

Implementation:

  • EChartNode.tsx: React component with ResizeObserver for responsive charts
  • echarts-lazy.ts: on-demand engine loader (echarts ~1MB never enters main bundle)
  • asset-echarts.ts: standalone asset bundle registered on window.GenuiAssets
  • spec.ts: GenuiEChart type with preset/option/data/series fields
  • guard.ts: spec validation for echart nodes (option depth cap, preset whitelist)
  • render-node.tsx: wire echart into the component dispatcher
  • GenuiBlock.module.css: chart container, title, loading and fallback styles
  • tsdown.config.ts: add echarts asset build target
  • plugin/index.ts: register echarts asset route

Docs:

  • README.md / README.zh-CN.md: ECharts feature description, example, FAQ update
  • SKILL.md: echart node syntax documentation

The echarts engine loads lazily via the plugin's HTTP asset route only when an 'echart' node appears in a spec. Conversations without echart nodes never download it.

Add a new 'echart' node type that renders full ECharts charts with theme-aware colors, tooltips, and legends.

Two modes:
- Preset shorthand: 'preset: bar|line|area|pie|scatter' + 'data'/'series' for quick upgrade from the 'chart' node
- Full option: 'option' field for custom chart types (radar, combo, heatmap, dataZoom, visualMap, etc.)

Implementation:
- EChartNode.tsx: React component with ResizeObserver for responsive charts
- echarts-lazy.ts: on-demand engine loader (echarts ~1MB never enters main bundle)
- asset-echarts.ts: standalone asset bundle registered on window.__GenuiAssets__
- spec.ts: GenuiEChart type with preset/option/data/series fields
- guard.ts: spec validation for echart nodes (option depth cap, preset whitelist)
- render-node.tsx: wire echart into the component dispatcher
- GenuiBlock.module.css: chart container, title, loading and fallback styles
- tsdown.config.ts: add echarts asset build target
- plugin/index.ts: register echarts asset route

Docs:
- README.md / README.zh-CN.md: ECharts feature description, example, FAQ update
- SKILL.md: echart node syntax documentation

The echarts engine loads lazily via the plugin's HTTP asset route only when an 'echart' node appears in a spec. Conversations without echart nodes never download it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant