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

Merge pull request #871 from Alfresco/dev-mvitale-799

Browse Source 
Create report list and report charts
This commit is contained in:
Eugenio Romano 2016-10-10 16:01:50 +01:00 committed by GitHub
commit d85baaf8da
41 changed files with 1881 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo-shell-ng2/app/app.module.ts
View File

@ -31,6 +31,7 @@ import { ActivitiFormModule } from 'ng2-activiti-form';
import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
import { AnalyticsModule } from 'ng2-activiti-analytics';
import { AppComponent } from './app.component';
import { routing } from './app.routes';
@ -65,7 +66,8 @@ import {
ActivitiFormModule.forRoot(),
ActivitiTaskListModule.forRoot(),
ActivitiProcessListModule.forRoot(),
UserInfoComponentModule.forRoot()
UserInfoComponentModule.forRoot(),
AnalyticsModule.forRoot()
],
declarations: [
AppComponent,

11
demo-shell-ng2/app/components/activiti/activiti-demo.component.html
View File

@ -63,7 +63,16 @@
</div>
</section>
<section class="mdl-layout__tab-panel" id="report">
<div class="page-content"><!-- Your content goes here --></div>
<div class="page-content">
<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 *ngIf="report" [reportId]="report.id"></activiti-analytics>
</div>
</div>
</div>
</section>
</main>
</div>

5
demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
View File

@ -79,6 +79,7 @@ export class ActivitiDemoComponent implements AfterViewChecked {
processSchemaColumns: any [] = [];
taskFilter: any;
report: any;
processFilter: any;
sub: Subscription;
@ -140,6 +141,10 @@ export class ActivitiDemoComponent implements AfterViewChecked {
this.taskFilter = event;
}
onReportClick(event: any) {
this.report = event;
}
onSuccessTaskFilterList(event: any) {
this.taskFilter = this.activitifilter.getCurrentFilter();
}

6
demo-shell-ng2/index.html
View File

@ -14,6 +14,9 @@
<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 href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for Safari (pre-10.x) -->
@ -34,6 +37,9 @@
<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
<script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<script src="node_modules/chart.js/dist/Chart.bundle.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>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>

9
demo-shell-ng2/systemjs.config.js
View File

@ -23,6 +23,8 @@
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'moment': 'npm:moment/min/moment.min.js',
'ng2-charts' : 'npm:ng2-charts',
'ng2-translate': 'npm:ng2-translate',
'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
@ -37,7 +39,8 @@
'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist',
'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-alfresco-userinfo': 'npm:ng2-alfresco-userinfo/dist',
'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
@ -49,6 +52,7 @@
defaultExtension: 'js'
},
'ng2-translate': { defaultExtension: 'js' },
'ng2-charts': { defaultExtension: 'js' },
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
@ -63,7 +67,8 @@
'ng2-alfresco-webscript': { main: './index.js', defaultExtension: 'js'},
'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-alfresco-userinfo': { main: './index.js', defaultExtension: 'js'},
'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'}
}
});
})(this);

25
ng2-components/ng2-activiti-analytics/index.ts
View File

@ -17,13 +17,27 @@
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CoreModule } from 'ng2-alfresco-core';
import { AnalyticsComponent } from './src/components/analytics.component';
import { AnalyticsReportListComponent } from './src/components/analytics-report-list.component';
import { AnalyticsComponent } from './src/components/analytics.component';
import { AnalyticsService } from './src/services/analytics.service';
import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
export * from './src/components/analytics.component';
export * from './src/components/analytics-report-list.component';
export * from './src/services/analytics.service';
export * from './src/components/widgets/index';
export const ANALYTICS_DIRECTIVES: any[] = [
AnalyticsComponent
AnalyticsComponent,
AnalyticsReportListComponent,
WIDGET_DIRECTIVES
];
export const ANALYTICS_PROVIDERS: any[] = [
AnalyticsService
];
@NgModule({
@ -32,7 +46,10 @@ export const ANALYTICS_DIRECTIVES: any[] = [
],
declarations: [
...ANALYTICS_DIRECTIVES,
CHART_DIRECTIVES
...CHART_DIRECTIVES
],
providers: [
...ANALYTICS_PROVIDERS
],
exports: [
...ANALYTICS_DIRECTIVES
@ -43,7 +60,7 @@ export class AnalyticsModule {
return {
ngModule: AnalyticsModule,
providers: [
...ANALYTICS_DIRECTIVES
...ANALYTICS_PROVIDERS
]
};
}

31
ng2-components/ng2-activiti-analytics/karma-test-shim.js
View File

@ -52,10 +52,11 @@ var map = {
// other libraries
'rxjs': 'npm:rxjs',
'ng2-translate': 'npm:ng2-translate',
'ng2-charts' : 'npm:ng2-charts',
'moment' : 'npm:moment/min/moment.min.js',
'alfresco-js-api': 'npm:alfresco-js-api/dist',
'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist',
'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist'
};
@ -63,9 +64,11 @@ var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'ng2-translate': { defaultExtension: 'js' },
'ng2-charts': { defaultExtension: 'js' },
'moment': { defaultExtension: 'js' },
'ng2-charts' : '/base/node_modules/ng2-charts',
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}
};
@ -83,17 +86,17 @@ System.import('@angular/core/testing')
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];
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());
})
coreTesting.TestBed.initTestEnvironment(
browserTesting.BrowserDynamicTestingModule,
browserTesting.platformBrowserDynamicTesting());
})
}
// Import all spec files and start karma
@ -102,6 +105,6 @@ function initTesting () {
allSpecFiles.map(function (moduleName) {
return System.import(moduleName);
})
)
.then(__karma__.start, __karma__.error);
)
.then(__karma__.start, __karma__.error);
}

7
ng2-components/ng2-activiti-analytics/karma.conf.js
View File

@ -34,7 +34,6 @@ module.exports = function (config) {
'node_modules/alfresco-js-api/dist/alfresco-js-api.js',
{pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
{pattern: 'node_modules/ng2-translate/**/*.js.map', included: false, watched: false},
'karma-test-shim.js',
@ -44,9 +43,9 @@ module.exports = function (config) {
{pattern: 'dist/**/*.css', included: true, served: true, watched: true},
// ng2-components
{pattern: 'node_modules/ng2-alfresco-core/dist/**/*.*', included: false, served: true, watched: false},
{pattern: 'node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false},
{ pattern: 'node_modules/ng2-alfresco-core/dist/**/*.*', included: false, served: true, watched: false },
{ pattern: 'node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false },
{ pattern: 'node_modules/moment/**/*.js', included: false, served: true, watched: false },
// paths to support debugging with source maps in dev tools
{pattern: 'src/**/*.ts', included: false, watched: false},

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

@ -3,6 +3,8 @@
"description": "Activiti Angular2 Analytics 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",
@ -21,8 +23,16 @@
"prepublish": "npm run build",
"travis": "echo 'placeholder'"
},
"main": "./dist/index.js",
"typings": "./dist/index.d.ts",
"contributors": [
{
"name": "Mario Romano",
"email": "mario.romnao@alfresco.com"
},
{
"name": "Maurizio Vitale",
"email": "maurizio.vitale84@gmail.com"
}
],
"repository": {
"type": "git",
"url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@ -30,21 +40,6 @@
"bugs": {
"url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
},
"license": "Apache-2.0",
"contributors": [
{
"name": "Mario Romano",
"email": "mario.romnao@alfresco.com"
}
],
"keywords": [
"ng2",
"angular",
"angular2",
"analytics",
"alfresco-component",
"alfresco"
],
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
@ -56,38 +51,44 @@
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"@types/node": "^6.0.42",
"alfresco-js-api": "^0.3.0",
"chart.js": "^2.1.4",
"core-js": "^2.4.1",
"md-date-time-picker": "^2.2.0",
"ng2-alfresco-core": "0.3.2",
"ng2-charts": "1.1.0",
"ng2-translate": "2.5.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"ng2-translate": "2.5.0",
"alfresco-js-api": "^0.3.0",
"ng2-alfresco-core": "0.3.2",
"ng2-charts": "1.1.0",
"chart.js": "^2.1.4"
"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",
"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-mocha-reporter": "2.0.3",
"karma-jasmine-html-reporter": "0.2.0",
"license-check": "1.1.5",
"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",
"remap-istanbul": "0.6.3",
"traceur": "0.0.91",
"tslint": "3.8.1",
"traceur": "^0.0.91",
"tslint": "^3.8.1",
"typescript": "^2.0.3",
"wsrv": "^0.1.5"
},
"keywords": [
"tag",
"alfresco-component"
],
"license-check-config": {
"src": [
"./dist/**/*.js"

0
ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.css Normal file
View File

10
ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.html Normal file
View File

@ -0,0 +1,10 @@
<div class="menu-container">
<ul class='mdl-list'>
<li class="mdl-list__item" (click)="selectReport(report)" *ngFor="let report of reports; let idx = index">
<span [attr.id]="'report-list-' + idx" class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">assignment</i>
<span class="text">{{report.name}}</span>
</span>
</li>
</ul>
</div>

131
ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts Normal file
View File

@ -0,0 +1,131 @@
/*!
* @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 { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { CoreModule } from 'ng2-alfresco-core';
import { AnalyticsReportListComponent } from '../components/analytics-report-list.component';
import { AnalyticsService } from '../services/analytics.service';
import { DebugElement } from '@angular/core';
declare let jasmine: any;
describe('Test ng2-activiti-analytics Report list', () => {
let reportList = [
{'id': 2002, 'name': 'Fake Test Process definition heat map'},
{'id': 2003, 'name': 'Fake Test Process definition overview'},
{'id': 2004, 'name': 'Fake Test Process instances overview'},
{'id': 2005, 'name': 'Fake Test Task overview'},
{'id': 2006, 'name': 'Fake Test Task service level agreement'}
];
let reportSelected = {'id': 2003, 'name': 'Fake Test Process definition overview'};
let component: any;
let fixture: ComponentFixture<AnalyticsReportListComponent>;
let debug: DebugElement;
let element: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
CoreModule
],
declarations: [
AnalyticsReportListComponent
],
providers: [
AnalyticsService
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AnalyticsReportListComponent);
component = fixture.componentInstance;
debug = fixture.debugElement;
element = fixture.nativeElement;
});
describe('Rendering tests', () => {
beforeEach(() => {
jasmine.Ajax.install();
});
afterEach(() => {
jasmine.Ajax.uninstall();
});
it('Report return true with undefined reports', () => {
expect(component.isReportsEmpty()).toBeTruthy();
});
it('Report return true with an empty reports', () => {
component.reports = [];
expect(component.isReportsEmpty()).toBeTruthy();
});
it('Report render the report list relative to a single app', (done) => {
fixture.detectChanges();
component.onSuccess.subscribe(() => {
fixture.detectChanges();
expect(element.querySelector('#report-list-0 > i').innerHTML).toBe('assignment');
expect(element.querySelector('#report-list-0 > span').innerHTML).toBe('Fake Test Process definition heat map');
expect(element.querySelector('#report-list-1 > span').innerHTML).toBe('Fake Test Process definition overview');
expect(element.querySelector('#report-list-2 > span').innerHTML).toBe('Fake Test Process instances overview');
expect(element.querySelector('#report-list-3 > span').innerHTML).toBe('Fake Test Task overview');
expect(element.querySelector('#report-list-4 > span').innerHTML).toBe('Fake Test Task service level agreement');
expect(component.isReportsEmpty()).toBeFalsy();
done();
});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
contentType: 'json',
responseText: reportList
});
});
it('Report emit an error with a empty response', (done) => {
fixture.detectChanges();
component.onError.subscribe((err) => {
expect(err).toBeDefined();
done();
});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 404,
contentType: 'json',
responseText: []
});
});
it('Should return the current report when one report is selected', () => {
component.reportClick.subscribe(() => {
expect(component.currentReport).toEqual(reportSelected);
});
component.selectReport(reportSelected);
});
});
});

93
ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts Normal file
View File

@ -0,0 +1,93 @@
/*!
* @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 { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { AnalyticsService } from '../services/analytics.service';
import { ReportModel } from '../models/report.model';
import { Observer } from 'rxjs/Observer';
import { Observable } from 'rxjs/Observable';
@Component({
moduleId: module.id,
selector: 'analytics-report-list',
templateUrl: './analytics-report-list.component.html',
styleUrls: ['./analytics-report-list.component.css']
})
export class AnalyticsReportListComponent implements OnInit {
@Output()
reportClick: EventEmitter<ReportModel> = new EventEmitter<ReportModel>();
@Output()
onSuccess = new EventEmitter();
@Output()
onError = new EventEmitter();
private reportObserver: Observer<any>;
report$: Observable<any>;
currentReport: any;
reports: ReportModel[] = [];
constructor(private auth: AlfrescoAuthenticationService,
private analyticsService: AnalyticsService) {
this.report$ = new Observable<ReportModel>(observer => this.reportObserver = observer).share();
}
ngOnInit() {
this.report$.subscribe((report: ReportModel) => {
this.reports.push(report);
});
this.getReportListByAppId();
}
getReportListByAppId() {
this.analyticsService.getReportList().subscribe(
(res: ReportModel[]) => {
res.forEach((report) => {
this.reportObserver.next(report);
});
this.onSuccess.emit(res);
},
(err: any) => {
this.onError.emit(err);
console.log(err);
},
() => console.log('Reports loaded')
);
}
isReportsEmpty(): boolean {
return this.reports === undefined || (this.reports && this.reports.length === 0);
}
/**
* Select the current report
* @param report
*/
public selectReport(report: any) {
this.currentReport = report;
this.reportClick.emit(report);
}
}

25
ng2-components/ng2-activiti-analytics/src/components/analytics.component.css Normal file
View File

@ -0,0 +1,25 @@
.chart {display: block; width: 100%;}
.dropdown-widget {
width: 100%;
}
.dropdown-widget__select {
width: 100%;
}
.dropdown-widget__invalid .dropdown-widget__select {
border-color: #d50000;
}
.dropdown-widget__invalid .dropdown-widget__label {
color: #d50000;
}
.dropdown-widget__invalid .dropdown-widget__label:after {
background-color: #d50000;
}
.dropdown-widget__invalid .mdl-textfield__error {
visibility: visible !important;
}

130
ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
View File

@ -1,21 +1,113 @@
<div class="col-md-6">
<div *ngIf="reportDetails">
<form [formGroup]="reportForm" novalidate>
<h1>{{reportDetails.name}}</h1>
<div *ngFor="let field of reportDetails.definition.parameters">
<div [ngSwitch]="field.type">
<div *ngSwitchCase="'integer'">
<br>
<number-widget [field]="field"
(fieldChanged)="onNumberChanges(field)"></number-widget>
</div>
<div *ngSwitchCase="'duration'">
<br>
<duration-widget [field]="field"
(fieldChanged)="onDurationChanges($event)"></duration-widget>
</div>
<div *ngSwitchCase="'boolean'">
<br>
<checkbox-widget [field]="field"
(fieldChanged)="onTypeFilteringChanges(field)"></checkbox-widget>
</div>
<div *ngSwitchCase="'status'">
<br>
<dropdown-widget [field]="field"
(fieldChanged)="onStatusChanges(field)"></dropdown-widget>
</div>
<div *ngSwitchCase="'processDefinition'">
<br>
<dropdown-widget [field]="field"
(fieldChanged)="onProcessDefinitionChanges(field)" #processDefinition></dropdown-widget>
</div>
<div *ngSwitchCase="'task'">
<br>
<dropdown-widget [field]="field"
(fieldChanged)="onTaskChanges(field)"></dropdown-widget>
</div>
<div *ngSwitchCase="'dateRange'">
<br>
<date-range-widget [field]="field" [group]="reportForm.controls.dateRange"
(dateRangeChanged)="onDateRangeChange($event)"></date-range-widget>
</div>
<div *ngSwitchCase="'dateInterval'">
<br>
<dropdown-widget [field]="field" [showDefaultOption]="false"
(fieldChanged)="onDateRangeIntervalChange(field)"></dropdown-widget>
</div>
<div *ngSwitchDefault>
<span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
</div>
</div>
</div>
<br><br>
<button type="submit" class="mdl-button mdl-js-button mdl-button--fab" (click)="createReport()" >
<i class="material-icons">refresh</i>
</button>
<div *ngIf="debug">
<p>ReportForm : {{ reportForm.value | json }}</p>
<p>ReportForm valid : {{ reportForm.valid }}</p>
<p>ReportForm status : {{ reportForm.errors | json }}</p>
<p>ReportForm FormGroup valid : {{ reportForm.controls.dateRange.valid | json }}</p>
</div>
</form>
<base-chart class="chart"
[data]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></base-chart>
</div>
<div class="col-md-6">
<base-chart class="chart"
[data]="pieChartData"
[labels]="pieChartLabels"
[chartType]="pieChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></base-chart>
</div>
<div class="col-md-12 text-center" style="margin-top: 10px;">
<button (click)="randomizeType()" style="display: inline-block">Toggle</button>
</div>
<div *ngFor="let report of reports">
<h2>{{report.title}}</h2>
<div [ngSwitch]="report.type">
<div *ngSwitchCase="'pie'">
<div class="col-md-6">
<base-chart class="chart"
[data]="report.data"
[datasets]="report.datasets"
[labels]="report.labels"
[chartType]="report.type"
(chartClick)="chartClicked($event)"></base-chart>
</div>
</div>
<div *ngSwitchCase="'table'">
<table class="table table-responsive table-condensed" style="width: 100%">
<tr>
<th *ngFor="let label of report.labels">{{label | translate}}</th>
</tr>
<tr *ngFor="let rows of report.datasets" style="text-align: center;">
<td *ngFor="let row of rows">{{row | translate }}</td>
</tr>
</table>
</div>
<div *ngSwitchCase="'masterDetailTable'">
<table class="table table-responsive table-condensed" style="width: 100%">
<tr>
<th *ngFor="let label of report.labels">{{label | translate}}</th>
</tr>
<tr *ngFor="let rows of report.datasets" style="text-align: center;">
<td *ngFor="let row of rows">{{row | translate }}</td>
</tr>
</table>
</div>
<div *ngSwitchCase="'bar'">
<div class="col-md-6">
<base-chart class="chart"
[datasets]="report.datasets"
[labels]="report.labels"
[options]="report.options"
[chartType]="report.type"
(chartClick)="chartClicked($event)"></base-chart>
</div>
</div>
<div *ngSwitchDefault>
<span>UNKNOWN WIDGET TYPE: {{report.type}}</span>
</div>
</div>
</div>
</div>
</div>

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

@ -16,16 +16,30 @@
*/
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { AnalyticsComponent } from './analytics.component';
import { DebugElement } from '@angular/core';
import {
AlfrescoAuthenticationService,
AlfrescoSettingsService,
AlfrescoApiService,
CoreModule
} from 'ng2-alfresco-core';
describe('Test ng2-alfresco-analytics analytics component ', () => {
import { AnalyticsReportListComponent } from '../components/analytics-report-list.component';
import { AnalyticsComponent } from '../components/analytics.component';
import { WIDGET_DIRECTIVES } from '../components/widgets/index';
import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
import { AnalyticsService } from '../services/analytics.service';
import { DebugElement } from '@angular/core';
export const ANALYTICS_DIRECTIVES: any[] = [
AnalyticsComponent,
AnalyticsReportListComponent,
WIDGET_DIRECTIVES
];
export const ANALYTICS_PROVIDERS: any[] = [
AnalyticsService
];
describe('Show component HTML', () => {
let component: any;
let fixture: ComponentFixture<AnalyticsComponent>;
@ -37,25 +51,26 @@ describe('Test ng2-alfresco-analytics analytics component ', () => {
imports: [
CoreModule
],
declarations: [AnalyticsComponent],
declarations: [
...ANALYTICS_DIRECTIVES,
...CHART_DIRECTIVES
],
providers: [
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoApiService
...ANALYTICS_PROVIDERS
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AnalyticsComponent);
component = fixture.componentInstance;
debug = fixture.debugElement;
element = fixture.nativeElement;
component = fixture.componentInstance;
fixture.detectChanges();
});
xit('No test', () => {
it('Display component tag base-chart', () => {
expect(true).toBe(true);
});
});
});

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

@ -15,35 +15,170 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, EventEmitter, OnInit, OnChanges, Input, Output, SimpleChanges, ViewChild } from '@angular/core';
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
import { AnalyticsService } from '../services/analytics.service';
import { ReportModel, ReportQuery, ParameterValueModel, ReportParameterModel } from '../models/report.model';
import { Chart } from '../models/chart.model';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import * as moment from 'moment';
@Component({
moduleId: module.id,
selector: 'activiti-analytics',
templateUrl: './analytics.component.html'
templateUrl: './analytics.component.html',
styleUrls: ['./analytics.component.css']
})
export class AnalyticsComponent {
export class AnalyticsComponent implements OnInit, OnChanges {
constructor() {
@ViewChild('processDefinition')
processDefinition: any;
@Input()
reportId: string;
@Output()
onSuccess = new EventEmitter();
@Output()
onError = new EventEmitter();
reportDetails: ReportModel;
reportParamQuery = new ReportQuery();
reports: any[];
reportForm: FormGroup;
debug: boolean = true;
constructor(private translate: AlfrescoTranslationService,
private analyticsService: AnalyticsService,
private formBuilder: FormBuilder ) {
console.log('AnalyticsComponent');
if (translate) {
translate.addTranslationFolder('node_modules/ng2-activiti-analytics/src');
}
}
// lineChart
public lineChartData: Array<any> = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public lineChartType: string = 'line';
public pieChartType: string = 'pie';
ngOnInit() {
let today = moment().format('YYYY-MM-DD');
this.reportForm = this.formBuilder.group({
dateRange: this.formBuilder.group({
startDate: [today, Validators.required],
endDate: [today, Validators.required]
})
});
}
// Pie
public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
public pieChartData: number[] = [300, 500, 100];
ngOnChanges(changes: SimpleChanges) {
let reportId = changes['reportId'];
if (reportId && reportId.currentValue) {
this.getParamsReports(reportId.currentValue);
return;
}
}
public randomizeType(): void {
this.lineChartType = this.lineChartType === 'line' ? 'bar' : 'line';
this.pieChartType = this.pieChartType === 'doughnut' ? 'pie' : 'doughnut';
public getParamsReports(reportId: string) {
this.reset();
this.analyticsService.getParamsReports(reportId).subscribe(
(res: ReportModel) => {
this.reportDetails = res;
this.retriveParameterOptions();
this.onSuccess.emit(res);
},
(err: any) => {
this.onError.emit(err);
console.log(err);
},
() => console.log('Login done')
);
}
private retriveParameterOptions() {
this.reportDetails.definition.parameters.forEach((param) => {
this.analyticsService.getParamValuesByType(param.type).subscribe(
(opts: ParameterValueModel[]) => {
param.options = opts;
},
(err: any) => {
console.log(err);
},
() => console.log(`${param.type} options loaded`)
);
});
}
public createReport() {
this.analyticsService.getReportsByParams(this.reportDetails.id, this.reportParamQuery).subscribe(
(res: Chart[]) => {
this.reports = res;
this.onSuccess.emit(res);
},
(err: any) => {
this.onError.emit(err);
console.log(err);
},
() => console.log('Login done')
);
}
onNumberChanges(field: any) {
this.reset();
this.reportParamQuery.slowProcessInstanceInteger = parseInt(field.value, 10);
}
onDurationChanges(field: any) {
this.reset();
if (field && field.value) {
this.reportParamQuery.duration = parseInt(field.value, 10);
}
}
onTypeFilteringChanges(field: any) {
this.reset();
this.reportParamQuery.typeFiltering = field.value;
}
onStatusChanges(field: any) {
this.reset();
this.reportParamQuery.status = field.value;
}
onProcessDefinitionChanges(field: any) {
this.reset();
if (field.value) {
this.reportParamQuery.processDefinitionId = field.value;
this.analyticsService.getTasksByProcessDefinitionId(this.reportId, this.reportParamQuery.processDefinitionId).subscribe(
(res: any) => {
let paramTask: ReportParameterModel = this.reportDetails.definition.parameters.find(p => p.type === 'task');
if (paramTask) {
paramTask.options = res;
}
});
}
}
onTaskChanges(field: any) {
this.reset();
this.reportParamQuery.taskName = field.value;
}
onDateRangeChange(dateRange: any) {
this.reset();
this.reportParamQuery.dateRange.startDate = dateRange.startDate;
this.reportParamQuery.dateRange.endDate = dateRange.endDate;
}
onDateRangeIntervalChange(field: any) {
this.reset();
this.reportParamQuery.dateRangeInterval = field.value;
}
public reset() {
this.reports = null;
}
public chartClicked(e: any): void {
@ -53,4 +188,8 @@ export class AnalyticsComponent {
public chartHovered(e: any): void {
console.log(e);
}
public convertNumber(value: string): number {
return parseInt(value, 10);
}
}

9
ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.html Normal file
View File

@ -0,0 +1,9 @@
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="field.id">
<input type="checkbox"
[attr.id]="field.id"
class="mdl-checkbox__input"
[checked]="field.value"
[(ngModel)]="field.value"
(ngModelChange)="changeValue(field)">
<span class="mdl-checkbox__label">{{field.nameKey | translate}}</span>
</label>

34
ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts Normal file
View File

@ -0,0 +1,34 @@
/*!
* @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 { Component } from '@angular/core';
import { WidgetComponent } from './../widget.component';
declare var componentHandler;
@Component({
moduleId: module.id,
selector: 'checkbox-widget',
templateUrl: './checkbox.widget.html'
})
export class CheckboxWidget extends WidgetComponent {
constructor() {
super();
}
}

3
ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.css Normal file
View File

@ -0,0 +1,3 @@
.date-picker-mdl {
margin-left: 20px;
}

48
ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.html Normal file
View File

@ -0,0 +1,48 @@
<label>{{field.nameKey | translate}}</label><br>
<div [formGroup]="dateRange">
<small *ngIf="dateRange.errors && dateRange.errors.greaterThan" [hidden]="!dateRange.errors" class="text-danger">
Start date must be less than End date
</small>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input"
formControlName="startDate"
type="text"
(onOk)="onOkStart(startElement)"
id="startDateInput" #startElement>
<label class="mdl-textfield__label" for="startDateInput">Start Date</label>
<small [hidden]="dateRange.controls.startDate.valid" class="text-danger">
Start is required
</small>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<button id="startDateButton" class="mdl-button mdl-js-button mdl-button--fab date-picker-mdl">
<i class="material-icons">date_range</i>
</button>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input"
formControlName="endDate"
type="text"
(onOk)="onOkEnd(endElement)"
id="endDateInput" #endElement>
<label class="mdl-textfield__label" for="endDateInput">End Date</label>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<button id="endDateButton" class="mdl-button mdl-js-button mdl-button--fab date-picker-mdl">
<i class="material-icons">date_range</i>
</button>
</div>
</div>
</div>
<div *ngIf="debug">
<p>FormGroup : {{ dateRange.value | json }}</p>
<p>FormGroup valid : {{ dateRange.valid }}</p>
<p>FormGroup status : {{ dateRange.errors | json }}</p>
<p>FormGroup start status : {{ dateRange.controls.startDate.errors | json }}</p>
<p>FormGroup end status: {{ dateRange.controls.endDate.errors | json }}</p>
</div>

137
ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts Normal file
View File

@ -0,0 +1,137 @@
/*!
* @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 { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import { AbstractControl, FormGroup, FormBuilder } from '@angular/forms';
import { WidgetComponent } from './../widget.component';
import * as moment from 'moment';
declare let mdDateTimePicker: any;
function dateCheck(c: AbstractControl) {
let startDate = moment(c.get('startDate').value);
let endDate = moment(c.get('endDate').value);
let result = startDate.isAfter(endDate);
return result ? {'greaterThan': true} : null;
}
@Component({
moduleId: module.id,
selector: 'date-range-widget',
templateUrl: './date-range.widget.html',
styleUrls: ['./date-range.widget.css']
})
export class DateRangeWidget extends WidgetComponent {
public static FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
@ViewChild('startElement')
startElement: any;
@ViewChild('endElement')
endElement: any;
@Input('group')
public dateRange: FormGroup;
@Input()
field: any;
@Output()
dateRangeChanged: EventEmitter<any> = new EventEmitter<any>();
debug: boolean = true;
dialogStart: any = new mdDateTimePicker.default({
type: 'date',
future: moment().add(21, 'years')
});
dialogEnd: any = new mdDateTimePicker.default({
type: 'date',
future: moment().add(21, 'years')
});
constructor(public elementRef: ElementRef,
private formBuilder: FormBuilder) {
super();
}
ngOnInit() {
this.initForm();
this.initSartDateDialog();
this.initEndDateDialog();
}
initForm() {
this.dateRange.setValidators(dateCheck);
this.dateRange.valueChanges.subscribe(data => this.onGroupValueChanged(data));
}
initSartDateDialog() {
this.dialogStart.trigger = this.startElement.nativeElement;
let startDateButton = document.getElementById('startDateButton');
startDateButton.addEventListener('click', () => {
this.dialogStart.toggle();
});
}
initEndDateDialog() {
this.dialogEnd.trigger = this.endElement.nativeElement;
let endDateButton = document.getElementById('endDateButton');
endDateButton.addEventListener('click', () => {
this.dialogEnd.toggle();
});
}
onOkStart(inputEl: HTMLInputElement) {
let date = this.dialogStart.time.format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
this.dateRange.patchValue({
startDate: date
});
let materialElemen: any = inputEl.parentElement;
if (materialElemen) {
materialElemen.MaterialTextfield.change(date);
}
}
onOkEnd(inputEl: HTMLInputElement) {
let date = this.dialogEnd.time.format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
this.dateRange.patchValue({
endDate: date
});
let materialElemen: any = inputEl.parentElement;
if (materialElemen) {
materialElemen.MaterialTextfield.change(date);
}
}
onGroupValueChanged(data: any) {
if (this.dateRange.valid) {
let dateStart = this.convertMomentDate(this.dateRange.controls['startDate'].value);
let endStart = this.convertMomentDate(this.dateRange.controls['endDate'].value);
this.dateRangeChanged.emit({startDate: dateStart, endDate: endStart});
}
}
public convertMomentDate(date: string) {
return moment(date, DateRangeWidget.FORMAT_DATE_ACTIVITI, true).format(DateRangeWidget.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
}
}

19
ng2-components/ng2-activiti-analytics/src/components/widgets/date/date.widget.css Normal file
View File

@ -0,0 +1,19 @@
.date-widget {
width: 100%;
}
.date-widget__invalid .mdl-textfield__input {
border-color: #d50000;
}
.date-widget__invalid .mdl-textfield__label {
color: #d50000;
}
.date-widget__invalid .mdl-textfield__label:after {
background-color: #d50000;
}
.date-widget__invalid .mdl-textfield__error {
visibility: visible !important;
}

10
ng2-components/ng2-activiti-analytics/src/components/widgets/date/date.widget.html Normal file
View File

@ -0,0 +1,10 @@
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget"
[class.date-widget__invalid]="!field.isValid">
<input class="mdl-textfield__input"
type="text"
[attr.id]="field.id"
[(ngModel)]="field.value"
[disabled]="field.readOnly">
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.nameKey | translate}} (d-M-yyyy)</label>
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
</div>

51
ng2-components/ng2-activiti-analytics/src/components/widgets/date/date.widget.ts Normal file
View File

@ -0,0 +1,51 @@
/*!
* @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 { Component, ElementRef } from '@angular/core';
import { WidgetComponent } from './../widget.component';
@Component({
moduleId: module.id,
selector: 'date-widget',
templateUrl: './date.widget.html',
styleUrls: ['./date.widget.css']
})
export class DateWidget extends WidgetComponent {
constructor(private elementRef: ElementRef) {
super();
}
setupMaterialComponents(componentHandler: any): boolean {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
if (this.elementRef && this.hasValue()) {
let el = this.elementRef.nativeElement;
let container = el.querySelector('.mdl-textfield');
if (container) {
container.MaterialTextfield.change(this.field.value);
}
}
return true;
}
return false;
}
}

23
ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.css Normal file
View File

@ -0,0 +1,23 @@
.dropdown-widget {
width: 100%;
}
.dropdown-widget__select {
width: 100%;
}
.dropdown-widget__invalid .dropdown-widget__select {
border-color: #d50000;
}
.dropdown-widget__invalid .dropdown-widget__label {
color: #d50000;
}
.dropdown-widget__invalid .dropdown-widget__label:after {
background-color: #d50000;
}
.dropdown-widget__invalid .mdl-textfield__error {
visibility: visible !important;
}

8
ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.html Normal file
View File

@ -0,0 +1,8 @@
<div class="dropdown-widget">
<label class="dropdown-widget__label" [attr.for]="field.id">{{field.nameKey | translate}}</label>
<select class="dropdown-widget__select"
[(ngModel)]="field.value" (ngModelChange)="changeValue($event)" required>
<option *ngIf="showDefaultOption">{{defaultOptionText}}</option>
<option *ngFor="let opt of field.options" [value]="opt.id">{{opt.label}}</option>
</select>
</div>

50
ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts Normal file
View File

@ -0,0 +1,50 @@
/*!
* @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 { Component, Input, Output, EventEmitter } from '@angular/core';
import { WidgetComponent } from './../widget.component';
@Component({
moduleId: module.id,
selector: 'dropdown-widget',
templateUrl: './dropdown.widget.html',
styleUrls: ['./dropdown.widget.css']
})
export class DropdownWidget extends WidgetComponent {
@Input()
field: any;
@Output()
fieldChanged: EventEmitter<any> = new EventEmitter<any>();
@Input()
showDefaultOption: boolean = true;
@Input()
defaultOptionText: string = 'Choose One';
constructor() {
super();
}
handleError(error: any) {
console.error(error);
}
}

19
ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.css Normal file
View File

@ -0,0 +1,19 @@
.number-widget {
width: 100%;
}
.number-widget__invalid .mdl-textfield__input {
border-color: #d50000;
}
.number-widget__invalid .mdl-textfield__label {
color: #d50000;
}
.number-widget__invalid .mdl-textfield__label:after {
background-color: #d50000;
}
.number-widget__invalid .mdl-textfield__error {
visibility: visible !important;
}

19
ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html Normal file
View File

@ -0,0 +1,19 @@
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label number-widget">
<input class="mdl-textfield__input"
type="text"
pattern="-?[0-9]*(\.[0-9]+)?"
[attr.id]="field.id"
[(ngModel)]="field.value"
(ngModelChange)="calculateDuration()">
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.nameKey | translate}}</label>
</div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div style="margin-top: 30px">
<dropdown-widget [field]="duration" [showDefaultOption]="false"
(fieldChanged)="calculateDuration()"></dropdown-widget>
</div>
</div>
</div>

59
ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts Normal file
View File

@ -0,0 +1,59 @@
/*!
* @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 { Component, ElementRef, OnInit } from '@angular/core';
import { NumberWidget } from './../number/number.widget';
import { ReportParameterModel, ParameterValueModel } from './../../../models/report.model';
@Component({
moduleId: module.id,
selector: 'duration-widget',
templateUrl: './duration.widget.html',
styleUrls: ['./duration.widget.css']
})
export class DurationWidget extends NumberWidget implements OnInit {
duration: ReportParameterModel;
currentValue: number;
constructor(public elementRef: ElementRef) {
super(elementRef);
}
ngOnInit() {
if (this.field.value === null) {
this.field.value = 0;
}
let paramOptions: ParameterValueModel[] = [];
paramOptions.push(new ParameterValueModel({id: '1', name: 'Seconds'}));
paramOptions.push(new ParameterValueModel({id: '60', name: 'Minutes'}));
paramOptions.push(new ParameterValueModel({id: '3600', name: 'Hours'}));
paramOptions.push(new ParameterValueModel({id: '86400', name: 'Days', selected: true}));
this.duration = new ReportParameterModel({id: 'duration', name: 'duration', options: paramOptions});
this.duration.value = paramOptions[0].id;
}
public calculateDuration() {
if (this.field && this.duration.value ) {
this.currentValue = parseInt(this.field.value, 10) * parseInt(this.duration.value, 10);
this.fieldChanged.emit({value: this.currentValue});
}
}
}

40
ng2-components/ng2-activiti-analytics/src/components/widgets/index.ts Normal file
View File

@ -0,0 +1,40 @@
/*!
* @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 { DropdownWidget } from './dropdown/dropdown.widget';
import { NumberWidget } from './number/number.widget';
import { DurationWidget } from './duration/duration.widget';
import { CheckboxWidget } from './checkbox/checkbox.widget';
import { DateWidget } from './date/date.widget';
import { DateRangeWidget } from './date-range/date-range.widget';
// primitives
export * from './dropdown/dropdown.widget';
export * from './number/number.widget';
export * from './duration/duration.widget';
export * from './checkbox/checkbox.widget';
export * from './date/date.widget';
export * from './date-range/date-range.widget';
export const WIDGET_DIRECTIVES: any[] = [
DropdownWidget,
NumberWidget,
DurationWidget,
CheckboxWidget,
DateWidget,
DateRangeWidget
];

19
ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.css Normal file
View File

@ -0,0 +1,19 @@
.number-widget {
width: 100%;
}
.number-widget__invalid .mdl-textfield__input {
border-color: #d50000;
}
.number-widget__invalid .mdl-textfield__label {
color: #d50000;
}
.number-widget__invalid .mdl-textfield__label:after {
background-color: #d50000;
}
.number-widget__invalid .mdl-textfield__error {
visibility: visible !important;
}

9
ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.html Normal file
View File

@ -0,0 +1,9 @@
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label number-widget">
<input class="mdl-textfield__input"
type="text"
pattern="-?[0-9]*(\.[0-9]+)?"
[attr.id]="field.id"
[(ngModel)]="field.value"
(ngModelChange)="changeValue(field)">
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.nameKey | translate}}</label>
</div>

48
ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts Normal file
View File

@ -0,0 +1,48 @@
/*!
* @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 { Component, ElementRef } from '@angular/core';
import { WidgetComponent } from './../widget.component';
@Component({
moduleId: module.id,
selector: 'number-widget',
templateUrl: './number.widget.html',
styleUrls: ['./number.widget.css']
})
export class NumberWidget extends WidgetComponent {
constructor(public elementRef: ElementRef) {
super();
}
setupMaterialComponents(handler: any): boolean {
// workaround for MDL issues with dynamic components
if (handler) {
handler.upgradeAllRegistered();
if (this.elementRef && this.hasValue()) {
let container = this.elementRef.nativeElement.querySelector('.mdl-textfield');
if (container) {
container.MaterialTextfield.change(this.field.value.toString());
}
}
return true;
}
return false;
}
}

68
ng2-components/ng2-activiti-analytics/src/components/widgets/widget.component.ts Normal file
View File

@ -0,0 +1,68 @@
/*!
* @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 { Input, AfterViewInit, Output, EventEmitter, SimpleChanges, OnChanges } from '@angular/core';
declare var componentHandler;
/**
* Base widget component.
*/
export class WidgetComponent implements AfterViewInit, OnChanges {
@Input()
field: any;
@Output()
fieldChanged: EventEmitter<any> = new EventEmitter<any>();
ngOnChanges(changes: SimpleChanges) {
let field = changes['field'];
if (field && field.currentValue) {
this.fieldChanged.emit(field.currentValue.value);
return;
}
}
hasField() {
return this.field ? true : false;
}
hasValue(): boolean {
return this.field &&
this.field.value !== null &&
this.field.value !== undefined;
}
changeValue(field: any) {
this.fieldChanged.emit(field);
}
ngAfterViewInit() {
this.setupMaterialComponents(componentHandler);
}
setupMaterialComponents(handler?: any): boolean {
// workaround for MDL issues with dynamic components
if (handler) {
handler.upgradeAllRegistered();
return true;
}
return false;
}
}

35
ng2-components/ng2-activiti-analytics/src/i18n/en.json
View File

@ -1,5 +1,40 @@
{
"ANALYTICS": {
"TTILE": "ANALYTICS"
},
"__KEY_REPORTING": {
"DEFAULT-REPORTS": {
"PROCESS-DEFINITION-OVERVIEW": {
"GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS": "Total number of process definitions",
"GENERAL-TABLE-TOTAL-PROCESS-INSTANCES": "Total number of process instances",
"GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES": "Total number of active process instances",
"GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES": "Total number of completed process instances"
}
}
},
"REPORTING": {
"DEFAULT-REPORTS": {
"PROCESS-HEAT-MAP": {
"TYPE-FILTERING": "Include all process steps (Unchecking this, will remove pass through steps like start events, gateways, etc.)?"
},
"PROCESS-INSTANCES-OVERVIEW": {
"PROCESS-DEFINITION": "Process definition",
"DATE-RANGE": "Date range",
"SLOW-PROC-INST-NUMBER": "How many of the slowest process instances should be displayed?"
},
"TASK-OVERVIEW": {
"PROCESS-DEFINITION": "Process definition",
"DATE-RANGE": "Date range",
"DATE-RANGE-INTERVAL": "Aggregate dates by"
},
"TASK-SLA": {
"TASK": "Task",
"PROCESS-DEFINITION": "Process definition",
"DATE-RANGE": "Date range",
"SLA-DURATION": "What is the time this task needs to be completed in to be within the SLA?"
}
},
"PROCESS-STATUS": "Process status",
"TASK-STATUS": "Task status"
}
}

160
ng2-components/ng2-activiti-analytics/src/models/chart.model.ts Normal file
View File

@ -0,0 +1,160 @@
/*!
* @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 class Chart {
id: string;
type: string;
constructor(obj?: any) {
this.id = obj && obj.id || null;
if (obj && obj.type) {
this.type = this.convertType(obj.type);
}
}
private convertType(type: string) {
let chartType = '';
switch (type) {
case 'pieChart':
chartType = 'pie';
break;
case 'table':
chartType = 'table';
break;
case 'line':
chartType = 'line';
break;
case 'barChart':
chartType = 'bar';
break;
default:
chartType = 'table';
break;
}
return chartType;
}
}
export class LineChart extends Chart {
title: string;
titleKey: string;
labels: string[] = [];
datasets: any[] = [];
constructor(obj?: any) {
super(obj);
this.title = obj && obj.title || null;
this.titleKey = obj && obj.titleKey || null;
this.labels = obj && obj.columnNames.slice(1, obj.columnNames.length);
obj.rows.forEach((value: any) => {
this.datasets.push({data: value.slice(1, value.length), label: value[0]});
});
}
}
export class BarChart extends Chart {
title: string;
titleKey: string;
labels: string[] = [];
datasets: any[] = [];
data: any[] = [];
options: any = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
}
};
constructor(obj?: any) {
super(obj);
this.title = obj && obj.title || null;
this.titleKey = obj && obj.titleKey || null;
obj.values.forEach((params: any) => {
let dataValue = [];
params.values.forEach((info: any) => {
info.forEach((value: any, index: any) => {
if (index % 2 === 0) {
this.labels.push(value);
} else {
dataValue.push(value);
}
});
});
this.datasets.push({data: dataValue, label: params.key});
});
}
}
export class TableChart extends Chart {
title: string;
titleKey: string;
labels: string[] = [];
datasets: any[] = [];
constructor(obj?: any) {
super(obj);
this.title = obj && obj.title || null;
this.titleKey = obj && obj.titleKey || null;
this.labels = obj && obj.columnNames;
this.datasets = obj && obj.rows;
}
}
export class HeatMapChart extends Chart {
title: string;
titleKey: string;
labels: string[] = [];
datasets: any[] = [];
constructor(obj?: any) {
super(obj);
this.title = obj && obj.title || null;
this.titleKey = obj && obj.titleKey || null;
this.labels = obj && obj.columnNames;
this.datasets = obj && obj.rows;
}
}
export class PieChart extends Chart {
title: string;
titleKey: string;
labels: string[] = [];
data: string[] = [];
constructor(obj?: any) {
super(obj);
this.title = obj && obj.title || null;
this.titleKey = obj && obj.titleKey || null;
if (obj.values) {
obj.values.forEach((value: any) => {
this.add(value.key, value.y);
});
}
}
add(label: string, data: string) {
this.labels.push(label);
this.data.push(data);
}
}

136
ng2-components/ng2-activiti-analytics/src/models/report.model.ts Normal file
View File

@ -0,0 +1,136 @@
/*!
* @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.
*/
/**
*
* This object represent the report definition.
*
*
* @returns {ReportModel} .
*/
export class ReportModel {
id: number;
name: string;
definition: ReportParametersModel;
created: string;
constructor(obj?: any) {
this.id = obj && obj.id;
this.name = obj && obj.name || null;
if (obj && obj.definition) {
this.definition = new ReportParametersModel(JSON.parse(obj.definition));
}
this.created = obj && obj.created || null;
}
}
export class ReportParametersModel {
parameters: ReportParameterModel[] = [];
constructor(obj?: any) {
obj.parameters.forEach((params: any) => {
let reportParamsModel = new ReportParameterModel(params);
this.parameters.push(reportParamsModel);
});
}
findParam(name: string): ReportParameterModel {
this.parameters.forEach((param) => {
return param.type === name ? param : null;
});
return null;
}
}
/**
*
* This object represent the report parameter definition.
*
*
* @returns {ReportParameterModel} .
*/
export class ReportParameterModel {
id: string;
name: string;
nameKey: string;
type: string;
value: string;
options: ParameterValueModel[];
dependsOn: string;
constructor(obj?: any) {
this.id = obj && obj.id;
this.name = obj && obj.name || null;
this.nameKey = obj && obj.nameKey || null;
this.type = obj && obj.type || null;
this.value = obj && obj.value || null;
this.options = obj && obj.options || null;
this.dependsOn = obj && obj.dependsOn || null;
}
}
export class ParameterValueModel {
id: string;
name: string;
version: string;
value: string;
constructor(obj?: any) {
this.id = obj && obj.id;
this.name = obj && obj.name || null;
this.value = obj && obj.value || null;
this.version = obj && obj.version || null;
}
get label () {
return this.version ? `${this.name} (v ${this.version}) ` : this.name;
}
}
export class ReportQuery {
processDefinitionId: string;
status: string;
taskName: string;
typeFiltering: boolean;
dateRange: ReportDateRange;
dateRangeInterval: string;
slowProcessInstanceInteger: number;
duration: number;
constructor(obj?: any) {
this.processDefinitionId = obj && obj.processDefinitionId || null;
this.status = obj && obj.status || null;
this.taskName = obj && obj.taskName || null;
this.dateRangeInterval = obj && obj.dateRangeInterval || null;
this.typeFiltering = obj && obj.typeFiltering || false;
this.slowProcessInstanceInteger = obj && obj.slowProcessInstanceInteger || 0;
this.duration = obj && obj.duration || 0;
this.dateRange = new ReportDateRange(obj);
}
}
export class ReportDateRange {
startDate: string;
endDate: string;
constructor(obj?: any) {
this.startDate = obj && obj.startDate || null;
this.endDate = obj && obj.endDate || null;
}
}

211
ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts Normal file
View File

@ -0,0 +1,211 @@
/*!
* @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 { Injectable } from '@angular/core';
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
import { Observable } from 'rxjs/Rx';
import { Response, Http, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { ReportModel, ParameterValueModel } from '../models/report.model';
import { Chart, PieChart, TableChart, BarChart } from '../models/chart.model';
@Injectable()
export class AnalyticsService {
constructor(private authService: AlfrescoAuthenticationService,
private http: Http,
private alfrescoSettingsService: AlfrescoSettingsService) {
}
/**
* Retrive all the Deployed app
* @returns {Observable<any>}
*/
getReportList(): Observable<any> {
let url = `${this.alfrescoSettingsService.getBPMApiBaseUrl()}/app/rest/reporting/reports`;
let options = this.getRequestOptions();
return this.http
.get(url, options)
.map((res: any) => {
let reports: ReportModel[] = [];
let body = res.json();
body.forEach((report: ReportModel) => {
let reportModel = new ReportModel(report);
reports.push(reportModel);
});
if (body && body.length === 0) {
return this.createDefaultReports();
}
return reports;
}).catch(this.handleError);
}
getParamsReports(reportId: string): Observable<any> {
let url = `${this.alfrescoSettingsService.getBPMApiBaseUrl()}/app/rest/reporting/report-params/${reportId}`;
let options = this.getRequestOptions();
return this.http
.get(url, options)
.map((res: any) => {
let body = res.json();
return new ReportModel(body);
}).catch(this.handleError);
}
getParamValuesByType(type: string, reportId?: string, processDefinitionId?: string) {
if (type === 'status') {
return this.getProcessStatusValues();
} else if (type === 'processDefinition') {
return this.getProcessDefinitionsValues();
} else if (type === 'dateInterval') {
return this.getDateIntervalValues();
} else if (type === 'task') {
return this.getTasksByProcessDefinitionId(reportId, processDefinitionId);
} else {
return Observable.create(observer => {
observer.next(null);
observer.complete();
});
}
}
getProcessStatusValues(): Observable<any> {
let paramOptions: ParameterValueModel[] = [];
paramOptions.push(new ParameterValueModel({id: 'All', name: 'All'}));
paramOptions.push(new ParameterValueModel({id: 'Active', name: 'Active'}));
paramOptions.push(new ParameterValueModel({id: 'Complete', name: 'Complete'}));
return Observable.create(observer => {
observer.next(paramOptions);
observer.complete();
});
}
getDateIntervalValues(): Observable<any> {
let paramOptions: ParameterValueModel[] = [];
paramOptions.push(new ParameterValueModel({id: 'byHour', name: 'By hour'}));
paramOptions.push(new ParameterValueModel({id: 'byDay', name: 'By day'}));
paramOptions.push(new ParameterValueModel({id: 'byWeek', name: 'By week'}));
paramOptions.push(new ParameterValueModel({id: 'byMonth', name: 'By month'}));
paramOptions.push(new ParameterValueModel({id: 'byYear', name: 'By year'}));
return Observable.create(observer => {
observer.next(paramOptions);
observer.complete();
});
}
getProcessDefinitionsValues(appId?: string): Observable<any> {
let url = `${this.alfrescoSettingsService.getBPMApiBaseUrl()}/app/rest/reporting/process-definitions`;
let params: URLSearchParams;
if (appId) {
params = new URLSearchParams();
params.set('appDefinitionId', appId);
}
let options = this.getRequestOptions(params);
return this.http
.get(url, options)
.map((res: any) => {
let paramOptions: ParameterValueModel[] = [];
let body = res.json();
body.forEach((opt) => {
paramOptions.push(new ParameterValueModel(opt));
});
return paramOptions;
}).catch(this.handleError);
}
getTasksByProcessDefinitionId(reportId: string, processDefinitionId: string): Observable<any> {
if (processDefinitionId) {
let url = `${this.alfrescoSettingsService.getBPMApiBaseUrl()}/app/rest/reporting/report-params/${reportId}/tasks`;
let params: URLSearchParams;
if (processDefinitionId) {
params = new URLSearchParams();
params.set('processDefinitionId', processDefinitionId);
}
let options = this.getRequestOptions(params);
return this.http
.get(url, options)
.map((res: any) => {
let paramOptions: ParameterValueModel[] = [];
let body = res.json();
body.forEach((opt) => {
paramOptions.push(new ParameterValueModel({id: opt, name: opt}));
});
return paramOptions;
}).catch(this.handleError);
} else {
return Observable.create(observer => {
observer.next(null);
observer.complete();
});
}
}
getReportsByParams(reportId: number, paramsQuery: any): Observable<any> {
let url = `${this.alfrescoSettingsService.getBPMApiBaseUrl()}/app/rest/reporting/report-params/${reportId}`;
let body = JSON.stringify(paramsQuery);
let options = this.getRequestOptions();
return this.http
.post(url, body, options)
.map((res: any) => {
let elements: Chart[] = [];
let bodyRes = res.json();
bodyRes.elements.forEach((chartData) => {
if (chartData.type === 'pieChart') {
elements.push(new PieChart(chartData));
} else if (chartData.type === 'table') {
elements.push(new TableChart(chartData));
} else if (chartData.type === 'processDefinitionHeatMap') {
elements.push(new TableChart(chartData));
} else if (chartData.type === 'masterDetailTable') {
elements.push(new TableChart(chartData));
} else if (chartData.type === 'barChart') {
elements.push(new BarChart(chartData));
}
});
return elements;
}).catch(this.handleError);
}
public createDefaultReports(): ReportModel[] {
let reports: ReportModel[] = [];
return reports;
}
public getHeaders(): Headers {
return new Headers({
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': this.authService.getTicketBpm()
});
}
public getRequestOptions(param?: any): RequestOptions {
let headers = this.getHeaders();
return new RequestOptions({headers: headers, withCredentials: true, search: param});
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}

3
ng2-components/ng2-alfresco-login/demo/package.json
View File

@ -60,7 +60,8 @@
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"md-date-time-picker": "^2.2.0",
"moment": "2.15.1",
"material-design-icons": "2.2.3",
"material-design-lite": "1.2.1",
"ng2-translate": "2.5.0",