From 84961310c3df0c5125aa9b0e5646cdb1e656514b Mon Sep 17 00:00:00 2001 From: "Ruben Hartenstein (PEA4-Fe)" Date: Thu, 7 Jan 2021 12:25:14 +0100 Subject: [PATCH 1/8] Increase sample size in dashboard --- src/app/home/home.component.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 792bf95..7031895 100644 --- a/src/app/home/home.component.ts +++ b/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 { @@ -30,8 +29,7 @@ export class HomeComponent implements OnInit { ngOnInit() { // fetch all available groups this.fetchData('/material/groups', data => this.createGroup(data)); - //this.initChart(); - console.log(this.login.username); + //console.log(this.login.username); } // api access with callback @@ -46,12 +44,12 @@ export class HomeComponent implements OnInit { let temp: KeyInterface[] = []; for (var i = 0; i < data.length; i++) { - temp.push({ id: data[i], count: 0, active: false }); + temp.push({ id: data[i], count: 0, active: true }); } 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.fetchData('/samples?status%5B%5D=validated&status=new&sort=_id-asc&fields%5B%5D=material.group', data => this.countSamples(data)); } // loop through samples and count @@ -95,7 +93,7 @@ export class HomeComponent implements OnInit { dataList.push(key.count); } }) - return { names: nameList, data: dataList }; + return { names: nameList, count: dataList }; } // draw graph @@ -118,9 +116,10 @@ export class HomeComponent implements OnInit { labels: data.names, datasets: [{ label: 'Number of samples per group', - data: data.data, + data: data.count, backgroundColor: fillPattern, - borderWidth: 2 + pointRadius: 4, + pointHoverRadius: 7 }] }, options: { From b65f1126fc2641e70c0fbe7a699a4c24fcd2c12a Mon Sep 17 00:00:00 2001 From: "Ruben Hartenstein (PEA4-Fe)" Date: Mon, 11 Jan 2021 10:35:18 +0100 Subject: [PATCH 2/8] Fetching only requested data instead --- src/app/home/home.component.html | 10 +++------- src/app/home/home.component.scss | 5 +++++ src/app/home/home.component.ts | 32 ++++++++++++++++++++++++-------- 3 files changed, 32 insertions(+), 15 deletions(-) diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index f4d5282..7b540c9 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -5,16 +5,12 @@
- + {{key.id}} - - -
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 4ae35d4..aa9ff3d 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -6,3 +6,8 @@ app-login { width: 70%; float: right; } + +.selection{ + float: left; + width: 20%; +} \ No newline at end of file diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 7031895..cfae87e 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -29,7 +29,6 @@ export class HomeComponent implements OnInit { ngOnInit() { // fetch all available groups this.fetchData('/material/groups', data => this.createGroup(data)); - //console.log(this.login.username); } // api access with callback @@ -44,16 +43,33 @@ export class HomeComponent implements OnInit { let temp: KeyInterface[] = []; for (var i = 0; i < data.length; i++) { - temp.push({ id: data[i], count: 0, active: true }); + temp.push({ id: data[i], count: 0, active: false }); } this.keys = temp; // invoke update in rb-multiselect + this.initChart(); + this.calcFieldSelectKeys(); // fetch all samples populated with according group - this.fetchData('/samples?status%5B%5D=validated&status=new&sort=_id-asc&fields%5B%5D=material.group', data => this.countSamples(data)); + this.getSamples(); + } + + 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) { @@ -61,6 +77,7 @@ export class HomeComponent implements OnInit { } }); } + this.myChart.destroy(); this.initChart(); } @@ -72,14 +89,13 @@ export class HomeComponent implements OnInit { } // update keys based on select - updateGroups(event: any) { + 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 From 80664740a8f7849ab593270c72bf9c185622f866 Mon Sep 17 00:00:00 2001 From: "Ruben Hartenstein (PEA4-Fe)" Date: Mon, 18 Jan 2021 13:22:42 +0100 Subject: [PATCH 3/8] changed graph type to bar and color to bosch dark blue --- src/app/home/home.component.ts | 63 ++++++++++++++-------------------- 1 file changed, 26 insertions(+), 37 deletions(-) diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index cfae87e..184c2ad 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -53,16 +53,16 @@ export class HomeComponent implements OnInit { this.getSamples(); } - getSamples(){ + 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() + this.keys.forEach(key => { + temp += key.active ? '%22' + key.id.split("%").join("%25") + '%22%2C' : ""; // replace split().join() with replaceAll() }); - if (temp === ''){ + if (temp === '') { this.countSamples(''); - }else{ - query = query + temp.substr(0, temp.length-3) + '%5D%7D&fields%5B%5D=material.group'; + } else { + query = query + temp.substr(0, temp.length - 3) + '%5D%7D&fields%5B%5D=material.group'; this.fetchData(query, data => this.countSamples(data)); } } @@ -116,38 +116,27 @@ export class HomeComponent implements OnInit { 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.count, - backgroundColor: fillPattern, - pointRadius: 4, - pointHoverRadius: 7 + this.myChart = new Chart("myChart", { + type: 'bar', + data: { + labels: data.names, + datasets: [{ + label: 'Number of samples per group', + data: data.count, + backgroundColor: 'rgba(0, 86, 145, 1)', + pointRadius: 4, + pointHoverRadius: 7 + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: true + } }] - }, - options: { - scales: { - yAxes: [{ - ticks: { - beginAtZero: true - } - }] - } } - }); - } + } + }); } } From dc1bc3b4a21d348053b83764efb714dea4eae2fa Mon Sep 17 00:00:00 2001 From: "Ruben Hartenstein (PEA4-Fe)" Date: Mon, 18 Jan 2021 13:39:50 +0100 Subject: [PATCH 4/8] Take advantage of Chartjs new update function --- src/app/home/home.component.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 184c2ad..fff1acd 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -48,7 +48,9 @@ export class HomeComponent implements OnInit { this.keys = temp; // invoke update in rb-multiselect this.initChart(); - this.calcFieldSelectKeys(); + // only neccesary if keys get preselected + //this.calcFieldSelectKeys(); + // fetch all samples populated with according group this.getSamples(); } @@ -77,8 +79,7 @@ export class HomeComponent implements OnInit { } }); } - this.myChart.destroy(); - this.initChart(); + const datasets = this.updateGraph(); } // preset select @@ -99,7 +100,7 @@ export class HomeComponent implements OnInit { } // get data for graph based on active keys - async getData() { + updateGraph() { let nameList: string[] = []; let dataList: number[] = []; @@ -109,20 +110,20 @@ export class HomeComponent implements OnInit { dataList.push(key.count); } }) - return { names: nameList, count: dataList }; + this.myChart.data.labels = nameList; + this.myChart.data.datasets[0].data = dataList; + this.myChart.update(); } // draw graph async initChart() { - const data = await this.getData(); - this.myChart = new Chart("myChart", { type: 'bar', data: { - labels: data.names, + labels: [], datasets: [{ label: 'Number of samples per group', - data: data.count, + data: [], backgroundColor: 'rgba(0, 86, 145, 1)', pointRadius: 4, pointHoverRadius: 7 From 31a9f22c6f70d97b41504bf96a83278aeb26759a Mon Sep 17 00:00:00 2001 From: "Ruben Hartenstein (PEA4-Fe)" Date: Mon, 18 Jan 2021 13:56:47 +0100 Subject: [PATCH 5/8] merge conflict fixes --- src/app/home/home.component.html | 5 +---- src/app/home/home.component.scss | 3 --- src/app/home/home.component.ts | 4 +--- 3 files changed, 2 insertions(+), 10 deletions(-) diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index b37924b..837a6dd 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -7,14 +7,11 @@
{{key.id}} -<<<<<<< HEAD + Apply groups -======= - ->>>>>>> bdce6912108211cbde87033003ce8143ba7c173e
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 0c7d1c7..5e61e69 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -7,13 +7,10 @@ app-login { float: right; } -<<<<<<< HEAD .selection{ float: left; width: 20%; } -======= rb-form-multi-select { width: 20%; } ->>>>>>> bdce6912108211cbde87033003ce8143ba7c173e diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index fff1acd..336c907 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -124,9 +124,7 @@ export class HomeComponent implements OnInit { datasets: [{ label: 'Number of samples per group', data: [], - backgroundColor: 'rgba(0, 86, 145, 1)', - pointRadius: 4, - pointHoverRadius: 7 + backgroundColor: 'rgba(0, 86, 145, 1)' }] }, options: { From 2ce160c8d75261d07e1bdd14960a7b03aab7b818 Mon Sep 17 00:00:00 2001 From: "Hartenstein Ruben (PEA4-Fe)" Date: Mon, 18 Jan 2021 14:05:09 +0100 Subject: [PATCH 6/8] Added missing new line --- src/app/home/home.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 5e61e69..4457c15 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -11,6 +11,7 @@ app-login { float: left; width: 20%; } + rb-form-multi-select { width: 20%; } From af576fa3921beed8f2afd2730fe05f7b3f79c081 Mon Sep 17 00:00:00 2001 From: "Hartenstein Ruben (PEA4-Fe)" Date: Mon, 18 Jan 2021 14:09:25 +0100 Subject: [PATCH 7/8] Added comments --- src/app/home/home.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 336c907..e635cc9 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -55,6 +55,7 @@ export class HomeComponent implements OnInit { this.getSamples(); } + // 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 = ''; @@ -79,7 +80,7 @@ export class HomeComponent implements OnInit { } }); } - const datasets = this.updateGraph(); + this.updateGraph(); } // preset select From 20050c81142f1d791afe1ece039d667396ae9ad2 Mon Sep 17 00:00:00 2001 From: "Hartenstein Ruben (PEA4-Fe)" Date: Mon, 18 Jan 2021 14:15:55 +0100 Subject: [PATCH 8/8] Updated comments --- src/app/home/home.component.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index e635cc9..c500d38 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -18,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( @@ -27,11 +27,11 @@ export class HomeComponent implements OnInit { ) { } ngOnInit() { - // fetch all available groups + // Fetch all available groups this.fetchData('/material/groups', data => this.createGroup(data)); } - // api access with callback + // Api access with callback async fetchData(URL: string, processor: any) { this.api.get(URL, (sData, err, headers) => { processor(sData); @@ -48,10 +48,10 @@ export class HomeComponent implements OnInit { this.keys = temp; // invoke update in rb-multiselect this.initChart(); - // only neccesary if keys get preselected + // Only neccesary if keys get preselected //this.calcFieldSelectKeys(); - // fetch all samples populated with according group + // Fetch all samples populated with according group this.getSamples(); } @@ -70,7 +70,7 @@ export class HomeComponent implements OnInit { } } - // loop through samples and count + // Loop through samples and count countSamples(data: any) { this.keys.map(key => key.count = 0); for (var i = 0; i < data.length; i++) { @@ -83,14 +83,14 @@ export class HomeComponent implements OnInit { this.updateGraph(); } - // preset select + // Preset select calcFieldSelectKeys() { this.keys.forEach(key => { this.isActiveKey[key.id] = key.active; }); } - // update keys based on select + // Update keys based on select updateGroups(activeKeys: any) { this.keys.forEach(key => { if (activeKeys.hasOwnProperty(key.id)) { @@ -100,7 +100,7 @@ export class HomeComponent implements OnInit { this.getSamples(); } - // get data for graph based on active keys + // Get data for graph based on active keys updateGraph() { let nameList: string[] = []; let dataList: number[] = []; @@ -116,7 +116,7 @@ export class HomeComponent implements OnInit { this.myChart.update(); } - // draw graph + // Initialize graph async initChart() { this.myChart = new Chart("myChart", { type: 'bar',