--- /dev/null
+/* Copyright (c) 2019 AT&T Intellectual Property. #\r
+# #\r
+# Licensed under the Apache License, Version 2.0 (the "License"); #\r
+# you may not use this file except in compliance with the License. #\r
+# You may obtain a copy of the License at #\r
+# #\r
+# http://www.apache.org/licenses/LICENSE-2.0 #\r
+# #\r
+# Unless required by applicable law or agreed to in writing, software #\r
+# distributed under the License is distributed on an "AS IS" BASIS, #\r
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. #\r
+# See the License for the specific language governing permissions and #\r
+# limitations under the License. #\r
+##############################################################################*/\r
+\r
+\r
+import { Component, OnInit, ViewChild, ElementRef, Input, OnDestroy } from '@angular/core';\r
+import * as moment from 'moment';\r
+import { Subscription } from 'rxjs';\r
+import { StatsService } from '../stats.service';\r
+import { Router } from '@angular/router';\r
+import * as am4core from "@amcharts/amcharts4/core";\r
+import * as am4charts from "@amcharts/amcharts4/charts";\r
+@Component({\r
+ selector: 'app-test-head-execution-bar-chart',\r
+ templateUrl: './test-head-execution-bar-chart.component.pug',\r
+ styleUrls: ['./test-head-execution-bar-chart.component.scss']\r
+})\r
+export class TestHeadExecutionBarChartComponent implements OnInit, OnDestroy {\r
+\r
+ private toDestroy: Array<Subscription> = [];\r
+\r
+ @ViewChild('chart') chartElement: ElementRef;\r
+ @Input() height: string;\r
+\r
+ public chart: am4charts.XYChart;\r
+ public testInstanceData;\r
+ public loadingIndicator;\r
+\r
+ constructor(private stats: StatsService, private router: Router) {}\r
+\r
+\r
+ ngOnInit() {\r
+ \r
+ this.renderChart();\r
+\r
+ this.toDestroy.push(this.stats.onDefaultDataCallStarted().subscribe(res => {\r
+ this.showLoadingIndicator();\r
+ }));\r
+\r
+ this.toDestroy.push(this.stats.onTIExecutionChangeStarted().subscribe(res => {\r
+ this.showLoadingIndicator();\r
+ }));\r
+\r
+ this.toDestroy.push(this.stats.onDefaultDataCallFinished().subscribe(res => {\r
+ this.setChartData();\r
+ }));\r
+\r
+ this.toDestroy.push(this.stats.onTIExecutionChangeFinished().subscribe(res => {\r
+ this.setChartData()\r
+ }));\r
+\r
+ }\r
+\r
+ ngOnDestroy() {\r
+ this.toDestroy.forEach(e => e.unsubscribe());\r
+ this.chart.dispose();\r
+ }\r
+\r
+ showLoadingIndicator() {\r
+ if(!this.loadingIndicator){\r
+ this.loadingIndicator = this.chart.tooltipContainer.createChild(am4core.Container);\r
+ this.loadingIndicator.background.fill = am4core.color("#fff");\r
+ this.loadingIndicator.background.fillOpacity = 0.8;\r
+ this.loadingIndicator.width = am4core.percent(100);\r
+ this.loadingIndicator.height = am4core.percent(100);\r
+\r
+ let indicatorLabel = this.loadingIndicator.createChild(am4core.Label);\r
+ indicatorLabel.text = "Loading..";\r
+ indicatorLabel.align = "center";\r
+ indicatorLabel.valign = "middle";\r
+ indicatorLabel.fontSize = 18;\r
+ indicatorLabel.fontWeight= "bold";\r
+ indicatorLabel.dy = 50;\r
+\r
+ let loadingImage = this.loadingIndicator.createChild(am4core.Image);\r
+ //loadingImage.href = "https://img.devrant.com/devrant/rant/r_647810_4FeCH.gif";\r
+ loadingImage.href = "/assets/images/equalizer.gif";\r
+ //loadingImage.dataSource = "/loading-pies.svg"\r
+ loadingImage.align = "center";\r
+ loadingImage.valign = "middle";\r
+ loadingImage.horizontalCenter = "middle";\r
+ loadingImage.verticalCenter = "middle";\r
+ loadingImage.scale = 3.0;\r
+ }else{\r
+ this.loadingIndicator.show();\r
+ }\r
+\r
+ }\r
+\r
+ hideLoadingIndicator() {\r
+ this.loadingIndicator.hide();\r
+ }\r
+\r
+ incrementStatus(data, code){\r
+ \r
+ if(code >= 200 && code < 300){\r
+ data["200"]++;\r
+ }else if(code >= 300 && code < 400){\r
+ data["300"]++;\r
+ }else if(code >= 400 && code < 500){\r
+ data["400"]++;\r
+ }else if(code >= 500 && code < 600){\r
+ data["500"]++;\r
+ }else{\r
+ \r
+ data["other"]++;\r
+ }\r
+ }\r
+\r
+ setChartData() {\r
+\r
+ let data = [];\r
+ this.stats.executionList.forEach((execution, i) => {\r
+ execution.testHeadResults.forEach((result, val) => {\r
+ let index = data.findIndex(e => e.id === result.testHeadId);\r
+ let executionTime = moment(result.endTime).diff(moment(result.startTime), 'seconds');\r
+ if(index == -1){\r
+ let toPush = {\r
+ id: result.testHeadId,\r
+ name: result.testHeadName,\r
+ executionTime: executionTime,\r
+ count: 1,\r
+ average: executionTime,\r
+ "200": 0,\r
+ "300": 0,\r
+ "400": 0,\r
+ "500": 0,\r
+ "other": 0\r
+ }\r
+ this.incrementStatus(toPush, result.statusCode);\r
+ data.push(toPush);\r
+ }else{\r
+ this.incrementStatus(data[index], result.statusCode);\r
+ data[index].count += 1;\r
+ data[index].executionTime += executionTime;\r
+ data[index].average = (data[index].executionTime / data[index].count);\r
+ }\r
+ });\r
+ });\r
+ data.sort((a, b) => b.count - a.count);\r
+ this.chart.data = data;\r
+\r
+ // Displays the average time for each bar. \r
+ // If there is no time recorded for the Test Instance, display No Time Recorded.\r
+ let series = this.chart.series.values as Array<am4charts.ColumnSeries>;\r
+ \r
+ // series.columns.template.adapter.add("tooltipText", (text, target) => {\r
+ // if (target.dataItem) {\r
+ // if (this.chart.data[target.dataItem.index].average > 0) {\r
+ // 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
+ // } else\r
+ // return this.chart.data[target.dataItem.index].count.toString() + " Executions \n No Time Recorded";\r
+ // }\r
+ // });\r
+\r
+ series.forEach(elem => {\r
+ // elem.columns.template.adapter.add("fill", (fill, target) => this.chart.colors.getIndex(target.dataItem.index));\r
+ \r
+ \r
+ elem.columns.template.events.on("doublehit", (click) => {\r
+ this.router.navigate(['/test-heads', click.target.dataItem.dataContext['id']]);\r
+ });\r
+ })\r
+ \r
+ this.chart.appear();\r
+ this.hideLoadingIndicator();\r
+ }\r
+\r
+ renderChart() {\r
+ this.chart = am4core.create(this.chartElement.nativeElement, am4charts.XYChart);\r
+\r
+ this.showLoadingIndicator();\r
+\r
+ this.chart.responsive.enabled = true;\r
+\r
+ // Create axes\r
+ var categoryAxis = this.chart.yAxes.push(new am4charts.CategoryAxis());\r
+ categoryAxis.dataFields.category = "name";\r
+ categoryAxis.numberFormatter.numberFormat = "#";\r
+ categoryAxis.renderer.inversed = true;\r
+ categoryAxis.renderer.minGridDistance = 5;\r
+ categoryAxis.title.fontSize = "10px";\r
+\r
+ var valueAxis = this.chart.xAxes.push(new am4charts.ValueAxis());\r
+ valueAxis.renderer.minWidth = 10;\r
+\r
+ this.createSeries("200", "200s")\r
+ this.createSeries("300", "300s")\r
+ this.createSeries("400", "400s")\r
+ this.createSeries("500", "500s")\r
+ this.createSeries("other", "Other")\r
+\r
+ this.chart.legend = new am4charts.Legend();\r
+ this.chart.legend.scale = .7;\r
+ this.chart.legend.width = am4core.percent(150);\r
+\r
+ let label = categoryAxis.renderer.labels.template;\r
+ label.truncate = true;\r
+ label.maxWidth = 130;\r
+ label.fontSize = 13;\r
+\r
+ //Scrollbar on the right. \r
+ let scrollBarY = new am4charts.XYChartScrollbar();\r
+ //scrollBarY.series.push(series);\r
+ this.chart.scrollbarY = scrollBarY;\r
+ this.chart.scrollbarY.contentHeight = 100;\r
+ this.chart.scrollbarY.minWidth = 20;\r
+ this.chart.scrollbarY.thumb.minWidth = 20;\r
+\r
+ //set initial Scrollbar Zoom to the Top 6 Instances. \r
+ this.chart.events.on("appeared", () => {\r
+ categoryAxis.zoomToIndexes(0, 6, false, true);\r
+ });\r
+ }\r
+\r
+ createSeries(field, name){\r
+ // Create series\r
+ var series = this.chart.series.push(new am4charts.ColumnSeries());\r
+ series.dataFields.valueX = field;\r
+ series.dataFields.categoryY = "name";\r
+ series.stacked = true;\r
+ series.name = name;\r
+ }\r
+\r
+}\r
Code Review / it / otf.git / blobdiff