@@ -18,6 +18,7 @@ export type ChartOptions = {
18
18
labels : string [ ] ;
19
19
} ;
20
20
21
+
21
22
@Component ( {
22
23
selector : 'app-threat-score' ,
23
24
standalone : true ,
@@ -33,11 +34,11 @@ export type ChartOptions = {
33
34
export class ThreatScoreComponent implements OnChanges {
34
35
@Input ( )
35
36
threatScore : string = '' ;
36
- public chartOptions : Partial < ChartOptions > ;
37
+ public chartOptions : ChartOptions ;
37
38
38
39
constructor ( ) {
39
- // Initialize chartOptions without threatScore
40
40
this . chartOptions = {
41
+ series : [ 0 ] , // Initialize with 0
41
42
chart : {
42
43
type : 'radialBar' ,
43
44
offsetY : - 20 ,
@@ -75,7 +76,6 @@ export class ThreatScoreComponent implements OnChanges {
75
76
} ,
76
77
fill : {
77
78
type : 'gradient' ,
78
-
79
79
gradient : {
80
80
shade : 'light' ,
81
81
shadeIntensity : 0.4 ,
@@ -102,23 +102,28 @@ export class ThreatScoreComponent implements OnChanges {
102
102
103
103
updateChartOptions ( ) {
104
104
// Convert threatScore to a number and update series
105
- const score = Number ( this . threatScore ) || 0 ; // Default to 0 if invalid
106
- let color : string = '' ;
107
- if ( score > 80 ) {
105
+ const score = Number ( this . threatScore ) || 0 ;
106
+ let color : string = '' ;
107
+ if ( score > 80 ) {
108
108
color = '#e60303' ;
109
- } else if ( score > 60 ) {
109
+ } else if ( score > 60 ) {
110
110
color = '#e34848' ;
111
- } else if ( score > 40 ) {
111
+ } else if ( score > 40 ) {
112
112
color = '#e47a3a' ;
113
- } else if ( score > 20 ) {
113
+ } else if ( score > 20 ) {
114
114
color = '#bedf76' ;
115
115
} else {
116
116
color = '#55ec32' ;
117
117
}
118
+
119
+ // Update only the necessary properties
118
120
this . chartOptions = {
119
121
...this . chartOptions ,
120
122
series : [ score ] ,
121
- fill : { colors : [ color ] } ,
123
+ fill : {
124
+ ...this . chartOptions . fill ,
125
+ colors : [ color ]
126
+ }
122
127
} ;
123
128
}
124
129
}
0 commit comments