agentsclimarketplace

Echarts svg worker chart

Skill kjuhwa/skills-hub/skills/design/echarts-svg-worker-chart

Self-correcting knowledge corpus for Claude Code — 9 stable shape clusters, bias-correction pipeline baked into contribution flow. 47 papers, 45 techniques, 1.1k skills.

Install
npx -y skills add kjuhwa/skills-hub --skill echarts-svg-worker-chart

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

High-performance chart component using ECharts with custom SVG overlays (markLine/markArea/markPoint), worker thread data processing, and brush selection interaction

SKILL.md

2.3 KB, as published. Nobody here has run it

ECharts SVG Worker Chart

Architecture

ChartSvg (forwardRef + useImperativeHandle)
  ├── ECharts instance (canvas/svg renderer)
  ├── Custom SVG overlays (markLine, markArea, markPoint)
  ├── Worker thread (data transformation, aggregation)
  └── Event system (hover, drag, brush selection)

Steps

  1. Create chart component with forwardRef + useImperativeHandle:

    • Expose external API: setOption(), resize(), getDataIndex(), dispatchAction()
    • Internal state: ECharts instance ref, overlay positions, selected indices

  2. Offload data processing to Web Worker:

    • Heavy operations (aggregation, downsampling, unit conversion) run in worker
    • Worker posts processed data back; component calls setOption() on ECharts instance
    • Prevents UI thread blocking for large datasets

  3. Add custom SVG overlays:

    • markLine: threshold lines, baselines (rendered as ECharts markLine series)
    • markArea: highlighted ranges (time windows, anomaly zones)
    • markPoint: annotations at specific data points
    • Configure via CustomChartOptions prop: { markLine, markArea, smooth, isStacked, lineStyle }

  4. Implement brush selection:

    • Enable ECharts brush toolbox action
    • chartEventNew.ts handles brush start/end events
    • Track selected data indices for drill-down or time range sync
    • Drag interaction: mouse events for custom drag behavior (pan, zoom region)

  5. Chart variants (compose from base):

    • ChartNew: standard line/bar/area with Sirius styling
    • ScatterChart: scatter plot with custom point renderers
    • HexagonChart: hexbin layout via hexagonUtil.ts
    • SankeyChart / TreemapChart: flow/hierarchy visualizations

Key details

  • useParentSize hook for responsive dimension tracking
  • Color scheme injection from design tokens
  • Legend can be separate grid component or inline within chart

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.