React Real-Time Event Feed Dashboard

Implement a real-time event-feed dashboard using React. Styling is not required. A stream object and its subscription API are provided; you only need to call subscribe to receive events. Each event has approximately the following schema: { id, timestamp, tradeType, side, size, price, bid, ask, askSize, bidSize } Implement the following: Real-time event feed Receive and render stream events. The newest event must appear first. Render events in sections by event type; for example, Quote events in one section and Sell events in another. Summary statistics for the most recent 30 seconds Display aggregate statistics for events in the last 30 seconds. Events older than 30 seconds must not be included. Explain which aggregates you display and how they are updated as events arrive and time passes. Pause and resume Provide Pause and Resume controls. While paused, neither the visible feed nor its statistics may update. On resume, the dashboard must continue receiving and rendering stream data. Explain the semantics for events arriving while paused and how updates/subscription are resumed. Discuss React state management, subscription cleanup, event ordering, the 30-second sliding window, and avoidance of stale closures under a high-frequency stream. Example event { "id": "e1", "timestamp": 1710000000000, "tradeType": "quote", "side": "sell", "size": 100, "price": 101.25, "bid": 101.2, "ask": 101.3, "askSize": 200, "bidSize": 150 } Test scenarios Given events with timestamps 1000, 2000, and 3000, the feed renders them in the order 3000, 2000, 1000. A tradeType = "quote" event and a tradeType = "sell" event appear in their respective sections. At current time 40000, an event at timestamp 9999 is excluded from the 30-second statistics, while one at 10000 is included. After Pause, multiple incoming events do not change either the visible feed or the summary. After Resume, the dashboard processes live events again; explicitly define whether events received during the pause are discarded or buffered and later rendered. Example Input 收到事件：[{"id":"a","timestamp":1000,"tradeType":"quote"},{"id":"b","timestamp":3000,"tradeType":"quote"},{"id":"c","timestamp":2000,"tradeType":"sell"}] Output Quote 区域中 b 位于 a 之前；Sell 区域中显示 c；所有区域内事件按 timestamp 降序。