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