{"id":18615073,"url":"https://github.com/andrewjbateman/angular-data-charts","last_synced_at":"2025-04-11T00:31:07.364Z","repository":{"id":38458825,"uuid":"188231052","full_name":"AndrewJBateman/angular-data-charts","owner":"AndrewJBateman","description":":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. ","archived":false,"fork":false,"pushed_at":"2023-02-03T04:53:06.000Z","size":11304,"stargazers_count":6,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T06:51:16.396Z","etag":null,"topics":["angular","angular-data-charts","angular-material","angular-material14","angular14","covid-data","google-charts","mat-cards","navbar","news","rxjs6","scss","scss-styles","user-country"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrewJBateman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-23T12:36:14.000Z","updated_at":"2023-08-21T19:20:13.000Z","dependencies_parsed_at":"2023-02-15T07:16:55.269Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/angular-data-charts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-data-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-data-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-data-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-data-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/angular-data-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322238,"owners_count":21084333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-data-charts","angular-material","angular-material14","angular14","covid-data","google-charts","mat-cards","navbar","news","rxjs6","scss","scss-styles","user-country"],"created_at":"2024-11-07T03:28:01.125Z","updated_at":"2025-04-11T00:31:02.346Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","readme":"# :zap: Angular Data Charts\n\n* **The Coronavirus API this app is based on no longer exists**\n* This is a responsive Angular app that displayed Covid API data \u0026 news for the user country and worldwide. Data was displayed using google-charts and Angular Material tables/display components.\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/angular-data-charts?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/angular-data-charts?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/angular-data-charts?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/angular-data-charts?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Angular Data Charts](#zap-angular-data-charts)\n  * [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal_strength: Technologies](#signal_strength-technologies)\n  * [:floppy_disk: Setup](#floppy_disk-setup)\n  * [:flashlight: Testing](#flashlight-testing)\n  * [:computer: Code Examples](#computer-code-examples)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status \u0026 To-Do List](#clipboard-status--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:file_folder: License](#file_folder-license)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* **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.\n* **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.\n* **Countries Page:** Covid data is fetched from local storage and displayed using a Mat-Table of countries.\n* **News \u0026 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.\n* **Charts Page** Pie and column charts using `angular-google-charts`.\n* **About Page:** Mat-cards show details of each page with useful links.\n* **Contact Page:** Mat-card with Github and contact details from the Github API (no API access key required for this).\n\n## :camera: Screenshots\n\n![Example screenshot](./img/home.png)\n![Example screenshot](./img/home-mob.png)\n![Example screenshot](./img/country-list.png)\n![Example screenshot](./img/news.png)\n![Example screenshot](./img/charts.png)\n![Example screenshot](./img/about.png)\n![Example screenshot](./img/contact.png)\n![Example screenshot](./img/screen-sizes.png)\n\n## :signal_strength: Technologies\n\n* [Angular v14](https://angular.io/)\n* [Angular Material v14](https://material.angular.io/)\n* [Angular Material Icons](https://material.io/resources/icons/?style=baseline)\n* [Angular Material theming](https://material.angular.io/guide/theming)\n* [material design colors](https://www.materialpalette.com/colors) palette\n* [Angular Google Charts](https://www.npmjs.com/package/angular-google-charts) wrapper for the Google Charts library\n* [Dayjs v1](https://github.com/iamkun/dayjs) to convert Github UTC Timestamp to '... ago'\n* [RxJS Library v7](https://angular.io/guide/rx-library) used to handle datastreams and propagation of change using observables\n* [Angular Augury Chrome Extension](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd) v1 used for debugging\n* [rxaviers: Complete list of github markdown emoji markup](https://gist.github.com/rxaviers/7360908)\n* [Quicktype to extract typescript model from JSON object](https://app.quicktype.io/)\n* [Coronatracker API](http://api.coronatracker.com/)\n* [Country Flags API](https://www.countryflagsapi.com/)\n\n## :floppy_disk: Setup\n\n* Install dependencies by running `npm i`\n* Run `ng test` for Jasmine tests carried out in Karma console\n* 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\n* 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\n* Deploy using `firebase deploy`\n\n## :flashlight: Testing\n\n* Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n* Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n## :computer: Code Examples\n\n* extract from `covid-news.component.ts` to subscribe to news API data and store it in local storage.\n\n```typescript\n// subscribe to news API data observable\ngetCovidNews(): void {\n  this.covidDataService.getCovidNews().subscribe((data: NewsItems) =\u003e {\n    this.storageService.set(\"totalNewsItems\", data.total);\n    this.storageService.set(\"storedNewsItems\", data.items);\n    this.newsItems = this.storageService.get(\"storedNewsItems\");\n  });\n}\n\n // create news API observable\ngetCovidNews(): Observable\u003cNewsItems\u003e {\n  this.newsArrayLength = 20;\n  this.storageService.set('newsArrayLength', this.newsArrayLength);\n  this.userCountry = this.storageService.get('userCountryData').name;\n  return this.http\n    .get\u003cNewsItems\u003e(\n      apiNewsBaseUrl +\n        `?limit=${this.newsArrayLength}\u0026offset\u0026country=${this.userCountry}`\n    )\n    .pipe(\n      // tap((data: NewsItems) =\u003e console.log('news data', data)),\n      map((data: NewsItems) =\u003e data),\n      catchError((err) =\u003e {\n        return throwError(() =\u003e new Error('News Item data not found, error: '));\n      })\n    );\n}\n```\n\n## :cool: Features\n\n* Separate Material module with all Material modules accessed via Shared module - review this decision!\n* Detects user location data during the Home page ng 'on initialisation' lifecycle using a simple API GET request via the `location.service.ts` file.\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: This was a working app until the Coronavirus API was removed. This code could be adapted to a new API.\n* To-Do: Nothing. Consider Archiving.\n\n## :clap: Inspiration\n\n* [Angular Material 10/9 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu](https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/)\n* [Angular Material Theme Colors](https://medium.com/@treviergits/angular-material-theme-color-options-7d5968cb7460)\n* [TutorialsPoint: Angular Google Charts Tutorial](https://www.tutorialspoint.com/angular_googlecharts/index.htm)\n* [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\n* [Santosh Yadav, Stop Using Shared Material Module](https://indepth.dev/stop-using-shared-material-module/)\n* [#ANGULAR, Deploying an Angular App to Firebase Hosting](https://alligator.io/angular/deploying-angular-app-to-firebase/)\n\n## :file_folder: License\n\n* This project is licensed under the terms of the MIT license.\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-data-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fangular-data-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-data-charts/lists"}