1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { Chart, LinearScale, CategoryScale } from 'chart.js';
import { BoxPlotController, BoxAndWiskers } from '@sgratzl/chartjs-chart-boxplot';
function randomValues(count: number, min: number, max: number) {
const delta = max - min;
return Array.from({ length: count }).map(() => Math.random() * delta + min);
}
Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
@Component({
selector: 'app-box-plot',
templateUrl: './box-plot.component.html',
styleUrls: ['./box-plot.component.css']
})
export class BoxPlotComponent implements AfterViewInit {
@Input() width!: number;
@Input() height!: number;
@Input() mean!: number;
@Input() median!: number;
@Input() min!: number;
@Input() max!: number;
@Input() q1!: number;
@Input() q3!: number;
/*
updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){
//console.log(this.uniqueValues, this.uniqueValuesPercent);
this.pieChartData.datasets = [{
label: "%",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"],
data: uniqueValuesPercent,
}];
this.pieChartData.labels = uniqueValues
console.log(this.uniqueValues, this.uniqueValuesPercent);
this.myChart?.update()
};
*/
@ViewChild('boxplot') chartRef!: ElementRef;
constructor() {
//this.updateChart();
}
ngAfterViewInit(): void {
const boxplotData = {
// define label tree
//labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
labels:[""],
datasets: [{
label: 'Dataset 1',
backgroundColor: '#0063AB',
borderColor: '#dfd7d7',
borderWidth: 1,
outlierColor: '#999999',
scaleFontColor: '#0063AB',
padding: 10,
itemRadius: 0,
data: [
{min:this.min,q1:this.q1,q3:this.q3,median:this.median,max:this.max,mean:this.mean}
]
}]
};
const myChart = new Chart(this.chartRef.nativeElement, {
type: "boxplot",
data: boxplotData,
options: {
plugins: {
legend: {
display: false
},
},
scales: {
x: {
ticks: {
color: '#dfd7d7'
},
grid: {
color: "rgba(0, 99, 171, 0.5)"
}
},
y: {
ticks: {
color: '#dfd7d7'
},
grid: {
color: "rgba(0, 99, 171, 0.5)"
}
}
}
}
});
}
}
|
