COVID19 Stats using Angular Material Design

  •        0
  

We aggregate and tag open source projects. We have collections of more than one million projects. Check out the projects section.




Angular is a framework to build responsive User Interface for mobile, web and desktop. To know more about the introduction to Angular, refer to our previous article. In this article, we will see how to quickly build User Interface with angular material.

Material design is inspired from the real world building architecture language. It is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products. 

Material is a design system backed by open source code that helps teams build high quality digital experiences. It is a design language that Google developed in 2014. Expanding on the "card" motifs that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Material Components are available for UI  development which is also available for mobile and web. This material components are available for development without any framework based on the plain vanilla JavaScript with web pack of material design. 

Install angular material 

Angular Material Design wraps the material design to Angular framework. It is a straightforward API, it is also versatile to build their own custom components. In this article, we are going build a dashboard for COVID statistics using Angular material design. 

Install the Angular material using the below command. It will install Angular Material, the Component Dev Kit (CDK), Angular Animations. We can use cdk styles (from angular material) and mdc styles (from material).

      ng add @angular/material
      or 
npm install --save @angular/material @angular/cdk @angular/animations

COVID Statistics Application

Covid-Summary

Create the application "ng new material-app-workout". Clear the app-component.html and we can introduce one of the angular theme in styles.css

  /* You can add global styles to this file, and also import other style files */
  @import "~@angular/material/prebuilt-themes/indigo-pink.css";

Lets have the table of country wide summary stats in the Angular material table. It is done with mat-table component. When we use the component, it has to be injected in the respective module by importing it. Here, we will import it in the app module. 

Define each column with ng-container, where we define the header and data field from the datasource. Then have the mat-header-row which will hold the list of displayed columns. It will also define the data row using mat-row where we define the each element in the array. Displayed columns array should hold the matColumnDef names to be visible in the material design. We will also use Angular filter to convert the date to the India time zone (IST).

<main>
   <mat-table [dataSource]="coronastats" matSort matSortActive="created" matSortDisableClear matSortDirection="asc" class="mat-elevation-z8">
        <ng-container matColumnDef="Country" >
            <mat-header-cell *matHeaderCellDef >Country</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.Country}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="TotalConfirmed" >
            <mat-header-cell *matHeaderCellDef mat-sort-header>Total Confirmed</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.TotalConfirmed}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="NewConfirmed">
            <mat-header-cell *matHeaderCellDef mat-sort-header>New Confirmed</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.NewConfirmed}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="NewDeaths">
            <mat-header-cell *matHeaderCellDef mat-sort-header>New Deaths</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.NewDeaths}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="TotalDeaths">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Total Deaths</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.TotalDeaths}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="TotalRecovered">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Total Recovered</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.TotalRecovered}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="NewRecovered">
            <mat-header-cell *matHeaderCellDef mat-sort-header>New Recovered</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.NewRecovered}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Date">
            <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.Date |  date:'yy-MM-dd h:mm a OOOO'}}</mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns" [ngClass]="{'isgood': row.isMedicalGood }"></mat-row>
    </mat-table>
</main>

We need to fetch the data from the REST API and populate in the datasource variable "coronastats". It can be done using simple httpclient component. 

fetchCoronaStats(): void {
    this.httpclient.get("https://api.covid19api.com/summary").subscribe((response: any)=>{
      console.log("response ===>", response.Countries)
      this.coronastats = response.Countries
      this.coronastats.forEach((stat: ICoronaStats, index, arr)=> {
        let percentage: BigInteger = (stat.TotalRecovered / stat.TotalConfirmed) * 100  
        console.log(stat.Country + "==" +  percentage +  "==" +  (percentage > 50));
        if (percentage > 50) {
          stat.isMedicalGood = true;
        } 
      })
    });
  }

Let's introduce sorting to the report, we need to add mat-sort-header in each mat-header-cell which requires sorting. We also need to add " matSort matSortActive="created" " attributes to the mat-table tag. Now when user clicks on the header, it will listen by the MatSort Object. MatSort object can be injected using the  "@ViewChild(MatSort) matsort: MatSort;". It can be injected to the setter method, where listener can listen on sort click events and provide the column and direction. Current API doesn't have the option of accepting sort options so lets take the datasource and sort it using the function. As all are numerical values, we can take the item and do a subtraction which will tell whether it is greater or lesser. 

@ViewChild(MatSort, {static: false}) 
  set sort(sort: MatSort) {
    sort.sortChange.subscribe((sort: Sort) => {
      console.log('sortChange', sort.active);
      console.log('sortChange', sort.direction);
      console.log(this.coronastats);
      this.coronastats = this.coronastats.sort((cs1, cs2) => {
        if (sort.direction === 'asc') {
          return cs1[sort.active] - cs2[sort.active];
        } else {
          return cs2[sort.active] - cs1[sort.active];
        }
      });
      this.coronastats = [...this.coronastats];
      console.log(this.coronastats);    
    });

When user clicks the header, the data will be sorted based on the column. Also we can play with CSS like by getting the total recovered and total confirmed percentage to identify the medical condition is good. This variable is also added to datasource to have the highlight in each mat-row with ng-class having isgood CSS class. 

 .example-spacer {
    flex: 1 1 auto;
  }
.clickableicon {
  cursor: pointer;
  border: 1px solid white;
}
mat-header-cell {
  color: #3f51b5;
  font-size: 16px;
}
.isgood {
  background-color: lightgreen;
}

Finally refresh icon to keep getting the latest update can be introduced along with the title card.mat-elevation-z8 will project the component on the browser. mat-divider will have a bisecting line between the title and summary. Many icons are available as part of mat-icon tag where just the name picks the icon, here "refresh" used to refresh the corona stats.

<header>
    <mat-toolbar color="primary">
        <mat-toolbar-row>
            <span>{{ title }} </span>           
           <span class="example-spacer"></span>
            <mat-icon  class="clickableicon mat-elevation-z3" aria-hidden="false"
                          aria-label="Example refresh icon" (click)="this.fetchCoronaStats()">refresh</mat-icon>
        </mat-toolbar-row>
    </mat-toolbar>
    <mat-divider></mat-divider>
</header>

The module required from material are injected into the app.module.ts. 

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSliderModule } from '@angular/material/slider';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { HttpClientModule } from '@angular/common/http';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSliderModule,
    MatButtonModule,
    MatDividerModule,
    MatTableModule,
    MatSortModule, 
    MatToolbarModule, 
    MatIconModule,
    HttpClientModule
  ],
  providers: [],
    bootstrap: [AppComponent]
})


Reference:

https://google.github.io/material-design-icons/

https://github.com/nagappan080810/angular7projects/tree/master/material-app-workout


   

Nagappan is a techie-geek and a full-stack senior developer having 10+ years of experience in both front-end and back-end. He has experience on front-end web technologies like HTML, CSS, JAVASCRIPT, Angular and expert in Java and related frameworks like Spring, Struts, EJB and RESTEasy framework. He hold bachelors degree in computer science and he is very passionate in learning new technologies.

Subscribe to our newsletter.

We will send mail once in a week about latest updates on open source tools and technologies. subscribe our newsletter



Related Articles

JHipster - Generate simple web application code using Spring Boot and Angular

  • jhipster spring-boot angular web-application

JHipster is one of the full-stack web app development platform to generate, develop and deploy. It provides the front end technologies options of React, Angular, Vue mixed with bootstrap and font awesome icons. Last released version is JHipster 6.0.1. It is licensed under Apache 2 license.

Read More


Getting Started on Angular 7

  • angular ui-ux front-end-framework

Angular is a platform for building responsive web, native desktop and native mobile applications. Angular client applications are built using HTML, CSS and Typescript. Typescript is a typed superset of Javascript that compiles to plain Javascript. Angular core and optional modules are built using Typescript. Code has been licensed as MIT License.

Read More


Push Notifications using Angular

  • angular push-notifications notifications

Notifications is a message pushed to user's device passively. Browser supports notifications and push API that allows to send message asynchronously to the user. Messages are sent with the help of service workers, it runs as background tasks to receive and relay the messages to the desktop if the application is not opened. It uses web push protocol to register the server and send message to the application. Once user opt-in for the updates, it is effective way of re-engaging users with customized content.

Read More


Angular Service Workers Usage Guide

  • angular service-worker offline-app

Web developers come across scenarios like web application completely breaks when workstation goes offline. Likewise to get into our application, every time we need to open a browser and then access it. Instead if it is in app, it will be easy to access for end-user. Push notifications similar to email client need to be done through web application. All these are addressed by a magic called service worker.

Read More


Angular Security - Authentication Service

  • angular security authentication jwt

Angular is a framework for creating single page web application. Angular facilitates the security feature and protection mechanism. It provides frameworks by verifying all the routing urls with security authguard interface to validate and verify the user and its permissions.

Read More



All About Multi-Provider Feature of Angular Version 2.0

  • angular dependency-injection multi-providers

The newly introduced concept of dependency injection in Angular version 2.0 makes it an attractive front-end technology all because of one amazing feature called 'Multi-Providers'. In general, it allows the users to attach certain operations by themselves and a few plugin custom functionality which is not required in our mobile app use case.

Read More


Where should i host my open source code?

  • code-hosting open-source code hosting

I have a open source project but where should i host? This is the frequently asked question among developers. Below details will certainly help to choose the best code hosting site.

Read More


Desktop Apps using Electron JS with centralized data control

  • electronjs couchdb pouchdb desktop-app

When there is a requirement for having local storage for the desktop application context and data needs to be synchronized to central database, we can think of Electron with PouchDB having CouchDB stack. Electron can be used for cross-platform desktop apps with pouch db as local storage. It can sync those data to centralized database CouchDB seamlessly so any point desktop apps can recover or persist the data. In this article, we will go through of creation of desktop apps with ElectronJS, PouchDB and show the sync happens seamlessly with remote CouchDB.

Read More


Electron JS- Native capabilities

  • electronjs electron desktop-app

Electron is an open source library to build native applications which also works as cross-platform desktop applications. It provision operating system functionalities with help of node integration. In this article, we will go through how to access the Operating System variables, Inter system communication, System dialog, Access files, folders also their statistics.

Read More


Introduction to Light 4J Microservices Framework

  • light4j microservice java programming framework

Light 4j is fast, lightweight, secure and cloud native microservices platform written in Java 8. It is based on pure HTTP server without Java EE platform. It is hosted by server UnderTow. Light-4j and related frameworks are released under the Apache 2.0 license.

Read More


Scene.js - Library to Create Timeline-Based Animation

  • scenejs css timeline javascript animation motion

Scene.js is a JavaScript timeline-based animation library for creating animation websites. As an animated timeline library, it allows you to create a chronological order of movements and positions of objects.

Read More


AbanteCart - Easy to use open source e-commerce platform, helps selling online

  • e-commerce ecommerce cart

AbanteCart is a free, open source shopping cart that was built by developers with a passion for free and accessible software. Founded in 2010 (launched in 2011), the platform is coded in PHP and supports MySQL. AbanteCart’s easy to use admin and basic layout management tool make this open source solution both easy to use and customizable, depending on the skills of the user. AbanteCart is very user-friendly, it is entirely possible for a user with little to no coding experience to set up and use this cart. If the user would be limited to the themes and features available in base AbanteCart, there is a marketplace where third-party extensions or plugins come to the rescue.

Read More


Introduction to Apache Cassandra

  • cassandra database nosql

Apache Cassandra was designed by Facebook and was open-sourced in July 2008. It is regarded as perfect choice when the users demand scalability and high availability without any impact towards performance. Apache Cassandra is highly scalable, high-performance distributed database designed to handle large voluminous amounts of data across many commodity servers with no failure.

Read More


8 Reasons Why Python Scores Over PHP for Web Development

  • python php web-development

PHP, the general-purpose scripting language has been used since decades for socket programming and web development. But in recent times, Python has become the most sought after programming language. This all-purpose programming language is attracting more developers in the industry owing to its highly dynamic and extensible nature. Let's see how Python is winning over age-old PHP.

Read More


Know everything about Dependency Injection in Magento 2

  • magento dependency-injection php

Magento 2 is no longer a buzzing term. Since Its inception one and a half years ago, developers are in love with its rich technology stack. The following post emphasizes on Dependency Injection (DI), one of the best design patterns that Magento 2 uses.

Read More


Web based commenting system. Embed directly in to your site

  • comment free commenting-system

Comments are very important for a blog or website to get feedback from their users. Comments could be threaded where users could be discuss and post reply to the comment. Here we going discuss about the most popular and widely used free commenting system. You need to embed their javascript code in your every page and it will take care the rest of the task.

Read More


How to increase Alexa rank for the website

  • alexa internet rank

Alexa is a web information company promoted by Amazon. It provides traffic, page views, reach, etc for the web sites.Alexa ranking is widely used to rate the web site. Ranking is in increasing order. High traffic sites has lesser the rank value and poor traffic web sites will have higher the rank value. Google is ranked 1. Follow our steps, how we increased the rank from 3 million to 300,000.

Read More


React Patent Clause Licensing issue. Is it something to worry?

  • react react-license facebook

React libraries from Facebook is one of the most used UI libraries. It is competitive to AngularJS. There are many open source UI components or frameworks available but mostly people narrow down to two choices Angular / React. Recently Facebook has updated React license and added a patent clause which makes companies to worry and rethink whether to use React or not.

Read More


LogicalDOC - Open Source DMS

  • dms document-management-system

LogicalDOC is both a document management and a collaboration system. The software is loaded with many functions and allows organizing, indexing, retrieving, controlling and distributing important business documents securely and safely for any organization and individual.

Read More


SeoToaster: easy, fast and efficient open source CMS for top SEO performance

  • cms content-management-system seo ecommerce

SeoToaster is a free Open Source CMS & Ecommerce solution to build, manage and market websites optimized for for top search engine performance. As the name implies, Seo Toaster is to date the only content management system (CMS) to truly integrate SEO execution and web marketing automation technology in full compliance with the search engines industry’s best practices.

Read More