lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-11 02:33:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #88 from danielpalstra/stats_card

Browse Source 
Add dashboard cards showing statistics
This commit is contained in:
Matthias 2020-09-03 06:45:05 +02:00 committed by GitHub
commit 87ae547cef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 95 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/types/daily.ts
View File

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

1
src/types/index.ts
View File

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

25
src/types/profit.ts Normal file
View File

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

71
src/views/Dashboard.vue
View File

@ -1,12 +1,53 @@
<template>
<div>
<DailyChart v-if="dailyStats.data" :daily-stats="dailyStats" />
<CumProfitChart :trades="closedTrades" />
<HourlyChart :trades="closedTrades" />
<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>