otf-frontend/client/src/app/layout/components/stats/line-chart/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 \r
  25 // am4core.useTheme(am4themes_animated);\r
  26 \r
  27 @Component({\r
  28   selector: 'app-line-chart',\r
  29   templateUrl: './line-chart.component.pug',\r
  30   styleUrls: ['./line-chart.component.scss']\r
  31 })\r
  32 export class LineChartComponent implements OnInit, OnDestroy {\r
  33 \r
  34   private toDestroy: Array<Subscription> = [];\r
  35 \r
  36   @ViewChild('linechartdiv') LineChartDiv: ElementRef;\r
  37   @Input() height: string;\r
  38 \r
  39   //public testDefinitionName = "Hello";\r
  40   private chart: am4charts.XYChart;\r
  41   private loadingIndicator;\r
  42 \r
  43   constructor(private stats: StatsService) {\r
  44   }\r
  45 \r
  46   ngOnInit() {\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     \r
  76     let formattedData = []; \r
  77     let dayRange = moment(this.stats.filters.endDate).add(1, 'days').diff(moment(this.stats.filters.startDate), 'days');\r
  78     \r
  79     for(let i = 0; i < dayRange; i++){\r
  80       //find date in raw data\r
  81       let d = rawData.find(e => moment(e.date).isSame(moment(this.stats.filters.startDate).add(i, 'days'), 'day'));\r
  82       let count = 0;\r
  83       if(d){\r
  84         count = d.count;\r
  85       }\r
  86       formattedData.push({\r
  87         date: moment(this.stats.filters.startDate).startOf('day').add(i, 'days').toDate(),\r
  88         count: count\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   setChartData() {\r
 132     let executions = this.stats.getData('TD_Executions');\r
 133     this.chart.data = this.setupPoints(executions);\r
 134 \r
 135     this.hideLoadingIndicator();\r
 136   }\r
 137 \r
 138   renderChart() {\r
 139 \r
 140     if(this.chart){\r
 141       this.chart.dispose();\r
 142     }\r
 143     this.chart = am4core.create(this.LineChartDiv.nativeElement, am4charts.XYChart);\r
 144     this.chart.preloader.disabled = true;\r
 145     this.showLoadingIndicator();\r
 146 \r
 147     let dateAxis = this.chart.xAxes.push(new am4charts.DateAxis());\r
 148     dateAxis.fontSize = "10px";\r
 149 \r
 150     let valueAxis = this.chart.yAxes.push(new am4charts.ValueAxis());\r
 151     valueAxis.title.text = "Executions";\r
 152     valueAxis.title.fontSize = "10px";\r
 153 \r
 154     let series = this.chart.series.push(new am4charts.LineSeries());\r
 155     series.dataFields.dateX = "date";\r
 156     series.dataFields.valueY = "count";\r
 157     series.strokeWidth = 3;\r
 158 \r
 159     series.fillOpacity = .5;\r
 160     // series.tensionX = 0.8;\r
 161     series.sequencedInterpolation = false;\r
 162     series.tooltipText = "{valueY.value}";\r
 163 \r
 164     this.chart.cursor = new am4charts.XYCursor();\r
 165 \r
 166     this.chart.responsive.enabled = true;\r
 167   }\r
 168 \r
 169 \r
 170 \r
 171 \r
 172 }\r