diff --git a/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts b/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts index 79b185cf0f..1990127265 100644 --- a/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts +++ b/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts @@ -93,5 +93,21 @@ export var chartTaskOverview = { ['fake 1 user task', '1', '2.0', '3.0', '4.0', '5.0', '6.0'], ['fake 2 user task', '1', '2.0', '3.0', '4.0', '5.0', '6.0'] ] + }, { + 'id': 'id10931125229538', + 'type': 'multiBarChart', + 'title': 'Task duration', + 'titleKey': 'REPORTING.DEFAULT-REPORTS.TASK-OVERVIEW.TASK-DURATIONS-TITLE', + 'values': [{ + 'key': 'averages', + 'values': [[1, 0], [2, 5], [3, 2]] + }, { + 'key': 'minima', + 'values': [[1, 0], [2, 0], [3, 0]] + }, { + 'key': 'maxima', + 'values': [[1, 0], [2, 29], [3, 29]] + }], + 'yAxisType': 'count' }] }; diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html index e12995435e..1d93ec9754 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html @@ -51,6 +51,23 @@ [chartType]="report.type"> +
+
+
{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
+ + +
+
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts index a0a0211630..ea77c223f8 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts @@ -135,7 +135,7 @@ describe('Test ng2-activiti-analytics Report ', () => { it('Should render the Task overview report ', (done) => { component.onSuccess.subscribe((res) => { expect(res).toBeDefined(); - expect(res.length).toEqual(2); + expect(res.length).toEqual(3); expect(res[0]).toBeDefined(); expect(res[0].type).toEqual('bar'); @@ -166,6 +166,26 @@ describe('Test ng2-activiti-analytics Report ', () => { expect(res[1].datasets[1][5]).toEqual('5.0'); expect(res[1].datasets[1][6]).toEqual('6.0'); + expect(res[2]).toBeDefined(); + expect(res[2].type).toEqual('multiBar'); + expect(res[2].labels).toBeDefined(); + expect(res[2].labels.length).toEqual(3); + expect(res[2].labels[0]).toEqual(1); + expect(res[2].labels[1]).toEqual(2); + expect(res[2].labels[2]).toEqual(3); + expect(res[2].datasets[0].label).toEqual('averages'); + expect(res[2].datasets[0].data[0]).toEqual(0); + expect(res[2].datasets[0].data[1]).toEqual(5); + expect(res[2].datasets[0].data[2]).toEqual(2); + expect(res[2].datasets[1].label).toEqual('minima'); + expect(res[2].datasets[1].data[0]).toEqual(0); + expect(res[2].datasets[1].data[1]).toEqual(0); + expect(res[2].datasets[1].data[2]).toEqual(0); + expect(res[2].datasets[2].label).toEqual('maxima'); + expect(res[2].datasets[2].data[0]).toEqual(0); + expect(res[2].datasets[2].data[1]).toEqual(29); + expect(res[2].datasets[2].data[2]).toEqual(29); + done(); }); diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts index f3b77f8330..d3b159e321 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts @@ -48,6 +48,23 @@ export class AnalyticsComponent implements OnChanges { reports: any[]; + public barChartOptions: any = { + responsive: true, + scales: { + yAxes: [{ + ticks: { + beginAtZero: true, + stepSize: 1 + } + }], + xAxes: [{ + ticks: { + }, + stacked: true + }] + } + }; + constructor(private translate: AlfrescoTranslationService, private analyticsService: AnalyticsService) { console.log('AnalyticsComponent'); @@ -79,4 +96,15 @@ export class AnalyticsComponent implements OnChanges { this.reports = undefined; } } + + public refresh(report): void { + /** + * (My guess), for Angular to recognize the change in the dataset + * it has to change the dataset variable directly, + * so one way around it, is to clone the data, change it and then + * assign it; + */ + let clone = JSON.parse(JSON.stringify(report)); + report.datasets = clone.datasets; + } } 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 ff3f45f590..c876532010 100644 --- a/ng2-components/ng2-activiti-analytics/src/models/chart.model.ts +++ b/ng2-components/ng2-activiti-analytics/src/models/chart.model.ts @@ -41,6 +41,9 @@ export class Chart { case 'barChart': chartType = 'bar'; break; + case 'multiBarChart': + chartType = 'multiBar'; + break; case 'processDefinitionHeatMap': chartType = 'HeatMap'; break; @@ -79,6 +82,7 @@ export class BarChart extends Chart { xAxisType: string; yAxisType: string; options: any = { + responsive: true, scales: { yAxes: [{ ticks: { @@ -87,7 +91,9 @@ export class BarChart extends Chart { } }], xAxes: [{ - ticks: {} + ticks: { + }, + stacked: false }] } }; @@ -99,12 +105,15 @@ export class BarChart extends Chart { this.xAxisType = obj && obj.xAxisType || null; this.yAxisType = obj && obj.yAxisType || null; this.options.scales.xAxes[0].ticks.callback = this.xAxisTickFormatFunction(this.xAxisType); + this.options.scales.yAxes[0].ticks.callback = this.yAxisTickFormatFunction(this.yAxisType); 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); + if (!this.labels.includes(value)) { + this.labels.push(value); + } } else { dataValue.push(value); } @@ -118,13 +127,30 @@ export class BarChart extends Chart { xAxisTickFormatFunction = function (xAxisType) { return function (value) { - if ('date_day' === xAxisType) { - return moment(new Date(value)).format('DD'); - } else if ('date_month' === xAxisType) { - return moment(new Date(value)).format('MMMM'); - } else if ('date_year' === xAxisType) { - return moment(new Date(value)).format('YYYY'); + if (xAxisType !== null && xAxisType !== undefined) { + if ('date_day' === xAxisType) { + return moment(new Date(value)).format('DD'); + } else if ('date_month' === xAxisType) { + return moment(new Date(value)).format('MMMM'); + } else if ('date_year' === xAxisType) { + return moment(new Date(value)).format('YYYY'); + } } + return value; + }; + }; + + yAxisTickFormatFunction = function (yAxisType) { + return function (value) { + if (yAxisType !== null && yAxisType !== undefined) { + if ('count' === yAxisType) { + let label = '' + value; + if (label.indexOf('.') !== -1) { + return ''; + } + } + } + return value; }; }; @@ -133,6 +159,28 @@ export class BarChart extends Chart { } } +export class MultiBarChart extends BarChart { + options: any = { + scales: { + yAxes: [{ + ticks: { + beginAtZero: true, + stepSize: 1 + } + }], + xAxes: [{ + ticks: { + }, + stacked: false + }] + } + }; + + constructor(obj?: any) { + super(obj); + } +} + export class TableChart extends Chart { title: string; titleKey: string; diff --git a/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts b/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts index ea7eb28496..325eb1453a 100644 --- a/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts +++ b/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts @@ -20,7 +20,7 @@ import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfr import { Observable } from 'rxjs/Rx'; import { Response, Http, Headers, RequestOptions, URLSearchParams } from '@angular/http'; import { ReportParametersModel, ParameterValueModel } from '../models/report.model'; -import { Chart, PieChart, TableChart, BarChart, HeatMapChart } from '../models/chart.model'; +import { Chart, PieChart, TableChart, BarChart, HeatMapChart, MultiBarChart } from '../models/chart.model'; @Injectable() export class AnalyticsService { @@ -206,6 +206,8 @@ export class AnalyticsService { elements.push(new TableChart(chartData)); } else if (chartData.type === 'barChart') { elements.push(new BarChart(chartData)); + } else if (chartData.type === 'multiBarChart') { + elements.push(new MultiBarChart(chartData)); } });