-
-
Notifications
You must be signed in to change notification settings - Fork 6.9k
/
misc-heart-rate.vue
116 lines (100 loc) · 2.58 KB
/
misc-heart-rate.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<template>
<v-card
class="mx-auto"
color="surface-light"
max-width="600"
>
<template v-slot:prepend>
<v-icon
:color="checking ? 'red lighten-2' : 'indigo-lighten-2'"
class="me-8"
icon="mdi-heart-pulse"
size="64"
@click="takePulse"
></v-icon>
</template>
<template v-slot:title>
<div class="text-caption text-grey text-uppercase">
Heart rate
</div>
<span
class="text-h3 font-weight-black"
v-text="avg || '—'"
></span>
<strong v-if="avg">BPM</strong>
</template>
<template v-slot:append>
<v-btn
class="align-self-start"
icon="mdi-arrow-right-thick"
size="34"
variant="text"
></v-btn>
</template>
<v-sheet color="transparent">
<v-sparkline
:key="String(avg)"
:gradient="['#f72047', '#ffd200', '#1feaea']"
:line-width="3"
:model-value="heartbeats"
:smooth="16"
stroke-linecap="round"
auto-draw
></v-sparkline>
</v-sheet>
</v-card>
</template>
<script setup>
import { computed, ref } from 'vue'
const exhale = ms => new Promise(resolve => setTimeout(resolve, ms))
const checking = ref(false)
const heartbeats = ref([])
const avg = computed(() => {
const sum = heartbeats.value.reduce((acc, cur) => acc + cur, 0)
const length = heartbeats.value.length
if (!sum && !length) return 0
return Math.ceil(sum / length)
})
function heartbeat () {
return Math.ceil(Math.random() * (120 - 80) + 80)
}
async function takePulse (inhale = true) {
checking.value = true
inhale && await exhale(1000)
heartbeats.value = Array.from({ length: 20 }, heartbeat)
checking.value = false
}
takePulse(false)
</script>
<script>
const exhale = ms =>
new Promise(resolve => setTimeout(resolve, ms))
export default {
data: () => ({
checking: false,
heartbeats: [],
}),
computed: {
avg () {
const sum = this.heartbeats.reduce((acc, cur) => acc + cur, 0)
const length = this.heartbeats.length
if (!sum && !length) return 0
return Math.ceil(sum / length)
},
},
created () {
this.takePulse(false)
},
methods: {
heartbeat () {
return Math.ceil(Math.random() * (120 - 80) + 80)
},
async takePulse (inhale = true) {
this.checking = true
inhale && await exhale(1000)
this.heartbeats = Array.from({ length: 20 }, this.heartbeat)
this.checking = false
},
},
}
</script>