https://github.com/andrewjbateman/angular-data-charts
:clipboard: The Coronavirus API this app is based on no longer exists. Covid-19 data was displayed using angular-google-charts module. Covid data/news from api.coronatracker.com was shown in mat-cards.
https://github.com/andrewjbateman/angular-data-charts
angular angular-data-charts angular-material angular-material14 angular14 covid-data google-charts mat-cards navbar news rxjs6 scss scss-styles user-country
Last synced: about 1 month ago
JSON representation
:clipboard: The Coronavirus API this app is based on no longer exists. Covid-19 data was displayed using angular-google-charts module. Covid data/news from api.coronatracker.com was shown in mat-cards.
- Host: GitHub
- URL: https://github.com/andrewjbateman/angular-data-charts
- Owner: AndrewJBateman
- License: mit
- Created: 2019-05-23T12:36:14.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T04:53:06.000Z (over 2 years ago)
- Last Synced: 2025-03-25T06:51:16.396Z (about 2 months ago)
- Topics: angular, angular-data-charts, angular-material, angular-material14, angular14, covid-data, google-charts, mat-cards, navbar, news, rxjs6, scss, scss-styles, user-country
- Language: TypeScript
- Homepage:
- Size: 10.8 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :zap: Angular Data Charts
* **The Coronavirus API this app is based on no longer exists**
* This is a responsive Angular app that displayed Covid API data & news for the user country and worldwide. Data was displayed using google-charts and Angular Material tables/display components.
* **Note:** to open web links in a new window use: _ctrl+click on link_
## :page_facing_up: Table of contents
* [:zap: Angular Data Charts](#zap-angular-data-charts)
* [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)
* [:books: General info](#books-general-info)
* [:camera: Screenshots](#camera-screenshots)
* [:signal_strength: Technologies](#signal_strength-technologies)
* [:floppy_disk: Setup](#floppy_disk-setup)
* [:flashlight: Testing](#flashlight-testing)
* [:computer: Code Examples](#computer-code-examples)
* [:cool: Features](#cool-features)
* [:clipboard: Status & To-Do List](#clipboard-status--to-do-list)
* [:clap: Inspiration](#clap-inspiration)
* [:file_folder: License](#file_folder-license)
* [:envelope: Contact](#envelope-contact)
## :books: General info
* **General:** Chart data from [Corona API](https://api.coronatracker.com/) JSON time-series of coronavirus cases (confirmed, deaths and recovered) per country. Detects user location and shows data from that country.
* **Home Page:** World and local Covid data - using [iPapa API](https://ipapi.co/) to detect user country. Data shown in tables on Mat-cards and on Google charts using tab-groups to select between confirmed cases, deaths and recovered.
* **Countries Page:** Covid data is fetched from local storage and displayed using a Mat-Table of countries.
* **News & NewsDetail Pages:** Covid news data is shown on Mat-cards. The Day.js npm module is used to convert the UTC format date into '... ago'. Clicking on a news card will route the user to a news detail page with the JSON data passed using angular router navigation extras. The Coronatracker API does not have a lot of the latest news but it demonstrates a working app.
* **Charts Page** Pie and column charts using `angular-google-charts`.
* **About Page:** Mat-cards show details of each page with useful links.
* **Contact Page:** Mat-card with Github and contact details from the Github API (no API access key required for this).
## :camera: Screenshots
## :signal_strength: Technologies
* [Angular v14](https://angular.io/)
* [Angular Material v14](https://material.angular.io/)
* [Angular Material Icons](https://material.io/resources/icons/?style=baseline)
* [Angular Material theming](https://material.angular.io/guide/theming)
* [material design colors](https://www.materialpalette.com/colors) palette
* [Angular Google Charts](https://www.npmjs.com/package/angular-google-charts) wrapper for the Google Charts library
* [Dayjs v1](https://github.com/iamkun/dayjs) to convert Github UTC Timestamp to '... ago'
* [RxJS Library v7](https://angular.io/guide/rx-library) used to handle datastreams and propagation of change using observables
* [Angular Augury Chrome Extension](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd) v1 used for debugging
* [rxaviers: Complete list of github markdown emoji markup](https://gist.github.com/rxaviers/7360908)
* [Quicktype to extract typescript model from JSON object](https://app.quicktype.io/)
* [Coronatracker API](http://api.coronatracker.com/)
* [Country Flags API](https://www.countryflagsapi.com/)
## :floppy_disk: Setup
* Install dependencies by running `npm i`
* Run `ng test` for Jasmine tests carried out in Karma console
* Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files
* Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build
* Deploy using `firebase deploy`
## :flashlight: Testing
* Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
* Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## :computer: Code Examples
* extract from `covid-news.component.ts` to subscribe to news API data and store it in local storage.
```typescript
// subscribe to news API data observable
getCovidNews(): void {
this.covidDataService.getCovidNews().subscribe((data: NewsItems) => {
this.storageService.set("totalNewsItems", data.total);
this.storageService.set("storedNewsItems", data.items);
this.newsItems = this.storageService.get("storedNewsItems");
});
}
// create news API observable
getCovidNews(): Observable {
this.newsArrayLength = 20;
this.storageService.set('newsArrayLength', this.newsArrayLength);
this.userCountry = this.storageService.get('userCountryData').name;
return this.http
.get(
apiNewsBaseUrl +
`?limit=${this.newsArrayLength}&offset&country=${this.userCountry}`
)
.pipe(
// tap((data: NewsItems) => console.log('news data', data)),
map((data: NewsItems) => data),
catchError((err) => {
return throwError(() => new Error('News Item data not found, error: '));
})
);
}
```
## :cool: Features
* Separate Material module with all Material modules accessed via Shared module - review this decision!
* Detects user location data during the Home page ng 'on initialisation' lifecycle using a simple API GET request via the `location.service.ts` file.
## :clipboard: Status & To-Do List
* Status: This was a working app until the Coronavirus API was removed. This code could be adapted to a new API.
* To-Do: Nothing. Consider Archiving.
## :clap: Inspiration
* [Angular Material 10/9 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu](https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/)
* [Angular Material Theme Colors](https://medium.com/@treviergits/angular-material-theme-color-options-7d5968cb7460)
* [TutorialsPoint: Angular Google Charts Tutorial](https://www.tutorialspoint.com/angular_googlecharts/index.htm)
* [Stackoverflow, Regular Expression for formatting numbers in JavaScript](https://stackoverflow.com/questions/2254185/regular-expression-for-formatting-numbers-in-javascript) to convert chart threshold numbers to strings with comma separation
* [Santosh Yadav, Stop Using Shared Material Module](https://indepth.dev/stop-using-shared-material-module/)
* [#ANGULAR, Deploying an Angular App to Firebase Hosting](https://alligator.io/angular/deploying-angular-app-to-firebase/)
## :file_folder: License
* This project is licensed under the terms of the MIT license.
## :envelope: Contact
* Repo created by [ABateman](https://github.com/AndrewJBateman), email: [email protected]