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

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