I have a React application showing a real time updated chart which works well when receives data from event-based WebSocket. Now I need to modify the app with a new data source. I have an aysnc function to get a batch of data in an interval.
kinesisReadInterval.current = setInterval(async () => {
const recordsResponse = await kinesisRef.current.getRecords({ ShardIterator: shardIterator }).promise();
recordsResponse.Records.forEach(record => {
try {
const dataObj = JSON.parse(record.Data.toString('utf-8'));
spectrumAnalyzerRef.current.metaDataHandler(dataObj);
} catch (jsonError) {
spectrumAnalyzerRef.current.binaryDataHandler(record.Data.buffer);
}
});
shardIterator = recordsResponse.NextShardIterator;
if (!shardIterator || !kinesisConected.current) {
clearInterval(intervalId); // Stop interval if conditions are not met
}
}, 1000);
The recordsResponse.Records contains a batch of records and I want to update the chart based on these records one by one. From my logs, I can see that the binaryDataHandler() which will call appendRange() ran successfully for each record. However, the chart only redraws for the last record of the recordsResponse.Records. I have tried to store the recordsResponse.Records in a state variable and loop to update the chart later, but still got the same result. I am not sure whether it’s chart related issue or React rendering issue. Do you have any idea?
- Quyen Sy asked 2 months ago
- last active 2 months ago
By following this example to create reusable SciChart component in React:
https://www.scichart.com/documentation/js/current/TutorialReusableReactComponent.html
The chart cannot be created when run in dev mode. But it works well under production mode. I think it’s because React renders components twice in strict mode. It seems that SciChart got problems to create chart with the following logic when running the application in dev mode. Is this true? Or I missed anything?
useEffect(() => {
const chartInitializationPromise = props.initChart(rootElementId).then((initResult) => {
sciChartSurfaceRef.current = initResult.sciChartSurface;
return initResult.sciChartSurface;
});
const performCleanup = () => {
sciChartSurfaceRef.current.delete();
sciChartSurfaceRef.current = undefined;
};
return () => {
// check if chart is already initialized or wait init to finish before deleting it
sciChartSurfaceRef.current ? performCleanup() : chartInitializationPromise.then(performCleanup);
};
}, []);
- Quyen Sy asked 9 months ago
- last active 3 months ago
