--- /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, Input, ViewChild, ElementRef, OnDestroy } from '@angular/core';\r
+import { StatsService } from '../stats.service';\r
+import * as am4core from "@amcharts/amcharts4/core";\r
+import * as am4charts from "@amcharts/amcharts4/charts";\r
+import { _ } from 'ag-grid-community';\r
+import * as moment from 'moment';\r
+import { Subscription } from 'rxjs';\r
+import { GroupService } from 'app/shared/services/group.service';\r
+\r
+@Component({\r
+ selector: 'app-test-head-executions-line-chart',\r
+ templateUrl: './test-head-executions-line-chart.component.pug',\r
+ styleUrls: ['./test-head-executions-line-chart.component.scss']\r
+})\r
+export class TestHeadExecutionsLineChartComponent implements OnInit {\r
+\r
+ private toDestroy: Array<Subscription> = [];\r
+\r
+ @ViewChild('chart') chartElement: ElementRef;\r
+ @Input() height: string;\r
+\r
+ //public testDefinitionName = "Hello";\r
+ private chart: am4charts.XYChart;\r
+ private loadingIndicator;\r
+\r
+ constructor(private stats: StatsService, private _groups: GroupService) {\r
+ }\r
+\r
+ ngOnInit() {\r
+ this.renderChart();\r
+\r
+ this.toDestroy.push(this.stats.onTDExecutionChangeStarted().subscribe(res => {\r
+ this.showLoadingIndicator();\r
+ }));\r
+\r
+ this.toDestroy.push(this.stats.onDefaultDataCallStarted().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.onTDExecutionChangeFinished().subscribe(res => {\r
+ this.setChartData();\r
+ }));\r
+\r
+ }\r
+\r
+ ngOnDestroy() {\r
+ //destory chart\r
+ this.toDestroy.forEach(e => e.unsubscribe());\r
+ this.chart.dispose();\r
+ }\r
+\r
+ //Sets count to 0 for any dates that dont have data\r
+ setupPoints(rawData) {\r
+ let formattedData = [];\r
+ let dayRange = moment(this.stats.filters.endDate).add(1, 'days').diff(moment(this.stats.filters.startDate), 'days');\r
+ for (let i = 0; i < dayRange; i++) {\r
+ //find date in raw data\r
+ let d = rawData.find(e => moment(e.date).isSame(moment(this.stats.filters.startDate).add(i, 'days'), 'day'));\r
+ let myTestHeads = 0;\r
+ let otherTestHeads = 0;\r
+ if (d) {\r
+ myTestHeads = d.myTestHeads || 0;\r
+ otherTestHeads = d.otherTestHeads || 0;\r
+ }\r
+ formattedData.push({\r
+ date: moment(this.stats.filters.startDate).startOf('day').add(i, 'days').toDate(),\r
+ myTestHeads: myTestHeads,\r
+ otherTestHeads: otherTestHeads\r
+ })\r
+ }\r
+\r
+ return formattedData;\r
+ }\r
+\r
+ showLoadingIndicator() {\r
+\r
+ //this.height = "380px";\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
+ hideLoadingIndicator() {\r
+ this.loadingIndicator.hide();\r
+ }\r
+\r
+ async setChartData() {\r
+ let data = [];\r
+\r
+ this.stats.executionList.forEach((e, i) => {\r
+ if (e.testHeadResults && e.testHeadResults.length > 0) {\r
+\r
+ e.testHeadResults.forEach((result, index) => {\r
+\r
+ let isMyTestHead = result.testHeadGroupId == this._groups.getGroup()['_id'];\r
+\r
+\r
+\r
+ let dataIndex = data.findIndex(d => moment(d.date).isSame(result.startTime, 'day'));\r
+\r
+ if (dataIndex == -1) {\r
+ dataIndex = data.push({ date: moment(result.startTime).toDate() }) - 1;\r
+ }\r
+\r
+ if (isMyTestHead) {\r
+ if (data[dataIndex]['myTestHeads']) {\r
+ data[dataIndex]['myTestHeads'] += 1;\r
+ } else {\r
+ data[dataIndex]['myTestHeads'] = 1;\r
+ }\r
+ }else{\r
+ if (data[dataIndex]['otherTestHeads']) {\r
+ data[dataIndex]['otherTestHeads'] += 1;\r
+ } else {\r
+ data[dataIndex]['otherTestHeads'] = 1;\r
+ }\r
+ }\r
+\r
+ })\r
+ }\r
+ });\r
+\r
+ \r
+\r
+ this.chart.data = this.setupPoints(data);\r
+\r
+ this.hideLoadingIndicator();\r
+ }\r
+\r
+ renderChart() {\r
+\r
+ if (this.chart) {\r
+ this.chart.dispose();\r
+ }\r
+ this.chart = am4core.create(this.chartElement.nativeElement, am4charts.XYChart);\r
+ this.chart.preloader.disabled = true;\r
+ this.showLoadingIndicator();\r
+\r
+ let dateAxis = this.chart.xAxes.push(new am4charts.DateAxis());\r
+ dateAxis.fontSize = "10px";\r
+\r
+ let valueAxis = this.chart.yAxes.push(new am4charts.ValueAxis());\r
+ valueAxis.title.text = "Executions";\r
+ valueAxis.title.fontSize = "10px";\r
+\r
+ let series = this.chart.series.push(new am4charts.LineSeries());\r
+ series.name = "My Group's VTHs"\r
+ series.dataFields.dateX = "date";\r
+ series.dataFields.valueY = "myTestHeads";\r
+ series.strokeWidth = 3;\r
+\r
+ series.fillOpacity = .5; \r
+ // series.tensionX = 0.8;\r
+ series.sequencedInterpolation = false;\r
+ series.tooltipText = "{valueY.value}";\r
+\r
+ let seriesOthers = this.chart.series.push(new am4charts.LineSeries());\r
+ seriesOthers.name = "Other VTHs";\r
+ seriesOthers.dataFields.dateX = "date";\r
+ seriesOthers.dataFields.valueY = "otherTestHeads";\r
+ seriesOthers.strokeWidth = 3;\r
+ seriesOthers.tooltipText = "{valueY.value}";\r
+\r
+ this.chart.cursor = new am4charts.XYCursor();\r
+\r
+ this.chart.responsive.enabled = true;\r
+\r
+ this.chart.legend = new am4charts.Legend();\r
+ this.chart.legend.labels.template.text = "[bold {color}]{name}";\r
+ this.chart.legend.scale = .8;\r
+ }\r
+\r
+\r
+\r
+}\r
Code Review / it / otf.git / blobdiff