Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Admin/Stats.vue
<template> | <template> | ||||
<div id="stats-container" class="container"> | <div id="stats-container" class="container"> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js' | import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js' | ||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
charts: {} | charts: {} | ||||
} | } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.loadChart('users') | ['users', 'users-all', 'income', 'discounts'].forEach(chart => this.loadChart(chart)) | ||||
}, | }, | ||||
methods: { | methods: { | ||||
drawChart(name, data) { | drawChart(name, data) { | ||||
if (!data.title) { | if (!data.title) { | ||||
return | return | ||||
} | } | ||||
const ch = new Chart('#chart-' + name, data) | const ch = new Chart('#chart-' + name, data) | ||||
this.charts[name] = ch | this.charts[name] = ch | ||||
}, | }, | ||||
loadChart(name) { | loadChart(name) { | ||||
const chart = $('<div>').attr({ id: 'chart-' + name }).appendTo(this.$el) | const chart = $('<div>').attr({ id: 'chart-' + name }).appendTo(this.$el) | ||||
this.$root.addLoader(chart) | this.$root.addLoader(chart) | ||||
axios.get('/api/v4/stats/chart/' + name) | axios.get('/api/v4/stats/chart/' + name) | ||||
.then(response => { | .then(response => { | ||||
this.$root.removeLoader(chart) | this.$root.removeLoader(chart) | ||||
this.drawChart(name, response.data) | this.drawChart(name, response.data) | ||||
}) | }) | ||||
.catch(error => { | |||||
console.error(error) | |||||
this.$root.removeLoader(chart) | |||||
chart.append($('<span>').text('Failed to load data.')) | |||||
}) | |||||
} | } | ||||
} | } | ||||
} | } | ||||
</script> | </script> |