mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
54f4a07f53
* ADF-1453: Restructured Activiti Analytics readme * ADF-1453: Restructured Activiti Diagrams readme * ADF-1453: Restructured Activiti Form readme * ADF-1453: Restructured Activiti Process List readme * ADF-1453: Restructured Activiti Task List readme * ADF-1453: Restructured Alfresco Core readme * [ADF-1453] Restructured DataTable readme * [ADF-1453] Restructured Document List readme * [ADF-1453] Restructured Login readme * [ADF-1453] Restructured Alfresco Search readme * [ADF-1453] Restructured Alfresco Social readme * [ADF-1453] Restructured Alfresco Tag readme * [ADF-1453] Restructured Alfresco User Info readme * [ADF-1453] Restructured Alfresco Viewer readme * [ADF-1453] Restructured Alfresco Webscript readme * [ADF-1453] Fixed table display glitch * [ADF-1453] Fixed Markdown lint errors in readme files * [ADF-1453] Adding missing fileUploadDelete event to table in Upload readme * [ADF-1453] Resolved merge conflict with Upload readme * [ADF-1453] Changes from npm run doc
112 lines
2.8 KiB
Markdown
112 lines
2.8 KiB
Markdown
# Activiti Diagrams library
|
|
|
|
Contains the Activiti Diagram component.
|
|
|
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
|
|
<!-- toc -->
|
|
|
|
- [Activiti Diagram Component](#activiti-diagram-component)
|
|
* [Basic Usage](#basic-usage)
|
|
+ [Properties](#properties)
|
|
+ [Events](#events)
|
|
- [Project Information](#project-information)
|
|
* [Prerequisites](#prerequisites)
|
|
* [Install](#install)
|
|
* [Build from sources](#build-from-sources)
|
|
* [NPM scripts](#npm-scripts)
|
|
* [Demo](#demo)
|
|
* [License](#license)
|
|
|
|
<!-- tocstop -->
|
|
|
|
<!-- markdown-toc end -->
|
|
|
|
## Activiti Diagram Component
|
|
|
|
### 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>
|
|
```
|
|
|
|
#### Properties
|
|
|
|
| Name | Type | Description |
|
|
| --- | --- | -- |
|
|
| metricPercentages | any | The array that contains the percentage of time for each element |
|
|
| processInstanceId | any | |
|
|
| metricColor | any | The array that contains the color for each element |
|
|
| metricType | any | The string that specifies the metric type |
|
|
| width | number | |
|
|
| height | number | |
|
|
|
|
#### Events
|
|
|
|
| Name | Description |
|
|
| --- | --- |
|
|
| onSuccess | Raised when the diagrams elements are loaded |
|
|
| onError | Raised when an error occurs during loading |
|
|
|
|
## Project Information
|
|
|
|
### Prerequisites
|
|
|
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
|
necessary configurations, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
|
|
> If you plan to use this component with projects generated by Angular CLI, you can read more in [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
|
|
|
### Install
|
|
|
|
```sh
|
|
npm install ng2-activiti-diagrams
|
|
```
|
|
|
|
### Build from sources
|
|
|
|
You can build the component from sources with the following commands:
|
|
|
|
```sh
|
|
npm install
|
|
npm run build
|
|
```
|
|
|
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
|
> and other quality check tools before performing unit testing.
|
|
|
|
### NPM scripts
|
|
|
|
| Command | Description |
|
|
| --- | --- |
|
|
| npm run build | Build component |
|
|
| npm run test | Run unit tests in the console |
|
|
| npm run test-browser | Run unit tests in the browser
|
|
| npm run coverage | Run unit tests and display code coverage report |
|
|
|
|
### Demo
|
|
|
|
Please check the demo folder for a demo project
|
|
|
|
```sh
|
|
cd demo
|
|
npm install
|
|
npm start
|
|
```
|
|
|
|
### License
|
|
|
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|