feat(metrics): deprecated Statistic and renamed to Metrics

- Statistics was not a great name and sometime confuses people (in OData especially), Metrics is more obvious to represent this data - even though Statistic is deprecated, it can still be used and won't be removed for the foreseable future
ghiscoding · Sep 25, 2019 · aea60a9 · aea60a9
1 parent 695f602
commit aea60a9
Show file tree

Hide file tree

Showing 15 changed files with 111 additions and 76 deletions.
diff --git a/src/app/examples/grid-clientside.component.html b/src/app/examples/grid-clientside.component.html
@@ -1,21 +1,22 @@
 <div class="container-fluid">
-    <h2>{{title}}</h2>
-    <div class="subtitle" [innerHTML]="subTitle"></div>
+  <h2>{{title}}</h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
 
-    <br/>
-    <span *ngIf="statistics" style="margin-right: 10px">
-        <b>Statistics:</b> {{statistics.startTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{statistics.itemCount}} of {{statistics.totalItemCount}} items
-    </span>
-    <button class="btn btn-default btn-sm" (click)="angularGrid.filterService.clearFilters()">Clear Filters</button>
-    <button class="btn btn-default btn-sm" (click)="angularGrid.sortService.clearSorting()">Clear Sorting</button>
+  <br />
+  <span *ngIf="metrics" style="margin-right: 10px">
+    <b>Metrics:</b> {{metrics.startTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{metrics.itemCount}} of
+    {{metrics.totalItemCount}} items
+  </span>
+  <button class="btn btn-default btn-sm" (click)="angularGrid.filterService.clearFilters()">Clear Filters</button>
+  <button class="btn btn-default btn-sm" (click)="angularGrid.sortService.clearSorting()">Clear Sorting</button>
 
-    <angular-slickgrid gridId="grid2"
-              [columnDefinitions]="columnDefinitions"
-              [gridOptions]="gridOptions"
-              [dataset]="dataset"
-              (onAngularGridCreated)="angularGridReady($event)"
-              (onGridStateChanged)="gridStateChanged($event)"
-              (onBeforeGridDestroy)="saveCurrentGridState($event)"
-              (sgOnRowCountChanged)="refreshStatistics($event.detail.eventData, $event.detail.args)">
-    </angular-slickgrid>
-  </div>
+  <angular-slickgrid gridId="grid2"
+                     [columnDefinitions]="columnDefinitions"
+                     [gridOptions]="gridOptions"
+                     [dataset]="dataset"
+                     (onAngularGridCreated)="angularGridReady($event)"
+                     (onGridStateChanged)="gridStateChanged($event)"
+                     (onBeforeGridDestroy)="saveCurrentGridState($event)"
+                     (sgOnRowCountChanged)="refreshMetrics($event.detail.eventData, $event.detail.args)">
+  </angular-slickgrid>
+</div>
diff --git a/src/app/examples/grid-clientside.component.ts b/src/app/examples/grid-clientside.component.ts
@@ -11,9 +11,9 @@ import {
   Formatters,
   GridOption,
   GridStateChange,
+  Metrics,
   MultipleSelectOption,
   OperatorType,
-  Statistic,
 } from './../modules/angular-slickgrid';
 
 function randomBetween(min, max) {
@@ -54,7 +54,7 @@ export class GridClientSideComponent implements OnInit {
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
-  statistics: Statistic;
+  metrics: Metrics;
 
   constructor(private http: HttpClient, private translate: TranslateService) { }
 
@@ -249,10 +249,10 @@ export class GridClientSideComponent implements OnInit {
     console.log('Client sample, last Grid State:: ', this.angularGrid.gridStateService.getCurrentGridState());
   }
 
-  refreshStatistics(e, args) {
+  refreshMetrics(e, args) {
     if (args && args.current > 0) {
       setTimeout(() => {
-        this.statistics = {
+        this.metrics = {
           startTime: new Date(),
           itemCount: args && args.current,
           totalItemCount: this.dataset.length

diff --git a/src/app/examples/grid-graphql.component.html b/src/app/examples/grid-graphql.component.html
@@ -22,9 +22,9 @@ <h2>{{title}}</h2>
       <b>Locale:</b>
       <span style="font-style: italic">{{selectedLanguage + '.json'}}</span>
       <br />
-      <span *ngIf="statistics">
-        <b>Statistics:</b> {{statistics.endTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{statistics.executionTime}}ms
-        | {{statistics.totalItemCount}} items
+      <span *ngIf="metrics">
+        <b>Metrics:</b> {{metrics.endTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{metrics.executionTime}}ms
+        | {{metrics.totalItemCount}} items
       </span>
     </div>
     <div class="col-sm-7">
@@ -36,7 +36,8 @@ <h2>{{title}}</h2>
   </div>
 
   <angular-slickgrid gridId="grid6" [gridHeight]="200" [gridWidth]="900" [columnDefinitions]="columnDefinitions"
-    [gridOptions]="gridOptions" [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event)"
-    (onGridStateChanged)="gridStateChanged($event)" (onBeforeGridDestroy)="saveCurrentGridState($event)">
+                     [gridOptions]="gridOptions" [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event)"
+                     (onGridStateChanged)="gridStateChanged($event)"
+                     (onBeforeGridDestroy)="saveCurrentGridState($event)">
   </angular-slickgrid>
 </div>
diff --git a/src/app/examples/grid-graphql.component.ts b/src/app/examples/grid-graphql.component.ts
@@ -11,10 +11,10 @@ import {
   GraphqlServiceOption,
   GridOption,
   GridStateChange,
+  Metrics,
   MultipleSelectOption,
   OperatorType,
   SortDirection,
-  Statistic
 } from './../modules/angular-slickgrid';
 import * as moment from 'moment-mini';
 import { Subscription } from 'rxjs';
@@ -47,7 +47,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset = [];
-  statistics: Statistic;
+  metrics: Metrics;
 
   graphqlQuery = '';
   processing = true;
@@ -170,7 +170,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
         preProcess: () => this.displaySpinner(true),
         process: (query) => this.getCustomerApiCall(query),
         postProcess: (result: GraphqlResult) => {
-          this.statistics = result.statistics;
+          this.metrics = result.metrics;
           this.displaySpinner(false);
         }
       }

diff --git a/src/app/examples/grid-odata.component.html b/src/app/examples/grid-odata.component.html
@@ -10,9 +10,9 @@ <h2>{{title}}</h2>
           <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
         </span>
       </div>
-      <span *ngIf="statistics">
-        <b>Statistics:</b> {{statistics.endTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{statistics.executionTime}}ms
-        | {{statistics.totalItemCount}} items
+      <span *ngIf="metrics">
+        <b>Metrics:</b> {{metrics.endTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{metrics.executionTime}}ms
+        | {{metrics.totalItemCount}} items
       </span>
     </div>
     <div class="col-sm-8">
@@ -23,18 +23,18 @@ <h2>{{title}}</h2>
       <span data-test="radioVersion">
         <label class="radio-inline control-label" for="radio2">
           <input type="radio" name="inlineRadioOptions" data-test="version2" id="radio2" checked [value]="2"
-            (change)="setOdataVersion(2)"> 2
+                 (change)="setOdataVersion(2)"> 2
         </label>
         <label class="radio-inline control-label" for="radio4">
           <input type="radio" name="inlineRadioOptions" data-test="version4" id="radio4" [value]="4"
-            (change)="setOdataVersion(4)"> 4
+                 (change)="setOdataVersion(4)"> 4
         </label>
       </span>
     </div>
   </div>
 
   <angular-slickgrid gridId="grid5" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
-    [dataset]="dataset" (onGridStateChanged)="gridStateChanged($event)"
-    (onAngularGridCreated)="angularGridReady($event)">
+                     [dataset]="dataset" (onGridStateChanged)="gridStateChanged($event)"
+                     (onAngularGridCreated)="angularGridReady($event)">
   </angular-slickgrid>
 </div>
diff --git a/src/app/examples/grid-odata.component.ts b/src/app/examples/grid-odata.component.ts
@@ -8,8 +8,8 @@ import {
   GridOdataService,
   GridOption,
   GridStateChange,
-  Statistic,
-  OperatorType
+  Metrics,
+  OperatorType,
 } from './../modules/angular-slickgrid';
 
 const defaultPageSize = 20;
@@ -40,7 +40,7 @@ export class GridOdataComponent implements OnInit {
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset = [];
-  statistics: Statistic;
+  metrics: Metrics;
 
   odataVersion = 2;
   odataQuery = '';
@@ -109,7 +109,7 @@ export class GridOdataComponent implements OnInit {
         preProcess: () => this.displaySpinner(true),
         process: (query) => this.getCustomerApiCall(query),
         postProcess: (response) => {
-          this.statistics = response.statistics;
+          this.metrics = response.metrics;
           this.displaySpinner(false);
           this.getCustomerCallback(response);
         }
@@ -128,8 +128,8 @@ export class GridOdataComponent implements OnInit {
     // totalItems property needs to be filled for pagination to work correctly
     // however we need to force Angular to do a dirty check, doing a clone object will do just that
     this.gridOptions.pagination.totalItems = data['totalRecordCount'];
-    if (this.statistics) {
-      this.statistics.totalItemCount = data['totalRecordCount'];
+    if (this.metrics) {
+      this.metrics.totalItemCount = data['totalRecordCount'];
     }
     this.gridOptions = Object.assign({}, this.gridOptions);
 

diff --git a/src/app/examples/grid-range.component.html b/src/app/examples/grid-range.component.html
@@ -4,10 +4,10 @@ <h2>{{title}}</h2>
        [innerHTML]="subTitle"></div>
 
   <br />
-  <span *ngIf="statistics"
+  <span *ngIf="metrics"
         style="margin-right: 10px">
-    <b>Statistics:</b> {{statistics.startTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{statistics.itemCount}} of
-    {{statistics.totalItemCount}} items
+    <b>Metrics:</b> {{metrics.startTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{metrics.itemCount}} of
+    {{metrics.totalItemCount}} items
   </span>
   <button class="btn btn-default btn-sm"
           (click)="angularGrid.filterService.clearFilters()">Clear Filters</button>
@@ -29,6 +29,6 @@ <h2>{{title}}</h2>
                      (onAngularGridCreated)="angularGridReady($event)"
                      (onGridStateChanged)="gridStateChanged($event)"
                      (onBeforeGridDestroy)="saveCurrentGridState($event)"
-                     (sgOnRowCountChanged)="refreshStatistics($event.detail.eventData, $event.detail.args)">
+                     (sgOnRowCountChanged)="refreshMetrics($event.detail.eventData, $event.detail.args)">
   </angular-slickgrid>
 </div>
diff --git a/src/app/examples/grid-range.component.ts b/src/app/examples/grid-range.component.ts
@@ -11,9 +11,9 @@ import {
   GridOption,
   GridStateChange,
   JQueryUiSliderOption,
+  Metrics,
   MultipleSelectOption,
   OperatorType,
-  Statistic,
 } from '../modules/angular-slickgrid';
 import * as moment from 'moment-mini';
 
@@ -60,7 +60,7 @@ export class GridRangeComponent implements OnInit {
   gridOptions: GridOption;
   dataset: any[];
   selectedLanguage: string;
-  statistics: Statistic;
+  metrics: Metrics;
 
   constructor(private translate: TranslateService) {
     // always start with English for Cypress E2E tests to be consistent
@@ -212,10 +212,10 @@ export class GridRangeComponent implements OnInit {
     console.log('Client sample, last Grid State:: ', this.angularGrid.gridStateService.getCurrentGridState());
   }
 
-  refreshStatistics(e, args) {
+  refreshMetrics(e, args) {
     if (args && args.current > 0) {
       setTimeout(() => {
-        this.statistics = {
+        this.metrics = {
           startTime: new Date(),
           itemCount: args && args.current,
           totalItemCount: this.dataset.length

diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts
@@ -198,27 +198,27 @@ describe('gridMenuExtension', () => {
 
       it(`should call internal event handler subscribe and expect the "onColumnsChanged" option to be called
     and it should override "visibleColumns" when array passed as arguments is bigger than previous visible columns`, () => {
-          const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
-          const onColumnSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onColumnsChanged');
-          const onBeforeSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onBeforeMenuShow');
-          const onCloseSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onMenuClose');
-          const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
-          const visibleColsSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
-
-          const instance = extension.register();
-          instance.onColumnsChanged.notify({ columns: columnsMock, grid: gridStub }, new Slick.EventData(), gridStub);
-
-          expect(handlerSpy).toHaveBeenCalledTimes(4);
-          expect(handlerSpy).toHaveBeenCalledWith(
-            { notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
-            expect.anything()
-          );
-          expect(onColumnSpy).toHaveBeenCalledWith(expect.anything(), { columns: columnsMock, grid: gridStub });
-          expect(onBeforeSpy).not.toHaveBeenCalled();
-          expect(onCloseSpy).not.toHaveBeenCalled();
-          expect(onCommandSpy).not.toHaveBeenCalled();
-          expect(visibleColsSpy).toHaveBeenCalledWith(columnsMock);
-        });
+        const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
+        const onColumnSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onColumnsChanged');
+        const onBeforeSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onBeforeMenuShow');
+        const onCloseSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onMenuClose');
+        const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
+        const visibleColsSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
+
+        const instance = extension.register();
+        instance.onColumnsChanged.notify({ columns: columnsMock, grid: gridStub }, new Slick.EventData(), gridStub);
+
+        expect(handlerSpy).toHaveBeenCalledTimes(4);
+        expect(handlerSpy).toHaveBeenCalledWith(
+          { notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
+          expect.anything()
+        );
+        expect(onColumnSpy).toHaveBeenCalledWith(expect.anything(), { columns: columnsMock, grid: gridStub });
+        expect(onBeforeSpy).not.toHaveBeenCalled();
+        expect(onCloseSpy).not.toHaveBeenCalled();
+        expect(onCommandSpy).not.toHaveBeenCalled();
+        expect(visibleColsSpy).toHaveBeenCalledWith(columnsMock);
+      });
 
       it('should call internal event handler subscribe and expect the "onBeforeMenuShow" option to be called when addon notify is called', () => {
         const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
@@ -501,7 +501,7 @@ describe('gridMenuExtension', () => {
         const query = `query { users (first:20,offset:0) { totalCount, nodes { id,name,gender,company } } }`;
         const processResult = {
           data: { users: { nodes: [] }, pageInfo: { hasNextPage: true }, totalCount: 0 },
-          statistics: { startTime: now, endTime: now, executionTime: 0, totalItemCount: 0 }
+          metrics: { startTime: now, endTime: now, executionTime: 0, totalItemCount: 0 }
         };
         const preSpy = jest.spyOn(gridOptionsMock.backendServiceApi, 'preProcess');
         const postSpy = jest.spyOn(gridOptionsMock.backendServiceApi, 'postProcess');

diff --git a/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts
@@ -179,12 +179,14 @@ export class GridMenuExtension implements Extension {
         // send the response process to the postProcess callback
         if (backendApi && backendApi.postProcess) {
           if (processResult instanceof Object) {
-            processResult.statistics = {
+            processResult.metrics = {
               startTime,
               endTime,
               executionTime: endTime.valueOf() - startTime.valueOf(),
               totalItemCount: this.sharedService.gridOptions && this.sharedService.gridOptions.pagination && this.sharedService.gridOptions.pagination.totalItems
             };
+            // @deprecated
+            processResult.statistics = processResult.metrics;
           }
           backendApi.postProcess(processResult);
         }

diff --git a/src/app/modules/angular-slickgrid/models/graphqlResult.interface.ts b/src/app/modules/angular-slickgrid/models/graphqlResult.interface.ts
@@ -1,3 +1,4 @@
+import { Metrics } from './metrics.interface';
 import { Statistic } from './statistic.interface';
 
 export interface GraphqlResult {
@@ -11,5 +12,8 @@ export interface GraphqlResult {
     }
   };
 
+  metrics?: Metrics;
+
+  /** @deprecated please use "metrics" instead */
   statistics?: Statistic;
 }
diff --git a/src/app/modules/angular-slickgrid/models/index.ts b/src/app/modules/angular-slickgrid/models/index.ts
@@ -85,6 +85,7 @@ export * from './jQueryUiSliderOption.interface';
 export * from './jQueryUiSliderResponse.interface';
 export * from './keyCode.enum';
 export * from './locale.interface';
+export * from './metrics.interface';
 export * from './multiColumnSort.interface';
 export * from './multipleSelectOption.interface';
 export * from './odataOption.interface';

diff --git a/src/app/modules/angular-slickgrid/models/metrics.interface.ts b/src/app/modules/angular-slickgrid/models/metrics.interface.ts
@@ -0,0 +1,16 @@
+export interface Metrics {
+  /** process start time */
+  startTime: Date;
+
+  /** process end time */
+  endTime?: Date;
+
+  /** time it took to execute in millisecond */
+  executionTime?: number;
+
+  /** number of items displayed */
+  itemCount?: number;
+
+  /** Total count of items in dataset or in database (if used with a BackendServiceApi) */
+  totalItemCount: number;
+}
diff --git a/src/app/modules/angular-slickgrid/services/__tests__/backend-utilities.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/backend-utilities.spec.ts
@@ -21,11 +21,19 @@ describe('backend-utilities', () => {
       expect(spy).toHaveBeenCalled();
     });
 
-    it('should execute the "postProcess" when it is defined and add some statistics to the object', () => {
+    it('should execute the "postProcess" when it is defined and add some metrics to the object', () => {
       const now = new Date();
       const mockResult = { data: { users: [{ firstName: 'John', lastName: 'Doe' }] } };
       const expectaction = {
         data: { users: [{ firstName: 'John', lastName: 'Doe' }], },
+        metrics: {
+          startTime: now,
+          endTime: expect.any(Date),
+          executionTime: expect.any(Number),
+          itemCount: 1,
+          totalItemCount: 1
+        },
+        // @deprecated, should be removed when Statistic is removed from the lib
         statistics: {
           startTime: now,
           endTime: expect.any(Date),