2
Fork 0

changed graph type to bar and color to bosch dark blue

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

View File

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