inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1005 from Alfresco/dev-mvitale-789-multibarchart

Browse Source 
Add MultiBarChart
This commit is contained in:
Mario Romano 2016-11-04 16:33:29 +00:00 committed by GitHub
commit 56e08a1294
6 changed files with 141 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts
View File

@ -93,5 +93,21 @@ export var chartTaskOverview = {
['fake 1 user task', '1', '2.0', '3.0', '4.0', '5.0', '6.0'],
['fake 2 user task', '1', '2.0', '3.0', '4.0', '5.0', '6.0']
]
}, {
'id': 'id10931125229538',
'type': 'multiBarChart',
'title': 'Task duration',
'titleKey': 'REPORTING.DEFAULT-REPORTS.TASK-OVERVIEW.TASK-DURATIONS-TITLE',
'values': [{
'key': 'averages',
'values': [[1, 0], [2, 5], [3, 2]]
}, {
'key': 'minima',
'values': [[1, 0], [2, 0], [3, 0]]
}, {
'key': 'maxima',
'values': [[1, 0], [2, 29], [3, 29]]
}],
'yAxisType': 'count'
}]
};

17
ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
View File

@ -51,6 +51,23 @@
[chartType]="report.type"></base-chart>
</div>
</div>
<div *ngSwitchCase="'multiBar'">
<div class="col-md-6">
<div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="'stacked-id'">
<input type="checkbox" [attr.id]="'stacked-id'" class="mdl-checkbox__input"
[checked]="report.options.scales.xAxes[0].stacked"
[(ngModel)]="report.options.scales.xAxes[0].stacked"
(change)="refresh(report)">
<span class="mdl-checkbox__label">Stacked</span>
</label>
<base-chart *ngIf="report.hasDatasets()" class="chart"
[datasets]="report.datasets"
[labels]="report.labels"
[options]="report.options"
[chartType]="'bar'"></base-chart>
</div>
</div>
<div *ngSwitchCase="'HeatMap'">
<analytics-report-heat-map [report]="report"></analytics-report-heat-map>
</div>

22
ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts
View File

@ -135,7 +135,7 @@ describe('Test ng2-activiti-analytics Report ', () => {
it('Should render the Task overview report ', (done) => {
component.onSuccess.subscribe((res) => {
expect(res).toBeDefined();
expect(res.length).toEqual(2);
expect(res.length).toEqual(3);
expect(res[0]).toBeDefined();
expect(res[0].type).toEqual('bar');
@ -166,6 +166,26 @@ describe('Test ng2-activiti-analytics Report ', () => {
expect(res[1].datasets[1][5]).toEqual('5.0');
expect(res[1].datasets[1][6]).toEqual('6.0');
expect(res[2]).toBeDefined();
expect(res[2].type).toEqual('multiBar');
expect(res[2].labels).toBeDefined();
expect(res[2].labels.length).toEqual(3);
expect(res[2].labels[0]).toEqual(1);
expect(res[2].labels[1]).toEqual(2);
expect(res[2].labels[2]).toEqual(3);
expect(res[2].datasets[0].label).toEqual('averages');
expect(res[2].datasets[0].data[0]).toEqual(0);
expect(res[2].datasets[0].data[1]).toEqual(5);
expect(res[2].datasets[0].data[2]).toEqual(2);
expect(res[2].datasets[1].label).toEqual('minima');
expect(res[2].datasets[1].data[0]).toEqual(0);
expect(res[2].datasets[1].data[1]).toEqual(0);
expect(res[2].datasets[1].data[2]).toEqual(0);
expect(res[2].datasets[2].label).toEqual('maxima');
expect(res[2].datasets[2].data[0]).toEqual(0);
expect(res[2].datasets[2].data[1]).toEqual(29);
expect(res[2].datasets[2].data[2]).toEqual(29);
done();
});

28
ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
View File

@ -48,6 +48,23 @@ export class AnalyticsComponent implements OnChanges {
reports: any[];
public barChartOptions: any = {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}],
xAxes: [{
ticks: {
},
stacked: true
}]
}
};
constructor(private translate: AlfrescoTranslationService,
private analyticsService: AnalyticsService) {
console.log('AnalyticsComponent');
@ -79,4 +96,15 @@ export class AnalyticsComponent implements OnChanges {
this.reports = undefined;
}
}
public refresh(report): void {
/**
* (My guess), for Angular to recognize the change in the dataset
* it has to change the dataset variable directly,
* so one way around it, is to clone the data, change it and then
* assign it;
*/
let clone = JSON.parse(JSON.stringify(report));
report.datasets = clone.datasets;
}
}

64
ng2-components/ng2-activiti-analytics/src/models/chart.model.ts
View File

@ -41,6 +41,9 @@ export class Chart {
case 'barChart':
chartType = 'bar';
break;
case 'multiBarChart':
chartType = 'multiBar';
break;
case 'processDefinitionHeatMap':
chartType = 'HeatMap';
break;
@ -79,6 +82,7 @@ export class BarChart extends Chart {
xAxisType: string;
yAxisType: string;
options: any = {
responsive: true,
scales: {
yAxes: [{
ticks: {
@ -87,7 +91,9 @@ export class BarChart extends Chart {
}
}],
xAxes: [{
ticks: {}
ticks: {
},
stacked: false
}]
}
};
@ -99,12 +105,15 @@ export class BarChart extends Chart {
this.xAxisType = obj && obj.xAxisType || null;
this.yAxisType = obj && obj.yAxisType || null;
this.options.scales.xAxes[0].ticks.callback = this.xAxisTickFormatFunction(this.xAxisType);
this.options.scales.yAxes[0].ticks.callback = this.yAxisTickFormatFunction(this.yAxisType);
obj.values.forEach((params: any) => {
let dataValue = [];
params.values.forEach((info: any) => {
info.forEach((value: any, index: any) => {
if (index % 2 === 0) {
this.labels.push(value);
if (!this.labels.includes(value)) {
this.labels.push(value);
}
} else {
dataValue.push(value);
}
@ -118,13 +127,30 @@ export class BarChart extends Chart {
xAxisTickFormatFunction = function (xAxisType) {
return function (value) {
if ('date_day' === xAxisType) {
return moment(new Date(value)).format('DD');
} else if ('date_month' === xAxisType) {
return moment(new Date(value)).format('MMMM');
} else if ('date_year' === xAxisType) {
return moment(new Date(value)).format('YYYY');
if (xAxisType !== null && xAxisType !== undefined) {
if ('date_day' === xAxisType) {
return moment(new Date(value)).format('DD');
} else if ('date_month' === xAxisType) {
return moment(new Date(value)).format('MMMM');
} else if ('date_year' === xAxisType) {
return moment(new Date(value)).format('YYYY');
}
}
return value;
};
};
yAxisTickFormatFunction = function (yAxisType) {
return function (value) {
if (yAxisType !== null && yAxisType !== undefined) {
if ('count' === yAxisType) {
let label = '' + value;
if (label.indexOf('.') !== -1) {
return '';
}
}
}
return value;
};
};
@ -133,6 +159,28 @@ export class BarChart extends Chart {
}
}
export class MultiBarChart extends BarChart {
options: any = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}],
xAxes: [{
ticks: {
},
stacked: false
}]
}
};
constructor(obj?: any) {
super(obj);
}
}
export class TableChart extends Chart {
title: string;
titleKey: string;

4
ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts
View File

@ -20,7 +20,7 @@ import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfr
import { Observable } from 'rxjs/Rx';
import { Response, Http, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { ReportParametersModel, ParameterValueModel } from '../models/report.model';
import { Chart, PieChart, TableChart, BarChart, HeatMapChart } from '../models/chart.model';
import { Chart, PieChart, TableChart, BarChart, HeatMapChart, MultiBarChart } from '../models/chart.model';
@Injectable()
export class AnalyticsService {
@ -206,6 +206,8 @@ export class AnalyticsService {
elements.push(new TableChart(chartData));
} else if (chartData.type === 'barChart') {
elements.push(new BarChart(chartData));
} else if (chartData.type === 'multiBarChart') {
elements.push(new MultiBarChart(chartData));
}
});