Commit 51485af3 authored by Aron Fiechter's avatar Aron Fiechter
Browse files

Add click handler to chart

parent 24249ddf
......@@ -5,6 +5,7 @@ import ReactEcharts from 'echarts-for-react';
import { selectNodes, selectResultsById } from '../navbar/querySlice';
import { useDebouncedCallback } from 'use-debounce';
import config from '../../config';
import logger from '../../utils/logger';
export default function YearRange() {
const dispatch = useDispatch();
......@@ -31,18 +32,24 @@ export default function YearRange() {
const x = yearList.map((y) => parseInt(y.year, 10));
const y = yearList.map((y) => y.count);
debouncedDispatch(setYears({ x, y }));
}, [resultsById, nodes]);
}, [debouncedDispatch, resultsById, nodes]);
// Setup chart range selection handler
useEffect(() => {
logger.debug('YearRange: registering chart handlers');
const chart = chartRef.current.getEchartsInstance();
chart.on('datazoom', function () {
chart.on('datazoom', (e) => {
const axis = chart.getModel().option.xAxis[0];
const start = axis.data[axis.rangeStart] || config.YEARS.MIN;
const end = axis.data[axis.rangeEnd] || config.YEARS.MAX;
debouncedDispatch(setRange({ start, end }));
});
});
chart.on('click', (e) => {
const y = parseInt(e.name, 10);
chart.dispatchAction({ type: 'dataZoom', startValue: e.name, endValue: e.name });
debouncedDispatch(setRange({ start: y, end: y }));
});
}, [debouncedDispatch]);
const options = {
tooltip: {
......
Supports Markdown
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