Skip to content

Commit 9152f7f

Browse files
committed
Adding additional UI controls to radar chart
1 parent bc587d1 commit 9152f7f

3 files changed

Lines changed: 89 additions & 3 deletions

File tree

src/app/maturity/maturity-dashboard/maturity-dashboard.component.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,3 +83,31 @@
8383
border-radius: 8px;
8484
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
8585
}
86+
87+
.radar-chart-card {
88+
flex-direction: column;
89+
align-items: stretch;
90+
}
91+
92+
.radar-chart-card canvas {
93+
width: 100% !important;
94+
max-width: 100%;
95+
}
96+
97+
.radar-controls {
98+
display: flex;
99+
gap: 0.375rem;
100+
justify-content: center;
101+
align-items: center;
102+
flex-wrap: wrap;
103+
width: 100%;
104+
padding: 0.5rem 0.75rem 0.75rem 0.75rem;
105+
}
106+
107+
.radar-control-button {
108+
min-width: 64px;
109+
height: 28px;
110+
line-height: 28px;
111+
padding: 0 10px;
112+
font-size: 12px;
113+
}

src/app/maturity/maturity-dashboard/maturity-dashboard.component.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,12 @@ <h2>
104104
<div class="chart-container flex-1 dashboard-card">
105105
<canvas #overallScoreCanvas></canvas>
106106
</div>
107-
<div class="chart-container flex-1 dashboard-card">
107+
<div class="chart-container flex-1 dashboard-card radar-chart-card">
108108
<canvas #radarCanvas></canvas>
109+
<div class="radar-controls">
110+
<button class="radar-control-button" mat-stroked-button color="primary" (click)="showAllRadarSeries()">All stakeholders</button>
111+
<button class="radar-control-button" mat-stroked-button color="primary" (click)="showOnlyAverageRadarSeries()">None</button>
112+
</div>
109113
</div>
110114
</div>
111115
<div class="flex flex-row gap-4 w-full pl-8 pr-8 mt-4 items-center justify-center">
@@ -153,4 +157,4 @@ <h2>Summary of Maturity Assessment Data</h2>
153157
</div>
154158
</div>
155159
</mat-sidenav-content>
156-
</mat-sidenav-container>
160+
</mat-sidenav-container>

src/app/maturity/maturity-dashboard/maturity-dashboard.component.ts

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export class MaturityDashboardComponent implements OnInit, AfterViewInit, OnDest
6666
private overallScoreChart!: Chart;
6767
private map!: L.Map;
6868
private mapOverlay: any;
69+
private readonly averageRadarDatasetIndex = 0;
6970

7071
colorPalette = [
7172
{ bg: 'rgba(22, 160, 133, 0.3)', border: 'rgba(22, 160, 133, 1)' }, // Teal
@@ -1801,7 +1802,24 @@ export class MaturityDashboardComponent implements OnInit, AfterViewInit, OnDest
18011802
responsive: true,
18021803
plugins: {
18031804
legend: {
1804-
position: 'top'
1805+
position: 'top',
1806+
onClick: (_event, legendItem, legend) => {
1807+
const datasetIndex = legendItem.datasetIndex;
1808+
if (datasetIndex === undefined) {
1809+
return;
1810+
}
1811+
1812+
const chart = legend.chart;
1813+
if (datasetIndex === this.averageRadarDatasetIndex) {
1814+
chart.setDatasetVisibility(this.averageRadarDatasetIndex, true);
1815+
chart.update();
1816+
return;
1817+
}
1818+
1819+
const isVisible = chart.isDatasetVisible(datasetIndex);
1820+
chart.setDatasetVisibility(datasetIndex, !isVisible);
1821+
chart.update();
1822+
}
18051823
},
18061824
title: {
18071825
display: true,
@@ -1822,6 +1840,42 @@ export class MaturityDashboardComponent implements OnInit, AfterViewInit, OnDest
18221840
}
18231841
}
18241842
});
1843+
1844+
this.showAllRadarSeries();
1845+
}
1846+
1847+
showAllRadarSeries(): void {
1848+
if (!this.chart) {
1849+
return;
1850+
}
1851+
1852+
this.chart.data.datasets.forEach((_, index) => {
1853+
this.chart.setDatasetVisibility(index, true);
1854+
});
1855+
this.chart.update();
1856+
}
1857+
1858+
showOnlyAverageRadarSeries(): void {
1859+
if (!this.chart) {
1860+
return;
1861+
}
1862+
1863+
this.chart.data.datasets.forEach((_, index) => {
1864+
this.chart.setDatasetVisibility(index, index === this.averageRadarDatasetIndex);
1865+
});
1866+
this.chart.update();
1867+
}
1868+
1869+
showOnlyRadarSeries(datasetIndex: number): void {
1870+
if (!this.chart) {
1871+
return;
1872+
}
1873+
1874+
this.chart.data.datasets.forEach((_, index) => {
1875+
const shouldShow = index === this.averageRadarDatasetIndex || index === datasetIndex;
1876+
this.chart.setDatasetVisibility(index, shouldShow);
1877+
});
1878+
this.chart.update();
18251879
}
18261880

18271881
private generateOverallBarChart(): void {

0 commit comments

Comments
 (0)