#1175 Separate analytics generator and hide analytics parameters (#1546)

* #1175 Separate analytics generator and hide analytics parameters * Remove unused code fix unit test * Rollback mandatory field (appId) * fix the onChanges problem * #1175 - rebased branch
2025-07-31 17:38:48 +00:00 · 2017-01-27 14:35:28 +00:00
parent b05247dade
commit 537be1e058
15 changed files with 598 additions and 402 deletions
--- a/ng2-components/ng2-activiti-analytics/index.ts
+++ b/ng2-components/ng2-activiti-analytics/index.ts
@@ -22,6 +22,7 @@ import { DiagramsModule } from 'ng2-activiti-diagrams';
 import { AnalyticsReportListComponent } from './src/components/analytics-report-list.component';
 import { AnalyticsReportParametersComponent } from './src/components/analytics-report-parameters.component';
 import { AnalyticsComponent } from './src/components/analytics.component';
+import { AnalyticsGeneratorComponent } from './src/components/analytics-generator.component';
 import { AnalyticsReportHeatMapComponent } from './src/components/analytics-report-heat-map.component';
 import { AnalyticsService } from './src/services/analytics.service';
 import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
@@ -29,6 +30,7 @@ import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
 import { WIDGET_DIRECTIVES } from './src/components/widgets/index';

 export * from './src/components/analytics.component';
+export * from './src/components/analytics-generator.component';
 export * from './src/components/analytics-report-list.component';
 export * from './src/components/analytics-report-parameters.component';
 export * from './src/services/analytics.service';
@@ -38,6 +40,7 @@ export const ANALYTICS_DIRECTIVES: any[] = [
    AnalyticsComponent,
    AnalyticsReportListComponent,
    AnalyticsReportParametersComponent,
+    AnalyticsGeneratorComponent,
    AnalyticsReportHeatMapComponent,
    WIDGET_DIRECTIVES
 ];
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.css
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.css
@@ -0,0 +1,5 @@
+.chart {display: block; width: 100%;}
+
+.analytics-row__entry {
+    cursor: pointer;
+}
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html
@@ -0,0 +1,92 @@
+<div *ngIf="reports">
+    <div *ngFor="let report of reports">
+        <h4>{{report.title}}</h4>
+        <div [ngSwitch]="report.type">
+            <div *ngSwitchCase="'pie'">
+                <div class="col-md-6">
+                    <div *ngIf="!report.hasData()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
+                    <div *ngIf="report.hasData()">
+                        <div *ngIf="report.hasZeroValues()">{{'ANALYTICS.MESSAGES.ZERO-DATA-FOUND' | translate}}</div>
+                        <base-chart *ngIf="!report.hasZeroValues()" class="chart"
+                                    [data]="report.data"
+                                    [labels]="report.labels"
+                                    [chartType]="report.type"></base-chart>
+                    </div>
+                </div>
+            </div>
+            <div *ngSwitchCase="'table'">
+                <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
+                <div [attr.id]="'chart-table-' + report.id" *ngIf="report.hasDatasets()">
+                    <table class="table table-responsive table-condensed" style="width: 100%">
+                        <tr>
+                            <th *ngFor="let label of report.labels">{{label | translate}}</th>
+                        </tr>
+                        <tr *ngFor="let rows of report.datasets" style="text-align: center;">
+                            <td *ngFor="let row of rows">{{row | translate }}</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            <div *ngSwitchCase="'masterDetailTable'">
+                <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
+                <div [attr.id]="'chart-master-detail-table-' + report.id" *ngIf="report.hasDatasets()">
+                    <table class="table table-responsive table-condensed" style="width: 100%">
+                        <tr>
+                            <th *ngFor="let label of report.labels">{{label | translate}}</th>
+                        </tr>
+                        <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>
+                </div>
+            </div>
+            <div *ngSwitchCase="'bar'">
+                <div class="col-md-6">
+                    <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
+                    <base-chart *ngIf="report.hasDatasets()" class="chart"
+                                [datasets]="report.datasets"
+                                [labels]="report.labels"
+                                [options]="report.options"
+                                [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>
+                    <div *ngIf="report.hasDatasets()">
+                        <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 class="chart"
+                                    [datasets]="report.datasets"
+                                    [labels]="report.labels"
+                                    [options]="report.options"
+                                    [chartType]="'bar'"></base-chart>
+                    </div>
+                </div>
+            </div>
+            <div *ngSwitchCase="'HeatMap'">
+                <analytics-report-heat-map [report]="report"></analytics-report-heat-map>
+            </div>
+            <div *ngSwitchDefault>
+                <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{report.type}}</span>
+            </div>
+        </div>
+    </div>
+</div>
+<br><br><br>
+<div *ngIf="!reports">{{'ANALYTICS.MESSAGES.FILL-PARAMETER' | translate}}</div>
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts
@@ -0,0 +1,230 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { Observable } from 'rxjs/Rx';
+import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
+import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { DiagramsModule } from 'ng2-activiti-diagrams';
+
+import { AnalyticsReportListComponent } from '../components/analytics-report-list.component';
+import { AnalyticsGeneratorComponent } from '../components/analytics-generator.component';
+import { AnalyticsReportParametersComponent } from '../components/analytics-report-parameters.component';
+import { AnalyticsReportHeatMapComponent } from '../components/analytics-report-heat-map.component';
+import { WIDGET_DIRECTIVES } from '../components/widgets/index';
+import { Chart } from '../models/chart.model';
+import { AnalyticsService } from '../services/analytics.service';
+import { ReportQuery } from '../models/report.model';
+import * as analyticMock from '../assets/analyticsComponent.mock';
+
+export const ANALYTICS_DIRECTIVES: any[] = [
+    AnalyticsGeneratorComponent,
+    AnalyticsReportParametersComponent,
+    AnalyticsReportListComponent,
+    AnalyticsReportHeatMapComponent,
+    WIDGET_DIRECTIVES
+];
+export const ANALYTICS_PROVIDERS: any[] = [
+    AnalyticsService
+];
+
+declare let jasmine: any;
+declare let mdDateTimePicker: any;
+
+describe('AnalyticsGeneratorComponent', () => {
+
+    let component: any;
+    let fixture: ComponentFixture<AnalyticsGeneratorComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    let componentHandler: any;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot(),
+                DiagramsModule.forRoot()
+            ],
+            declarations: [
+                ...ANALYTICS_DIRECTIVES,
+                ...CHART_DIRECTIVES
+            ],
+            providers: [
+                ...ANALYTICS_PROVIDERS
+            ]
+        }).compileComponents();
+
+        let translateService = TestBed.get(AlfrescoTranslationService);
+        spyOn(translateService, 'addTranslationFolder').and.stub();
+        spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AnalyticsGeneratorComponent);
+        component = fixture.componentInstance;
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        fixture.detectChanges();
+        componentHandler = jasmine.createSpyObj('componentHandler', [
+            'upgradeAllRegistered'
+        ]);
+        window['componentHandler'] = componentHandler;
+    });
+
+    describe('Rendering tests', () => {
+        beforeEach(() => {
+            jasmine.Ajax.install();
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('Should render the Process definition overview report ', (done) => {
+            component.onSuccess.subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(res.length).toEqual(3);
+
+                expect(res[0]).toBeDefined();
+                expect(res[0].type).toEqual('table');
+                expect(res[0].datasets).toBeDefined();
+                expect(res[0].datasets.length).toEqual(4);
+                expect(res[0].datasets[0][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS');
+                expect(res[0].datasets[0][1]).toEqual('9');
+                expect(res[0].datasets[1][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES');
+                expect(res[0].datasets[1][1]).toEqual('41');
+                expect(res[0].datasets[2][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES');
+                expect(res[0].datasets[2][1]).toEqual('3');
+                expect(res[0].datasets[3][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES');
+                expect(res[0].datasets[3][1]).toEqual('38');
+
+                expect(res[1]).toBeDefined();
+                expect(res[1].type).toEqual('pie');
+
+                expect(res[2]).toBeDefined();
+                expect(res[2].type).toEqual('table');
+
+                done();
+            });
+
+            let reportId = 1001;
+            let reportParamQuery = new ReportQuery({status: 'All'});
+
+            component.generateReport(reportId, reportParamQuery);
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: analyticMock.chartProcessDefOverview
+            });
+        });
+
+        it('Should render the Task overview report ', (done) => {
+            component.onSuccess.subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(res.length).toEqual(3);
+
+                expect(res[0]).toBeDefined();
+                expect(res[0].type).toEqual('bar');
+                expect(res[0].labels).toBeDefined();
+                expect(res[0].labels.length).toEqual(2);
+                expect(res[0].labels[0]).toEqual('2016-09-30T00:00:00.000+0000');
+                expect(res[0].labels[1]).toEqual('2016-10-04T00:00:00.000+0000');
+                expect(res[0].datasets[0].label).toEqual('series1');
+                expect(res[0].datasets[0].data[0]).toEqual(3);
+                expect(res[0].datasets[0].data[1]).toEqual(1);
+
+                expect(res[1]).toBeDefined();
+                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');
+                expect(res[1].datasets[0][1]).toEqual('1');
+                expect(res[1].datasets[0][2]).toEqual('2.0');
+                expect(res[1].datasets[0][3]).toEqual('3.0');
+                expect(res[1].datasets[0][4]).toEqual('4.0');
+                expect(res[1].datasets[0][5]).toEqual('5.0');
+                expect(res[1].datasets[0][6]).toEqual('6.0');
+                expect(res[1].datasets[1][0]).toEqual('fake 2 user task');
+                expect(res[1].datasets[1][1]).toEqual('1');
+                expect(res[1].datasets[1][2]).toEqual('2.0');
+                expect(res[1].datasets[1][3]).toEqual('3.0');
+                expect(res[1].datasets[1][4]).toEqual('4.0');
+                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();
+            });
+
+            let reportParamQuery = new ReportQuery({status: 'All'});
+            component.reportId = 1;
+            component.generateReport(reportParamQuery);
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: analyticMock.chartTaskOverview
+            });
+        });
+
+        it('Should reset the reports when the onChanged is call', () => {
+            component.reports = [ new Chart({id: 'fake', type: 'fake-type'})];
+            component.reportId = 1;
+            component.ngOnChanges();
+            expect(component.reports).toBeUndefined();
+        });
+
+        it('Should emit onError event with a 404 response ', (done) => {
+            component.onError.subscribe((err) => {
+                expect(err).toBeDefined();
+                done();
+            });
+
+            let reportParamQuery = new ReportQuery({status: 'All'});
+            component.reportId = 1;
+            component.generateReport(reportParamQuery);
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 404,
+                contentType: 'json',
+                responseText: []
+            });
+        });
+    });
+});
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts
@@ -0,0 +1,119 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, EventEmitter, OnChanges, Input, Output, SimpleChanges } from '@angular/core';
+import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
+import { AnalyticsService } from '../services/analytics.service';
+import { ReportQuery } from '../models/report.model';
+import { Chart } from '../models/chart.model';
+
+@Component({
+    moduleId: module.id,
+    selector: 'activiti-analytics-generator',
+    templateUrl: './analytics-generator.component.html',
+    styleUrls: ['./analytics-generator.component.css']
+})
+export class AnalyticsGeneratorComponent implements OnChanges {
+
+    @Input()
+    reportId: number;
+
+    @Input()
+    reportParamQuery: ReportQuery = undefined;
+
+    @Output()
+    onSuccess = new EventEmitter();
+
+    @Output()
+    onError = new EventEmitter();
+
+    reports: Chart[];
+
+    showDetails: boolean = false;
+
+    public barChartOptions: any = {
+        responsive: true,
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero: true,
+                    stepSize: 1
+                }
+            }],
+            xAxes: [{
+                ticks: {
+                },
+                stacked: true
+            }]
+        }
+    };
+
+    constructor(private translateService: AlfrescoTranslationService,
+                private analyticsService: AnalyticsService,
+                private logService: LogService) {
+        logService.info('AnalyticsGeneratorComponent');
+        if (translateService) {
+            translateService.addTranslationFolder('ng2-activiti-analytics', 'node_modules/ng2-activiti-analytics/src');
+        }
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (this.reportId && this.reportParamQuery) {
+            this.generateReport(this.reportId, this.reportParamQuery);
+        } else {
+            this.reset();
+        }
+    }
+
+    public generateReport(reportId, reportParamQuery) {
+        this.analyticsService.getReportsByParams(reportId, reportParamQuery).subscribe(
+            (res: Chart[]) => {
+                this.reports = res;
+                this.onSuccess.emit(res);
+            },
+            (err: any) => {
+                this.onError.emit(err);
+                this.logService.error(err);
+            }
+        );
+    }
+
+    public reset() {
+        if (this.reports) {
+            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;
+    }
+
+    toggleDetailsTable() {
+        this.showDetails = !this.showDetails;
+    }
+
+    isShowDetails(): boolean {
+        return this.showDetails;
+    }
+}
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css
@@ -48,3 +48,18 @@
 .icon-small:hover .material-icons {
    display: block;
 }
+
+.is-hide {
+    height: 0px;
+    overflow: hidden;
+    transition: height 0.5s;
+}
+
+.report-container {
+    border: solid 1px rgb(212, 212, 212);
+    padding: 10px 10px 10px 10px;
+}
+
+.report-container-setting {
+    padding-left: 10px;
+}
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html
@@ -1,4 +1,11 @@
-<div class="col-md-6">
+<div class="report-container">
+    <a class="mdl-navigation__link setting-button" data-automation-id="settings">
+        <button (click)="toggleParameters()" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+            <i class="material-icons">settings</i>
+        </button>
+        <span class="report-container-setting">{{'ANALYTICS.MESSAGES.SETTING-TITLE' | translate}}</span>
+    </a>
+    <div class="col-md-6" [class.is-hide]="isParametersHide()" >
        <div *ngIf="reportParameters">
            <form [formGroup]="reportForm" novalidate>
            <div *ngIf="isEditable">
@@ -73,3 +80,4 @@
            </form>
        </div>
    </div>
+</div>
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts
@@ -395,10 +395,10 @@ describe('AnalyticsReportParametersComponent', () => {
                responseText: []
            });
        });
-    });

        it('Should convert a string in number', () => {
            let numberConvert = component.convertNumber('2');
            expect(numberConvert).toEqual(2);
        });
    });
+});
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
@@ -15,12 +15,27 @@
 * limitations under the License.
 */

-import { Component, EventEmitter, OnInit, OnChanges, Input, Output, SimpleChanges, OnDestroy, AfterViewChecked } from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    OnInit,
+    OnChanges,
+    Input,
+    Output,
+    SimpleChanges,
+    OnDestroy,
+    AfterViewChecked
+} from '@angular/core';
 import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
 import * as moment from 'moment';
 import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
 import { AnalyticsService } from '../services/analytics.service';
-import { ReportParametersModel, ReportQuery, ParameterValueModel, ReportParameterDetailsModel } from '../models/report.model';
+import {
+    ReportParametersModel,
+    ReportQuery,
+    ParameterValueModel,
+    ReportParameterDetailsModel
+} from '../models/report.model';

 declare var componentHandler;

@@ -69,6 +84,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
    private reportParamsSub;
    private paramOpts;
    private isEditable: boolean = false;
+    private hideParameters: boolean = true;

    constructor(private translateService: AlfrescoTranslationService,
                private analyticsService: AnalyticsService,
@@ -246,4 +262,12 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
            componentHandler.upgradeAllRegistered();
        }
    }
+
+    toggleParameters() {
+        this.hideParameters = !this.hideParameters;
+    }
+
+    isParametersHide() {
+        return this.hideParameters;
+    }
 }
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.css
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.css
@@ -1,29 +1 @@
 .chart {display: block; width: 100%;}
-
-.dropdown-widget {
-    width: 100%;
-}
-
-.dropdown-widget__select {
-    width: 100%;
-}
-
-.dropdown-widget__invalid .dropdown-widget__select {
-    border-color: #d50000;
-}
-
-.dropdown-widget__invalid .dropdown-widget__label {
-    color: #d50000;
-}
-
-.dropdown-widget__invalid .dropdown-widget__label:after {
-    background-color: #d50000;
-}
-
-.dropdown-widget__invalid .mdl-textfield__error {
-    visibility: visible !important;
-}
-
-.analytics-row__entry {
-    cursor: pointer;
-}
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
@@ -5,96 +5,8 @@
                                 (onEdit)="onEditReport($event)">
    </analytics-report-parameters>

-    <div *ngIf="reports">
-        <div *ngFor="let report of reports">
-            <h4>{{report.title}}</h4>
-            <div [ngSwitch]="report.type">
-                <div *ngSwitchCase="'pie'">
-                    <div class="col-md-6">
-                        <div *ngIf="!report.hasData()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
-                        <div *ngIf="report.hasData()">
-                            <div *ngIf="report.hasZeroValues()">{{'ANALYTICS.MESSAGES.ZERO-DATA-FOUND' | translate}}</div>
-                            <base-chart *ngIf="!report.hasZeroValues()" class="chart"
-                                        [data]="report.data"
-                                        [labels]="report.labels"
-                                        [chartType]="report.type"></base-chart>
-                        </div>
-                    </div>
-                </div>
-                <div *ngSwitchCase="'table'">
-                    <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
-                    <div [attr.id]="'chart-table-' + report.id" *ngIf="report.hasDatasets()">
-                        <table class="table table-responsive table-condensed" style="width: 100%">
-                            <tr>
-                                <th *ngFor="let label of report.labels">{{label | translate}}</th>
-                            </tr>
-                            <tr *ngFor="let rows of report.datasets" style="text-align: center;">
-                                <td *ngFor="let row of rows">{{row | translate }}</td>
-                            </tr>
-                        </table>
-                    </div>
-                </div>
-                <div *ngSwitchCase="'masterDetailTable'">
-                    <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
-                    <div [attr.id]="'chart-master-detail-table-' + report.id" *ngIf="report.hasDatasets()">
-                        <table class="table table-responsive table-condensed" style="width: 100%">
-                            <tr>
-                                <th *ngFor="let label of report.labels">{{label | translate}}</th>
-                            </tr>
-                            <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>
-                    </div>
-                </div>
-                <div *ngSwitchCase="'bar'">
-                    <div class="col-md-6">
-                        <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
-                        <base-chart *ngIf="report.hasDatasets()" class="chart"
-                                    [datasets]="report.datasets"
-                                    [labels]="report.labels"
-                                    [options]="report.options"
-                                    [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>
-                        <div *ngIf="report.hasDatasets()">
-                            <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 class="chart"
-                                        [datasets]="report.datasets"
-                                        [labels]="report.labels"
-                                        [options]="report.options"
-                                        [chartType]="'bar'"></base-chart>
-                        </div>
-                    </div>
-                </div>
-                <div *ngSwitchCase="'HeatMap'">
-                    <analytics-report-heat-map [report]="report"></analytics-report-heat-map>
-                </div>
-                <div *ngSwitchDefault>
-                    <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{report.type}}</span>
-                </div>
-            </div>
-        </div>
-    </div>
-    <br><br><br>
-    <div *ngIf="!reports">{{'ANALYTICS.MESSAGES.FILL-PARAMETER' | translate}}</div>
+    <activiti-analytics-generator [reportId]="reportId"
+                                  [reportParamQuery]="reportParamQuery"
+                                  #analyticsgenerator>
+    </activiti-analytics-generator>
 </div>
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts
@@ -16,7 +16,7 @@
 */

 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { DebugElement, SimpleChange } from '@angular/core';
+import { DebugElement } from '@angular/core';
 import { Observable } from 'rxjs/Rx';
 import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
 import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
@@ -24,16 +24,15 @@ import { DiagramsModule } from 'ng2-activiti-diagrams';

 import { AnalyticsReportListComponent } from '../components/analytics-report-list.component';
 import { AnalyticsComponent } from '../components/analytics.component';
+import { AnalyticsGeneratorComponent } from '../components/analytics-generator.component';
 import { AnalyticsReportParametersComponent } from '../components/analytics-report-parameters.component';
 import { AnalyticsReportHeatMapComponent } from '../components/analytics-report-heat-map.component';
 import { WIDGET_DIRECTIVES } from '../components/widgets/index';
-import { Chart } from '../models/chart.model';
 import { AnalyticsService } from '../services/analytics.service';
-import { ReportQuery } from '../models/report.model';
-import * as analyticMock from '../assets/analyticsComponent.mock';

 export const ANALYTICS_DIRECTIVES: any[] = [
    AnalyticsComponent,
+    AnalyticsGeneratorComponent,
    AnalyticsReportParametersComponent,
    AnalyticsReportListComponent,
    AnalyticsReportHeatMapComponent,
@@ -96,136 +95,5 @@ describe('AnalyticsComponent', () => {
            jasmine.Ajax.uninstall();
        });

-        it('Should render the Process definition overview report ', (done) => {
-            component.onSuccess.subscribe((res) => {
-                expect(res).toBeDefined();
-                expect(res.length).toEqual(3);
-
-                expect(res[0]).toBeDefined();
-                expect(res[0].type).toEqual('table');
-                expect(res[0].datasets).toBeDefined();
-                expect(res[0].datasets.length).toEqual(4);
-                expect(res[0].datasets[0][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS');
-                expect(res[0].datasets[0][1]).toEqual('9');
-                expect(res[0].datasets[1][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES');
-                expect(res[0].datasets[1][1]).toEqual('41');
-                expect(res[0].datasets[2][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES');
-                expect(res[0].datasets[2][1]).toEqual('3');
-                expect(res[0].datasets[3][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES');
-                expect(res[0].datasets[3][1]).toEqual('38');
-
-                expect(res[1]).toBeDefined();
-                expect(res[1].type).toEqual('pie');
-
-                expect(res[2]).toBeDefined();
-                expect(res[2].type).toEqual('table');
-
-                done();
-            });
-
-            let reportParamQuery = new ReportQuery({status: 'All'});
-            component.appId = 1;
-            component.reportId = 1001;
-            component.showReport(reportParamQuery);
-
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'json',
-                responseText: analyticMock.chartProcessDefOverview
-            });
-        });
-
-        it('Should render the Task overview report ', (done) => {
-            component.onSuccess.subscribe((res) => {
-                expect(res).toBeDefined();
-                expect(res.length).toEqual(3);
-
-                expect(res[0]).toBeDefined();
-                expect(res[0].type).toEqual('bar');
-                expect(res[0].labels).toBeDefined();
-                expect(res[0].labels.length).toEqual(2);
-                expect(res[0].labels[0]).toEqual('2016-09-30T00:00:00.000+0000');
-                expect(res[0].labels[1]).toEqual('2016-10-04T00:00:00.000+0000');
-                expect(res[0].datasets[0].label).toEqual('series1');
-                expect(res[0].datasets[0].data[0]).toEqual(3);
-                expect(res[0].datasets[0].data[1]).toEqual(1);
-
-                expect(res[1]).toBeDefined();
-                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');
-                expect(res[1].datasets[0][1]).toEqual('1');
-                expect(res[1].datasets[0][2]).toEqual('2.0');
-                expect(res[1].datasets[0][3]).toEqual('3.0');
-                expect(res[1].datasets[0][4]).toEqual('4.0');
-                expect(res[1].datasets[0][5]).toEqual('5.0');
-                expect(res[1].datasets[0][6]).toEqual('6.0');
-                expect(res[1].datasets[1][0]).toEqual('fake 2 user task');
-                expect(res[1].datasets[1][1]).toEqual('1');
-                expect(res[1].datasets[1][2]).toEqual('2.0');
-                expect(res[1].datasets[1][3]).toEqual('3.0');
-                expect(res[1].datasets[1][4]).toEqual('4.0');
-                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();
-            });
-
-            let reportParamQuery = new ReportQuery({status: 'All'});
-            component.reportId = 1;
-            component.showReport(reportParamQuery);
-
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'json',
-                responseText: analyticMock.chartTaskOverview
-            });
-        });
-
-        it('Should reset the reports when the onChanged is call', () => {
-            let reportId = 1;
-            component.reports = [ new Chart({id: 'fake', type: 'fake-type'})];
-            let change = new SimpleChange(null, reportId);
-            component.ngOnChanges({ 'reportId': change });
-            expect(component.reports).toBeUndefined();
-        });
-
-        it('Should emit onError event with a 404 response ', (done) => {
-            component.onError.subscribe((err) => {
-                expect(err).toBeDefined();
-                done();
-            });
-
-            let reportParamQuery = new ReportQuery({status: 'All'});
-            component.reportId = 1;
-            component.showReport(reportParamQuery);
-
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 404,
-                contentType: 'json',
-                responseText: []
-            });
-        });
    });
 });
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
@@ -15,11 +15,11 @@
 * limitations under the License.
 */

-import { Component, EventEmitter, OnChanges, Input, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, OnChanges, Input, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
 import { AnalyticsService } from '../services/analytics.service';
 import { ReportQuery } from '../models/report.model';
-import { Chart } from '../models/chart.model';
+import { AnalyticsGeneratorComponent } from './analytics-generator.component';

@Component({
    moduleId: module.id,
@@ -30,7 +30,7 @@ import { Chart } from '../models/chart.model';
 export class AnalyticsComponent implements OnChanges {

    @Input()
-    appId: string;
+    appId: number;

    @Input()
    reportId: number;
@@ -38,37 +38,13 @@ export class AnalyticsComponent implements OnChanges {
    @Input()
    debug: boolean = false;

-    @Output()
-    onSuccess = new EventEmitter();
-
    @Output()
    editReport = new EventEmitter();

-    @Output()
-    onError = new EventEmitter();
+    @ViewChild('analyticsgenerator')
+    analyticsgenerator: AnalyticsGeneratorComponent;

-    reportParamQuery = new ReportQuery();
-
-    reports: Chart[];
-
-    showDetails: boolean = false;
-
-    public barChartOptions: any = {
-        responsive: true,
-        scales: {
-            yAxes: [{
-                ticks: {
-                    beginAtZero: true,
-                    stepSize: 1
-                }
-            }],
-            xAxes: [{
-                ticks: {
-                },
-                stacked: true
-            }]
-        }
-    };
+    reportParamQuery: ReportQuery;

    constructor(private translateService: AlfrescoTranslationService,
                private analyticsService: AnalyticsService,
@@ -80,49 +56,19 @@ export class AnalyticsComponent implements OnChanges {
    }

    ngOnChanges(changes: SimpleChanges) {
-        this.reset();
+        this.analyticsgenerator.reset();
    }

    public showReport($event) {
-        this.reportParamQuery = $event;
-        this.analyticsService.getReportsByParams(this.reportId, this.reportParamQuery).subscribe(
-            (res: Chart[]) => {
-                this.reports = res;
-                this.onSuccess.emit(res);
-            },
-            (err: any) => {
-                this.onError.emit(err);
-                this.logService.error(err);
-            }
-        );
+        this.analyticsgenerator.generateReport(this.reportId, $event);
    }

    public reset() {
-        if (this.reports) {
-            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;
+        this.analyticsgenerator.reset();
    }

    public onEditReport(name: string) {
        this.editReport.emit(name);
    }

-    toggleDetailsTable() {
-        this.showDetails = !this.showDetails;
-    }
-
-    isShowDetails(): boolean {
-        return this.showDetails;
-    }
 }
--- a/ng2-components/ng2-activiti-analytics/src/i18n/en.json
+++ b/ng2-components/ng2-activiti-analytics/src/i18n/en.json
@@ -5,7 +5,8 @@
      "UNKNOWN-WIDGET-TYPE": "UNKNOWN WIDGET TYPE",
      "FILL-PARAMETER": "Fill in the parameters to generate your report",
      "NO-DATA-FOUND": "No data found",
-      "ZERO-DATA-FOUND": "There are only zero values"
+      "ZERO-DATA-FOUND": "There are only zero values",
+      "SETTING-TITLE": "Change report setting"
    }
  },
  "__KEY_REPORTING": {
--- a/ng2-components/ng2-activiti-analytics/src/i18n/it.json
+++ b/ng2-components/ng2-activiti-analytics/src/i18n/it.json
@@ -5,7 +5,8 @@
            "UNKNOWN-WIDGET-TYPE": "TIPO WIDGET SCONOSCIUTO",
            "FILL-PARAMETER": "Riempi tutti i campi per generare il report",
            "NO-DATA-FOUND": "Nessun valore trovato",
-            "ZERO-DATA-FOUND": "Ci sono solo valori che valgono zero"
+            "ZERO-DATA-FOUND": "Ci sono solo valori che valgono zero",
+            "SETTING-TITLE": "Modifica i parametri del report"
        }
    },
    "__KEY_REPORTING": {
@@ -24,23 +25,23 @@
                "TYPE-FILTERING": "Include tutti gli steps (Deselezionandolo, rimuoverai gli step come start events, gateways, etc.)?"
            },
            "PROCESS-INSTANCES-OVERVIEW": {
-                "PROCESS-DEFINITION": "Process definition",
+                "PROCESS-DEFINITION": "Definizione del processo",
                "DATE-RANGE": "Intervallo di Date",
                "SLOW-PROC-INST-NUMBER": "Quanti process instances lenti vuoi mostrare?"
            },
            "TASK-OVERVIEW": {
-                "PROCESS-DEFINITION": "Process definition",
+                "PROCESS-DEFINITION": "Definizione del processo",
                "DATE-RANGE": "Intervallo di Date",
                "DATE-RANGE-INTERVAL": "Aggrega date per"
            },
            "TASK-SLA": {
                "TASK": "Task",
-                "PROCESS-DEFINITION": "Process definition",
+                "PROCESS-DEFINITION": "Definizione del processo",
                "DATE-RANGE": "Intervallo di Date",
                "SLA-DURATION": "Qual' é il tempo che questo task necessita per essere completato per rimanere nella SLA?"
            }
        },
-        "PROCESS-STATUS": "Process stato",
-        "TASK-STATUS": "Task stato"
+        "PROCESS-STATUS": "Stato del processo",
+        "TASK-STATUS": "Stato del task"
    }
 }