From 69a7a7f91e8bf200d7a40e99a32c5ff5a90d4dab Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Mon, 17 Aug 2020 21:16:27 +0200
Subject: [PATCH] Add Dashboard view

---
 src/components/layout/NavBar.vue |  1 +
 src/router/index.ts              |  8 +++++++
 src/views/Dashboard.vue          | 41 ++++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 src/views/Dashboard.vue

diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index 77228eb5..db429615 100644
--- a/src/components/layout/NavBar.vue
+++ b/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>
diff --git a/src/router/index.ts b/src/router/index.ts
index 1cfc9a48..f3382528 100644
--- a/src/router/index.ts
+++ b/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',
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
new file mode 100644
index 00000000..31c3baa9
--- /dev/null
+++ b/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>