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
|
<template>
<div class="five-stars-histogram" :class="{ vertical: vertical }">
<div class="five-stars-histogram-average">
<p class="fraction">
<span class="average">{{ average.toFixed(1) }}</span
>/5
</p>
<studip-five-stars :amount="average" />
<p class="total">
{{ $ngettext(
'%{n} Bewertung',
'%{n} Bewertungen',
entries.length,
{ n: entries.length }
) }}
</p>
</div>
<div class="five-stars-histogram-chart" v-if="ratings">
<div v-for="i in [5, 4, 3, 2, 1]" :key="'chart-' + i">
<span>{{ i }} <studip-icon shape="star" role="info" /></span>
<div class="percentage">
<div class="percentage-bar" :style="{ width: getRatePercentage(ratings[i]) }">
{{ getRatePercentage(ratings[i]) }}
</div>
</div>
<span>{{ ratings[i] ?? 0 }}</span>
</div>
</div>
</div>
</template>
<script>
import StudipFiveStars from './StudipFiveStars.vue';
export default {
name: 'feedback-five-stars-histogram',
components: {
StudipFiveStars,
},
props: {
entries: Array,
vertical: {
type: Boolean,
default: false,
},
},
data() {
return {
ratings: null,
};
},
computed: {
average() {
if (this.entries.length === 0) {
return 0;
}
let sum = this.entries.reduce((acc, entry) => acc + parseInt(entry.attributes.rating), 0);
return sum / this.entries.length;
},
},
methods: {
getCountOfRatings() {
this.ratings = [];
this.entries.forEach((entry) => {
const rating = entry.attributes.rating;
if (this.ratings[rating]) {
this.ratings[rating] += 1;
} else {
this.ratings[rating] = 1;
}
});
},
getRatePercentage(rate) {
if (rate === undefined) {
return '0%';
}
return parseInt((rate / this.entries.length) * 100, 10) + '%';
},
},
mounted() {
this.getCountOfRatings();
},
watch: {
entries: {
handler() {
this.getCountOfRatings();
},
deep: true,
},
},
};
</script>
|
