Improve Heat map integration

ng2-components/ng2-activiti-analytics/index.ts

@@ -21,14 +21,15 @@ import { CoreModule } from 'ng2-alfresco-core';
 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 { AnalyticsReportHeatMapComponent } from './src/components/analytics-report-heat-map.component';
 import { AnalyticsService } from './src/services/analytics.service';
-import { RaphaelService } from './src/components/raphael/raphael.service';
 import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
 
 import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
 import { RAPHAEL_DIRECTIVES } from './src/components/raphael/index';
 import { DIAGRAM_DIRECTIVES } from './src/components/diagrams/index';
 import { DIAGRAM_PROVIDERS } from './src/components/diagrams/index';
+import { RAPHAEL_PROVIDERS } from './src/components/raphael/index';
 
 export * from './src/components/analytics.component';
 export * from './src/components/analytics-report-list.component';
@@ -42,14 +43,14 @@ export const ANALYTICS_DIRECTIVES: any[] = [
     AnalyticsComponent,
     AnalyticsReportListComponent,
     AnalyticsReportParametersComponent,
+    AnalyticsReportHeatMapComponent,
     WIDGET_DIRECTIVES,
     RAPHAEL_DIRECTIVES,
     DIAGRAM_DIRECTIVES
 ];
 
 export const ANALYTICS_PROVIDERS: any[] = [
-    AnalyticsService,
+    AnalyticsService
-    DIAGRAM_PROVIDERS
 ];
 
 @NgModule({
@@ -63,7 +64,7 @@ export const ANALYTICS_PROVIDERS: any[] = [
     providers: [
         ...ANALYTICS_PROVIDERS,
         ...DIAGRAM_PROVIDERS,
-        RaphaelService
+        ...RAPHAEL_PROVIDERS
     ],
     exports: [
         ...ANALYTICS_DIRECTIVES
@@ -75,7 +76,8 @@ export class AnalyticsModule {
             ngModule: AnalyticsModule,
             providers: [
                 ...ANALYTICS_PROVIDERS,
-                ...DIAGRAM_PROVIDERS
+                ...DIAGRAM_PROVIDERS,
+                ...RAPHAEL_PROVIDERS
             ]
         };
     }

ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.html

@@ -0,0 +1,7 @@
+<h2>Process Heat map</h2>
+<form [formGroup]="metricForm" novalidate>
+    <dropdown-widget [field]="field" [group]="metricForm.controls.metricGroup" [controllerName]="'metric'"
+                     (fieldChanged)="onMetricChanges(field)"></dropdown-widget>
+</form>
+
+<diagram *ngIf="currentMetric" [processDefinitionId]="report.processDefinitionId" [metricPercentages]="currentMetric"></diagram>

ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts

@@ -0,0 +1,83 @@
+/*!
+ * @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, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { AnalyticsService } from '../services/analytics.service';
+import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
+
+@Component({
+    moduleId: module.id,
+    selector: 'analytics-report-heat-map',
+    templateUrl: './analytics-report-heat-map.component.html',
+    styleUrls: ['./analytics-report-heat-map.component.css']
+})
+export class AnalyticsReportHeatMapComponent implements  OnInit {
+
+    @Input()
+    report: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    field: any = {};
+
+    metricForm: FormGroup;
+    currentMetric: any;
+
+    constructor(private translate: AlfrescoTranslationService,
+                private analyticsService: AnalyticsService,
+                private formBuilder: FormBuilder) {
+        if (translate) {
+            translate.addTranslationFolder('node_modules/ng2-activiti-analytics/src');
+        }
+    }
+
+    ngOnInit() {
+        this.initForm();
+        this.field.id = 'metrics';
+
+        this.analyticsService.getMetricValues().subscribe(
+            (opts: any[]) => {
+                this.field.options = opts;
+            },
+            (err: any) => {
+                console.log(err);
+                this.onError.emit(err);
+            }
+        );
+    }
+
+    onMetricChanges(field: any) {
+        if (field.value === 'totalCount') {
+            this.currentMetric = this.report.totalCountsPercentages;
+        } else if (field.value === 'totalTime') {
+            this.currentMetric = this.report.totalTimePercentages;
+        } else if (field.value === 'avgTime') {
+            this.currentMetric = this.report.avgTimePercentages;
+        }
+    }
+
+    initForm() {
+        this.metricForm = this.formBuilder.group({
+            metricGroup: new FormGroup({
+                metric: new FormControl()
+            })
+        });
+    }
+
+}

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

@@ -52,7 +52,7 @@
                     </div>
                 </div>
                 <div *ngSwitchCase="'HeatMap'">
-                    <diagram [report]="report"></diagram>
+                    <analytics-report-heat-map [report]="report"></analytics-report-heat-map>
                 </div>
                 <div *ngSwitchDefault>
                     <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{report.type}}</span>

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

@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { Component, ElementRef, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { AnalyticsService } from '../../services/analytics.service';
 import { DiagramColorService } from './services/diagram-color.service';
+import { RaphaelService } from './../raphael/raphael.service';
 
 @Component({
     moduleId: module.id,
@@ -28,7 +29,16 @@ import { DiagramColorService } from './services/diagram-color.service';
 })
 export class DiagramComponent {
     @Input()
-    report: any;
+    processDefinitionId: any;
+
+    @Input()
+    metricPercentages: any;
+
+    @Input()
+    width: number = 1000;
+
+    @Input()
+    height: number = 500;
 
     @Output()
     onError = new EventEmitter();
@@ -39,6 +49,7 @@ export class DiagramComponent {
     constructor(elementRef: ElementRef,
                 private translate: AlfrescoTranslationService,
                 private diagramColorService: DiagramColorService,
+                private raphaelService: RaphaelService,
                 private analyticsService: AnalyticsService) {
         if (translate) {
             translate.addTranslationFolder('node_modules/ng2-activiti-analytics/src');
@@ -47,8 +58,13 @@ export class DiagramComponent {
     }
 
     ngOnInit() {
-        this.getProcessDefinitionModel(this.report.processDefinitionId);
+        this.raphaelService.setting(this.width, this.height);
-        this.diagramColorService.setTotalColors(this.report.totalCountsPercentages);
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        this.reset();
+        this.diagramColorService.setTotalColors(this.metricPercentages);
+        this.getProcessDefinitionModel(this.processDefinitionId);
     }
 
     getProcessDefinitionModel(processDefinitionId: string) {
@@ -62,4 +78,8 @@ export class DiagramComponent {
             }
         );
     }
+
+    reset() {
+        this.raphaelService.reset();
+    }
 }

ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts

@@ -24,6 +24,9 @@ import { RaphaelPlusDirective } from './raphael-plus.component';
 import { RaphaelRhombusDirective } from './raphael-rhombus.component';
 import { RaphaelPentagonDirective } from './raphael-pentagon.component';
 
+// services
+import { RaphaelService } from './raphael.service';
+
 // icons
 import { RAPHAEL_ICONS_DIRECTIVES } from './icons/index';
 
@@ -49,3 +52,7 @@ export const RAPHAEL_DIRECTIVES: any[] = [
     RaphaelPentagonDirective,
     RAPHAEL_ICONS_DIRECTIVES
 ];
+
+export const RAPHAEL_PROVIDERS: any[] = [
+    RaphaelService
+];

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

@@ -21,6 +21,8 @@ import { Injectable } from '@angular/core';
 export class RaphaelService {
 
     paper: any;
+    width: number = 300;
+    height: number = 400 ;
     private ctx: any;
 
     constructor() {
@@ -43,16 +45,25 @@ export class RaphaelService {
         if (typeof Raphael === 'undefined') {
             throw new Error('ng2-charts configuration issue: Embedding Chart.js lib is mandatory');
         }
-        let paper = new Raphael(ctx, 1000, 500);
+        let paper = new Raphael(ctx, this.width, this.height);
         // paper.setViewBox(0, 0, 583, 344.08374193550003, false);
         // paper.renderfix();
         return paper;
     }
 
-    public ngOnDestroy(): any {
+    private ngOnDestroy(): any {
         if (this.paper) {
             this.paper.clear();
             this.paper = void 0;
         }
     }
+
+    public setting(width: number, height: number): void {
+        this.width = width;
+        this.height = height;
+    }
+
+    public reset(): any {
+        this.ngOnDestroy();
+    }
 }

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

@@ -109,6 +109,19 @@ export class AnalyticsService {
         });
     }
 
+    getMetricValues(): Observable<any> {
+        let paramOptions: ParameterValueModel[] = [];
+
+        paramOptions.push(new ParameterValueModel({id: 'totalCount', name: 'Number of times a step is executed'}));
+        paramOptions.push(new ParameterValueModel({id: 'totalTime', name: 'Total time spent in a process step'}));
+        paramOptions.push(new ParameterValueModel({id: 'avgTime', name: 'Average time spent in a process step'}));
+
+        return Observable.create(observer => {
+            observer.next(paramOptions);
+            observer.complete();
+        });
+    }
+
     getProcessDefinitionsValues(appId: string): Observable<any> {
         let url = `${this.alfrescoSettingsService.getBPMApiBaseUrl()}/app/rest/process-definitions`;
         let params: URLSearchParams;