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