Show trading loading status

src/components/charts/CandleChartContainer.vue

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

src/store/modules/ftbot/index.ts

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

src/store/modules/ftbot/state.ts

@@ -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(),