heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2017-06-08 04:49:42 +09:00
parent de3ff70924
commit 82671161e8
2 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/web/app/common/tags/activity-table.tag
View File

@ -2,7 +2,15 @@
<svg if={ data } ref="canvas" viewBox="0 0 53 7" preserveAspectRatio="none"> <svg if={ data } ref="canvas" viewBox="0 0 53 7" preserveAspectRatio="none">
<rect each={ data } width="1" height="1" <rect each={ data } width="1" height="1"
riot-x={ x } riot-y={ date.weekday } 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> </svg>
<style> <style>
:scope :scope
@ -16,7 +24,6 @@
> rect > rect
transform-origin center transform-origin center
transform scale(0.8)
</style> </style>
<script> <script>
@ -33,9 +40,9 @@
let x = 0; let x = 0;
data.reverse().forEach(d => { data.reverse().forEach(d => {
d.x = x; d.x = x;
let v = d.total / this.peak; d.v = d.total / this.peak;
if (v > 1) v = 1; if (d.v > 1) d.v = 1;
d.color = `hsl(180, ${v * 100}%, ${15 + ((1 - v) * 80)}%)`; 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(); d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
if (d.date.weekday == 6) x++; if (d.date.weekday == 6) x++;
}); });

17
src/web/app/desktop/tags/home-widgets/activity.tag
View File

@ -4,7 +4,15 @@
<svg if={ !initializing } ref="canvas" viewBox="0 0 21 7" preserveAspectRatio="none"> <svg if={ !initializing } ref="canvas" viewBox="0 0 21 7" preserveAspectRatio="none">
<rect each={ data } width="1" height="1" <rect each={ data } width="1" height="1"
riot-x={ x } riot-y={ date.weekday } 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> </svg>
<style> <style>
:scope :scope
@ -40,7 +48,6 @@
> rect > rect
transform-origin center transform-origin center
transform scale(0.8)
</style> </style>
<script> <script>
@ -59,9 +66,9 @@
let x = 0; let x = 0;
data.reverse().forEach(d => { data.reverse().forEach(d => {
d.x = x; d.x = x;
let v = d.total / this.peak; d.v = d.total / this.peak;
if (v > 1) v = 1; if (d.v > 1) d.v = 1;
d.color = `hsl(180, ${v * 100}%, ${15 + ((1 - v) * 80)}%)`; 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(); d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
if (d.date.weekday == 6) x++; if (d.date.weekday == 6) x++;
}); });