mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
Analytics component Angular2 Upgrade
This commit is contained in:
mauriziovitale84
parent
c452f312c9
commit
f40de41f90
@ -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
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
@ -52,7 +52,6 @@ var map = {
|
||||
// other libraries
|
||||
'rxjs': 'npm:rxjs',
|
||||
'ng2-translate': 'npm:ng2-translate',
|
||||
|
||||
'ng2-charts' : 'npm:ng2-charts',
|
||||
|
||||
'alfresco-js-api': 'npm:alfresco-js-api/dist',
|
||||
|
||||
@ -39,9 +39,12 @@ module.exports = function (config) {
|
||||
'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},
|
||||
{pattern: 'dist/**/*.*', included: false, watched: true},
|
||||
|
||||
// ng2-components
|
||||
|
||||
{ pattern: 'node_modules/ng2-alfresco-core/dist/**/*.js', included: false, served: true, watched: false },
|
||||
{ pattern: 'node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false },
|
||||
|
||||
// ng2-components
|
||||
{pattern: 'node_modules/ng2-alfresco-core/dist/**/*.*', included: false, served: true, watched: false},
|
||||
|
||||
@ -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,43 @@
|
||||
"@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",
|
||||
"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"
|
||||
|
||||
@ -1,21 +1,104 @@
|
||||
<div class="col-md-6">
|
||||
<div *ngIf="reportDetails">
|
||||
<form>
|
||||
<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"
|
||||
(dateRangeChanged)="onDateRangeChange($event)"></date-range-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'dateInterval'">
|
||||
<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="btn btn-default" (click)="createReport()">CREATE REPORT</button>
|
||||
</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 *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>
|
||||
@ -15,35 +15,158 @@
|
||||
* 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';
|
||||
|
||||
|
||||
@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[];
|
||||
|
||||
constructor(private translate: AlfrescoTranslationService,
|
||||
private analyticsService: AnalyticsService) {
|
||||
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() {
|
||||
|
||||
// Pie
|
||||
public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
public pieChartData: number[] = [300, 500, 100];
|
||||
}
|
||||
|
||||
public randomizeType(): void {
|
||||
this.lineChartType = this.lineChartType === 'line' ? 'bar' : 'line';
|
||||
this.pieChartType = this.pieChartType === 'doughnut' ? 'pie' : 'doughnut';
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
let reportId = changes['reportId'];
|
||||
if (reportId && reportId.currentValue) {
|
||||
this.getParamsReports(reportId.currentValue);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
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 +176,8 @@ export class AnalyticsComponent {
|
||||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
public convertNumber(value: string): number {
|
||||
return parseInt(value, 10);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user