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++; });