Show trading loading status

This commit is contained in:
Lemuel 2022-03-04 02:37:38 +08:00
parent 8d9ff616bb
commit f39d3189b3
3 changed files with 73 additions and 3 deletions

View File

@ -64,7 +64,19 @@
:theme="getChartTheme"
>
</CandleChart>
<label v-else style="margin: auto auto; font-size: 1.5rem">No data available</label>
<div v-else class="m-auto">
<b-spinner
v-if="isLoadingDataset"
label="Spinning"
/>
<div
v-else
style="font-size: 1.5rem"
>
{{ noDatasetText }}
</div>
</div>
</div>
</div>
<transition name="fade" mode="in-out">
@ -131,8 +143,12 @@ export default class CandleChartContainer extends Vue {
@ftbot.Action setPlotConfigName;
@ftbot.Getter [BotStoreGetters.candleDataStatus]!: 'loading' | 'success' | 'error';
@ftbot.Getter [BotStoreGetters.candleData]!: PairHistory;
@ftbot.Getter [BotStoreGetters.historyStatus]!: 'loading' | 'success' | 'error';
@ftbot.Getter [BotStoreGetters.history]!: PairHistory;
@ftbot.Getter [BotStoreGetters.selectedPair]!: string;
@ -160,6 +176,32 @@ export default class CandleChartContainer extends Vue {
return this.dataset ? this.dataset.columns : [];
}
get isLoadingDataset(): boolean {
if (this.historicView) {
return this.historyStatus === 'loading';
}
return this.candleDataStatus === 'loading';
}
get noDatasetText(): string {
const status = this.historicView ? this.historyStatus : this.candleDataStatus;
switch (status) {
case 'loading':
return 'Loading...';
case 'success':
return 'No data available';
case 'error':
return 'Failed to load data';
default:
return 'Unknown';
}
}
get hasDataset(): boolean {
return !!this.dataset;
}

View File

@ -90,12 +90,14 @@ export enum BotStoreGetters {
pairlist = 'pairlist',
balance = 'balance',
detailTradeId = 'detailTradeId',
historyStatus = 'historyStatus',
history = 'history',
lastLogs = 'lastLogs',
performanceStats = 'performanceStats',
dailyStats = 'dailyStats',
strategy = 'strategy',
strategyList = 'strategyList',
candleDataStatus = 'candleDataStatus',
candleData = 'candleData',
backtestRunning = 'backtestRunning',
backtestStep = 'backtestStep',
@ -310,9 +312,15 @@ export function createBotSubStore(botId: string, botName: string) {
[BotStoreGetters.strategyList](state: FtbotStateType): string[] {
return state.strategyList;
},
[BotStoreGetters.candleDataStatus](state: FtbotStateType): 'loading' | 'success' | 'error' {
return state.candleDataStatus;
},
[BotStoreGetters.candleData](state: FtbotStateType): PairHistory | {} {
return state.candleData;
},
[BotStoreGetters.historyStatus](state: FtbotStateType): 'loading' | 'success' | 'error' {
return state.historyStatus;
},
// TODO: Type me
[BotStoreGetters.history](state: FtbotStateType) {
return state.history;
@ -406,9 +414,15 @@ export function createBotSubStore(botId: string, botName: string) {
updatePairs(state: FtbotStateType, pairlist: string[]) {
state.pairlist = pairlist;
},
setCandleDataStatus(state: FtbotStateType, loading: 'loading' | 'success' | 'error') {
state.candleDataStatus = loading;
},
updatePairCandles(state: FtbotStateType, { pair, timeframe, data }) {
state.candleData = { ...state.candleData, [`${pair}__${timeframe}`]: data };
},
setHistoryStatus(state: FtbotStateType, loading: 'loading' | 'success' | 'error') {
state.historyStatus = loading;
},
updatePairHistory(state: FtbotStateType, { pair, timeframe, data }) {
// Intentionally drop the previous state here.
state.history = { [`${pair}__${timeframe}`]: data };
@ -621,6 +635,7 @@ export function createBotSubStore(botId: string, botName: string) {
},
[BotStoreActions.getPairCandles]({ commit }, payload: PairCandlePayload) {
if (payload.pair && payload.timeframe) {
commit('setCandleDataStatus', 'loading');
return api
.get('/pair_candles', {
params: { ...payload },
@ -631,8 +646,12 @@ export function createBotSubStore(botId: string, botName: string) {
timeframe: payload.timeframe,
data: result.data,
});
commit('setCandleDataStatus', 'success');
})
.catch(console.error);
.catch((err) => {
console.error(err);
commit('setCandleDataStatus', 'error');
});
}
// Error branchs
const error = 'pair or timeframe not specified';
@ -643,6 +662,7 @@ export function createBotSubStore(botId: string, botName: string) {
},
[BotStoreActions.getPairHistory]({ commit }, payload: PairHistoryPayload) {
if (payload.pair && payload.timeframe && payload.timerange) {
commit('setHistoryStatus', 'loading');
return api
.get('/pair_history', {
params: { ...payload },
@ -655,8 +675,12 @@ export function createBotSubStore(botId: string, botName: string) {
timerange: payload.timerange,
data: result.data,
});
commit('setHistoryStatus', 'success');
})
.catch(console.error);
.catch((err) => {
console.error(err);
commit('setHistoryStatus', 'error');
});
}
// Error branchs
const error = 'pair or timeframe or timerange not specified';

View File

@ -40,8 +40,10 @@ export interface FtbotStateType {
selectedPair: string;
// TODO: type me
candleData: {};
candleDataStatus: 'loading' | 'success' | 'error';
// TODO: type me
history: {};
historyStatus: 'loading' | 'success' | 'error';
strategyPlotConfig?: PlotConfig;
customPlotConfig: PlotConfigStorage;
plotConfigName: string;
@ -83,7 +85,9 @@ const state = (): FtbotStateType => {
detailTradeId: undefined,
selectedPair: '',
candleData: {},
candleDataStatus: 'loading',
history: {},
historyStatus: 'loading',
strategyPlotConfig: undefined,
customPlotConfig: {},
plotConfigName: getPlotConfigName(),