NRPT-690: Adding metric service, api calls, chart rendering

angular/package.json

@@ -71,6 +71,7 @@
     "@tinymce/tinymce-angular": "3.4.0",
     "async": "~3.1.0",
     "bootstrap": "~4.5.0",
+    "chart.js": "^2.9.4",
     "classlist.js": "~1.1.20150312",
     "core-js": "^2.5.4",
     "hammerjs": "~2.0.8",

angular/projects/admin-nrpti/src/app/home/home.component.html

@@ -28,5 +28,27 @@ <h3 class="card-title">Records</h3>
         </div>
       </div>
     </div>
+    <div class="mt-2 card-deck">
+      <div class="card">
+        <div class="card-body">
+          <h3 class="card-title">Agency Records</h3>
+          <p class="card-text">Records by Agency published to NRCED over the last 365 days</p>
+        </div>
+        <div class="card-footer">
+          <canvas #chart1></canvas>
+        </div>
+      </div>
+    </div>
+    <div class="mt-2 card-deck">
+      <div class="card">
+        <div class="card-body">
+          <h3 class="card-title">Records by Type</h3>
+          <p class="card-text">Records by Type Published to NRCED</p>
+        </div>
+        <div class="card-footer">
+          <canvas #chart2></canvas>
+        </div>
+      </div>
+    </div>
   </div>
-</div>
+</div>

angular/projects/admin-nrpti/src/app/home/home.component.spec.ts

@@ -6,6 +6,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { LoadingScreenService } from 'nrpti-angular-components';
 import { Constants } from '../utils/constants/misc';
 import { KeycloakService } from '../services/keycloak.service';
+import { MetricService } from '../services/metric.service';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
@@ -37,14 +38,21 @@ describe('HomeComponent', () => {
     }
   };
 
+  const mockMetricService = {
+    getMetric: (code) => {
+      return [];
+    }
+  };
+
   beforeEach((() => {
     TestBed.configureTestingModule({
       declarations: [HomeComponent],
       imports: [RouterTestingModule],
       providers: [
         { provide: 'Router', useValue: mockRouter },
         { provide: LoadingScreenService, useValue: mockLoadingScreenService },
-        { provide: KeycloakService, useValue: mockKeyCloakService }
+        { provide: KeycloakService, useValue: mockKeyCloakService },
+        { provide: MetricService, useValue: mockMetricService }
       ]
     }).compileComponents();
   }));

angular/projects/admin-nrpti/src/app/home/home.component.ts

@@ -1,21 +1,136 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { LoadingScreenService } from 'nrpti-angular-components';
-import { Router } from '@angular/router';
 import { KeycloakService } from '../services/keycloak.service';
+import { Chart } from 'chart.js';
+import { MetricService } from '../services/metric.service';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
+  @ViewChild('chart1') chart1;
+  data365Chart;
+  @ViewChild('chart2') chart2;
+  dataRecordType;
+  public loading = true;
+
   constructor(
+    public route: ActivatedRoute,
     public keycloakService: KeycloakService,
+    private metricService: MetricService,
     private router: Router,
     private loadingScreenService: LoadingScreenService
   ) { }
 
-  ngOnInit() { }
+  async ngOnInit() {
+    const issuingAgencyPublished365 = await this.metricService.getMetric('IssuingAgencyPublished365');
+    // tslint:disable-next-line: prefer-const
+    let labels365 = [];
+    // tslint:disable-next-line: prefer-const
+    let data365 = [];
+    // tslint:disable-next-line:prefer-for-of
+    for (let i = 0; i < issuingAgencyPublished365.length; i++) {
+      const keyName = this.getKeyName(issuingAgencyPublished365[i]);
+      labels365.push(issuingAgencyPublished365[i][keyName]);
+      data365.push(issuingAgencyPublished365[i]['count']);
+    }
+    this.data365Chart = new Chart(this.chart1.nativeElement, {
+      type: 'pie',
+      data: {
+        labels: labels365,
+        datasets: [{
+          data: data365,
+          backgroundColor: [
+            'rgba(255, 99, 132, 0.2)',
+            'rgba(54, 162, 235, 0.2)',
+            'rgba(255, 206, 86, 0.2)',
+            'rgba(75, 192, 192, 0.2)',
+            'rgba(153, 102, 255, 0.2)',
+            'rgba(255, 159, 64, 0.2)',
+            'rgba(100, 33, 155, 0.2)',
+            'rgba(100, 33, 77, 0.2)'
+          ],
+          borderColor: [
+            'rgba(255, 99, 132, 1)',
+            'rgba(54, 162, 235, 1)',
+            'rgba(255, 206, 86, 1)',
+            'rgba(75, 192, 192, 1)',
+            'rgba(153, 102, 255, 1)',
+            'rgba(255, 159, 64, 1)',
+            'rgba(100, 33, 155, 1)',
+            'rgba(100, 33, 77, 0.2)'
+          ],
+          borderWidth: 1
+        }]
+      },
+      options: {
+        cutoutPercentage: 50
+      }
+    });
+
+    // RecordByType
+    const recordTypes = await this.metricService.getMetric('RecordByType');
+    // tslint:disable-next-line: prefer-const
+    let typeLabels = [];
+    // tslint:disable-next-line: prefer-const
+    let typeData = [];
+    // tslint:disable-next-line:prefer-for-of
+    for (let i = 0; i < recordTypes.length; i++) {
+      const keyName = this.getKeyName(recordTypes[i]);
+      typeLabels.push(recordTypes[i][keyName]);
+      typeData.push(recordTypes[i]['count']);
+    }
+    this.dataRecordType = new Chart(this.chart2.nativeElement, {
+      type: 'pie',
+      data: {
+        labels: typeLabels,
+        datasets: [{
+          data: typeData,
+          backgroundColor: [
+            'rgba(255, 99, 132, 0.2)',
+            'rgba(54, 162, 235, 0.2)',
+            'rgba(255, 206, 86, 0.2)',
+            'rgba(75, 192, 192, 0.2)',
+            'rgba(153, 102, 255, 0.2)',
+            'rgba(255, 159, 64, 0.2)',
+            'rgba(100, 33, 155, 0.2)',
+            'rgba(100, 33, 77, 0.2)'
+          ],
+          borderColor: [
+            'rgba(255, 99, 132, 1)',
+            'rgba(54, 162, 235, 1)',
+            'rgba(255, 206, 86, 1)',
+            'rgba(75, 192, 192, 1)',
+            'rgba(153, 102, 255, 1)',
+            'rgba(255, 159, 64, 1)',
+            'rgba(100, 33, 155, 1)',
+            'rgba(100, 33, 77, 0.2)'
+          ],
+          borderWidth: 1
+        }]
+      },
+      options: {
+        cutoutPercentage: 50
+      }
+    });
+  }
+
+  getKeyName(metricObject) {
+    // Determine the non-count key by popping the first one off, checking
+    // if it's `count` and if it is, pop the next one as there are only
+    // ever 2 attributes in the metric report.  This is how metabase creates
+    // it's queries.
+    const theKeys = Object.keys(metricObject);
+    let keyName = theKeys.pop();
+
+    if (keyName === 'count') {
+      keyName = theKeys.pop();
+    }
+    return keyName;
+  }
 
   activateLoading(path) {
     this.loadingScreenService.setLoadingState(true, 'body');

angular/projects/admin-nrpti/src/app/services/metric.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { ApiService } from './api.service';
+
+@Injectable({ providedIn: 'root' })
+export class MetricService {
+
+  constructor(public apiService: ApiService, public http: HttpClient) { }
+
+  public getMetric(code: string): Promise<any> {
+    if (!code) {
+      throw Error('MetricService - getMetric - missing required code param');
+    }
+
+    const queryString = `metric/${code}/data`;
+    return this.http.get<any>(`${this.apiService.pathAPI}/${queryString}`).toPromise();
+  }
+}
+