Graph of number of UK cases

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/app.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './app';
+
+test('renders title', () => {
+  const { getByText } = render(<App />);
+  const title = getByText(/covid-19 cases and regression/i);
+  expect(title).toBeInTheDocument();
+});

src/app.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import GraphCases from './components/graph-cases';
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <header>
+        <h1>COVID-19 cases and regression</h1>
+      </header>
+      <GraphCases country="uk" />
+    </div>
+  );
+};
+
+export default App;

src/cases/uk.json

@@ -0,0 +1,26 @@
+{
+  "source": "https://www.arcgis.com/apps/opsdashboard/index.html#/f94c3c90da5b4e9f9a0b19484dd4bb14",
+  "dailyCases": [
+    ["2020-01-31", 2],
+    ["2020-02-06", 1],
+    ["2020-02-09", 1],
+    ["2020-02-10", 4],
+    ["2020-02-13", 1],
+    ["2020-02-24", 4],
+    ["2020-02-28", 6],
+    ["2020-02-29", 4],
+    ["2020-03-01", 12],
+    ["2020-03-02", 5],
+    ["2020-03-03", 11],
+    ["2020-03-04", 34],
+    ["2020-03-05", 29],
+    ["2020-03-06", 46],
+    ["2020-03-07", 46],
+    ["2020-03-08", 65],
+    ["2020-03-09", 50],
+    ["2020-03-10", 52],
+    ["2020-03-11", 83],
+    ["2020-03-12", 139],
+    ["2020-03-13", 207]
+  ]
+}

src/components/graph-cases.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { LineChart, XAxis, Line, CartesianGrid } from 'recharts';
+
+import { Cases, Country } from '../types';
+import { getCases } from '../utils/get-cases';
+
+type Props = {
+  country: Country;
+};
+
+const margin = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};
+
+const GraphCases: React.FC<Props> = ({ country }) => {
+  const cases = React.useMemo<Cases>(() => getCases(country), [country]);
+
+  return (
+    <div>
+      <h3>Country: {country.toUpperCase()}</h3>
+      <LineChart width={640} height={480} data={cases} margin={margin}>
+        <XAxis dataKey="date" />
+        <CartesianGrid stroke="#f5f5f5" />
+        <Line type="monotone" dataKey="value" stroke="#000" yAxisId={0} />
+      </LineChart>
+    </div>
+  );
+};
+
+export default GraphCases;

src/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import App from './app';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/types.ts

@@ -0,0 +1,6 @@
+export type Cases = {
+  date: Date;
+  value: number;
+}[];
+
+export type Country = 'uk';

src/utils/get-cases.ts

@@ -0,0 +1,22 @@
+import { Cases, Country } from '../types';
+import uk from '../cases/uk.json';
+
+type RawCases = {
+  source?: string;
+  dailyCases: [string, number][];
+};
+
+const processCases = (rawCases: RawCases): Cases =>
+  rawCases.dailyCases.map(([date, value]) => ({
+    date: new Date(date),
+    value: Number(value),
+  }));
+
+export function getCases(country: Country): Cases {
+  switch (country) {
+    case 'uk':
+      return processCases(uk as RawCases);
+    default:
+      throw new Error('Unrecognised country');
+  }
+}