[CLEAR-39] Add charts

front/components/History/LineChart.vue

@@ -0,0 +1,17 @@
+<script>
+    import {Line, mixins} from 'vue-chartjs'
+
+    export default {
+        name: 'LineChart',
+        extends: Line,
+        mixins: [mixins.reactiveProp],
+        props: ['datasets', 'labels', 'options'],
+        mounted() {
+            // Overwriting base render method with actual data.
+            this.renderChart({
+                labels: this.labels,
+                datasets: this.datasets
+            }, this.options)
+        }
+    }
+</script>

front/package.json

@@ -14,8 +14,10 @@
   "dependencies": {
     "@nuxtjs/auth": "^4.8.4",
     "@nuxtjs/axios": "^5.8.0",
+    "chart.js": "^2.9.3",
     "nuxt": "^2.0.0",
-    "view-design": "^4.0.2"
+    "view-design": "^4.0.2",
+    "vue-chartjs": "^3.5.0"
   },
   "devDependencies": {}
 }

front/pages/history.vue

@@ -0,0 +1,107 @@
+<template>
+    <div v-if="drawChart" style="max-width: 1000px;">
+        <Row>
+            <Col span="12">
+                <LineChart :width="600" :height="600" :labels="dates" :datasets="datasets.kcal" style="margin-bottom: 10px"/>
+            </Col>
+            <Col span="12">
+                <LineChart :width="600" :height="600" :labels="dates" :datasets="datasets.nutrition" style="margin-bottom: 10px"/>
+            </Col>
+        </Row>
+        <Button v-if="chartValue==='day'" type="primary" @click="changeView('month')">
+            Miesięcznie
+        </Button>
+        <Button v-else type="primary" @click="changeView('day')">
+            Dziennie
+        </Button>
+    </div>
+</template>
+
+<script>
+    import LineChart from "../components/History/LineChart";
+
+    export default {
+        name: 'history',
+        components: {LineChart},
+        data() {
+            return {
+                drawChart: false,
+                dates: [],
+                kcal: [],
+                carbohydrates: [],
+                protein: [],
+                fat: [],
+                chartValue: 'day',
+                datasets: null
+            }
+        },
+        mounted() {
+            this.getChartData(this.chartValue);
+        },
+        methods: {
+            setDatasets() {
+                this.datasets = {
+                    'nutrition': [
+                        {
+                            label: 'Węglowodany',
+                            data: this.carbohydrates,
+                            borderColor: '#f8bc7d',
+                            fill: false
+                        },
+                        {
+                            label: 'Białka',
+                            data: this.protein,
+                            borderColor: '#59b159',
+                            fill: false
+                        },
+                        {
+                            label: 'Tłuszcze',
+                            data: this.fat,
+                            borderColor: '#7da9f8',
+                            fill: false
+                        }
+                    ],
+                    'kcal': [{
+                        label: 'Kalorie',
+                        data: this.kcal,
+                        borderColor: '#f87979',
+                        fill: false
+                    }]
+                };
+                this.drawChart = true;
+            },
+            getChartData(value) {
+                this.dates = [];
+                this.kcal = [];
+                this.carbohydrates = [];
+                this.protein = [];
+                this.fat = [];
+                this.$axios.get('/user/history', {
+                    params: {
+                        groupBy: value
+                    }
+                })
+                    .then((res) => {
+                        const data = res.data.data.history;
+                        for (let info of data) {
+                            this.dates.push(info.date);
+                            this.kcal.push(info.kcal);
+                            this.carbohydrates.push(info.carbohydrates);
+                            this.protein.push(info.protein);
+                            this.fat.push(info.fat)
+                        }
+                        this.setDatasets();
+                    })
+            },
+            changeView(value) {
+                this.chartValue = value;
+                this.drawChart = false;
+                this.getChartData(this.chartValue);
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

front/pages/index.vue

@@ -22,12 +22,14 @@
                 </NuxtLink>
             </Col>
             <Col span="6">
+                <NuxtLink to="/history">
                 <Card class="cb-menu">
                     <Icon type="ios-stats" size="100" color="white"/>
                     <div style="text-align:center">
                         <h3>Historia</h3>
                     </div>
                 </Card>
+                </NuxtLink>
             </Col>
             <Col span="6">
                 <NuxtLink to="/products">