otf-frontend/client/src/app/layout/components/stats/pie-chart/pie-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 import { Router } from '@angular/router';\r
  22 import { Subscription } from 'rxjs';\r
  23 \r
  24 //am4core.useTheme(frozen);\r
  25 //am4core.useTheme(am4themes_animated);\r
  26 \r
  27 @Component({\r
  28   selector: 'app-pie-chart',\r
  29   templateUrl: './pie-chart.component.pug',\r
  30   styleUrls: ['./pie-chart.component.scss']\r
  31 })\r
  32 export class PieChartComponent implements OnInit, OnDestroy {\r
  33 \r
  34   private toDestroy: Array<Subscription> = [];\r
  35 \r
  36   @ViewChild('pieChartDiv') PieChartDiv: ElementRef;\r
  37   @ViewChild('legendDiv') legendDiv: ElementRef;\r
  38   @Input() height: string;\r
  39 \r
  40   protected stats: StatsService;\r
  41   public chart: am4charts.PieChart;\r
  42   private chartData: Array<Object>;\r
  43   public loadingIndicator;\r
  44 \r
  45   constructor(private statsService: StatsService, private route: Router) {\r
  46     this.stats = statsService;\r
  47   }\r
  48 \r
  49   ngOnInit() {\r
  50 \r
  51     this.renderChart();\r
  52 \r
  53     this.toDestroy.push(this.stats.onDefaultDataCallStarted().subscribe(res => {\r
  54       this.showLoadingIndicator();\r
  55     }));\r
  56 \r
  57     this.toDestroy.push(this.stats.onTDExecutionChangeStarted().subscribe(res => {\r
  58       this.showLoadingIndicator();\r
  59     }));\r
  60 \r
  61     this.toDestroy.push(this.stats.onDefaultDataCallFinished().subscribe(res => {\r
  62       this.setChartData();\r
  63     }));\r
  64 \r
  65     this.toDestroy.push(this.stats.onTDExecutionChangeFinished().subscribe(res => {\r
  66       this.setChartData()\r
  67     }));\r
  68     \r
  69 \r
  70     // //Resize if screen size changes.\r
  71     // this.stats.checkWindow().subscribe(res=>{\r
  72     //   this.renderChart();\r
  73     // })\r
  74 \r
  75   }\r
  76 \r
  77   ngOnDestroy() {\r
  78     this.toDestroy.forEach(e => e.unsubscribe());\r
  79     this.chart.dispose();\r
  80   }\r
  81 \r
  82   showLoadingIndicator() {\r
  83 \r
  84     if(!this.loadingIndicator){\r
  85       this.loadingIndicator = this.chart.tooltipContainer.createChild(am4core.Container);\r
  86       this.loadingIndicator.background.fill = am4core.color("#fff");\r
  87       this.loadingIndicator.background.fillOpacity = 0.8;\r
  88       this.loadingIndicator.width = am4core.percent(100);\r
  89       this.loadingIndicator.height = am4core.percent(100);\r
  90 \r
  91       let indicatorLabel = this.loadingIndicator.createChild(am4core.Label);\r
  92       indicatorLabel.text = "Loading..";\r
  93       indicatorLabel.align = "center";\r
  94       indicatorLabel.valign = "middle";\r
  95       indicatorLabel.fontSize = 18;\r
  96       indicatorLabel.fontWeight= "bold";\r
  97       indicatorLabel.dy = 50;\r
  98 \r
  99       let loadingImage = this.loadingIndicator.createChild(am4core.Image);\r
 100       //loadingImage.href = "https://img.devrant.com/devrant/rant/r_647810_4FeCH.gif";\r
 101       loadingImage.href = "/assets/images/equalizer.gif";\r
 102       //loadingImage.dataSource = "/loading-pies.svg"\r
 103       loadingImage.align = "center";\r
 104       loadingImage.valign = "middle";\r
 105       loadingImage.horizontalCenter = "middle";\r
 106       loadingImage.verticalCenter = "middle";\r
 107       loadingImage.scale = 3.0;\r
 108     }else{\r
 109       this.loadingIndicator.show();\r
 110     }\r
 111     \r
 112 \r
 113   }\r
 114 \r
 115   hideLoadingIndicator() {\r
 116     this.loadingIndicator.hide();\r
 117   }\r
 118 \r
 119   setChartData(){\r
 120     this.chartData = this.stats.getData("TD_Results") as Array<Object>;\r
 121     if (this.chartData.length == 0) {\r
 122       this.chart.data = [{\r
 123         Name: "N/A",\r
 124         Count: 1,\r
 125       }]\r
 126       \r
 127       this.chart.series.values[0].tooltipText = "No Executions Found"\r
 128     } else {\r
 129       this.chart.data = this.chartData;\r
 130       //OnClick open page for that result. \r
 131       this.chart.series.values[0].slices.template.events.on("doublehit", (clickedSlice) => {\r
 132         this.route.navigate(['/test-executions', { filter: clickedSlice.target.dataItem.dataContext['Name'].toString().toLowerCase() }]);\r
 133       });\r
 134     }\r
 135     this.hideLoadingIndicator();\r
 136     \r
 137   }\r
 138 \r
 139   renderChart() {\r
 140 \r
 141     this.chart = am4core.create(this.PieChartDiv.nativeElement, am4charts.PieChart);\r
 142     let series = this.chart.series.push(new am4charts.PieSeries());\r
 143     this.chart.scale = 1;\r
 144     this.chart.align = "center";\r
 145     this.showLoadingIndicator();\r
 146 \r
 147     // this.chart.legend = new am4charts.Legend();\r
 148     // this.chart.legend.position = "right";\r
 149     // this.chart.legend.scale = .7;\r
 150     // this.chart.legend.markers.template.width = 10;\r
 151     // this.chart.legend.markers.template.height = 10;\r
 152   \r
 153     //chart.preloader.disabled = false;\r
 154     //chart.hiddenState.properties.opacity = 0; // this creates initial fade-in\r
 155     \r
 156     // var legendContainer = am4core.create(this.legendDiv.nativeElement, am4core.Container);\r
 157     // legendContainer.width = am4core.percent(100);\r
 158     // legendContainer.height = am4core.percent(100);\r
 159     // this.chart.legend.parent = legendContainer;\r
 160     series.dataFields.value = "Count";\r
 161     series.dataFields.category = "Name";\r
 162     series.slices.template.strokeWidth = 1;\r
 163     series.slices.template.strokeOpacity = 1;\r
 164     series.slices.template.propertyFields.fill = "color"\r
 165     series.scale = .8;\r
 166 \r
 167     // This creates initial animation\r
 168     series.hiddenState.properties.opacity = 1;\r
 169     series.hiddenState.properties.endAngle = -90;\r
 170     series.hiddenState.properties.startAngle = -90;\r
 171     series.ticks.template.disabled = false;\r
 172     series.labels.template.disabled = false;\r
 173     series.titleElement.textContent = 'Total Test Results'\r
 174 \r
 175     //responsive pie chart. if size of chart is less than 450 pixels remove legend. \r
 176     this.chart.responsive.enabled = true;\r
 177     \r
 178     \r
 179 \r
 180   }\r
 181 }\r