graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-10 07:03:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

[Client] Improve server home widget

Browse source
This commit is contained in:
syuilo 2017-06-09 01:21:56 +09:00
parent 04d07f9bba
commit d041232ccd
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/web/app/desktop/tags/home-widgets/server.tag
View file

@ -73,7 +73,7 @@
<mk-server-home-widget-stats> <mk-server-home-widget-stats>
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none"> <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 <polygon
riot-points={ cpuPolygonPoints } riot-points={ cpuPolygonPoints }
riot-fill={ cpuColor } riot-fill={ cpuColor }
@ -85,7 +85,7 @@
riot-stroke={ cpuColor }/> riot-stroke={ cpuColor }/>
</svg> </svg>
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none"> <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 <polygon
riot-points={ memPolygonPoints } riot-points={ memPolygonPoints }
riot-fill={ memColor } riot-fill={ memColor }
@ -116,6 +116,9 @@
font-size 5px font-size 5px
fill #7b7b7b fill #7b7b7b
> tspan
opacity 0.5
&:after &:after
content "" content ""
display block display block
@ -152,13 +155,18 @@
const cpuColor = `hsl(${180 - (stats.cpu_usage * 180)}, 80%, 70%)`; const cpuColor = `hsl(${180 - (stats.cpu_usage * 180)}, 80%, 70%)`;
const memColor = `hsl(${180 - (stats.mem.used / stats.mem.total * 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({ this.update({
cpuPolylinePoints, cpuPolylinePoints,
memPolylinePoints, memPolylinePoints,
cpuPolygonPoints, cpuPolygonPoints,
memPolygonPoints, memPolygonPoints,
cpuColor, cpuColor,
memColor memColor,
cpuP,
memP
}); });
}; };
</script> </script>