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)); //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: 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&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, 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 } }] } } }); } } }