[CLEAR-39] Add charts

This commit is contained in:
Gabriela Pałka 2020-01-19 17:38:22 +01:00
parent 5cb1d1d86f
commit d176703b00
5 changed files with 1497 additions and 1263 deletions

View File

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

2626
front/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

107
front/pages/history.vue Normal file
View File

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

View File

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