Gauge in autosize is not working well

Open rmoraleda80 opened this issue 3 months ago • 0 comments

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

Sep 27 '25 16:09 rmoraleda80