Add properties color

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,

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

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

@@ -52,7 +52,7 @@
                     </div>
                 </div>
                 <div *ngSwitchCase="'HeatMap'">
-                    <diagram [modelType]="'process-definition'" [processDefinitionId]="'Sales:24:32637'"></diagram>
+                    <diagram [report]="report"></diagram>
                 </div>
                 <div *ngSwitchDefault>
                     <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{report.type}}</span>

ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram-task.component.html

@@ -1,2 +1,3 @@
-<raphael-rect [leftCorner]="rect" [width]="data.width" [height]="data.height" [radius]="radius"></raphael-rect>
+<raphael-rect [leftCorner]="rectLeftCorner" [width]="data.width" [height]="data.height" [radius]="radius" [stroke]="data.stroke" [strokeWidth]="data.strokeWidth"
+              [fillColors]="data.fillColors" [fillOpacity]="data.fillOpacity"></raphael-rect>
 <raphael-text [text]="data.name" [position]="textPosition"></raphael-text>

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)';
     }
 }

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;
+    report: any;
-
-    @Input()
-    processDefinitionId: string;
 
     @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(
-            this.analyticsService.getProcessDefinitionModel(processDefinitionId).subscribe(
+            (res: any) => {
-                (res: any) => {
+                this.diagram = res;
-                    this.diagram = res;
+            },
-                    console.log(res);
+            (err: any) => {
-                },
+                this.onError.emit(err);
-                (err: any) => {
+                console.log(err);
-                    this.onError.emit(err);
+            }
-                    console.log(err);
+        );
-                }
-            );
-        }
     }
 }

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

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)';
+    }
+}

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