inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve Heat map integration

Browse Source
This commit is contained in:
mauriziovitale84
2016-10-25 17:27:04 +01:00
parent 7b44819326
commit 75915dc623
8 changed files with 155 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ng2-components/ng2-activiti-analytics/index.ts
View File

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

7
ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.html Normal file
View File

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

83
ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts Normal file
View File

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

2
ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
View File

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

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

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

7
ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts
View File

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

15
ng2-components/ng2-activiti-analytics/src/components/raphael/raphael.service.ts
View File

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

13
ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts
View File

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