inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #984 from Alfresco/dev-analytics-demo

Browse Source 
Analytics demo and documentation
This commit is contained in:
Mario Romano 2016-11-03 12:28:00 +00:00 committed by GitHub
commit eada2f0d0d
9 changed files with 189 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
ng2-components/ng2-activiti-analytics/README.md
View File

@ -23,6 +23,31 @@ Also make sure you include these dependencies in your `index.html` file:
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script> <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
``` ```
#### Moment
```sh
npm install moment --save
```
Also make sure you include these dependencies in your `index.html` file:
```html
<script src="node_modules/moment/min/moment.min.js"></script>
```
#### 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
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
```
#### Material Design Lite #### 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 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
@ -41,17 +66,34 @@ Also make sure you include these dependencies in your `index.html` file:
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
``` ```
## Basic usage example Activiti Analytics ## Basic usage example Activiti Analytics List
The component shows the list of all the available reports
```html ```html
<activiti-analytics></activiti-analytics> <analytics-report-list></analytics-report-list>
``` ```
#### Events #### Events
**onSuccess**: The event is emitted when the report list are loaded<br />
**onError**: The event is emitted when an error occur during the loading<br />
**reportClick**: The event is emitted when the report in the list is selected<br />
#### Options #### Options
No options.
## Basic usage example Activiti Analytics
The component shows the charts related to the reportId passed as input
```html
<activiti-analytics [appId]="appId" [reportId]="reportId"></activiti-analytics>
```
#### Events
**onSuccess**: The event is emitted when the report parameters are loaded<br />
**onError**: The event is emitted when an error occur during the loading<br />
#### Options
**appId**: The application id<br />
**reportId**: The report id<br />
**debug**: Flag to enable or disable the Form values in the console log<br />
## Build from sources ## Build from sources

10
ng2-components/ng2-activiti-analytics/demo/index.html
View File

@ -2,13 +2,15 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Angular 2 Activiti Analitics - Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alfresco Angular 2 Activiti Analytics - Demo</title>
<base href="./"> <base href="./">
<!-- Google Material Design Lite --> <!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css"> <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script> <script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
<!-- 1. Load libraries --> <!-- 1. Load libraries -->
<!-- 1. Load libraries --> <!-- 1. Load libraries -->
@ -18,7 +20,13 @@
<script src="node_modules/reflect-metadata/Reflect.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/systemjs/dist/system.src.js"></script>
<script src="node_modules/moment/min/moment.min.js"></script>
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script> <script src="node_modules/chart.js/dist/Chart.bundle.min.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="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>
<script src="assets/Polyline.js"></script>
<script src="systemjs.config.js"></script> <script src="systemjs.config.js"></script>
<script> <script>

93
ng2-components/ng2-activiti-analytics/demo/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ng2-activiti-analytics-demo", "name": "ng2-activiti-diagrams-demo",
"description": "Alfresco Angular2 Analytics Component - Demo", "description": "Alfresco Angular2 Diagrams Component - Demo",
"version": "0.1.0", "version": "0.1.0",
"author": "Alfresco Software, Ltd.", "author": "Alfresco Software, Ltd.",
"main": "index.js", "main": "index.js",
@ -9,36 +9,54 @@
"postinstall": "npm run build", "postinstall": "npm run build",
"start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ", "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
"server": "wsrv -o -s -l", "server": "wsrv -o -s -l",
"build": "npm run tslint && rimraf dist && npm run tsc", "build": "npm run tslint && rimraf dist && tsc",
"build:w": "npm run tslint && rimraf dist && tsc -w",
"tsc": "tsc", "tsc": "tsc",
"tsc:w": "tsc -w", "tsc:w": "tsc -w",
"tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts" "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
}, },
"license": "Apache-2.0", "license": "Apache-2.0",
"contributors": [
{
"name": "Maurizio Vitale",
"email": "maurizio.vitale@alfresco.com"
}
],
"keywords": [
"ng2",
"angular",
"angular2",
"activiti",
"activiti-diagrams"
],
"dependencies": { "dependencies": {
"@angular/common": "2.0.0-rc.3", "@angular/common": "2.0.0",
"@angular/compiler": "2.0.0-rc.3", "@angular/compiler": "2.0.0",
"@angular/core": "2.0.0-rc.3", "@angular/core": "2.0.0",
"@angular/forms": "0.1.1", "@angular/forms": "2.0.0",
"@angular/http": "2.0.0-rc.3", "@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0-rc.3", "@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0-rc.3", "@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0-alpha.7", "@angular/router": "3.0.0",
"@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0",
"@angular/upgrade": "2.0.0-rc.3", "@types/node": "^6.0.42",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27", "systemjs": "0.19.27",
"core-js": "2.4.0", "zone.js": "^0.6.23",
"reflect-metadata": "0.1.3", "md-date-time-picker": "^2.2.0",
"rxjs": "5.0.0-beta.6", "raphael": "^2.2.6",
"zone.js": "0.6.12",
"license-check": "1.1.5",
"material-design-icons": "2.2.3", "material-design-icons": "2.2.3",
"material-design-lite": "1.1.3", "material-design-lite": "1.2.1",
"ng2-translate": "2.2.2", "ng2-translate": "2.5.0",
"alfresco-js-api": "^0.3.0", "alfresco-js-api": "^0.3.0",
"ng2-alfresco-core": "^0.3.0", "ng2-alfresco-core": "^0.3.0",
"ng2-activiti-diagrams": "^0.3.0",
"ng2-activiti-analytics": "^0.3.0", "ng2-activiti-analytics": "^0.3.0",
"chart.js": "^2.1.4", "chart.js": "^2.1.4",
"moment": "2.15.1",
"md-date-time-picker": "^2.2.0",
"ng2-charts": "1.1.0" "ng2-charts": "1.1.0"
}, },
"devDependencies": { "devDependencies": {
@ -46,37 +64,8 @@
"@types/jasmine": "^2.2.33", "@types/jasmine": "^2.2.33",
"concurrently": "^2.2.0", "concurrently": "^2.2.0",
"rimraf": "2.5.2", "rimraf": "2.5.2",
"tslint": "3.15.1", "tslint": "^3.8.1",
"typescript": "^2.0.2", "typescript": "^2.0.3",
"wsrv": "^0.1.5" "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
} }
} }

50
ng2-components/ng2-activiti-analytics/demo/src/main.ts
View File

@ -15,19 +15,49 @@
* limitations under the License. * limitations under the License.
*/ */
import { bootstrap } from '@angular/platform-browser-dynamic'; import { NgModule, Component } from '@angular/core';
import { Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';
import { ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AnalyticsComponent } from 'ng2-activiti-analytics';
import { CoreModule } from 'ng2-alfresco-core';
import { AnalyticsModule } from 'ng2-activiti-analytics';
@Component({ @Component({
selector: 'activiti-analytics-demo', selector: 'activiti-analytics-demo',
template: `<activiti-analytics></activiti-analytics>`, template: `
directives: [AnalyticsComponent] <div class="page-content">
<label for="appId"><b>Insert the appId:</b></label><br>
<input id="appId" size="10" type="text" [(ngModel)]="appId">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
<analytics-report-list (reportClick)="onReportClick($event)"></analytics-report-list>
</div>
<div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
<activiti-analytics [appId]="appId" *ngIf="report" [reportId]="report.id"></activiti-analytics>
</div>
</div>
</div>`
}) })
class ActivitiAnalyticsDemo {
export class AnalyticsDemoComponent {
appId: number;
report: any;
onReportClick(event: any) {
this.report = event;
}
} }
bootstrap(ActivitiAnalyticsDemo, [ @NgModule({
ALFRESCO_CORE_PROVIDERS] imports: [
); BrowserModule,
CoreModule.forRoot(),
AnalyticsModule
],
declarations: [ AnalyticsDemoComponent ],
bootstrap: [ AnalyticsDemoComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);

98
ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
View File

@ -2,56 +2,50 @@
* System configuration for Angular 2 samples * System configuration for Angular 2 samples
* Adjust as necessary for your application needs. * Adjust as necessary for your application needs.
*/ */
(function(global) { (function (global) {
// map tells the System loader where to look for things System.config({
var map = { paths: {
'app': 'dist', // 'dist', // paths serve as alias
'@angular': 'node_modules/@angular', 'npm:': 'node_modules/'
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', },
'rxjs': 'node_modules/rxjs', // map tells the System loader where to look for things
map: {
'ng2-charts': 'node_modules/ng2-charts', // our app is within the app folder
'ng2-translate': 'node_modules/ng2-translate', app: 'dist',
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/dist', // angular bundles
'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/dist' '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
}; '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
// packages tells the System loader how to load when no filename and/or no extension '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
var packages = { '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'app': { main: 'main.js', defaultExtension: 'js' }, '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'rxjs': { defaultExtension: 'js' }, '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'ng2-translate': { defaultExtension: 'js' }, // other libraries
'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' }, 'rxjs': 'npm:rxjs',
'ng2-activiti-analytics': { main: 'index.js', defaultExtension: 'js' }, 'moment': 'npm:moment/min/moment.min.js',
'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js'} 'ng2-charts': 'npm:ng2-charts',
}; 'ng2-translate': 'npm:ng2-translate',
var ngPackageNames = [ 'alfresco-js-api': 'npm:alfresco-js-api/dist',
'common', 'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
'compiler', 'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams/dist',
'core', 'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist'
'http', },
'platform-browser', // packages tells the System loader how to load when no filename and/or no extension
'platform-browser-dynamic', packages: {
'router', app: {
'router-deprecated', main: './main.js',
'upgrade' defaultExtension: 'js'
]; },
// Individual files (~300 requests): rxjs: {
function packIndex(pkgName) { defaultExtension: 'js'
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; },
} 'ng2-translate': { defaultExtension: 'js' },
// Bundled (~40 requests): 'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js'},
function packUmd(pkgName) { 'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
} 'ng2-activiti-diagrams': { main: './index.js', defaultExtension: 'js'},
// Most environments should use UMD; some (Karma) need the individual index files 'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'}
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); })(this);

2
ng2-components/ng2-activiti-analytics/demo/tslint.json
View File

@ -26,7 +26,7 @@
"label-undefined": true, "label-undefined": true,
"max-line-length": [ "max-line-length": [
true, true,
140 180
], ],
"member-ordering": [ "member-ordering": [
true, true,

1
ng2-components/ng2-activiti-analytics/package.json
View File

@ -52,6 +52,7 @@
"@angular/upgrade": "2.0.0", "@angular/upgrade": "2.0.0",
"@types/node": "^6.0.42", "@types/node": "^6.0.42",
"alfresco-js-api": "^0.3.0", "alfresco-js-api": "^0.3.0",
"moment": "2.15.1",
"chart.js": "^2.1.4", "chart.js": "^2.1.4",
"core-js": "^2.4.1", "core-js": "^2.4.1",
"md-date-time-picker": "^2.2.0", "md-date-time-picker": "^2.2.0",

4
ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts
View File

@ -94,7 +94,7 @@ describe('Test ng2-activiti-analytics Report ', () => {
}); });
it('Should render the Process definition overview report ', (done) => { it('Should render the Process definition overview report ', (done) => {
component.onShowReport.subscribe((res) => { component.onSuccess.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(res.length).toEqual(3); expect(res.length).toEqual(3);
@ -133,7 +133,7 @@ describe('Test ng2-activiti-analytics Report ', () => {
}); });
it('Should render the Task overview report ', (done) => { it('Should render the Task overview report ', (done) => {
component.onShowReport.subscribe((res) => { component.onSuccess.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(res.length).toEqual(2); expect(res.length).toEqual(2);

12
ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
View File

@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, EventEmitter, OnInit, OnChanges, Input, Output, SimpleChanges } from '@angular/core'; import { Component, EventEmitter, OnChanges, Input, Output, SimpleChanges } from '@angular/core';
import { AlfrescoTranslationService } from 'ng2-alfresco-core'; import { AlfrescoTranslationService } from 'ng2-alfresco-core';
import { AnalyticsService } from '../services/analytics.service'; import { AnalyticsService } from '../services/analytics.service';
import { ReportQuery } from '../models/report.model'; import { ReportQuery } from '../models/report.model';
@ -27,7 +27,7 @@ import { Chart } from '../models/chart.model';
templateUrl: './analytics.component.html', templateUrl: './analytics.component.html',
styleUrls: ['./analytics.component.css'] styleUrls: ['./analytics.component.css']
}) })
export class AnalyticsComponent implements OnInit, OnChanges { export class AnalyticsComponent implements OnChanges {
@Input() @Input()
appId: string; appId: string;
@ -41,9 +41,6 @@ export class AnalyticsComponent implements OnInit, OnChanges {
@Output() @Output()
onSuccess = new EventEmitter(); onSuccess = new EventEmitter();
@Output()
onShowReport = new EventEmitter();
@Output() @Output()
onError = new EventEmitter(); onError = new EventEmitter();
@ -59,9 +56,6 @@ export class AnalyticsComponent implements OnInit, OnChanges {
} }
} }
ngOnInit() {
}
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
this.reset(); this.reset();
} }
@ -71,7 +65,7 @@ export class AnalyticsComponent implements OnInit, OnChanges {
this.analyticsService.getReportsByParams(this.reportId, this.reportParamQuery).subscribe( this.analyticsService.getReportsByParams(this.reportId, this.reportParamQuery).subscribe(
(res: Chart[]) => { (res: Chart[]) => {
this.reports = res; this.reports = res;
this.onShowReport.emit(res); this.onSuccess.emit(res);
}, },
(err: any) => { (err: any) => {
this.onError.emit(err); this.onError.emit(err);