otf-frontend/client/src/app/layout/virtual-test-heads/virtual-test-head-details/charts/test-head-executions-line-chart/test-head-executions-line-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, Output, EventEmitter } from '@angular/core';\r
  18 import { Subscription } from 'rxjs';\r
  19 import { StatsService } from 'app/layout/components/stats/stats.service';\r
  20 import * as moment from 'moment';\r
  21 import * as am4core from "@amcharts/amcharts4/core";\r
  22 import * as am4charts from "@amcharts/amcharts4/charts";\r
  23 \r
  24 @Component({\r
  25   selector: 'app-test-head-executions-line-chart',\r
  26   templateUrl: './test-head-executions-line-chart.component.pug',\r
  27   styleUrls: ['./test-head-executions-line-chart.component.scss']\r
  28 })\r
  29 export class TestHeadExecutionsLineChartComponent implements OnInit {\r
  30 \r
  31   private toDestroy: Array<Subscription> = [];\r
  32 \r
  33   @ViewChild('linechartdiv') LineChartDiv: ElementRef;\r
  34   @Input() height: string;\r
  35   @Input() testHeadId;\r
  36   @Output() total: EventEmitter<any> = new EventEmitter();\r
  37 \r
  38   //public testDefinitionName = "Hello";\r
  39   private chart: am4charts.XYChart;\r
  40   private loadingIndicator;\r
  41 \r
  42   constructor(private stats: StatsService) {\r
  43   }\r
  44 \r
  45   ngOnInit() {\r
  46     \r
  47 \r
  48     this.renderChart();\r
  49 \r
  50     this.toDestroy.push(this.stats.onTDExecutionChangeStarted().subscribe(res => {\r
  51       this.showLoadingIndicator();\r
  52     }));\r
  53 \r
  54     this.toDestroy.push(this.stats.onDefaultDataCallStarted().subscribe(res => {\r
  55       this.showLoadingIndicator();\r
  56     }));\r
  57 \r
  58     this.toDestroy.push(this.stats.onDefaultDataCallFinished().subscribe(res => {\r
  59       this.setChartData();\r
  60     }));\r
  61 \r
  62     this.toDestroy.push(this.stats.onTDExecutionChangeFinished().subscribe(res => {\r
  63       this.setChartData();\r
  64     }));\r
  65 \r
  66   }\r
  67 \r
  68   ngOnDestroy(){\r
  69     //destory chart\r
  70     this.chart.dispose();\r
  71   }\r
  72 \r
  73   //Sets count to 0 for any dates that dont have data\r
  74   setupPoints(rawData) {\r
  75     let formattedData = []; \r
  76     let dayRange = moment(this.stats.filters.endDate).add(1, 'days').diff(moment(this.stats.filters.startDate), 'days');\r
  77 \r
  78     for(let i = 0; i < dayRange; i++){\r
  79       //find date in raw data\r
  80       let d = rawData.find(e => moment(e.date).isSame(moment(this.stats.filters.startDate).add(i, 'days'), 'day'));\r
  81       let count = 0;\r
  82       if(d){\r
  83         count = d.count;\r
  84       }\r
  85       formattedData.push({\r
  86         date: moment(this.stats.filters.startDate).startOf('day').add(i, 'days').toDate(),\r
  87         count: count\r
  88       })\r
  89     }\r
  90 \r
  91     return formattedData;\r
  92   }\r
  93 \r
  94   showLoadingIndicator() {\r
  95 \r
  96     //this.height = "380px";\r
  97     if(!this.loadingIndicator){\r
  98       this.loadingIndicator = this.chart.tooltipContainer.createChild(am4core.Container);\r
  99       this.loadingIndicator.background.fill = am4core.color("#fff");\r
 100       this.loadingIndicator.background.fillOpacity = 0.8;\r
 101       this.loadingIndicator.width = am4core.percent(100);\r
 102       this.loadingIndicator.height = am4core.percent(100);\r
 103 \r
 104       let indicatorLabel = this.loadingIndicator.createChild(am4core.Label);\r
 105       indicatorLabel.text = "Loading..";\r
 106       indicatorLabel.align = "center";\r
 107       indicatorLabel.valign = "middle";\r
 108       indicatorLabel.fontSize = 18;\r
 109       indicatorLabel.fontWeight = "bold";\r
 110       indicatorLabel.dy = 50;\r
 111 \r
 112       let loadingImage = this.loadingIndicator.createChild(am4core.Image);\r
 113       //loadingImage.href = "https://img.devrant.com/devrant/rant/r_647810_4FeCH.gif";\r
 114       loadingImage.href = "/assets/images/equalizer.gif";\r
 115       //loadingImage.dataSource = "/loading-pies.svg"\r
 116       loadingImage.align = "center";\r
 117       loadingImage.valign = "middle";\r
 118       loadingImage.horizontalCenter = "middle";\r
 119       loadingImage.verticalCenter = "middle";\r
 120       loadingImage.scale = 3.0;\r
 121     }else{\r
 122       this.loadingIndicator.show();\r
 123     }\r
 124   }\r
 125 \r
 126   hideLoadingIndicator() {\r
 127     this.loadingIndicator.hide();\r
 128   }\r
 129 \r
 130   setChartData() {\r
 131     let data = [];\r
 132     let total = 0;\r
 133     this.stats.executionList.forEach(e => {\r
 134       if (e.testHeadResults && e.testHeadResults.length > 0) {\r
 135 \r
 136         e.testHeadResults.forEach((result, index) => {\r
 137 \r
 138           if(result.testHeadId == this.testHeadId){\r
 139             total++;\r
 140             let dataIndex = data.findIndex(d => moment(d.date).isSame(result.startTime, 'day'));\r
 141 \r
 142             if (dataIndex == -1) {\r
 143               data.push({ date: moment(result.startTime).toDate(), count: 1 });\r
 144             }else{\r
 145               data[dataIndex].count++;\r
 146             }\r
 147             \r
 148           }\r
 149 \r
 150         })\r
 151       }\r
 152     })\r
 153     \r
 154     this.chart.data = this.setupPoints(data);\r
 155     this.total.emit(total);\r
 156     this.hideLoadingIndicator();\r
 157   }\r
 158 \r
 159   renderChart() {\r
 160 \r
 161     if(this.chart){\r
 162       this.chart.dispose();\r
 163     }\r
 164     this.chart = am4core.create(this.LineChartDiv.nativeElement, am4charts.XYChart);\r
 165     this.chart.preloader.disabled = true;\r
 166     this.showLoadingIndicator();\r
 167 \r
 168     let dateAxis = this.chart.xAxes.push(new am4charts.DateAxis());\r
 169     dateAxis.fontSize = "10px";\r
 170 \r
 171     let valueAxis = this.chart.yAxes.push(new am4charts.ValueAxis());\r
 172     valueAxis.title.text = "Executions";\r
 173     valueAxis.title.fontSize = "10px";\r
 174 \r
 175     let series = this.chart.series.push(new am4charts.LineSeries());\r
 176     series.dataFields.dateX = "date";\r
 177     series.dataFields.valueY = "count";\r
 178     series.strokeWidth = 3;\r
 179 \r
 180     series.fillOpacity = .5;\r
 181     // series.tensionX = 0.8;\r
 182     series.sequencedInterpolation = false;\r
 183     series.tooltipText = "{valueY.value}";\r
 184 \r
 185     this.chart.cursor = new am4charts.XYCursor();\r
 186 \r
 187     this.chart.responsive.enabled = true;\r
 188   }\r
 189 \r
 190 }\r