Add year selection

[TaiWilkin]

Overview

Once the data has been updated to include the 2021 data, users will need to select which year to view out of all available years.

Which questions have data available will vary on a year-to-year basis, and as such, the year must be selected prior to selecting the questions to view. Following the pattern of the geography selector, a page has been added where users are able to select a year from the available years.

Based on the available years in the data, a list of years with radio buttons are rendered, allowing users to select a year to view.

In the future, we will enable a multi-year comparison view, and will enable users to select multiple years; when this occurs, the Radio and RadioGroup components from ChakraUI should be switched out for the Checkbox and CheckboxGroup components. To make this a drop-in replacement, the currentYear prop has been updated to an array of currentYears.

Connects #114

Demo

Notes

Although year selections are being stored in an array, when we are reading out the questions we are only looking at the first item in the array. This is because later, multi-year selections will trigger comparison view for the charts; however, this isn't currently enabled. Any code added to handle multiple years in the charts reasonably now would later be overwritten when multi-year comparison view is implemented.

Currently, only one year of data is available; as such, only one year is available to select. As strange as this appears, it is correct per the current data available to us. 2021 data will be integrated before the changes go to production.

Testing Instructions

• Use the Netlify preview to view the app.
• Select several countries or regions, then click 'next'.
  • [x] You should see the years selection.
  • [x] You should be able to select the year 2020.
  • [x] The Breadcrumbs should show countries and years.
• Click next and select several questions.
  • [x] The Breadcrumbs should include 'years'
  • [x] The questions should behave as before
• Click next and view the charts.
  • [x] The charts should render without errors.
• Download CSV data and .PNGs.
  • [x] The data and images should download correctly.
• Navigate to Saved charts and select a saved visualization.
  • [x] The visualizations should render without errors.
• Navigate to 'Years', then refresh the page.
  • [x] You should be redirected to the geographies selector.

[rajadain]

Taking a look now

[TaiWilkin]

Thanks for reviewing! I've added a follow-up card addressing adding the year(s) to CSV and PNG downloads.