From c3e375e8a54ccfd164a95ef642ec43eeac77c727 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 11 Jun 2018 12:52:47 +0900
Subject: [PATCH] :v:

---
 .../common/views/widgets/hashtags.chart.vue    | 18 +++++++++++-------
 .../app/common/views/widgets/hashtags.vue      |  6 +++---
 src/server/api/endpoints/hashtags/trend.ts     |  2 +-
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/client/app/common/views/widgets/hashtags.chart.vue b/src/client/app/common/views/widgets/hashtags.chart.vue
index 19b56ef283..b435188616 100644
--- a/src/client/app/common/views/widgets/hashtags.chart.vue
+++ b/src/client/app/common/views/widgets/hashtags.chart.vue
@@ -1,5 +1,5 @@
 <template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
 	<defs>
 		<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
 			<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
@@ -14,17 +14,17 @@
 				:points="polylinePoints"
 				fill="none"
 				stroke="#fff"
-				stroke-width="0.7"/>
+				stroke-width="2"/>
 			<circle
 				:cx="headX"
 				:cy="headY"
-				r="1.2"
+				r="3"
 				fill="#fff"/>
 		</mask>
 	</defs>
 	<rect
-		x="-2" y="-2"
-		:width="viewBoxX + 4" :height="viewBoxY + 4"
+		x="-10" y="-10"
+		:width="viewBoxX + 20" :height="viewBoxY + 20"
 		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"/>
 </svg>
 </template>
@@ -65,10 +65,14 @@ export default Vue.extend({
 			const stats = this.src.slice().reverse();
 			const peak = Math.max.apply(null, stats) || 1;
 
-			const polylinePoints = stats.map((x, i) => [this.viewBoxX - ((stats.length - 1) - i), (1 - (x / peak)) * this.viewBoxY]);
+			const polylinePoints = stats.map((n, i) => [
+				i * (this.viewBoxX / (stats.length - 1)),
+				(1 - (n / peak)) * this.viewBoxY
+			]);
+
 			this.polylinePoints = polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
 
-			this.polygonPoints = `${this.viewBoxX - (stats.length - 1)},${ this.viewBoxY } ${ this.polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+			this.polygonPoints = `0,${ this.viewBoxY } ${ this.polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
 
 			this.headX = polylinePoints[polylinePoints.length - 1][0];
 			this.headY = polylinePoints[polylinePoints.length - 1][1];
diff --git a/src/client/app/common/views/widgets/hashtags.vue b/src/client/app/common/views/widgets/hashtags.vue
index c4647ee0f9..9d523f321f 100644
--- a/src/client/app/common/views/widgets/hashtags.vue
+++ b/src/client/app/common/views/widgets/hashtags.vue
@@ -79,16 +79,16 @@ root(isDark)
 				padding 16px
 
 				&:not(:last-child)
-					border-bottom solid 1px #393f4f
+					border-bottom solid 1px isDark ? #393f4f : #eee
 
 				> .tag
 					flex 1
 
 					> a
-						color #9baec8
+						font-size 14px
+						color isDark ? #9baec8 : #65727b
 
 				> .chart
-					width 50px
 					height 30px
 
 .mkw-hashtags[data-darkmode]
diff --git a/src/server/api/endpoints/hashtags/trend.ts b/src/server/api/endpoints/hashtags/trend.ts
index c888a6cbb5..443d7d2034 100644
--- a/src/server/api/endpoints/hashtags/trend.ts
+++ b/src/server/api/endpoints/hashtags/trend.ts
@@ -52,7 +52,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	const hots = data[0].tags
 		.sort((a, b) => b.count - a.count)
 		.map(tag => tag.tag)
-		.slice(0, 10);
+		.slice(0, 5);
 
 	const countPromises: Array<Promise<number[]>> = [];