diff options
Diffstat (limited to 'src/web')
| -rw-r--r-- | src/web/app/desktop/tags/home-widgets/server.tag | 14 |
1 files changed, 11 insertions, 3 deletions
diff --git a/src/web/app/desktop/tags/home-widgets/server.tag b/src/web/app/desktop/tags/home-widgets/server.tag index 0d869eec9d..94418005b8 100644 --- a/src/web/app/desktop/tags/home-widgets/server.tag +++ b/src/web/app/desktop/tags/home-widgets/server.tag @@ -73,7 +73,7 @@ <mk-server-home-widget-stats> <svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none"> - <text dx="1" dy="5">CPU</text> + <text dx="1" dy="5">CPU <tspan>{ cpuP }%</tspan></text> <polygon riot-points={ cpuPolygonPoints } riot-fill={ cpuColor } @@ -85,7 +85,7 @@ riot-stroke={ cpuColor }/> </svg> <svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none"> - <text dx="1" dy="5">MEM</text> + <text dx="1" dy="5">MEM <tspan>{ memP }%</tspan></text> <polygon riot-points={ memPolygonPoints } riot-fill={ memColor } @@ -116,6 +116,9 @@ font-size 5px fill #7b7b7b + > tspan + opacity 0.5 + &:after content "" display block @@ -152,13 +155,18 @@ const cpuColor = `hsl(${180 - (stats.cpu_usage * 180)}, 80%, 70%)`; const memColor = `hsl(${180 - (stats.mem.used / stats.mem.total * 180)}, 80%, 70%)`; + const cpuP = (stats.cpu_usage * 100).toFixed(0); + const memP = (stats.mem.used / stats.mem.total * 100).toFixed(0); + this.update({ cpuPolylinePoints, memPolylinePoints, cpuPolygonPoints, memPolygonPoints, cpuColor, - memColor + memColor, + cpuP, + memP }); }; </script> |