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

#1052 - added tooltip component for diagram

Browse Source
This commit is contained in:
Vito Albano
2016-12-05 00:05:30 +00:00
parent 91d9503b37
commit 2deb8092c3
17 changed files with 262 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

14
ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts
View File

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

7
ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html
View File

@@ -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">
<div>
<h6 class="mdl-tooltip-header__message"><span>{{data.name}}</span></h6>
<span class="mdl-tooltip-body__message">0 hours</span>
</div>
</div>
<diagram-tooltip [data]="data"></diagram-tooltip>

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

@@ -3,3 +3,4 @@
<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-tooltip [data]="data"></diagram-tooltip>

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

@@ -4,3 +4,4 @@
[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>
<diagram-tooltip [data]="data"></diagram-tooltip>

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

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

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

@@ -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>
<diagram-tooltip [data]="data"></diagram-tooltip>

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

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

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

@@ -2,3 +2,4 @@
[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>
<diagram-tooltip [data]="data"></diagram-tooltip>

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

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

6
ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-circle.component.ts
View File

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

2
ng2-components/ng2-activiti-diagrams/src/components/activities/tooltip-style.css → ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css
View File

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

6
ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html Normal file
View File

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

22
ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts Normal file
View File

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

18
ng2-components/ng2-activiti-diagrams/src/components/tooltip/index.ts Normal file
View File

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

30
ng2-components/ng2-activiti-diagrams/src/models/diagram-metric.model.ts Normal file
View File

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

126
ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts Normal file
View File

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