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 index e9c271f63f..57d81b1055 100644 --- 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 @@ -4,6 +4,6 @@ - + -
No metric found
\ No newline at end of file +
No metric found
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 index a9e9bf8db0..5d72668327 100644 --- 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 @@ -40,6 +40,8 @@ export class AnalyticsReportHeatMapComponent implements OnInit { metricForm: FormGroup; currentMetric: string; + currentMetricColors: string; + metricType: string; constructor(private translate: AlfrescoTranslationService, private analyticsService: AnalyticsService, @@ -64,11 +66,17 @@ export class AnalyticsReportHeatMapComponent implements OnInit { onMetricChanges(field: any) { if (field.value === 'totalCount') { - this.currentMetric = this.report.totalCountsPercentages; + this.currentMetric = this.report.totalCountValues; + this.currentMetricColors = this.report.totalCountsPercentages; + this.metricType = 'times'; } else if (field.value === 'totalTime') { - this.currentMetric = this.report.totalTimePercentages; + this.currentMetric = this.report.totalTimeValues; + this.currentMetricColors = this.report.totalTimePercentages; + this.metricType = 'hours'; } else if (field.value === 'avgTime') { - this.currentMetric = this.report.avgTimePercentages; + this.currentMetric = this.report.avgTimeValues; + this.currentMetricColors = this.report.avgTimePercentages; + this.metricType = 'hours'; } } diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html index e12b4a1b20..3b0998e7fb 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html +++ b/ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html @@ -2,9 +2,4 @@ [stroke]="options.stroke" [strokeWidth]="options.strokeWidth" [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"> -
-
-
{{data.name}}
- 0 hours -
-
+ diff --git a/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.html b/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.html index 9607de4538..31037bfd34 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.html +++ b/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.html @@ -2,4 +2,5 @@ [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"> - \ No newline at end of file + + diff --git a/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.html b/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.html index b4dddf5c31..61486f216f 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.html +++ b/ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.html @@ -3,4 +3,5 @@ \ No newline at end of file + [fillColor]="signalFillColor"> + diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts index d0c426c9a3..676a6df582 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts +++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts @@ -20,6 +20,7 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core'; import { DiagramsService } from '../services/diagrams.service'; import { DiagramColorService } from '../services/diagram-color.service'; import { RaphaelService } from './raphael/raphael.service'; +import { DiagramModel, DiagramElementModel } from '../models/diagram.model'; @Component({ moduleId: module.id, @@ -33,6 +34,12 @@ export class DiagramComponent { @Input() metricPercentages: any; + @Input() + metricColor: any; + + @Input() + metricType: string = ''; + @Input() width: number = 1000; @@ -45,7 +52,7 @@ export class DiagramComponent { @Output() onError = new EventEmitter(); - private diagram: any; + private diagram: DiagramModel; private elementRef: ElementRef; constructor(elementRef: ElementRef, @@ -65,14 +72,15 @@ export class DiagramComponent { ngOnChanges(changes: SimpleChanges) { this.reset(); - this.diagramColorService.setTotalColors(this.metricPercentages); + this.diagramColorService.setTotalColors(this.metricColor); this.getProcessDefinitionModel(this.processDefinitionId); } getProcessDefinitionModel(processDefinitionId: string) { this.diagramsService.getProcessDefinitionModel(processDefinitionId).subscribe( (res: any) => { - this.diagram = res; + this.diagram = new DiagramModel(res); + this.setMetricValueToDiagramElement(this.diagram, this.metricPercentages, this.metricType); this.onSuccess.emit(res); }, (err: any) => { @@ -82,6 +90,19 @@ export class DiagramComponent { ); } + setMetricValueToDiagramElement(diagram: DiagramModel, metrics: any, metricType: string) { + for (let key in metrics) { + if (metrics.hasOwnProperty(key)) { + let foundElement: DiagramElementModel = diagram.elements.find( + (element: DiagramElementModel) => element.id === key); + if (foundElement) { + foundElement.value = metrics[key]; + foundElement.dataType = metricType; + } + } + } + } + reset() { this.raphaelService.reset(); } diff --git a/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.html b/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.html index e85a6aee8d..d5f271463e 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.html +++ b/ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.html @@ -1,4 +1,5 @@ - \ No newline at end of file + [fillColor]="iconFillColor"> + diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.html b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.html index 50185da5f6..5f87206541 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.html +++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.html @@ -1,2 +1,3 @@ \ No newline at end of file + [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"> + diff --git a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.html b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.html index 1bb93fff2a..73ddeeb3a0 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.html +++ b/ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.html @@ -1,4 +1,5 @@ \ No newline at end of file + [fillColors]="timerOptions.fillColors" [fillOpacity]="timerOptions.fillOpacity"> + diff --git a/ng2-components/ng2-activiti-diagrams/src/components/index.ts b/ng2-components/ng2-activiti-diagrams/src/components/index.ts index b6346365b9..934cc0f7d2 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/index.ts +++ b/ng2-components/ng2-activiti-diagrams/src/components/index.ts @@ -25,6 +25,7 @@ import { DIAGRAM_BOUNDARY_EVENTS_DIRECTIVES } from './boundary-events/index'; import { DIAGRAM_INTERMEDIATE_EVENTS_DIRECTIVES } from './intermediate-catching-events/index'; import { DIAGRAM_STRUCTURAL_DIRECTIVES } from './structural/index'; import { DIAGRAM_SWIMLANES_DIRECTIVES } from './swimlanes/index'; +import { DiagramTooltip } from './tooltip/index'; import { DiagramColorService } from '../services/diagram-color.service'; import { DiagramsService } from '../services/diagrams.service'; @@ -39,6 +40,7 @@ export * from './boundary-events/index'; export * from './intermediate-catching-events/index'; export * from './structural/index'; export * from './swimlanes/index'; +export * from '../models/diagram-metric.model'; export const DIAGRAM_DIRECTIVES: any[] = [ DiagramComponent, @@ -50,7 +52,8 @@ export const DIAGRAM_DIRECTIVES: any[] = [ DIAGRAM_BOUNDARY_EVENTS_DIRECTIVES, DIAGRAM_INTERMEDIATE_EVENTS_DIRECTIVES, DIAGRAM_STRUCTURAL_DIRECTIVES, - DIAGRAM_SWIMLANES_DIRECTIVES + DIAGRAM_SWIMLANES_DIRECTIVES, + DiagramTooltip ]; export const DIAGRAM_PROVIDERS: any[] = [ diff --git a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-circle.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-circle.component.ts index 566ceb0754..2552c03581 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-circle.component.ts +++ b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-circle.component.ts @@ -43,6 +43,9 @@ export class RaphaelCircleDirective extends RaphaelBase implements OnInit { @Input() fillOpacity: any; + @Input() + elementId: string; + @Output() onError = new EventEmitter(); @@ -54,7 +57,8 @@ export class RaphaelCircleDirective extends RaphaelBase implements OnInit { ngOnInit() { console.log(this.elementRef); let opts = {'stroke-width': this.strokeWidth, 'fill': this.fillColors, 'stroke': this.stroke, 'fill-opacity': this.fillOpacity}; - this.draw(this.center, this.radius, opts); + let drawElement = this.draw(this.center, this.radius, opts); + drawElement.node.id = this.elementId; } public draw(center: Point, radius: number, opts: any) { diff --git a/ng2-components/ng2-activiti-diagrams/src/components/activities/tooltip-style.css b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css similarity index 84% rename from ng2-components/ng2-activiti-diagrams/src/components/activities/tooltip-style.css rename to ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css index ec0cf8b717..93868ce92c 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/activities/tooltip-style.css +++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css @@ -11,9 +11,11 @@ background: black; color: white; margin-top: 0px; + margin-bottom: 3px; width:100%; } .mdl-tooltip-body__message { color: black; + text-align: center; } diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html new file mode 100644 index 0000000000..0d2084beba --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html @@ -0,0 +1,6 @@ +
+
+
{{getTooltipHeader(data)}}
+ {{getTooltipMessage(data)}} +
+
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts new file mode 100644 index 0000000000..61b4228d58 --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts @@ -0,0 +1,22 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'diagram-tooltip', + templateUrl: './diagram-tooltip.component.html', + styleUrls: ['./diagram-tooltip-style.css'] +}) +export class DiagramTooltip { + + @Input() + data: any; + + getTooltipHeader(data: any) { + let headerValue = data.name || data.id; + return data.type + ' ' + headerValue; + } + + getTooltipMessage(data: any) { + return (data.value !== undefined && data.value !== null ) ? data.value + ' ' + data.dataType : ''; + } +} diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/index.ts b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/index.ts new file mode 100644 index 0000000000..969117c620 --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/index.ts @@ -0,0 +1,18 @@ +/*! + * @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. + */ + +export * from './diagram-tooltip.component'; diff --git a/ng2-components/ng2-activiti-diagrams/src/models/diagram-metric.model.ts b/ng2-components/ng2-activiti-diagrams/src/models/diagram-metric.model.ts new file mode 100644 index 0000000000..c376485aa7 --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/models/diagram-metric.model.ts @@ -0,0 +1,30 @@ +/*! + * @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. + */ + +export class DiagramMetricModel { + colorDiagramMap: string; + valueDiagramMap: string; + dataType: string; + + constructor(obj?: any) { + if (obj) { + this.colorDiagramMap = obj.colorDiagramMap || ''; + this.valueDiagramMap = obj.valueDiagramMap || ''; + this.dataType = obj.dataType || ''; + } + } +} diff --git a/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts b/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts new file mode 100644 index 0000000000..8507ba48e9 --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts @@ -0,0 +1,126 @@ +/*! + * @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. + */ + +export class DiagramModel { + diagramBeginX: string; + diagramBeginY: string; + diagramHeight: string; + diagramWidth: string; + elements: DiagramElementModel[] = []; + flows: DiagramFlowElementModel[] = []; + + constructor(obj?: any) { + if (obj) { + this.diagramBeginX = obj.diagramBeginX; + this.diagramBeginY = obj.diagramBeginY; + this.diagramHeight = obj.diagramHeight; + this.diagramWidth = obj.diagramWidth; + if (obj.elements) { + obj.elements.forEach((element: DiagramElementModel) => { + this.elements.push(new DiagramElementModel(element)); + }); + } + if (obj.flows) { + obj.flows.forEach((flow: DiagramFlowElementModel) => { + this.flows.push(new DiagramFlowElementModel(flow)); + }); + } + } + } +} + +export class DiagramElementModel { + height: string; + id: string; + name: string; + type: string; + width: string; + value: string; + x: string; + y: string; + properties: DiagramElementPropertyModel[] = []; + dataType: string = ''; + + constructor(obj?: any) { + if (obj) { + this.height = obj.height; + this.id = obj.id; + this.name = obj.name; + this.type = obj.type; + this.width = obj.width; + this.value = obj.value; + this.x = obj.x; + this.y = obj.y; + if (obj.properties) { + obj.properties.forEach((property: DiagramElementPropertyModel) => { + this.properties.push(new DiagramElementPropertyModel(property)); + }); + } + this.dataType = obj.dataType || ''; + } + } +} + +export class DiagramElementPropertyModel { + name: string; + type: string; + value: any; + + constructor(obj?: any) { + if (obj) { + this.name = obj.name; + this.type = obj.type; + this.value = obj.value; + } + } +} + +export class DiagramFlowElementModel { + id: string; + properties: any[] = []; + sourceRef: string; + targetRef: string; + type: string; + waypoints: DiagramWayPointModel[] = []; + + constructor(obj?: any) { + if (obj) { + this.id = obj.id; + this.properties = obj.properties; + this.sourceRef = obj.sourceRef; + this.targetRef = obj.targetRef; + this.type = obj.type; + if (obj.waypoints) { + obj.waypoints.forEach((waypoint: DiagramWayPointModel) => { + this.waypoints.push(new DiagramWayPointModel(waypoint)); + }); + } + } + } +} + +export class DiagramWayPointModel { + x: number; + y: number; + + constructor(obj?: any) { + if (obj) { + this.x = obj.x; + this.y = obj.y; + } + } +}