otf-frontend/client/src/app/layout/components/stats/horiz-bar-chart/horiz-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, NgZone, Input, ViewChild, ElementRef, OnDestroy, } from '@angular/core';\r
  18 import * as am4core from "@amcharts/amcharts4/core";\r
  19 import * as am4charts from "@amcharts/amcharts4/charts";\r
  20 import { StatsService } from '../stats.service'\r
  21 \r
  22 // am4core.useTheme(am4themes_animated);\r
  23 \r
  24 @Component({\r
  25   selector: 'app-horiz-bar-chart',\r
  26   templateUrl: './horiz-bar-chart.component.pug',\r
  27   styleUrls: ['./horiz-bar-chart.component.scss']\r
  28 })\r
  29 export class HorizBarChartComponent implements OnInit, OnDestroy {\r
  30 \r
  31   @ViewChild('horizBarChartDiv') HorizBarChartDiv: ElementRef;\r
  32   @Input() height: string;\r
  33 \r
  34   public chart: am4charts.XYChart;\r
  35   public testInstanceData;\r
  36   public loadingIndicator;\r
  37   protected stats: StatsService;\r
  38 \r
  39   constructor(private statsService: StatsService) {\r
  40     this.stats = statsService;\r
  41   }\r
  42 \r
  43 \r
  44   ngOnInit() {\r
  45     this.renderChart();\r
  46 \r
  47     this.stats.onDefaultDataCallStarted().subscribe(res => {\r
  48       this.showLoadingIndicator();\r
  49     })\r
  50 \r
  51     this.stats.onTIExecutionChangeStarted().subscribe(res => {\r
  52       this.showLoadingIndicator();\r
  53     })\r
  54 \r
  55     this.stats.onDefaultDataCallFinished().subscribe(res => {\r
  56       this.setChartData();\r
  57     })\r
  58 \r
  59     this.stats.onTIExecutionChangeFinished().subscribe(res => {\r
  60       this.setChartData()\r
  61     })\r
  62 \r
  63   }\r
  64 \r
  65   ngOnDestroy() {\r
  66     this.chart.dispose();\r
  67   }\r
  68 \r
  69   showLoadingIndicator() {\r
  70     if(!this.loadingIndicator){\r
  71       this.loadingIndicator = this.chart.tooltipContainer.createChild(am4core.Container);\r
  72       this.loadingIndicator.background.fill = am4core.color("#fff");\r
  73       this.loadingIndicator.background.fillOpacity = 0.8;\r
  74       this.loadingIndicator.width = am4core.percent(100);\r
  75       this.loadingIndicator.height = am4core.percent(100);\r
  76 \r
  77       let indicatorLabel = this.loadingIndicator.createChild(am4core.Label);\r
  78       indicatorLabel.text = "Loading..";\r
  79       indicatorLabel.align = "center";\r
  80       indicatorLabel.valign = "middle";\r
  81       indicatorLabel.fontSize = 18;\r
  82       indicatorLabel.fontWeight= "bold";\r
  83       indicatorLabel.dy = 50;\r
  84 \r
  85       let loadingImage = this.loadingIndicator.createChild(am4core.Image);\r
  86       //loadingImage.href = "https://img.devrant.com/devrant/rant/r_647810_4FeCH.gif";\r
  87       loadingImage.href = "/assets/images/equalizer.gif";\r
  88       //loadingImage.dataSource = "/loading-pies.svg"\r
  89       loadingImage.align = "center";\r
  90       loadingImage.valign = "middle";\r
  91       loadingImage.horizontalCenter = "middle";\r
  92       loadingImage.verticalCenter = "middle";\r
  93       loadingImage.scale = 3.0;\r
  94     }else{\r
  95       this.loadingIndicator.show();\r
  96     }\r
  97 \r
  98   }\r
  99 \r
 100   hideLoadingIndicator() {\r
 101     this.loadingIndicator.hide();\r
 102   }\r
 103 \r
 104   setChartData() {\r
 105     this.testInstanceData = this.stats.getData('testInstances');\r
 106     this.chart.data = this.testInstanceData;\r
 107 \r
 108     // Displays the average time for each bar. \r
 109     // If there is no time recorded for the Test Instance, display No Time Recorded.\r
 110     let series = this.chart.series.values[0] as am4charts.ColumnSeries;\r
 111     \r
 112     \r
 113     series.columns.template.adapter.add("tooltipText", (text, target) => {\r
 114       if (target.dataItem) {\r
 115         if (this.chart.data[target.dataItem.index].Average > 0) {\r
 116           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
 117         } else\r
 118           return this.chart.data[target.dataItem.index].Count.toString() + " Executions \n No Time Recorded";\r
 119       }\r
 120     });\r
 121     series.columns.template.adapter.add("fill", (fill, target) => this.chart.colors.getIndex(target.dataItem.index));\r
 122     // console.log(this.chart.yAxes);\r
 123     this.chart.yAxes.values[0].zoomToIndexes(0, 6, false, true);\r
 124     this.hideLoadingIndicator();\r
 125     \r
 126   }\r
 127 \r
 128   renderChart() {\r
 129     this.chart = am4core.create(this.HorizBarChartDiv.nativeElement, am4charts.XYChart);\r
 130     this.chart.cursor = new am4charts.XYCursor();\r
 131     this.showLoadingIndicator();\r
 132 \r
 133     this.chart.responsive.enabled = true;\r
 134 \r
 135     // Create axes\r
 136     var categoryAxis = this.chart.yAxes.push(new am4charts.CategoryAxis());\r
 137     categoryAxis.dataFields.category = "Name";\r
 138     categoryAxis.numberFormatter.numberFormat = "#";\r
 139     categoryAxis.renderer.inversed = true;\r
 140     categoryAxis.renderer.minGridDistance = 5;\r
 141     categoryAxis.title.text = "Test Instances";\r
 142     categoryAxis.title.fontSize = "10px";\r
 143 \r
 144     var valueAxis = this.chart.xAxes.push(new am4charts.ValueAxis());\r
 145     valueAxis.renderer.minWidth = 10;\r
 146 \r
 147     // Create series\r
 148     var series = this.chart.series.push(new am4charts.ColumnSeries());\r
 149     series.dataFields.valueX = "Count";\r
 150     series.dataFields.categoryY = "Name";\r
 151     series.columns.template.tooltipText = " ";\r
 152 \r
 153     let label = categoryAxis.renderer.labels.template;\r
 154     label.truncate = true;\r
 155     label.maxWidth = 130;\r
 156     label.fontSize = 13;\r
 157 \r
 158     //Scrollbar on the right. \r
 159     let scrollBarY = new am4charts.XYChartScrollbar();\r
 160     scrollBarY.series.push(series);\r
 161     this.chart.scrollbarY = scrollBarY;\r
 162     this.chart.scrollbarY.contentHeight = 100;\r
 163     this.chart.scrollbarY.minWidth = 20;\r
 164     this.chart.scrollbarY.thumb.minWidth = 20;\r
 165 \r
 166     //set initial Scrollbar Zoom to the Top 6 Instances. \r
 167   //   this.chart.events.on("ready", () => {\r
 168   //     console.log("here")\r
 169   //     categoryAxis.zoomToIndexes(0, 6, false, true);\r
 170   //   });\r
 171    }\r
 172 \r
 173 }\r
 174 \r
 175 \r