Commit 9a931699 authored by Aron Fiechter's avatar Aron Fiechter
Browse files

Implement useEffect in YearRange to create years array

parent cdab4e58
import React, {PureComponent, useRef} from 'react';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setStart, setEnd, setYears } from './yearRangeSlice';
import ReactEcharts from "echarts-for-react";
import { setStart, setEnd, setYears, selectYears } from './yearRangeSlice';
import ReactEcharts from 'echarts-for-react';
import { selectNodes, selectResultsById } from '../navbar/querySlice';
export default function YearRange() {
const dispatch = useDispatch();
const nodes = useSelector(selectNodes);
const resultsById = useSelector(selectResultsById);
export default function YearRange() {
useEffect(() => {
const yearCounts = nodes
.filter((n) => n.leaf)
.map((n) => resultsById[n.name])
.flatMap((n) => n.years)
.reduce((counts, y) => {
if (counts[y]) counts[y] = counts[y] + 1;
else counts[y] = 1;
return counts;
}, {});
const yearList = Object.keys(yearCounts).map((y) => ({ year: y, count: yearCounts[y] }));
const x = yearList.map((y) => y.year);
const y = yearList.map((y) => y.count);
dispatch(setYears({ x, y }));
}, [dispatch, resultsById, nodes]);
const years = useSelector(selectYears);
const chart = useRef(null);
let options = {
title: {
text: "Yearly results",
left: 10
const options = {
title: {
text: 'Yearly results',
left: 10,
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
bottom: 90,
},
dataZoom: [
{
type: 'inside',
},
grid: {
bottom: 90
{
type: 'slider',
},
dataZoom: [{
type: 'inside'
}, {
type: 'slider'
}],
xAxis: {
type: 'category',
data: [2010,2011,2012,2013,2014,2015],
silent: false,
splitLine: {
show: false
},
splitArea: {
show: false
},
],
xAxis: {
type: 'category',
data: [2010, 2011, 2012, 2013, 2014, 2015],
silent: false,
splitLine: {
show: false,
},
yAxis: {
type: 'value',
splitArea: {
show: false
}
splitArea: {
show: false,
},
series: [{
},
yAxis: {
type: 'value',
splitArea: {
show: false,
},
},
series: [
{
type: 'bar',
data: [1,2,3,4,5,6],
large: true
}]
data: [1, 2, 3, 4, 5, 6],
large: true,
},
],
};
console.log(chart)
return (
<div className='container'>
<ReactEcharts
ref={chart}
option={options}
style={{height: '350px', width: '100%'}}
className='bar_chart' />
</div>
)
return (
<div className="container">
<ReactEcharts
option={options}
style={{ height: '350px', width: '100%' }}
className="bar_chart"
/>
</div>
);
}
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