Skip to content

Commit

Permalink
#12 Update polar area charts
Browse files Browse the repository at this point in the history 
add legend, change colors, change title, remove white borders
  • Loading branch information
@Anthony-Jhoiro
Anthony-Jhoiro committed Aug 8, 2019
1 parent 67aa2fd commit b6e3f36
Show file tree
Hide file tree
Showing 6 changed files with 87 additions and 208 deletions.
91 changes: 52 additions & 39 deletions src/app/core/services/crud/reporting.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,17 @@ export class ReportingService {
// observables
observableTagsList = new BehaviorSubject<ITag[]>(this.tagsList);

private colors = [
'#0665d0',
'#689550',
'#774aa4',
'#00a680',
'#314499',
'#3b5998',
'#6772e5',
'#dd4b39'
]

constructor(private http: HttpClient) { }

getTagList() {
Expand All @@ -91,9 +102,9 @@ export class ReportingService {
ReadTestCaseExecutionByTag(callback: (any) => any) {
//TODO : Specified type
this.http.get<any>(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<any>(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);
})
Expand Down Expand Up @@ -194,60 +205,62 @@ 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
}
}
}
this.reportOther.push(chart);
}






Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
21 changes: 19 additions & 2 deletions src/app/feat-analyse/reportbytag/graph/reportby-other/reportby-other.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@

<div class="block block-bordered block-rounded">
<div class="block-header block-header-default">
<h3 class="block-title">Report <small>by Application Environnment RobotDecli</small></h3>
<h3 class="block-title">Report <small>by {{chart.name}}</small></h3>
<button type="button" class="btn-block-option" (click)="expand = !expand">
<i class="si" [ngClass]="{'si-arrow-down': !expand, 'si-arrow-up': expand}"></i>
</button>
</div>
<div class="block-content row" *ngIf="expand">
<div class="chart-container" *ngFor="let chart of charts">
<div class="col-md-5">
<!-- <ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let label of chart.labels; let i=index">{{label}}
<span class="badge badge-pill" [style.backgroundColor]="chart.colors[0].backgroundColor[i]">{{chart.data[i]}}%</span>
</li>
</ul> -->
<div class="form-group" *ngFor="let label of chart.labels; let i=index">
<div class="input-group push">
<div class="input-group-prepend">
<span class="input-group-text input-group-text-alt legend-text" [style.backgroundColor]="chart.colors[0].backgroundColor[i]">{{label}}</span>
</div>
<div class="input-group-append legend-value">
<span class="input-group-text input-group-text-alt text-center " [style.color]="chart.colors[0].backgroundColor[i]">{{chart.data[i]}}%</span>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<canvas baseChart
[data]="chart.data"
[labels]="chart.labels"
Expand Down
7 changes: 7 additions & 0 deletions src/app/feat-analyse/reportbytag/graph/reportby-other/reportby-other.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,11 @@
.chart-container {
width: 275px;
display: inline-block;
}
.badge {
color: #fff;
}
.legend-text {
color: #fff;
width: 100% !important;
}
18 changes: 4 additions & 14 deletions src/app/feat-analyse/reportbytag/graph/reportby-other/reportby-other.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import { SingleDataSet, Label } from 'ng2-charts';
import { ChartType, ChartOptions } from 'chart.js';
import { ReportingService } from 'src/app/core/services/crud/reporting.service';
Expand All @@ -11,24 +11,14 @@ import { ReportingService } from 'src/app/core/services/crud/reporting.service';
export class ReportbyOtherComponent implements OnInit {
charts = [];
expand: boolean = true;
@Input() chart: any;

constructor(private reportingService: ReportingService) { }

ngOnInit() {
this.reportingService.observableReportOther.subscribe(response => {
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
});
}

}
2 changes: 1 addition & 1 deletion src/app/feat-analyse/reportbytag/reportbytag.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h3 class="block-title">{{selectedTag.tag}} <small>execution report</small></h3>
<div class="block-content tab-content row push" id="chartsView" *ngIf="reportView">
<div class="col-md-6"><app-reportby-testfolder class="report-charts"></app-reportby-testfolder></div>
<div class="col-md-6"><app-reportby-label class="report-charts"></app-reportby-label></div>
<div class="col-md-6"><app-reportby-other class="report-charts"></app-reportby-other></div>
<div class="col-md-6" *ngFor="let chart of chartsOther"><app-reportby-other [chart]="chart" class="report-charts"></app-reportby-other></div>
<div class="col-md-6"><app-statistic-duration class="report-charts"></app-statistic-duration></div>
<div class="col-md-6"><app-statistic-reliability class="report-charts"></app-statistic-reliability></div>
</div>
Expand Down
Loading

0 comments on commit b6e3f36

Please sign in to comment.