lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-10 18:23:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add profit pill

Browse Source
This commit is contained in:
Matthias 2021-09-04 10:46:53 +02:00
parent 8465208bbf
commit 1cd14b0ec9
3 changed files with 55 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ftbot/PairSummary.vue
View File

@ -14,7 +14,7 @@
{{ comb.pair }} {{ comb.pair }}
<span v-if="comb.locks" :title="comb.lockReason"> &#128274; </span> <span v-if="comb.locks" :title="comb.lockReason"> &#128274; </span>
</div> </div>
<TradeProfit :trade="comb.trade" /> <TradeProfit v-if="comb.trade" :trade="comb.trade" />
</b-list-group-item> </b-list-group-item>
</b-list-group> </b-list-group>
</template> </template>

33
src/components/ftbot/TradeProfit.vue
View File

@ -1,22 +1,19 @@
<template> <template>
<div <profit-pill
class="profit-pill px-2" :profit-ratio="trade.profit_ratio"
:class="trade.profit_ratio > 0 ? 'profit-pill-profit' : ''" :profit-abs="trade.profit_abs"
:title="profitDesc" :profit-desc="profitDesc"
> stake-currency="USDT"
{{ formatPercent(trade.profit_ratio, 2) }} />
<small :title="trade.stake_currency || stakeCurrency">
{{ `(${formatPrice(trade.profit_abs, 3)})` }}
</small>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { formatPercent, formatPrice, timestampms } from '@/shared/formatters'; import { formatPercent, timestampms } from '@/shared/formatters';
import { Trade } from '@/types'; import { Trade } from '@/types';
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import ProfitPill from '@/components/general/ProfitPill.vue';
@Component({}) @Component({ components: { ProfitPill } })
export default class TradeProfit extends Vue { export default class TradeProfit extends Vue {
@Prop({ required: true, type: Object }) trade!: Trade; @Prop({ required: true, type: Object }) trade!: Trade;
@ -24,8 +21,6 @@ export default class TradeProfit extends Vue {
timestampms = timestampms; timestampms = timestampms;
formatPrice = formatPrice;
get profitDesc(): string { get profitDesc(): string {
let profit = `Current profit: ${formatPercent(this.trade.profit_ratio)} (${ let profit = `Current profit: ${formatPercent(this.trade.profit_ratio)} (${
this.trade.profit_abs this.trade.profit_abs
@ -36,12 +31,4 @@ export default class TradeProfit extends Vue {
} }
</script> </script>
<style scoped lang="scss"> <style scoped></style>
.profit-pill {
background: #ef5350;
border-radius: 6px;
}
.profit-pill-profit {
background: #26a69a;
}
</style>

44
src/components/general/ProfitPill.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div
class="profit-pill px-2"
:class="profitRatio > 0 ? 'profit-pill-profit' : ''"
:title="profitDesc"
>
{{ formatPercent(profitRatio, 2) }}
<small :title="stakeCurrency">
{{ `(${formatPrice(profitAbs, 3)} ${stakeCurrency})` }}
</small>
</div>
</template>
<script lang="ts">
import { formatPercent, formatPrice, timestampms } from '@/shared/formatters';
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class ProfitPill extends Vue {
@Prop({ required: true, type: Number }) profitRatio!: number;
@Prop({ required: true, type: Number }) profitAbs!: number;
@Prop({ required: true, type: String }) stakeCurrency!: string;
@Prop({ required: true, type: String }) profitDesc!: string;
formatPercent = formatPercent;
timestampms = timestampms;
formatPrice = formatPrice;
}
</script>
<style scoped lang="scss">
.profit-pill {
background: #ef5350;
border-radius: 6px;
}
.profit-pill-profit {
background: #12bb7b;
}
</style>