From d50cf10203bdc142b98c3809ddc37ba2ac0eb73a Mon Sep 17 00:00:00 2001
From: gsd <mamu@ebal.net>
Date: Sun, 26 May 2024 20:55:52 +0300
Subject: [PATCH] funny graphs

---
 package-lock.json                             | 27 +++++++
 package.json                                  |  2 +
 src/App.vue                                   | 21 ++++++
 src/api/GlobalApi.js                          |  3 +
 .../ActionDialogs/Tables/PlayersGraph.vue     | 70 +++++++++++++++++++
 .../SubComponents/CurrentPlayers.vue          |  8 ++-
 6 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ActionDialogs/Tables/PlayersGraph.vue

diff --git a/package-lock.json b/package-lock.json
index 89fc311..087a442 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,11 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^1.5.1",
+        "chart.js": "^4.4.3",
         "core-js": "^3.8.3",
         "leaflet": "^1.9.4",
         "vue": "^2.6.14",
+        "vue-chartjs": "^5.3.1",
         "vue-material": "^1.0.0-beta-16",
         "vue2-leaflet": "^2.7.1"
       },
@@ -1961,6 +1963,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -3915,6 +3922,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
+      "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -10756,6 +10774,15 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.1.tgz",
+      "integrity": "sha512-rZjqcHBxKiHrBl0CIvcOlVEBwRhpWAVf6rDU3vUfa7HuSRmGtCslc0Oc8m16oAVuk0erzc1FCtH1VCriHsrz+A==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
diff --git a/package.json b/package.json
index c5e5459..3667210 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,11 @@
   },
   "dependencies": {
     "axios": "^1.5.1",
+    "chart.js": "^4.4.3",
     "core-js": "^3.8.3",
     "leaflet": "^1.9.4",
     "vue": "^2.6.14",
+    "vue-chartjs": "^5.3.1",
     "vue-material": "^1.0.0-beta-16",
     "vue2-leaflet": "^2.7.1"
   },
diff --git a/src/App.vue b/src/App.vue
index 8b553fb..60732ef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,6 +52,27 @@ Vue.use(MdSwitch);
 Vue.use(MdTooltip);
 Vue.use(MdCheckbox);
 
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale,
+  CategoryScale,
+  PointElement
+} from 'chart.js'
+
+ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    LineElement,
+    LinearScale,
+    CategoryScale,
+    PointElement
+)
+
 import "@/css/buttons.css";
 import "@/css/rounded.css";
 import "@/css/text.css";
diff --git a/src/api/GlobalApi.js b/src/api/GlobalApi.js
index 19f0b3e..719583c 100644
--- a/src/api/GlobalApi.js
+++ b/src/api/GlobalApi.js
@@ -79,6 +79,7 @@ export default class GlobalApi {
     }
 
     getServers4Selector() {
+        this.create_server_websocket()
         let r = [];
         for (const srv in this.stats.servers_map) {
             r.push({"srv": this.stats.servers_map[srv]['key'], "name": this.stats.servers_map[srv]['name']})
@@ -126,6 +127,8 @@ export default class GlobalApi {
             this.stats["servers_map"] = response;
         } else {
             for (let srv in response) {
+                //blya nu ya i dolbaeb missnul
+                response[srv]['key'] = srv;
                 this.stats["servers_map"][srv] = response[srv];
             }
         }
diff --git a/src/components/ActionDialogs/Tables/PlayersGraph.vue b/src/components/ActionDialogs/Tables/PlayersGraph.vue
new file mode 100644
index 0000000..2c1ed2b
--- /dev/null
+++ b/src/components/ActionDialogs/Tables/PlayersGraph.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue b/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue
index cb0af26..db832cf 100644
--- a/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue
+++ b/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue
@@ -18,21 +18,25 @@
         <h4 class="txt-innert" style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.player_now}}</h4>
       </div>
       <div class="md-layout-item" v-bind:class="`md-size-${space_size} ${getSH()}`"/>
-      <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size} ${getSS()}`">
-        <h4 class="txt-innert" style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.player_max}}</h4>
+      <div class="md-layout-item rounded-and-colored" style="cursor: pointer" v-on:click="$refs.cp_pg.showMe(true)" v-bind:class="`md-size-${puff_size} ${getSS()}`">
+        <h4 class="txt-innert" style="text-align: center; margin: 10% 10%;" >{{this.$API.stats.statistic.player_max}}</h4>
       </div>
       <div class="md-layout-item" v-bind:class="`md-size-${space_size} ${getSH()}`"/>
       <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size} ${getSS()}`">
         <h4 class="txt-innert" style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.working_servers}}/{{this.$API.stats.statistic.total_servers}}</h4>
       </div>
     </div>
+    <PlayersGraph ref="cp_pg"/>
   </div>
 </template>
 
 <script>
 
+import PlayersGraph from "@/components/ActionDialogs/Tables/PlayersGraph.vue";
+
 export default {
   name: 'CurrentPlayers',
+  components: {PlayersGraph},
   data: () => ({
     puff_size: 15,
     space_size: 5,