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 @@