This commit is contained in:
parent
de3ff70924
commit
82671161e8
|
@ -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++;
|
||||||
});
|
});
|
||||||
|
|
|
@ -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++;
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue