Extract DailyChart to it's own component

src/components/charts/DailyChart.vue

@@ -0,0 +1,91 @@
+<template>
+  <v-chart v-if="dailyStats.data" :options="dailyChartOptions" />
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+import ECharts from 'vue-echarts';
+import 'echarts/lib/chart/bar';
+import 'echarts/lib/chart/line';
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/legend';
+
+import { DailyReturn } from '@/store/types';
+
+// Define Column labels here to avoid typos
+const CHART_ABS_PROFIT = 'Absolute profit';
+const CHART_TRADE_COUNT = 'Trade Count';
+
+@Component({
+  components: {
+    'v-chart': ECharts,
+  },
+})
+export default class DailyChart extends Vue {
+  @Prop({ required: true }) dailyStats!: DailyReturn;
+
+  get dailyChartOptions() {
+    return {
+      title: {
+        text: 'Daily profit',
+        show: true,
+      },
+      dataset: {
+        dimensions: ['date', 'abs_profit', 'trade_count'],
+        source: this.dailyStats.data,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'line',
+          label: {
+            backgroundColor: '#6a7985',
+          },
+        },
+      },
+      legend: {
+        data: [CHART_ABS_PROFIT, CHART_TRADE_COUNT],
+      },
+      xAxis: {
+        type: 'category',
+        inverse: true,
+      },
+      yAxis: [
+        {
+          type: 'value',
+          name: CHART_ABS_PROFIT,
+          splitLine: {
+            show: false,
+          },
+          nameRotate: 90,
+          nameLocation: 'middle',
+          nameGap: 30,
+        },
+        {
+          type: 'value',
+          name: CHART_TRADE_COUNT,
+          nameRotate: 90,
+          nameLocation: 'middle',
+          nameGap: 30,
+        },
+      ],
+      series: [
+        {
+          type: 'line',
+          name: CHART_ABS_PROFIT,
+          color: 'black',
+        },
+        {
+          type: 'bar',
+          name: CHART_TRADE_COUNT,
+          color: 'rgba(150,150,150,0.3)',
+          yAxisIndex: 1,
+        },
+      ],
+    };
+  }
+}
+</script>
+
+<style scoped></style>

src/components/ftbot/DailyStats.vue

@@ -5,30 +5,22 @@
       <b-button class="float-right" size="sm" @click="getDaily">&#x21bb;</b-button>
     </div>
     <div>
-      <v-chart v-if="dailyStats.data" :options="dailyChart" />
+      <DailyChart v-if="dailyStats.data" :dailyStats="dailyStats" />
     </div>
     <div>
-      <b-table class="table-sm" :items="dailyStats.data" :fields="daily_fields"> </b-table>
+      <b-table class="table-sm" :items="dailyStats.data" :fields="dailyFields"> </b-table>
     </div>
   </div>
 </template>
 
 <script>
 import { mapActions, mapState } from 'vuex';
-import ECharts from 'vue-echarts';
-import 'echarts/lib/chart/bar';
-import 'echarts/lib/chart/line';
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/legend';
-
-// Define Column labels here to avoid typos
-const CHART_ABS_PROFIT = 'Absolute profit';
-const CHART_TRADE_COUNT = 'Trade Count';
+import DailyChart from '@/components/charts/DailyChart.vue';
 
 export default {
   name: 'DailyStats',
   components: {
-    'v-chart': ECharts,
+    DailyChart,
   },
   computed: {
     ...mapState('ftbot', ['dailyStats']),
@@ -40,66 +32,6 @@ export default {
         { key: 'trade_count', label: 'Trades' },
       ];
     },
-    dailyChart() {
-      return {
-        title: {
-          text: 'Daily profit',
-          show: true,
-        },
-        dataset: {
-          dimensions: ['date', 'abs_profit', 'trade_count'],
-          source: this.dailyStats.data,
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'line',
-            label: {
-              backgroundColor: '#6a7985',
-            },
-          },
-        },
-        legend: {
-          data: [CHART_ABS_PROFIT, CHART_TRADE_COUNT],
-        },
-        xAxis: {
-          type: 'category',
-          inverse: true,
-        },
-        yAxis: [
-          {
-            type: 'value',
-            name: CHART_ABS_PROFIT,
-            splitLine: {
-              show: false,
-            },
-            nameRotate: 90,
-            nameLocation: 'middle',
-            nameGap: 30,
-          },
-          {
-            type: 'value',
-            name: CHART_TRADE_COUNT,
-            nameRotate: 90,
-            nameLocation: 'middle',
-            nameGap: 30,
-          },
-        ],
-        series: [
-          {
-            type: 'line',
-            name: CHART_ABS_PROFIT,
-            color: 'black',
-          },
-          {
-            type: 'bar',
-            name: CHART_TRADE_COUNT,
-            color: 'rgba(150,150,150,0.3)',
-            yAxisIndex: 1,
-          },
-        ],
-      };
-    },
   },
   methods: {
     ...mapActions('ftbot', ['getDaily']),

src/store/types.ts

@@ -19,6 +19,18 @@ export interface DailyPayload {
   timescale?: number;
 }
 
+export interface DailyRecord {
+  /** Date in the format yyyy-mm-dd */
+  date: string;
+  abs_profit: number;
+  fiat_value: number;
+  trade_count: number;
+}
+
+export interface DailyReturn {
+  data: Array<DailyRecord>;
+}
+
 export interface ForcebuyPayload {
   pair: string;
   price?: number;