78 lines
3.3 KiB
Markdown
78 lines
3.3 KiB
Markdown
# COVID 19 information web part
|
|
|
|
## Summary
|
|
|
|
This web part displays info about the COVID-19 virus for a given country.
|
|
The following info is displayed:
|
|
- Confirmed cases
|
|
- Deaths
|
|
- Recovered
|
|
|
|
![COVID-19 info](./assets/covid-counter.gif)
|
|
|
|
## Used SharePoint Framework Version
|
|
|
|
![drop](https://img.shields.io/badge/version-1.10.0-green.svg)
|
|
|
|
## Applies to
|
|
|
|
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
|
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
|
|
|
|
|
## Solution
|
|
|
|
Solution|Author(s)
|
|
--------|---------
|
|
react-covid19-info | [Robin Agten](https://twitter.com/AgtenRobin)
|
|
|
|
## Web part properties
|
|
|
|
| Property | Group | Description | Default |
|
|
|-------------------------------------- |------------------------ |----------------------------------------------------------------------------------------------------------- |--------- |
|
|
| iso2 Country Code | Country Settings | Defines the country for which the COVID-19 info should be displayed example: BE for Belgium | None |
|
|
| Show history button | Web part configuration | Determines whether or not the history icon is shown. This can be used to show an graph of historical data | False |
|
|
| View more statistics | Web part configuration | Provide an optional external link to more details statistics | None |
|
|
| Up count duration | Web part configuration | Number of seconds for the counters to count up | 2 |
|
|
| Color for the Confirmed Cases number | Web part configuration | Defines the color of the Confirmed cases number | #69797e |
|
|
| Color for the Deaths number | Web part configuration | Defines the color of the Deaths number | #d13438 |
|
|
| Color for the Recovered number | Web part configuration | Defines the color of the Recovered number | #498205 |
|
|
|
|
## Version history
|
|
|
|
Version|Date|Comments
|
|
-------|----|--------
|
|
1.0|March 25, 2020|Initial Release
|
|
|
|
## Disclaimer
|
|
|
|
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
|
|
|
---
|
|
|
|
## Minimal Path to Awesome
|
|
|
|
* Clone this repository
|
|
* in the command line run:
|
|
* `npm install`
|
|
* `gulp serve`
|
|
|
|
|
|
## Features
|
|
|
|
* Configurable Country
|
|
* Configurable Colors
|
|
* Optional historical graph
|
|
* Optional 'view more statistics' link
|
|
|
|
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
|
|
|
* Using external APIs using httpClient
|
|
* [Office Fabric UI React](https://developer.microsoft.com/en-us/fabric#/)
|
|
* [SPFx Controls React](https://sharepoint.github.io/sp-dev-fx-controls-react/)
|
|
* [SPFx Property Controls](https://sharepoint.github.io/sp-dev-fx-property-controls/)
|
|
* [Recharts](http://recharts.org/en-US/)
|
|
|
|
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-covid19-info" />
|
|
|