From b6e3f363173503680e0312bb722c999708be9e30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anthony=20Qu=C3=A9r=C3=A9?= <47711333+Anthony-Jhoiro@users.noreply.github.com> Date: Thu, 8 Aug 2019 11:09:51 +0200 Subject: [PATCH] #12 Update polar area charts add legend, change colors, change title, remove white borders --- .../core/services/crud/reporting.service.ts | 91 +++++----- .../reportby-other.component.html | 21 ++- .../reportby-other.component.scss | 7 + .../reportby-other.component.ts | 18 +- .../reportbytag/reportbytag.component.html | 2 +- .../reportbytag/reportbytag.component.ts | 156 +----------------- 6 files changed, 87 insertions(+), 208 deletions(-) diff --git a/src/app/core/services/crud/reporting.service.ts b/src/app/core/services/crud/reporting.service.ts index 0130dcdb..2c869696 100644 --- a/src/app/core/services/crud/reporting.service.ts +++ b/src/app/core/services/crud/reporting.service.ts @@ -78,6 +78,17 @@ export class ReportingService { // observables observableTagsList = new BehaviorSubject(this.tagsList); + private colors = [ + '#0665d0', + '#689550', + '#774aa4', + '#00a680', + '#314499', + '#3b5998', + '#6772e5', + '#dd4b39' + ] + constructor(private http: HttpClient) { } getTagList() { @@ -91,9 +102,9 @@ export class ReportingService { ReadTestCaseExecutionByTag(callback: (any) => any) { //TODO : Specified type this.http.get(environment.cerberus_api_url + '/ReadTestCaseExecutionByTag?Tag=' + this.selectedTagName + '&OK=on&KO=on&FA=on&NA=on&NE=on&WE=on&PE=on&QU=on&QE=on&CA=on&BE=on&CH=on&ES=on&FR=on&IT=on&LU=on&NL=on&PT=on&RU=on&UK=on&VI=on&PL=on&DE=on&RX=on&UF=on&env=on&country=on&robotDecli=on&app=on&') - .subscribe(response => { + .subscribe(response => { this.http.get(environment.cerberus_api_url + '/ReadCampaign?tag=true&&campaign=' + response.tagObject.campaign) - .subscribe(campaignResponse => { + .subscribe(campaignResponse => { this.campaignData = campaignResponse.contentTable.tag.slice(0, 10); callback(response); }) @@ -194,52 +205,54 @@ export class ReportingService { this.reportOther = []; let graphs = { - country: {}, - environment: {}, - robotDecli: {}, - application: {} + Countries: {}, + Environments: {}, + RobotDecli: {}, + Applications: {} } for (let table of response.statsChart.contentTable.split) { - let percentage = Math.round((table.OK/table.total)*1000)/10 - if (!graphs.country[table.country]) graphs.country[table.country] = []; - graphs.country[table.country].push(percentage); - if (!graphs.environment[table.environment]) graphs.environment[table.environment] = []; - graphs.environment[table.environment].push(percentage); - if (!graphs.robotDecli[table.robotDecli]) graphs.robotDecli[table.robotDecli] = []; - graphs.robotDecli[table.robotDecli].push(percentage); - if (!graphs.application[table.application]) graphs.application[table.application] = []; - graphs.application[table.application].push(percentage); + let percentage = Math.round((table.OK / table.total) * 1000) / 10 + if (!graphs.Countries[table.country]) graphs.Countries[table.country] = []; + graphs.Countries[table.country].push(percentage); + if (!graphs.Environments[table.environment]) graphs.Environments[table.environment] = []; + graphs.Environments[table.environment].push(percentage); + if (!graphs.RobotDecli[table.robotDecli]) graphs.RobotDecli[table.robotDecli] = []; + graphs.RobotDecli[table.robotDecli].push(percentage); + if (!graphs.Applications[table.application]) graphs.Applications[table.application] = []; + graphs.Applications[table.application].push(percentage); } console.log('graphs :', graphs); - + for (let graph in graphs) { let labels = []; let data = []; for (let label in graphs[graph]) { - labels.push(label); + labels.push((label !== '')? label : 'none'); let sum = 0; graphs[graph][label].forEach(element => { - sum+=element; - }); - data.push(Math.round((sum/graphs[graph][label].length)*10)/10) + sum += element; + }); + data.push(Math.round((sum / graphs[graph][label].length) * 10) / 10) } let chart = { + name: graph, data: data, legend: false, labels: labels, - // colors: [ { backgroundColor: tmp.map(a => a.color) } ], + colors: [ { + backgroundColor: this.colors, + borderColor: this.colors + } ], options: { title: { display: true, - text: graph, + text: 'percentage of OK\'s / ' + graph, }, - scales :{ - yAxes: [{ - ticks: {display: false} - }] + scale: { + display: false } } } @@ -247,7 +260,7 @@ export class ReportingService { } - + @@ -288,18 +301,18 @@ export class ReportingService { } parseStatisticReliability(response) { let datasets = [ - {data: [], label: "Reliability", type: 'line'}, - {data: [], label: "Results"}, + { data: [], label: "Reliability", type: 'line' }, + { data: [], label: "Results" }, ] let labels = []; - + for (let tag of this.campaignData) { - datasets[0].data.push((Math.round(tag.nbExeUsefull/tag.nbExe)*100)); - datasets[1].data.push(Math.round((tag.nbOK/tag.nbExe)*100)); + datasets[0].data.push((Math.round(tag.nbExeUsefull / tag.nbExe) * 100)); + datasets[1].data.push(Math.round((tag.nbOK / tag.nbExe) * 100)); labels.push(tag.tag); } this.reportStatisticsReliability = { - options : { + options: { responsive: true }, datasets: datasets, @@ -310,21 +323,21 @@ export class ReportingService { parseStatisticDuration(response) { let datasets = [ - {data: [], label: "Duration", type: 'line'}, - {data: [], label: "Executions"}, + { data: [], label: "Duration", type: 'line' }, + { data: [], label: "Executions" }, ] let labels = []; - + for (let tag of this.campaignData) { let dateEnd = new Date(tag.DateEndQueue); let dateStart = new Date(tag.DateCreated); - let duration = Math.round((dateEnd.getTime() - dateStart.getTime())/6000)/10 - datasets[0].data.push((duration>0)? duration : 0); + let duration = Math.round((dateEnd.getTime() - dateStart.getTime()) / 6000) / 10 + datasets[0].data.push((duration > 0) ? duration : 0); datasets[1].data.push(tag.nbExe); labels.push(tag.tag); } this.reportStatisticsDurationExecution = { - options : { + options: { responsive: true }, datasets: datasets, diff --git a/src/app/feat-analyse/reportbytag/graph/reportby-other/reportby-other.component.html b/src/app/feat-analyse/reportbytag/graph/reportby-other/reportby-other.component.html index 1989bd51..7e96baa0 100644 --- a/src/app/feat-analyse/reportbytag/graph/reportby-other/reportby-other.component.html +++ b/src/app/feat-analyse/reportbytag/graph/reportby-other/reportby-other.component.html @@ -1,13 +1,30 @@
-

Report by Application Environnment RobotDecli

+

Report by {{chart.name}}

-
+
+ +
+
+
+ {{label}} +
+
+ {{chart.data[i]}}% +
+
+
+
+
{ - console.log("response other :", response); - this.charts = response}); - // this.chart = { - // data: [300, 500, 100, 40, 120], - // legend: false, - // labels: ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'], - // options: { - // title: { - // display: true, - // text: 'lorem ipsum' - // } - // } - // } + this.charts = response + }); } } diff --git a/src/app/feat-analyse/reportbytag/reportbytag.component.html b/src/app/feat-analyse/reportbytag/reportbytag.component.html index 99d23b9d..082f147d 100644 --- a/src/app/feat-analyse/reportbytag/reportbytag.component.html +++ b/src/app/feat-analyse/reportbytag/reportbytag.component.html @@ -54,7 +54,7 @@

{{selectedTag.tag}} execution report

-
+
diff --git a/src/app/feat-analyse/reportbytag/reportbytag.component.ts b/src/app/feat-analyse/reportbytag/reportbytag.component.ts index a1a842f7..c30bcde2 100644 --- a/src/app/feat-analyse/reportbytag/reportbytag.component.ts +++ b/src/app/feat-analyse/reportbytag/reportbytag.component.ts @@ -31,33 +31,8 @@ export class ReportbytagComponent implements OnInit { private showCountriesFilterOptions: boolean; private showTceStatusFilterOptions: boolean; private reportView: boolean = true; + private chartsOther: Array; // DIRTY : need to create custom CSS class for earch TCE Status - private TceStatus_Class: Array = new Array( - { - status: "OK", - class: "success" - }, - { - status: "KO", - class: "danger" - }, - { - status: "FA", - class: "warning" - }, - { - status: "PE", - class: "info" - }, - { - status: "NA", - class: "warning" - }, - { - status: "CA", - class: "light" - } - ); constructor(private http: HttpClient, private ReportingService: ReportingService, @@ -66,43 +41,13 @@ export class ReportbytagComponent implements OnInit { private router: Router, ) { } ngOnInit() { - // this.ReportingService.getTagList(); - // this.ReportingService.observableTagsList.subscribe(response => { - // if (response) { - // this.tagsList = response; - // this.tagsBuffer = this.tagsList.slice(0, this.bufferSize) - // // parse query strings from URL - // this.activatedRoute.queryParams.subscribe(params => { - // var tagFromURL = params['tag']; - // if (tagFromURL) { - // if (this.ReportingService.tagExists(tagFromURL)) { - // this.selectedTag = this.ReportingService.findTag(tagFromURL); - // //console.log("tag :", this.selectedTag); - // this.ReportingService.getTestCaseExecutionByTag(this.selectedTag.tag, response => { - // this.selectedTagData = response; - // }); - - // } - // } - // }); - // } - // }); + this.ReportingService.observableReportOther.subscribe(response => { + this.chartsOther = response; + }); initChartJS(); this.InvariantsService.getCountriesList(); this.InvariantsService.getTceStatus(); - // this.InvariantsService.observableCountriesList.subscribe(response => { - // this.countriesList = response; - // for (var index in this.countriesList) { - // this.selected_countriesList[index] = this.countriesList[index].value; - // } - // }); - // this.InvariantsService.observableTceStatusList.subscribe(response => { - // this.tceStatusList = response; - // for (var index in this.tceStatusList) { - // this.selected_tceStatusList[index] = this.tceStatusList[index].value; - // } - // }); this.filtersShowed = false; } tagSelection(value) { @@ -112,97 +57,4 @@ export class ReportbytagComponent implements OnInit { toggleReportView(view) { this.reportView = view; } - - // onScrollToEnd() { - // this.fetchMore(); - // } - - // selectedTagChange() { - // if (this.selectedTag) { this.router.navigate([], { queryParams: { tag: this.selectedTag.tag } }); } - // else { this.router.navigate([]); } - // } - - // onScroll({ end }) { - // if (this.loading || this.tagsList.length === this.tagsBuffer.length) { return; } - // if (end + this.numberOfItemsFromEndBeforeFetchingMore >= this.tagsBuffer.length) { this.fetchMore(); } - // } - - // private fetchMore() { - // const len = this.tagsBuffer.length; - // const more = this.tagsList.slice(len, this.bufferSize + len); - // this.loading = true; - // // using timeout here to simulate backend API delay - // setTimeout(() => { - // this.loading = false; - // this.tagsBuffer = this.tagsBuffer.concat(more); - // }, 1) - // } - - // clearTag() { - // this.selectedTag = null; - // this.filtersShowed = false; - // this.selectedTagChange(); - // } - - // findStatusClass(status: string) { - // return this.TceStatus_Class.find(tces => tces.status === status).class; - // } - - // // countries global selection functions - // isCountrySelected(country: string): boolean { - // return this.selected_countriesList.filter(c => c === country).length > 0; - // } - // selectAllCountries() { - // for (var index in this.countriesList) { - // this.selected_countriesList[index] = this.countriesList[index].value; - // } - // } - // UnselectAllCountries() { - // this.selected_countriesList = []; - // } - // updateCountriesList($event, country: string) { - // if (!$event.target.checked) { - // // unchek : the country is removed - // var index = this.selected_countriesList.indexOf(country); - // this.selected_countriesList.splice(index, 1); - // } else { - // // check : the country is added - // // if it is not already in the array - // if (this.selected_countriesList.indexOf(country) == -1) { - // this.selected_countriesList.push(country); - // } - // } - // } - - // // status global selection functions - // isTCEStatusSelected(tcestatus: string): boolean { - // return this.selected_tceStatusList.filter(s => s === tcestatus).length > 0; - // } - // selectAllTCEStatus() { - // for (var index in this.tceStatusList) { - // this.selected_tceStatusList[index] = this.tceStatusList[index].value; - // } - // } - // UnselectAllTCEStatus() { - // this.selected_tceStatusList = []; - // } - // updateTCEStatusList($event, status: string) { - // if (!$event.target.checked) { - // // unchek : the status is removed - // var index = this.selected_tceStatusList.indexOf(status); - // this.selected_tceStatusList.splice(index, 1); - // } else { - // // check : the status is added - // // if it is not already in the array - // if (this.selected_tceStatusList.indexOf(status) == -1) { - // this.selected_tceStatusList.push(status); - // } - // } - // } - - // mouseEnterCountriesFilter() { this.showCountriesFilterOptions = true; } - // mouseLeaveCountriesFilter() { this.showCountriesFilterOptions = false; } - // mouseEnterTceStatusFilter() { this.showTceStatusFilterOptions = true; } - // mouseLeaveTceStatusFilter() { this.showTceStatusFilterOptions = false; } - }