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 - } - }] - } } - }); - } + } + }); } }