Merge pull request #57 from skounis/feat/issue-42-analytics

Feat/issue 42 analytics

src/app/app.component.html

@@ -397,6 +397,7 @@
   <!-- Footer -->
   <footer class="dcc-footer">
     <mat-toolbar style="width: 100%;">
+      <app-progress></app-progress>
       <span class="example-spacer"></span>
       <button mat-button (click)="upload()" class="example-icon" aria-label="Example icon-button with share icon">
         <mat-icon>cloud_upload</mat-icon> Upload Test Results

src/app/app.module.ts

@@ -26,15 +26,20 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { MockDataInterceptor } from '../interceptors/mock-data.interceptor'
+import { MockDataInterceptor } from '../interceptors/mock-data.interceptor';
+import { ProgressComponent } from '../components/progress/progress.component'
+import { MatChipsModule } from '@angular/material/chips';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
 
 @NgModule({
   declarations: [
     AppComponent,
     DCCDescriptionComponent,
     DCCQRComponent,
     QRTreeComponent,
-    TestResultComponent
+    TestResultComponent,
+    ProgressComponent
   ],
   imports: [
     AppRoutingModule,
@@ -54,11 +59,13 @@ import { MockDataInterceptor } from '../interceptors/mock-data.interceptor'
     MatExpansionModule,
     MatSnackBarModule,
     MatBadgeModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatChipsModule,
+    MatProgressBarModule
   ],
   providers: [
     { provide: APP_INITIALIZER, useFactory: loadInitialData, deps: [DataLoaderService], multi: true },
-    { provide: HTTP_INTERCEPTORS, useClass: MockDataInterceptor, multi: true},
+    { provide: HTTP_INTERCEPTORS, useClass: MockDataInterceptor, multi: true },
     DataLoaderService,
     AppStore,
     ...environment.providers,

src/components/progress/progress.component.html

@@ -0,0 +1,25 @@
+<div style="margin-bottom: 5px;">
+  <mat-progress-bar class="example-margin" color="primary" mode="determinate" [value]="progress" [bufferValue]=" value">
+  </mat-progress-bar>
+</div>
+<mat-chip-list aria-label="Fish selection">
+  <mat-chip>
+    <mat-icon aria-hidden="false" aria-label="Example home icon">qr_code</mat-icon>
+    {{analytics?.progress(null)}} / {{analytics?.codes()}}
+  </mat-chip>
+  <mat-chip color="primary" selected>
+    <!-- <mat-icon aria-hidden="false" aria-label="Example home icon">check_circle</mat-icon>  -->
+    Valid:
+    {{analytics?.progress(testResult.Valid)}}
+  </mat-chip>
+  <mat-chip color="accent" selected>
+    <!-- <mat-icon aria-hidden="false" aria-label="Example home icon">report_problem</mat-icon>  -->
+    Invalid:
+    {{analytics?.progress(testResult.Invalid)}}
+  </mat-chip>
+  <mat-chip color="warn" selected>
+    <!-- <mat-icon aria-hidden="false" aria-label="Example home icon">error</mat-icon>  -->
+    Error:
+    {{analytics?.progress(testResult.Error)}}
+  </mat-chip>
+</mat-chip-list>

src/components/progress/progress.component.spec.ts

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

src/components/progress/progress.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { IQRCode, TestResultEnum, Analytics } from '../../interfaces/model.interface';
+import { AppStore } from '../../stores/app.store';
+
+@Component({
+  selector: 'app-progress',
+  templateUrl: './progress.component.html',
+  styleUrls: ['./progress.component.css']
+})
+export class ProgressComponent implements OnInit {
+  public get value(): number {
+    return !!this.analytics ? this.analytics.codes() : 0;
+  }
+  public get progress(): number {
+    return !!this.analytics ? this.analytics.progress(null) : 0;
+  }
+  public get testResult(): typeof TestResultEnum {
+    return TestResultEnum;
+  }
+  analytics: Analytics | null = null;
+
+  constructor(private store: AppStore) {
+    this.store.getSelected().subscribe((selected: IQRCode | null) => {
+      this.update();
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  private update() {
+    const qrcodes = this.store.getData().value;
+    const results = this.store.getResults();
+    const analytcs = new Analytics(qrcodes, results);
+    this.analytics = analytcs;
+  }
+
+}

src/components/qrtree/qrtree.component.ts

@@ -4,15 +4,15 @@ import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'
 import * as _ from 'lodash';
 import { AppStore } from '../../stores/app.store';
 import { TreeNode, FlatNode } from '../../interfaces/tree.interface'
-import { IQRCode, TestResultEnum  } from '../../interfaces/model.interface';
+import { IQRCode, TestResultEnum, Analytics  } from '../../interfaces/model.interface';
 
 @Component({
   selector: 'app-qrtree',
   templateUrl: './qrtree.component.html',
   styleUrls: ['./qrtree.component.css']
 })
 export class QRTreeComponent implements OnInit {
-  
+
   selected: IQRCode | null = null;
 
   constructor(private store: AppStore) {

src/interfaces/model.interface.ts

@@ -131,4 +131,25 @@ export class TestResultMetadata implements ITestResultMetadata {
   qrcode64?: string;
   /** The validation result */
   result?: TestResultEnum
+}
+
+export class Analytics {
+  constructor(private rqCodes: Array<IQRCode>, private results: TestResult) {}
+
+  /**
+   * @returns The number of all the QR Codes for testing.
+   */
+  public codes(): number {
+    return this.rqCodes.length | 0;
+  }
+
+  /**
+   * @param category The test result type.
+   * @returns The number of test submitted.
+   */
+  public progress(category: TestResultEnum | null): number {
+    // Return all
+    if (!category) return this.results.results.length;
+    return this.results.results.filter(value => value.result === category).length  
+  }
 }

src/stores/app.store.ts

@@ -52,13 +52,13 @@ export class AppStore {
     this.raw = data;
     const mapped = data.tree.map((i): IQRCode => {
       const parts = i.path.split('/');
-      let item: IQRCode = { 
-        id: i.path, 
-        country: parts[COUNTRY], 
-        title: i.path, 
-        version: parts[VERSION], 
-        file: parts[FILE], 
-        uri: i.url,        
+      let item: IQRCode = {
+        id: i.path,
+        country: parts[COUNTRY],
+        title: i.path,
+        version: parts[VERSION],
+        file: parts[FILE],
+        uri: i.url,
       }
       item = this.decorate(item);
       return item;
@@ -97,9 +97,15 @@ export class AppStore {
    * @param value The QR Code
    */
   setSelected(value: IQRCode) {
-    this.github.getImage(value.uri).subscribe((item: any) => {
-      value.qrcode64 = item;
-      this.selected.next(value);
+    this.github.getImage(value.uri).subscribe({
+      next: (item: any) => {
+        value.qrcode64 = item;
+        this.selected.next(value);
+      },
+      error: (error) => {
+        this.setMessage('Error fetching the QR Code. See the console!');
+        console.error('app.store.ts: setSelected', error);
+      }
     });
   }
 
@@ -136,6 +142,7 @@ export class AppStore {
     if (index >= 0) {
       this.setSelected(this.data.value[index]);
     } else {
+      this.setMessage('You reached the 1st QR code in the list.');
       console.warn('Store: Start of the array reached.')
     }
   }
@@ -148,6 +155,7 @@ export class AppStore {
     if (index < this.data.value.length) {
       this.setSelected(this.data.value[index]);
     } else {
+      this.setMessage('You reached the last QR code in the list.');
       console.warn('Store: End of the array reached.')
     }
   }
@@ -160,7 +168,7 @@ export class AppStore {
     this.results.addEntry(result)
     this.serialize();
     // Update data
-    if(this.raw) {
+    if (this.raw) {
       this.setData(this.raw);
     }
   }
@@ -214,7 +222,7 @@ export class AppStore {
    * @param id QR code identifier
    * @returns qr code
    */
-  public find(id: string, ): IQRCode {
+  public find(id: string): IQRCode {
     const items = this.filter('id', id);
     return items[0];
   }