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', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'] }) 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 api: ApiService ) { } ngOnInit() { // fetch all available groups this.fetchData('/material/groups', data => this.createGroup(data)); } // 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.initChart(); this.calcFieldSelectKeys(); // fetch all samples populated with according group 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) { key.count += 1; } }); } this.myChart.destroy(); this.initChart(); } // preset select calcFieldSelectKeys() { this.keys.forEach(key => { this.isActiveKey[key.id] = key.active; }); } // update keys based on select updateGroups(activeKeys: any) { this.keys.forEach(key => { if (activeKeys.hasOwnProperty(key.id)) { key.active = activeKeys[key.id]; } }); this.getSamples(); } // 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, count: 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.count, backgroundColor: fillPattern, pointRadius: 4, pointHoverRadius: 7 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); } } }