Gauge in autosize is not working well

[rmoraleda80]

Current Behavior

Gauges does not look graphically as expected.

Expected Behavior

be seen graphically as the documentation

Steps To Reproduce

In dashboard 2.0, inside Group 4x1 two gauges. For example 3/4 Gauge type if i set up with 4x5 size or others is working as expected. If i set up auto size, not. Others type of gauge, same behavior.

[
{
"id": "1edad842.826798",
"type": "group",
"z": "86e4121a.849e3",
"name": "recursos broker",
"style": {
"fill": "#dbcbe7",
"label": true,
"color": "#000000"
},
"nodes": [
"b71472cc.a4048",
"2f58a12e.b9aafe",
"7b57e6a624a94704",
"a7c7e87eac31658b",
"dd00e6117d8a3c1e",
"50ecc731f1f90f2f"
],
"x": 64,
"y": 2219,
"w": 702,
"h": 162
},
{
"id": "b71472cc.a4048",
"type": "cpu",
"z": "86e4121a.849e3",
"g": "1edad842.826798",
"name": "CPU Broker RPi4",
"msgCore": false,
"msgOverall": true,
"msgArray": false,
"msgTemp": false,
"x": 410,
"y": 2260,
"wires": [
[
"7b57e6a624a94704"
]
]
},
{
"id": "2f58a12e.b9aafe",
"type": "inject",
"z": "86e4121a.849e3",
"g": "1edad842.826798",
"name": "",
"props": [
{
"p": "payload",
"v": "",
"vt": "date"
},
{
"p": "topic",
"v": "",
"vt": "str"
}
],
"repeat": "60",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 190,
"y": 2260,
"wires": [
[
"b71472cc.a4048",
"a7c7e87eac31658b"
]
]
},
{
"id": "7b57e6a624a94704",
"type": "ui-gauge",
"z": "86e4121a.849e3",
"g": "1edad842.826798",
"name": "CPU",
"group": "df98b64dd219e383",
"order": 1,
"value": "payload",
"valueType": "msg",
"width": "4",
"height": "5",
"gtype": "gauge-34",
"gstyle": "rounded",
"title": "CPU",
"alwaysShowTitle": false,
"units": "%",
"icon": "",
"prefix": "",
"suffix": "",
"segments": [
{
"from": "0",
"color": "#5cd65c",
"text": "",
"textType": "label"
},
{
"from": "60",
"color": "#ffc800",
"text": "",
"textType": "label"
},
{
"from": "80",
"color": "#ea5353",
"text": "",
"textType": "label"
}
],
"min": 0,
"max": "100",
"sizeThickness": 16,
"sizeGap": 4,
"sizeKeyThickness": 8,
"styleRounded": true,
"styleGlow": false,
"className": "",
"x": 650,
"y": 2260,
"wires": [
[]
]
},
{
"id": "a7c7e87eac31658b",
"type": "DeviceStats",
"z": "86e4121a.849e3",
"g": "1edad842.826798",
"name": "",
"mem": true,
"nw": false,
"load": false,
"hostname": false,
"useString": false,
"x": 390,
"y": 2340,
"wires": [
[
"50ecc731f1f90f2f"
]
]
},
{
"id": "dd00e6117d8a3c1e",
"type": "ui-gauge",
"z": "86e4121a.849e3",
"g": "1edad842.826798",
"name": "RAM",
"group": "df98b64dd219e383",
"order": 2,
"value": "payload",
"valueType": "msg",
"width": "4",
"height": "5",
"gtype": "gauge-34",
"gstyle": "rounded",
"title": "RAM",
"alwaysShowTitle": false,
"units": "%",
"icon": "",
"prefix": "",
"suffix": "",
"segments": [
{
"from": "0",
"color": "#5cd65c",
"text": "",
"textType": "label"
},
{
"from": "60",
"color": "#ffc800",
"text": "",
"textType": "label"
},
{
"from": "80",
"color": "#ea5353",
"text": "",
"textType": "label"
}
],
"min": 0,
"max": "100",
"sizeThickness": 16,
"sizeGap": 4,
"sizeKeyThickness": 8,
"styleRounded": true,
"styleGlow": false,
"className": "",
"x": 690,
"y": 2340,
"wires": [
[]
]
},
{
"id": "50ecc731f1f90f2f",
"type": "function",
"z": "86e4121a.849e3",
"g": "1edad842.826798",
"name": "calculo ram",
"func": "//calculo del % segun el total (4 GB ram)\nmsg.payload = ((100 * msg.payload.mem.used) / 3882368).toFixed(2);\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 550,
"y": 2340,
"wires": [
[
"dd00e6117d8a3c1e"
]
]
},
{
"id": "df98b64dd219e383",
"type": "ui-group",
"name": "Broker Status RPi4",
"page": "de10842f3afd5e48",
"width": "4",
"height": "1",
"order": 5,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "de10842f3afd5e48",
"type": "ui-page",
"name": "Estación Meteorológica",
"ui": "6e1466292b31a970",
"path": "/em",
"icon": "home",
"layout": "flex",
"theme": "7a2f030eb681ec9d",
"breakpoints": [
{
"name": "Default",
"px": 0,
"cols": 3
},
{
"name": "Tablet",
"px": 576,
"cols": 6
},
{
"name": "Small Desktop",
"px": 768,
"cols": 9
},
{
"name": "Desktop",
"px": 1024,
"cols": 12
}
],
"order": 1,
"className": "",
"visible": true,
"disabled": false
},
{
"id": "6e1466292b31a970",
"type": "ui-base",
"name": "UI Name",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": true,
"navigationStyle": "temporary"
},
{
"id": "7a2f030eb681ec9d",
"type": "ui-theme",
"name": "Theme Name",
"colors": {
"surface": "#097479",
"primary": "#097479",
"bgPage": "#000000",
"groupBg": "#333333",
"groupOutline": "#767474"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px",
"density": "default"
}
},
{
"id": "b3f0bf4ac3883841",
"type": "global-config",
"env": [],
"modules": {
"node-red-contrib-cpu": "0.0.4",
"@flowfuse/node-red-dashboard": "1.28.0",
"node-red-contrib-device-stats": "1.1.2"
}
}
]

Environment

• Dashboard version: 1.28.0
• Node-RED version: 4.1.0
• Node.js version: 22.20.0
• npm version: 10.9.3
• Platform/OS: Raspberry Pi4
• Browser:Google Chrome

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate