Add No data found message

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -5,7 +5,7 @@
             <a id="apps-header" href="#apps" class="mdl-layout__tab is-active">APPS</a>
             <a id="tasks-header" href="#tasks" class="mdl-layout__tab">TASK LIST</a>
             <a id="processes-header" href="#processes" class="mdl-layout__tab">PROCESS LIST</a>
-            <a id="report-header" href="#report" class="mdl-layout__tab">REPORT</a>
+            <a id="report-header" href="#report" class="mdl-layout__tab">ANALYTICS</a>
         </div>
     </header>
     <main class="mdl-layout__content activiti" #tabmain>

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html

@@ -6,7 +6,7 @@
             <div [ngSwitch]="field.type">
                 <div *ngSwitchCase="'integer'">
                     <br>
-                    <number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" [controllerName]="'processInstance'"
+                    <number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" [controllerName]="'slowProcessInstanceInteger'"
                                    [required]="true"></number-widget>
                 </div>
                 <div *ngSwitchCase="'duration'">
@@ -30,7 +30,7 @@
                 </div>
                 <div *ngSwitchCase="'task'">
                     <br>
-                    <dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup" [controllerName]="'task'"
+                    <dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup" [controllerName]="'taskName'"
                                      [required]="true"></dropdown-widget>
                 </div>
                 <div *ngSwitchCase="'dateRange'">
@@ -39,7 +39,7 @@
                 </div>
                 <div *ngSwitchCase="'dateInterval'">
                     <br>
-                    <dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup" [controllerName]="'dateInterval'"
+                    <dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup" [controllerName]="'dateRangeInterval'"
                                      [required]="true" [showDefaultOption]="false"></dropdown-widget>
                 </div>
                 <div *ngSwitchDefault>
@@ -47,14 +47,10 @@
                 </div>
             </div>
         </div>
-        <br><br>
-            <button type="submit" [disabled]="!reportForm.valid" class="mdl-button mdl-js-button mdl-button--fab" (click)="submit(reportForm.value)" >
-                <i class="material-icons">refresh</i>
-            </button>
         <div *ngIf="debug">
             <p>ReportForm valid : {{ reportForm.valid }}</p>
             <p>ReportForm status : {{ reportForm.errors | json }}</p>
-            <p>ReportForm FormGroup valid : {{reportForm.controls.dateRange.valid | json }}</p>
+            <p>ReportForm FormGroup valid : {{reportForm && reportForm.controls.dateRange.valid | json }}</p>
         </div>
         </form>
     </div>

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts

@@ -191,16 +191,16 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => {
                     processDefinitionId: 'FakeProcess:1:22'
                 },
                 taskGroup: {
-                    task: 'FakeTaskName'
+                    taskName: 'FakeTaskName'
                 },
                 durationGroup: {
                     duration: 22
                 },
                 dateIntervalGroup: {
-                    dateInterval: 120
+                    dateRangeInterval: 120
                 },
                 processInstanceGroup: {
-                    processInstance: 2
+                    slowProcessInstanceInteger: 2
                 }
             };
             component.submit(values);
@@ -398,4 +398,9 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => {
             });
         });
     });
+
+    it('Should convert a string in number', () => {
+        let numberConvert = component.convertNumber('2');
+        expect(numberConvert).toEqual(2);
+    });
 });

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts

@@ -55,8 +55,6 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges {
 
     reportParameters: ReportParametersModel;
 
-    reportParamQuery = new ReportQuery();
-
     reportForm: FormGroup;
 
     debug: boolean = false;
@@ -93,7 +91,6 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges {
     }
 
     ngOnChanges(changes: SimpleChanges) {
-        this.initForm();
         let reportId = changes['reportId'];
         if (reportId && reportId.currentValue) {
             this.getReportParams(reportId.currentValue);
@@ -112,13 +109,13 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges {
                 status: new FormControl()
             }),
             processInstanceGroup: new FormGroup({
-                processInstance: new FormControl()
+                slowProcessInstanceInteger: new FormControl()
             }),
             taskGroup: new FormGroup({
-                task: new FormControl()
+                taskName: new FormControl()
             }),
             dateIntervalGroup: new FormGroup({
-                dateInterval: new FormControl()
+                dateRangeInterval: new FormControl()
             }),
             durationGroup: new FormGroup({
                 duration: new FormControl()
@@ -164,19 +161,15 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges {
     }
 
     public submit(values: any) {
-        this.reportParamQuery.dateRange.startDate = this.convertMomentDate(values.dateRange.startDate);
+        let reportParamQuery = this.convertFormValuesToReportParamQuery(values);
-        this.reportParamQuery.dateRange.endDate = this.convertMomentDate(values.dateRange.endDate);
+        this.onSuccess.emit(reportParamQuery);
-        this.reportParamQuery.status = values.statusGroup.status;
-        this.reportParamQuery.processDefinitionId = values.processDefGroup.processDefinitionId;
-        this.reportParamQuery.taskName = values.taskGroup.task;
-        this.reportParamQuery.duration = values.durationGroup.duration;
-        this.reportParamQuery.dateRangeInterval = values.dateIntervalGroup.dateInterval;
-        this.reportParamQuery.slowProcessInstanceInteger = values.processInstanceGroup.processInstance;
-        this.onSuccess.emit(this.reportParamQuery);
     }
 
-    onValueChanged(data: any) {
+    onValueChanged(values: any) {
-        this.onFormValueChanged.emit(data);
+        this.onFormValueChanged.emit(values);
+        if (this.reportForm && this.reportForm.valid) {
+            this.submit(values);
+        }
     }
 
     public convertMomentDate(date: string) {
@@ -184,6 +177,23 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges {
                 .format(AnalyticsReportParametersComponent.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
     }
 
+    public convertNumber(value: string): number {
+        return parseInt(value, 10);
+    }
+
+    convertFormValuesToReportParamQuery(values: any): ReportQuery {
+        let reportParamQuery: ReportQuery = new ReportQuery();
+        reportParamQuery.dateRange.startDate = this.convertMomentDate(values.dateRange.startDate);
+        reportParamQuery.dateRange.endDate = this.convertMomentDate(values.dateRange.endDate);
+        reportParamQuery.status = values.statusGroup.status;
+        reportParamQuery.processDefinitionId = values.processDefGroup.processDefinitionId;
+        reportParamQuery.taskName = values.taskGroup.taskName;
+        reportParamQuery.duration = values.durationGroup.duration;
+        reportParamQuery.dateRangeInterval = values.dateIntervalGroup.dateRangeInterval;
+        reportParamQuery.slowProcessInstanceInteger = this.convertNumber(values.processInstanceGroup.slowProcessInstanceInteger);
+        return reportParamQuery;
+    }
+
     ngOnDestroy() {
         this.dropDownSub.unsubscribe();
         this.paramOpts.unsubscribe();

ng2-components/ng2-activiti-analytics/src/components/analytics.component.html

@@ -8,38 +8,43 @@
             <div [ngSwitch]="report.type">
                 <div *ngSwitchCase="'pie'">
                     <div class="col-md-6">
-                        <base-chart class="chart"
+                        <div *ngIf="!report.hasData()">No data found</div>
+                        <base-chart *ngIf="report.hasData()" class="chart"
                                     [data]="report.data"
-                                    [datasets]="report.datasets"
                                     [labels]="report.labels"
                                     [chartType]="report.type"></base-chart>
                     </div>
                 </div>
                 <div *ngSwitchCase="'table'">
-                    <div [attr.id]="'chart-table-' + report.id">
+                    <div *ngIf="!report.hasDatasets()">No data found</div>
-                    <table class="table table-responsive table-condensed" style="width: 100%">
+                    <div [attr.id]="'chart-table-' + report.id" *ngIf="report.hasDatasets()">
-                        <tr>
+                        <table class="table table-responsive table-condensed" style="width: 100%">
-                            <th *ngFor="let label of report.labels">{{label | translate}}</th>
+                            <tr>
-                        </tr>
+                                <th *ngFor="let label of report.labels">{{label | translate}}</th>
-                        <tr *ngFor="let rows of report.datasets" style="text-align: center;">
+                            </tr>
-                            <td *ngFor="let row of rows">{{row | translate }}</td>
+                            <tr *ngFor="let rows of report.datasets" style="text-align: center;">
-                        </tr>
+                                <td *ngFor="let row of rows">{{row | translate }}</td>
-                    </table>
+                            </tr>
+                        </table>
                     </div>
                 </div>
                 <div *ngSwitchCase="'masterDetailTable'">
-                    <table class="table table-responsive table-condensed" style="width: 100%">
+                    <div *ngIf="!report.hasDatasets()">No data found</div>
-                        <tr>
+                    <div [attr.id]="'chart-master-detail-table-' + report.id" *ngIf="report.hasDatasets()">
-                            <th *ngFor="let label of report.labels">{{label | translate}}</th>
+                        <table class="table table-responsive table-condensed" style="width: 100%">
-                        </tr>
+                            <tr>
-                        <tr *ngFor="let rows of report.datasets" style="text-align: center;">
+                                <th *ngFor="let label of report.labels">{{label | translate}}</th>
-                            <td *ngFor="let row of rows">{{row | translate }}</td>
+                            </tr>
-                        </tr>
+                            <tr *ngFor="let rows of report.datasets" style="text-align: center;">
-                    </table>
+                                <td *ngFor="let row of rows">{{row | translate }}</td>
+                            </tr>
+                        </table>
+                    </div>
                 </div>
                 <div *ngSwitchCase="'bar'">
                     <div class="col-md-6">
-                        <base-chart class="chart"
+                        <div *ngIf="!report.hasDatasets()">No data found</div>
+                        <base-chart *ngIf="report.hasDatasets()" class="chart"
                                     [datasets]="report.datasets"
                                     [labels]="report.labels"
                                     [options]="report.options"
@@ -52,4 +57,6 @@
             </div>
         </div>
     </div>
+    <br><br><br>
+    <div *ngIf="!reports">Fill in the parameters to generate your report</div>
 </div>

ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.html

@@ -43,6 +43,6 @@
     <p>FormGroup : {{dateRange && dateRange.value | json }}</p>
     <p>FormGroup valid : {{dateRange && dateRange.valid }}</p>
     <p>FormGroup status : {{dateRange && dateRange.errors | json }}</p>
-    <p>FormGroup start status : {{dateRange && dateRange.controls.startDate.errors | json }}</p>
+    <p>FormGroup start status : {{dateRange && dateRange.controls.startDate && dateRange.controls.startDate.errors | json }}</p>
     <p>FormGroup end status: {{dateRange && dateRange.controls.endDate.errors | json }}</p>
 </div>

ng2-components/ng2-activiti-analytics/src/models/chart.model.ts

@@ -99,10 +99,15 @@ export class BarChart extends Chart {
                     }
                 });
             });
-            this.datasets.push({data: dataValue, label: params.key});
+            if (dataValue && dataValue.length > 0) {
-
+                this.datasets.push({data: dataValue, label: params.key});
+            }
         });
     }
+
+    hasDatasets() {
+        return this.datasets && this.datasets.length > 0 ? true : false;
+    }
 }
 
 export class TableChart extends Chart {
@@ -116,7 +121,13 @@ export class TableChart extends Chart {
         this.title = obj && obj.title || null;
         this.titleKey = obj && obj.titleKey || null;
         this.labels = obj && obj.columnNames;
-        this.datasets = obj && obj.rows;
+        if (obj.rows) {
+            this.datasets = obj && obj.rows;
+        }
+    }
+
+    hasDatasets() {
+        return this.datasets && this.datasets.length > 0 ? true : false;
     }
 }
 
@@ -131,7 +142,13 @@ export class HeatMapChart extends Chart {
         this.title = obj && obj.title || null;
         this.titleKey = obj && obj.titleKey || null;
         this.labels = obj && obj.columnNames;
-        this.datasets = obj && obj.rows;
+        if (obj.rows) {
+            this.datasets = obj && obj.rows;
+        }
+    }
+
+    hasDatasets() {
+        return this.datasets && this.datasets.length > 0 ? true : false;
     }
 }
 
@@ -156,4 +173,8 @@ export class PieChart extends Chart {
         this.labels.push(label);
         this.data.push(data);
     }
+
+    hasData() {
+        return this.data && this.data.length > 0 ? true : false;
+    }
 }