From 8f42aa60d71c34802cc4f626834252195672a591 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 6 Oct 2021 09:19:51 +0200
Subject: [PATCH] repair branch 707-Separate-Account-Overview-from-Send-Form
 from 937-Frontend-style-documentation

---
 frontend/package.json                         |   4 +-
 frontend/src/components/Charts/BarChart.js    |  13 ++
 frontend/src/components/Charts/LineChart.js   |  13 ++
 frontend/src/locales/de.json                  |   1 +
 frontend/src/locales/en.json                  |   1 +
 frontend/src/main.js                          |   3 +-
 frontend/src/routes/routes.js                 |   7 +
 .../src/views/Layout/DashboardLayout_gdd.vue  |   9 +-
 frontend/src/views/Pages/AccountOverview.vue  | 146 ++++++++++++------
 frontend/src/views/Pages/SendOverview.vue     | 120 ++++++++++++++
 frontend/yarn.lock                            |  30 +---
 11 files changed, 269 insertions(+), 78 deletions(-)
 create mode 100644 frontend/src/components/Charts/BarChart.js
 create mode 100644 frontend/src/components/Charts/LineChart.js
 create mode 100644 frontend/src/views/Pages/SendOverview.vue

diff --git a/frontend/package.json b/frontend/package.json
index 5827baa5e..b6862d117 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,7 +26,7 @@
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.3.1",
     "bootstrap-vue": "^2.5.0",
-    "chart.js": "^2.9.3",
+    "chart.js": "^3.5.1",
     "d3": "^5.7.0",
     "datamaps": "^0.5.9",
     "date-fns": "^1.30.1",
@@ -64,7 +64,7 @@
     "vue": "^2.6.11",
     "vue-apollo": "^3.0.7",
     "vue-bootstrap-typeahead": "^0.2.6",
-    "vue-chartjs": "^3.5.0",
+    "vue-chartjs": "^3.5.1",
     "vue-cli-plugin-i18n": "^1.0.1",
     "vue-clickaway": "^2.2.2",
     "vue-clipboard2": "^0.3.0",
diff --git a/frontend/src/components/Charts/BarChart.js b/frontend/src/components/Charts/BarChart.js
new file mode 100644
index 000000000..c36d8ba53
--- /dev/null
+++ b/frontend/src/components/Charts/BarChart.js
@@ -0,0 +1,13 @@
+import { Bar, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: Bar,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
+    this.renderChart(this.chartData, this.options)
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/Charts/LineChart.js b/frontend/src/components/Charts/LineChart.js
new file mode 100644
index 000000000..a0733c320
--- /dev/null
+++ b/frontend/src/components/Charts/LineChart.js
@@ -0,0 +1,13 @@
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
+    this.renderChart(this.chartData, this.options)
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index baf86c747..ad0cf9335 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -103,6 +103,7 @@
   "members_area": "Mitgliederbereich",
   "message": "hallo gradido !!",
   "privacy_policy": "Datenschutzerklärung",
+  "overview": "Übersicht",
   "send": "Senden",
   "settings": {
     "coinanimation": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index e0e0aa292..454f34dbd 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -103,6 +103,7 @@
   "members_area": "Member's area",
   "message": "hello gradido !!",
   "privacy_policy": "Privacy policy",
+  "overview": "Overview",
   "send": "Send",
   "settings": {
     "coinanimation": {
diff --git a/frontend/src/main.js b/frontend/src/main.js
index ba7015049..f71441924 100755
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,7 +6,7 @@ import { loadAllRules } from './validation-rules'
 import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
 import VueApollo from 'vue-apollo'
 import CONFIG from './config'
-
+import VueCharts from 'vue-chartjs'
 import { store } from './store/store'
 
 import router from './routes/router'
@@ -64,5 +64,6 @@ new Vue({
   store,
   i18n,
   apolloProvider,
+  VueCharts,
   render: (h) => h(App),
 })
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index 34d7a9d70..a662de10d 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -14,6 +14,13 @@ const routes = [
       requiresAuth: true,
     },
   },
+  {
+    path: '/send',
+    component: () => import('../views/Pages/SendOverview.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+  },
   {
     path: '/profile',
     component: () => import('../views/Pages/UserProfileOverview.vue'),
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 2b63bf417..8273685bd 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -2,11 +2,16 @@
   <div>
     <side-bar @logout="logout" :balance="balance" :pending="pending">
       <template slot="links">
-        <p></p>
+        <sidebar-item
+          :link="{
+            name: $t('overview'),
+            path: '/overview',
+          }"
+        ></sidebar-item>
         <sidebar-item
           :link="{
             name: $t('send'),
-            path: '/overview',
+            path: '/send',
           }"
         ></sidebar-item>
         <sidebar-item
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 6a056510b..d92ddc5d8 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -8,28 +8,33 @@
         :gdt-balance="GdtBalance"
       />
       <br />
-      <gdd-send :currentTransactionStep="currentTransactionStep">
-        <template #transaction-form>
-          <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
-        </template>
-        <template #transaction-confirmation>
-          <transaction-confirmation
-            :email="transactionData.email"
-            :amount="transactionData.amount"
-            :memo="transactionData.memo"
-            :loading="loading"
-            @send-transaction="sendTransaction"
-            @on-reset="onReset"
-          ></transaction-confirmation>
-        </template>
-        <template #transaction-result>
-          <transaction-result
-            :error="error"
-            :errorResult="errorResult"
-            @on-reset="onReset"
-          ></transaction-result>
-        </template>
-      </gdd-send>
+      <hr>
+      GDD Statistik
+     
+    <div class="small">
+    <line-chart :chart-data="datacollectionGdd"  :options="chartOptions"></line-chart>
+    </div>
+
+    <div class="small">
+    <bar-chart :chart-data="datacollectionGdd" ></bar-chart>
+    </div>
+
+      <hr>
+      GDT Statistik
+     
+    <div class="small">
+    <line-chart :chart-data="datacollectionGdt"></line-chart>
+    </div>
+
+    <div class="small">
+    <bar-chart :chart-data="datacollectionGdt" ></bar-chart>
+    </div>
+
+      <template #transaction-form>
+        <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
+      </template>
+
+<!--
       <hr />
       <gdd-transaction-list
         v-if="showContext"
@@ -40,18 +45,27 @@
         @update-transactions="updateTransactions"
       />
       <gdd-transaction-list-footer v-if="showContext" :count="transactionCount" />
+-->
+         <hr>
+      UserAccount Statistik
+     
+    <div class="small">
+    <line-chart :chart-data="datacollectionUser" ></line-chart>
+    </div>
+
+ <div class="small">
+    <bar-chart :chart-data="datacollectionUser" ></bar-chart>
+    </div>
     </b-container>
   </div>
 </template>
 <script>
+
 import GddStatus from './AccountOverview/GddStatus.vue'
-import GddSend from './AccountOverview/GddSend.vue'
+import LineChart from '../../components/Charts/LineChart.js'
+import BarChart from '../../components/Charts/BarChart.js'
 import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
-import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
-import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
-import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
-import { sendCoins } from '../../graphql/mutations.js'
 
 const EMPTY_TRANSACTION_DATA = {
   email: '',
@@ -63,12 +77,10 @@ export default {
   name: 'Overview',
   components: {
     GddStatus,
-    GddSend,
+    LineChart,
+    BarChart,
     GddTransactionList,
     GddTransactionListFooter,
-    TransactionForm,
-    TransactionConfirmation,
-    TransactionResult,
   },
   data() {
     return {
@@ -78,6 +90,8 @@ export default {
       errorResult: '',
       currentTransactionStep: 0,
       loading: false,
+      datacollectionGdd: null,
+      datacollectionGdt: null,
     }
   },
   props: {
@@ -102,24 +116,7 @@ export default {
       this.transactionData = { ...data }
       this.currentTransactionStep = 1
     },
-    async sendTransaction() {
-      this.loading = true
-      this.$apollo
-        .mutate({
-          mutation: sendCoins,
-          variables: this.transactionData,
-        })
-        .then(() => {
-          this.error = false
-          this.$emit('update-balance', this.transactionData.amount)
-        })
-        .catch((err) => {
-          this.errorResult = err.message
-          this.error = true
-        })
-      this.currentTransactionStep = 2
-      this.loading = false
-    },
+
     onReset() {
       this.transactionData = { ...EMPTY_TRANSACTION_DATA }
       this.currentTransactionStep = 0
@@ -127,6 +124,57 @@ export default {
     updateTransactions(pagination) {
       this.$emit('update-transactions', pagination)
     },
+     fillData () {
+        this.datacollectionGdd = {
+          labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'gesendet',
+              backgroundColor: '#ffd600',
+              data: [345, 490, 218, 2000, 490, 745, 1113]
+            }, {
+              label: 'empfangen',
+              backgroundColor: '#f3a4b5',
+               data: [700, 395, 100, 405, 39, 805, 423]
+            }, {
+              label: 'geschöpft',
+              backgroundColor: '#2bffc6',
+               data: [400, 1000, 600, 1000, 900, 800, 1000]
+            }
+          ]
+        },
+        this.datacollectionGdt = {
+          labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'Euro',
+              backgroundColor: '#ffd600',
+              data: [200, 500, 100, 200, 300, 500, 100]
+            }, {
+              label: 'GDT',
+              backgroundColor: '#2bffc6',
+               data: [2000, 5000, 1100, 2200, 3300, 5500, 1500]
+            }
+          ]
+        },
+        this.datacollectionUser = {
+          labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'Angemeldete User',
+              backgroundColor: '#525f7f',
+              data: [200, 220, 330, 420, 480, 500, 784]
+            }, {
+              label: 'User im Schöpfungsprozess',
+              backgroundColor: '#2bffc6',
+               data: [80, 133, 155, 220, 280, 320, 421]
+            }
+          ]
+        }
+      },
   },
+  mounted () {
+      this.fillData()
+    },
 }
 </script>
diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
new file mode 100644
index 000000000..d90dc6adc
--- /dev/null
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <b-container fluid>
+      <gdd-status
+        v-if="showContext"
+        :pending="pending"
+        :balance="balance"
+        :gdt-balance="GdtBalance"
+      />
+      <br />
+      <gdd-send :currentTransactionStep="currentTransactionStep">
+        <template #transaction-form>
+          <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
+        </template>
+        <template #transaction-confirmation>
+          <transaction-confirmation
+            :email="transactionData.email"
+            :amount="transactionData.amount"
+            :memo="transactionData.memo"
+            :loading="loading"
+            @send-transaction="sendTransaction"
+            @on-reset="onReset"
+          ></transaction-confirmation>
+        </template>
+        <template #transaction-result>
+          <transaction-result
+            :error="error"
+            :errorResult="errorResult"
+            @on-reset="onReset"
+          ></transaction-result>
+        </template>
+      </gdd-send>
+      <hr />
+    </b-container>
+  </div>
+</template>
+<script>
+import GddStatus from './AccountOverview/GddStatus.vue'
+import GddSend from './AccountOverview/GddSend.vue'
+
+import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
+import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
+import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
+import { sendCoins } from '../../graphql/mutations.js'
+
+const EMPTY_TRANSACTION_DATA = {
+  email: '',
+  amount: 0,
+  memo: '',
+}
+
+export default {
+  name: 'Overview',
+  components: {
+    GddStatus,
+    GddSend,
+
+    TransactionForm,
+    TransactionConfirmation,
+    TransactionResult,
+  },
+  data() {
+    return {
+      transactionData: { ...EMPTY_TRANSACTION_DATA },
+      error: false,
+      errorResult: '',
+      currentTransactionStep: 0,
+      loading: false,
+    }
+  },
+  props: {
+    balance: { type: Number, default: 0 },
+    GdtBalance: { type: Number, default: 0 },
+    transactions: {
+      default: () => [],
+    },
+
+    pending: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    showContext() {
+      return this.currentTransactionStep === 0
+    },
+  },
+  methods: {
+    setTransaction(data) {
+      this.transactionData = { ...data }
+      this.currentTransactionStep = 1
+    },
+    async sendTransaction() {
+      this.loading = true
+      this.$apollo
+        .mutate({
+          mutation: sendCoins,
+          variables: this.transactionData,
+        })
+        .then(() => {
+          this.error = false
+          this.$emit('update-balance', this.transactionData.amount)
+        })
+        .catch((err) => {
+          this.errorResult = err.message
+          this.error = true
+        })
+      this.currentTransactionStep = 2
+      this.loading = false
+    },
+    onReset() {
+      this.transactionData = { ...EMPTY_TRANSACTION_DATA }
+      this.currentTransactionStep = 0
+    },
+    updateTransactions(pagination) {
+      this.$emit('update-transactions', pagination)
+    },
+  },
+}
+</script>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index b52b6b670..047ac28e0 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3808,28 +3808,10 @@ chardet@^0.4.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
   integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
 
-chart.js@^2.9.3:
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
-  dependencies:
-    chartjs-color "^2.1.0"
-    moment "^2.10.2"
-
-chartjs-color-string@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
+chart.js@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
+  integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
 
 check-types@^8.0.3:
   version "8.0.3"
@@ -4058,7 +4040,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
+color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -13421,7 +13403,7 @@ vue-bootstrap-typeahead@^0.2.6:
     resize-observer-polyfill "^1.5.0"
     vue "^2.5.17"
 
-vue-chartjs@^3.5.0:
+vue-chartjs@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.5.1.tgz#d25e845708f7744ae51bed9d23a975f5f8fc6529"
   integrity sha512-foocQbJ7FtveICxb4EV5QuVpo6d8CmZFmAopBppDIGKY+esJV8IJgwmEW0RexQhxqXaL/E1xNURsgFFYyKzS/g==