Merge pull request #4227 from cisagov/feat/chartToggle

cisagov · Nov 13, 2024 · e266f59 · e266f59
2 parents bdff560 + 6839937
commit e266f59
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/CSETWebNg/src/app/assessment/results/analytics-results/analytics-results.component.html b/CSETWebNg/src/app/assessment/results/analytics-results/analytics-results.component.html
@@ -1,20 +1,25 @@
 <div class="white-panel oy-auto ox-auto d-flex flex-column flex-11a">
-
+  <h3 class="mb-3">Assessment Analytics</h3>
+  <p>This chart displays the implementation scoring of the current assessment in relation to other assessments of the
+    same type. Each category is scored, with the minimum, maximum, and median scores charted to illustrate how the
+    current assessment compares to other assessments within the same sector or across all sectors</p>
   <div class="container">
     <div class="container-fluid">
       <div class="row">
         <div class="col-sm">
           <mat-card>
-            <mat-card-header class="d-flex justify-content-center">
-              <h2>Analytics</h2>
+            <mat-card-header class="d-flex justify-content-center">  <h3>{{ dataType === 'mySector' ? sectorTitle : 'All Sectors' }}</h3>
             </mat-card-header>
             <div class="p-4">
               <mat-button-toggle-group [(ngModel)]="dataType" (change)="toggleData($event)">
-                <mat-button-toggle [value]="'mySector'" [disabled]="!showSector" matTooltip="Select a sector from demographics"
-                  [matTooltipDisabled]="showSector">
-                  My Sector: {{sectorTitle}}
+                <mat-button-toggle [value]="'mySector'" [disabled]="!showSector"
+                  matTooltip="Select a sector from demographics" [matTooltipDisabled]="showSector">
+                  My Sector
+                  <div *ngIf="dataType === 'mySector'"><h6 style="font-size: 13px;">Sample Size: {{sampleSize}}</h6></div>
+                </mat-button-toggle>
+                <mat-button-toggle value="allSectors">All Sectors
+                  <div *ngIf="dataType === 'allSectors'"><h6 style="font-size: 13px;">Sample Size: {{sampleSize}}</h6></div>
                 </mat-button-toggle>
-                <mat-button-toggle value="allSectors">All Sectors</mat-button-toggle>
               </mat-button-toggle-group>
             </div>
             <div style="display: block;">

diff --git a/CSETWebNg/src/app/assessment/results/analytics-results/analytics-results.component.ts b/CSETWebNg/src/app/assessment/results/analytics-results/analytics-results.component.ts
@@ -41,6 +41,8 @@ export class AnalyticsResultsComponent implements OnInit {
   sectorsList: Sector[];
   sectorTitle: string;
   showSector: boolean = true;
+  sampleSize: number;
+  allSectors: string = 'All Sectors';
 
 
   @ViewChild('barCanvas') private barCanvas!: ElementRef<HTMLCanvasElement>;
@@ -123,6 +125,7 @@ export class AnalyticsResultsComponent implements OnInit {
     this.maxData = result.max || [];
     this.currentUserData = result.barData?.values || [];
     this.labels = result.barData?.labels || [];
+    this.sampleSize = result.sampleSize;
     if (this.barChart) {
       this.updateChart();
     }

diff --git a/CSETWebNg/src/assets/navigation/workflow-omni.xml b/CSETWebNg/src/assets/navigation/workflow-omni.xml
@@ -401,7 +401,7 @@
         <!-- Results - CPG -->
         <node d="performance summary" id="cpg-summary-page" path="assessment/{:id}/results/cpg-summary-page" visible="MATURITY:11" />
         <node d="security practice checklist" id="cpg-practices-page" path="assessment/{:id}/results/cpg-practices-page" visible="MATURITY:11" />
-         <node d="analytics" id="analytics-results-page" path="assessment/{:id}/results/analytics-results-page" visible="MATURITY:11" />
+         <node displaytext="Assessment Analytics" id="analytics-results-page" path="assessment/{:id}/results/analytics-results-page" visible="MATURITY:11" />
 
         <!-- Results - SD02 Series -->
         <node displaytext="SD02 Series Pipeline Answer Summary" id="sd-answer-summary" path="assessment/{:id}/results/sd-answer-summary" visible="MATURITY:14" />