--- /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, NgZone, Input, ViewChild, ElementRef, OnDestroy, } from '@angular/core';\r
+import * as am4core from "@amcharts/amcharts4/core";\r
+import * as am4charts from "@amcharts/amcharts4/charts";\r
+import { StatsService } from '../stats.service';\r
+import { Router } from '@angular/router';\r
+import { Subscription } from 'rxjs';\r
+\r
+//am4core.useTheme(frozen);\r
+//am4core.useTheme(am4themes_animated);\r
+\r
+@Component({\r
+ selector: 'app-pie-chart',\r
+ templateUrl: './pie-chart.component.pug',\r
+ styleUrls: ['./pie-chart.component.scss']\r
+})\r
+export class PieChartComponent implements OnInit, OnDestroy {\r
+\r
+ private toDestroy: Array<Subscription> = [];\r
+\r
+ @ViewChild('pieChartDiv') PieChartDiv: ElementRef;\r
+ @ViewChild('legendDiv') legendDiv: ElementRef;\r
+ @Input() height: string;\r
+\r
+ protected stats: StatsService;\r
+ public chart: am4charts.PieChart;\r
+ private chartData: Array<Object>;\r
+ public loadingIndicator;\r
+\r
+ constructor(private statsService: StatsService, private route: Router) {\r
+ this.stats = statsService;\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.onTDExecutionChangeStarted().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
+ // //Resize if screen size changes.\r
+ // this.stats.checkWindow().subscribe(res=>{\r
+ // this.renderChart();\r
+ // })\r
+\r
+ }\r
+\r
+ ngOnDestroy() {\r
+ this.toDestroy.forEach(e => e.unsubscribe());\r
+ this.chart.dispose();\r
+ }\r
+\r
+ showLoadingIndicator() {\r
+\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
+\r
+ hideLoadingIndicator() {\r
+ this.loadingIndicator.hide();\r
+ }\r
+\r
+ setChartData(){\r
+ this.chartData = this.stats.getData("TD_Results") as Array<Object>;\r
+ if (this.chartData.length == 0) {\r
+ this.chart.data = [{\r
+ Name: "N/A",\r
+ Count: 1,\r
+ }]\r
+ \r
+ this.chart.series.values[0].tooltipText = "No Executions Found"\r
+ } else {\r
+ this.chart.data = this.chartData;\r
+ //OnClick open page for that result. \r
+ this.chart.series.values[0].slices.template.events.on("doublehit", (clickedSlice) => {\r
+ this.route.navigate(['/test-executions', { filter: clickedSlice.target.dataItem.dataContext['Name'].toString().toLowerCase() }]);\r
+ });\r
+ }\r
+ this.hideLoadingIndicator();\r
+ \r
+ }\r
+\r
+ renderChart() {\r
+\r
+ this.chart = am4core.create(this.PieChartDiv.nativeElement, am4charts.PieChart);\r
+ let series = this.chart.series.push(new am4charts.PieSeries());\r
+ this.chart.scale = 1;\r
+ this.chart.align = "center";\r
+ this.showLoadingIndicator();\r
+\r
+ // this.chart.legend = new am4charts.Legend();\r
+ // this.chart.legend.position = "right";\r
+ // this.chart.legend.scale = .7;\r
+ // this.chart.legend.markers.template.width = 10;\r
+ // this.chart.legend.markers.template.height = 10;\r
+ \r
+ //chart.preloader.disabled = false;\r
+ //chart.hiddenState.properties.opacity = 0; // this creates initial fade-in\r
+ \r
+ // var legendContainer = am4core.create(this.legendDiv.nativeElement, am4core.Container);\r
+ // legendContainer.width = am4core.percent(100);\r
+ // legendContainer.height = am4core.percent(100);\r
+ // this.chart.legend.parent = legendContainer;\r
+ series.dataFields.value = "Count";\r
+ series.dataFields.category = "Name";\r
+ series.slices.template.strokeWidth = 1;\r
+ series.slices.template.strokeOpacity = 1;\r
+ series.slices.template.propertyFields.fill = "color"\r
+ series.scale = .8;\r
+\r
+ // This creates initial animation\r
+ series.hiddenState.properties.opacity = 1;\r
+ series.hiddenState.properties.endAngle = -90;\r
+ series.hiddenState.properties.startAngle = -90;\r
+ series.ticks.template.disabled = false;\r
+ series.labels.template.disabled = false;\r
+ series.titleElement.textContent = 'Total Test Results'\r
+\r
+ //responsive pie chart. if size of chart is less than 450 pixels remove legend. \r
+ this.chart.responsive.enabled = true;\r
+ \r
+ \r
+\r
+ }\r
+}\r
Code Review / it / otf.git / blobdiff