Gauge crunches memory

[GLAMBERTParticipant]

under Angular 8 , I create a component with a template containing 4
gauges in a ngfor loop. The gauge get information from the component
through binding. The component received a feed through websocket from a
server every 10 secondes (control process).

All works fine the gauges are updated by the feed, but the memory usage is
growing up to the crash of the chrome instance after 2 or 3 hours.
I disable the update of the DOM to exclude the code for the feed
management and the memory usage is quite stable. Without update of the
DOM the memory is stable.

I try to use the API gauge.height() and setOption() without the binding, the widget is
updated internally (view in devtools but nothing change on the screen.

I try the same process with one gauge (no ngfor) and that works fine.

I perhaps did’nt understand something or did something wrong . what do
you feel of this behavior ?

`
thanks for your Help.
<table id=tab1 border=”0″>
<tr id=trtab1>
<ng-container *ngFor=”let Dba of Val ; let BaI = index”>
<td id=td{{BaI}} >
<table id=tab2{{BaI}} border=”0″>
<th id=thtitle{{BaI}} style=”text-align: ‘center'”>
<p id=title{{BaI}} [ngStyle]=”ngStyle[BaI]” readonly rows=”1″ cols=”12″>{{title[BaI]}}</p>
</th>
<tr id=tdtab2{{BaI}}>
<jqxGauge #myGauge id=gauge{{BaI}}
[height] = 200 [width] = 200
[colorScheme] = “‘scheme05′”
[animationDuration] = 0
[ticksDistance]= “‘15%'”
[startAngle]= -315 [endAngle]= -45
[pointer]= “{length: ‘70%’, width: ‘2%’}”
[cap]= “{ style: { fill: ‘#249dd6’, stroke: ‘#249dd6’}}”
[border]=”{ size: ‘3%’, style: { stroke: ‘#cccccc’}, visible: true, showGradient: true }”
[min]= “Min[BaI]” [max]= “Max[BaI]”
[ticksMinor]=”tickMinor[BaI]”
[ticksMajor]=”tickMajor[BaI]”
[labels]= “labels[BaI]”
[ranges]= “ranges[BaI]”
[caption]=”caption[BaI]”
[value] = “Val[BaI]”>
</jqxGauge>
</tr>
</table>
</td>
</ng-container>
</tr>
</table>

import { Component, ViewChildren, QueryList} from ‘@angular/core’;
// websockets service which gives a message every 10 secondes
import { DataService } from ‘../dataservice.service’;
import { jqxGaugeComponent } from ‘jqwidgets-ng/jqxgauge’;
import { formatNumber } from ‘@angular/common’;

@Component({
selector: ‘app-cirgauge’,
templateUrl: ‘./cirgauge.component.html’,
styleUrls: [‘./cirgauge.component.css’],
providers: [DataService]
})
export class CirgaugeComponent {
// variables to update the DOM through bindings
title = [”, ”, ”, ”, ”];
ngStyle = [ {backgroundColor: ”},
{backgroundColor: ”},
{backgroundColor: ”},
{backgroundColor: ”}];
Val = [100, 100, 100, 100];
Min = [-10, 0, 10, 10];
Max = [ 40, 14, 80, 80];
caption: any = [ {value: ‘0’, position: ‘bottom’, offset: [0, 10], visible: true},
{value: ‘0’, position: ‘bottom’, offset: [0, 10], visible: true},
{value: ‘0’, position: ‘bottom’, offset: [0, 10], visible: true},
{value: ‘0’, position: ‘bottom’, offset: [0, 10], visible: true}];
tickMinor: any = [ {interval: 1, size: ‘7%’, visible: true },
{interval: 0.5, size: ‘7%’, visible: true },
{interval: 2, size: ‘7%’, visible: true },
{interval: 2, size: ‘7%’, visible: true }];
tickMajor: any = [ {interval: 5, size: ‘15%’, visible: true },
{interval: 1, size: ‘15%’, visible: true },
{interval: 10, size: ‘15%’, visible: true },
{interval: 10, size: ‘15%’, visible: true }];
labels: any = [ {distance: ‘35%’, interval: 5, offset: [0, -10], visible: true },
{distance: ‘35%’, interval: 1, offset: [0, -10], visible: true },
{distance: ‘35%’, interval: 10, offset: [0, -10], visible: true },
{distance: ‘35%’, interval: 10, offset: [0, -10], visible: true }];
ranges: any = [
[ { startValue: -10, endValue: 15, style: { fill: ‘#0000FF’, stroke: ‘#0000FF’}, startWidth: ‘7%’, endWidth: ‘7%’},
{ startValue: 15, endValue: 25, style: { fill: ‘#00FF00’, stroke: ‘#00FF00’}, startWidth: ‘7%’, endWidth: ‘7%’},
{ startValue: 25, endValue: 40, style: { fill: ‘#FF0000’, stroke: ‘#FF0000’}, startWidth: ‘7%’, endWidth: ‘7%’}],
[ { startValue: 0, endValue: 0, style: { fill: ‘#0000FF’, stroke: ‘#0000FF’}, startWidth: ‘7%’, endWidth: ‘7%’},
{ startValue: 0, endValue: 12, style: { fill: ‘#00FF00’, stroke: ‘#00FF00’}, startWidth: ‘7%’, endWidth: ‘7%’},
{ startValue: 12, endValue: 14, style: { fill: ‘#FF0000’, stroke: ‘#FF0000’}, startWidth: ‘7%’, endWidth: ‘7%’}],
[ { startValue: 10, endValue: 0, style: { fill: ‘#0000FF’, stroke: ‘#0000FF’}, startWidth: ‘7%’, endWidth: ‘7%’},
{ startValue: 0, endValue: 0, style: { fill: ‘#00FF00’, stroke: ‘#00FF00’}, startWidth: ‘7%’, endWidth: ‘7%’},
{ startValue: 0, endValue: 80, style: { fill: ‘#FF0000’, stroke: ‘#FF0000’}, startWidth: ‘7%’, endWidth: ‘7%’}],
[ { startValue: 10, endValue: 0, style: { fill: ‘#0000FF’, stroke: ‘#0000FF’}, startWidth: ‘7%’, endWidth: ‘7%’},
{ startValue: 0, endValue: 0, style: { fill: ‘#00FF00’, stroke: ‘#00FF00’}, startWidth: ‘7%’, endWidth: ‘7%’},
{ startValue: 0, endValue: 80, style: { fill: ‘#FF0000’, stroke: ‘#FF0000’}, startWidth: ‘7%’, endWidth: ‘7%’}]];
// variable to receive update from the backend through websocket service
Ba = [{Nom: ”, ConsiN: 5, ConsiJ: 35, Temp: 0, Etat: 0},
{Nom: ”, ConsiN: 0, ConsiJ: 14, Temp: 0, Etat: 0},
{Nom: ”, ConsiN: 0, ConsiJ: 0, Temp: 0, Etat: 0},
{Nom: ”, ConsiN: 0, ConsiJ: 0, Temp: 0, Etat: 0}
];
// start flag to optimize the update process
start = true;
constructor(
private socket1: DataService) {}
// query list to get access to the 4 gauges
@ViewChildren(‘myGauge’) listGauge: QueryList<jqxGaugeComponent>;

ngOnInit() {
}
ngAfterViewInit() {
console.log(‘ngAterViewinit debut’);
// call the listener for Gauge information
this.socket1.getEventListener(‘Gauge’).subscribe(event1 => {
// init service launch the communication with backend get a message form the service
console.log(‘cirgauge recept message’);
// if message is not of type message discarded it’s open or close
if (event1.type === ‘message’) {
// receive a data message extract the value in Ba
this.Ba = JSON.parse(event1.data)[‘Ballons’.toString()];
// change value for each of the 4 gauges and transfert in relevant variable to update
// the DOM through binding
this.listGauge.forEach((gauge, index) => {
// changes properties of caption and Value for each messages
this.caption[index][‘value’.toString()] = formatNumber(this.Ba[index][‘Temp’.toString()], ‘fr-FR’, ‘.2-2’);
this.Val[index] = this.Ba[index][‘Temp’.toString()];
if (this.Ba[index][‘Etat’.toString()] === 1 && index > 1) {
this.ngStyle[index][‘backgroundColor’.toString()] = ‘#FF0000’;
}
// changes properties only on reception of the first message (ranges , min, max …)
if (this.start) {
this.title[index] = this.Ba[index][‘Nom’.toString()];
// gauge 2 and 3 has ranges coming from backend
if (index > 1) {
this.ranges[index][0][‘startValue’.toString()] = this.Min[index];
this.ranges[index][0][‘endValue’.toString()] = this.Ba[index][‘ConsiJ’.toString()];
this.ranges[index][1][‘startValue’.toString()] = this.Ba[index][‘ConsiJ’.toString()];
this.ranges[index][1][‘endValue’.toString()] = this.Ba[index][‘ConsiN’.toString()];
this.ranges[index][2][‘startValue’.toString()] = this.Ba[index][‘ConsiN’.toString()];
this.ranges[index][2][‘endValue’.toString()] = this.Max[index];
}
}
});
this.start = false;
}
if (event1.type === ‘close’) {/*to do*/}// communication close from service
if (event1.type === ‘open’) {/*to do*/}// communication open by service
});

}
ngOnDestroy() {
this.socket1.close();
console.log(‘destroy cirgauge’);
}
}

import { Injectable, EventEmitter } from ‘@angular/core’;

@Injectable({
providedIn: ‘root’
})
export class DataService {

private socket: WebSocket;
private state = 0;
private listener: EventEmitter<any> = new EventEmitter();

public constructor() {}
public close() {
console.log(‘datas close’);
this.state = 0;
this.socket.close();
}
public getEventListener(what: string) {
console.log(‘geteventlistener’ + what + ‘ ‘ + this.state);
if (this.state === 0) { this.state = 1; this.open(what); }
return this.listener;
}
private open(what: string) {
console.log(‘datas debut’ + what);
this.socket = new WebSocket(‘ws://chauffage.glocal:7681/publisher’, what);
this.socket.onopen = event => {this.listener.emit({type: ‘open’, data: event}); };
this.socket.onclose = event => {this.listener.emit({type: ‘close’, data: event}); };
this.socket.onmessage = event => {
// console.log(‘message :’ + event.data);
this.listener.emit({type: ‘message’, data: event.data});
console.log( ‘message :’ + what); };
}
}

[HristoParticipant]

Hello GLAMBERT,

I tested this example and it seems to work fine:
https://stackblitz.com/edit/github-ebjrts
Could you try to reproduce your case as you use the example above?
After that, I will try to reproduce it and then I will try to provide you a solution.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts