Commit 24d829c3 authored by Aron Fiechter's avatar Aron Fiechter
Browse files

When clicking on selected year, go back to full year range

parent 22727f36
Pipeline #878 canceled with stage
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { setRange, setYears, selectYears } from './yearRangeSlice'; import { setRange, setYears, selectYears, selectRange } from './yearRangeSlice';
import ReactEcharts from 'echarts-for-react'; import ReactEcharts from 'echarts-for-react';
import { selectNodes, selectResultsById } from '../navbar/querySlice'; import { selectNodes, selectResultsById } from '../navbar/querySlice';
import { useDebouncedCallback } from 'use-debounce'; import { useDebouncedCallback } from 'use-debounce';
...@@ -15,6 +15,7 @@ export default function YearRange() { ...@@ -15,6 +15,7 @@ export default function YearRange() {
const nodes = useSelector(selectNodes); const nodes = useSelector(selectNodes);
const resultsById = useSelector(selectResultsById); const resultsById = useSelector(selectResultsById);
const years = useSelector(selectYears); const years = useSelector(selectYears);
const yearRange = useSelector(selectRange);
const chartRef = useRef(null); const chartRef = useRef(null);
...@@ -40,6 +41,8 @@ export default function YearRange() { ...@@ -40,6 +41,8 @@ export default function YearRange() {
useEffect(() => { useEffect(() => {
logger.debug('YearRange: registering chart handlers'); logger.debug('YearRange: registering chart handlers');
const chart = chartRef.current.getEchartsInstance(); const chart = chartRef.current.getEchartsInstance();
chart.off('datazoom');
chart.off('click');
chart.on('datazoom', (e) => { chart.on('datazoom', (e) => {
const axis = chart.getModel().option.xAxis[0]; const axis = chart.getModel().option.xAxis[0];
const start = axis.data[axis.rangeStart] || config.YEARS.MIN; const start = axis.data[axis.rangeStart] || config.YEARS.MIN;
...@@ -47,11 +50,22 @@ export default function YearRange() { ...@@ -47,11 +50,22 @@ export default function YearRange() {
debouncedDispatch(setRange({ start, end })); debouncedDispatch(setRange({ start, end }));
}); });
chart.on('click', (e) => { chart.on('click', (e) => {
logger.debug('Click on chart');
const y = parseInt(e.name, 10); const y = parseInt(e.name, 10);
chart.dispatchAction({ type: 'dataZoom', startValue: e.name, endValue: e.name }); const { start, end } = yearRange;
debouncedDispatch(setRange({ start: y, end: y })); if (start === end) {
// Go back to overview
logger.debug('\t-> back to overview');
chart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
debouncedDispatch(setRange({ start: config.YEARS.MIN, end: config.YEARS.MAX }));
} else {
// Zoom on clicked year
logger.debug('\t-> zoom on clicked year');
chart.dispatchAction({ type: 'dataZoom', startValue: e.name, endValue: e.name });
debouncedDispatch(setRange({ start: y, end: y }));
}
}); });
}, [debouncedDispatch]); }, [debouncedDispatch, yearRange]);
const options = { const options = {
tooltip: { tooltip: {
...@@ -98,7 +112,7 @@ export default function YearRange() { ...@@ -98,7 +112,7 @@ export default function YearRange() {
}; };
return ( return (
<Container id='timeline'> <Container id="timeline">
<ReactEcharts <ReactEcharts
ref={chartRef} ref={chartRef}
option={options} option={options}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment