feat(plugin-chart-echarts): [feature-parity] support double clicking legend and series to view single selected series #1324
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/superset/superset-ui/BC2TaRZof4WheW6sS2wyUCppLdKj |
| legendselectchanged: payload => { | ||
| const currentTime = Date.now(); | ||
| // 300 is the interval between two legendselectchanged event | ||
| if (currentTime - lastTimeRef.current < 300 && lastSelectedLegend.current === payload.name) { |
There was a problem hiding this comment.
Since we can't pass click events (both click and double-click) to legend to drive the series change, we listen to the legendselectchanged and the time interval to simulate the double-click event. The value of 300 can be adjusted if user think is so fast.
| } | ||
| }); | ||
| } else { | ||
| lastTimeRef.current = currentTime; |
There was a problem hiding this comment.
Also we need to remember the legend and the time of the last click.
| lastSelectedLegend.current = payload.name; | ||
| } | ||
| // if all legend is unselected, we keep all selected | ||
| if (Object.values(payload.selected).every(i => !i)) { |
There was a problem hiding this comment.
This is keeping the same logic as NVD3.
| const divRef = useRef<HTMLDivElement>(null); | ||
| const chartRef = useRef<ECharts>(); | ||
| const currentSelection = Object.keys(selectedValues) || []; | ||
| const previousSelection = useRef<string[]>([]); | ||
|
|
||
| useImperativeHandle(ref, () => ({ |
There was a problem hiding this comment.
Here we pass echart instance to the parent component via ref
Codecov Report
@@ Coverage Diff @@
## master #1324 +/- ##
==========================================
- Coverage 30.49% 30.31% -0.18%
==========================================
Files 496 496
Lines 9914 9974 +60
Branches 1666 1678 +12
==========================================
+ Hits 3023 3024 +1
- Misses 6647 6706 +59
Partials 244 244
Continue to review full report at Codecov.
|
stephenLYZ
changed the title
stephenLYZ
changed the title
stephenLYZ
force-pushed
the
feat-support-dbClick
branch
from
d45af2c
to
f7dffc3
Compare
| }, | ||
| }; | ||
|
|
||
| const zrEventHandlers: EventHandlers = { |
There was a problem hiding this comment.
Here we use zrender event (https://echarts.apache.org/handbook/en/concepts/event/#listen-to-events-on-the-blank-area) instead of echart event, because we need to click on non-series areas to filter the series, such as stacked areas.
| } | ||
| }, []); | ||
|
|
||
| const getModelInfo = (target: ViewRootGroup, globalModel: GlobalModel) => { |
There was a problem hiding this comment.
This function involves the low-level processing logic of echarts and serves to obtain the series model.
stephenLYZ
force-pushed
the
feat-support-dbClick
branch
from
f84ab55
to
f119b18
Compare
🏆 Enhancements
This PR supports two features:
related to:
Line related chart (area, line, smooth, step)
Stacked
2021-09-05.11.49.51.mov
Unstacked
2021-09-05.11.49.05.mov
Bar chart
Stacked
2021-09-05.11.42.47.mov
Unstacked
2021-09-05.11.43.50.mov
Scatter Plot
2021-09-05.11.52.44.mov