## Prerequisites
@@ -7,98 +38,228 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
## Install
-```sh
-npm install --save ng2-activiti-analytics
-```
+Follow the 3 steps below:
-#### Ng2-Charts
+1. Npm
-```sh
-npm install ng2-charts chart.js --save
-```
+ ```sh
+ npm install ng2-activiti-analytics --save
+ ```
-Also make sure you include these dependencies in your `index.html` file:
+2. Html
-```html
+ Include these dependencies in your index.html page:
+
+ ```html
+
+
-```
+
-#### Moment
-
-```sh
-npm install moment --save
-```
-
-Also make sure you include these dependencies in your `index.html` file:
-
-```html
+
-```
-
-#### Material Design Date picker
-
-```sh
-npm install md-date-time-picker --save
-```
-
-Also make sure you include these dependencies in your `index.html` file:
-
-```html
+
-```
+
+
-#### Material Design Lite
+
+
+
+
-The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
-design dependency to your project:
+
+
+
-```sh
-npm install --save material-design-icons material-design-lite
-```
+
+
+
+
-Also make sure you include these dependencies in your `index.html` file:
+
+
+
+
-```html
-
-
-
-
-```
+
+
+
+
+ ```
+
+3. SystemJs
+
+ Add the following components to your systemjs.config.js file:
+
+ - moment
+ - ng2-charts
+ - ng2-translate
+ - alfresco-js-api
+ - ng2-alfresco-core
+ - ng2-activiti-diagrams
+ - ng2-activiti-analytics
+
+ Please refer to the following example file: [systemjs.config.js](demo/systemjs
+ .config.js) .
## Basic usage example Activiti Analytics List
+
The component shows the list of all the available reports
+
```html
```
+Usage example of this component :
+
+**main.ts**
+```ts
+
+import { NgModule, Component } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { AnalyticsModule } from 'ng2-activiti-analytics';
+
+@Component({
+ selector: 'activiti-analytics-demo',
+ template: `
+
+
+
+
+
+
+
`
+})
+
+export class AnalyticsDemoComponent {
+
+ constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
+ settingsService.bpmHost = 'http://localhost:9999';
+
+ this.authService.login('admin', 'admin').subscribe(
+ ticket => {
+ console.log(ticket);
+ },
+ error => {
+ console.log(error);
+ });
+ }
+}
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ CoreModule.forRoot(),
+ AnalyticsModule
+ ],
+ declarations: [ AnalyticsDemoComponent ],
+ bootstrap: [ AnalyticsDemoComponent ]
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
+```
+
#### Events
-**onSuccess**: The event is emitted when the report list are loaded
-**onError**: The event is emitted when an error occur during the loading
-**reportClick**: The event is emitted when the report in the list is selected
+
+| Name | Description |
+| --- | --- |
+|`onSuccess`| The event is emitted when the report list are loaded |
+|`onError`| The event is emitted when an error occur during the loading |
+|`reportClick`| The event is emitted when the report in the list is selected |
#### Options
+
No options.
## Basic usage example Activiti Analytics
+
The component shows the charts related to the reportId passed as input
+
```html
```
+Example of an App that use Activiti Analytics component :
+
+**main.ts**
+```ts
+
+import { NgModule, Component } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { AnalyticsModule } from 'ng2-activiti-analytics';
+
+@Component({
+ selector: 'activiti-analytics-demo',
+ template: `
+
+
+
+
+
+
+
`
+})
+
+export class AnalyticsDemoComponent {
+
+ constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
+ settingsService.bpmHost = 'http://localhost:9999';
+
+ this.authService.login('admin', 'admin').subscribe(
+ ticket => {
+ console.log(ticket);
+ },
+ error => {
+ console.log(error);
+ });
+ }
+}
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ CoreModule.forRoot(),
+ AnalyticsModule
+ ],
+ declarations: [ AnalyticsDemoComponent ],
+ bootstrap: [ AnalyticsDemoComponent ]
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
+```
+
#### Events
-**onSuccess**: The event is emitted when the report parameters are loaded
-**onError**: The event is emitted when an error occur during the loading
+
+| Name | Description |
+| --- | --- |
+|`onSuccess` | The event is emitted when the report parameters are loaded |
+|`onError` | The event is emitted when an error occur during the loading |
#### Options
-**appId**: The application id
-**reportId**: The report id
-**debug**: Flag to enable or disable the Form values in the console log
+
+| Name | Description |
+| --- | --- |
+|`appId` | The application id |
+|`reportId` | The report id |
+|`debug` | Flag to enable or disable the Form values in the console log |
## Build from sources
Alternatively you can build component from sources with the following commands:
+
```sh
npm install
npm run build
@@ -110,7 +271,7 @@ npm run build
$ npm run build:w
```
-### Running unit tests
+## Running unit tests
```sh
npm test
@@ -130,3 +291,27 @@ before performing unit testing.
```sh
npm run coverage
```
+
+## Demo
+
+If you want have a demo of how the component works, please check the demo folder :
+
+```sh
+cd demo
+npm install
+npm start
+```
+
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| 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 |
+
+## License
+
+[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
diff --git a/ng2-components/ng2-activiti-analytics/demo/index.html b/ng2-components/ng2-activiti-analytics/demo/index.html
index 8d5e80fe31..05273a659d 100644
--- a/ng2-components/ng2-activiti-analytics/demo/index.html
+++ b/ng2-components/ng2-activiti-analytics/demo/index.html
@@ -6,40 +6,54 @@
Alfresco Angular 2 Activiti Analytics - Demo
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
-
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+