import { ColDef , GridOptions , ValueFormatterParams } from '@ag-grid-community/core' ; declare var globalRowData ; var UPDATE_COUNT = 200 ; const columnDefs = [ { headerName : 'Product' , field : 'product' , enableRowGroup : true , enablePivot : true , rowGroupIndex : 0 , hide : true , } , { headerName : 'Portfolio' , field : 'portfolio' , enableRowGroup : true , enablePivot : true , rowGroupIndex : 1 , hide : true , } , { headerName : 'Book' , field : 'book' , enableRowGroup : true , enablePivot : true , rowGroupIndex : 2 , hide : true , } , { headerName : 'Trade' , field : 'trade' , width : 100 } , { field : 'current' , width : 200 , aggFunc : 'sum' , enableValue : true , cellClass : 'number' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { field : 'previous' , width : 200 , aggFunc : 'sum' , enableValue : true , cellClass : 'number' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { field : 'dealType' , enableRowGroup : true , enablePivot : true , } , { headerName : 'Bid' , field : 'bidFlag' , enableRowGroup : true , enablePivot : true , width : 100 , } , { headerName : 'PL 1' , field : 'pl1' , width : 200 , aggFunc : 'sum' , enableValue : true , cellClass : 'number' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : 'PL 2' , field : 'pl2' , width : 200 , aggFunc : 'sum' , enableValue : true , cellClass : 'number' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : 'Gain-DX' , field : 'gainDx' , width : 200 , aggFunc : 'sum' , enableValue : true , cellClass : 'number' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : 'SX / PX' , field : 'sxPx' , width : 200 , aggFunc : 'sum' , enableValue : true , cellClass : 'number' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { headerName : '99 Out' , field : '_99Out' , width : 200 , aggFunc : 'sum' , enableValue : true , cellClass : 'number' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { field : 'submitterID' , width : 200 , aggFunc : 'sum' , enableValue : true , cellClass : 'number' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { field : 'submitterDealID' , width : 200 , aggFunc : 'sum' , enableValue : true , cellClass : 'number' , valueFormatter : numberCellFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , ] ; function numberCellFormatter ( params ) { return Math . floor ( params . value ) . toString ( ) . replace ( /(\d)(?=(\d{3})+(?!\d))/g , '$1,' ) ; } const gridOptions = { columnDefs : columnDefs , suppressAggFuncInHeader : true , animateRows : true , rowGroupPanelShow : 'always' , pivotPanelShow : 'always' , getRowNodeId : function ( data ) { return data . trade ; } , defaultColDef : { width : 120 , sortable : true , resizable : true , } , autoGroupColumnDef : { width : 250 , } , onGridReady : function ( params ) { getData ( ) ; params . api . setRowData ( globalRowData ) ; } , } ; function onNormalUpdate ( ) { var startMillis = new Date ( ) . getTime ( ) ; setMessage ( 'Running Transaction' ) ; var api = gridOptions . api ! ; for ( var i = 0 ; i < UPDATE_COUNT ; i ++ ) { setTimeout ( function ( ) { var index = Math . floor ( Math . random ( ) * globalRowData . length ) ; var itemToUpdate = globalRowData [ index ] ; var newItem = copyObject ( itemToUpdate ) ; newItem . previous = newItem . current ; newItem . current = Math . floor ( Math . random ( ) * 100000 ) + 100 ; api . applyTransaction ( { update : [ newItem ] } ) ; } , 0 ) ; } setTimeout ( function ( ) { var endMillis = new Date ( ) . getTime ( ) ; var duration = endMillis - startMillis ; setMessage ( 'Transaction took ' + duration . toLocaleString ( ) + 'ms' ) ; } , 0 ) ; function setMessage ( msg ) { var eMessage = document . querySelector ( '#eMessage' ) as any ; eMessage . innerHTML = msg ; } } function onAsyncUpdate ( ) { var startMillis = new Date ( ) . getTime ( ) ; setMessage ( 'Running Async' ) ; var updatedCount = 0 ; var api = gridOptions . api ! ; for ( var i = 0 ; i < UPDATE_COUNT ; i ++ ) { setTimeout ( function ( ) { var index = Math . floor ( Math . random ( ) * globalRowData . length ) ; var itemToUpdate = globalRowData [ index ] ; var newItem = copyObject ( itemToUpdate ) ; newItem . previous = newItem . current ; newItem . current = Math . floor ( Math . random ( ) * 100000 ) + 100 ; api . applyTransactionAsync ( { update : [ newItem ] } , resultCallback ) ; } , 0 ) ; } function resultCallback ( ) { updatedCount ++ ; if ( updatedCount === UPDATE_COUNT ) { setTimeout ( function ( ) { var endMillis = new Date ( ) . getTime ( ) ; var duration = endMillis - startMillis ; setMessage ( 'Async took ' + duration . toLocaleString ( ) + 'ms' ) ; } , 0 ) ; } } function setMessage ( msg ) { var eMessage = document . querySelector ( '#eMessage' ) as any ; eMessage . innerHTML = msg ; } } function copyObject ( object ) { var newObject = { } ; Object . keys ( object ) . forEach ( function ( key ) { newObject [ key ] = object [ key ] ; } ) ; return newObject ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var eGridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( eGridDiv , gridOptions ) ; } ) ;