gsd
10 months ago
6 changed files with 129 additions and 2 deletions
@ -0,0 +1,70 @@ |
|||||
|
<template> |
||||
|
<md-dialog :md-active.sync="show" @close="show=false"> |
||||
|
<div class="md-layout md-alignment-bottom-center"> |
||||
|
<div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only"> |
||||
|
<h1 v-if="loading" style="text-align: center">Загрузка</h1> |
||||
|
<div v-else> |
||||
|
<LineChartGenerator :data="chartData" :dataset-id-key="'label'" :chart-id="'line-chart'" :height="400" :width="600"></LineChartGenerator> |
||||
|
<div style="padding-right: 2.5%; padding-left: 2.5%;"> |
||||
|
<md-field style="margin: 0% 0%;"> |
||||
|
<label style="font-family: tf2secondary">Выбрать сервер</label> |
||||
|
<md-select @md-selected="onLoad" v-model="srv" :mdClass="'ssm'" > |
||||
|
<md-option :value="''">Выбрать все</md-option> |
||||
|
<md-option v-for="srv in $API.getServers4Selector()" :key="srv['srv']" :value="srv['srv']">{{srv['name']}}</md-option> |
||||
|
</md-select> |
||||
|
</md-field> |
||||
|
<md-field style="margin: 0% 0%;"> |
||||
|
<label style="font-family: tf2secondary">Выбрать количество дней</label> |
||||
|
<md-select @md-selected="onLoad" v-model="limit" :mdClass="'ssm'" > |
||||
|
<md-option v-for="days in [7, 14, 21, 28]" :key="days" :value="days">{{days}} дней</md-option> |
||||
|
</md-select> |
||||
|
</md-field> |
||||
|
<md-button style="float: right" class="btn-default" v-on:click="showMe(false)">Закрыть</md-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</md-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { Line as LineChartGenerator } from 'vue-chartjs' |
||||
|
import axios from "axios"; |
||||
|
import Random from "@/api/Random"; |
||||
|
|
||||
|
export default { |
||||
|
name: "PlayersGraph", |
||||
|
data: () => ({ |
||||
|
show: false, |
||||
|
loading: false, |
||||
|
chartData: {"labels":[], "datasets":[]}, |
||||
|
srv: "", |
||||
|
limit: 7 |
||||
|
}), |
||||
|
components: { LineChartGenerator }, |
||||
|
methods: { |
||||
|
showMe(action) { |
||||
|
this.show = action === undefined ? !this.show : action; |
||||
|
if (action === true) { |
||||
|
this.onLoad(); |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.loading = true; |
||||
|
axios.get(`api/stats/graph/peak/of/days?limit=${this.limit}&server_id=${this.srv}` + Random.getRndWebAppend()).then( |
||||
|
response => { |
||||
|
//console.log(response.data); |
||||
|
const data = response.data.reverse(); |
||||
|
this.chartData = {"labels":[], "datasets":[]}; |
||||
|
for (const i in data) { |
||||
|
this.chartData.labels.push(data[i].date); |
||||
|
} |
||||
|
this.chartData.datasets.push({"label":"Пик игроков", backgroundColor: '#ff0000', data: data.map(d => d['max'])}) |
||||
|
this.chartData.datasets.push({"label":"Среднее количество игроков", backgroundColor: '#fff900', data: data.map(d => d['avg'])}) |
||||
|
//console.log(this.chartData); |
||||
|
} |
||||
|
).catch().finally(() => this.loading = false) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue