Skip to content

Commit 32c8c41

Browse files
Omar-Nabil2Omar-Nabil2
committed
feat(charts): implement responsive chart sizing with window resize handling
1 parent eeba54b commit 32c8c41

File tree

17 files changed

+146
-15
lines changed

17 files changed

+146
-15
lines changed

‎src/app/reports/run-report/chart/chart.component.html‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,22 @@
66
file, You can obtain one at http://mozilla.org/MPL/2.0/.
77
-->
88

9-
<div class="m-b-20 layout-align-end">
10-
<mat-button-toggle-group aria-label="Select Chart Type">
11-
<mat-button-toggle value="Bar" (click)="setBarChart(inputData)">{{
12-
'labels.buttons.Bar Chart' | translate
13-
}}</mat-button-toggle>
14-
<mat-button-toggle value="Pie" (click)="setPieChart(inputData)">{{
15-
'labels.buttons.Pie Chart' | translate
16-
}}</mat-button-toggle>
17-
</mat-button-toggle-group>
18-
</div>
9+
<div class="p-20 m-b-20">
10+
<div class="layout-align-end m-b-20">
11+
<mat-button-toggle-group [value]="selectedChartType" aria-label="Select Chart Type">
12+
<mat-button-toggle value="Bar" (click)="selectChart('Bar')">{{
13+
'labels.buttons.Bar Chart' | translate
14+
}}</mat-button-toggle>
15+
<mat-button-toggle value="Pie" (click)="selectChart('Pie')">{{
16+
'labels.buttons.Pie Chart' | translate
17+
}}</mat-button-toggle>
18+
<mat-button-toggle value="Polar" (click)="selectChart('Polar')">{{
19+
'labels.buttons.Polar Area Chart' | translate
20+
}}</mat-button-toggle>
21+
</mat-button-toggle-group>
22+
</div>
1923

20-
<div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
21-
<canvas id="output"></canvas>
24+
<div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }" class="chart-output-container">
25+
<canvas id="output"></canvas>
26+
</div>
2227
</div>

‎src/app/reports/run-report/chart/chart.component.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,14 @@
55
* License, v. 2.0. If a copy of the MPL was not distributed with this
66
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
77
*/
8+
9+
.chart-output-container {
10+
position: relative;
11+
width: 100%;
12+
height: 500px;
13+
14+
canvas {
15+
width: 100% !important;
16+
height: 100% !important;
17+
}
18+
}

‎src/app/reports/run-report/chart/chart.component.ts‎

Lines changed: 104 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
/** Angular Imports */
10-
import { Component, OnChanges, Input, inject } from '@angular/core';
10+
import { Component, OnChanges, OnInit, OnDestroy, Input, inject, ViewChild, ElementRef } from '@angular/core';
1111

1212
/** Custom Services */
1313
import { ReportsService } from '../../reports.service';
@@ -38,18 +38,56 @@ 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 */
4545
@Input() dataObject: any;
46+
@ViewChild('chartContainer', { static: false }) chartContainer: ElementRef;
4647

4748
/** chart data object */
4849
chart: any;
4950
/** substitute for resolver */
5051
hideOutput = true;
5152
/** Data object for witching charts in view. */
5253
inputData: ChartData;
54+
/** Tracks the currently selected chart type */
55+
selectedChartType: string = 'Pie';
56+
/** Resize listener */
57+
private resizeListener: any;
58+
59+
/**
60+
* Initialize component and add resize listener.
61+
*/
62+
ngOnInit() {
63+
this.resizeListener = window.addEventListener('resize', () => {
64+
this.resizeChart();
65+
});
66+
}
67+
68+
/**
69+
* Clean up on component destroy.
70+
*/
71+
ngOnDestroy() {
72+
if (this.resizeListener) {
73+
window.removeEventListener('resize', this.resizeListener);
74+
}
75+
if (this.chart) {
76+
this.chart.destroy();
77+
}
78+
}
79+
80+
/**
81+
* Resize and redraw chart when window size changes.
82+
*/
83+
resizeChart() {
84+
if (this.chart) {
85+
// Resize the chart canvas
86+
setTimeout(() => {
87+
this.chart.resize();
88+
}, 100);
89+
}
90+
}
5391

5492
/**
5593
* Fetches run report data post changes in run report form.
@@ -63,11 +101,31 @@ export class ChartComponent implements OnChanges {
63101
.getChartRunReportData(this.dataObject.report.name, this.dataObject.formData)
64102
.subscribe((response: ChartData) => {
65103
this.inputData = response;
104+
this.selectedChartType = 'Pie';
66105
this.setPieChart(this.inputData);
67106
this.hideOutput = false;
68107
});
69108
}
70109

110+
/**
111+
* Handles chart type selection and renders the selected chart.
112+
* @param {string} chartType The type of chart to display
113+
*/
114+
selectChart(chartType: string) {
115+
this.selectedChartType = chartType;
116+
switch (chartType) {
117+
case 'Bar':
118+
this.setBarChart(this.inputData);
119+
break;
120+
case 'Pie':
121+
this.setPieChart(this.inputData);
122+
break;
123+
case 'Polar':
124+
this.setPolarAreaChart(this.inputData);
125+
break;
126+
}
127+
}
128+
71129
/**
72130
* Creates instance of chart.js pie chart.
73131
* Refer: https://www.chartjs.org/docs/latest/charts/doughnut.html for configuration details.
@@ -89,6 +147,8 @@ export class ChartComponent implements OnChanges {
89147
]
90148
},
91149
options: {
150+
responsive: true,
151+
maintainAspectRatio: false,
92152
plugins: {
93153
title: {
94154
display: true,
@@ -120,6 +180,8 @@ export class ChartComponent implements OnChanges {
120180
]
121181
},
122182
options: {
183+
responsive: true,
184+
maintainAspectRatio: false,
123185
plugins: {
124186
legend: { display: false }
125187
},
@@ -138,6 +200,46 @@ export class ChartComponent implements OnChanges {
138200
});
139201
}
140202

203+
/**
204+
* Creates instance of chart.js polar area chart.
205+
* Refer: https://www.chartjs.org/docs/latest/charts/polar.html for configuration details.
206+
*/
207+
setPolarAreaChart(inputData: ChartData) {
208+
if (this.chart) {
209+
this.chart.destroy();
210+
}
211+
this.chart = new Chart('output', {
212+
type: 'polarArea',
213+
data: {
214+
labels: inputData.keys,
215+
datasets: [
216+
{
217+
label: inputData.valuesLabel,
218+
data: inputData.values,
219+
backgroundColor: this.randomColorArray(inputData.values.length),
220+
borderColor: this.randomColorArray(inputData.values.length)
221+
}
222+
]
223+
},
224+
options: {
225+
responsive: true,
226+
maintainAspectRatio: false,
227+
plugins: {
228+
title: {
229+
display: true,
230+
text: inputData.keysLabel
231+
},
232+
legend: { display: true }
233+
},
234+
scales: {
235+
r: {
236+
min: 0
237+
}
238+
}
239+
}
240+
});
241+
}
242+
141243
/**
142244
* Generates bar/pie-slice colors array for dynamic charts.
143245
* @param {number} length Length of dataset array.

‎src/app/reports/run-report/run-report.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@
119119

120120
<div class="container output" *ngIf="isCollapsed">
121121
<mat-card>
122-
<div class="m-b-20">
122+
<div class="m-b-20 p-20">
123123
<button mat-raised-button color="primary" (click)="isCollapsed = false">
124124
{{ 'labels.buttons.Parameters' | translate }}
125125
</button>

‎src/assets/translations/cs-CS.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -524,6 +524,7 @@
524524
"Payments": "Platby",
525525
"Permissions": "Oprávnění",
526526
"Pie Chart": "Koláčový graf",
527+
"Polar Area Chart": "Polar Area Chart",
527528
"Post Dividend": "Vyplácet dividendu",
528529
"Previous": "Předchozí",
529530
"Preview": "Náhled",

‎src/assets/translations/de-DE.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,7 @@
525525
"Payments": "Zahlungen",
526526
"Permissions": "Berechtigungen",
527527
"Pie Chart": "Kuchendiagramm",
528+
"Polar Area Chart": "Polar Area Chart",
528529
"Post Dividend": "Post-Dividende",
529530
"Previous": "Vorherige",
530531
"Preview": "Vorschau",

‎src/assets/translations/en-US.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -529,6 +529,7 @@
529529
"Payments": "Payments",
530530
"Permissions": "Permissions",
531531
"Pie Chart": "Pie Chart",
532+
"Polar Area Chart": "Polar Area Chart",
532533
"Post Dividend": "Post Dividend",
533534
"Previous": "Previous",
534535
"Preview": "Preview",

‎src/assets/translations/es-CL.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,7 @@
525525
"Payments": "Pagos",
526526
"Permissions": "Permisos",
527527
"Pie Chart": "Gráfico circular",
528+
"Polar Area Chart": "Polar Area Chart",
528529
"Post Dividend": "Publicar dividendo",
529530
"Previous": "Anterior",
530531
"Preview": "Vista previa",

‎src/assets/translations/es-MX.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,7 @@
525525
"Payments": "Pagos",
526526
"Permissions": "Permisos",
527527
"Pie Chart": "Gráfico circular",
528+
"Polar Area Chart": "Polar Area Chart",
528529
"Post Dividend": "Publicar dividendo",
529530
"Previous": "Anterior",
530531
"Preview": "Vista previa",

‎src/assets/translations/fr-FR.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,7 @@
525525
"Payments": "Paiements",
526526
"Permissions": "Autorisations",
527527
"Pie Chart": "Diagramme circulaire",
528+
"Polar Area Chart": "Polar Area Chart",
528529
"Post Dividend": "Après dividende",
529530
"Previous": "Précédent",
530531
"Preview": "Aperçu",

0 commit comments

Comments
 (0)