Merge pull request #47 in DEFINMA/definma-ui from f/dashboard to master

* commit '20050c81142f1d791afe1ece039d667396ae9ad2':
  Updated comments
  Added comments
  Added missing new line
  merge conflict fixes
  Take advantage of Chartjs new update function
  changed graph type to bar and color to bosch dark blue
  Fetching only requested data instead
  Increase sample size in dashboard

src/app/home/home.component.html

@@ -5,10 +5,13 @@
 
 
 <div *ngIf="login.isLoggedIn">
-    <rb-form-multi-select name="groupSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Groups"
-                        class="selection" (ngModelChange)="updateGroups($event)">
+    <rb-form-multi-select name="groupSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Groups" class="selection">
         <span *rbFormMultiSelectOption="let key">{{key.id}}</span>
-    </rb-form-multi-select>
+
+    </rb-form-multi-select> 
+    <rb-icon-button icon="forward-right" mode="primary" (click)="updateGroups(isActiveKey)">
+        Apply groups 
+    </rb-icon-button>
 
     <div id="divChart">
         <canvas id="myChart">

src/app/home/home.component.scss

@@ -7,6 +7,11 @@ app-login {
   float: right;
 }
 
+.selection{
+  float: left;
+  width: 20%;
+}
+
 rb-form-multi-select {
   width: 20%;
 }

src/app/home/home.component.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import {LoginService} from '../services/login.service';
+import { LoginService } from '../services/login.service';
 import { ApiService } from '../services/api.service';
-import {Chart} from 'chart.js';
-
+import { Chart } from 'chart.js';
 
 
 interface KeyInterface {
@@ -19,7 +18,7 @@ interface KeyInterface {
 export class HomeComponent implements OnInit {
 
   keys: KeyInterface[] = [];
-  isActiveKey: { [key: string]: boolean } = {};  // object to check if key is currently active
+  isActiveKey: { [key: string]: boolean } = {};  // Object to check if key is currently active
   myChart: Chart;
 
   constructor(
@@ -28,13 +27,11 @@ export class HomeComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    // fetch all available groups  
+    // Fetch all available groups  
     this.fetchData('/material/groups', data => this.createGroup(data));
-    //this.initChart();
-    console.log(this.login.username);
   }
 
-  // api access with callback
+  // Api access with callback
   async fetchData(URL: string, processor: any) {
     this.api.get(URL, (sData, err, headers) => {
       processor(sData);
@@ -49,13 +46,33 @@ export class HomeComponent implements OnInit {
       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));
+    this.initChart();
+
+    // Only neccesary if keys get preselected
+    //this.calcFieldSelectKeys();
+
+    // Fetch all samples populated with according group
+    this.getSamples();
   }
 
-  // loop through samples and count
+  // Iterate through active keys to assemble an api request for the required data
+  getSamples() {
+    let query = '/samples?status%5B%5D=validated&status=new&filters%5B%5D=%7B%22mode%22%3A%22in%22%2C%22field%22%3A%22material.group%22%2C%22values%22%3A%5B';
+    let temp = '';
+    this.keys.forEach(key => {
+      temp += key.active ? '%22' + key.id.split("%").join("%25") + '%22%2C' : ""; // replace split().join() with replaceAll() 
+    });
+    if (temp === '') {
+      this.countSamples('');
+    } else {
+      query = query + temp.substr(0, temp.length - 3) + '%5D%7D&fields%5B%5D=material.group';
+      this.fetchData(query, data => this.countSamples(data));
+    }
+  }
+
+  // Loop through samples and count
   countSamples(data: any) {
+    this.keys.map(key => key.count = 0);
     for (var i = 0; i < data.length; i++) {
       this.keys.forEach(key => {
         if (key.id === data[i].material.group) {
@@ -63,29 +80,28 @@ export class HomeComponent implements OnInit {
         }
       });
     }
-    this.initChart();
+    this.updateGraph();
   }
 
-  // preset select
+  // Preset select
   calcFieldSelectKeys() {
     this.keys.forEach(key => {
       this.isActiveKey[key.id] = key.active;
     });
   }
 
-  // update keys based on select
-  updateGroups(event: any) {
+  // Update keys based on select
+  updateGroups(activeKeys: any) {
     this.keys.forEach(key => {
-      if (event.hasOwnProperty(key.id)) {
-        key.active = event[key.id];
+      if (activeKeys.hasOwnProperty(key.id)) {
+        key.active = activeKeys[key.id];
       }
     });
-    this.myChart.destroy();
-    this.initChart();
+    this.getSamples();
   }
 
-  // get data for graph based on active keys
-  async getData() {
+  // Get data for graph based on active keys
+  updateGraph() {
     let nameList: string[] = [];
     let dataList: number[] = [];
 
@@ -95,45 +111,32 @@ export class HomeComponent implements OnInit {
         dataList.push(key.count);
       }
     })
-    return { names: nameList, data: dataList };
+    this.myChart.data.labels = nameList;
+    this.myChart.data.datasets[0].data = dataList;
+    this.myChart.update();
   }
 
-  // draw graph
+  // Initialize 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,
-            pointRadius: 4,
-            pointHoverRadius: 7
+    this.myChart = new Chart("myChart", {
+      type: 'bar',
+      data: {
+        labels: [],
+        datasets: [{
+          label: 'Number of samples per group',
+          data: [],
+          backgroundColor: 'rgba(0, 86, 145, 1)'
+        }]
+      },
+      options: {
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            }
           }]
-        },
-        options: {
-          scales: {
-            yAxes: [{
-              ticks: {
-                beginAtZero: true
-              }
-            }]
-          }
         }
-      });
-    }
+      }
+    });
   }
 }