Mango 3.0 HTML dashboard unresponsive/taking up CPU utilisation

[mliu18]

Hi,

Just wondering if the behaviour I have is expected. I have created a custom dashboard using the pre-beta Mango 3.0, running on an i7 desktop with 16GB RAM, windows 10. The dashboard has a few ma-serial-chart and several ma-point-value, the code is shown below. All data-points used are updated once every second.

Opening up the page on my desktop is mostly okay (apart from occasional unresponsiveness). The CPU usage can reach up to 10% from my Chrome browser. However, trying the page on a web device, such as my iPad becomes almost un-responsive. The page itself can take a minute to open, and any interaction, such as navigating to other pages has a huge delay. Despite this, the other few default dashboards (such as energy dashboard) don't have the same issue.

I also tried to do the same on network connected Laptops, it isn't as bad as my iPad, however it is considerable more un-responsive than on the host PC.

Is it because I'm having too many real-time plots? Or did I miss anything in the code. Cheers.

Warm regards,
Michael

<div class="ma-designer-root" id="07d16112-2e95-40d7-b258-484be7e4806e" style="width: 1000px; height: 1000px; position: relative;" src="\user\img\network.svg" legend="DG Set-Point">
    
    
    <img id="819151ac-a817-4e65-badb-b5268105f658" style="position: absolute; left: 3px; top: 300px; width: 994px; height: 371px; text-align: center; color: rgb(255, 0, 0); z-index: 1;" src="\user\img\network.png">
    
    
    
    <ma-serial-chart id="67ca008b-ffd8-4eda-b295-6730bf3d547e" style="position: absolute; left: 0px; width: 500px; height: 300px; bottom: 0px; z-index: 1;" series1-values="bus_voltage_bsp_pu" default-type="line" legend="true" series1-title="BSP" series2-values="bus_voltage_a_pu" series2-title="A" series3-values="bus_voltage_b_pu" series3-title="B" series4-values="bus_voltage_c_pu" series4-title="C"></ma-serial-chart>
    <ma-serial-chart id="824fcec7-0b4f-4281-b0c6-bd059a2e0106" style="position: absolute; left: 0px; top: 0px; width: 500px; height: 300px;" series1-values="dg_set_point" series1-title="DG Set-Point" legend="true" default-type="line"></ma-serial-chart>
    <ma-serial-chart id="4aafc590-3296-456f-9cb6-23ebe9ff6e18" style="position: absolute; top: 0px; width: 500px; height: 300px; right: 0px;" default-type="line" series1-values="dg_output_mw" series1-title="Output (PU)" legend="true"></ma-serial-chart>
    <ma-serial-chart id="01f7c665-fb50-43eb-999c-38260a9f8b47" style="position: absolute; width: 500px; height: 300px; z-index: 1; right: 0px; bottom: 0px;" series1-values="counter_dg" default-type="line" legend="true" series1-title="DG" series2-values="counter_a" series2-title="A" series3-values="counter_b" series3-title="B" series4-values="counter_c" series4-title="C"></ma-serial-chart>

    
    
    <ma-point-value id="e4b0f23d-df39-4c04-9f3f-fe2d8a845fbb" style="position: absolute; left: 53px; top: 400px; width: 70px; height: 30px; text-align: center; color: rgb(0, 0, 0); font-size: 24px; z-index: 1;" point-xid="BUS_VOLTAGE_Grid_PU"></ma-point-value>
    <ma-point-value id="d8366dfa-845d-45e3-8a84-158f858f7ad1" style="position: absolute; left: 223px; top: 400px; width: 70px; height: 30px; text-align: center; color: rgb(0, 0, 0); font-size: 24px; z-index: 1;" point-xid="BUS_VOLTAGE_A_PU"></ma-point-value>
    <ma-point-value id="2289255b-66da-442f-af0d-f1347b253bf3" style="position: absolute; left: 483px; top: 400px; width: 70px; height: 30px; text-align: center; color: rgb(0, 0, 0); font-size: 24px; z-index: 1;" point-xid="BUS_VOLTAGE_B_PU"></ma-point-value>    
    <ma-point-value id="ed2d8fbc-e957-466a-a6e2-835356fff1bd" style="position: absolute; left: 733px; top: 400px; width: 70px; height: 30px; text-align: center; color: rgb(0, 0, 0); font-size: 24px; z-index: 1;" point-xid="BUS_VOLTAGE_C_PU"></ma-point-value>
    
    <div id="03e4d863-09aa-45ef-9b70-e06c6442401f" style="position: absolute; left: 475px; top: 580px; width: 200px; height: 30px; text-align: center; color: rgb(0, 29, 255); font-size: 24px; z-index: 1;">({{load_b_p_pu.renderedValue}} , {{load_b_q_pu.renderedValue}})</div>    
    <div id="1105dd79-c382-46f6-98bd-e92c50dd0c6b" style="position: absolute; left: 729px; top: 580px; width: 200px; height: 30px; text-align: center; color: rgb(0, 29, 255); font-size: 24px; line-height: normal; z-index: 1;">({{load_c_p_pu.renderedValue}} , {{load_c_q_pu.renderedValue}})</div>
    <div id="ee823109-4e12-48fb-95fe-bf32ed31bc30" style="position: absolute; left: 785px; top: 450px; width: 200px; height: 30px; text-align: center; color: rgb(255, 0, 0); font-size: 24px; line-height: normal; z-index: 1;">({{dg_p_pu.renderedValue}} , {{dg_q_pu.renderedValue}})</div>
    
    
    <ma-point-values latest="120" realtime="true" point-xid="BUS_VOLTAGE_Grid_PU" values="bus_voltage_bsp_pu" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="BUS_VOLTAGE_A_PU" values="bus_voltage_a_pu" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="BUS_VOLTAGE_B_PU" values="bus_voltage_b_pu" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="BUS_VOLTAGE_C_PU" values="bus_voltage_c_pu" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="DG_P_PU" values="dg_output_mw" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="DG_P_Available_Instant_PU" values="dg_available_mw" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="DG_Q_PU" values="dg_output_mvar" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="DG_SETPOINT_PU" values="dg_set_point" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="BUS_P_B_PU" values="load_b_mw" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="BUS_P_C_PU" values="load_c_mw" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="Persistence_Counter_DG" values="counter_dg" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="Persistence_Counter_A" values="counter_a" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="Persistence_Counter_B" values="counter_b" rendered="false"></ma-point-values>
    <ma-point-values latest="120" realtime="true" point-xid="Persistence_Counter_C" values="counter_c" rendered="false"></ma-point-values>
    
    
    
    
    <ma-get-point-value point-xid="BUS_P_B_PU" point="load_b_p_pu"></ma-get-point-value>
    <ma-get-point-value point-xid="BUS_Q_B_PU" point="load_b_q_pu"></ma-get-point-value>
    <ma-get-point-value point-xid="BUS_P_C_PU" point="load_c_p_pu"></ma-get-point-value>
    <ma-get-point-value point-xid="BUS_Q_C_PU" point="load_c_q_pu"></ma-get-point-value>
    <ma-get-point-value point-xid="DG_P_PU" point="dg_p_pu"></ma-get-point-value>
    <ma-get-point-value point-xid="DG_Q_PU" point="dg_q_pu"></ma-get-point-value>

    
    

</div>

[Jared Wiltshire]

Hi @mliu18! Yikes, that's a lot of real time plots! Yeah you may experience some slowdowns on devices like iPads with that number of plots. I can suggest a few things -

• Try using Chrome on the iPad
• Use a time range of the last 5 minutes with a rollup instead of latest x values, If you use a single <ma-point-values> tag with an array of points (from a point query) you should see greatly improved performance

Let me know if any of that requires further explanation.

[mliu18]

Hi Jared,

Thanks for the prompt response. Just wondering what do you mean by a single <ma-point-values> with an array of points? Cheers.

Warm regards,
Michael