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
101
102
103
104
105
106
107
108
109
110
|
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;
updateChart(min: number, max: number, q1: number, q3: number, median: number) {
if (this.myChart) {
this.boxplotData.datasets[0].data = [[min, q1, median, q3, max]]
this.myChart?.update();
}
/*this.boxplotData.datasets = [{
data: [[min, q1, median, q3, max]],
}]*/
};
/*
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();
}
boxplotData = {
// define label tree
//labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
datasets: [{
label: 'Dataset 1',
backgroundColor: '#0063AB',
borderColor: '#dfd7d7',
borderWidth: 1,
outlierColor: '#999999',
scaleFontColor: '#0063AB',
padding: 10,
itemRadius: 0,
data: [
randomValues(100, 0, 100),
]
}]
};
ngAfterViewInit(): void {
this.myChart = new Chart(this.chartRef.nativeElement, {
type: "boxplot",
data: this.boxplotData,
options: {
plugins: {
legend: {
display: false
},
},
scales: {
x: {
ticks: {
color: '#dfd7d7'
},
grid: {
color: "rgba(0, 99, 171, 0.5)"
}
},
y: {
min: this.min,
max: this.max,
ticks: {
color: '#dfd7d7'
},
grid: {
color: "rgba(0, 99, 171, 0.5)"
}
}
}
}
});
}
myChart?: Chart;
}
|
