From ea57992e6a255c5d204960b7ff5ee3c60e2964ee Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 11 Jun 2017 05:41:38 +0900
Subject: [PATCH] [Client] Improve graph rendering of the server home widget

---
 .../app/desktop/tags/home-widgets/server.tag  | 69 ++++++++++++-------
 1 file changed, 46 insertions(+), 23 deletions(-)

diff --git a/src/web/app/desktop/tags/home-widgets/server.tag b/src/web/app/desktop/tags/home-widgets/server.tag
index 7c2850239..5652f1be7 100644
--- a/src/web/app/desktop/tags/home-widgets/server.tag
+++ b/src/web/app/desktop/tags/home-widgets/server.tag
@@ -83,27 +83,49 @@
 
 <mk-server-home-widget-cpu-and-memory-usage>
 	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
-		<polygon
-			riot-points={ cpuPolygonPoints }
-			riot-fill={ cpuColor }
-			fill-opacity="0.5"/>
-		<polyline
-			riot-points={ cpuPolylinePoints }
-			fill="none"
-			stroke-width="1"
-			riot-stroke={ cpuColor }/>
+		<defs>
+			<linearGradient id={ cpuGradientId } x1="0" x2="0" y1="1" y2="0">
+				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
+				<stop offset="33%" stop-color="hsl(120, 80%, 70%)"></stop>
+				<stop offset="66%" stop-color="hsl(60, 80%, 70%)"></stop>
+				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
+			</linearGradient>
+			<mask id={ cpuMaskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }>
+				<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>
 	</svg>
 	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
-		<polygon
-			riot-points={ memPolygonPoints }
-			riot-fill={ memColor }
-			fill-opacity="0.5"/>
-		<polyline
-			riot-points={ memPolylinePoints }
-			fill="none"
-			stroke-width="1"
-			riot-stroke={ memColor }/>
+		<defs>
+			<linearGradient id={ memGradientId } x1="0" x2="0" y1="1" y2="0">
+				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
+				<stop offset="33%" stop-color="hsl(120, 80%, 70%)"></stop>
+				<stop offset="66%" stop-color="hsl(60, 80%, 70%)"></stop>
+				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
+			</linearGradient>
+			<mask id={ memMaskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }>
+				<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>
 	</svg>
 	<style>
@@ -135,10 +157,16 @@
 				clear both
 	</style>
 	<script>
+		import uuid from '../../../common/scripts/uuid';
+
 		this.viewBoxX = 50;
 		this.viewBoxY = 30;
 		this.stats = [];
 		this.connection = this.opts.connection;
+		this.cpuGradientId = uuid();
+		this.cpuMaskId = uuid();
+		this.memGradientId = uuid();
+		this.memMaskId = uuid();
 
 		this.on('mount', () => {
 			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 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 memP = (stats.mem.used / stats.mem.total * 100).toFixed(0);
 
@@ -170,8 +195,6 @@
 				memPolylinePoints,
 				cpuPolygonPoints,
 				memPolygonPoints,
-				cpuColor,
-				memColor,
 				cpuP,
 				memP
 			});