#1052 - added tooltip component for diagram

ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.html

@@ -4,6 +4,6 @@
         <dropdown-widget [field]="field" [group]="metricForm.controls.metricGroup" [controllerName]="'metric'"
                          (fieldChanged)="onMetricChanges(field)" [showDefaultOption]="false"></dropdown-widget>
     </form>
-    <activiti-diagram *ngIf="currentMetric" [processDefinitionId]="report.processDefinitionId" [metricPercentages]="currentMetric"></activiti-diagram>
+    <activiti-diagram *ngIf="currentMetric" [processDefinitionId]="report.processDefinitionId" [metricPercentages]="currentMetric" [metricColor]="currentMetricColors" [metricType]="metricType"></activiti-diagram>
 </div>
-<div *ngIf="!hasMetric()">No metric found</div>
+<div *ngIf="!hasMetric()">No metric found</div>

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

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"></raphael-rect>
 <raphael-text [text]="data.name" [position]="textPosition"></raphael-text>
-<div class="mdl-tooltip mdl-tooltip--large" [attr.for]="data.id">
+<diagram-tooltip [data]="data"></diagram-tooltip>
-    <div>
-        <h6 class="mdl-tooltip-header__message"><span>{{data.name}}</span></h6>
-        <span class="mdl-tooltip-body__message">0 hours</span>
-    </div>
-</div>

ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.html

@@ -2,4 +2,5 @@
                 [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
 <raphael-circle [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
                 [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
-<diagram-container-icon-event [data]="data" [type]="data.eventDefinition.type" [fillColor]="signalFillColor"></diagram-container-icon-event>
+<diagram-container-icon-event [data]="data" [type]="data.eventDefinition.type" [fillColor]="signalFillColor"></diagram-container-icon-event>
+<diagram-tooltip [data]="data"></diagram-tooltip>

ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.html

@@ -3,4 +3,5 @@
 <raphael-circle [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
                 [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
 <diagram-container-icon-event [data]="data" [type]="data.eventDefinition && data.eventDefinition.type"
-                              [fillColor]="signalFillColor"></diagram-container-icon-event>
+                              [fillColor]="signalFillColor"></diagram-container-icon-event>
+<diagram-tooltip [data]="data"></diagram-tooltip>

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

ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.html

@@ -1,4 +1,5 @@
-<raphael-circle [center]="center" [radius]="options.radius" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
+<raphael-circle [elementId]="data.id" [center]="center" [radius]="options.radius" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
                 [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
 <diagram-container-icon-event [data]="data" [type]="data.eventDefinition && data.eventDefinition.type"
-                              [fillColor]="iconFillColor"></diagram-container-icon-event>
+                              [fillColor]="iconFillColor"></diagram-container-icon-event>
+<diagram-tooltip [data]="data"></diagram-tooltip>

ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.html

@@ -1,2 +1,3 @@
 <raphael-icon-send [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
-                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-send>
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-send>
+<diagram-tooltip [data]="data"></diagram-tooltip>

ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.html

@@ -1,4 +1,5 @@
 <raphael-circle [center]="center" [radius]="circleRadius" [strokeWidth]="circleOptions.strokeWidth" [stroke]="circleOptions.stroke"
                 [fillColors]="circleOptions.fillColors" [fillOpacity]="circleOptions.fillOpacity"></raphael-circle>
 <raphael-icon-timer [position]="position" [stroke]="timerOptions.stroke" [strokeWidth]="timerOptions.strokeWidth"
-                      [fillColors]="timerOptions.fillColors" [fillOpacity]="timerOptions.fillOpacity"></raphael-icon-timer>
+                      [fillColors]="timerOptions.fillColors" [fillOpacity]="timerOptions.fillOpacity"></raphael-icon-timer>
+<diagram-tooltip [data]="data"></diagram-tooltip>

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[] = [

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) {

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

ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html

@@ -0,0 +1,6 @@
+<div class="mdl-tooltip mdl-tooltip--large mdl-tooltip-diagram" [attr.for]="data.id">
+    <div>
+        <div class="mdl-tooltip-header__message"><span>{{getTooltipHeader(data)}}</span></div>
+        <span class="mdl-tooltip-body__message">{{getTooltipMessage(data)}}</span>
+    </div>
+</div>

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

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

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

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