PKS05US04 Infection Rates by Country

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { ChipComponent } from './components/common/chip/chip.component';
 import { ThemeService } from '@pk-services/theme/theme.service';
 import { FilterPipe } from './pipes/filter.pipe';
 import { StatsCardsComponent } from './components/core/stats-cards/stats-cards.component';
+import { RatesCardsComponent } from './components/core/rates-cards/rates-cards.component';
 
 export function themeFactory(themeService: ThemeService) {
   return () => themeService.setInitialTheme();
@@ -40,7 +41,8 @@ export function themeFactory(themeService: ThemeService) {
     ChipComponent,
     GlobalStatsCardsComponent,
     FilterPipe,
-    StatsCardsComponent
+    StatsCardsComponent,
+    RatesCardsComponent
   ],
   imports: [
     BrowserModule,

src/app/components/core/rates-cards/rates-cards.component.html

@@ -0,0 +1,12 @@
+<div class="row">
+    <div class="col-6" *ngFor="let rate of _rates">
+        <div class="card">
+            <h4 class="card-title text-gray text-bold text-center">{{ rate.title }}</h4>
+            <div class="card-body">
+                <div class="d-flex justify-content-center">
+                    <span [ngClass]="rate.class" class="rate-text text-bold">{{ rate.rate | percent : '1.2-2' }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/components/core/rates-cards/rates-cards.component.sass

@@ -0,0 +1,14 @@
+@import 'variables'
+
+.rate-text
+  font-weight: bolder
+  font-size: 2.5em
+  font-family: $font-raleway
+  &.infections
+    color: $color-blue
+  &.deaths
+    color: $color-red
+  &.recoveries
+    color: $color-green
+  &.critical
+    color: $color-yellow

src/app/components/core/rates-cards/rates-cards.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RatesCardsComponent } from './rates-cards.component';
+
+describe('RatesCardsComponent', () => {
+  let component: RatesCardsComponent;
+  let fixture: ComponentFixture<RatesCardsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RatesCardsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RatesCardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/core/rates-cards/rates-cards.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'pk-rates-cards',
+  templateUrl: './rates-cards.component.html',
+  styleUrls: ['./rates-cards.component.sass']
+})
+export class RatesCardsComponent implements OnInit {
+
+  @Input('rates') set rates(rates: any) {
+    if (rates)
+      this._rates = this.getRates(rates);
+  };
+  _rates: any[];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  getRates(rates: any) {
+    return [
+      {
+        title: 'Recovery Rate',
+        class: 'recoveries',
+        rate: rates.recoveryRate
+      },
+      {
+        title: 'Death Rate',
+        class: 'deaths',
+        rate: rates.deathRate
+      },
+      {
+        title: 'Critical Rate',
+        class: 'critical',
+        rate: rates.criticalRate
+      },
+      {
+        title: 'Non-Critical Rate',
+        class: 'infections',
+        rate: 1 - rates.criticalRate
+      },
+    ]
+  }
+
+}

src/app/components/core/stats-cards/stats-cards.component.ts

@@ -1,40 +1,16 @@
-import { Subscription } from 'rxjs';
-import { Component, OnInit, HostBinding, OnDestroy, Input } from '@angular/core';
-import { StatisticsService } from '@pk-services/statistics/statistics.service';
+import { Component, OnInit, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'pk-stats-cards',
   templateUrl: './stats-cards.component.html',
   styleUrls: ['./stats-cards.component.sass']
 })
-export class StatsCardsComponent implements OnInit, OnDestroy {
+export class StatsCardsComponent implements OnInit {
   @HostBinding() class = 'row mt-3';
-  stats: any[];
-  sub: Subscription = new Subscription();
-  @Input('country') country: string;
+  @Input('stats') stats: any[];
 
-  constructor(private statsService: StatisticsService) { }
+  constructor() { }
 
   ngOnInit(): void {
-    this.onDataLoad();
-  }
-
-  onDataLoad() {
-    if (this.country) {
-      this.sub.add(
-        this.statsService.getCountryStatistics(this.country).subscribe((stats) => {
-          this.stats = stats;
-        })
-      );
-    } else {
-      this.sub.add(this.statsService.getStatistics().subscribe((stats) => {
-        this.stats = stats;
-        console.log('dev', stats);
-      }));
-    }
-  }
-
-  ngOnDestroy() {
-    this.sub.unsubscribe();
   }
 }

src/app/components/pages/country-page/country-page.component.html

@@ -1,4 +1,22 @@
 <section class="stats-dashboard">
   <h2 class="text-gray text-bold title text-center">{{ countryName }}'s Statistics</h2>
-  <pk-stats-cards [country]="countryName"></pk-stats-cards>
+  <pk-stats-cards [stats]="stats"></pk-stats-cards>
+
+  <div class="row mt-3">
+    <div class="col-xl-4 col-12">
+      <div class="card">
+        <!-- Country Infection distribution goes here-->
+      </div>
+    </div>
+
+    <div class="col-xl-8 col-12">
+      <div class="rates-container">
+        <h4 class="card-title text-gray text-bold">Infection Rates</h4>
+        <div class="mt-4 mx-5 justify-content-center">
+          <pk-rates-cards [rates]="rates"></pk-rates-cards>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </section>

src/app/components/pages/country-page/country-page.component.sass

@@ -4,4 +4,7 @@
   min-height: calc(100vh - 55px)
   .title
     margin: 0
-    font-size: 7em
+    font-size: 7em
+
+  .rates-container
+    padding: 19px

src/app/components/pages/country-page/country-page.component.ts

@@ -1,21 +1,41 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { StatisticsService } from '@pk-services/statistics/statistics.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-country-page',
   templateUrl: './country-page.component.html',
   styleUrls: ['./country-page.component.sass']
 })
-export class CountryPageComponent implements OnInit {
+export class CountryPageComponent implements OnInit, OnDestroy {
 
+  stats: any[];
+  rates: any;
   countryName: string;
+  subscription: Subscription;
 
   constructor(
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private statistics: StatisticsService
   ) { }
 
   ngOnInit(): void {
     this.countryName = this.route.snapshot.params.country;
+    this.subscription = this.statistics.getCountryStatistics(this.countryName)
+      .subscribe(stats => {
+        this.stats = stats
+        this.rates = {
+          deathRate: stats[1].rate,
+          recoveryRate: stats[2].rate,
+          criticalRate: stats[3].rate
+        }
+      });
   }
 
+  ngOnDestroy(): void {
+    if (this.subscription)
+      this.subscription.unsubscribe();
+  }
+
 }