COVID-19 SPFx information web part

Introduction

In this post I describe the working and usage of a COVID-19 SPFx web part. The goal of this web part is to display basic information of the the COVID-19 impact for a specific country. The web part will show the following data:

  • Confirmed cases
  • Total deaths
  • Recovered cases
  • Last updated time

The screenshot below shows this web part on a demo site collection

Web part configuration

Country code

The only mandatory property is the country code. This code should be the ISO2 country code. A full list can be found here: https://www.iban.com/country-codes

Show view history button

This option allows you to show historical data of the country. When set to true, an icon will be shown in the upper left corner. Clicking on it will open a pop-up with 4 tabs:

  • Confirmed cases: shows a graph of the confirmed cases plotted over time
  • Deaths: shows a graph of deaths plotted over time
  • Recovered: shows a graph of recovered people plotted over time
  • All: combines the previous 3 charts in 1 chart

View more statistics

You can provide an optional external link to redirect users to a website with more detailed statistics

Up count time

The counters that are displayed have some up count animation. By default the duration is set to 2 second but it is possible to change this using the slider in the web part properties

Colors

It is also possible to define the colors for the numbers. By default the following colors are set but these can be changed using the color pickers in the web part properties:

  • Confirmed cases: #69797e
  • Deaths: #d13438
  • Recoverd: #498205

Data

The web part uses data provided by https://systems.jhu.edu/ exposed through the following API: https://ainize.ai/laeyoung/wuhan-coronavirus-api

Resources

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at WordPress.com

Up ↑

Create your website at WordPress.com
Get started
%d bloggers like this: