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