From 82671161e8c6f4e861b0b8edf632e1fb27143377 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 8 Jun 2017 04:49:42 +0900
Subject: [PATCH] :art:

---
 src/web/app/common/tags/activity-table.tag      | 17 ++++++++++++-----
 .../app/desktop/tags/home-widgets/activity.tag  | 17 ++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/web/app/common/tags/activity-table.tag b/src/web/app/common/tags/activity-table.tag
index 49c5fe26cd..2ecfc3b110 100644
--- a/src/web/app/common/tags/activity-table.tag
+++ b/src/web/app/common/tags/activity-table.tag
@@ -2,7 +2,15 @@
 	<svg if={ data } ref="canvas" viewBox="0 0 53 7" preserveAspectRatio="none">
 		<rect each={ data } width="1" height="1"
 			riot-x={ x } riot-y={ date.weekday }
-			fill={ color }></rect>
+			rx="1" ry="1"
+			fill={ color }
+			style="transform: scale({ v });"/>
+		<rect class="today" width="1" height="1"
+			riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
+			rx="1" ry="1"
+			fill="none"
+			stroke-width="0.1"
+			stroke="#f73520"/>
 	</svg>
 	<style>
 		:scope
@@ -16,7 +24,6 @@
 
 				> rect
 					transform-origin center
-					transform scale(0.8)
 
 	</style>
 	<script>
@@ -33,9 +40,9 @@
 				let x = 0;
 				data.reverse().forEach(d => {
 					d.x = x;
-					let v = d.total / this.peak;
-					if (v > 1) v = 1;
-					d.color = `hsl(180, ${v * 100}%, ${15 + ((1 - v) * 80)}%)`;
+					d.v = d.total / this.peak;
+					if (d.v > 1) d.v = 1;
+					d.color = `hsl(170, ${d.v * 100}%, ${15 + ((1 - d.v) * 80)}%)`;
 					d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
 					if (d.date.weekday == 6) x++;
 				});
diff --git a/src/web/app/desktop/tags/home-widgets/activity.tag b/src/web/app/desktop/tags/home-widgets/activity.tag
index ba201e1c29..3abfd12c5f 100644
--- a/src/web/app/desktop/tags/home-widgets/activity.tag
+++ b/src/web/app/desktop/tags/home-widgets/activity.tag
@@ -4,7 +4,15 @@
 	<svg if={ !initializing } ref="canvas" viewBox="0 0 21 7" preserveAspectRatio="none">
 		<rect each={ data } width="1" height="1"
 			riot-x={ x } riot-y={ date.weekday }
-			fill={ color }></rect>
+			rx="1" ry="1"
+			fill={ color }
+			style="transform: scale({ v });"/>
+		<rect class="today" width="1" height="1"
+			riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
+			rx="1" ry="1"
+			fill="none"
+			stroke-width="0.1"
+			stroke="#f73520"/>
 	</svg>
 	<style>
 		:scope
@@ -40,7 +48,6 @@
 
 				> rect
 					transform-origin center
-					transform scale(0.8)
 
 	</style>
 	<script>
@@ -59,9 +66,9 @@
 				let x = 0;
 				data.reverse().forEach(d => {
 					d.x = x;
-					let v = d.total / this.peak;
-					if (v > 1) v = 1;
-					d.color = `hsl(180, ${v * 100}%, ${15 + ((1 - v) * 80)}%)`;
+					d.v = d.total / this.peak;
+					if (d.v > 1) d.v = 1;
+					d.color = `hsl(170, ${d.v * 100}%, ${15 + ((1 - d.v) * 80)}%)`;
 					d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
 					if (d.date.weekday == 6) x++;
 				});