Decouple the analytics component from the diagrams component

demo-shell-ng2/systemjs.config.js

@@ -40,7 +40,8 @@
             'alfresco-js-api': 'npm:alfresco-js-api/dist',
             'ng2-activiti-processlist': 'npm:ng2-activiti-processlist/dist',
             'ng2-alfresco-userinfo': 'npm:ng2-alfresco-userinfo/dist',
-            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist'
+            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist',
+            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams/dist'
         },
         // packages tells the System loader how to load when no filename and/or no extension
         packages: {
@@ -68,7 +69,8 @@
             'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'},
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
             'ng2-alfresco-userinfo': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'}
+            'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'},
+            'ng2-activiti-diagrams': { main: './index.js', defaultExtension: 'js'}
         }
     });
 })(this);

ng2-components/ng2-activiti-analytics/index.ts

@@ -17,6 +17,7 @@
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CoreModule } from 'ng2-alfresco-core';
+import { DiagramsModule } from 'ng2-activiti-diagrams';
 
 import { AnalyticsReportListComponent } from './src/components/analytics-report-list.component';
 import { AnalyticsReportParametersComponent } from './src/components/analytics-report-parameters.component';
@@ -26,27 +27,19 @@ import { AnalyticsService } from './src/services/analytics.service';
 import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
 
 import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
-import { RAPHAEL_DIRECTIVES } from './src/components/raphael/index';
-import { DIAGRAM_DIRECTIVES } from './src/components/diagrams/index';
-import { DIAGRAM_PROVIDERS } from './src/components/diagrams/index';
-import { RAPHAEL_PROVIDERS } from './src/components/raphael/index';
 
 export * from './src/components/analytics.component';
 export * from './src/components/analytics-report-list.component';
 export * from './src/components/analytics-report-parameters.component';
 export * from './src/services/analytics.service';
 export * from './src/components/widgets/index';
-export * from './src/components/raphael/index';
-export * from './src/components/diagrams/index';
 
 export const ANALYTICS_DIRECTIVES: any[] = [
     AnalyticsComponent,
     AnalyticsReportListComponent,
     AnalyticsReportParametersComponent,
     AnalyticsReportHeatMapComponent,
-    WIDGET_DIRECTIVES,
+    WIDGET_DIRECTIVES
-    RAPHAEL_DIRECTIVES,
-    DIAGRAM_DIRECTIVES
 ];
 
 export const ANALYTICS_PROVIDERS: any[] = [
@@ -55,16 +48,15 @@ export const ANALYTICS_PROVIDERS: any[] = [
 
 @NgModule({
     imports: [
-        CoreModule
+        CoreModule,
+        DiagramsModule
     ],
     declarations: [
         ...ANALYTICS_DIRECTIVES,
         ...CHART_DIRECTIVES
     ],
     providers: [
-        ...ANALYTICS_PROVIDERS,
+        ...ANALYTICS_PROVIDERS
-        ...DIAGRAM_PROVIDERS,
-        ...RAPHAEL_PROVIDERS
     ],
     exports: [
         ...ANALYTICS_DIRECTIVES
@@ -75,9 +67,7 @@ export class AnalyticsModule {
         return {
             ngModule: AnalyticsModule,
             providers: [
-                ...ANALYTICS_PROVIDERS,
+                ...ANALYTICS_PROVIDERS
-                ...DIAGRAM_PROVIDERS,
-                ...RAPHAEL_PROVIDERS
             ]
         };
     }

ng2-components/ng2-activiti-analytics/karma-test-shim.js

@@ -58,6 +58,7 @@ var map = {
 
     'alfresco-js-api': 'npm:alfresco-js-api/dist',
     'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist',
+    'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams/dist',
     'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist'
 };
 
@@ -71,6 +72,7 @@ var packages = {
 
     'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
     'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'},
+    'ng2-activiti-diagrams': { main: './index.js', defaultExtension: 'js'},
     'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
 };
 

ng2-components/ng2-activiti-analytics/karma.conf.js

@@ -36,7 +36,6 @@ module.exports = function (config) {
       'node_modules/moment/min/moment.min.js',
       'node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js',
       'node_modules/chart.js/dist/Chart.bundle.min.js',
-      'node_modules/raphael/raphael.min.js',
       {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
 
       'karma-test-shim.js',
@@ -48,6 +47,7 @@ module.exports = function (config) {
 
       // ng2-components
       { pattern: 'node_modules/ng2-alfresco-core/dist/**/*.*', included: false, served: true, watched: false },
+      { pattern: 'node_modules/ng2-activiti-diagrams/dist/**/*.*', included: false, served: true, watched: false },
       { pattern: 'node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false },
       { pattern: 'node_modules/md-date-time-picker/**/*.js', included: false, served: true, watched: false },
       { pattern: 'node_modules/moment/**/*.js', included: false, served: true, watched: false },

ng2-components/ng2-activiti-analytics/package.json

@@ -56,9 +56,9 @@
     "core-js": "^2.4.1",
     "md-date-time-picker": "^2.2.0",
     "ng2-alfresco-core": "0.3.2",
+    "ng2-activiti-diagrams": "0.3.3",
     "ng2-charts": "1.1.0",
     "ng2-translate": "2.5.0",
-    "raphael": "^2.2.6",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.12",
     "systemjs": "0.19.27",

ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.html

@@ -4,6 +4,6 @@
         <dropdown-widget [field]="field" [group]="metricForm.controls.metricGroup" [controllerName]="'metric'"
                          (fieldChanged)="onMetricChanges(field)" [showDefaultOption]="false"></dropdown-widget>
     </form>
-    <diagram *ngIf="currentMetric" [processDefinitionId]="report.processDefinitionId" [metricPercentages]="currentMetric"></diagram>
+    <activiti-diagram *ngIf="currentMetric" [processDefinitionId]="report.processDefinitionId" [metricPercentages]="currentMetric"></activiti-diagram>
 </div>
 <div *ngIf="!hasMetric()">No metric found</div>

ng2-components/ng2-activiti-diagrams/.editorconfig

@@ -0,0 +1,23 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[karma.conf.js]
+indent_style = space
+indent_size = 2
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

ng2-components/ng2-activiti-diagrams/.gitignore

@@ -0,0 +1,15 @@
+npm-debug.log
+node_modules
+.idea
+typings
+coverage
+dist
+src/**/*.js
+src/**/*.js.map
+
+demo/**/*.js
+demo/**/*.js.map
+demo/**/*.d.ts
+index.js
+index.js.map
+!systemjs.config.js

ng2-components/ng2-activiti-diagrams/.npmignore

@@ -0,0 +1,16 @@
+npm-debug.log
+.idea
+
+assets/
+coverage/
+node_modules
+typings/
+fonts/
+
+/.editorconfig
+/.travis.yml
+/*.js
+/*.json
+/*.ts
+/*.js.map
+/.npmignore

ng2-components/ng2-activiti-diagrams/LICENSE

@@ -0,0 +1,177 @@
+
+                              Apache License
+                        Version 2.0, January 2004
+                     http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+   "License" shall mean the terms and conditions for use, reproduction,
+   and distribution as defined by Sections 1 through 9 of this document.
+
+   "Licensor" shall mean the copyright owner or entity authorized by
+   the copyright owner that is granting the License.
+
+   "Legal Entity" shall mean the union of the acting entity and all
+   other entities that control, are controlled by, or are under common
+   control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the
+   direction or management of such entity, whether by contract or
+   otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity.
+
+   "You" (or "Your") shall mean an individual or Legal Entity
+   exercising permissions granted by this License.
+
+   "Source" form shall mean the preferred form for making modifications,
+   including but not limited to software source code, documentation
+   source, and configuration files.
+
+   "Object" form shall mean any form resulting from mechanical
+   transformation or translation of a Source form, including but
+   not limited to compiled object code, generated documentation,
+   and conversions to other media types.
+
+   "Work" shall mean the work of authorship, whether in Source or
+   Object form, made available under the License, as indicated by a
+   copyright notice that is included in or attached to the work
+   (an example is provided in the Appendix below).
+
+   "Derivative Works" shall mean any work, whether in Source or Object
+   form, that is based on (or derived from) the Work and for which the
+   editorial revisions, annotations, elaborations, or other modifications
+   represent, as a whole, an original work of authorship. For the purposes
+   of this License, Derivative Works shall not include works that remain
+   separable from, or merely link (or bind by name) to the interfaces of,
+   the Work and Derivative Works thereof.
+
+   "Contribution" shall mean any work of authorship, including
+   the original version of the Work and any modifications or additions
+   to that Work or Derivative Works thereof, that is intentionally
+   submitted to Licensor for inclusion in the Work by the copyright owner
+   or by an individual or Legal Entity authorized to submit on behalf of
+   the copyright owner. For the purposes of this definition, "submitted"
+   means any form of electronic, verbal, or written communication sent
+   to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems,
+   and issue tracking systems that are managed by, or on behalf of, the
+   Licensor for the purpose of discussing and improving the Work, but
+   excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution."
+
+   "Contributor" shall mean Licensor and any individual or Legal Entity
+   on behalf of whom a Contribution has been received by Licensor and
+   subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of,
+   publicly display, publicly perform, sublicense, and distribute the
+   Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made,
+   use, offer to sell, sell, import, and otherwise transfer the Work,
+   where such license applies only to those patent claims licensable
+   by such Contributor that are necessarily infringed by their
+   Contribution(s) alone or by combination of their Contribution(s)
+   with the Work to which such Contribution(s) was submitted. If You
+   institute patent litigation against any entity (including a
+   cross-claim or counterclaim in a lawsuit) alleging that the Work
+   or a Contribution incorporated within the Work constitutes direct
+   or contributory patent infringement, then any patent licenses
+   granted to You under this License for that Work shall terminate
+   as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+   Work or Derivative Works thereof in any medium, with or without
+   modifications, and in Source or Object form, provided that You
+   meet the following conditions:
+
+   (a) You must give any other recipients of the Work or
+       Derivative Works a copy of this License; and
+
+   (b) You must cause any modified files to carry prominent notices
+       stating that You changed the files; and
+
+   (c) You must retain, in the Source form of any Derivative Works
+       that You distribute, all copyright, patent, trademark, and
+       attribution notices from the Source form of the Work,
+       excluding those notices that do not pertain to any part of
+       the Derivative Works; and
+
+   (d) If the Work includes a "NOTICE" text file as part of its
+       distribution, then any Derivative Works that You distribute must
+       include a readable copy of the attribution notices contained
+       within such NOTICE file, excluding those notices that do not
+       pertain to any part of the Derivative Works, in at least one
+       of the following places: within a NOTICE text file distributed
+       as part of the Derivative Works; within the Source form or
+       documentation, if provided along with the Derivative Works; or,
+       within a display generated by the Derivative Works, if and
+       wherever such third-party notices normally appear. The contents
+       of the NOTICE file are for informational purposes only and
+       do not modify the License. You may add Your own attribution
+       notices within Derivative Works that You distribute, alongside
+       or as an addendum to the NOTICE text from the Work, provided
+       that such additional attribution notices cannot be construed
+       as modifying the License.
+
+   You may add Your own copyright statement to Your modifications and
+   may provide additional or different license terms and conditions
+   for use, reproduction, or distribution of Your modifications, or
+   for any such Derivative Works as a whole, provided Your use,
+   reproduction, and distribution of the Work otherwise complies with
+   the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+   any Contribution intentionally submitted for inclusion in the Work
+   by You to the Licensor shall be under the terms and conditions of
+   this License, without any additional terms or conditions.
+   Notwithstanding the above, nothing herein shall supersede or modify
+   the terms of any separate license agreement you may have executed
+   with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+   names, trademarks, service marks, or product names of the Licensor,
+   except as required for reasonable and customary use in describing the
+   origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+   agreed to in writing, Licensor provides the Work (and each
+   Contributor provides its Contributions) on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+   implied, including, without limitation, any warranties or conditions
+   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the
+   appropriateness of using or redistributing the Work and assume any
+   risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+   whether in tort (including negligence), contract, or otherwise,
+   unless required by applicable law (such as deliberate and grossly
+   negligent acts) or agreed to in writing, shall any Contributor be
+   liable to You for damages, including any direct, indirect, special,
+   incidental, or consequential damages of any character arising as a
+   result of this License or out of the use or inability to use the
+   Work (including but not limited to damages for loss of goodwill,
+   work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses), even if such Contributor
+   has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+   the Work or Derivative Works thereof, You may choose to offer,
+   and charge a fee for, acceptance of support, warranty, indemnity,
+   or other liability obligations and/or rights consistent with this
+   License. However, in accepting such obligations, You may act only
+   on Your own behalf and on Your sole responsibility, not on behalf
+   of any other Contributor, and only if You agree to indemnify,
+   defend, and hold each Contributor harmless for any liability
+   incurred by, or claims asserted against, such Contributor by reason
+   of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS

ng2-components/ng2-activiti-diagrams/README.md

@@ -0,0 +1,90 @@
+# 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](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
+
+## Install
+
+```sh
+npm install --save ng2-activiti-analytics
+```
+
+#### Ng2-Charts
+
+```sh
+npm install ng2-charts chart.js --save
+```
+
+Also make sure you include these dependencies in your `index.html` file:
+
+```html
+    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
+```
+
+#### 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
+<!-- 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">
+```
+
+## Basic usage example Activiti Analytics
+
+```html
+<activiti-analytics></activiti-analytics>
+```
+
+#### Events
+
+
+#### Options
+
+
+## Build from sources
+
+Alternatively you can build component from sources with the following commands:
+
+```sh
+npm install
+npm run build
+```
+
+### Build the files and keep watching for changes
+
+```sh
+$ npm run build:w
+```
+
+### Running unit tests
+
+```sh
+npm test
+```
+
+### Running unit tests in browser
+
+```sh
+npm test-browser
+```
+
+This task rebuilds all the code, runs tslint, license checks and other quality check tools
+before performing unit testing.
+
+### Code coverage
+
+```sh
+npm run coverage
+```

ng2-components/ng2-activiti-diagrams/assets/license_header.txt

@@ -0,0 +1,16 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */

ng2-components/ng2-activiti-diagrams/demo/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+.idea
+coverage
+dist
+typings
+!systemjs.config.js

ng2-components/ng2-activiti-diagrams/demo/.npmignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+typings

ng2-components/ng2-activiti-diagrams/demo/README.md

@@ -0,0 +1,13 @@
+# Activiti Diagrams demo
+
+Install:
+
+```
+npm install
+```
+
+Run the project:
+
+```
+npm start
+```

ng2-components/ng2-activiti-diagrams/demo/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Angular 2 Activiti Analitics - Demo</title>
+    <base href="./">
+
+    <!-- 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">
+
+    <!-- 1. Load libraries -->
+    <!-- 1. Load libraries -->
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <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>
+
+    <script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
+    <script src="node_modules/raphael/raphael.min.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+        System.import('app').catch(function(err){ console.error(err); });
+    </script>
+
+</head>
+<style> .chart {display: block; width: 100%;} </style>
+
+
+<body>
+
+<activiti-analytics-demo></activiti-analytics-demo>
+
+</body>
+</html>

ng2-components/ng2-activiti-diagrams/demo/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "ng2-activiti-diagrams-demo",
+  "description": "Alfresco Angular2 Diagrams Component - Demo",
+  "version": "0.1.0",
+  "author": "Alfresco Software, Ltd.",
+  "main": "index.js",
+  "scripts": {
+    "clean": "npm install rimraf && rimraf dist node_modules typings dist",
+    "postinstall": "npm run build",
+    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
+    "server": "wsrv -o -s -l",
+    "build": "npm run tslint && rimraf dist && npm run tsc",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@angular/common": "2.0.0-rc.3",
+    "@angular/compiler": "2.0.0-rc.3",
+    "@angular/core": "2.0.0-rc.3",
+    "@angular/forms": "0.1.1",
+    "@angular/http": "2.0.0-rc.3",
+    "@angular/platform-browser": "2.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
+    "@angular/router": "3.0.0-alpha.7",
+    "@angular/router-deprecated": "2.0.0-rc.2",
+    "@angular/upgrade": "2.0.0-rc.3",
+    "systemjs": "0.19.27",
+    "core-js": "2.4.0",
+    "reflect-metadata": "0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "0.6.12",
+    "license-check": "1.1.5",
+    "material-design-icons": "2.2.3",
+    "material-design-lite": "1.1.3",
+    "ng2-translate": "2.2.2",
+    "alfresco-js-api": "^0.3.0",
+    "ng2-alfresco-core": "^0.3.0",
+    "ng2-activiti-diagrams": "^0.3.0",
+    "raphael": "^2.2.6"
+  },
+  "devDependencies": {
+    "@types/core-js": "^0.9.32",
+    "@types/jasmine": "^2.2.33",
+    "concurrently": "^2.2.0",
+    "rimraf": "2.5.2",
+    "tslint": "3.15.1",
+    "typescript": "^2.0.2",
+    "wsrv": "^0.1.5"
+  },
+  "keywords": [
+    "angular2",
+    "typescript"
+  ],
+  "license-check-config": {
+    "src": [
+      "**/*.js",
+      "**/*.ts",
+      "!/**/coverage/**/*",
+      "!/**/demo/**/*",
+      "!/**/node_modules/**/*",
+      "!/**/typings/**/*",
+      "!*.js"
+    ],
+    "contributors": [
+      {
+        "name": "Maurizio Vitale",
+        "email": "maurizio.vitale84@gmail.com"
+      },
+      {
+        "name": "Eugenio Romano",
+        "email": "eugenio.romano@alfresco.com"
+      }
+    ],
+    "path": "assets/license_header.txt",
+    "blocking": true,
+    "logInfo": false,
+    "logError": true
+  }
+}

ng2-components/ng2-activiti-diagrams/demo/src/main.ts

@@ -0,0 +1,33 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { Component } from '@angular/core';
+import { ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core';
+import {  } from 'ng2-activiti-diagrams';
+
+@Component({
+    selector: 'activiti-diagrams-demo',
+    template: `<activiti-diagrams></activiti-diagrams>`,
+    directives: [DiagramsComponent]
+})
+class ActivitiDiagramsDemo {
+}
+
+bootstrap(ActivitiDiagramsDemo, [
+    ALFRESCO_CORE_PROVIDERS]
+);

ng2-components/ng2-activiti-diagrams/demo/systemjs.config.js

@@ -0,0 +1,55 @@
+/**
+ * System configuration for Angular 2 samples
+ * Adjust as necessary for your application needs.
+ */
+(function(global) {
+    // map tells the System loader where to look for things
+    var map = {
+        'app':                        'dist', // 'dist',
+        '@angular':                   'node_modules/@angular',
+        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
+        'rxjs':                       'node_modules/rxjs',
+        'raphael': 'node_modules/raphael',
+        'ng2-translate': 'node_modules/ng2-translate',
+        'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/dist',
+        'ng2-activiti-diagrams': 'node_modules/ng2-activiti-diagrams/dist'
+    };
+    // packages tells the System loader how to load when no filename and/or no extension
+    var packages = {
+        'app':                        { main: 'main.js',  defaultExtension: 'js' },
+        'rxjs':                       { defaultExtension: 'js' },
+        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
+        'ng2-translate': { defaultExtension: 'js' },
+        'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' },
+        'ng2-activiti-diagrams': { main: 'index.js', defaultExtension: 'js' },
+        'raphael': { main: 'raphael.js', defaultExtension: 'js'}
+    };
+    var ngPackageNames = [
+        'common',
+        'compiler',
+        'core',
+        'http',
+        'platform-browser',
+        'platform-browser-dynamic',
+        'router',
+        'router-deprecated',
+        'upgrade'
+    ];
+    // Individual files (~300 requests):
+    function packIndex(pkgName) {
+        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
+    }
+    // Bundled (~40 requests):
+    function packUmd(pkgName) {
+        packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
+    }
+    // Most environments should use UMD; some (Karma) need the individual index files
+    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
+    // Add package entries for angular packages
+    ngPackageNames.forEach(setPackageConfig);
+    var config = {
+        map: map,
+        packages: packages
+    };
+    System.config(config);
+})(this);

ng2-components/ng2-activiti-diagrams/demo/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "sourceMap": true,
+        "removeComments": true,
+        "declaration": true,
+        "noLib": false,
+        "allowUnreachableCode": false,
+        "allowUnusedLabels": false,
+        "noImplicitAny": false,
+        "noImplicitReturns": false,
+        "noImplicitUseStrict": false,
+        "noFallthroughCasesInSwitch": true,
+        "outDir": "dist",
+        "types": ["core-js", "jasmine", "node"]
+    },
+    "exclude": [
+        "demo",
+        "node_modules",
+        "dist"
+    ]
+}

ng2-components/ng2-activiti-diagrams/demo/tslint.json

@@ -0,0 +1,124 @@
+{
+  "rules": {
+    "align": [
+      true,
+      "parameters",
+      "arguments",
+      "statements"
+    ],
+    "ban": false,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space",
+      "check-lowercase"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-name": false,
+    "jsdoc-format": true,
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-ordering": [
+      true,
+      "public-before-private",
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-any": false,
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-conditional-assignment": true,
+    "no-consecutive-blank-lines": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-constructor-vars": false,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": true,
+    "no-eval": true,
+    "no-inferrable-types": false,
+    "no-internal-module": true,
+    "no-require-imports": true,
+    "no-shadowed-variable": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unreachable": true,
+    "no-unused-expression": true,
+    "no-unused-variable": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "no-var-requires": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single",
+      "avoid-escape"
+    ],
+    "radix": true,
+    "semicolon": true,
+    "switch-default": true,
+    "trailing-comma": [
+      true,
+      {
+        "multiline": "never",
+        "singleline": "never"
+      }
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef": false,
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "use-strict": false,
+    "variable-name": [
+      true,
+      "check-format",
+      "allow-leading-underscore",
+      "ban-keywords"
+    ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-operator",
+      "check-separator",
+      "check-type",
+      "check-module",
+      "check-decl"
+    ]
+  }
+}

ng2-components/ng2-activiti-diagrams/index.ts

@@ -0,0 +1,63 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CoreModule } from 'ng2-alfresco-core';
+
+import { DIAGRAM_DIRECTIVES } from './src/components/index';
+import { DiagramColorService } from './src/services/diagram-color.service';
+import { DiagramsService } from './src/services/diagrams.service';
+
+import { RAPHAEL_DIRECTIVES } from './src/components/raphael/index';
+import { RAPHAEL_PROVIDERS } from './src/components/raphael/index';
+
+// primitives
+export * from './src/components/index';
+export * from './src/components/raphael/index';
+
+export const DIAGRAM_PROVIDERS: any[] = [
+    DiagramsService,
+    DiagramColorService
+];
+
+@NgModule({
+    imports: [
+        CoreModule
+    ],
+    declarations: [
+        ...DIAGRAM_DIRECTIVES,
+        ...RAPHAEL_DIRECTIVES
+    ],
+    providers: [
+        ...DIAGRAM_PROVIDERS,
+        ...RAPHAEL_PROVIDERS
+    ],
+    exports: [
+        ...DIAGRAM_DIRECTIVES
+    ]
+})
+export class DiagramsModule {
+    static forRoot(): ModuleWithProviders {
+        return {
+            ngModule: DiagramsModule,
+            providers: [
+                ...DIAGRAM_PROVIDERS,
+                ...RAPHAEL_PROVIDERS
+            ]
+        };
+    }
+}

ng2-components/ng2-activiti-diagrams/karma-test-shim.js

@@ -0,0 +1,104 @@
+// Tun on full stack traces in errors to help debugging
+Error.stackTraceLimit = Infinity;
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
+
+__karma__.loaded = function() {};
+
+var builtPath = '/base/dist/';
+
+function isJsFile(path) {
+    return path.slice(-3) == '.js';
+}
+
+function isSpecFile(path) {
+    return /\.spec\.(.*\.)?js$/.test(path);
+}
+
+function isBuiltFile(path) {
+    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
+}
+
+var allSpecFiles = Object.keys(window.__karma__.files)
+    .filter(isSpecFile)
+    .filter(isBuiltFile);
+
+var paths = {
+    // paths serve as alias
+    'npm:': 'base/node_modules/'
+};
+
+var map = {
+    'app': 'base/dist',
+    // angular bundles
+    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    // testing
+    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
+    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
+    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
+    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
+    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
+
+    // other libraries
+    'rxjs': 'npm:rxjs',
+    'ng2-translate': 'npm:ng2-translate',
+    'alfresco-js-api': 'npm:alfresco-js-api/dist',
+    'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams/dist',
+    'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist'
+};
+
+var packages = {
+    'app': { main: 'main.js',  defaultExtension: 'js' },
+    'rxjs': {  defaultExtension: 'js' },
+    'ng2-translate': { defaultExtension: 'js' },
+    'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
+    'ng2-activiti-diagrams': { main: './index.js', defaultExtension: 'js'},
+    'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
+};
+
+var config = {
+    paths: paths,
+    map: map,
+    packages: packages
+};
+
+System.config(config);
+
+System.import('@angular/core/testing')
+    .then(initTestBed)
+    .then(initTesting);
+
+function initTestBed(){
+    return Promise.all([
+        System.import('@angular/core/testing'),
+        System.import('@angular/platform-browser-dynamic/testing')
+    ])
+    .then(function (providers) {
+        var coreTesting    = providers[0];
+        var browserTesting = providers[1];
+
+        coreTesting.TestBed.initTestEnvironment(
+            browserTesting.BrowserDynamicTestingModule,
+            browserTesting.platformBrowserDynamicTesting());
+    })
+}
+
+// Import all spec files and start karma
+function initTesting () {
+    return Promise.all(
+        allSpecFiles.map(function (moduleName) {
+            return System.import(moduleName);
+        })
+    )
+    .then(__karma__.start, __karma__.error);
+}

ng2-components/ng2-activiti-diagrams/karma.conf.js

@@ -0,0 +1,120 @@
+'use strict';
+
+module.exports = function (config) {
+  var configuration = {
+    basePath: '.',
+
+    frameworks: ['jasmine-ajax', 'jasmine'],
+
+    files: [
+      // System.js for module loading
+      'node_modules/systemjs/dist/system.src.js',
+
+      // Polyfills
+      'node_modules/core-js/client/shim.js',
+      'node_modules/reflect-metadata/Reflect.js',
+
+      // zone.js
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/zone.js/dist/long-stack-trace-zone.js',
+      'node_modules/zone.js/dist/proxy.js',
+      'node_modules/zone.js/dist/sync-test.js',
+      'node_modules/zone.js/dist/jasmine-patch.js',
+      'node_modules/zone.js/dist/async-test.js',
+      'node_modules/zone.js/dist/fake-async-test.js',
+
+      // RxJs
+      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false},
+
+      // Paths loaded via module imports:
+      // Angular itself
+      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
+
+      'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
+      'node_modules/raphael/raphael.min.js',
+      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
+
+      'karma-test-shim.js',
+
+      // paths loaded via module imports
+      {pattern: 'dist/**/*.js', included: false, watched: true},
+      {pattern: 'dist/**/*.html', included: true, served: true, watched: true},
+      {pattern: 'dist/**/*.css', included: true, served: true, watched: true},
+
+      // ng2-components
+      { pattern: 'node_modules/ng2-alfresco-core/dist/**/*.*', included: false, served: true, watched: false },
+
+      // paths to support debugging with source maps in dev tools
+      {pattern: 'src/**/*.ts', included: false, watched: false},
+      {pattern: 'dist/**/*.js.map', included: false, watched: false}
+    ],
+
+    exclude: [
+      'node_modules/**/*spec.js'
+    ],
+
+    // proxied base paths
+    proxies: {
+      // required for component assets fetched by Angular's compiler
+      '/src/': '/base/src/'
+    },
+
+    port: 9876,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    colors: true,
+
+    autoWatch: true,
+
+    browsers: ['Chrome'],
+
+    customLaunchers: {
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
+
+    // Karma plugins loaded
+    plugins: [
+      'karma-jasmine',
+      'karma-coverage',
+      'karma-jasmine-ajax',
+      'karma-chrome-launcher',
+      'karma-mocha-reporter',
+      'karma-jasmine-html-reporter'
+    ],
+
+    // Coverage reporter generates the coverage
+    reporters: ['mocha', 'coverage', 'kjhtml'],
+
+    // Source files that you wanna generate coverage for.
+    // Do not include tests or libraries (these files will be instrumented by Istanbul)
+    preprocessors: {
+      'dist/**/!(*spec|index|*mock|*model).js': 'coverage'
+    },
+
+    coverageReporter: {
+      includeAllSources: true,
+      dir: 'coverage/',
+      subdir: 'report',
+      reporters: [
+        {type: 'text'},
+        {type: 'json', file: 'coverage-final.json'},
+        {type: 'html'},
+        {type: 'lcov'}
+      ]
+    }
+  };
+
+  if (process.env.TRAVIS) {
+    configuration.browsers = ['Chrome_travis_ci'];
+  }
+
+  config.set(configuration)
+};

ng2-components/ng2-activiti-diagrams/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "ng2-activiti-diagrams",
+  "description": "Activiti Angular2 Diagrams Component",
+  "version": "0.3.3",
+  "author": "Alfresco Software, Ltd.",
+  "main": "./dist/index.js",
+  "typings": "./dist/index.d.ts",
+  "scripts": {
+    "clean": "npm install rimraf && rimraf dist node_modules typings",
+    "build": "npm run tslint && rimraf dist && tsc && npm run copy-dist && license-check",
+    "build:w": "npm run tslint && rimraf dist && npm run watch-task",
+    "watch-task": "concurrently \"npm run tsc:w\"  \"npm run copy-dist:w\"  \"license-check\"",
+    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json 'src/{,**/}**.ts'",
+    "copy-dist": "cpx \"./src/**/*.{html,css,json,png,jpg,gif,svg}\" ./dist/src",
+    "copy-dist:w": "cpx \"./src/**/*.{html,css,json,png,jpg,gif,svg}\" ./dist/src -w",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    "pretest": "npm run build",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
+    "test-browser": "concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
+    "posttest": "node_modules/.bin/remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && node_modules/.bin/remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish": "npm run build",
+    "travis": "echo 'placeholder'"
+  },
+  "contributors": [
+    {
+      "name": "Maurizio Vitale",
+      "email": "maurizio.vitale84@gmail.com"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
+  },
+  "dependencies": {
+    "@angular/common": "2.0.0",
+    "@angular/compiler": "2.0.0",
+    "@angular/core": "2.0.0",
+    "@angular/forms": "2.0.0",
+    "@angular/http": "2.0.0",
+    "@angular/platform-browser": "2.0.0",
+    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/router": "3.0.0",
+    "@angular/upgrade": "2.0.0",
+    "@types/node": "^6.0.42",
+    "alfresco-js-api": "^0.3.0",
+    "core-js": "^2.4.1",
+    "ng2-alfresco-core": "0.3.2",
+    "ng2-translate": "2.5.0",
+    "raphael": "^2.2.6",
+    "reflect-metadata": "^0.1.3",
+    "rxjs": "5.0.0-beta.12",
+    "systemjs": "0.19.27",
+    "zone.js": "^0.6.23"
+  },
+  "devDependencies": {
+    "@types/core-js": "^0.9.32",
+    "@types/jasmine": "^2.2.33",
+    "concurrently": "^2.2.0",
+    "cpx": "^1.3.1",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "~0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.0.0",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "^0.2.0",
+    "karma-mocha-reporter": "^2.0.3",
+    "license-check": "^1.0.4",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "2.5.2",
+    "traceur": "^0.0.91",
+    "tslint": "^3.8.1",
+    "typescript": "^2.0.3",
+    "wsrv": "^0.1.5"
+  },
+  "keywords": [
+    "tag",
+    "alfresco-analytics",
+    "alfresco-diagrams"
+  ],
+  "license-check-config": {
+    "src": [
+      "./dist/**/*.js"
+    ],
+    "path": "assets/license_header.txt",
+    "blocking": true,
+    "logInfo": false,
+    "logError": true
+  },
+  "license": "Apache-2.0"
+}

ng2-components/ng2-activiti-diagrams/src/assets/analyticsComponent.mock.ts

@@ -0,0 +1,97 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export var chartProcessDefOverview = {
+    'elements': [{
+        'id': 'id1585876275153',
+        'type': 'table',
+        'rows': [
+            ['__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS', '9'],
+            ['__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES', '41'],
+            ['__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES', '3'],
+            ['__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES', '38']
+        ]
+    }, {
+        'id': 'id1585876413072',
+        'type': 'pieChart',
+        'title': 'Total process instances overview',
+        'titleKey': 'REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.PROC-INST-CHART-TITLE',
+        'values': [{
+            'key': 'Second Process',
+            'y': 4,
+            'keyAndValue': ['Second Process', '4']
+        }, {
+            'key': 'Simple process',
+            'y': 30,
+            'keyAndValue': ['Simple process', '30']
+        }, {
+            'key': 'Third Process',
+            'y': 7,
+            'keyAndValue': ['Third Process', '7']
+        }]
+    }, {
+        'id': 'id1585877659181',
+        'type': 'table',
+        'title': 'Process definition details',
+        'titleKey': 'REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.DETAIL-TABLE',
+        'columnNames': ['Process definition', 'Total', 'Active', 'Completed'],
+        'columnNameKeys': ['REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.DETAIL-TABLE-PROCESS',
+            'REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.DETAIL-TABLE-TOTAL',
+            'REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.DETAIL-TABLE-ACTIVE',
+            'REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.DETAIL-TABLE-COMPLETED'],
+        'columnsCentered': [false, false, false, false],
+        'rows': [
+            ['Second Process', '4', '0', '4'],
+            ['Simple process', '30', '3', '27'],
+            ['Third Process', '7', '0', '7']
+        ]
+    }]
+};
+
+export var chartTaskOverview = {
+    'elements': [{
+        'id': 'id792351752194',
+        'type': 'barChart',
+        'title': 'title',
+        'titleKey': 'REPORTING.DEFAULT-REPORTS.TASK-OVERVIEW.TASK-HISTOGRAM-TITLE',
+        'values': [{
+            'key': 'series1',
+            'values': [['2016-09-30T00:00:00.000+0000', 3], ['2016-10-04T00:00:00.000+0000', 1]]
+        }],
+        'xAxisType': 'date_month',
+        'yAxisType': 'count'
+    }, {
+        'id': 'id792349721129',
+        'type': 'masterDetailTable',
+        'title': 'Detailed task statistics',
+        'titleKey': 'REPORTING.DEFAULT-REPORTS.TASK-OVERVIEW.DETAILED-TASK-STATS-TITLE',
+        'columnNames': ['Task', 'Count', 'Sum', 'Min duration', 'Max duration', 'Average duration', 'Stddev duration'],
+        'columnNameKeys': [
+            'REPORTING.DEFAULT-REPORTS.TASK-OVERVIEW.DETAILED-TASK-STATS-TASK',
+            'REPORTING.DEFAULT-REPORTS.TASK-OVERVIEW.COUNT',
+            'REPORTING.DEFAULT-REPORTS.TASK-OVERVIEW.SUM',
+            'REPORTING.DEFAULT-REPORTS.TASK-OVERVIEW.MIN-DURATION',
+            'REPORTING.DEFAULT-REPORTS.TASK-OVERVIEW.MAX-DURATION',
+            'REPORTING.DEFAULT-REPORTS.TASK-OVERVIEW.AVERAGE',
+            'REPORTING.DEFAULT-REPORTS.TASK-OVERVIEW.STDDE'],
+        'columnsCentered': [false, false, false, false],
+        'rows': [
+            ['fake 1 user task', '1', '2.0', '3.0', '4.0', '5.0', '6.0'],
+            ['fake 2 user task', '1', '2.0', '3.0', '4.0', '5.0', '6.0']
+        ]
+    }]
+};

ng2-components/ng2-activiti-diagrams/src/assets/analyticsParamsReportComponent.mock.ts

@@ -0,0 +1,127 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ReportParameterDetailsModel } from '../models/report.model';
+
+export var reportDefParamStatus = {
+    'id': 2005,
+    'name': 'Fake Task overview status',
+    'created': '2016-10-05T15:39:40.222+0000',
+    'definition': '{ "parameters" :[{"id":"status","name":null,"nameKey":null,"type":"status","value":null,"dependsOn":null}]}'
+};
+
+export var reportDefParamNumber = {
+    'id': 2005,
+    'name': 'Fake Process instances overview',
+    'created': '2016-10-05T15:39:40.222+0000',
+    'definition': '{ "parameters"' +
+    ' :[{"id":"slowProcessInstanceInteger","name":null,"nameKey":null,"type":"integer","value":10,"dependsOn":null}]}'
+};
+
+export var reportDefParamDuration = {
+    'id': 2005,
+    'name': 'Fake Task service level agreement',
+    'created': '2016-10-05T15:39:40.222+0000',
+    'definition': '{ "parameters"' +
+    ' :[{"id":"duration","name":null,"nameKey":null,"type":"duration","value":null,"dependsOn":null}]}'
+};
+
+export var reportDefParamCheck = {
+    'id': 2005,
+    'name': 'Fake Task service level agreement',
+    'created': '2016-10-05T15:39:40.222+0000',
+    'definition': '{ "parameters"' +
+    ' :[{"id":"typeFiltering","name":null,"nameKey":null,"type":"boolean","value":true,"dependsOn":null}]}'
+};
+
+export var reportDefParamDateRange = {
+    'id': 2005,
+    'name': 'Fake Process instances overview',
+    'created': '2016-10-05T15:39:40.222+0000',
+    'definition': '{ "parameters" :[{"id":"dateRange","name":null,"nameKey":null,"type":"dateRange","value":null,"dependsOn":null}]}'
+};
+
+export var reportDefParamRangeInterval = {
+    'id': 2006,
+    'name': 'Fake Task overview RangeInterval',
+    'created': '2016-10-05T15:39:40.222+0000',
+    'definition': '{ "parameters" :[{"id":"dateRangeInterval","name":null,"nameKey":null,"type":"dateInterval","value":null,"dependsOn":null}]}'
+};
+
+export var reportDefParamProcessDef = {
+    'id': 2006,
+    'name': 'Fake Task overview ProcessDefinition',
+    'created': '2016-10-05T15:39:40.222+0000',
+    'definition': '{ "parameters" :[{"id":"processDefinitionId","name":null,"nameKey":null,"type":"processDefinition","value":null,"dependsOn":null}]}'
+};
+
+export var reportDefParamProcessDefOptions = {
+    'size': 4, 'total': 4, 'start': 0, 'data': [
+        {
+            'id': 'FakeProcessTest 1:1:1',
+            'name': 'Fake Process Test 1 Name ',
+            'version': 1
+        },
+        {
+            'id': 'FakeProcessTest 1:2:1',
+            'name': 'Fake Process Test 1 Name ',
+            'version': 2
+        },
+        {
+            'id': 'FakeProcessTest 2:1:1',
+            'name': 'Fake Process Test 2 Name ',
+            'version': 1
+        },
+        {
+            'id': 'FakeProcessTest 3:1:1',
+            'name': 'Fake Process Test 3 Name ',
+            'version': 1
+        }
+    ]
+};
+
+export var reportDefParamProcessDefOptionsApp = {
+    'size': 2, 'total': 2, 'start': 2, 'data': [
+        {
+            'id': 'FakeProcessTest 1:1:1',
+            'name': 'Fake Process Test 1 Name ',
+            'version': 1
+        },
+        {
+            'id': 'FakeProcessTest 1:2:1',
+            'name': 'Fake Process Test 1 Name ',
+            'version': 2
+        }
+    ]
+};
+
+export var reportDefParamTask = {
+    'id': 2006,
+    'name': 'Fake Task service level agreement',
+    'created': '2016-10-05T15:39:40.222+0000',
+    'definition': '{ "parameters" :[{"id":"taskName","name":null,"nameKey":null,"type":"task","value":null,"dependsOn":"processDefinitionId"}]}'
+};
+
+export var reportDefParamTaskOptions = ['Fake task name 1', 'Fake task name 2'];
+
+export var fieldProcessDef = new ReportParameterDetailsModel(
+    {
+        id: 'processDefinitionId',
+        type: 'processDefinition',
+        value: 'fake-process-name:1:15027'
+    }
+);

ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-business-rule-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-manual-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-receive-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-script-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-service-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-user-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts

@@ -17,13 +17,13 @@
 
 import { Component, ElementRef, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
-import { AnalyticsService } from '../../services/analytics.service';
+import { DiagramsService } from '../services/diagrams.service';
-import { DiagramColorService } from './services/diagram-color.service';
+import { DiagramColorService } from '../services/diagram-color.service';
-import { RaphaelService } from './../raphael/raphael.service';
+import { RaphaelService } from './raphael/raphael.service';
 
 @Component({
     moduleId: module.id,
-    selector: 'diagram',
+    selector: 'activiti-diagram',
     templateUrl: './diagram.component.html',
     styleUrls: ['./diagram.component.css']
 })
@@ -50,7 +50,7 @@ export class DiagramComponent {
                 private translate: AlfrescoTranslationService,
                 private diagramColorService: DiagramColorService,
                 private raphaelService: RaphaelService,
-                private analyticsService: AnalyticsService) {
+                private diagramsService: DiagramsService) {
         if (translate) {
             translate.addTranslationFolder('node_modules/ng2-activiti-analytics/src');
         }
@@ -68,7 +68,7 @@ export class DiagramComponent {
     }
 
     getProcessDefinitionModel(processDefinitionId: string) {
-        this.analyticsService.getProcessDefinitionModel(processDefinitionId).subscribe(
+        this.diagramsService.getProcessDefinitionModel(processDefinitionId).subscribe(
             (res: any) => {
                 this.diagram = res;
             },

ng2-components/ng2-activiti-diagrams/src/components/events/diagram-end-event.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/events/diagram-start-event.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-event-gateway.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-exclusive-gateway.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-gateway.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-inclusive-gateway.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-parallel-gateway.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-container-icon-event.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-alfresco-publish-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-box-publish-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-business-rule-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-camel-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-error.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,

ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-google-drive-publish-task.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
-import { DiagramColorService } from './../services/diagram-color.service';
+import { DiagramColorService } from '../../services/diagram-color.service';
 
 @Component({
     moduleId: module.id,