This is, primarily, a conversion of the AG-Grid Streaming Stress Test that uses React and Redux. Also, Socket IO is used for streaming data, instead of using web workers.
The suggested method for handling updates when using React and Redux in the Ag-Grid documentation is to pass rowData as a prop to the AgGridReact component with the 'deltaRowDataMode' option turned on. This method is not performant when dealing with a large dataset and many updates per second.
The method employed here is straightforward:
-
When rowData is initially set in Redux, a map of row ids to array indexes is created. When updates come in, the id/index map is used when iterating over the array of incoming updates, to generate the modified rowData. This isn't strictly necessary to update data in the grid (see next item), but is needed so that rowData stored in Redux stays up to date for other purposes (displaying charts, in this case). See data reducer
-
Each incoming array of updates is set in Redux, and this is passed to batchUpdateRowData in the component after checking for a change to the updates prop in componentDidUpdate. See Grid using batchUpdateRowData method
This project also serves as something of a playground for me to learn different chart visualization libraries. Echarts, CanvasJS and HighCharts have been implemented so far.
To run, first start the server with
yarn server
Then start the app with
yarn start