Adding additional UI controls to radar chart

Author: alopezo

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

@@ -83,3 +83,31 @@
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+
+.radar-chart-card {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.radar-chart-card canvas {
+    width: 100% !important;
+    max-width: 100%;
+}
+
+.radar-controls {
+    display: flex;
+    gap: 0.375rem;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    padding: 0.5rem 0.75rem 0.75rem 0.75rem;
+}
+
+.radar-control-button {
+    min-width: 64px;
+    height: 28px;
+    line-height: 28px;
+    padding: 0 10px;
+    font-size: 12px;
+}

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

@@ -104,8 +104,12 @@ <h2>
             <div class="chart-container flex-1 dashboard-card">
               <canvas #overallScoreCanvas></canvas>
             </div>
-            <div class="chart-container flex-1 dashboard-card">
+            <div class="chart-container flex-1 dashboard-card radar-chart-card">
               <canvas #radarCanvas></canvas>
+              <div class="radar-controls">
+                <button class="radar-control-button" mat-stroked-button color="primary" (click)="showAllRadarSeries()">All stakeholders</button>
+                <button class="radar-control-button" mat-stroked-button color="primary" (click)="showOnlyAverageRadarSeries()">None</button>
+              </div>
             </div>
           </div>
           <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>
       </div>
     </div>
   </mat-sidenav-content>
-</mat-sidenav-container>
+</mat-sidenav-container>

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

@@ -66,6 +66,7 @@ export class MaturityDashboardComponent implements OnInit, AfterViewInit, OnDest
   private overallScoreChart!: Chart;
   private map!: L.Map;
   private mapOverlay: any;
+  private readonly averageRadarDatasetIndex = 0;
 
   colorPalette = [
     { 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
         responsive: true,
         plugins: {
           legend: {
-            position: 'top'
+            position: 'top',
+            onClick: (_event, legendItem, legend) => {
+              const datasetIndex = legendItem.datasetIndex;
+              if (datasetIndex === undefined) {
+                return;
+              }
+
+              const chart = legend.chart;
+              if (datasetIndex === this.averageRadarDatasetIndex) {
+                chart.setDatasetVisibility(this.averageRadarDatasetIndex, true);
+                chart.update();
+                return;
+              }
+
+              const isVisible = chart.isDatasetVisible(datasetIndex);
+              chart.setDatasetVisibility(datasetIndex, !isVisible);
+              chart.update();
+            }
           },
           title: {
             display: true,
@@ -1822,6 +1840,42 @@ export class MaturityDashboardComponent implements OnInit, AfterViewInit, OnDest
         }
       }
     });
+
+    this.showAllRadarSeries();
+  }
+
+  showAllRadarSeries(): void {
+    if (!this.chart) {
+      return;
+    }
+
+    this.chart.data.datasets.forEach((_, index) => {
+      this.chart.setDatasetVisibility(index, true);
+    });
+    this.chart.update();
+  }
+
+  showOnlyAverageRadarSeries(): void {
+    if (!this.chart) {
+      return;
+    }
+
+    this.chart.data.datasets.forEach((_, index) => {
+      this.chart.setDatasetVisibility(index, index === this.averageRadarDatasetIndex);
+    });
+    this.chart.update();
+  }
+
+  showOnlyRadarSeries(datasetIndex: number): void {
+    if (!this.chart) {
+      return;
+    }
+
+    this.chart.data.datasets.forEach((_, index) => {
+      const shouldShow = index === this.averageRadarDatasetIndex || index === datasetIndex;
+      this.chart.setDatasetVisibility(index, shouldShow);
+    });
+    this.chart.update();
   }
 
   private generateOverallBarChart(): void {