alfresco-ng2-components/ng2-components/ng2-activiti-analytics

Activiti Analytics Component for Angular 2

Prerequisites

Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration, see this page.

Install

Follow the 3 steps below:

1. Npm

   npm install ng2-activiti-analytics --save
   

2. Html

   Include these dependencies in your index.html page:

   
   <!-- Charts -->
   <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
   <script src="node_modules/raphael/raphael.min.js"></script>
   
   <!-- Moment js -->
   <script src="node_modules/moment/min/moment.min.js"></script>
   
   <!-- Date picker -->
   <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
   <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
   <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
   
   <!-- Google Material Design Lite -->
   <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
   <script src="node_modules/material-design-lite/material.min.js"></script>
   <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
   
   <!-- Polyfill(s) for Safari (pre-10.x) -->
   <script src="node_modules/intl/dist/Intl.min.js"></script>
   <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
   
   <!-- Polyfill(s) for older browsers -->
   <script src="node_modules/core-js/client/shim.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
   <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
   
   <!-- Polyfill(s) for dialogs -->
   <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
   <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
   <style>._dialog_overlay { position: static !important; } </style>
   
   <!-- Modules  -->
   <script src="node_modules/zone.js/dist/zone.js"></script>
   <script src="node_modules/reflect-metadata/Reflect.js"></script>
   <script src="node_modules/systemjs/dist/system.src.js"></script>
   

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

<analytics-report-list></analytics-report-list>

Usage example of this component :

main.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: `
    <div class="page-content">
        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
                <analytics-report-list></analytics-report-list>
            </div>
        </div>
    </div>`
})

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

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

<activiti-analytics [appId]="appId" [reportId]="reportId"></activiti-analytics>

Example of an App that use Activiti Analytics component :

main.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: `
    <div class="page-content">
        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
                <activiti-analytics [appId]="1001" [reportId]="2006"></activiti-analytics>
            </div>
        </div>
    </div>`
})

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

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

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:

npm install
npm run build

Build the files and keep watching for changes

$ npm run build:w

Running unit tests

npm test

Running unit tests in browser

npm test-browser

This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.

Code coverage

npm run coverage

Demo

If you want have a demo of how the component works, please check the demo folder :

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