/
single-bar.component.ts
104 lines (100 loc) · 3.34 KB
/
single-bar.component.ts
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
import {
ChangeDetectionStrategy,
Component,
ElementRef,
Input,
OnChanges,
SimpleChanges,
ViewChild,
} from '@angular/core';
import { DangerousArtifact } from '../../../../../../../ng-swagger-gen/models/dangerous-artifact';
import * as echarts from 'echarts/core';
@Component({
selector: 'app-single-bar',
templateUrl: './single-bar.component.html',
styleUrls: ['./single-bar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SingleBarComponent implements OnChanges {
@Input()
dangerousArtifact: DangerousArtifact;
@ViewChild('container', { static: true })
container: ElementRef;
ngOnChanges(changes: SimpleChanges) {
if (changes && changes['dangerousArtifact']) {
this.initChart();
}
}
initChart() {
const chart = echarts.init(this.container.nativeElement);
chart.setOption({
color: ['red', '#e64524', 'orange'],
title: {
text: '',
},
tooltip: {
formatter: '{b}: {c}',
textStyle: {
fontSize: '12px',
whiteSpace: 'nowrap',
},
},
legend: {
show: false,
},
series: [
{
type: 'pie',
radius: '65%',
name: 'Severity',
// adjust the start angle
startAngle: 180,
itemStyle: {
borderRadius: 2,
borderWidth: 1,
},
labelLine: {
show: false,
},
label: {
show: true,
position: 'inside',
formatter: '{c}',
fontSize: '9px',
},
data: [
{
name: 'Critical',
value: this.dangerousArtifact?.critical_cnt || 0,
},
{
name: 'High',
value: this.dangerousArtifact?.high_cnt || 0,
},
{
name: 'Medium',
value: this.dangerousArtifact?.medium_cnt || 0,
},
{
// make a record to fill the bottom 50%
value:
this.dangerousArtifact?.critical_cnt +
this.dangerousArtifact?.high_cnt +
this.dangerousArtifact?.medium_cnt || 0,
itemStyle: {
// stop the chart from rendering this piece
color: 'none',
decal: {
symbol: 'none',
},
},
label: {
show: false,
},
},
],
},
],
});
}
}