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 { 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 { selectNodes, selectResultsById } from '../navbar/querySlice';
import { useDebouncedCallback } from 'use-debounce';
......@@ -15,6 +15,7 @@ export default function YearRange() {
const nodes = useSelector(selectNodes);
const resultsById = useSelector(selectResultsById);
const years = useSelector(selectYears);
const yearRange = useSelector(selectRange);
const chartRef = useRef(null);
......@@ -40,6 +41,8 @@ export default function YearRange() {
useEffect(() => {
logger.debug('YearRange: registering chart handlers');
const chart = chartRef.current.getEchartsInstance();
chart.off('datazoom');
chart.off('click');
chart.on('datazoom', (e) => {
const axis = chart.getModel().option.xAxis[0];
const start = axis.data[axis.rangeStart] || config.YEARS.MIN;
......@@ -47,11 +50,22 @@ export default function YearRange() {
debouncedDispatch(setRange({ start, end }));
});
chart.on('click', (e) => {
logger.debug('Click on chart');
const y = parseInt(e.name, 10);
const { start, end } = yearRange;
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 = {
tooltip: {
......@@ -98,7 +112,7 @@ export default function YearRange() {
};
return (
<Container id='timeline'>
<Container id="timeline">
<ReactEcharts
ref={chartRef}
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