Show profitSymbol in profitpill

This commit is contained in:
Matthias 2021-10-24 15:11:55 +02:00
parent 05686cd9f5
commit e3c3e93720
4 changed files with 31 additions and 38 deletions

View File

@ -5,34 +5,31 @@
</template>
<script lang="ts">
// TODO: evaluate if this is still used
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Trade } from '@/types';
@Component({})
export default class ProfitSymbol extends Vue {
@Prop({ required: true }) trade!: Trade;
@Prop({ required: true, type: Number }) profit!: number;
get isProfitable() {
const res = (this.trade.profit_ratio ?? 0) > 0 || (this.trade.profit_abs ?? 0) > 0;
return res;
return this.profit > 0;
}
}
</script>
<style scoped>
<style scoped lang="scss">
.triangle-up {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0.45rem 0.7rem 0.45rem;
border-color: transparent transparent #00db58 transparent;
border-color: transparent transparent $color-profit transparent;
}
.triangle-down {
width: 0;
height: 0;
border-style: solid;
border-width: 0.7rem 0.45rem 0 0.45rem;
border-color: #ff0000 transparent transparent transparent;
border-color: $color-loss transparent transparent transparent;
}
</style>

View File

@ -82,13 +82,12 @@ import DeleteIcon from 'vue-material-design-icons/Delete.vue';
import ForceSellIcon from 'vue-material-design-icons/CloseBoxMultiple.vue';
import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
import { BotStoreGetters } from '@/store/modules/ftbot';
import ProfitSymbol from './ProfitSymbol.vue';
import TradeProfit from './TradeProfit.vue';
const ftbot = namespace('ftbot');
@Component({
components: { ProfitSymbol, DeleteIcon, ForceSellIcon, DateTimeTZ, TradeProfit },
components: { DeleteIcon, ForceSellIcon, DateTimeTZ, TradeProfit },
})
export default class TradeList extends Vue {
$refs!: {

View File

@ -1,17 +1,21 @@
<template>
<div
class="d-flex justify-content-center align-items-center profit-pill px-2"
class="d-flex justify-content-between align-items-center profit-pill pl-2 pr-1"
:class="isProfitable ? 'profit-pill-profit' : ''"
:title="profitDesc"
>
{{ profitRatio !== undefined ? formatPercent(profitRatio, 2) : '' }}
<span
v-if="profitString"
class="ml-1"
:class="profitRatio ? 'small' : ''"
:title="stakeCurrency"
>{{ profitString }}</span
>
<profit-symbol :profit="profitRatio || profitAbs" />
<div class="d-flex justify-content-center align-items-center flex-grow-1">
{{ profitRatio !== undefined ? formatPercent(profitRatio, 2) : '' }}
<span
v-if="profitString"
class="ml-1"
:class="profitRatio ? 'small' : ''"
:title="stakeCurrency"
>{{ profitString }}</span
>
</div>
</div>
</template>
@ -19,7 +23,9 @@
import { formatPercent, formatPrice, timestampms } from '@/shared/formatters';
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
import ProfitSymbol from '@/components/ftbot/ProfitSymbol.vue';
@Component({ components: { ProfitSymbol } })
export default class ProfitPill extends Vue {
@Prop({ required: false, default: undefined, type: Number }) profitRatio?: number;
@ -57,7 +63,6 @@ export default class ProfitPill extends Vue {
border-radius: 6px;
}
.profit-pill-profit {
background: $color-profit;
border: 2px solid $color-profit;
}
</style>

View File

@ -7,40 +7,32 @@ describe('ProfitSymbol.vue', () => {
let cmp;
beforeEach(() => {
cmp = mount(ProfitSymbol, { propsData: { trade: {} } });
cmp = mount(ProfitSymbol, { propsData: { profit: 0 } });
});
it('calculates isProfitable with negative profit', async () => {
const trade = {
profit_ratio: -0.5,
};
cmp.setProps({ trade });
const profit = -0.5;
cmp.setProps({ profit });
await Vue.nextTick();
expect(cmp.vm.isProfitable).toBe(false);
});
it('calculates isProfitable with positive profit', async () => {
const trade = {
profit_ratio: 0.5,
};
cmp.setProps({ trade });
const profit = 0.5;
cmp.setProps({ profit });
await Vue.nextTick();
expect(cmp.vm.isProfitable).toBe(true);
});
it('renders triangle down when profit is negative', async () => {
const trade = {
profit_ratio: -0.5,
};
cmp.setProps({ trade });
const profit = -0.5;
cmp.setProps({ profit });
await Vue.nextTick();
expect(cmp.html()).toContain('triangle-down');
expect(cmp.html()).not.toContain('triangle-up');
});
it('renders triangle up when profit is positive', async () => {
const trade = {
profit_ratio: 0.5,
};
cmp.setProps({ trade });
const profit = 0.5;
cmp.setProps({ profit });
await Vue.nextTick();
expect(cmp.html()).toContain('triangle-up');
expect(cmp.html()).not.toContain('triangle-down');