diff --git a/ng2-components/ng2-activiti-analytics/index.ts b/ng2-components/ng2-activiti-analytics/index.ts index 7a96c28b26..dd371a3c3d 100644 --- a/ng2-components/ng2-activiti-analytics/index.ts +++ b/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, - DIAGRAM_PROVIDERS + AnalyticsService ]; @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 ] }; } diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.html new file mode 100644 index 0000000000..c79fe3a458 --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.html @@ -0,0 +1,7 @@ +

Process Heat map

+
+ +
+ + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts new file mode 100644 index 0000000000..7533d6ce6e --- /dev/null +++ b/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() + }) + }); + } + +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html index 8be52c6037..e12995435e 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html @@ -52,7 +52,7 @@
- +
{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{report.type}} diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.ts index 2a4e480f23..3c5964bfa7 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.ts +++ b/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.diagramColorService.setTotalColors(this.report.totalCountsPercentages); + this.raphaelService.setting(this.width, this.height); + } + + 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(); + } } diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts index 38d5586956..fff8b99a57 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts +++ b/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 +]; diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael.service.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael.service.ts index c948d918e8..44da5c3324 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael.service.ts +++ b/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(); + } } diff --git a/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts b/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts index 500336acc2..fc056d8e07 100644 --- a/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts +++ b/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts @@ -109,6 +109,19 @@ export class AnalyticsService { }); } + getMetricValues(): Observable { + 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 { let url = `${this.alfrescoSettingsService.getBPMApiBaseUrl()}/app/rest/process-definitions`; let params: URLSearchParams;