diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json index a79ab27e6b..cd639013c7 100644 --- a/demo-shell-ng2/package.json +++ b/demo-shell-ng2/package.json @@ -107,7 +107,7 @@ "license-check-config": { "src": [ "./app/**/*.js", - "!./app/js/xml2json.js" + "!./app/js/*.js" ], "path": "assets/license_header.txt", "blocking": true, diff --git a/ng2-components/ng2-activiti-analytics/index.ts b/ng2-components/ng2-activiti-analytics/index.ts index c7dc7a3ae4..7a96c28b26 100644 --- a/ng2-components/ng2-activiti-analytics/index.ts +++ b/ng2-components/ng2-activiti-analytics/index.ts @@ -28,6 +28,7 @@ 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'; export * from './src/components/analytics.component'; export * from './src/components/analytics-report-list.component'; @@ -47,7 +48,8 @@ export const ANALYTICS_DIRECTIVES: any[] = [ ]; export const ANALYTICS_PROVIDERS: any[] = [ - AnalyticsService + AnalyticsService, + DIAGRAM_PROVIDERS ]; @NgModule({ @@ -60,6 +62,7 @@ export const ANALYTICS_PROVIDERS: any[] = [ ], providers: [ ...ANALYTICS_PROVIDERS, + ...DIAGRAM_PROVIDERS, RaphaelService ], exports: [ @@ -71,7 +74,8 @@ export class AnalyticsModule { return { ngModule: AnalyticsModule, providers: [ - ...ANALYTICS_PROVIDERS + ...ANALYTICS_PROVIDERS, + ...DIAGRAM_PROVIDERS ] }; } 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 8b294e19c5..8be52c6037 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-task.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html index 886c378df5..961479892a 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html @@ -1,2 +1,3 @@ - + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts index 5be4e5fcc7..eff9f54135 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.ts @@ -16,6 +16,7 @@ */ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core'; +import { DiagramColorService } from './services/diagram-color.service'; @Component({ moduleId: module.id, @@ -24,14 +25,6 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor styleUrls: ['./diagram-task.component.css'] }) export class DiagramTaskComponent { - - static CURRENT_COLOR = '#017501'; - static COMPLETED_COLOR = '#2632aa'; - static ACTIVITY_STROKE_COLOR = '#bbbbbb'; - - static TASK_STROKE = '1'; - static TASK_HIGHLIGHT_STROKE = '2'; - @Input() data: any; @@ -42,48 +35,26 @@ export class DiagramTaskComponent { stroke: number; - rect: any; + rectLeftCorner: any; radius: number = 4; textPosition: any; - constructor(public elementRef: ElementRef) {} + constructor(public elementRef: ElementRef, + private diagramColorService: DiagramColorService) {} ngOnInit() { console.log(this.elementRef); - this.rect = {x: this.data.x, y: this.data.y}; + this.data.fillColors = this.diagramColorService.getFillColour(this.data.id); + this.data.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.ACTIVITY_STROKE_COLOR); + this.data.strokeWidth = this.diagramColorService.getBpmnStrokeWidth(this.data); + this.data.fillOpacity = this.diagramColorService.getFillOpacity(); + + this.rectLeftCorner = {x: this.data.x, y: this.data.y}; this.textPosition = {x: this.data.x + ( this.data.width / 2 ), y: this.data.y + ( this.data.height / 2 )}; this.options['id'] = this.data.id; - this.options['stroke'] = this.bpmnGetColor(this.data, DiagramTaskComponent.ACTIVITY_STROKE_COLOR); - this.options['stroke-width'] = this.bpmnGetStrokeWidth(this.data); - this.options['fill'] = this.determineCustomFillColor(this.data); - // rectAttrs['fill-opacity'] = customActivityBackgroundOpacity; - - } - - private bpmnGetColor(data, defaultColor) { - if (data.current) { - return DiagramTaskComponent.CURRENT_COLOR; - } else if (data.completed) { - return DiagramTaskComponent.COMPLETED_COLOR; - } else { - return defaultColor; - } - } - - private bpmnGetStrokeWidth(data) { - if (data.current || data.completed) { - return DiagramTaskComponent.TASK_STROKE; - } else { - return DiagramTaskComponent.TASK_HIGHLIGHT_STROKE; - } - } - - private determineCustomFillColor(data) { - // TODO - return 'hsb(0.1966666666666667, 1, 1)'; } } 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 a182f9eaa5..2a4e480f23 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 @@ -18,6 +18,7 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core'; import { AlfrescoTranslationService } from 'ng2-alfresco-core'; import { AnalyticsService } from '../../services/analytics.service'; +import { DiagramColorService } from './services/diagram-color.service'; @Component({ moduleId: module.id, @@ -26,44 +27,39 @@ import { AnalyticsService } from '../../services/analytics.service'; styleUrls: ['./diagram.component.css'] }) export class DiagramComponent { - @Input() - modelType: string; - - @Input() - processDefinitionId: string; + report: any; @Output() onError = new EventEmitter(); private diagram: any; - private element: ElementRef; + private elementRef: ElementRef; constructor(elementRef: ElementRef, private translate: AlfrescoTranslationService, + private diagramColorService: DiagramColorService, private analyticsService: AnalyticsService) { if (translate) { translate.addTranslationFolder('node_modules/ng2-activiti-analytics/src'); } - this.element = elementRef; + this.elementRef = elementRef; } ngOnInit() { - this.getProcessDefinitionModel(this.processDefinitionId); + this.getProcessDefinitionModel(this.report.processDefinitionId); + this.diagramColorService.setTotalColors(this.report.totalCountsPercentages); } getProcessDefinitionModel(processDefinitionId: string) { - if (this.modelType === 'process-definition') { - this.analyticsService.getProcessDefinitionModel(processDefinitionId).subscribe( - (res: any) => { - this.diagram = res; - console.log(res); - }, - (err: any) => { - this.onError.emit(err); - console.log(err); - } - ); - } + this.analyticsService.getProcessDefinitionModel(processDefinitionId).subscribe( + (res: any) => { + this.diagram = res; + }, + (err: any) => { + this.onError.emit(err); + console.log(err); + } + ); } } diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts index f5688f40fc..ead1b6e4ed 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts @@ -20,6 +20,8 @@ import { DiagramEventComponent } from './diagram-event.component'; import { DiagramTaskComponent } from './diagram-task.component'; import { DiagramSequenceFlowComponent } from './diagram-sequence-flow.component'; +import { DiagramColorService } from './services/diagram-color.service'; + // primitives export * from './diagram.component'; export * from './diagram-event.component'; @@ -32,3 +34,7 @@ export const DIAGRAM_DIRECTIVES: any[] = [ DiagramTaskComponent, DiagramSequenceFlowComponent ]; + +export const DIAGRAM_PROVIDERS: any[] = [ + DiagramColorService +]; diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/services/diagram-color.service.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/services/diagram-color.service.ts new file mode 100644 index 0000000000..3a918d1c54 --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/services/diagram-color.service.ts @@ -0,0 +1,72 @@ +/*! + * @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 { Injectable } from '@angular/core'; + +@Injectable() +export class DiagramColorService { + + static CURRENT_COLOR = '#017501'; + static COMPLETED_COLOR = '#2632aa'; + static ACTIVITY_STROKE_COLOR = '#bbbbbb'; + + static TASK_STROKE = '1'; + static TASK_HIGHLIGHT_STROKE = '2'; + + totalColors: any; + + constructor() { + } + + setTotalColors(totalColors) { + this.totalColors = totalColors; + } + + getFillOpacity(): string { + return '0.6'; + } + + getFillColour(key: string) { + if (this.totalColors.hasOwnProperty(key)) { + let colorPercentage = this.totalColors[key]; + return this.convertColorToHsb(colorPercentage); + } + } + + getBpmnColor(data, defaultColor) { + if (data.current) { + return DiagramColorService.CURRENT_COLOR; + } else if (data.completed) { + return DiagramColorService.COMPLETED_COLOR; + } else { + return defaultColor; + } + } + + getBpmnStrokeWidth(data) { + if (data.current || data.completed) { + return DiagramColorService.TASK_HIGHLIGHT_STROKE; + } else { + return DiagramColorService.TASK_STROKE; + } + } + + convertColorToHsb(colorPercentage: number): string { + let hue = (120.0 - (colorPercentage * 1.2)) / 360.0; + return 'hsb(' + hue + ', 1, 1)'; + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts index 0fbff9cf53..d4b147f914 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts @@ -38,7 +38,16 @@ export class RaphaelRectDirective extends RaphaelBase implements OnInit { radius: number = 0; @Input() - strokeWith: number; + fillColors: any; + + @Input() + stroke: any; + + @Input() + strokeWidth: any; + + @Input() + fillOpacity: any; @Output() onError = new EventEmitter(); @@ -50,7 +59,7 @@ export class RaphaelRectDirective extends RaphaelBase implements OnInit { ngOnInit() { console.log(this.elementRef); - let opts = {'stroke-width': this.strokeWith}; + let opts = {'stroke-width': this.strokeWidth, 'fill': this.fillColors, 'stroke': this.stroke, 'fill-opacity': this.fillOpacity}; this.draw(this.leftCorner, this.width, this.height, this.radius, opts); }