Hello everyone!
I just recently started using Dashboard 2.0 to display some of the data that Node-RED is reading from different automations, but I am experiencing serious performance issues when charts are added to the dashboard itself.
Allow me to quickly describe the structure of the project so that everything is clearer. I have several devices running Node-RED which are responsible to fetch data from automations using both S7 and MODBUS contrib nodes, elaborate and modify the data where needed, and immediately send them to a Touch Panel device that also has Node-RED installed, using websocket protocol. This latter device, the Panel, is solely responsible for receiving the data through websocket and create the dashboard, there are no complex elaborations or processes running on the Panel machine.
The dasboard is not that complex, it is composed by some custom ui-template components (some tiles that can change style and appearance based on input), some more custom buttons that allow opening a popup and insert a value trough a text input / select, and three timescale charts which are displaying the last minute of streamed data (1 minute or 30 points). Data is received by the Panel's Node-RED once every two seconds. Here's a picture of the dashboard (pardon me for having to censor some of the writings).
The Select component placed on the top left corner allows the user to select from which device / automation should the data be received, this is especially useful since we have several automations of the same type and model and operators must be able to choose which one they want to display.
Here starts the issue, as every time the Select is changed, or every time the flow is changed and deployed in Node-RED, I see a peak in CPU usage and used memory that goes up to 100%.
When this happens on my Intel i7 PC is not an issue, the UI continues to work without any noticeable problem. However, being the Panel equipped with very very low-end hardware (Intel N4200 1.1Ghz), it is much more noticeable and even causes freezes in the UI rendering it unusable for up to 15/20 seconds at times.
When removing the three charts from the dashboard and only leaving my custom ui-template components, the CPU usage is much less intensive and the maximum usage is about 1.5 or 2%.
I also checked my flow thoroughly, to make sure there are no other operations, functions or components eating up resources, however I cannot find any issue there:
As you can see from the picture, data is received (fake data in this case) trough websocket, then a Switch node is used to check whether the msg.source property is the same as the value of the flow.source property, which is set using the dropdown select I talked about earlier.
The received payload passes then through a Switch nodes where needed properties are set, and then to the ui-template nodes that generate the tiles. Those tiles can be clicked, and the output (which includes a msg.show boolean property) is used to toggle visibility of another custom ui-template component, which consists of an overlay and a popup, where the user can insert or choose some values. The popup contains a "OK" button that when pressed sends the msg to the next node, but also to itself, with the msg.show property set to false, so the overlay and popup are hidden.
Changing the source device using the Select in the top left part of the UI triggers a Dashboard Reset, where an empty payload is passed to all widgets causing them to reset before starting to display the new data of the chosen device.
Do you see any reason why this workflow could cause performance issues? Is just the Panel hardware that is insufficient for running the Dashboard 2.0? I have been reading some issues on GitHub that seem to blame it on the Chart component and suggest using a different approach to display live data and avoid the default chart node, is that the case?
Thanks for the time and the assistance, have a great day!
Dennis
