#12 Rework charts

cerberustesting · Aug 28, 2019 · 0b3a5ad · 0b3a5ad
1 parent da39454
commit 0b3a5ad
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 101 deletions.
diff --git a/src/app/core/services/crud/reporting.service.ts b/src/app/core/services/crud/reporting.service.ts
@@ -8,16 +8,30 @@ import { environment } from 'src/environments/environment';
   providedIn: 'root'
 })
 export class ReportingService {
-  private campaignData: any;
+  private campaignData: any; // to fill Statistics charts
+
+  // *** charts informations ***
   private tagDetail = {};
   private reportStatus = { status: [], total: 0 };
   private reportTestFolder = {};
   private reportLabel = [];
   private reportOther = [];
   private reportStatisticsReliability = {};
   private reportStatisticsDurationExecution = {};
-  selectedTagName: string;
-  status: Array<any> = [
+  private displayTestFolderReport = false;
+  private selectedTagName: string;  
+  private tagsList: Array<ITag>;
+  private colors = [ // colors for the non-status elements
+    '#0665d0',    
+    '#689550',
+    '#774aa4',
+    '#00a680',
+    '#314499',
+    '#3b5998',
+    '#6772e5',
+    '#dd4b39'
+  ];  
+  public status: Array<any> = [ // constant (colors are set for all charts)
     {
       label: "OK",
       color: "#689550",
@@ -55,33 +69,16 @@ export class ReportingService {
     }
   ]
 
-  observableTagDetail = new BehaviorSubject<any>(this.tagDetail);
-  observableReportStatus = new BehaviorSubject<any>(this.reportStatus);
-  observableReportTestFolder = new BehaviorSubject<any>(this.reportTestFolder);
-  observableReportLabel = new BehaviorSubject<any>(this.reportLabel);
-  observableReportOther = new BehaviorSubject<any>(this.reportOther);
-  observableReportStatisticsReliability = new BehaviorSubject<any>(this.reportStatisticsDurationExecution);
-  observableReportStatisticsDurationExecution = new BehaviorSubject<any>(this.reportStatisticsDurationExecution);
-
-  // variables
-  private tagsList: Array<ITag>;
-  // observables
-  observableTagsList = new BehaviorSubject<ITag[]>(this.tagsList);
-  observableLabelDisplay = new BehaviorSubject<boolean>(true);
-
-  displayTestFolderReport = false;
-  observableDisplayTestFolderReport = new BehaviorSubject<boolean>(this.displayTestFolderReport);
-
-  private colors = [
-    '#0665d0',    
-    '#689550',
-    '#774aa4',
-    '#00a680',
-    '#314499',
-    '#3b5998',
-    '#6772e5',
-    '#dd4b39'
-  ]
+  public observableTagDetail = new BehaviorSubject<any>(this.tagDetail);
+  public observableReportStatus = new BehaviorSubject<any>(this.reportStatus);
+  public observableReportTestFolder = new BehaviorSubject<any>(this.reportTestFolder);
+  public observableReportLabel = new BehaviorSubject<any>(this.reportLabel);
+  public observableReportOther = new BehaviorSubject<any>(this.reportOther);
+  public observableReportStatisticsReliability = new BehaviorSubject<any>(this.reportStatisticsDurationExecution);
+  public observableReportStatisticsDurationExecution = new BehaviorSubject<any>(this.reportStatisticsDurationExecution);
+  public observableTagsList = new BehaviorSubject<ITag[]>(this.tagsList);
+  public observableLabelDisplay = new BehaviorSubject<boolean>(true);
+  public observableDisplayTestFolderReport = new BehaviorSubject<boolean>(this.displayTestFolderReport);  
 
   constructor(private http: HttpClient) { }
 
@@ -98,7 +95,7 @@ export class ReportingService {
   }
 
   /** ReadTestCaseExecutionByTag
-   * * call the api to get tag informations then get campaign informations.
+   * * call the api to get tag informations then get campaign informations
    * @param callback function to execute with the tag information as parameter
    */
   ReadTestCaseExecutionByTag(callback: (any) => any) {    
@@ -198,21 +195,36 @@ export class ReportingService {
   parseReportTestFolder(response) {
     let labelList = [];
     let datasets = [];
-    let colors = [];
 
-    this.displayTestFolderReport = (response.functionChart.axis.length>1);
+    // don't display this chart if there is only one test folder
+    this.displayTestFolderReport = (response.functionChart.axis.length > 1);
 
     for (let axis of response.functionChart.axis) {
       labelList.push(axis.name);
     }
 
     for (let status of this.status) {
-      let temp = { data: [], label: status.label, backgroundColor: status.color, hoverBackgroundColor: status.color };
+
+      let statusInformations = { 
+        data: [], 
+        label: status.label, 
+        backgroundColor: status.color, 
+        hoverBackgroundColor: status.color 
+      };
+
       for (let axis of response.functionChart.axis) {
-        if (axis[status.label]) temp.data.push(axis[status.label].value);
-        else temp.data.push(0);
+        if (axis[status.label]) {
+          statusInformations.data.push(axis[status.label].value);
+        }
+        else {
+          statusInformations.data.push(0);
+        }
       }
-      if (temp.data.some(number => number != 0)) datasets.push(temp);
+      // add 'statusInformations' to datasets if at least one data is not null
+      if (statusInformations.data.some(number => number != 0)) {
+        datasets.push(statusInformations);
+      } 
+
     }
 
     this.reportTestFolder = {
@@ -236,8 +248,8 @@ export class ReportingService {
   }
 
   /** getValuesFromLabelStats
-   * @returns percentage for all stat
-   * @param stats the stats to return
+   * @returns percentage for all label stats
+   * @param stats the label stats to set
    */
   getValuesFromLabelStats(stats) {
     return { 

diff --git a/src/app/feat-analyse/reportbytag/graph/reportby-other/reportby-other.component.html b/src/app/feat-analyse/reportbytag/graph/reportby-other/reportby-other.component.html
@@ -7,6 +7,7 @@ <h3 class="block-title">Report <small>by {{chart.name}}</small></h3>
         </button>
     </div>
     <div class="block-content row" *ngIf="expand">
+      <!-- START Legends -->
       <div class="col-md-5">
         <div class="form-group" *ngFor="let label of chart.labels; let i=index">
             <div class="input-group push">
@@ -19,15 +20,20 @@ <h3 class="block-title">Report <small>by {{chart.name}}</small></h3>
             </div>
         </div>
       </div>
+      <!-- END Legend -->
+
+      <!-- START chart definition -->
       <div class="col-md-7">
-        <canvas baseChart 
-        [data]="chart.data" 
-        [labels]="chart.labels" 
-        [legend]="chart.legend" 
-        [colors]="chart.colors" 
-        [chartType]="'polarArea'"
-        [options]="chart.options">
+        <canvas 
+          baseChart 
+          [data]="chart.data" 
+          [labels]="chart.labels" 
+          [legend]="chart.legend" 
+          [colors]="chart.colors" 
+          [chartType]="'polarArea'"
+          [options]="chart.options">
         </canvas>
       </div>
+      <!-- END chart definition -->
     </div>
   </div>
diff --git a/src/app/feat-analyse/reportbytag/graph/reportby-other/reportby-other.component.ts b/src/app/feat-analyse/reportbytag/graph/reportby-other/reportby-other.component.ts
@@ -8,17 +8,13 @@ import { ReportingService } from 'src/app/core/services/crud/reporting.service';
   templateUrl: './reportby-other.component.html',
   styleUrls: ['./reportby-other.component.scss']
 })
-export class ReportbyOtherComponent implements OnInit {
-  charts = [];
-  expand: boolean = true;
-  @Input() chart: any;
+export class ReportbyOtherComponent implements OnInit {  
+  @Input() chart: any; //the chart informations to display
 
-  constructor(private reportingService: ReportingService) { }
+  private expand: boolean = true; // the content is display/collapse
 
-  ngOnInit() {
-    this.reportingService.observableReportOther.subscribe(response => {
-      this.charts = response
-    });
-  }
+  constructor() { }
+
+  ngOnInit() {  }
 
 }
diff --git a/src/app/feat-analyse/reportbytag/graph/reportby-status/reportby-status.component.html b/src/app/feat-analyse/reportbytag/graph/reportby-status/reportby-status.component.html
@@ -48,6 +48,7 @@ <h3 class="block-title">Report <small>by status</small></h3>
                     </div>
                 </div>
             </div>
+            <!-- START pie chart (property defined in 'reporting.service') -->
             <div>
                 <canvas
                     baseChart 
@@ -59,6 +60,7 @@ <h3 class="block-title">Report <small>by status</small></h3>
                     [colors]="colors">
                 </canvas>
             </div>
+            <!-- END pie chart -->
         </div>
     </div>
 </div>
diff --git a/src/app/feat-analyse/reportbytag/graph/reportby-status/reportby-status.component.ts b/src/app/feat-analyse/reportbytag/graph/reportby-status/reportby-status.component.ts
@@ -12,30 +12,32 @@ declare var jQuery: any;
 })
 export class ReportbystatusComponent implements OnInit {
 
-  @Input() selectedTag: ITag;
+  @Input() selectedTag: ITag; // the represented tag
 
-  loadJS: Promise<any>;
-  private graphID: string = "graph_reportbystatus";
-  expand: boolean = true;
-  private statusList = this.reportingService.status;
+  expand: boolean = true; // display the block body ?
+  private statusList = this.reportingService.status; //status to display on left
 
-  constructor(private reportingService: ReportingService) {
-
-  }
-
-  private labels: Label[];
-  private colors: any;
-  private data: number[];
-  private activeState: Array<any>;
-  private options: ChartOptions = {
+  // *** Chart informations ***
+  private labels: Label[]; // name of each arc (for popover and legend)
+  private colors: any; // arc colors
+  private data: number[]; // data of each arc
+  private activeState: Array<any>; // all status with data > 0
+  private options: ChartOptions = { // chart options
     elements: {
       arc: {
-        borderWidth: 0
+        borderWidth: 0 //dissable borders
       }
     }
   }
 
+  constructor(private reportingService: ReportingService) {
+
+  }
+
+
+
   ngOnInit() {
+    // get all chart informations and parse them
     this.reportingService.observableReportStatus.subscribe(data => {
       this.activeState = data.status.filter(e => e.data > 0);
       this.labels = this.activeState.map(e => e.label);
@@ -45,7 +47,12 @@ export class ReportbystatusComponent implements OnInit {
 
   }
 
-  round(value) {
+  /** round
+   * * round value
+   * * use in html (can't use directly Math.round)
+   * @param value value to round
+   */
+  round(value: number): number {
     return Math.round(value);
   }
 

diff --git a/...app/feat-analyse/reportbytag/graph/reportby-testfolder/reportby-testfolder.component.html b/...app/feat-analyse/reportbytag/graph/reportby-testfolder/reportby-testfolder.component.html
@@ -1,15 +1,21 @@
-
-  <div class="block block-bordered block-rounded">
-    <div class="block-header block-header-default">
-      <h3 class="block-title">Report <small>by Test Folder</small></h3>
-      <button type="button" class="btn-block-option" (click)="expand = !expand">
-          <i class="si" [ngClass]="{'si-arrow-down': !expand, 'si-arrow-up': expand}"></i>
-        </button>
-    </div>
+<div class="block block-bordered block-rounded">
+  <div class="block-header block-header-default">
+    <h3 class="block-title">Report <small>by Test Folder</small></h3>
+    <button type="button" class="btn-block-option" (click)="expand = !expand">
+        <i class="si" [ngClass]="(expand)? 'si-arrow-up' : 'si-arrow-down'"></i>
+      </button>
+  </div>
 
-    <div class="block-content row" *ngIf="expand && chart.datasets">
-      <canvas baseChart [datasets]="chart.datasets" [labels]="chart.label" [options]="chart.options"
-        [plugins]="chart.plugin" [legend]="chart.legend" [chartType]="'bar'">
-      </canvas>
-    </div>
+  <div class="block-content row" *ngIf="expand && chart.datasets">
+    <!-- Chart definition -->
+    <canvas 
+      baseChart 
+      [datasets]="chart.datasets" 
+      [labels]="chart.label" 
+      [options]="chart.options"
+      [plugins]="chart.plugin" 
+      [legend]="chart.legend" 
+      [chartType]="'bar'">
+    </canvas>
   </div>
+</div>
diff --git a/src/app/feat-analyse/reportbytag/graph/reportby-testfolder/reportby-testfolder.component.ts b/src/app/feat-analyse/reportbytag/graph/reportby-testfolder/reportby-testfolder.component.ts
@@ -10,17 +10,18 @@ import { ReportingService } from 'src/app/core/services/crud/reporting.service';
 })
 export class ReportbyTestfolderComponent implements OnInit {
 
-  chart: {
-    datasets: ChartDataSets[],
-    label: Label[],
-    options : ChartOptions ,
-    legend: boolean,
+  private chart: { // chart informations
+    datasets: ChartDataSets[], // values for each test folder and status
+    label: Label[], // label of tests folders
+    options : ChartOptions,
+    legend: boolean, // display legend ?
   }
-  expand: boolean = true;
+  private expand: boolean = true; // the block content is display are collapse
 
   constructor(private reportingService: ReportingService) { }
 
   ngOnInit() {
+    // get chart informations from reportingService
     this.reportingService.observableReportTestFolder.subscribe(data => this.chart = data);
   }
 

diff --git a/src/app/feat-analyse/reportbytag/graph/statistic-duration/statistic-duration.component.html b/src/app/feat-analyse/reportbytag/graph/statistic-duration/statistic-duration.component.html
@@ -1,19 +1,20 @@
-
   <div class="block block-bordered block-rounded">
     <div class="block-header block-header-default">
       <h3 class="block-title">Test Statistics <small>by Duration and Execution</small></h3>
       <button type="button" class="btn-block-option" (click)="expand = !expand">
-          <i class="si" [ngClass]="{'si-arrow-down': !expand, 'si-arrow-up': expand}"></i>
-        </button>
+        <i class="si" [ngClass]="{'si-arrow-down': !expand, 'si-arrow-up': expand}"></i>
+      </button>
     </div>
     <div class="block-content row" *ngIf="expand && chart.datasets">
         <div class="block-content row">
-            <canvas baseChart 
+          <!-- Chart definition -->
+          <canvas baseChart 
             [datasets]="chart.datasets" 
             [labels]="chart.labels" 
             [options]="chart.options"
             [legend]="chart.legend" 
-            [chartType]="'bar'"></canvas>
+            [chartType]="'bar'">
+          </canvas>
         </div>
     </div>
   </div>
diff --git a/src/app/feat-analyse/reportbytag/graph/statistic-duration/statistic-duration.component.ts b/src/app/feat-analyse/reportbytag/graph/statistic-duration/statistic-duration.component.ts
@@ -7,8 +7,9 @@ import { ReportingService } from 'src/app/core/services/crud/reporting.service';
   styleUrls: ['./statistic-duration.component.scss']
 })
 export class StatisticDurationComponent implements OnInit {
-  chart : any;
-  expand: boolean = true;
+  private chart : any; // the chart informations
+  private expand: boolean = true; // the block content is display are collapse
+
   constructor(private reportingService: ReportingService) { }
 
   ngOnInit() {

diff --git a/...feat-analyse/reportbytag/graph/statistic-reliability/statistic-reliability.component.html b/...feat-analyse/reportbytag/graph/statistic-reliability/statistic-reliability.component.html
@@ -7,7 +7,8 @@ <h3 class="block-title">Test Statistics <small>by Reliability</small></h3>
         </button>
     </div>
     <div class="block-content row" *ngIf="expand && chart.datasets">
-        <canvas baseChart 
+      <!-- Chart definition -->
+      <canvas baseChart 
         [datasets]="chart.datasets" 
         [labels]="chart.labels" 
         [options]="chart.options"

diff --git a/...p/feat-analyse/reportbytag/graph/statistic-reliability/statistic-reliability.component.ts b/...p/feat-analyse/reportbytag/graph/statistic-reliability/statistic-reliability.component.ts
@@ -9,8 +9,8 @@ import { ReportingService } from 'src/app/core/services/crud/reporting.service';
 })
 export class StatisticReliabilityComponent implements OnInit {
 
-  chart: any;
-  expand: boolean = true;
+  chart: any; // chart informations
+  expand: boolean = true; // the block content is display are collapse
 
   constructor(private reportingService: ReportingService) { }