parse raw data to build timeline

src/Timeline/Timeline.jsx

@@ -5,17 +5,14 @@ import WHO from "../data/who.json";
 import pandemic from "../data/pandemic.json";
 import "./Timeline.css";
 
-const dataset = {
-  WHO,
-  pandemic
-}
+const dataset = [WHO, pandemic];
 
 function Timeline() {
   const [countries, setCountries] = useState(COUNTRIES);
   const [data, setData] = useState(dataset);
 
   const graph = useRef(null);
-  useEffect(() => drawGraph(graph, COUNTRIES, data));
+  useEffect(() => drawGraph(graph, countries, data));
 
   return (
     <div className="Timeline">

src/Timeline/boundaries.ts

@@ -1,7 +1,7 @@
 import { DateTime } from "luxon";
 
-const FIRST_CASE = DateTime.fromISO("2019-11-17T00:00:00+00:00"); // 17 November 2019 https://www.theguardian.com/world/2020/mar/13/first-covid-19-case-happened-in-november-china-government-records-show-report
-const END_OF_2020 = DateTime.fromISO("2020-12-31T23:59:59+00:00");
+const FIRST_CASE = DateTime.fromISO("2019-11-17T00:00:00+00:00").toSeconds(); // 17 November 2019 https://www.theguardian.com/world/2020/mar/13/first-covid-19-case-happened-in-november-china-government-records-show-report
+const END_OF_2020 = DateTime.fromISO("2020-12-31T23:59:59+00:00").toSeconds();
 
 export {
     FIRST_CASE,

src/events/Event.test.ts

@@ -0,0 +1,61 @@
+import { Event as EventType, Events } from "../types/event";
+import { TimelineEvents } from "../types/timelineEvent";
+import * as Event from "./Event";
+
+const event1: EventType = {
+  published_date: "2020-01-05T00:00:00+00:00",
+  url:
+    "https://www.who.int/csr/don/05-january-2020-pneumonia-of-unkown-cause-china/en/",
+  title: "Pneumonia of unknown cause – China",
+  tags: ["announcement", "announce_first_case"],
+  entity: "government"
+};
+
+const event2: EventType = {
+  published_date: "2020-03-13T08:00:17+08:00",
+  url:
+    "https://www.scmp.com/news/china/society/article/3074991/coronavirus-chinas-first-confirmed-covid-19-case-traced-back",
+  title: "China's first confirmed Covid-19 case traced back to November 17",
+  tags: ["virus"],
+  entity: "government"
+};
+
+test("add `start` and `end` based on published date", () => {
+  const newEvent:EventType = Event.addStartAndEnd(event1);
+  expect(newEvent).toEqual({ ...event1, start: 1578182400, end: 1578268800 });
+});
+
+test("addMetadata to all items", () => {
+  const events: Array<EventType> = [
+    event1,
+    { ...event1, entity: "individual" }
+  ];
+  const lane = 0;
+
+  const newEvents:Events = Event.addMetadata(events, lane);
+
+  expect(newEvents.length).toBe(2);
+  expect(newEvents[0]).toEqual({
+    ...event1,
+    start: 1578182400,
+    end: 1578268800,
+    lane: 0
+  });
+});
+
+test("add `lane`", () => {
+  const lane = 0;
+  const newEvent: EventType = Event.addLane(event1, lane);
+  expect(newEvent).toEqual({ ...event1, lane: 0 });
+});
+
+test("foo bar", () => {
+  const dataset:Array<Events> = [[event1], [event2]];
+  const data:TimelineEvents = Event.buildData(dataset);
+
+  expect(data.length).toBe(2);
+  expect(data).toEqual([
+    { ...event1, start: 1578182400, end: 1578268800, lane: 0 },
+    { ...event2, start: 1584057617, end: 1584144017, lane: 1 }
+  ]);
+});

src/events/Event.ts

@@ -0,0 +1,32 @@
+import { DateTime } from "luxon";
+import { Event, Events } from "../types/event";
+import { TimelineEvent, TimelineEvents } from "../types/timelineEvent";
+
+const buildData = (dataset: Array<Events>): TimelineEvents => {
+  const data = [];
+
+  dataset.forEach((events: Array<TimelineEvent>, index: number) =>
+    data.push(addMetadata(events, index))
+  );
+
+  return data;
+};
+
+const addLane = (event: Event, lane: number) => ({ ...event, lane });
+
+const addMetadata = (events: Events, index: number) =>
+  events.map(event => addLane(addStartAndEnd(event), index));
+
+const addStartAndEnd = (event: Event) => {
+  const published_date = DateTime.fromISO(event.published_date);
+  const start = published_date.toSeconds();
+  const end = published_date.plus({ days: 1 }).toSeconds();
+
+  return {
+    ...event,
+    start,
+    end
+  };
+};
+
+export { buildData, addLane, addMetadata, addStartAndEnd };

src/types/entity.ts

@@ -1,12 +1 @@
-interface Government {
-  label: "Government";
-}
-interface Company {
-  label: "Company";
-}
-interface Individual {
-  label: "Individual";
-}
-export interface Entity {
-  label: Government | Company | Individual;
-}
+export type Entity = "government" | "company" | "individual";

src/types/event.ts

@@ -1,10 +1,12 @@
-import { Tag } from "./tag";
 import { Entity } from "./entity";
+import { Tag } from "./tag";
 
 export interface Event {
   published_date: string;
   url: string;
   title: string;
   entity: Entity;
   tags: Array<Tag>;
-}
+}
+
+export type Events = Array<Event>;

src/types/tag.ts

@@ -1,32 +1,10 @@
-interface Announcement {
-  label: "Announcement";
-}
-interface AnnounceDistribution {
-  label: "Announce distribution";
-}
-interface AnnounceOrder {
-  label: "Announce order";
-}
-interface AnnounceSupport {
-  label: "Announce support";
-}
-interface AnnounceFree {
-  label: "Announce free help";
-}
-interface AnnounceTreatment {
-  label: "Announce treatment";
-}
-interface Mask {
-  label: "Mask";
-}
-
-export interface Tag {
-  tag:
-    | Announcement
-    | AnnounceDistribution
-    | AnnounceOrder
-    | AnnounceSupport
-    | AnnounceFree
-    | AnnounceTreatment
-    | Mask;
-}
+export type Tag =
+  | "announcement"
+  | "announce_distribution"
+  | "announce_first_case"
+  | "announce_order"
+  | "announce_support"
+  | "announce_free_help"
+  | "announce_treatment"
+  | "mask"
+  | "virus"

src/types/timelineEvent.ts

@@ -0,0 +1,14 @@
+import { Event } from "./event";
+
+interface TimelineEvent extends Event {
+  start: number;
+  end: number;
+  lane: number;
+}
+
+type TimelineEvents = Array<TimelineEvent>;
+
+export {
+  TimelineEvent,
+  TimelineEvents
+}