changed graph type to bar and color to bosch dark blue
This commit is contained in:
parent
b65f1126fc
commit
80664740a8
@ -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
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user