MusareNode/frontend/components/Admin/Statistics.vue

<template>
	<div class='container'>
		<div class="columns">
			<div class='card column is-10-desktop is-offset-1-desktop is-12-mobile'>
				<header class='card-header'>
					<p class='card-header-title'>
						Average Logs
					</p>
				</header>
				<div class='card-content'>
					<div class='content'>
						<table class="table">
							<thead>
								<tr>
									<th> </th>
									<th>Success</th>
									<th>Error</th>
									<th>Info</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th><strong>Average per second</strong></th>
									<th v-bind:title="logs.second.success">{{round(logs.second.success)}}</th>
									<th v-bind:title="logs.second.error">{{round(logs.second.error)}}</th>
									<th v-bind:title="logs.second.info">{{round(logs.second.info)}}</th>
								</tr>
								<tr>
									<th><strong>Average per minute</strong></th>
									<th v-bind:title="logs.minute.success">{{round(logs.minute.success)}}</th>
									<th v-bind:title="logs.minute.error">{{round(logs.minute.error)}}</th>
									<th v-bind:title="logs.minute.info">{{round(logs.minute.info)}}</th>
								</tr>
								<tr>
									<th><strong>Average per hour</strong></th>
									<th v-bind:title="logs.hour.success">{{round(logs.hour.success)}}</th>
									<th v-bind:title="logs.hour.error">{{round(logs.hour.error)}}</th>
									<th v-bind:title="logs.hour.info">{{round(logs.hour.info)}}</th>
								</tr>
								<tr>
									<th><strong>Average per day</strong></th>
									<th v-bind:title="logs.day.success">{{round(logs.day.success)}}</th>
									<th v-bind:title="logs.day.error">{{round(logs.day.error)}}</th>
									<th v-bind:title="logs.day.info">{{round(logs.day.info)}}</th>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<br>
		<div class="columns">
			<div class='card column is-10-desktop is-offset-1-desktop is-12-mobile'>
				<div class='card-content'>
					<div class='content'>
						<canvas id="minuteChart" height="400"></canvas>
					</div>
				</div>
			</div>
		</div>
		<br>
		<div class="columns">
			<div class='card column is-10-desktop is-offset-1-desktop is-12-mobile'>
				<div class='card-content'>
					<div class='content'>
						<canvas id="hourChart" height="400"></canvas>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import EditUser from '../Modals/EditUser.vue';
	import io from '../../io';
	import Chart from 'chart.js'

	export default {
		components: {},
		data() {
			return {
				successUnitsPerMinute: [0,0,0,0,0,0,0,0,0,0],
				errorUnitsPerMinute: [0,0,0,0,0,0,0,0,0,0],
				infoUnitsPerMinute: [0,0,0,0,0,0,0,0,0,0],
				successUnitsPerHour: [0,0,0,0,0,0,0,0,0,0],
				errorUnitsPerHour: [0,0,0,0,0,0,0,0,0,0],
				infoUnitsPerHour: [0,0,0,0,0,0,0,0,0,0],
				minuteChart: null,
				hourChart: null,
				logs: {
					second: {
						success: 0,
						error: 0,
						info: 0
					},
					minute: {
						success: 0,
						error: 0,
						info: 0
					},
					hour: {
						success: 0,
						error: 0,
						info: 0
					},
					day: {
						success: 0,
						error: 0,
						info: 0
					}
				}
			}
		},
		methods: {
			init: function () {
				this.socket.emit('apis.joinAdminRoom', 'statistics', () => {});
				this.socket.on('event:admin.statistics.success.units.minute', units => {
					this.successUnitsPerMinute = units;
					this.minuteChart.data.datasets[0].data = units;
					this.minuteChart.update();
				});
				this.socket.on('event:admin.statistics.error.units.minute', units => {
					this.errorUnitsPerMinute = units;
					this.minuteChart.data.datasets[1].data = units;
					this.minuteChart.update();
				});
				this.socket.on('event:admin.statistics.info.units.minute', units => {
					this.infoUnitsPerMinute = units;
					this.minuteChart.data.datasets[2].data = units;
					this.minuteChart.update();
				});
				this.socket.on('event:admin.statistics.success.units.hour', units => {
					this.successUnitsPerHour = units;
					this.hourChart.data.datasets[0].data = units;
					this.hourChart.update();
				});
				this.socket.on('event:admin.statistics.error.units.hour', units => {
					this.errorUnitsPerHour = units;
					this.hourChart.data.datasets[1].data = units;
					this.hourChart.update();
				});
				this.socket.on('event:admin.statistics.info.units.hour', units => {
					this.infoUnitsPerHour = units;
					this.hourChart.data.datasets[2].data = units;
					this.hourChart.update();
				});
				this.socket.on('event:admin.statistics.logs', logs => {
					this.logs = logs;
				});
			},
			round: function(number) {
				return Math.round(number);
			}
		},
		ready: function () {
			let _this = this;
			var minuteCtx = document.getElementById("minuteChart");
			var hourCtx = document.getElementById("hourChart");

			_this.minuteChart = new Chart(minuteCtx, {
				type: 'line',
				data: {
					labels: ["-10", "-9", "-8", "-7", "-6", "-5", "-4", "-3", "-2", "-1"],
					datasets: [
						{
							label: 'Success',
							data: [0,0,0,0,0,0,0,0,0,0],
							backgroundColor: [
								'rgba(75, 192, 192, 0.2)'
							],
							borderColor: [
								'rgba(75, 192, 192, 1)'
							],
							borderWidth: 1
						},
						{
							label: 'Error',
							data: [0,0,0,0,0,0,0,0,0,0],
							backgroundColor: [
								'rgba(255, 99, 132, 0.2)'
							],
							borderColor: [
								'rgba(255,99,132,1)'
							],
							borderWidth: 1
						},
						{
							label: 'Info',
							data: [0,0,0,0,0,0,0,0,0,0],
							backgroundColor: [
								'rgba(54, 162, 235, 0.2)'
							],
							borderColor: [
								'rgba(54, 162, 235, 1)'
							],
							borderWidth: 1
						}
					]
				},
				options: {
					title: {
						display: true,
						text: 'Logs per minute'
					},
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: true,
								stepSize: 1
							}
						}]
					},
					responsive: true,
					maintainAspectRatio: false
				}
			});

			_this.hourChart = new Chart(hourCtx, {
				type: 'line',
				data: {
					labels: ["-10", "-9", "-8", "-7", "-6", "-5", "-4", "-3", "-2", "-1"],
					datasets: [
						{
							label: 'Success',
							data: [0,0,0,0,0,0,0,0,0,0],
							backgroundColor: [
								'rgba(75, 192, 192, 0.2)'
							],
							borderColor: [
								'rgba(75, 192, 192, 1)'
							],
							borderWidth: 1
						},
						{
							label: 'Error',
							data: [0,0,0,0,0,0,0,0,0,0],
							backgroundColor: [
								'rgba(255, 99, 132, 0.2)'
							],
							borderColor: [
								'rgba(255,99,132,1)'
							],
							borderWidth: 1
						},
						{
							label: 'Info',
							data: [0,0,0,0,0,0,0,0,0,0],
							backgroundColor: [
								'rgba(54, 162, 235, 0.2)'
							],
							borderColor: [
								'rgba(54, 162, 235, 1)'
							],
							borderWidth: 1
						}
					]
				},
				options: {
					title: {
						display: true,
						text: 'Logs per hour'
					},
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: true,
								stepSize: 1
							}
						}]
					},
					responsive: true,
					maintainAspectRatio: false
				}
			});


			io.getSocket(socket => {
				_this.socket = socket;
				if (_this.socket.connected) _this.init();
				io.onConnect(() => _this.init());
			});
		}
	}
</script>

<style lang='scss' scoped>
	body { font-family: 'Roboto', sans-serif; }

	.user-avatar {
		display: block;
		max-width: 50px;
		margin: 0 auto;
	}

	td { vertical-align: middle; }

	.is-primary:focus { background-color: #029ce3 !important; }
</style>