Optional relative ratio for profitpill

This commit is contained in:
Matthias 2021-09-04 11:10:13 +02:00
parent 1cd14b0ec9
commit 8d8faf89b7

View File

@ -1,12 +1,14 @@
<template> <template>
<div <div
class="profit-pill px-2" class="profit-pill px-2"
:class="profitRatio > 0 ? 'profit-pill-profit' : ''" :class="isProfitable ? 'profit-pill-profit' : ''"
:title="profitDesc" :title="profitDesc"
> >
{{ formatPercent(profitRatio, 2) }} {{ formatPercent(profitRatio, 2) }}
<small :title="stakeCurrency"> <small :title="stakeCurrency">
{{ `(${formatPrice(profitAbs, 3)} ${stakeCurrency})` }} {{ profitRatio ? '(' : '' }}
{{ `${formatPrice(profitAbs, 3)} ${stakeCurrency}` }}
{{ profitRatio ? ')' : '' }}
</small> </small>
</div> </div>
</template> </template>
@ -17,19 +19,26 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({}) @Component({})
export default class ProfitPill extends Vue { export default class ProfitPill extends Vue {
@Prop({ required: true, type: Number }) profitRatio!: number; @Prop({ required: false, default: undefined, type: Number }) profitRatio?: number;
@Prop({ required: true, type: Number }) profitAbs!: number; @Prop({ required: true, type: Number }) profitAbs!: number;
@Prop({ required: true, type: String }) stakeCurrency!: string; @Prop({ required: true, type: String }) stakeCurrency!: string;
@Prop({ required: true, type: String }) profitDesc!: string; @Prop({ required: false, default: '', type: String }) profitDesc!: string;
formatPercent = formatPercent; formatPercent = formatPercent;
timestampms = timestampms; timestampms = timestampms;
formatPrice = formatPrice; formatPrice = formatPrice;
get isProfitable() {
return (
(this.profitRatio !== undefined && this.profitRatio > 0) ||
(this.profitRatio === undefined && this.profitAbs > 0)
);
}
} }
</script> </script>