Skip to content

Commit aea60a9

Browse files
ghiscoding-SEghiscoding-SE
committed
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
1 parent 695f602 commit aea60a9

15 files changed

+111
-76
lines changed

‎src/app/examples/grid-clientside.component.html

+19-18
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
<div class="container-fluid">
2-
<h2>{{title}}</h2>
3-
<div class="subtitle" [innerHTML]="subTitle"></div>
2+
<h2>{{title}}</h2>
3+
<div class="subtitle" [innerHTML]="subTitle"></div>
44

5-
<br/>
6-
<span *ngIf="statistics" style="margin-right: 10px">
7-
<b>Statistics:</b> {{statistics.startTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{statistics.itemCount}} of {{statistics.totalItemCount}} items
8-
</span>
9-
<button class="btn btn-default btn-sm" (click)="angularGrid.filterService.clearFilters()">Clear Filters</button>
10-
<button class="btn btn-default btn-sm" (click)="angularGrid.sortService.clearSorting()">Clear Sorting</button>
5+
<br />
6+
<span *ngIf="metrics" style="margin-right: 10px">
7+
<b>Metrics:</b> {{metrics.startTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{metrics.itemCount}} of
8+
{{metrics.totalItemCount}} items
9+
</span>
10+
<button class="btn btn-default btn-sm" (click)="angularGrid.filterService.clearFilters()">Clear Filters</button>
11+
<button class="btn btn-default btn-sm" (click)="angularGrid.sortService.clearSorting()">Clear Sorting</button>
1112

12-
<angular-slickgrid gridId="grid2"
13-
[columnDefinitions]="columnDefinitions"
14-
[gridOptions]="gridOptions"
15-
[dataset]="dataset"
16-
(onAngularGridCreated)="angularGridReady($event)"
17-
(onGridStateChanged)="gridStateChanged($event)"
18-
(onBeforeGridDestroy)="saveCurrentGridState($event)"
19-
(sgOnRowCountChanged)="refreshStatistics($event.detail.eventData, $event.detail.args)">
20-
</angular-slickgrid>
21-
</div>
13+
<angular-slickgrid gridId="grid2"
14+
[columnDefinitions]="columnDefinitions"
15+
[gridOptions]="gridOptions"
16+
[dataset]="dataset"
17+
(onAngularGridCreated)="angularGridReady($event)"
18+
(onGridStateChanged)="gridStateChanged($event)"
19+
(onBeforeGridDestroy)="saveCurrentGridState($event)"
20+
(sgOnRowCountChanged)="refreshMetrics($event.detail.eventData, $event.detail.args)">
21+
</angular-slickgrid>
22+
</div>

‎src/app/examples/grid-clientside.component.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import {
1111
Formatters,
1212
GridOption,
1313
GridStateChange,
14+
Metrics,
1415
MultipleSelectOption,
1516
OperatorType,
16-
Statistic,
1717
} from './../modules/angular-slickgrid';
1818

1919
function randomBetween(min, max) {
@@ -54,7 +54,7 @@ export class GridClientSideComponent implements OnInit {
5454
columnDefinitions: Column[];
5555
gridOptions: GridOption;
5656
dataset: any[];
57-
statistics: Statistic;
57+
metrics: Metrics;
5858

5959
constructor(private http: HttpClient, private translate: TranslateService) { }
6060

@@ -249,10 +249,10 @@ export class GridClientSideComponent implements OnInit {
249249
console.log('Client sample, last Grid State:: ', this.angularGrid.gridStateService.getCurrentGridState());
250250
}
251251

252-
refreshStatistics(e, args) {
252+
refreshMetrics(e, args) {
253253
if (args && args.current > 0) {
254254
setTimeout(() => {
255-
this.statistics = {
255+
this.metrics = {
256256
startTime: new Date(),
257257
itemCount: args && args.current,
258258
totalItemCount: this.dataset.length

‎src/app/examples/grid-graphql.component.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ <h2>{{title}}</h2>
2222
<b>Locale:</b>
2323
<span style="font-style: italic">{{selectedLanguage + '.json'}}</span>
2424
<br />
25-
<span *ngIf="statistics">
26-
<b>Statistics:</b> {{statistics.endTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{statistics.executionTime}}ms
27-
| {{statistics.totalItemCount}} items
25+
<span *ngIf="metrics">
26+
<b>Metrics:</b> {{metrics.endTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{metrics.executionTime}}ms
27+
| {{metrics.totalItemCount}} items
2828
</span>
2929
</div>
3030
<div class="col-sm-7">
@@ -36,7 +36,8 @@ <h2>{{title}}</h2>
3636
</div>
3737

3838
<angular-slickgrid gridId="grid6" [gridHeight]="200" [gridWidth]="900" [columnDefinitions]="columnDefinitions"
39-
[gridOptions]="gridOptions" [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event)"
40-
(onGridStateChanged)="gridStateChanged($event)" (onBeforeGridDestroy)="saveCurrentGridState($event)">
39+
[gridOptions]="gridOptions" [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event)"
40+
(onGridStateChanged)="gridStateChanged($event)"
41+
(onBeforeGridDestroy)="saveCurrentGridState($event)">
4142
</angular-slickgrid>
4243
</div>

‎src/app/examples/grid-graphql.component.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import {
1111
GraphqlServiceOption,
1212
GridOption,
1313
GridStateChange,
14+
Metrics,
1415
MultipleSelectOption,
1516
OperatorType,
1617
SortDirection,
17-
Statistic
1818
} from './../modules/angular-slickgrid';
1919
import * as moment from 'moment-mini';
2020
import { Subscription } from 'rxjs';
@@ -47,7 +47,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
4747
columnDefinitions: Column[];
4848
gridOptions: GridOption;
4949
dataset = [];
50-
statistics: Statistic;
50+
metrics: Metrics;
5151

5252
graphqlQuery = '';
5353
processing = true;
@@ -170,7 +170,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
170170
preProcess: () => this.displaySpinner(true),
171171
process: (query) => this.getCustomerApiCall(query),
172172
postProcess: (result: GraphqlResult) => {
173-
this.statistics = result.statistics;
173+
this.metrics = result.metrics;
174174
this.displaySpinner(false);
175175
}
176176
}

‎src/app/examples/grid-odata.component.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ <h2>{{title}}</h2>
1010
<i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
1111
</span>
1212
</div>
13-
<span *ngIf="statistics">
14-
<b>Statistics:</b> {{statistics.endTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{statistics.executionTime}}ms
15-
| {{statistics.totalItemCount}} items
13+
<span *ngIf="metrics">
14+
<b>Metrics:</b> {{metrics.endTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{metrics.executionTime}}ms
15+
| {{metrics.totalItemCount}} items
1616
</span>
1717
</div>
1818
<div class="col-sm-8">
@@ -23,18 +23,18 @@ <h2>{{title}}</h2>
2323
<span data-test="radioVersion">
2424
<label class="radio-inline control-label" for="radio2">
2525
<input type="radio" name="inlineRadioOptions" data-test="version2" id="radio2" checked [value]="2"
26-
(change)="setOdataVersion(2)"> 2
26+
(change)="setOdataVersion(2)"> 2
2727
</label>
2828
<label class="radio-inline control-label" for="radio4">
2929
<input type="radio" name="inlineRadioOptions" data-test="version4" id="radio4" [value]="4"
30-
(change)="setOdataVersion(4)"> 4
30+
(change)="setOdataVersion(4)"> 4
3131
</label>
3232
</span>
3333
</div>
3434
</div>
3535

3636
<angular-slickgrid gridId="grid5" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
37-
[dataset]="dataset" (onGridStateChanged)="gridStateChanged($event)"
38-
(onAngularGridCreated)="angularGridReady($event)">
37+
[dataset]="dataset" (onGridStateChanged)="gridStateChanged($event)"
38+
(onAngularGridCreated)="angularGridReady($event)">
3939
</angular-slickgrid>
4040
</div>

‎src/app/examples/grid-odata.component.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {
88
GridOdataService,
99
GridOption,
1010
GridStateChange,
11-
Statistic,
12-
OperatorType
11+
Metrics,
12+
OperatorType,
1313
} from './../modules/angular-slickgrid';
1414

1515
const defaultPageSize = 20;
@@ -40,7 +40,7 @@ export class GridOdataComponent implements OnInit {
4040
columnDefinitions: Column[];
4141
gridOptions: GridOption;
4242
dataset = [];
43-
statistics: Statistic;
43+
metrics: Metrics;
4444

4545
odataVersion = 2;
4646
odataQuery = '';
@@ -109,7 +109,7 @@ export class GridOdataComponent implements OnInit {
109109
preProcess: () => this.displaySpinner(true),
110110
process: (query) => this.getCustomerApiCall(query),
111111
postProcess: (response) => {
112-
this.statistics = response.statistics;
112+
this.metrics = response.metrics;
113113
this.displaySpinner(false);
114114
this.getCustomerCallback(response);
115115
}
@@ -128,8 +128,8 @@ export class GridOdataComponent implements OnInit {
128128
// totalItems property needs to be filled for pagination to work correctly
129129
// however we need to force Angular to do a dirty check, doing a clone object will do just that
130130
this.gridOptions.pagination.totalItems = data['totalRecordCount'];
131-
if (this.statistics) {
132-
this.statistics.totalItemCount = data['totalRecordCount'];
131+
if (this.metrics) {
132+
this.metrics.totalItemCount = data['totalRecordCount'];
133133
}
134134
this.gridOptions = Object.assign({}, this.gridOptions);
135135

‎src/app/examples/grid-range.component.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ <h2>{{title}}</h2>
44
[innerHTML]="subTitle"></div>
55

66
<br />
7-
<span *ngIf="statistics"
7+
<span *ngIf="metrics"
88
style="margin-right: 10px">
9-
<b>Statistics:</b> {{statistics.startTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{statistics.itemCount}} of
10-
{{statistics.totalItemCount}} items
9+
<b>Metrics:</b> {{metrics.startTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{metrics.itemCount}} of
10+
{{metrics.totalItemCount}} items
1111
</span>
1212
<button class="btn btn-default btn-sm"
1313
(click)="angularGrid.filterService.clearFilters()">Clear Filters</button>
@@ -29,6 +29,6 @@ <h2>{{title}}</h2>
2929
(onAngularGridCreated)="angularGridReady($event)"
3030
(onGridStateChanged)="gridStateChanged($event)"
3131
(onBeforeGridDestroy)="saveCurrentGridState($event)"
32-
(sgOnRowCountChanged)="refreshStatistics($event.detail.eventData, $event.detail.args)">
32+
(sgOnRowCountChanged)="refreshMetrics($event.detail.eventData, $event.detail.args)">
3333
</angular-slickgrid>
3434
</div>

‎src/app/examples/grid-range.component.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import {
1111
GridOption,
1212
GridStateChange,
1313
JQueryUiSliderOption,
14+
Metrics,
1415
MultipleSelectOption,
1516
OperatorType,
16-
Statistic,
1717
} from '../modules/angular-slickgrid';
1818
import * as moment from 'moment-mini';
1919

@@ -60,7 +60,7 @@ export class GridRangeComponent implements OnInit {
6060
gridOptions: GridOption;
6161
dataset: any[];
6262
selectedLanguage: string;
63-
statistics: Statistic;
63+
metrics: Metrics;
6464

6565
constructor(private translate: TranslateService) {
6666
// always start with English for Cypress E2E tests to be consistent
@@ -212,10 +212,10 @@ export class GridRangeComponent implements OnInit {
212212
console.log('Client sample, last Grid State:: ', this.angularGrid.gridStateService.getCurrentGridState());
213213
}
214214

215-
refreshStatistics(e, args) {
215+
refreshMetrics(e, args) {
216216
if (args && args.current > 0) {
217217
setTimeout(() => {
218-
this.statistics = {
218+
this.metrics = {
219219
startTime: new Date(),
220220
itemCount: args && args.current,
221221
totalItemCount: this.dataset.length

‎src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts

+22-22
Original file line numberDiff line numberDiff line change
@@ -198,27 +198,27 @@ describe('gridMenuExtension', () => {
198198

199199
it(`should call internal event handler subscribe and expect the "onColumnsChanged" option to be called
200200
and it should override "visibleColumns" when array passed as arguments is bigger than previous visible columns`, () => {
201-
const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
202-
const onColumnSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onColumnsChanged');
203-
const onBeforeSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onBeforeMenuShow');
204-
const onCloseSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onMenuClose');
205-
const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
206-
const visibleColsSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
207-
208-
const instance = extension.register();
209-
instance.onColumnsChanged.notify({ columns: columnsMock, grid: gridStub }, new Slick.EventData(), gridStub);
210-
211-
expect(handlerSpy).toHaveBeenCalledTimes(4);
212-
expect(handlerSpy).toHaveBeenCalledWith(
213-
{ notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
214-
expect.anything()
215-
);
216-
expect(onColumnSpy).toHaveBeenCalledWith(expect.anything(), { columns: columnsMock, grid: gridStub });
217-
expect(onBeforeSpy).not.toHaveBeenCalled();
218-
expect(onCloseSpy).not.toHaveBeenCalled();
219-
expect(onCommandSpy).not.toHaveBeenCalled();
220-
expect(visibleColsSpy).toHaveBeenCalledWith(columnsMock);
221-
});
201+
const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
202+
const onColumnSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onColumnsChanged');
203+
const onBeforeSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onBeforeMenuShow');
204+
const onCloseSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onMenuClose');
205+
const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
206+
const visibleColsSpy = jest.spyOn(SharedService.prototype, 'visibleColumns', 'set');
207+
208+
const instance = extension.register();
209+
instance.onColumnsChanged.notify({ columns: columnsMock, grid: gridStub }, new Slick.EventData(), gridStub);
210+
211+
expect(handlerSpy).toHaveBeenCalledTimes(4);
212+
expect(handlerSpy).toHaveBeenCalledWith(
213+
{ notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
214+
expect.anything()
215+
);
216+
expect(onColumnSpy).toHaveBeenCalledWith(expect.anything(), { columns: columnsMock, grid: gridStub });
217+
expect(onBeforeSpy).not.toHaveBeenCalled();
218+
expect(onCloseSpy).not.toHaveBeenCalled();
219+
expect(onCommandSpy).not.toHaveBeenCalled();
220+
expect(visibleColsSpy).toHaveBeenCalledWith(columnsMock);
221+
});
222222

223223
it('should call internal event handler subscribe and expect the "onBeforeMenuShow" option to be called when addon notify is called', () => {
224224
const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
@@ -501,7 +501,7 @@ describe('gridMenuExtension', () => {
501501
const query = `query { users (first:20,offset:0) { totalCount, nodes { id,name,gender,company } } }`;
502502
const processResult = {
503503
data: { users: { nodes: [] }, pageInfo: { hasNextPage: true }, totalCount: 0 },
504-
statistics: { startTime: now, endTime: now, executionTime: 0, totalItemCount: 0 }
504+
metrics: { startTime: now, endTime: now, executionTime: 0, totalItemCount: 0 }
505505
};
506506
const preSpy = jest.spyOn(gridOptionsMock.backendServiceApi, 'preProcess');
507507
const postSpy = jest.spyOn(gridOptionsMock.backendServiceApi, 'postProcess');

‎src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -179,12 +179,14 @@ export class GridMenuExtension implements Extension {
179179
// send the response process to the postProcess callback
180180
if (backendApi && backendApi.postProcess) {
181181
if (processResult instanceof Object) {
182-
processResult.statistics = {
182+
processResult.metrics = {
183183
startTime,
184184
endTime,
185185
executionTime: endTime.valueOf() - startTime.valueOf(),
186186
totalItemCount: this.sharedService.gridOptions && this.sharedService.gridOptions.pagination && this.sharedService.gridOptions.pagination.totalItems
187187
};
188+
// @deprecated
189+
processResult.statistics = processResult.metrics;
188190
}
189191
backendApi.postProcess(processResult);
190192
}

‎src/app/modules/angular-slickgrid/models/graphqlResult.interface.ts

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Metrics } from './metrics.interface';
12
import { Statistic } from './statistic.interface';
23

34
export interface GraphqlResult {
@@ -11,5 +12,8 @@ export interface GraphqlResult {
1112
}
1213
};
1314

15+
metrics?: Metrics;
16+
17+
/** @deprecated please use "metrics" instead */
1418
statistics?: Statistic;
1519
}

‎src/app/modules/angular-slickgrid/models/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ export * from './jQueryUiSliderOption.interface';
8585
export * from './jQueryUiSliderResponse.interface';
8686
export * from './keyCode.enum';
8787
export * from './locale.interface';
88+
export * from './metrics.interface';
8889
export * from './multiColumnSort.interface';
8990
export * from './multipleSelectOption.interface';
9091
export * from './odataOption.interface';

‎src/app/modules/angular-slickgrid/models/metrics.interface.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export interface Metrics {
2+
/** process start time */
3+
startTime: Date;
4+
5+
/** process end time */
6+
endTime?: Date;
7+
8+
/** time it took to execute in millisecond */
9+
executionTime?: number;
10+
11+
/** number of items displayed */
12+
itemCount?: number;
13+
14+
/** Total count of items in dataset or in database (if used with a BackendServiceApi) */
15+
totalItemCount: number;
16+
}

‎src/app/modules/angular-slickgrid/services/__tests__/backend-utilities.spec.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,19 @@ describe('backend-utilities', () => {
2121
expect(spy).toHaveBeenCalled();
2222
});
2323

24-
it('should execute the "postProcess" when it is defined and add some statistics to the object', () => {
24+
it('should execute the "postProcess" when it is defined and add some metrics to the object', () => {
2525
const now = new Date();
2626
const mockResult = { data: { users: [{ firstName: 'John', lastName: 'Doe' }] } };
2727
const expectaction = {
2828
data: { users: [{ firstName: 'John', lastName: 'Doe' }], },
29+
metrics: {
30+
startTime: now,
31+
endTime: expect.any(Date),
32+
executionTime: expect.any(Number),
33+
itemCount: 1,
34+
totalItemCount: 1
35+
},
36+
// @deprecated, should be removed when Statistic is removed from the lib
2937
statistics: {
3038
startTime: now,
3139
endTime: expect.any(Date),

0 commit comments

Comments
 (0)