feat: Display trends in report metrics (#4144)

This commit is contained in:
Aswin Dev P.S 2022-03-14 18:15:27 +05:30 committed by GitHub
parent 5edf0f2bbe
commit c62d74a01d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 235 additions and 29 deletions

View file

@ -7,9 +7,12 @@
<h3 class="heading">
{{ heading }}
</h3>
<h4 class="metric">
{{ point }}
</h4>
<div class="metric-wrap">
<h4 class="metric">
{{ point }}
</h4>
<span v-if="trend !== 0" :class="trendClass">{{ trendValue }}</span>
</div>
<p class="desc">
{{ desc }}
</p>
@ -20,10 +23,27 @@ export default {
props: {
heading: { type: String, default: '' },
point: { type: [Number, String], default: '' },
trend: { type: Number, default: null },
index: { type: Number, default: null },
desc: { type: String, default: '' },
selected: Boolean,
onClick: { type: Function, default: () => {} },
},
computed: {
trendClass() {
if (this.trend > 0) {
return 'metric-trend metric-up';
}
return 'metric-trend metric-down';
},
trendValue() {
if (this.trend > 0) {
return `+${this.trend}%`;
}
return `${this.trend}%`;
},
},
};
</script>