otf-frontend/client/src/app/layout/components/stats/test-head-execution-bar-chart/test-head-execution-bar-chart.component.ts

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\r
   3 #   Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 #   you may not use this file except in compliance with the License.           #\r
   5 #   You may obtain a copy of the License at                                    #\r
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\r
   9 #   Unless required by applicable law or agreed to in writing, software        #\r
  10 #   distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 #   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 #   See the License for the specific language governing permissions and        #\r
  13 #   limitations under the License.                                             #\r
  14 ##############################################################################*/\r
  15 \r
  16 \r
  17 import { Component, OnInit, ViewChild, ElementRef, Input, OnDestroy } from '@angular/core';\r
  18 import * as moment from 'moment';\r
  19 import { Subscription } from 'rxjs';\r
  20 import { StatsService } from '../stats.service';\r
  21 import { Router } from '@angular/router';\r
  22 import * as am4core from "@amcharts/amcharts4/core";\r
  23 import * as am4charts from "@amcharts/amcharts4/charts";\r
  24 @Component({\r
  25   selector: 'app-test-head-execution-bar-chart',\r
  26   templateUrl: './test-head-execution-bar-chart.component.pug',\r
  27   styleUrls: ['./test-head-execution-bar-chart.component.scss']\r
  28 })\r
  29 export class TestHeadExecutionBarChartComponent implements OnInit, OnDestroy {\r
  30 \r
  31   private toDestroy: Array<Subscription> = [];\r
  32 \r
  33   @ViewChild('chart') chartElement: ElementRef;\r
  34   @Input() height: string;\r
  35 \r
  36   public chart: am4charts.XYChart;\r
  37   public testInstanceData;\r
  38   public loadingIndicator;\r
  39 \r
  40   constructor(private stats: StatsService, private router: Router) {}\r
  41 \r
  42 \r
  43   ngOnInit() {\r
  44     \r
  45     this.renderChart();\r
  46 \r
  47     this.toDestroy.push(this.stats.onDefaultDataCallStarted().subscribe(res => {\r
  48       this.showLoadingIndicator();\r
  49     }));\r
  50 \r
  51     this.toDestroy.push(this.stats.onTIExecutionChangeStarted().subscribe(res => {\r
  52       this.showLoadingIndicator();\r
  53     }));\r
  54 \r
  55     this.toDestroy.push(this.stats.onDefaultDataCallFinished().subscribe(res => {\r
  56       this.setChartData();\r
  57     }));\r
  58 \r
  59     this.toDestroy.push(this.stats.onTIExecutionChangeFinished().subscribe(res => {\r
  60       this.setChartData()\r
  61     }));\r
  62 \r
  63   }\r
  64 \r
  65   ngOnDestroy() {\r
  66     this.toDestroy.forEach(e => e.unsubscribe());\r
  67     this.chart.dispose();\r
  68   }\r
  69 \r
  70   showLoadingIndicator() {\r
  71     if(!this.loadingIndicator){\r
  72       this.loadingIndicator = this.chart.tooltipContainer.createChild(am4core.Container);\r
  73       this.loadingIndicator.background.fill = am4core.color("#fff");\r
  74       this.loadingIndicator.background.fillOpacity = 0.8;\r
  75       this.loadingIndicator.width = am4core.percent(100);\r
  76       this.loadingIndicator.height = am4core.percent(100);\r
  77 \r
  78       let indicatorLabel = this.loadingIndicator.createChild(am4core.Label);\r
  79       indicatorLabel.text = "Loading..";\r
  80       indicatorLabel.align = "center";\r
  81       indicatorLabel.valign = "middle";\r
  82       indicatorLabel.fontSize = 18;\r
  83       indicatorLabel.fontWeight= "bold";\r
  84       indicatorLabel.dy = 50;\r
  85 \r
  86       let loadingImage = this.loadingIndicator.createChild(am4core.Image);\r
  87       //loadingImage.href = "https://img.devrant.com/devrant/rant/r_647810_4FeCH.gif";\r
  88       loadingImage.href = "/assets/images/equalizer.gif";\r
  89       //loadingImage.dataSource = "/loading-pies.svg"\r
  90       loadingImage.align = "center";\r
  91       loadingImage.valign = "middle";\r
  92       loadingImage.horizontalCenter = "middle";\r
  93       loadingImage.verticalCenter = "middle";\r
  94       loadingImage.scale = 3.0;\r
  95     }else{\r
  96       this.loadingIndicator.show();\r
  97     }\r
  98 \r
  99   }\r
 100 \r
 101   hideLoadingIndicator() {\r
 102     this.loadingIndicator.hide();\r
 103   }\r
 104 \r
 105   incrementStatus(data, code){\r
 106     \r
 107     if(code >= 200 && code < 300){\r
 108       data["200"]++;\r
 109     }else if(code >= 300 && code < 400){\r
 110       data["300"]++;\r
 111     }else if(code >= 400 && code < 500){\r
 112       data["400"]++;\r
 113     }else if(code >= 500 && code < 600){\r
 114       data["500"]++;\r
 115     }else{\r
 116       \r
 117       data["other"]++;\r
 118     }\r
 119   }\r
 120 \r
 121   setChartData() {\r
 122 \r
 123     let data = [];\r
 124     this.stats.executionList.forEach((execution, i) => {\r
 125       execution.testHeadResults.forEach((result, val) => {\r
 126         let index = data.findIndex(e => e.id === result.testHeadId);\r
 127         let executionTime = moment(result.endTime).diff(moment(result.startTime), 'seconds');\r
 128         if(index == -1){\r
 129           let toPush = {\r
 130             id: result.testHeadId,\r
 131             name: result.testHeadName,\r
 132             executionTime: executionTime,\r
 133             count: 1,\r
 134             average: executionTime,\r
 135             "200": 0,\r
 136             "300": 0,\r
 137             "400": 0,\r
 138             "500": 0,\r
 139             "other": 0\r
 140           }\r
 141           this.incrementStatus(toPush, result.statusCode);\r
 142           data.push(toPush);\r
 143         }else{\r
 144           this.incrementStatus(data[index], result.statusCode);\r
 145           data[index].count += 1;\r
 146           data[index].executionTime += executionTime;\r
 147           data[index].average = (data[index].executionTime / data[index].count);\r
 148         }\r
 149       });\r
 150     });\r
 151     data.sort((a, b) => b.count - a.count);\r
 152     this.chart.data = data;\r
 153 \r
 154     // Displays the average time for each bar. \r
 155     // If there is no time recorded for the Test Instance, display No Time Recorded.\r
 156     let series = this.chart.series.values as Array<am4charts.ColumnSeries>;\r
 157     \r
 158     // series.columns.template.adapter.add("tooltipText", (text, target) => {\r
 159     //   if (target.dataItem) {\r
 160     //     if (this.chart.data[target.dataItem.index].average > 0) {\r
 161     //       return this.chart.data[target.dataItem.index].count.toString() + " Executions \n Avg Time: " + this.chart.data[target.dataItem.index].average.toFixed(2).toString() + " seconds";\r
 162     //     } else\r
 163     //       return this.chart.data[target.dataItem.index].count.toString() + " Executions \n No Time Recorded";\r
 164     //   }\r
 165     // });\r
 166 \r
 167     series.forEach(elem => {\r
 168       // elem.columns.template.adapter.add("fill", (fill, target) => this.chart.colors.getIndex(target.dataItem.index));\r
 169     \r
 170     \r
 171       elem.columns.template.events.on("doublehit", (click) => {\r
 172         this.router.navigate(['/test-heads', click.target.dataItem.dataContext['id']]);\r
 173       });\r
 174     })\r
 175     \r
 176     this.chart.appear();\r
 177     this.hideLoadingIndicator();\r
 178   }\r
 179 \r
 180   renderChart() {\r
 181     this.chart = am4core.create(this.chartElement.nativeElement, am4charts.XYChart);\r
 182 \r
 183     this.showLoadingIndicator();\r
 184 \r
 185     this.chart.responsive.enabled = true;\r
 186 \r
 187     // Create axes\r
 188     var categoryAxis = this.chart.yAxes.push(new am4charts.CategoryAxis());\r
 189     categoryAxis.dataFields.category = "name";\r
 190     categoryAxis.numberFormatter.numberFormat = "#";\r
 191     categoryAxis.renderer.inversed = true;\r
 192     categoryAxis.renderer.minGridDistance = 5;\r
 193     categoryAxis.title.fontSize = "10px";\r
 194 \r
 195     var valueAxis = this.chart.xAxes.push(new am4charts.ValueAxis());\r
 196     valueAxis.renderer.minWidth = 10;\r
 197 \r
 198     this.createSeries("200", "200s")\r
 199     this.createSeries("300", "300s")\r
 200     this.createSeries("400", "400s")\r
 201     this.createSeries("500", "500s")\r
 202     this.createSeries("other", "Other")\r
 203 \r
 204     this.chart.legend = new am4charts.Legend();\r
 205     this.chart.legend.scale = .7;\r
 206     this.chart.legend.width = am4core.percent(150);\r
 207 \r
 208     let label = categoryAxis.renderer.labels.template;\r
 209     label.truncate = true;\r
 210     label.maxWidth = 130;\r
 211     label.fontSize = 13;\r
 212 \r
 213     //Scrollbar on the right. \r
 214     let scrollBarY = new am4charts.XYChartScrollbar();\r
 215     //scrollBarY.series.push(series);\r
 216     this.chart.scrollbarY = scrollBarY;\r
 217     this.chart.scrollbarY.contentHeight = 100;\r
 218     this.chart.scrollbarY.minWidth = 20;\r
 219     this.chart.scrollbarY.thumb.minWidth = 20;\r
 220 \r
 221     //set initial Scrollbar Zoom to the Top 6 Instances. \r
 222     this.chart.events.on("appeared", () => {\r
 223       categoryAxis.zoomToIndexes(0, 6, false, true);\r
 224     });\r
 225    }\r
 226 \r
 227   createSeries(field, name){\r
 228     // Create series\r
 229     var series = this.chart.series.push(new am4charts.ColumnSeries());\r
 230     series.dataFields.valueX = field;\r
 231     series.dataFields.categoryY = "name";\r
 232     series.stacked = true;\r
 233     series.name = name;\r
 234   }\r
 235 \r
 236 }\r