heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

[Client] Improve graph rendering of the server home widget

Browse source
This commit is contained in:
syuilo 2017-06-11 05:41:38 +09:00
parent 8066aeff89
commit ea57992e6a
1 changed files with 46 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -83,27 +83,49 @@
<mk-server-home-widget-cpu-and-memory-usage> <mk-server-home-widget-cpu-and-memory-usage>
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none"> <svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
<polygon <defs>
riot-points={ cpuPolygonPoints } <linearGradient id={ cpuGradientId } x1="0" x2="0" y1="1" y2="0">
riot-fill={ cpuColor } <stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
fill-opacity="0.5"/> <stop offset="33%" stop-color="hsl(120, 80%, 70%)"></stop>
<polyline <stop offset="66%" stop-color="hsl(60, 80%, 70%)"></stop>
riot-points={ cpuPolylinePoints } <stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
fill="none" </linearGradient>
stroke-width="1" <mask id={ cpuMaskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }>
riot-stroke={ cpuColor }/> <polygon
riot-points={ cpuPolygonPoints }
fill="#fff"
fill-opacity="0.5"/>
<polyline
riot-points={ cpuPolylinePoints }
fill="none"
stroke="#fff"
stroke-width="1"/>
</mask>
</defs>
<rect x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY } style="stroke: none; fill: url(#{ cpuGradientId }); mask: url(#{ cpuMaskId })"/>
<text x="1" y="5">CPU <tspan>{ cpuP }%</tspan></text> <text x="1" y="5">CPU <tspan>{ cpuP }%</tspan></text>
</svg> </svg>
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none"> <svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
<polygon <defs>
riot-points={ memPolygonPoints } <linearGradient id={ memGradientId } x1="0" x2="0" y1="1" y2="0">
riot-fill={ memColor } <stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
fill-opacity="0.5"/> <stop offset="33%" stop-color="hsl(120, 80%, 70%)"></stop>
<polyline <stop offset="66%" stop-color="hsl(60, 80%, 70%)"></stop>
riot-points={ memPolylinePoints } <stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
fill="none" </linearGradient>
stroke-width="1" <mask id={ memMaskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }>
riot-stroke={ memColor }/> <polygon
riot-points={ memPolygonPoints }
fill="#fff"
fill-opacity="0.5"/>
<polyline
riot-points={ memPolylinePoints }
fill="none"
stroke="#fff"
stroke-width="1"/>
</mask>
</defs>
<rect x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY } style="stroke: none; fill: url(#{ memGradientId }); mask: url(#{ memMaskId })"/>
<text x="1" y="5">MEM <tspan>{ memP }%</tspan></text> <text x="1" y="5">MEM <tspan>{ memP }%</tspan></text>
</svg> </svg>
<style> <style>
@ -135,10 +157,16 @@
clear both clear both
</style> </style>
<script> <script>
import uuid from '../../../common/scripts/uuid';
this.viewBoxX = 50; this.viewBoxX = 50;
this.viewBoxY = 30; this.viewBoxY = 30;
this.stats = []; this.stats = [];
this.connection = this.opts.connection; this.connection = this.opts.connection;
this.cpuGradientId = uuid();
this.cpuMaskId = uuid();
this.memGradientId = uuid();
this.memMaskId = uuid();
this.on('mount', () => { this.on('mount', () => {
this.connection.on('stats', this.onStats); this.connection.on('stats', this.onStats);
@ -159,9 +187,6 @@
const cpuPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ cpuPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`; const cpuPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ cpuPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
const memPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ memPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`; const memPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ memPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
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 cpuP = (stats.cpu_usage * 100).toFixed(0);
const memP = (stats.mem.used / stats.mem.total * 100).toFixed(0); const memP = (stats.mem.used / stats.mem.total * 100).toFixed(0);
@ -170,8 +195,6 @@
memPolylinePoints, memPolylinePoints,
cpuPolygonPoints, cpuPolygonPoints,
memPolygonPoints, memPolygonPoints,
cpuColor,
memColor,
cpuP, cpuP,
memP memP
}); });