11import {
2- AfterViewInit ,
32 Component ,
4- EventEmitter ,
5- OnDestroy ,
6- OnInit ,
7- Output ,
3+ Input ,
84 ViewChild } from '@angular/core' ;
95import {
106 DefaultSortingStrategy ,
7+ GridSelectionMode ,
8+ IGroupingExpression ,
119 IgxGridComponent ,
1210 SortingDirection
1311} from 'igniteui-angular' ;
1412import { Contract , REGIONS } from '../shared/financialData' ;
15- import { LocalService } from '../shared/local.service' ;
13+
14+ const GROUPING_EXPRESSIONS : IGroupingExpression [ ] = [ {
15+ dir : SortingDirection . Desc ,
16+ fieldName : 'Category' ,
17+ ignoreCase : false ,
18+ strategy : DefaultSortingStrategy . instance ( )
19+ } ,
20+ {
21+ dir : SortingDirection . Desc ,
22+ fieldName : 'Type' ,
23+ ignoreCase : false ,
24+ strategy : DefaultSortingStrategy . instance ( )
25+ } ,
26+ {
27+ dir : SortingDirection . Desc ,
28+ fieldName : 'Contract' ,
29+ ignoreCase : false ,
30+ strategy : DefaultSortingStrategy . instance ( )
31+ }
32+ ] ;
1633
1734@Component ( {
1835 selector : 'app-finjs-grid' ,
1936 styleUrls : [ './grid-finjs.component.scss' ] ,
2037 templateUrl : './grid-finjs.component.html'
2138} )
22- export class GridFinJSComponent implements OnInit , AfterViewInit , OnDestroy {
39+ export class GridFinJSComponent {
2340 @ViewChild ( 'grid1' , { static : true } ) public grid : IgxGridComponent ;
2441
25- @Output ( ) public selectedDataChanged = new EventEmitter < any > ( ) ;
26- @Output ( ) public keyDown = new EventEmitter < any > ( ) ;
27- @Output ( ) public chartColumnKeyDown = new EventEmitter < any > ( ) ;
42+ @Input ( )
43+ public data : any ;
2844
29- public data = [ ] ;
30- public multiCellSelection : { data : any [ ] } = { data : [ ] } ;
31- public selectionMode = 'multiple' ;
45+ public selectionMode : GridSelectionMode = GridSelectionMode . multiple ;
3246 public contracts = Contract ;
3347 public regions = REGIONS ;
48+ public columnFormat = { digitsInfo : '1.3-3' } ;
3449 public showToolbar = true ;
35- public volume = 1000 ;
36- public frequency = 500 ;
37- private subscription$ ;
38-
39- constructor ( public finService : LocalService ) {
40- this . finService . getFinancialData ( this . volume ) ;
41- this . subscription$ = this . finService . records . subscribe ( x => {
42- this . data = x ;
43- } ) ;
44- }
45-
46- public ngOnInit ( ) {
47- this . grid . groupingExpressions = [ {
48- dir : SortingDirection . Desc ,
49- fieldName : 'Category' ,
50- ignoreCase : false ,
51- strategy : DefaultSortingStrategy . instance ( )
52- } ,
53- {
54- dir : SortingDirection . Desc ,
55- fieldName : 'Type' ,
56- ignoreCase : false ,
57- strategy : DefaultSortingStrategy . instance ( )
58- } ,
59- {
60- dir : SortingDirection . Desc ,
61- fieldName : 'Settlement' ,
62- ignoreCase : false ,
63- strategy : DefaultSortingStrategy . instance ( )
64- }
65- ] ;
66- }
67-
68- public ngAfterViewInit ( ) {
69- this . grid . hideGroupedColumns = true ;
70- this . grid . reflow ( ) ;
71- }
72-
73- public ngOnDestroy ( ) {
74- if ( this . subscription$ ) {
75- this . subscription$ . unsubscribe ( ) ;
76- }
77- }
50+ public groupingExpressions : IGroupingExpression [ ] = GROUPING_EXPRESSIONS ;
7851
79- /** Event Handlers */
52+ constructor ( ) { }
8053
81- public onChange ( ) {
82- if ( this . grid . groupingExpressions . length > 0 ) {
83- this . grid . groupingExpressions = [ ] ;
84- } else {
85- this . grid . groupingExpressions = [ {
86- dir : SortingDirection . Desc ,
87- fieldName : 'Category' ,
88- ignoreCase : false ,
89- strategy : DefaultSortingStrategy . instance ( )
90- } ,
91- {
92- dir : SortingDirection . Desc ,
93- fieldName : 'Type' ,
94- ignoreCase : false ,
95- strategy : DefaultSortingStrategy . instance ( )
96- } ,
97- {
98- dir : SortingDirection . Desc ,
99- fieldName : 'Contract' ,
100- ignoreCase : false ,
101- strategy : DefaultSortingStrategy . instance ( )
102- }
103- ] ;
104- }
105- }
106-
107- public toggleGrouping ( ) {
108- if ( this . grid . groupingExpressions . length > 0 ) {
109- this . grid . groupingExpressions = [ ] ;
110- } else {
111- this . grid . groupingExpressions = [ {
112- dir : SortingDirection . Desc ,
113- fieldName : 'Category' ,
114- ignoreCase : false ,
115- strategy : DefaultSortingStrategy . instance ( )
116- } ,
117- {
118- dir : SortingDirection . Desc ,
119- fieldName : 'Type' ,
120- ignoreCase : false ,
121- strategy : DefaultSortingStrategy . instance ( )
122- } ,
123- {
124- dir : SortingDirection . Desc ,
125- fieldName : 'Contract' ,
126- ignoreCase : false ,
127- strategy : DefaultSortingStrategy . instance ( )
128- }
129- ] ;
130- }
131- }
132-
133- /** Grid Formatters */
134- public formatNumber ( value : number ) {
135- return value . toFixed ( 2 ) ;
136- }
137-
138- public percentage ( value : number ) {
139- return value . toFixed ( 2 ) + '%' ;
140- }
141-
142- public formatCurrency ( value : number ) {
143- return '$' + value . toFixed ( 3 ) ;
54+ public toggleGrouping ( newValue : boolean ) {
55+ this . groupingExpressions = newValue ? GROUPING_EXPRESSIONS : [ ] ;
14456 }
14557
14658 /** Grid CellStyles and CellClasses */
@@ -151,7 +63,7 @@ export class GridFinJSComponent implements OnInit, AfterViewInit, OnDestroy {
15163 private strongPositive = ( rowData : any ) : boolean => rowData [ 'Change(%)' ] >= 1 ;
15264 private strongNegative = ( rowData : any ) : boolean => rowData [ 'Change(%)' ] <= - 1 ;
15365
154- /* eslint-disable @typescript-eslint/member-ordering */
66+ // eslint-disable-next-line @typescript-eslint/member-ordering
15567 public trends = {
15668 changeNeg : this . changeNegative ,
15769 changePos : this . changePositive ,
@@ -161,15 +73,11 @@ export class GridFinJSComponent implements OnInit, AfterViewInit, OnDestroy {
16173 strongPositive : this . strongPositive
16274 } ;
16375
76+ // eslint-disable-next-line @typescript-eslint/member-ordering
16477 public trendsChange = {
16578 changeNeg2 : this . changeNegative ,
16679 changePos2 : this . changePositive ,
16780 strongNegative2 : this . strongNegative ,
16881 strongPositive2 : this . strongPositive
16982 } ;
170- /* eslint-enable @typescript-eslint/member-ordering */
171-
172- public get grouped ( ) : boolean {
173- return this . grid . groupingExpressions . length > 0 ;
174- }
17583}
0 commit comments