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

Add datazoom handler to chart in YearRange

parent ed3353f8
import React, { useEffect } from 'react';
import React, { useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setStart, setEnd, setYears, selectYears } from './yearRangeSlice';
import ReactEcharts from 'echarts-for-react';
......@@ -11,6 +11,9 @@ export default function YearRange() {
const resultsById = useSelector(selectResultsById);
const years = useSelector(selectYears);
const chartRef = useRef(null);
// Create data for chart and store it in redux
useEffect(() => {
const yearCounts = nodes
.filter((n) => n.leaf)
......@@ -27,7 +30,17 @@ export default function YearRange() {
dispatch(setYears({ x, y }));
}, [dispatch, resultsById, nodes]);
const years = useSelector(selectYears);
// 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));
});
});
const options = {
title: {
......@@ -81,6 +94,7 @@ export default function YearRange() {
return (
<div className="container">
<ReactEcharts
ref={chartRef}
option={options}
style={{ height: '350px', width: '100%' }}
className="bar_chart"
......
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