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

Add MultiBarChart

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

@@ -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'
     }]
 };

ng2-components/ng2-activiti-analytics/src/components/analytics.component.html

@@ -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>

ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts

@@ -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();
             });
 

ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts

@@ -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;
+    }
 }

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

@@ -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) {
+            if (xAxisType !== null && xAxisType !== undefined) {
-                return moment(new Date(value)).format('DD');
+                if ('date_day' === xAxisType) {
-            } else if ('date_month' === xAxisType) {
+                    return moment(new Date(value)).format('DD');
-                return moment(new Date(value)).format('MMMM');
+                } else if ('date_month' === xAxisType) {
-            } else if ('date_year' === xAxisType) {
+                    return moment(new Date(value)).format('MMMM');
-                return moment(new Date(value)).format('YYYY');
+                } 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;

ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts

@@ -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));
                     }
                 });