107 lines
3.5 KiB
Vue
107 lines
3.5 KiB
Vue
<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> |