Create global "profit/loss" colors

This commit is contained in:
Matthias 2021-09-04 11:20:55 +02:00
parent be4a15c6fa
commit 1df87176bc
5 changed files with 23 additions and 8 deletions

View File

@ -25,6 +25,12 @@
:stake-currency="row.item.stakeCurrency"
/>
</template>
<template #cell(winVsLoss)="row">
<div v-if="row.item.losses !== undefined">
<span class="text-profit">{{ row.item.wins }}</span> /
<span class="text-loss">{{ row.item.losses }}</span>
</div>
</template>
</b-table>
</template>
@ -58,20 +64,20 @@ export default class BotComparisonList extends Vue {
stakeCurrency: 'USDT',
wins: 0,
losses: 0,
winVsLoss: '',
};
Object.entries(this.allProfit).forEach(([k, v]) => {
// TODO: handle one inactive bot ...
val.push({
botId: this.allAvailableBots[k].botName,
trades: `${this.allOpenTradeCount[k]} / ${this.allBotState[k]?.max_open_trades}`,
trades: `${this.allOpenTradeCount[k]} / ${this.allBotState[k]?.max_open_trades || 'N/A'}`,
profitClosed: v.profit_closed_coin,
profitClosedRatio: v.profit_closed_ratio_sum || 0,
stakeCurrency: this.allBotState[k]?.stake_currency || '',
profitOpenRatio: v.profit_all_ratio_sum - v.profit_closed_ratio_sum,
profitOpen: v.profit_all_coin - v.profit_closed_coin,
winVsLoss: `${v.winning_trades || 'N/A'} / ${v.losing_trades || 'N/A'}`,
wins: v.winning_trades,
losses: v.losing_trades,
});
if (v.profit_closed_coin !== undefined) {
summary.profitClosed += v.profit_closed_coin;
@ -81,7 +87,6 @@ export default class BotComparisonList extends Vue {
// summary.decimals = this.allBotState[k]?.stake_currency_decimals || summary.decimals;
}
});
summary.winVsLoss = `${summary.wins} / ${summary.losses}`;
val.push(summary);
return val;
}

View File

@ -44,10 +44,10 @@ export default class ProfitPill extends Vue {
<style scoped lang="scss">
.profit-pill {
background: #ef5350;
background: $color-loss;
border-radius: 6px;
}
.profit-pill-profit {
background: #12bb7b;
background: $color-profit;
}
</style>

View File

@ -4,6 +4,13 @@
background-color: #000000;
}
.text-profit {
color: $color-profit;
}
.text-loss {
color: $color-loss;
}
[data-theme="dark"] {
$bg-dark: #3c3c3c;
$bg-darker: darken($bg-dark, 5%);

View File

@ -1,2 +1,5 @@
// variables created for the project and not overwrite of bootstrap
$fontsize-small: 0.9rem;
$color-profit: #12bb7b;
$color-loss: #ef5350;

View File

@ -33,8 +33,8 @@
</b-card>
<b-card header="Won / lost trades">
<b-card-text>
<span class="text-success">{{ profit.winning_trades }}</span> /
<span class="text-danger">{{ profit.losing_trades }}</span>
<span class="text-profit">{{ profit.winning_trades }}</span> /
<span class="text-loss">{{ profit.losing_trades }}</span>
</b-card-text>
</b-card>
<b-card header="Last trade">