Budget and category charts in new layout.

frontend/src/components/dashboard/MainCategory.vue

@@ -0,0 +1,81 @@
+<!--
+  - MainCategoryChart.vue
+  - Copyright (c) 2020 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+    <div class="card">
+        <div class="card-header">
+            <h3 class="card-title">{{ $t('firefly.categories') }}</h3>
+        </div>
+        <div class="card-body">
+            <div>
+                <main-category-chart v-if="loaded" :styles="chartStyles" :options="chartOptions" :chart-data="chartData"></main-category-chart>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="./categories" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_categories') }}</a>
+        </div>
+    </div>
+</template>
+
+<script>
+    import MainCategoryChart from "./MainCategoryChart";
+    import DefaultBarOptions from "../charts/DefaultBarOptions";
+    import DataConverter from "../charts/DataConverter";
+
+    export default {
+        name: "MainCategory",
+        components: {
+            MainCategoryChart
+        },
+        data() {
+            return {
+                chartData: null,
+                loaded: false,
+                chartOptions: null,
+            }
+        },
+        mounted() {
+            this.chartOptions = DefaultBarOptions.methods.getDefaultOptions();
+            this.loaded = false;
+            axios.get('./api/v1/chart/category/overview?start=' + window.sessionStart + '&end=' + window.sessionEnd)
+                .then(response => {
+                    this.chartData = response.data;
+                    this.chartData = DataConverter.methods.convertChart(this.chartData);
+                    this.loaded = true
+                });
+        },
+        methods: {
+        },
+        computed: {
+            chartStyles() {
+                return {
+                    height: '400px',
+                    'max-height': '400px',
+                    position: 'relative',
+                    display: 'block',
+                }
+            }
+        },
+    }
+</script>
+
+<style scoped>
+
+</style>