2 years before, during pandemic peak time I got this idea of creating an animated line chart that shows corona stats across countries or states in India over a moving timeline, like a playback of days. The Chart should show the growth of reported corona cases per day and compare it against countries/states.

I build the following site with this idea, using React Js and HighCharts with some openly available data APIs.

https://plots.coronasafe.network/

gif captured using licecap mac version

I was also contributing to coronasafe maps at that time and I shared my work at their slack channel. They gave me nice feedback and discussed the possibility of moving the repo to coronasafe organization. I worked with them and moved the project to coronasafe organization. This was a super happy moment for me.

But after that, I got busy with my daily work and personal life. I didn’t get a chance to look back to the repo or add anything more. I had a few things in my TODO bucket for the project:

1. Change from react javascript to typescript.
2. Use chart.js instead of highcharts.
3. Refactor the code to de-couple the data and visualization layer.
4. Improving the performance to make it work butter-smooth.
5. Let users compare between states and countries as well.

Today, I got some time and decided to start working on this.

1. Change from React JS to TS

It’s pretty easy to configure the repo to TS, as I used create-react-app while bootstrapping the project so just need to install all typescript stuff (reference).

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

After this, I can rename the jsx/js files to tsx/ts files and start coding. I Will do this as part of Refactor

2. Refactor

The current state of code was created over a day or so, without thinking much about the readability, layering or so which made the component logic bit complicated. I’m thinking of adding better layering so that the data and the visualization are decoupled and I can switch API or chart library with minimum effort. Also, I would like to break down components smaller.

For now, the steps would look like:

1. Create API Model types to represent data coming from API.
2. Create a Chart Data model to represent data props we need to pass to the charting library.
3. Create mappers with mapApiToChartData function to convert API model into the ui model.
4. Update data.service file to use all the types created.
5. Add unit tests to cover mapping logic (no TDD for now, I want to see things working soon 😄 )

Create Required Typescript models:

I use jsontots to convert API response json to Typescript interfaces. Those who don’t know about this, to create typescript model representation of a json you just need to paste the json to the site’s input box and it’ll auto-generate typescript interfaces for you. It’s a handy tool. and there’s even a vscode extension from them.

I was using JSON API from https://github.com/pomber/covid19 to pull international data and the api https://api.rootnet.in/covid19-in/stats/daily to pull state wise stats for India. Looks like the second API is not getting the latest data, it stopped on 2021-12-15. Will check for alternative.

I Will be updating the post as I progress