diff --git a/ng2-components/ng2-activiti-analytics/README.md b/ng2-components/ng2-activiti-analytics/README.md index 108952f702..bc9bae8974 100644 --- a/ng2-components/ng2-activiti-analytics/README.md +++ b/ng2-components/ng2-activiti-analytics/README.md @@ -112,7 +112,7 @@ Follow the 3 steps below: The component shows the list of all the available reports ```html - + ``` Usage example of this component : @@ -132,7 +132,7 @@ import { AnalyticsModule } from 'ng2-activiti-analytics';
- +
` @@ -179,7 +179,9 @@ platformBrowserDynamic().bootstrapModule(AppModule); #### Options -No options. +| Name | Type | Required | Description | +| --- | --- | --- | --- | +| `layoutType` | {string} | required | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value| ## Basic usage example Activiti Analytics @@ -258,6 +260,29 @@ platformBrowserDynamic().bootstrapModule(AppModule); |`reportId` | The report id | |`debug` | Flag to enable or disable the Form values in the console log | +## Basic usage example Analytics Generator + +The component generate and show the charts + +```html + +``` + +#### Events + +| Name | Description | +| --- | --- | +|`onSuccess` | The event is emitted when the charts are loaded | +|`onError` | The event is emitted when an error occur during the loading | + +#### Options + +| Name | Description | +| --- | --- | +|`reportId` | The report id | +|`reportParamQuery` | The object contains all the parameters that the report needs | + + ## Build from sources Alternatively you can build component from sources with the following commands: diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.css b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.css index e0c64c5d75..0f18f22972 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.css +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.css @@ -3,3 +3,8 @@ .analytics-row__entry { cursor: pointer; } + +.report-icons { + margin: 20px 20px 20px 20px; + float: right; +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html index 633e2d7c66..cf15b30497 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html @@ -1,9 +1,18 @@
-
-

{{report.title}}

+
+ +
+
+
-
+
+

{{report.title}}

{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
{{'ANALYTICS.MESSAGES.ZERO-DATA-FOUND' | translate}}
@@ -14,44 +23,51 @@
-
-
{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
-
- - - - - - - -
{{label | translate}}
{{row | translate }}
+
+
+

{{report.title}}

+
{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
+
+ + + + + + + +
{{label | translate}}
{{row | translate }}
+
-
-
{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
-
- - - - - - - -
{{label | translate}}
{{row | translate }}
-
-
- - - - - - - -
{{label | translate}}
{{row | translate }}
+
+
+

{{report.title}}

+
{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
+
+ + + + + + + +
{{label | translate}}
{{row | translate }}
+
+
+ + + + + + + +
{{label | translate}}
{{row | translate }}
+
-
+
+

{{report.title}}

{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
-
+
+

{{report.title}}

{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
- +
+

{{report.title}}

+ +
{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{report.type}} diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts index 77313de50d..e94809f961 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts @@ -135,6 +135,44 @@ describe('AnalyticsGeneratorComponent', () => { }); }); + it('Should render the Process definition overview report when onchanges is called ', (done) => { + component.onSuccess.subscribe((res) => { + expect(res).toBeDefined(); + expect(res.length).toEqual(3); + + expect(res[0]).toBeDefined(); + expect(res[0].type).toEqual('table'); + expect(res[0].datasets).toBeDefined(); + expect(res[0].datasets.length).toEqual(4); + expect(res[0].datasets[0][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS'); + expect(res[0].datasets[0][1]).toEqual('9'); + expect(res[0].datasets[1][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES'); + expect(res[0].datasets[1][1]).toEqual('41'); + expect(res[0].datasets[2][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES'); + expect(res[0].datasets[2][1]).toEqual('3'); + expect(res[0].datasets[3][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES'); + expect(res[0].datasets[3][1]).toEqual('38'); + + expect(res[1]).toBeDefined(); + expect(res[1].type).toEqual('pie'); + + expect(res[2]).toBeDefined(); + expect(res[2].type).toEqual('table'); + + done(); + }); + + component.reportId = 1001; + component.reportParamQuery = new ReportQuery({status: 'All'}); + component.ngOnChanges(); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.chartProcessDefOverview + }); + }); + it('Should render the Task overview report ', (done) => { component.onSuccess.subscribe((res) => { expect(res).toBeDefined(); diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts index 09097365c8..9625ada99a 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts @@ -44,6 +44,7 @@ export class AnalyticsGeneratorComponent implements OnChanges { reports: Chart[]; showDetails: boolean = false; + currentChartPosition: number; public barChartOptions: any = { responsive: true, @@ -83,6 +84,9 @@ export class AnalyticsGeneratorComponent implements OnChanges { this.analyticsService.getReportsByParams(reportId, reportParamQuery).subscribe( (res: Chart[]) => { this.reports = res; + if (this.reports) { + this.selectFirstReport(); + } this.onSuccess.emit(res); }, (err: any) => { @@ -116,4 +120,16 @@ export class AnalyticsGeneratorComponent implements OnChanges { isShowDetails(): boolean { return this.showDetails; } + + isCurrent(position: number) { + return position === this.currentChartPosition ? true : false; + } + + selectCurrent(position: number) { + this.currentChartPosition = position; + } + + selectFirstReport() { + this.selectCurrent(0); + } } diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.css b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.css index 073fb82bbd..e9065e2264 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.css +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.css @@ -16,4 +16,37 @@ .activiti-filters__entry.active .activiti-filters__entry-icon { color: rgb(68,138,255); -} \ No newline at end of file +} + +.application-title { + color: white; + z-index: 7; +} + +.logo { + position: absolute; + right: 20px; + top: 35px; + z-index: 6; +} +.logo i{ + font-size: 70px; +} + +.theme-1 { + background-color: #269abc; +} + +.theme-1 .logo i { + color: #168aac; +} +.theme-1 .mdl-card__actions i { + color: #168aac; +} +.theme-1 .mdl-card__actions i:hover { + color: #b7dfea; +} + +.selectedIcon{ + color: #e9f1f3!important; +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.html index 38a6af1268..40a9ba9bf5 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.html @@ -1,5 +1,5 @@
-
    +
    • @@ -8,4 +8,18 @@
    -
\ No newline at end of file +
+
+ +
+

{{report.name}}

+
+
+

{{report.description}}

+
+
+ done +
+
+
+
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts index c437ab7342..7e31bd19b9 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts @@ -21,6 +21,7 @@ import { Observable } from 'rxjs/Rx'; import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core'; import { AnalyticsReportListComponent } from '../components/analytics-report-list.component'; import { AnalyticsService } from '../services/analytics.service'; +import { ReportParametersModel } from '../models/report.model'; declare let jasmine: any; @@ -166,6 +167,59 @@ describe('AnalyticsReportListComponent', () => { component.selectReport(reportSelected); }); + it('Should return true if the current report is selected', () => { + component.selectReport(reportSelected); + expect(component.isSelected(reportSelected)).toBe(true); + }); + + it('Should return false if the current report is different', () => { + component.selectReport(reportSelected); + let anotherReport = {'id': 111, 'name': 'Another Fake Test Process definition overview'}; + expect(component.isSelected(anotherReport)).toBe(false); + }); + + it('Should reload the report list', (done) => { + component.initObserver(); + let report = new ReportParametersModel({'id': 2002, 'name': 'Fake Test Process definition heat map'}); + component.reports = [report]; + expect(component.reports.length).toEqual(1); + component.reload(); + + component.onSuccess.subscribe(() => { + expect(component.reports.length).toEqual(5); + done(); + }); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: reportList + }); + }); + + }); + + describe('layout', () => { + + it('should display a list by default', () => { + fixture.detectChanges(); + expect(component.isGrid()).toBe(false); + expect(component.isList()).toBe(true); + }); + + it('should display a grid when configured to', () => { + component.layoutType = AnalyticsReportListComponent.LAYOUT_GRID; + fixture.detectChanges(); + expect(component.isGrid()).toBe(true); + expect(component.isList()).toBe(false); + }); + + it('should display a list when configured to', () => { + component.layoutType = AnalyticsReportListComponent.LAYOUT_LIST; + fixture.detectChanges(); + expect(component.isGrid()).toBe(false); + expect(component.isList()).toBe(true); + }); }); }); diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts index ca2649f230..2563c0fb6c 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, OnInit, Output, Input } from '@angular/core'; import { Observer, Observable } from 'rxjs/Rx'; import { LogService } from 'ng2-alfresco-core'; import { AnalyticsService } from '../services/analytics.service'; @@ -29,6 +29,12 @@ import { ReportParametersModel } from '../models/report.model'; }) export class AnalyticsReportListComponent implements OnInit { + public static LAYOUT_LIST: string = 'LIST'; + public static LAYOUT_GRID: string = 'GRID'; + + @Input() + layoutType: string = AnalyticsReportListComponent.LAYOUT_LIST; + @Output() reportClick: EventEmitter = new EventEmitter(); @@ -51,11 +57,15 @@ export class AnalyticsReportListComponent implements OnInit { } ngOnInit() { + this.initObserver(); + + this.getReportList(); + } + + initObserver() { this.report$.subscribe((report: ReportParametersModel) => { this.reports.push(report); }); - - this.getReportList(); } /** @@ -131,4 +141,16 @@ export class AnalyticsReportListComponent implements OnInit { this.currentReport = report; this.reportClick.emit(report); } + + isSelected(report: any) { + return this.currentReport === report ? true : false; + } + + isList() { + return this.layoutType === AnalyticsReportListComponent.LAYOUT_LIST; + } + + isGrid() { + return this.layoutType === AnalyticsReportListComponent.LAYOUT_GRID; + } } diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css index 07f935cbb9..947c5d475a 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css @@ -56,7 +56,7 @@ } .report-container { - border: solid 1px rgb(212, 212, 212); + border-bottom: solid 1px rgb(212, 212, 212); padding: 10px 10px 10px 10px; } diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html index 98939ea442..91b38999f5 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html @@ -1,11 +1,5 @@
- - - {{'ANALYTICS.MESSAGES.SETTING-TITLE' | translate}} - -
+
@@ -21,12 +15,15 @@ />
- + +
mode_edit -

{{reportParameters.name}}

- -
-
+

{{reportParameters.name}}

+
+
+

diff --git a/ng2-components/ng2-activiti-analytics/src/i18n/en.json b/ng2-components/ng2-activiti-analytics/src/i18n/en.json index 008eb48aff..9e5cd9ca95 100644 --- a/ng2-components/ng2-activiti-analytics/src/i18n/en.json +++ b/ng2-components/ng2-activiti-analytics/src/i18n/en.json @@ -6,7 +6,7 @@ "FILL-PARAMETER": "Fill in the parameters to generate your report", "NO-DATA-FOUND": "No data found", "ZERO-DATA-FOUND": "There are only zero values", - "SETTING-TITLE": "Change report setting" + "SETTING-TITLE": "Settings" } }, "__KEY_REPORTING": { diff --git a/ng2-components/ng2-activiti-analytics/src/models/chart.model.ts b/ng2-components/ng2-activiti-analytics/src/models/chart.model.ts index 5eaa1b3898..ba875e6e94 100644 --- a/ng2-components/ng2-activiti-analytics/src/models/chart.model.ts +++ b/ng2-components/ng2-activiti-analytics/src/models/chart.model.ts @@ -20,11 +20,13 @@ import * as moment from 'moment'; export class Chart { id: string; type: string; + icon: string; constructor(obj?: any) { this.id = obj && obj.id || null; if (obj && obj.type) { this.type = this.convertType(obj.type); + this.icon = this.getIconType(this.type); } } @@ -58,6 +60,37 @@ export class Chart { } return chartType; } + + private getIconType(type: string): string { + let typeIcon: string = ''; + switch (type) { + case 'pie': + typeIcon = 'pie_chart'; + break; + case 'table': + typeIcon = 'web'; + break; + case 'line': + typeIcon = 'show_chart'; + break; + case 'bar': + typeIcon = 'equalizer'; + break; + case 'multiBar': + typeIcon = 'poll'; + break; + case 'HeatMap': + typeIcon = 'share'; + break; + case 'masterDetailTable': + typeIcon = 'subtitles'; + break; + default: + typeIcon = 'web'; + break; + } + return typeIcon; + } } export class LineChart extends Chart {