2021-05-10 10:47:48 +01:00

49 lines
1.3 KiB
Markdown

---
Title: Diagram Component
Added: v2.0.0
Status: Active
---
# [Diagram Component](../../../lib/insights/src/lib/diagram/components/diagram.component.ts "Defined in diagram.component.ts")
Displays process diagrams.
## Basic Usage
This component shows the diagram of a process.
```html
<adf-diagram
[processDefinitionId]="processDefinitionId">
</adf-diagram>
```
The below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending).
```html
<adf-diagram
[processInstanceId]="processInstanceId">
</adf-diagram>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| height | `number` | 500 | height. |
| metricColor | `any` | | metricColor. |
| metricPercentages | `any` | | metricPercentages. |
| metricType | `string` | "" | metricType. |
| processDefinitionId | `any` | | processDefinitionId. |
| processInstanceId | `any` | | processInstanceId. |
| width | `number` | 1000 | width. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | error. |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | success. |