Apply sample page fix

src/app/home/home.component.ts

@@ -1,5 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import {LoginService} from '../services/login.service';
+import { ApiService } from '../services/api.service';
+import {Chart} from 'chart.js';
+
+
+
+interface KeyInterface {
+  id: string;
+  count: number;
+  active: boolean;
+}
 
 @Component({
   selector: 'app-home',
@@ -8,11 +18,121 @@ import {LoginService} from '../services/login.service';
 })
 export class HomeComponent implements OnInit {
 
+  keys: KeyInterface[] = [];
+  isActiveKey: { [key: string]: boolean } = {};  // object to check if key is currently active
+  myChart: Chart;
+
   constructor(
-    public login: LoginService
+    public login: LoginService,
+    public api: ApiService
   ) { }
 
   ngOnInit() {
+    // fetch all available groups  
+    this.fetchData('/material/groups', data => this.createGroup(data));
+    //this.initChart();
+    console.log(this.login.username);
   }
 
+  // api access with callback
+  async fetchData(URL: string, processor: any) {
+    this.api.get(URL, (sData, err, headers) => {
+      processor(sData);
+    });
+  }
+
+  // Fill interface with data
+  createGroup(data: any) {
+    let temp: KeyInterface[] = [];
+
+    for (var i = 0; i < data.length; i++) {
+      temp.push({ id: data[i], count: 0, active: false });
+    }
+    this.keys = temp; // invoke update in rb-multiselect
+    this.calcFieldSelectKeys();
+    // fetch all samples populated with according group
+    this.fetchData('/samples?status%5B%5D=validated&status=new&page-size=10&sort=_id-asc&fields%5B%5D=material.group', data => this.countSamples(data));
+  }
+
+  // loop through samples and count
+  countSamples(data: any) {
+    for (var i = 0; i < data.length; i++) {
+      this.keys.forEach(key => {
+        if (key.id === data[i].material.group) {
+          key.count += 1;
+        }
+      });
+    }
+    this.initChart();
+  }
+
+  // preset select
+  calcFieldSelectKeys() {
+    this.keys.forEach(key => {
+      this.isActiveKey[key.id] = key.active;
+    });
+  }
+
+  // update keys based on select
+  updateGroups(event: any) {
+    this.keys.forEach(key => {
+      if (event.hasOwnProperty(key.id)) {
+        key.active = event[key.id];
+      }
+    });
+    this.myChart.destroy();
+    this.initChart();
+  }
+
+  // get data for graph based on active keys
+  async getData() {
+    let nameList: string[] = [];
+    let dataList: number[] = [];
+
+    this.keys.forEach(key => {
+      if (key.active) {
+        nameList.push(key.id);
+        dataList.push(key.count);
+      }
+    })
+    return { names: nameList, data: dataList };
+  }
+
+  // draw graph
+  async initChart() {
+    const data = await this.getData();
+
+    const canvas = document.getElementById('myChart') as HTMLCanvasElement;
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+    const ctx = canvas.getContext('2d');
+
+    var img = new Image(width, height);
+    img.src = "/assets/imgs/supergraphic.svg";
+    img.onload = () => {
+      const fillPattern = ctx.createPattern(img, 'no-repeat');
+
+      this.myChart = new Chart("myChart", {
+        type: 'line',
+        data: {
+          labels: data.names,
+          datasets: [{
+            label: 'Number of samples per group',
+            data: data.data,
+            backgroundColor: fillPattern,
+            borderWidth: 2
+          }]
+        },
+        options: {
+          scales: {
+            yAxes: [{
+              ticks: {
+                beginAtZero: true
+              }
+            }]
+          }
+        }
+      });
+    }
+  }
 }