Merge pull request #88 from danielpalstra/stats_card

Add dashboard cards showing statistics

src/types/daily.ts

@@ -12,4 +12,6 @@ export interface DailyRecord {
 
 export interface DailyReturnValue {
   data: Array<DailyRecord>;
+  fiat_display_currency: string;
+  stake_currency: string;
 }

src/types/index.ts

@@ -2,4 +2,5 @@ export * from './auth';
 export * from './blacklist';
 export * from './chart';
 export * from './daily';
+export * from './profit';
 export * from './types';

src/types/profit.ts

@@ -0,0 +1,25 @@
+export interface ProfitInterface {
+  profit_closed_coin: number;
+  profit_closed_percent_mean: number;
+  profit_closed_ratio_mean: number;
+  profit_closed_percent_sum: number;
+  profit_closed_ratio_sum: number;
+  profit_closed_fiat: number;
+  profit_all_coin: number;
+  profit_all_percent_mean: number;
+  profit_all_ratio_mean: number;
+  profit_all_percent_sum: number;
+  profit_all_ratio_sum: number;
+  profit_all_fiat: number;
+  trade_count: number;
+  closed_trade_count: number;
+  first_trade_date: string;
+  first_trade_timestamp: number;
+  latest_trade_date: string;
+  latest_trade_timestamp: number;
+  avg_duration: string;
+  best_pair: string;
+  best_rate: number;
+  winning_trades: number;
+  losing_trades: number;
+}

src/views/Dashboard.vue

@@ -1,12 +1,53 @@
 <template>
   <div>
+    <div>
+      <b-card-group deck>
+        <b-card header="Open / Total trades">
+          <b-card-text>
+            <span class="text-primary">{{ openTrades.length }}</span> /
+            <span class="text-secondary">{{ profit.trade_count }}</span>
+          </b-card-text>
+        </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>
+          </b-card-text>
+        </b-card>
+        <b-card header="Last trade">
+          <b-card-text>{{ profit.latest_trade_date }}</b-card-text>
+        </b-card>
+      </b-card-group>
+    </div>
+    <div class="mt-3">
+      <b-card-group deck>
+        <b-card header="Best performing">
+          <b-card-text>{{ profit.best_pair }}</b-card-text>
+        </b-card>
+        <b-card header="Total Balance">
+          <b-card-text
+            >{{ formatPrice(balance.total) }} {{ dailyStats.stake_currency }}</b-card-text
+          >
+        </b-card>
+        <b-card v-if="profit.profit_closed_fiat" header="Total profit">
+          <b-card-text
+            >{{ formatPrice(profit.profit_closed_fiat) }}
+            {{ dailyStats.fiat_display_currency }}</b-card-text
+          >
+        </b-card>
+      </b-card-group>
+    </div>
+    <div class="mt-3">
       <DailyChart v-if="dailyStats.data" :daily-stats="dailyStats" />
       <CumProfitChart :trades="closedTrades" />
       <HourlyChart :trades="closedTrades" />
     </div>
+  </div>
 </template>
 
 <script lang="ts">
+import { formatPrice } from '@/shared/formatters';
+
 import { Component, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 
@@ -14,7 +55,7 @@ import DailyChart from '@/components/charts/DailyChart.vue';
 import HourlyChart from '@/components/charts/HourlyChart.vue';
 import CumProfitChart from '@/components/charts/CumProfitChart.vue';
 
-import { Trade, DailyReturnValue } from '@/types';
+import { Trade, DailyReturnValue, BalanceInterface, ProfitInterface } from '@/types';
 
 const ftbot = namespace('ftbot');
 
@@ -30,13 +71,35 @@ export default class Trading extends Vue {
 
   @ftbot.State dailyStats!: DailyReturnValue;
 
+  @ftbot.Getter openTrades!: Array<Trade>;
+
+  @ftbot.State balance!: BalanceInterface;
+
+  @ftbot.State profit!: ProfitInterface;
+
+  @ftbot.State performanceStats!: Array<PerformanceEntry>;
+
+  @ftbot.Action getPerformance;
+
   @ftbot.Action getDaily;
 
   @ftbot.Action getTrades;
 
+  @ftbot.Action getOpenTrades;
+
+  @ftbot.Action getBalance;
+
+  @ftbot.Action getProfit;
+
+  formatPrice = formatPrice;
+
   mounted() {
     this.getDaily();
     this.getTrades();
+    this.getOpenTrades();
+    this.getBalance();
+    this.getPerformance();
+    this.getProfit();
   }
 }
 </script>