diff --git a/.eslintrc.js b/.eslintrc.js index 4e35261..0d7b003 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -30,5 +30,9 @@ module.exports = { rules: { 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn', + "jsx-a11y/label-has-associated-control": [2, { + "controlComponents": ["Switch"], + "depth": 3, + }], }, }; diff --git a/package-lock.json b/package-lock.json index 88284d2..0b6cd81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14009,6 +14009,14 @@ "shallowequal": "^1.0.1" } }, + "react-switch": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-5.0.1.tgz", + "integrity": "sha512-Pa5kvqRfX85QUCK1Jv0rxyeElbC3aNpCP5hV0LoJpU/Y6kydf0t4kRriQ6ZYA4kxWwAYk/cH51T4/sPzV9mCgQ==", + "requires": { + "prop-types": "^15.6.2" + } + }, "react-table": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.0.4.tgz", diff --git a/package.json b/package.json index 542295f..a7b54ac 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-dom": "^16.12.0", "react-helmet": "^5.2.1", "react-icons": "^3.9.0", + "react-switch": "^5.0.1", "react-table": "^7.0.4", "react-tag-autocomplete": "^5.13.0", "victory": "^34.1.3" diff --git a/src/components/dataChart.tsx b/src/components/dataChart.tsx index 55c2087..4deed7b 100644 --- a/src/components/dataChart.tsx +++ b/src/components/dataChart.tsx @@ -6,14 +6,20 @@ import { Tag } from 'react-tag-autocomplete'; import { Country } from '../utilities/getData'; import Theme from './chartTheme'; import { - purpleA100, tealA200, cyanA400, deepPurpleA200, lightBlueA700, greenA700, purpleA200, green600, teal400, green900, green700, lightGreen700, + cyanA400, + deepPurpleA200, + teal400, + lightBlueA700, + purpleA200, + lightGreen700, } from './colors'; interface DataChartProps { countries: Country[] - tags: Tag[] x: string y: string + tags: Tag[] + showAll: boolean } interface Selected { @@ -30,7 +36,7 @@ const selectedColors = [ ]; const DataChart = ({ - countries, tags, x, y, + countries, x, y, tags, showAll, }: DataChartProps) => { const selected: Selected = {}; tags.forEach( @@ -39,43 +45,46 @@ const DataChart = ({ }, ); return ( - - - - {countries.map((country) => { - if (country.name === undefined) { return undefined; } - const data = Object.keys(selected).includes(country.name) - ? { - stroke: selected[country.name], - strokeWidth: 1.8, - } - : { - strokeWidth: 1, - }; - return ( - - ); - })} - + <> + + + + {countries.map((country) => { + if (country.name === undefined) { return undefined; } + if (!showAll && !Object.keys(selected).includes(country.name)) { return undefined; } + const data = Object.keys(selected).includes(country.name) + ? { + stroke: selected[country.name], + strokeWidth: 1.8, + } + : { + strokeWidth: 1, + }; + return ( + + ); + })} + + ); }; diff --git a/src/components/dataContent.module.css b/src/components/dataContent.module.css new file mode 100644 index 0000000..1f5dbef --- /dev/null +++ b/src/components/dataContent.module.css @@ -0,0 +1,4 @@ +.switch { + top: 0.6em; + margin-left: 1em; +} \ No newline at end of file diff --git a/src/components/dataContent.tsx b/src/components/dataContent.tsx index f2afc32..23badb4 100644 --- a/src/components/dataContent.tsx +++ b/src/components/dataContent.tsx @@ -1,5 +1,6 @@ import React, { useState, CSSProperties } from 'react'; import { Link } from 'gatsby'; +import Switch from 'react-switch'; import Layout from './layout'; import SEO from './seo'; import { @@ -10,6 +11,7 @@ import { } from './tables'; import DataChart from './dataChart'; import CountryFilter, { Tags } from './countryFilter'; +import styles from './dataContent.module.css'; const buttonStyle: CSSProperties = { fontSize: '0.85em', @@ -44,6 +46,7 @@ const DataContent = ({ countries }: { countries: Country[] }) => { ], suggestedTags: possibleTags, }); + const [showAll, setShowAll] = useState(true); return ( @@ -115,21 +118,35 @@ const DataContent = ({ countries }: { countries: Country[] }) => { {selectedTable === 'newCases' && 'New cases in period.'} {selectedTable === 'totalCases' && 'Cases to date.'} {' '} - Table color coded by - {' '} - Outbreak Status +
+

{selectedTable === 'growth' - && } + && } {selectedTable === 'newDeaths' - && } + && } {selectedTable === 'totalDeaths' - && } + && } {selectedTable === 'newCases' - && } + && } {selectedTable === 'totalCases' - && } + && } + + The table below is color coded by + {' '} + Outbreak Status + {selectedTable === 'growth' && } {selectedTable === 'newDeaths' && } {selectedTable === 'totalDeaths' && }