mirror of
https://codeberg.org/yeentown/barkey
synced 2024-11-23 14:15:12 +00:00
🎨
This commit is contained in:
parent
de3ff70924
commit
82671161e8
2 changed files with 24 additions and 10 deletions
|
@ -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++;
|
||||
});
|
||||
|
|
|
@ -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++;
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue