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

Add properties color

Browse Source
This commit is contained in:
mauriziovitale84
2016-10-20 11:28:05 +01:00
parent 172b5f8f47
commit 7f3754da4f
9 changed files with 125 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell-ng2/package.json
View File

@@ -107,7 +107,7 @@
"license-check-config": {
"src": [
"./app/**/*.js",
"!./app/js/xml2json.js"
"!./app/js/*.js"
],
"path": "assets/license_header.txt",
"blocking": true,

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

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

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

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

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

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

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

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

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

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

6
ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts
View File

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

72
ng2-components/ng2-activiti-analytics/src/components/diagrams/services/diagram-color.service.ts Normal file
View File

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

13
ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-rect.component.ts
View File

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