68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<template>
|
|
<div class="stats-container">
|
|
<h2>Top 10 usernames</h2>
|
|
<div class="chart-container">
|
|
<canvas id="chart" widht="400" height="400"></canvas>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
|
import { StatResult } from '@/apiary/apiary';
|
|
import axios from 'axios';
|
|
import Chart from 'chart.js/auto';
|
|
import randomColor from 'randomcolor';
|
|
|
|
@Component
|
|
export default class StatsUsername extends Vue {
|
|
@Prop() private msg!: string;
|
|
|
|
stats: StatResult[];
|
|
|
|
constructor() {
|
|
super();
|
|
this.stats = [];
|
|
}
|
|
|
|
mounted(): void {
|
|
axios
|
|
.get<StatResult[]>('/api/stats?type=username&limit=10')
|
|
.then((resp) => {
|
|
this.stats = resp.data;
|
|
this.renderPie();
|
|
});
|
|
}
|
|
|
|
renderPie(): void {
|
|
const elem = document.getElementById('chart') as HTMLCanvasElement;
|
|
const ctx = elem.getContext('2d') as CanvasRenderingContext2D;
|
|
const sortedStats = this.stats.sort();
|
|
const values = sortedStats.map((s) => s.count);
|
|
const headers = sortedStats.map((s) => s.name);
|
|
const colors = sortedStats.map(() => randomColor());
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: headers,
|
|
options: {},
|
|
datasets: [
|
|
{
|
|
data: values,
|
|
backgroundColor: colors,
|
|
},
|
|
],
|
|
},
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chart-container {
|
|
max-width: 500px;
|
|
max-height: 500px;
|
|
}
|
|
</style>
|