-
-
Notifications
You must be signed in to change notification settings - Fork 14
Description
Is your feature request related to a problem? Please describe.
Creating a unified way adding interactions to Plots using the Area mark
Describe the solution you'd like
The Area marks (AreaY, AreaX, Area) currently do not support interaction event handlers like onclick, onmouseenter, onmouseleave, and onmousemove, while other marks such as Line, Dot, and Bar do support these interactions.
Current Behavior
<AreaY
data={data}
x="date"
y="value"
onclick={handleClick} <!-- Does not work -->
onmouseenter={handleHover} <!-- Does not work -->
/>
Expected Behavior
Area marks should support the same interaction handlers as other marks:
<AreaY
data={data}
x="date"
y="value"
onclick={handleClick}
onmouseenter={handleHover}
onmouseleave={handleLeave}
onmousemove={handleMove}
/>
Describe alternatives you've considered
Currently, we need to implement custom interaction management by:
- Querying DOM elements with querySelector('.svelteplot-area')
- Manually adding event listeners
- Using isPointInFill() for hit testing
- Managing hover states through custom CSS classes
This approach is fragile and requires significant boilerplate code.
Additional context
Use Cases
Tooltips: Show data details when hovering over area segments
Filtering: Click to select/deselect area segments
Highlighting: Visual feedback on hover for better UX
Data exploration: Interactive drill-down functionality
Proposed Solution
Add the same interaction props that exist on other marks to the Area components, allowing direct event handler binding similar to Line and Dot marks.