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 (
-
+