jsxImportSource emotion import { css } from '@emotion/react' ; import React , { useState } from 'react' ; import { Form } from 'react-bootstrap' ; import { getYear } from 'date-fns' ; import MonthlyFrequencyChart from '../components/charts/MonthlyFrequencyChart' ; import RegionalDistributionChart from '../components/charts/RegionalDistributionChart' ; const StatsPage = ( ) => { const currentYear = getYear ( new Date ( ) ) ; const [ selectedYear , setSelectedYear ] = useState ( currentYear ) ; const years = Array ( getYear ( new Date ( ) ) - 2003 + 1 ) . fill ( 0 ) . map ( ( _ , idx ) => 2003 + idx ) ; const onChangeYear = ( e ) => { if ( ! e . target . value ) return ; setSelectedYear ( + e . target . value ) ; } ; return ( < div > < h2 > Stats < /h2> < Form > < Form . Group controlId = "year-select" > < Form . Select css = { css `
              width: 100px;
            ` } defaultValue = { currentYear } onChange = { onChangeYear } > { years . map ( ( y ) => ( < option key = { y } value = { y } > { y } < /option>))} < /Form.Select> < /Form.Group> < /Form> < div > < MonthlyFrequencyChart selectedYear = { selectedYear } / > < RegionalDistributionChart selectedYear = { selectedYear } / > < /div> < /div>); } ; export default StatsPage ;