Add Dashboard view

src/components/layout/NavBar.vue

@@ -11,6 +11,7 @@
       <b-collapse id="nav-collapse" is-nav>
         <b-navbar-nav>
           <b-nav-item to="/trade">Trade</b-nav-item>
+          <b-nav-item to="/dashboard">Dashboard</b-nav-item>
           <b-nav-item to="/about">About</b-nav-item>
           <BootswatchThemeSelect />
         </b-navbar-nav>

src/router/index.ts

@@ -24,6 +24,14 @@ const routes: Array<RouteConfig> = [
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '@/views/Trading.vue'),
   },
+  {
+    path: '/dashboard',
+    name: 'Freqtrade Dashboard',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/Dashboard.vue'),
+  },
   {
     path: '/about',
     name: 'About',

src/views/Dashboard.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <DailyChart v-if="dailyStats.data" :dailyStats="dailyStats" />
+    <HourlyChart :trades="closedTrades" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { namespace } from 'vuex-class';
+
+import DailyChart from '@/components/charts/DailyChart.vue';
+import HourlyChart from '@/components/charts/HourlyChart.vue';
+
+import { Trade, DailyReturnValue } from '@/store/types';
+
+const ftbot = namespace('ftbot');
+
+@Component({
+  components: {
+    DailyChart,
+    HourlyChart,
+  },
+})
+export default class Trading extends Vue {
+  @ftbot.Getter closedTrades!: Array<Trade>;
+
+  @ftbot.State dailyStats!: DailyReturnValue;
+
+  @ftbot.Action getDaily;
+
+  @ftbot.Action getTrades;
+
+  mounted() {
+    this.getDaily();
+    this.getTrades();
+  }
+}
+</script>
+
+<style scoped></style>