From ccb9ed3489512c028c7c5cae7387a49441f6a666 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Jun 2018 11:29:50 +0900
Subject: [PATCH] :art:

---
 .../common/views/widgets/posts-monitor.vue    | 39 ++++++++++++++-----
 .../views/widgets/server.cpu-memory.vue       | 37 ++++++++++++++----
 2 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue
index 1f07342fe..801307be5 100644
--- a/src/client/app/common/views/widgets/posts-monitor.vue
+++ b/src/client/app/common/views/widgets/posts-monitor.vue
@@ -5,7 +5,7 @@
 		<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
 
 		<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }" :data-darkmode="$store.state.device.darkmode">
-			<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" preserveAspectRatio="none" v-show="props.view != 2">
+			<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">
 				<defs>
 					<linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0">
 						<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
@@ -21,15 +21,20 @@
 							fill="none"
 							stroke="#fff"
 							stroke-width="1"/>
+						<circle
+							:cx="localHeadX"
+							:cy="localHeadY"
+							r="1.5"
+							fill="#fff"/>
 					</mask>
 				</defs>
 				<rect
-					x="-1" y="-1"
-					:width="viewBoxX + 2" :height="viewBoxY + 2"
+					x="-2" y="-2"
+					:width="viewBoxX + 4" :height="viewBoxY + 4"
 					:style="`stroke: none; fill: url(#${ localGradientId }); mask: url(#${ localMaskId })`"/>
 				<text x="1" y="5">Local</text>
 			</svg>
-			<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" preserveAspectRatio="none" v-show="props.view != 1">
+			<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 1">
 				<defs>
 					<linearGradient :id="fediGradientId" x1="0" x2="0" y1="1" y2="0">
 						<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
@@ -45,11 +50,16 @@
 							fill="none"
 							stroke="#fff"
 							stroke-width="1"/>
+						<circle
+							:cx="fediHeadX"
+							:cy="fediHeadY"
+							r="1.5"
+							fill="#fff"/>
 					</mask>
 				</defs>
 				<rect
-					x="-1" y="-1"
-					:width="viewBoxX + 2" :height="viewBoxY + 2"
+					x="-2" y="-2"
+					:width="viewBoxX + 4" :height="viewBoxY + 4"
 					:style="`stroke: none; fill: url(#${ fediGradientId }); mask: url(#${ fediMaskId })`"/>
 				<text x="1" y="5">Fedi</text>
 			</svg>
@@ -82,7 +92,11 @@ export default define({
 			fediPolylinePoints: '',
 			localPolylinePoints: '',
 			fediPolygonPoints: '',
-			localPolygonPoints: ''
+			localPolygonPoints: '',
+			fediHeadX: null,
+			fediHeadY: null,
+			localHeadX: null,
+			localHeadY: null
 		};
 	},
 	computed: {
@@ -133,11 +147,18 @@ export default define({
 			const fediPeak = Math.max.apply(null, stats.map(x => x.all)) || 1;
 			const localPeak = Math.max.apply(null, stats.map(x => x.local)) || 1;
 
-			this.fediPolylinePoints = stats.map((s, i) => `${this.viewBoxX - ((stats.length - 1) - i)},${(1 - (s.all / fediPeak)) * this.viewBoxY}`).join(' ');
-			this.localPolylinePoints = stats.map((s, i) => `${this.viewBoxX - ((stats.length - 1) - i)},${(1 - (s.local / localPeak)) * this.viewBoxY}`).join(' ');
+			const fediPolylinePoints = stats.map((s, i) => [this.viewBoxX - ((stats.length - 1) - i), (1 - (s.all / fediPeak)) * this.viewBoxY]);
+			const localPolylinePoints = stats.map((s, i) => [this.viewBoxX - ((stats.length - 1) - i), (1 - (s.local / localPeak)) * this.viewBoxY]);
+			this.fediPolylinePoints = fediPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+			this.localPolylinePoints = localPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
 
 			this.fediPolygonPoints = `${this.viewBoxX - (stats.length - 1)},${ this.viewBoxY } ${ this.fediPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
 			this.localPolygonPoints = `${this.viewBoxX - (stats.length - 1)},${ this.viewBoxY } ${ this.localPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+
+			this.fediHeadX = fediPolylinePoints[fediPolylinePoints.length - 1][0];
+			this.fediHeadY = fediPolylinePoints[fediPolylinePoints.length - 1][1];
+			this.localHeadX = localPolylinePoints[localPolylinePoints.length - 1][0];
+			this.localHeadY = localPolylinePoints[localPolylinePoints.length - 1][1];
 		},
 		onStats(stats) {
 			this.stats.push(stats);
diff --git a/src/client/app/common/views/widgets/server.cpu-memory.vue b/src/client/app/common/views/widgets/server.cpu-memory.vue
index 6bf998c24..da6b9f799 100644
--- a/src/client/app/common/views/widgets/server.cpu-memory.vue
+++ b/src/client/app/common/views/widgets/server.cpu-memory.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="cpu-memory">
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" preserveAspectRatio="none">
+	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
 		<defs>
 			<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
 				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
@@ -16,15 +16,20 @@
 					fill="none"
 					stroke="#fff"
 					stroke-width="1"/>
+				<circle
+					:cx="cpuHeadX"
+					:cy="cpuHeadY"
+					r="1.5"
+					fill="#fff"/>
 			</mask>
 		</defs>
 		<rect
-			x="-1" y="-1"
-			:width="viewBoxX + 2" :height="viewBoxY + 2"
+			x="-2" y="-2"
+			:width="viewBoxX + 4" :height="viewBoxY + 4"
 			:style="`stroke: none; fill: url(#${ cpuGradientId }); mask: url(#${ cpuMaskId })`"/>
 		<text x="1" y="5">CPU <tspan>{{ cpuP }}%</tspan></text>
 	</svg>
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" preserveAspectRatio="none">
+	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
 		<defs>
 			<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
 				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
@@ -40,11 +45,16 @@
 					fill="none"
 					stroke="#fff"
 					stroke-width="1"/>
+				<circle
+					:cx="memHeadX"
+					:cy="memHeadY"
+					r="1.5"
+					fill="#fff"/>
 			</mask>
 		</defs>
 		<rect
-			x="-1" y="-1"
-			:width="viewBoxX + 2" :height="viewBoxY + 2"
+			x="-2" y="-2"
+			:width="viewBoxX + 4" :height="viewBoxY + 4"
 			:style="`stroke: none; fill: url(#${ memGradientId }); mask: url(#${ memMaskId })`"/>
 		<text x="1" y="5">MEM <tspan>{{ memP }}%</tspan></text>
 	</svg>
@@ -70,6 +80,10 @@ export default Vue.extend({
 			memPolylinePoints: '',
 			cpuPolygonPoints: '',
 			memPolygonPoints: '',
+			cpuHeadX: null,
+			cpuHeadY: null,
+			memHeadX: null,
+			memHeadY: null,
 			cpuP: '',
 			memP: ''
 		};
@@ -92,12 +106,19 @@ export default Vue.extend({
 			this.stats.push(stats);
 			if (this.stats.length > 50) this.stats.shift();
 
-			this.cpuPolylinePoints = this.stats.map((s, i) => `${this.viewBoxX - ((this.stats.length - 1) - i)},${(1 - s.cpu_usage) * this.viewBoxY}`).join(' ');
-			this.memPolylinePoints = this.stats.map((s, i) => `${this.viewBoxX - ((this.stats.length - 1) - i)},${(1 - (s.mem.used / s.mem.total)) * this.viewBoxY}`).join(' ');
+			const cpuPolylinePoints = this.stats.map((s, i) => [this.viewBoxX - ((this.stats.length - 1) - i), (1 - s.cpu_usage) * this.viewBoxY]);
+			const memPolylinePoints = this.stats.map((s, i) => [this.viewBoxX - ((this.stats.length - 1) - i), (1 - (s.mem.used / s.mem.total)) * this.viewBoxY]);
+			this.cpuPolylinePoints = cpuPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+			this.memPolylinePoints = memPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
 
 			this.cpuPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ this.cpuPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
 			this.memPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${ this.viewBoxY } ${ this.memPolylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
 
+			this.cpuHeadX = cpuPolylinePoints[cpuPolylinePoints.length - 1][0];
+			this.cpuHeadY = cpuPolylinePoints[cpuPolylinePoints.length - 1][1];
+			this.memHeadX = memPolylinePoints[memPolylinePoints.length - 1][0];
+			this.memHeadY = memPolylinePoints[memPolylinePoints.length - 1][1];
+
 			this.cpuP = (stats.cpu_usage * 100).toFixed(0);
 			this.memP = (stats.mem.used / stats.mem.total * 100).toFixed(0);
 		},