77 */
88
99/** Angular Imports */
10- import { Component , OnChanges , Input , inject } from '@angular/core' ;
10+ import { Component , OnChanges , OnInit , OnDestroy , Input , inject } from '@angular/core' ;
1111
1212/** Custom Services */
1313import { ReportsService } from '../../reports.service' ;
@@ -38,7 +38,7 @@ Chart.register(...registerables);
3838 NgStyle
3939 ]
4040} )
41- export class ChartComponent implements OnChanges {
41+ export class ChartComponent implements OnChanges , OnInit , OnDestroy {
4242 private reportsService = inject ( ReportsService ) ;
4343
4444 /** Run Report Data */
@@ -50,6 +50,39 @@ export class ChartComponent implements OnChanges {
5050 hideOutput = true ;
5151 /** Data object for witching charts in view. */
5252 inputData : ChartData ;
53+ /** Tracks the currently selected chart type */
54+ selectedChartType : string = 'Pie' ;
55+ /** Resize listener */
56+ private readonly resizeListener = ( ) => this . resizeChart ( ) ;
57+
58+ /**
59+ * Initialize component and add resize listener.
60+ */
61+ ngOnInit ( ) {
62+ window . addEventListener ( 'resize' , this . resizeListener ) ;
63+ }
64+
65+ /**
66+ * Clean up on component destroy.
67+ */
68+ ngOnDestroy ( ) {
69+ window . removeEventListener ( 'resize' , this . resizeListener ) ;
70+ if ( this . chart ) {
71+ this . chart . destroy ( ) ;
72+ }
73+ }
74+
75+ /**
76+ * Resize and redraw chart when window size changes.
77+ */
78+ resizeChart ( ) {
79+ if ( this . chart ) {
80+ // Resize the chart canvas
81+ setTimeout ( ( ) => {
82+ this . chart . resize ( ) ;
83+ } , 100 ) ;
84+ }
85+ }
5386
5487 /**
5588 * Fetches run report data post changes in run report form.
@@ -63,19 +96,53 @@ export class ChartComponent implements OnChanges {
6396 . getChartRunReportData ( this . dataObject . report . name , this . dataObject . formData )
6497 . subscribe ( ( response : ChartData ) => {
6598 this . inputData = response ;
66- this . setPieChart ( this . inputData ) ;
99+ this . selectedChartType = 'Pie' ;
67100 this . hideOutput = false ;
101+ setTimeout ( ( ) => this . setPieChart ( this . inputData ) ) ;
68102 } ) ;
69103 }
70104
105+ /**
106+ * Handles chart type selection and renders the selected chart.
107+ * @param {string } chartType The type of chart to display
108+ */
109+ selectChart ( chartType : string ) {
110+ if ( ! this . inputData ) {
111+ return ;
112+ }
113+ const chartColors = this . randomColorArray ( this . inputData . values . length ) ;
114+ this . selectedChartType = chartType ;
115+ switch ( chartType ) {
116+ case 'Bar' :
117+ this . setBarChart ( this . inputData , chartColors ) ;
118+ break ;
119+ case 'Pie' :
120+ this . setPieChart ( this . inputData , chartColors ) ;
121+ break ;
122+ case 'Polar' :
123+ this . setPolarAreaChart ( this . inputData , chartColors ) ;
124+ break ;
125+ }
126+ }
127+
128+ /**
129+ * Refreshes colors when user clicks the currently selected toggle.
130+ */
131+ refreshChartIfSameType ( chartType : string ) {
132+ if ( chartType === this . selectedChartType ) {
133+ this . selectChart ( chartType ) ;
134+ }
135+ }
136+
71137 /**
72138 * Creates instance of chart.js pie chart.
73139 * Refer: https://www.chartjs.org/docs/latest/charts/doughnut.html for configuration details.
74140 */
75- setPieChart ( inputData : ChartData ) {
141+ setPieChart ( inputData : ChartData , chartColors ?: string [ ] ) {
76142 if ( this . chart ) {
77143 this . chart . destroy ( ) ;
78144 }
145+ const colors = chartColors ?? this . randomColorArray ( inputData . values . length ) ;
79146 this . chart = new Chart ( 'output' , {
80147 type : 'pie' ,
81148 data : {
@@ -84,11 +151,13 @@ export class ChartComponent implements OnChanges {
84151 {
85152 label : inputData . valuesLabel ,
86153 data : inputData . values ,
87- backgroundColor : this . randomColorArray ( inputData . values . length )
154+ backgroundColor : colors
88155 }
89156 ]
90157 } ,
91158 options : {
159+ responsive : true ,
160+ maintainAspectRatio : false ,
92161 plugins : {
93162 title : {
94163 display : true ,
@@ -103,10 +172,11 @@ export class ChartComponent implements OnChanges {
103172 * Creates instance of chart.js bar chart.
104173 * Refer: https://www.chartjs.org/docs/latest/charts/bar.html for configuration details.
105174 */
106- setBarChart ( inputData : ChartData ) {
175+ setBarChart ( inputData : ChartData , chartColors ?: string [ ] ) {
107176 if ( this . chart ) {
108177 this . chart . destroy ( ) ;
109178 }
179+ const colors = chartColors ?? this . randomColorArray ( inputData . values . length ) ;
110180 this . chart = new Chart ( 'output' , {
111181 type : 'bar' ,
112182 data : {
@@ -115,11 +185,13 @@ export class ChartComponent implements OnChanges {
115185 {
116186 label : inputData . valuesLabel ,
117187 data : inputData . values ,
118- backgroundColor : this . randomColorArray ( inputData . values . length )
188+ backgroundColor : colors
119189 }
120190 ]
121191 } ,
122192 options : {
193+ responsive : true ,
194+ maintainAspectRatio : false ,
123195 plugins : {
124196 legend : { display : false }
125197 } ,
@@ -138,6 +210,47 @@ export class ChartComponent implements OnChanges {
138210 } ) ;
139211 }
140212
213+ /**
214+ * Creates instance of chart.js polar area chart.
215+ * Refer: https://www.chartjs.org/docs/latest/charts/polar.html for configuration details.
216+ */
217+ setPolarAreaChart ( inputData : ChartData , chartColors ?: string [ ] ) {
218+ if ( this . chart ) {
219+ this . chart . destroy ( ) ;
220+ }
221+ const colors = chartColors ?? this . randomColorArray ( inputData . values . length ) ;
222+ this . chart = new Chart ( 'output' , {
223+ type : 'polarArea' ,
224+ data : {
225+ labels : inputData . keys ,
226+ datasets : [
227+ {
228+ label : inputData . valuesLabel ,
229+ data : inputData . values ,
230+ backgroundColor : colors ,
231+ borderColor : colors
232+ }
233+ ]
234+ } ,
235+ options : {
236+ responsive : true ,
237+ maintainAspectRatio : false ,
238+ plugins : {
239+ title : {
240+ display : true ,
241+ text : inputData . keysLabel
242+ } ,
243+ legend : { display : true }
244+ } ,
245+ scales : {
246+ r : {
247+ min : 0
248+ }
249+ }
250+ }
251+ } ) ;
252+ }
253+
141254 /**
142255 * Generates bar/pie-slice colors array for dynamic charts.
143256 * @param {number } length Length of dataset array.
@@ -158,6 +271,6 @@ export class ChartComponent implements OnChanges {
158271 const r = Math . floor ( Math . random ( ) * 255 ) ;
159272 const g = Math . floor ( Math . random ( ) * 255 ) ;
160273 const b = Math . floor ( Math . random ( ) * 255 ) ;
161- return `rgb (${ r } ${ g } ${ b } ;
274+ return `rgba (${ r } ${ g } ${ b } ;
162275 }
163276}
0 commit comments