apache / apache/echarts

[Feature] Add blur/unselect state for selections

Open
#20,625 4 comments 5 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

### Use case
I'd like to mute other marks when an individual or multiple marks are selected to visually distinguish selected & unselected marks more prominently.
While there is a select customization state, there is no way to customize the unselected slices during selection.

### Example Experience

https://github.com/user-attachments/assets/f7fe70c9-acb7-4a69-9b0b-f00134a301ae

### Current Workaround
- dispatch select action to trigger the select state & styles
- after dispatching customize styles through accessing the graphics elements on the next tick (w/ requestAnimationFrame)

```js
// first dispatch select
chart.dispatchAction({
type: 'select',
dataIndex: dataIndexes,
});
// then apply customizations to selected and unselected marks
requestAnimationFrame(() => {
const series = chart.getModel().getSeriesByIndex(0);
const data = series.getData();
data.eachItemGraphicEl((graphic, index) => {
graphic.setStyle({
opacity: dataIndexes.includes(index)
? HIGHLIGHT_OPACITY
: HIGHLIGHT_OPACITY_MUTED,
});
});
});

```

Initially I tried a combination of dispatching highlight & select to show the emphasis state for selected marks however as soon as I hovered over a different mark the selected mark would no longer be emphasized.

### Open Questions

Is there a better way to do this without customizing on the renderer level?

If no, is there an API to know when a dispatched action has been applied internally? I have not found any and
listening for the last `rendered` or `finished` event after dispatching an action turned out to not be feasible as the render delay was to long. Directly applying style customizations after dispatching the action (without waiting for the next tick) expectedly led to render inconsistencies

### What does the proposed API look like?

I can think of 2 ways to surface this:

1. Apply blur styles on marks that are not selected when selection happens
2. Introduce a new `unselect` state supporting an `itemStyle` configuration that would be applied to items that are not selected during selection

1 would be a breaking change so probably not feasible, 2 would be additive but expand the API surface

Contributor guide

Open the contributing guide

Research direction

Start by tracing the select and highlight action/state behavior and the mark-style customization described in the issue. Compare the proposed additive unselect itemStyle API with the existing select customization and renderer-level graphics workaround. Done means unselected marks can receive muted styling during selection without hover removing the selected emphasis.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.