Show profitSymbol in profitpill

src/components/ftbot/ProfitSymbol.vue

@@ -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>

src/components/ftbot/TradeList.vue

@@ -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!: {

src/components/general/ProfitPill.vue

@@ -1,9 +1,12 @@
 <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"
   >
+    <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"
@@ -13,13 +16,16 @@
         >{{ profitString }}</span
       >
     </div>
+  </div>
 </template>
 
 <script lang="ts">
 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>

tests/unit/ProfitSymbol.spec.ts

@@ -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');