Merge pull request #4252 from cisagov/feature/aggregation-verbiage

Verbiage updates to aggregation screens
cisagov · Nov 22, 2024 · aa2469b · aa2469b
2 parents 4a2ad43 + 41ca56d
commit aa2469b
Show file tree

Hide file tree

Showing 19 changed files with 254 additions and 89 deletions.
diff --git a/CSETWebNg/src/app/aggregation/aggregation-detail/aggregation-detail.component.html b/CSETWebNg/src/app/aggregation/aggregation-detail/aggregation-detail.component.html
@@ -20,7 +20,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
   SOFTWARE. 
 -------------------------->
-<div class="white-panel d-flex justify-content-start flex-column flex-11a">
+<div class="white-panel d-flex justify-content-start flex-column flex-11a" *transloco="let t">
   <div class="max-1200">
     <h3>{{ this.aggregationSvc?.modeDisplay(false) }} Information</h3>
 
@@ -33,8 +33,8 @@ <h3>{{ this.aggregationSvc?.modeDisplay(false) }} Information</h3>
     </div>
 
     <div class="mt-3 d-flex justify-content-between flex-00a">
-      <button class="btn btn-primary" (click)="navAggSvc.navBack('aggregation-detail')">Back</button>
-      <button class="btn btn-primary" (click)="navAggSvc.navNext('aggregation-detail')">Next</button>
+      <button class="btn btn-primary" (click)="navAggSvc.navBack('aggregation-detail')">{{t('buttons.back')}}</button>
+      <button class="btn btn-primary" (click)="navAggSvc.navNext('aggregation-detail')">{{t('buttons.next')}}</button>
     </div>
   </div>
 </div>
diff --git a/CSETWebNg/src/app/aggregation/alias-assessments/alias-assessments.component.html b/CSETWebNg/src/app/aggregation/alias-assessments/alias-assessments.component.html
@@ -20,7 +20,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
   SOFTWARE. 
 -------------------------->
-<div class="wp-0 d-flex flex-column justify-content-start flex-11a trend-table-width">
+<div class="wp-0 d-flex flex-column justify-content-start flex-11a trend-table-width" *transloco="let t">
   <div class="bgc-trans mt-4 ms-4 pe-4 d-flex flex-column flex-00a max-1200">
     <h3>{{ this.aggregationSvc?.modeDisplay(false) }} Details</h3>
     <div class="w-100">
@@ -89,9 +89,9 @@ <h3>{{ this.aggregationSvc?.modeDisplay(false) }} Details</h3>
     </div>
 
     <div class="mt-3 d-flex justify-content-between flex-00a">
-      <button class="btn btn-primary" (click)="navBackIfValid()">Back</button>
+      <button class="btn btn-primary" (click)="navBackIfValid()">{{t('buttons.back')}}</button>
       <button class="btn btn-primary" [disabled]="validateNext()"
-        (click)="navAggSvc.navNext('alias-assessments')">Next</button>
+        (click)="navAggSvc.navNext('alias-assessments')">{{t('buttons.next')}}</button>
     </div>
   </div>
 

diff --git a/CSETWebNg/src/app/aggregation/compare-analytics/compare-analytics.component.html b/CSETWebNg/src/app/aggregation/compare-analytics/compare-analytics.component.html
@@ -24,6 +24,10 @@
   <div class="max-1200">
     <h3 class="mb-4">{{t('aggregation.compare.compare assessments')}}</h3>
 
+    <p>
+      {{t('aggregation.compare.para 14')}}
+    </p>
+
     <div class="btn-group-toggle mt-3" data-toggle="buttons">
       <label *ngIf="this.type === 'standards-based'" class="btn btn-sal-select btn-rounded form-check-label"
         [class.active]="tab === 'SUMMARY'" (click)="changeState('SUMMARY')">
@@ -69,8 +73,10 @@ <h3 class="mb-4">{{t('aggregation.compare.compare assessments')}}</h3>
 
     <div class="mt-3 d-flex justify-content-between flex-00a">
       <button class="btn btn-primary" (click)="navAggSvc.navBack('compare-analytics')">{{t('buttons.back')}}</button>
-      <button *ngIf="this.type != 'maturity-based'" class="btn btn-primary" (click)="generateReport('compare-report')">{{t('aggregation.compare.generate compare report')}}</button>
-      <button *ngIf="this.type === 'maturity-based'" class="btn btn-primary" (click)="generateReport('compare-report-m')">{{t('aggregation.compare.generate compare report')}}</button>
+      <button *ngIf="this.type != 'maturity-based'" class="btn btn-primary"
+        (click)="generateReport('compare-report')">{{t('aggregation.compare.generate compare report')}}</button>
+      <button *ngIf="this.type === 'maturity-based'" class="btn btn-primary"
+        (click)="generateReport('compare-report-m')">{{t('aggregation.compare.generate compare report')}}</button>
     </div>
   </div>
 </div>
diff --git a/...ation/compare-analytics/maturity-based/compare-bestworst/compare-bestworst.component.html b/...ation/compare-analytics/maturity-based/compare-bestworst/compare-bestworst.component.html
@@ -20,6 +20,15 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
   SOFTWARE. 
 -------------------------->
+<div *transloco="let t" class="mb-4">
+  <p>
+    {{t('aggregation.compare.para 12')}}
+  </p>
+  <p>
+    {{t('aggregation.compare.para 13')}}
+  </p>
+</div>
+
 <div class="d-flex flex-row col-12">
   <div class="col-4 ps-0 pe-0">
     <ul style="padding-inline-start: 0" class="pe-5">

diff --git a/...ion/compare-analytics/maturity-based/compare-individual/compare-individual.component.html b/...ion/compare-analytics/maturity-based/compare-individual/compare-individual.component.html
@@ -22,9 +22,13 @@
 -------------------------->
 <div *transloco="let t">
 
-  <div class="chart d-flex flex-column flex-00a">
+  <div class="chart d-flex flex-column flex-00a mb-5">
     <h3>{{t('aggregation.compare.assessment answer summary')}}</h3>
 
+    <p>
+      {{t('aggregation.compare.para 10')}}
+    </p>
+
     <table class="table table-bordered table-td-p2">
       <tr>
         <th class="text-start p-2">{{t('aggregation.assessment alias')}}</th>
@@ -51,10 +55,10 @@ <h3>
       {{t('aggregation.compare.domain level compliance')}}
     </h3>
     <p class="text-start">
-      {{t('aggregation.compare.compliance 1')}}
+      {{t('aggregation.compare.para 6')}}
     </p>
     <p class="text-start">
-      {{t('aggregation.compare.compliance 2')}}
+      {{t('aggregation.compare.compliance 1')}}
     </p>
 
     <div *ngIf="!chartsMaturityCompliance || chartsMaturityCompliance.length == 0">

diff --git a/...aggregation/compare-analytics/maturity-based/compare-missed/compare-missed.component.html b/...aggregation/compare-analytics/maturity-based/compare-missed/compare-missed.component.html
@@ -21,8 +21,9 @@
   SOFTWARE. 
 -------------------------->
 <div class="text-start" *transloco="let t">
+
   <div class="mb-3">
-    {{t('aggregation.compare.lists questions answered no')}}
+    {{t('aggregation.compare.para 11')}}
   </div>
 
   <table class="table table-bordered table-td-p2 mb-5">

diff --git a/...tion/compare-analytics/standards-based/compare-bestworst/compare-bestworst.component.html b/...tion/compare-analytics/standards-based/compare-bestworst/compare-bestworst.component.html
@@ -20,6 +20,15 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
   SOFTWARE. 
 -------------------------->
+<div *transloco="let t" class="mb-4">
+  <p>
+    {{t('aggregation.compare.para 12')}}
+  </p>
+  <p>
+    {{t('aggregation.compare.para 13')}}
+  </p>
+</div>
+
 <div class="d-flex flex-row col-12">
   <div class="col-4 ps-0 pe-0">
     <ul style="padding-inline-start: 0" class="pe-5">

diff --git a/...on/compare-analytics/standards-based/compare-individual/compare-individual.component.html b/...on/compare-analytics/standards-based/compare-individual/compare-individual.component.html
@@ -21,8 +21,8 @@
   SOFTWARE.
 -------------------------->
 <div *transloco="let t">
-  <div class="chart d-flex flex-column flex-00a">
-    <h3>{{t('aggregation.compare.assessment answer summary')}}</h3>
+  <div class="d-flex flex-column flex-00a mb-5">
+    <h3 class="text-center">{{t('aggregation.compare.assessment answer summary')}}</h3>
     <table class="table table-bordered table-td-p2">
       <tr>
         <th class="text-start p-2">{{t('aggregation.assessment alias')}}</th>
@@ -43,25 +43,40 @@ <h3>{{t('aggregation.compare.assessment answer summary')}}</h3>
         <td class="text-end p-2 ps-3" style="width: 10%">{{ a.u }}</td>
       </tr>
     </table>
-  </div>
-  <div *ngIf="answerCounts == null">
-    <div class="spinner-container" style="margin: 2em auto">
-      <div style="max-width: 50px; max-height: 50px;"></div>
+    <div *ngIf="answerCounts == null">
+      <div class="spinner-container" style="margin: 2em auto">
+        <div style="max-width: 50px; max-height: 50px;"></div>
+      </div>
     </div>
   </div>
 
-  <div class="chart d-flex flex-column flex-00a">
-    <h3>{{t('aggregation.compare.overall comparison')}}</h3>
+  <div class="d-flex flex-column flex-00a mb-5">
+    <h3 class="text-center">{{t('aggregation.compare.overall comparison')}}</h3>
+
+    <p>
+      {{t('aggregation.compare.para 3')}}
+    </p>
+    <p>
+      {{t('aggregation.compare.para 4')}}
+    </p>
+
     <div *ngIf="chartOverallComparison == null">
       <div class="spinner-container" style="margin: 2em auto">
         <div style="max-width: 50px; max-height: 50px;"></div>
       </div>
     </div>
-    <canvas id="canvasOverallComparison" style="max-height: 50rem;">{{ chartOverallComparison }}</canvas>
+    <div class="chart">
+      <canvas id="canvasOverallComparison" style="max-height: 50rem;">{{ chartOverallComparison }}</canvas>
+    </div>
   </div>
 
-  <div class=" chart d-flex flex-column flex-00a">
-    <h3>{{t('aggregation.compare.sal comparison')}}</h3>
+  <div class="d-flex flex-column flex-00a mb-5">
+    <h3 class="text-center">{{t('aggregation.compare.sal comparison')}}</h3>
+
+    <p>
+      {{t('aggregation.compare.para 5')}}
+    </p>
+
     <div *ngIf="sals == null">
       <div class="spinner-container" style="margin: 2em auto">
         <div style="max-width: 50px; max-height: 50px;"></div>
@@ -98,8 +113,13 @@ <h3>{{t('aggregation.compare.sal comparison')}}</h3>
     </div>
   </div>
 
-  <div class="chart d-flex flex-column flex-00a">
-    <h3>{{t('aggregation.compare.category percent comparisons')}}</h3>
+  <div class="d-flex flex-column flex-00a mb-5">
+    <h3 class="text-center">{{t('aggregation.compare.category percent comparisons')}}</h3>
+
+    <p>
+      {{t('aggregation.compare.para 6')}}
+    </p>
+
     <div *ngIf="chartCategoryPercent == null">
       <div class="spinner-container" style="margin: 2em auto">
         <div style="max-width: 50px; max-height: 50px;"></div>

diff --git a/...ggregation/compare-analytics/standards-based/compare-missed/compare-missed.component.html b/...ggregation/compare-analytics/standards-based/compare-missed/compare-missed.component.html
@@ -21,9 +21,11 @@
   SOFTWARE. 
 -------------------------->
 <div class="text-start" *transloco="let t">
+
   <div class="mb-3">
-    {{t('aggregation.compare.lists questions answered no')}}
+    {{t('aggregation.compare.para 11')}}
   </div>
+
   <table class="table table-bordered table-td-p2 mb-5">
     <tr>
       <th class="pe-5">{{t('aggregation.compare.category')}}</th>

diff --git a/...regation/compare-analytics/standards-based/compare-summary/compare-summary.component.html b/...regation/compare-analytics/standards-based/compare-summary/compare-summary.component.html
@@ -21,62 +21,102 @@
   SOFTWARE. 
 -------------------------->
 <div *transloco="let t">
-  <div class="chart d-flex flex-column flex-00a mb-5">
-    <h3>
+  <div class="d-flex flex-column flex-00a mb-5">
+    <h3 class="text-center">
       {{t('aggregation.compare.overall average summary')}}
     </h3>
+    <p>
+      {{t('aggregation.compare.para 1')}}
+    </p>
+    <p>
+      {{t('aggregation.compare.para 2')}}
+    </p>
+
     <div *ngIf="chartOverallAverage == null">
       <div class="spinner-container" style="margin: 2em auto">
         <div style="max-width: 50px; max-height: 50px;"></div>
       </div>
     </div>
-    <canvas id="canvasOverallAverage" style="min-width: 800px; max-width: 800px; margin: 0 auto;">{{ chartOverallAverage
-      }}</canvas>
+
+    <div class="chart">
+      <canvas id="canvasOverallAverage" style="min-width: 800px; max-width: 800px; margin: 0 auto;">{{
+        chartOverallAverage
+        }}</canvas>
+    </div>
   </div>
 
-  <div class="chart d-flex flex-column flex-00a mb-5">
-    <h3>
+  <div class="d-flex flex-column flex-00a mb-5">
+    <h3 class="text-center">
       {{t('aggregation.compare.standards answers')}}
     </h3>
+
+    <p>
+      {{t('aggregation.compare.para 7')}}
+    </p>
+
     <div *ngIf="chartStandardsPie == null">
       <div class="spinner-container" style="margin: 2em auto">
         <div style="max-width: 50px; max-height: 50px;"></div>
       </div>
     </div>
-    <canvas id="canvasStandardsPie" style="min-width: 400px; max-width: 400px; margin: 0 auto;">{{ chartStandardsPie
-      }}</canvas>
-    <div>{{t('aggregation.compare.percentages may not equal 100')}}</div>
+
+    <div class="chart">
+      <canvas id="canvasStandardsPie" style="min-width: 400px; max-width: 400px; margin: 0 auto;">{{ chartStandardsPie
+        }}</canvas>
+      <div>{{t('aggregation.compare.percentages may not equal 100')}}</div>
+    </div>
   </div>
 
 
-  <div *ngIf="showComponents; else notCompatible" class="chart d-flex flex-column flex-00a mb-5">
-    <h3>
-      {{t('aggregation.compare.components answers')}}
-    </h3>
+  <h3 class="text-center">
+    {{t('aggregation.compare.components answers')}}
+  </h3>
+
+  <div *ngIf="showComponents; else notCompatible" class="d-flex flex-column flex-00a mb-5">
+    <p>
+      {{t('aggregation.compare.para 8')}}
+    </p>
+
     <div *ngIf="chartComponentsPie == null">
       <div class="spinner-container" style="margin: 2em auto">
         <div style="max-width: 50px; max-height: 50px;"></div>
       </div>
     </div>
-    <canvas id="canvasComponentsPie" style="min-width: 400px; max-width: 400px; margin: 0 auto;">{{ chartComponentsPie
-      }}</canvas>
-    <div>{{t('aggregation.compare.percentages may not equal 100')}}</div>
+
+    <div class="chart">
+      <canvas id="canvasComponentsPie" style="min-width: 400px; max-width: 400px; margin: 0 auto;">{{ chartComponentsPie
+        }}</canvas>
+      <div>{{t('aggregation.compare.percentages may not equal 100')}}</div>
+    </div>
   </div>
-  <ng-template #notCompatible class="chart d-flex flex-column flex-00a mb-5">
-    <h4 style="text-align: center; padding:10%">{{t('aggregation.compare.both need diagrams')}}</h4>
+
+
+  <ng-template #notCompatible>
+    <div class="d-flex flex-column flex-00a mb-5">
+      <p>{{t('aggregation.compare.both need diagrams')}}</p>
+    </div>
   </ng-template>
 
-  <div class="chart d-flex flex-column flex-00a mb-5" style="min-height: 200px">
-    <h3>
+
+  <div class="d-flex flex-column flex-00a mb-5" style="min-height: 200px">
+    <h3 class="text-center">
       {{t('aggregation.compare.category avg all assessments')}}
     </h3>
+
+    <p>
+      {{t('aggregation.compare.para 9')}}
+    </p>
+
     <div *ngIf="chartCategoryAverage == null">
       <div class="spinner-container" style="margin: 2em auto">
         <div style="max-width: 50px; max-height: 50px;"></div>
       </div>
     </div>
-    <canvas id="canvasCategoryAverage" style="min-width: 800px; max-width: 800px; margin: 0 auto;">{{
-      chartCategoryAverage
-      }}</canvas>
+
+    <div class="chart">
+      <canvas id="canvasCategoryAverage" style="min-width: 800px; max-width: 800px; margin: 0 auto;">{{
+        chartCategoryAverage
+        }}</canvas>
+    </div>
   </div>
 </div>