Detailed Task Statistics - Analytics (#1374)

* #1224 Show the details table

* Fix unit test

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

@@ -23,3 +23,7 @@
 .dropdown-widget__invalid .mdl-textfield__error {
     visibility: visible !important;
 }
+
+.analytics-row__entry {
+    cursor: pointer;
+}

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

@@ -41,7 +41,17 @@
                             <tr>
                                 <th *ngFor="let label of report.labels">{{label | translate}}</th>
                             </tr>
-                            <tr *ngFor="let rows of report.datasets" style="text-align: center;">
+                            <tr *ngFor="let rows of report.datasets" class="analytics-row__entry" style="text-align: center;">
+                                <td *ngFor="let row of rows" (click)="toggleDetailsTable()">{{row | translate }}</td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div [attr.id]="'chart-master-detail-' + report.id" *ngIf="isShowDetails()">
+                        <table class="table table-responsive table-condensed" style="width: 100%">
+                            <tr>
+                                <th *ngFor="let label of report.detailsTable.labels">{{label | translate}}</th>
+                            </tr>
+                            <tr *ngFor="let rows of report.detailsTable.datasets" style="text-align: center;">
                                 <td *ngFor="let row of rows">{{row | translate }}</td>
                             </tr>
                         </table>

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

@@ -151,7 +151,7 @@ describe('AnalyticsComponent', () => {
                 expect(res[0].datasets[0].data[1]).toEqual(1);
 
                 expect(res[1]).toBeDefined();
-                expect(res[1].type).toEqual('table');
+                expect(res[1].type).toEqual('masterDetailTable');
                 expect(res[1].datasets).toBeDefined();
                 expect(res[1].datasets.length).toEqual(2);
                 expect(res[1].datasets[0][0]).toEqual('fake 1 user task');

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

@@ -51,6 +51,8 @@ export class AnalyticsComponent implements OnChanges {
 
     reports: Chart[];
 
+    showDetails: boolean = false;
+
     public barChartOptions: any = {
         responsive: true,
         scales: {
@@ -114,4 +116,12 @@ export class AnalyticsComponent implements OnChanges {
     public onEditReport(name: string) {
         this.editReport.emit(name);
     }
+
+    toggleDetailsTable() {
+        this.showDetails = !this.showDetails;
+    }
+
+    isShowDetails(): boolean {
+        return this.showDetails;
+    }
 }

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

@@ -49,6 +49,9 @@ export class Chart {
             case 'processDefinitionHeatMap':
                 chartType = 'HeatMap';
                 break;
+           case 'masterDetailTable':
+                chartType = 'masterDetailTable';
+                break;
             default:
                 chartType = 'table';
                 break;
@@ -191,6 +194,22 @@ export class TableChart extends Chart {
     }
 }
 
+export class DetailsTableChart extends TableChart {
+    detailsTable: any;
+    showDetails: boolean = false;
+
+    constructor(obj?: any) {
+        super(obj);
+        if (obj.detailTables) {
+            this.detailsTable = new TableChart(obj.detailTables[0]);
+        }
+    }
+
+    hasDetailsTable() {
+        return this.detailsTable ? true : false;
+    }
+}
+
 export class HeatMapChart extends Chart {
     avgTimePercentages: string;
     avgTimeValues: string;

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

@@ -20,7 +20,7 @@ import { Observable } from 'rxjs/Rx';
 import { Response } from '@angular/http';
 import { AlfrescoApiService } from 'ng2-alfresco-core';
 import { ReportParametersModel, ParameterValueModel } from '../models/report.model';
-import { Chart, PieChart, TableChart, BarChart, HeatMapChart, MultiBarChart } from '../models/chart.model';
+import { Chart, PieChart, TableChart, BarChart, HeatMapChart, MultiBarChart, DetailsTableChart } from '../models/chart.model';
 
 @Injectable()
 export class AnalyticsService {
@@ -158,7 +158,7 @@ export class AnalyticsService {
                     } else if (chartData.type === 'processDefinitionHeatMap') {
                         elements.push(new HeatMapChart(chartData));
                     } else if (chartData.type === 'masterDetailTable') {
-                        elements.push(new TableChart(chartData));
+                        elements.push(new DetailsTableChart(chartData));
                     } else if (chartData.type === 'barChart') {
                         elements.push(new BarChart(chartData));
                     } else if (chartData.type === 'multiBarChart') {