Commit a4fe7ae7 authored by Aron Fiechter's avatar Aron Fiechter
Browse files

Debounce redux dispatch calls in YearRange echarts event handler

parent ed04b92f
import React, { useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setStart, setEnd, setYears, selectYears } from './yearRangeSlice';
import { setRange, setYears, selectYears, selectYearsMinMax } from './yearRangeSlice';
import ReactEcharts from 'echarts-for-react';
import { selectNodes, selectResultsById } from '../navbar/querySlice';
import { useDebouncedCallback } from 'use-debounce';
export default function YearRange() {
const dispatch = useDispatch();
const [debouncedDispatch] = useDebouncedCallback((action) => dispatch(action), 500);
const nodes = useSelector(selectNodes);
const resultsById = useSelector(selectResultsById);
const years = useSelector(selectYears);
const { min, max } = useSelector(selectYearsMinMax);
const chartRef = useRef(null);
......@@ -25,20 +28,20 @@ export default function YearRange() {
return counts;
}, {});
const yearList = Object.keys(yearCounts).map((y) => ({ year: y, count: yearCounts[y] }));
const x = yearList.map((y) => y.year);
const x = yearList.map((y) => parseInt(y.year, 10));
const y = yearList.map((y) => y.count);
dispatch(setYears({ x, y }));
}, [dispatch, resultsById, nodes]);
debouncedDispatch(setYears({ x, y }));
}, [resultsById, nodes]);
// Setup chart range selection handler
useEffect(() => {
const chart = chartRef.current.getEchartsInstance();
chart.on('datazoom', function () {
const axis = chart.getModel().option.xAxis[0];
const start = axis.data[axis.rangeStart];
const end = axis.data[axis.rangeEnd];
dispatch(setStart(start));
dispatch(setEnd(end));
console.log(min, max);
const start = axis.data[axis.rangeStart] || min;
const end = axis.data[axis.rangeEnd] || max;
debouncedDispatch(setRange({ start, end }));
});
});
......
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