Show link to data source

src/components/graph-cases.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import format from 'date-fns/format';
 import { LineChart, XAxis, YAxis, Line, CartesianGrid } from 'recharts';
 
-import { Cases, Country, Data } from '../types';
+import { DataSource, Country, Data } from '../types';
 import { getCases } from '../utils/get-cases';
 import { processCases } from '../utils/regression';
 
@@ -22,12 +22,15 @@ const dateTickFormatter = (date: Date): string => {
 };
 
 const GraphCases: React.FC<Props> = ({ country }) => {
-  const cases = React.useMemo<Cases>(() => getCases(country), [country]);
-  const data = React.useMemo<Data>(() => processCases(cases), [cases]);
+  const dataSource = React.useMemo<DataSource>(() => getCases(country), [country]);
+  const data = React.useMemo<Data>(() => processCases(dataSource.cases), [dataSource.cases]);
 
   return (
     <div>
       <h3>Country: {country.toUpperCase()}</h3>
+      <p>
+        Source: <a href={dataSource.source}>{dataSource.source}</a>
+      </p>
       <LineChart width={640} height={480} data={data} margin={margin}>
         <XAxis
           dataKey="xValue"

src/types.ts

@@ -5,6 +5,11 @@ export type Case = {
 
 export type Cases = Case[];
 
+export type DataSource = {
+  source: string;
+  cases: Cases;
+};
+
 export type Data = {
   date: Date;
   xValue: number;

src/utils/get-cases.ts

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