[Feature] Standardized id Field in Mouse Click Event Data
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 15h 17m
- Merged PRs (30d)
- 5
Description
### What problem does this feature solve?
Currently, the event data associated with a mouse click varies depending on the type of chart element clicked. For example, when a `series` is clicked, the `seriesId` is passed. However, many chart elements—such as `xAxis`, `yAxis`, and `series`—share a common `id` property.
It would be extremely helpful if this `id` value were included as a standard field in the event data (e.g., simply as `id`), regardless of the chart element type. This would allow for straightforward identification without requiring developers to implement complex type-specific matching logic using various properties currently provided.
Developers would still be responsible for assigning unique `id` values when configuring chart options.
**Use Case:**
I maintain a Vaadin add-on ([SOCharts](https://github.com/syampillai/SOCharts)), which wraps ECharts as a [Vaadin](https://vaadin.com/directory/component/so-charts) component. One of the key challenges I face is identifying the chart element clicked and relaying that information back to the Java application in a standardized manner. A consistent id field across all chart elements in the event payload would greatly simplify this process.
### What does the proposed API look like?
```
{
// 'id' of the component
id: string,
// Others just copied from the documentation
// type of the component to which the clicked glyph belongs
// i.e., 'series', 'markLine', 'markPoint', 'timeLine'
componentType: string,
// series type (make sense when componentType is 'series')
// i.e., 'line', 'bar', 'pie'
seriesType: string,
// series index in incoming option.series (make sense when componentType is 'series')
seriesIndex: number,
// series name (make sense when componentType is 'series')
seriesName: string,
// data name, category name
name: string,
// data index in incoming data array
dataIndex: number,
// incoming rwa data item
data: Object,
// Some series, such as sankey or graph, maintains more than
// one types of data (nodeData and edgeData), which can be
// distinguished from each other by dataType with its value
// 'node' and 'edge'.
// On the other hand, most series has only one type of data,
// where dataType is not needed.
dataType: string,
// incoming data value
value: number|Array,
// color of component (make sense when componentType is 'series')
color: string,
// User info (only available in graphic component
// and custom series, if element option has info
// property, e.g., {type: 'circle', info: {some: 123}})
info: *
}
```
Contributor guide
Research direction
Start from the mouse click event data API and compare the payloads produced for series, xAxis, yAxis, markLine, markPoint, and timeLine elements. Determine how each element's configured id is exposed and define the behavior for elements without an id. Done means the event payload consistently includes the standardized id field across the supported chart elements, with coverage for the documented cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100