banana/definma-ui
2
Fork 0
Code Releases Activity

changed graph type to bar and color to bosch dark blue

Browse Source
This commit is contained in:
Ruben Hartenstein (PEA4-Fe)
2021-01-18 13:22:42 +01:00
parent b65f1126fc
commit 80664740a8
1 changed files with 26 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/app/home/home.component.ts
View File

@@ -53,16 +53,16 @@ export class HomeComponent implements OnInit {
this.getSamples(); 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 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 = ''; let temp = '';
this.keys.forEach(key =>{ this.keys.forEach(key => {
temp += key.active ? '%22' + key.id.split("%").join("%25") + '%22%2C': ""; // replace split().join() with replaceAll() temp += key.active ? '%22' + key.id.split("%").join("%25") + '%22%2C' : ""; // replace split().join() with replaceAll()
}); });
if (temp === ''){ if (temp === '') {
this.countSamples(''); this.countSamples('');
}else{ } else {
query = query + temp.substr(0, temp.length-3) + '%5D%7D&fields%5B%5D=material.group'; query = query + temp.substr(0, temp.length - 3) + '%5D%7D&fields%5B%5D=material.group';
this.fetchData(query, data => this.countSamples(data)); this.fetchData(query, data => this.countSamples(data));
} }
} }
@@ -116,38 +116,27 @@ export class HomeComponent implements OnInit {
async initChart() { async initChart() {
const data = await this.getData(); const data = await this.getData();
const canvas = document.getElementById('myChart') as HTMLCanvasElement; this.myChart = new Chart("myChart", {
const width = canvas.clientWidth; type: 'bar',
const height = canvas.clientHeight; data: {
const ctx = canvas.getContext('2d'); labels: data.names,
datasets: [{
var img = new Image(width, height); label: 'Number of samples per group',
img.src = "/assets/imgs/supergraphic.svg"; data: data.count,
img.onload = () => { backgroundColor: 'rgba(0, 86, 145, 1)',
const fillPattern = ctx.createPattern(img, 'no-repeat'); pointRadius: 4,
pointHoverRadius: 7
this.myChart = new Chart("myChart", { }]
type: 'line', },
data: { options: {
labels: data.names, scales: {
datasets: [{ yAxes: [{
label: 'Number of samples per group', ticks: {
data: data.count, beginAtZero: true
backgroundColor: fillPattern, }
pointRadius: 4,
pointHoverRadius: 7
}] }]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
} }
}); }
} });
} }
} }