Commit 3b91c455 authored by Aron Fiechter's avatar Aron Fiechter
Browse files

Set year range on hover

parent f0cc7bac
......@@ -2,7 +2,6 @@ import React from 'react';
import { selectQuery, selectResult } from '../navbar/querySlice';
import Container from 'react-bootstrap/Container';
import { useSelector } from 'react-redux';
import Card from 'react-bootstrap/Card';
export default function QueryResult() {
const nResults = useSelector(selectResult)?.nResults;
......
import React, { useEffect, useRef } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setRange, setYears, selectYears, selectRange, resetRange } from './yearRangeSlice';
import { setRange, setYears, selectYears } from './yearRangeSlice';
import ReactEcharts from 'echarts-for-react';
import { selectNodes, selectResultsById } from '../navbar/querySlice';
import { useDebouncedCallback } from 'use-debounce';
......@@ -12,10 +12,13 @@ export default function YearRange() {
const dispatch = useDispatch();
const [debouncedDispatch] = useDebouncedCallback((action) => dispatch(action), 300);
// Whether the chart is zoomed on a single year or not
const [zoomed, setZoomed] = useState(false);
// Data from redux state
const nodes = useSelector(selectNodes);
const resultsById = useSelector(selectResultsById);
const years = useSelector(selectYears);
const yearRange = useSelector(selectRange);
const chartRef = useRef(null);
......@@ -40,35 +43,69 @@ export default function YearRange() {
debouncedDispatch(setYears({ x, y }));
}, [debouncedDispatch, resultsById, nodes]);
// Setup chart range selection handler
useEffect(() => {
logger.debug('YearRange: registering chart handlers');
const chart = chartRef.current.getEchartsInstance();
chart.off('datazoom');
chart.off('click');
chart.on('datazoom', (e) => {
// Handler for dataZoom event on chart
const dataZoomHandler = useCallback(
(chart) => (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;
setZoomed(start === end);
debouncedDispatch(setRange({ start, end }));
});
chart.on('click', (e) => {
},
[debouncedDispatch],
);
// Handler for mouseover event, sets the year range to the hovered year
const mouseOverHandler = useCallback(
(e) => {
if (!zoomed) {
const y = parseInt(e.name, 10);
debouncedDispatch(setRange({ start: y, end: y }));
}
},
[debouncedDispatch, zoomed],
);
// Handler for mouseout event, resets the year range
const mouseOutHandler = useCallback(
(chart) => (e) => {
if (!zoomed) {
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 }));
}
},
[debouncedDispatch, zoomed],
);
const clickHandler = useCallback(
(chart) => (e) => {
logger.debug('Click on chart');
const y = parseInt(e.name, 10);
const { start, end } = yearRange;
if (start === end) {
// Go back to overview
if (zoomed) {
logger.debug('\t-> back to overview');
chart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
debouncedDispatch(resetRange());
} 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, yearRange]);
// Toggle zoomed
setZoomed(!zoomed);
},
[zoomed],
);
// Setup chart range selection handler
useEffect(() => {
logger.debug('YearRange: registering chart handlers');
const chart = chartRef.current.getEchartsInstance();
chart.off('datazoom');
chart.off('click');
chart.off('mouseover');
chart.off('mouseout');
chart.on('datazoom', dataZoomHandler(chart));
chart.on('click', clickHandler(chart));
chart.on('mouseover', mouseOverHandler);
chart.on('mouseout', mouseOutHandler(chart));
}, [dataZoomHandler, clickHandler, mouseOverHandler, mouseOutHandler]);
const options = {
tooltip: {
......
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