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.

⚡ 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

📄 Table of contents

• ⚡ Angular Data Charts
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔦 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• General: Chart data from Corona API 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 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).

📷 Screenshots

📶 Technologies

• Angular v14
• Angular Material v14
• Angular Material Icons
• Angular Material theming
• material design colors palette
• Angular Google Charts wrapper for the Google Charts library
• Dayjs v1 to convert Github UTC Timestamp to '... ago'
• RxJS Library v7 used to handle datastreams and propagation of change using observables
• Angular Augury Chrome Extension v1 used for debugging
• rxaviers: Complete list of github markdown emoji markup
• Quicktype to extract typescript model from JSON object
• Coronatracker API
• Country Flags API

💾 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

🔦 Testing

• Run ng test to execute the unit tests via Karma.
• Run ng e2e to execute the end-to-end tests via Protractor.

💻 Code Examples

• extract from covid-news.component.ts to subscribe to news API data and store it in local storage.

// 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<NewsItems> {
  this.newsArrayLength = 20;
  this.storageService.set('newsArrayLength', this.newsArrayLength);
  this.userCountry = this.storageService.get('userCountryData').name;
  return this.http
    .get<NewsItems>(
      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: '));
      })
    );
}

🆒 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.

📋 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.

👏 Inspiration

• Angular Material 10/9 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu
• Angular Material Theme Colors
• TutorialsPoint: Angular Google Charts Tutorial
• Stackoverflow, Regular Expression for formatting numbers in JavaScript to convert chart threshold numbers to strings with comma separation
• Santosh Yadav, Stop Using Shared Material Module
• #ANGULAR, Deploying an Angular App to Firebase Hosting

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]