Differential D1828 Diff 5047 src/resources/vue/Admin/Stats.vue

Changeset View

Standalone View

	<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'].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 => {
				this.$root.removeLoader(chart)
				chart.append($('<span>').text('Failed to load data.'))
				})
	}			}
	}			}
	}			}
	</script>			</script>