honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
sp-dev-fx-webparts/samples/react-covid19-info/README.md

78 lines
3.3 KiB
Markdown
Raw Normal View History

Added a new react-covid19-info sample which contains a web part for showing some basic info about the corona virus for a specific country
2020-03-25 10:49:35 -04:00
# 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
Fixed a minor spelling mistake
2020-04-02 15:53:22 -04:00
- Recovered
Added a new react-covid19-info sample which contains a web part for showing some basic info about the corona virus for a specific country
2020-03-25 10:49:35 -04:00
Updated README file
2020-03-25 10:53:35 -04:00
![COVID-19 info](./assets/covid-counter.gif)
Added a new react-covid19-info sample which contains a web part for showing some basic info about the corona virus for a specific country
2020-03-25 10:49:35 -04:00
## 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" />