Analytics score range chart

CSETWebNg/src/app/app.module.ts

@@ -302,6 +302,8 @@ import { CommonModule } from '@angular/common';
 import { NavBackNextComponent } from './assessment/navigation/nav-back-next/nav-back-next.component';
 import { CsetOriginComponent } from './initial/cset-origin/cset-origin.component';
 import { ComplianceScoreComponent } from './assessment/results/mat-cmmc/chart-components/compliance-score/compliance-score.component';
+import { ScoreRangeComponent } from './assessment/results/score-range/score-range.component';
+import { ScoreRangesComponent } from './assessment/results/score-ranges/score-ranges.component';
 import { CmmcStyleService } from './services/cmmc-style.service';
 import { InherentRiskProfileComponent } from './acet/inherent-risk-profile/inherent-risk-profile.component';
 import { IrpSectionComponent } from './reports/irp/irp.component';
@@ -840,6 +842,8 @@ import { AnalyticsResultsComponent } from './assessment/results/analytics-result
         Cmmc2DomainResultsComponent,
         SprsScoreComponent,
         ComplianceScoreComponent,
+        ScoreRangeComponent,
+        ScoreRangesComponent,
         ModelSelectComponent,
         CategoryBlockComponent,
         AskQuestionsComponent,

CSETWebNg/src/app/assessment/results/analytics-results/analytics-results.component.html

@@ -22,10 +22,20 @@ <h3 class="mb-3">Assessment Analytics</h3>
                 </mat-button-toggle>
               </mat-button-toggle-group>
             </div>
-            <div style="display: block;">
+            <div style="display: block;" class="d-none">
               <canvas #barCanvas></canvas>
             </div>
+
+
+            <div *ngIf="!scoreBarData">
+              <div class="spinner-container" style="margin: 2em auto">
+                <div style="max-width: 50px; max-height: 50px;"></div>
+              </div>
+            </div>
+            <app-score-ranges *ngIf="!!scoreBarData" chartWidth="500" [data]="scoreBarData" myColor="#174792"></app-score-ranges>
+
           </mat-card>
+
         </div>
       </div>
     </div>

CSETWebNg/src/app/assessment/results/analytics-results/analytics-results.component.ts

@@ -48,6 +48,9 @@ export class AnalyticsResultsComponent implements OnInit {
   @ViewChild('barCanvas') private barCanvas!: ElementRef<HTMLCanvasElement>;
   private barChart!: Chart;
 
+  // result from API call
+  scoreBarData: any;
+
   // Toggle state
   dataType: "mySector" | "allSectors" = "mySector";
 
@@ -113,7 +116,14 @@ export class AnalyticsResultsComponent implements OnInit {
       } else {
         result = await this.analyticsSvc.getAnalyticResults(this.assessmentId, this.modelId, this.sectorId).toPromise();
       }
-      this.setData(result);
+      //this.setData(result);
+
+
+      this.scoreBarData = result;
+      this.sampleSize = result.sampleSize;
+
+
+
     } catch (error) {
       console.error('Error fetching analytics results', error);
     }

CSETWebNg/src/app/assessment/results/score-range/score-range.component.html

@@ -0,0 +1,33 @@
+<!----------------------
+
+   Copyright 2024 Battelle Energy Alliance, LLC
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+-------------------------->
+<svg [attr.width]="containerWidth" [attr.height]="h" xmlns="http://www.w3.org/2000/svg">
+     <line x1="0" [attr.x2]="chartWidth + p" [attr.y1]="h/2" [attr.y2]="h/2" stroke="#ddd" stroke-width="1"></line>
+
+     <rect [attr.x]="chartWidth * (min/100) + p" [attr.y]="(h - barH)*.5" [attr.width]="(chartWidth * (max - min)/100)" [attr.height]="barH" [attr.rx]="h/8" [attr.ry]="h/8" [attr.fill]="rangeColor" />
+     <circle id="min" [attr.cx]="chartWidth * (min/100) + p" [attr.cy]="h/2" [attr.r]="h/8" [attr.stroke]="rangeColor" stroke-width="1" fill="#fff" [matTooltip]="'Min: ' + min + '%'"></circle>
+     <circle id="max" [attr.cx]="chartWidth * (max/100) + p" [attr.cy]="h/2" [attr.r]="h/8" [attr.stroke]="rangeColor" stroke-width="1" fill="#fff" [matTooltip]="'Max: ' + max + '%'"></circle>
+
+     <circle id="myscore" [attr.cx]="chartWidth * (myScore/100) + p" [attr.cy]="h/2" [attr.r]="h/8+3" [attr.fill]="myColor" [matTooltip]="'Score: ' + myScore + '%'" />
+
+     <line [attr.x1]="(median/100) * chartWidth + p" [attr.y1]="h/2-h/4" [attr.x2]="(median/100) * chartWidth + p" [attr.y2]="h/2+h/4" stroke="#2c3a4a" stroke-width="1" [matTooltip]="'Median: ' + median + '%'" />
+</svg>

CSETWebNg/src/app/assessment/results/score-range/score-range.component.scss

@@ -0,0 +1,3 @@
+rect, circle, line {
+     transition: all 0.5s ease;
+   }

CSETWebNg/src/app/assessment/results/score-range/score-range.component.ts

@@ -0,0 +1,78 @@
+////////////////////////////////
+//
+//   Copyright 2024 Battelle Energy Alliance, LLC
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//
+////////////////////////////////
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-score-range',
+  standalone: false,
+  templateUrl: './score-range.component.html',
+  styleUrl: './score-range.component.scss'
+})
+export class ScoreRangeComponent implements OnInit {
+
+  @Input()
+  chartWidth: number;
+
+  containerWidth: number;
+
+
+
+  /**
+   * height this svg is rendered at
+   */
+  h = 50;
+
+  barH: number;
+
+  @Input()
+  label: string;
+
+  @Input()
+  min: number;
+
+  @Input()
+  max: number;
+
+  @Input()
+  median: number;
+
+  @Input()
+  myScore: number;
+
+  @Input()
+  myColor = "#0000aa";
+
+  rangeColor = "#87909e";
+
+  /**
+   * padding value to get things away from the left and right edge
+   */
+  p = 10;
+
+
+  ngOnInit(): void {
+    this.containerWidth = this.chartWidth * 1.05;
+    this.barH = this.h * .1;
+  }
+}

CSETWebNg/src/app/assessment/results/score-ranges/score-ranges.component.html

@@ -0,0 +1,63 @@
+<!----------------------
+
+   Copyright 2024 Battelle Energy Alliance, LLC
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+-------------------------->
+<div style="border: 0px solid #ddd">
+     <div class="mt-2 mb-4 ms-4 p-2" style="border: 1px solid #ddd; width: 50%">
+          <div>
+               <svg width="8" height="8" class="me-3">
+                    <circle cy="4" cx="4" r="4" [attr.fill]="myColor" />
+               </svg>
+               <span style="font-size: .8rem">Current assessment score</span>
+          </div>
+          <div>
+               <span class="me-3">|</span>
+               <span style="font-size: .8rem">Vertical bar is median score for sample</span>
+          </div>
+     </div>
+
+     <table class="ms-3">
+          <tr *ngFor="let cat of categories">
+               <td class="pe-3 text-end" style="font-size: .8rem">
+                    {{cat.label}}
+               </td>
+               <td>
+                    <app-score-range class="d-block" chartWidth="500" [min]="cat.min" [median]="cat.median"
+                         [max]="cat.max" [myScore]="cat.myScore" [myColor]="myColor"></app-score-range>
+               </td>
+          </tr>
+          <tr>
+               <td></td>
+               <td>
+                    <!-- scale -->
+                    <svg width="containerWidth" height="50" xmlns="http://www.w3.org/2000/svg">
+                         <line x1="10" y1="25" [attr.x2]="containerWidth" y2="25" stroke="#666666" stroke-width=".8" />
+
+                         <g *ngFor="let tick of ticks">
+                              <line [attr.x1]="tick.x + 10" y1="20" [attr.x2]="tick.x + 10" y2="30" stroke="#666666"
+                                   stroke-width=".5" />
+                              <text [attr.x]="tick.x + 10" y="40" font-size="10" text-anchor="middle">{{ tick.value }}%</text>
+                         </g>
+                    </svg>
+               </td>
+          </tr>
+     </table>
+</div>

CSETWebNg/src/app/assessment/results/score-ranges/score-ranges.component.ts

@@ -0,0 +1,83 @@
+////////////////////////////////
+//
+//   Copyright 2024 Battelle Energy Alliance, LLC
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//
+////////////////////////////////
+import { Component, ElementRef, HostListener, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-score-ranges',
+  standalone: false,
+  templateUrl: './score-ranges.component.html',
+  styleUrl: './score-ranges.component.scss'
+})
+export class ScoreRangesComponent implements OnInit, OnChanges {
+
+  @Input()
+  data: any;
+
+  categories: any[];
+
+  // categories: any[] = [
+  //   { label: 'Invent', min: 10, max: 77, median: 42, myScore: 33},
+  //   { label: 'Prevent', min: 40, max: 95, median: 61, myScore: 83},
+  //   { label: 'Circumvent', min: 25, max: 54, median: 33, myScore: 50},
+  //   { label: 'Dryer Vent', min: 0, max: 94, median: 67, myScore: 23},
+  //   { label: 'Lament', min: 47, max: 62, median: 52, myScore: 47},
+  //   { label: 'Intent', min: 8, max: 80, median: 63, myScore: 33},
+  //   { label: 'Get Bent', min: 14, max: 58, median: 36, myScore: 29}
+  // ];
+
+  @Input()
+  chartWidth: number;
+
+  containerWidth: number;
+
+
+  @Input()
+  myColor: string;
+
+  ticks: any;
+
+  @ViewChild('myDiv') myDiv!: ElementRef;
+  divWidth: number | null = null;
+
+
+  /**
+   * 
+   */
+  ngOnInit(): void {
+    this.containerWidth = this.chartWidth * 1.05;
+
+    // build scale
+    this.ticks = Array.from({ length: 11 }, (_, i) => ({
+      value: i * 10,
+      x: (i * this.chartWidth * .1)
+    }));
+  }
+
+  /**
+   * 
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    this.categories = this.data?.categories;
+  }
+}

CSETWebNg/src/app/services/analytics.service.ts

@@ -45,23 +45,23 @@ export class AnalyticsService {
       url += `&sectorId=${sectorId}`;
     }
     return this.http.get(url);
-}
+  }
 
   getAnalyticsToken(username, password): any {
     return this.http.post(
-      this.analyticsUrl + 'auth/login', { "email":username, password }, this.headers
+      this.analyticsUrl + 'auth/login', { "email": username, password }, this.headers
     );
   }
 
 
   postAnalyticsWithLogin(token): any {
-    
+
     return this.http.get(
-      this.baseUrl + 'assessment/exportandsend?token='+token
+      this.baseUrl + 'assessment/exportandsend?token=' + token
     );
   }
 
   // pingAnalyticsService(): any {
-    // return this.http.get(this.analyticsUrl + 'ping/GetPing');
+  // return this.http.get(this.analyticsUrl + 'ping/GetPing');
   // }
 }

CSETWebNg/src/assets/settings/config.json

@@ -22,7 +22,7 @@
     "port": "5000",
     "apiIdentifier": "api"
   },
-  "csetAnalyticsUrl": "http://csetac:5210/api/analytics/maturity?",
+  "csetAnalyticsUrl": "http://localhost:5002/api/analytics/maturity/bars?",
   "csetGithubApiUrl": "https://api.github.com/repos/cisagov/cset/releases/latest",
   "helpContactEmail": "CSET_PMO@cisa.dhs.gov",
   "helpContactPhone": "",

Database Scripts/Functions/func_MQ.func.sql

@@ -1,3 +1,4 @@
+
 -- =============================================
 -- Author:		Randy Woods
 -- Create date: 10-OCT-2023
@@ -34,7 +35,10 @@ RETURNS
 	[Scope] [nvarchar](250) NULL,
 	[Recommend_Action] [nvarchar](max) NULL,
 	[Risk_Addressed] [nvarchar](max) NULL,
-	[Services] [nvarchar](max) NULL
+	[Services] [nvarchar](max) NULL,
+	[Outcome] nvarchar(max) null,
+	[Security_Practice] nvarchar(max) null,
+	[Implementation_Guides] nvarchar(max) null
 )
 AS
 BEGIN