Fix daily chart not loading properly

src/components/charts/DailyChart.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, computed, ComputedRef } from '@vue/composition-api';
+import { defineComponent, computed, ComputedRef } from '@vue/composition-api';
 import ECharts from 'vue-echarts';
 // import { EChartsOption } from 'echarts';
 
@@ -26,6 +26,7 @@ import {
 
 import { DailyReturnValue } from '@/types';
 import { useSettingsStore } from '@/stores/settings';
+import { EChartsOption } from 'echarts';
 
 use([
   BarChart,
@@ -60,102 +61,101 @@ export default defineComponent({
 
   setup(props) {
     const settingsStore = useSettingsStore();
-    const absoluteMin: ComputedRef<number> = computed(() =>
+    const absoluteMin = computed(() =>
       props.dailyStats.data.reduce(
         (min, p) => (p.abs_profit < min ? p.abs_profit : min),
         props.dailyStats.data[0]?.abs_profit,
       ),
     );
-
-    const absoluteMax: ComputedRef<number> = computed(() =>
+    const absoluteMax = computed(() =>
       props.dailyStats.data.reduce(
         (max, p) => (p.abs_profit > max ? p.abs_profit : max),
         props.dailyStats.data[0]?.abs_profit,
       ),
     );
-    // : Ref<EChartsOption>
-    const dailyChartOptions = ref({
-      title: {
-        text: 'Daily profit',
-        show: props.showTitle,
-      },
-      backgroundColor: 'rgba(0, 0, 0, 0)',
-      dataset: {
-        dimensions: ['date', 'abs_profit', 'trade_count'],
-        source: props.dailyStats.data,
-      },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'line',
-          label: {
-            backgroundColor: '#6a7985',
+    const dailyChartOptions: ComputedRef<EChartsOption> = computed(() => {
+      return {
+        title: {
+          text: 'Daily profit',
+          show: props.showTitle,
+        },
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        dataset: {
+          dimensions: ['date', 'abs_profit', 'trade_count'],
+          source: props.dailyStats.data,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            label: {
+              backgroundColor: '#6a7985',
+            },
           },
         },
-      },
-      legend: {
-        data: [CHART_ABS_PROFIT, CHART_TRADE_COUNT],
-        right: '5%',
-      },
-      xAxis: [
-        {
-          type: 'category',
-          inverse: true,
+        legend: {
+          data: [CHART_ABS_PROFIT, CHART_TRADE_COUNT],
+          right: '5%',
         },
-      ],
-      visualMap: [
-        {
-          dimension: 1,
-          seriesIndex: 0,
-          show: false,
-          pieces: [
-            {
-              max: 0.0,
-              min: absoluteMin.value,
-              color: 'red',
-            },
-            {
-              min: 0.0,
-              max: absoluteMax.value,
-              color: 'green',
-            },
-          ],
-        },
-      ],
-      yAxis: [
-        {
-          type: 'value',
-          name: CHART_ABS_PROFIT,
-          splitLine: {
+        xAxis: [
+          {
+            type: 'category',
+          },
+        ],
+        visualMap: [
+          {
+            dimension: 1,
+            seriesIndex: 0,
             show: false,
+            pieces: [
+              {
+                max: 0.0,
+                min: absoluteMin.value,
+                color: 'red',
+              },
+              {
+                min: 0.0,
+                max: absoluteMax.value,
+                color: 'green',
+              },
+            ],
           },
-          nameRotate: 90,
-          nameLocation: 'middle',
-          nameGap: 40,
-        },
-        {
-          type: 'value',
-          name: CHART_TRADE_COUNT,
-          nameRotate: 90,
-          nameLocation: 'middle',
-          nameGap: 30,
-        },
-      ],
-      series: [
-        {
-          type: 'line',
-          name: CHART_ABS_PROFIT,
-          // Color is induced by visualMap
-        },
-        {
-          type: 'bar',
-          name: CHART_TRADE_COUNT,
-          itemStyle: {
-            color: 'rgba(150,150,150,0.3)',
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: CHART_ABS_PROFIT,
+            splitLine: {
+              show: false,
+            },
+            nameRotate: 90,
+            nameLocation: 'middle',
+            nameGap: 40,
           },
-          yAxisIndex: 1,
-        },
-      ],
+          {
+            type: 'value',
+            name: CHART_TRADE_COUNT,
+            nameRotate: 90,
+            nameLocation: 'middle',
+            nameGap: 30,
+          },
+        ],
+        series: [
+          {
+            type: 'line',
+            name: CHART_ABS_PROFIT,
+            // Color is induced by visualMap
+          },
+          {
+            type: 'bar',
+            name: CHART_TRADE_COUNT,
+            itemStyle: {
+              color: 'rgba(150,150,150,0.3)',
+            },
+            yAxisIndex: 1,
+          },
+        ],
+      };
     });
 
     return {

src/stores/ftbot.ts

@@ -492,12 +492,15 @@ export function createBotSubStore(botId: string, botName: string) {
           return Promise.reject(error);
         }
       },
-      getDaily(payload: DailyPayload = {}) {
+      async getDaily(payload: DailyPayload = {}) {
         const { timescale = 20 } = payload;
-        return api
-          .get('/daily', { params: { timescale } })
-          .then((result) => (this.dailyStats = result.data))
-          .catch(console.error);
+        try {
+          const { data } = await api.get<DailyReturnValue>('/daily', { params: { timescale } });
+          this.dailyStats = data;
+          return Promise.resolve(data);
+        } catch (error) {
+          return Promise.reject(error);
+        }
       },
       getState() {
         return api

src/stores/ftbotwrapper.ts

@@ -103,8 +103,8 @@ export const useBotStore = defineStore('wrapper', {
       return result;
     },
     allDailyStatsAllBots: (state): DailyReturnValue => {
+      // Return aggregated daily stats for all bots - sorted ascending.
       const resp: Record<string, DailyRecord> = {};
-
       Object.entries(state.botStores).forEach(([, botStore]) => {
         botStore.dailyStats?.data?.forEach((d) => {
           if (!resp[d.date]) {
@@ -125,7 +125,7 @@ export const useBotStore = defineStore('wrapper', {
         stake_currency: 'USDT',
         // eslint-disable-next-line @typescript-eslint/camelcase
         fiat_display_currency: 'USD',
-        data: Object.values(resp),
+        data: Object.values(resp).sort((a, b) => (a.date > b.date ? 1 : -1)),
       };
       return dailyReturn;
     },
@@ -286,10 +286,15 @@ export const useBotStore = defineStore('wrapper', {
         }
       });
     },
-    allGetDaily(payload: DailyPayload) {
+    async allGetDaily(payload: DailyPayload) {
+      const updates: Promise<any>[] = [];
+
       this.allBotStores.forEach((e) => {
-        e.getDaily(payload);
+        if (e.isBotOnline) {
+          updates.push(e.getDaily(payload));
+        }
       });
+      await Promise.all(updates);
     },
     async forceSellMulti(forcesellPayload: MultiForcesellPayload) {
       return this.botStores[forcesellPayload.botId].forceexit(forcesellPayload);

src/views/Dashboard.vue

@@ -177,8 +177,8 @@ export default defineComponent({
       };
     });
 
-    onMounted(() => {
-      botStore.allGetDaily({ timescale: 30 });
+    onMounted(async () => {
+      await botStore.allGetDaily({ timescale: 30 });
       botStore.activeBot.getTrades();
       botStore.activeBot.getOpenTrades();
       botStore.activeBot.getProfit();