lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-23 11:35:14 +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 }}
<span v-if="comb.locks" :title="comb.lockReason"> &#128274; </span>
</div>
<TradeProfit :trade="comb.trade" />
<TradeProfit v-if="comb.trade" :trade="comb.trade" />
</b-list-group-item>
</b-list-group>
</template>

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

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