Merge pull request #693 from xxRockOnxx/feat/trading-loading-status

Show CandleChartContainer loading status

src/components/charts/CandleChartContainer.vue

@@ -64,7 +64,13 @@
           :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">
@@ -85,6 +91,7 @@ import {
   PlotConfig,
   PairCandlePayload,
   PairHistoryPayload,
+  LoadingStatus,
 } from '@/types';
 import CandleChart from '@/components/charts/CandleChart.vue';
 import PlotConfigurator from '@/components/charts/PlotConfigurator.vue';
@@ -131,8 +138,12 @@ export default class CandleChartContainer extends Vue {
 
   @ftbot.Action setPlotConfigName;
 
+  @ftbot.Getter [BotStoreGetters.candleDataStatus]!: LoadingStatus;
+
   @ftbot.Getter [BotStoreGetters.candleData]!: PairHistory;
 
+  @ftbot.Getter [BotStoreGetters.historyStatus]!: LoadingStatus;
+
   @ftbot.Getter [BotStoreGetters.history]!: PairHistory;
 
   @ftbot.Getter [BotStoreGetters.selectedPair]!: string;
@@ -160,6 +171,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;
   }
@@ -172,6 +209,10 @@ export default class CandleChartContainer extends Vue {
     }
     this.plotConfigName = getPlotConfigName();
     this.plotConfig = getCustomPlotConfig(this.plotConfigName);
+
+    if (!this.hasDataset) {
+      this.refresh();
+    }
   }
 
   plotConfigChanged() {

src/store/modules/ftbot/index.ts

@@ -36,6 +36,7 @@ import {
   DeleteTradeResponse,
   BlacklistResponse,
   ForceSellPayload,
+  LoadingStatus,
 } from '@/types';
 
 import {
@@ -90,12 +91,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 +313,15 @@ export function createBotSubStore(botId: string, botName: string) {
       [BotStoreGetters.strategyList](state: FtbotStateType): string[] {
         return state.strategyList;
       },
+      [BotStoreGetters.candleDataStatus](state: FtbotStateType): LoadingStatus {
+        return state.candleDataStatus;
+      },
       [BotStoreGetters.candleData](state: FtbotStateType): PairHistory | {} {
         return state.candleData;
       },
+      [BotStoreGetters.historyStatus](state: FtbotStateType): LoadingStatus {
+        return state.historyStatus;
+      },
       // TODO: Type me
       [BotStoreGetters.history](state: FtbotStateType) {
         return state.history;
@@ -406,9 +415,15 @@ export function createBotSubStore(botId: string, botName: string) {
       updatePairs(state: FtbotStateType, pairlist: string[]) {
         state.pairlist = pairlist;
       },
+      setCandleDataStatus(state: FtbotStateType, loading: LoadingStatus) {
+        state.candleDataStatus = loading;
+      },
       updatePairCandles(state: FtbotStateType, { pair, timeframe, data }) {
         state.candleData = { ...state.candleData, [`${pair}__${timeframe}`]: data };
       },
+      setHistoryStatus(state: FtbotStateType, loading: LoadingStatus) {
+        state.historyStatus = loading;
+      },
       updatePairHistory(state: FtbotStateType, { pair, timeframe, data }) {
         // Intentionally drop the previous state here.
         state.history = { [`${pair}__${timeframe}`]: data };
@@ -621,6 +636,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 +647,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 +663,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 +676,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

@@ -15,6 +15,7 @@ import {
   BacktestSteps,
   LogLine,
   SysInfoResponse,
+  LoadingStatus,
 } from '@/types';
 
 export interface FtbotStateType {
@@ -40,8 +41,10 @@ export interface FtbotStateType {
   selectedPair: string;
   // TODO: type me
   candleData: {};
+  candleDataStatus: LoadingStatus;
   // TODO: type me
   history: {};
+  historyStatus: LoadingStatus;
   strategyPlotConfig?: PlotConfig;
   customPlotConfig: PlotConfigStorage;
   plotConfigName: string;
@@ -83,7 +86,9 @@ const state = (): FtbotStateType => {
     detailTradeId: undefined,
     selectedPair: '',
     candleData: {},
+    candleDataStatus: 'loading',
     history: {},
+    historyStatus: 'loading',
     strategyPlotConfig: undefined,
     customPlotConfig: {},
     plotConfigName: getPlotConfigName(),

src/types/types.ts

@@ -237,3 +237,5 @@ export interface DeleteTradeResponse {
 export interface UiVersion {
   version: string;
 }
+
+export type LoadingStatus = 'loading' | 'success' | 'error';