Statistics.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. <template>
  2. <div class="container">
  3. <metadata title="Admin | Statistics" />
  4. <div class="columns">
  5. <div
  6. class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
  7. >
  8. <header class="card-header">
  9. <p class="card-header-title">
  10. Average Logs
  11. </p>
  12. </header>
  13. <div class="card-content">
  14. <div class="content">
  15. <table class="table">
  16. <thead>
  17. <tr>
  18. <th />
  19. <th>Success</th>
  20. <th>Error</th>
  21. <th>Info</th>
  22. </tr>
  23. </thead>
  24. <tbody>
  25. <tr>
  26. <th><strong>Average per second</strong></th>
  27. <th :title="logs.second.success">
  28. {{ round(logs.second.success) }}
  29. </th>
  30. <th :title="logs.second.error">
  31. {{ round(logs.second.error) }}
  32. </th>
  33. <th :title="logs.second.info">
  34. {{ round(logs.second.info) }}
  35. </th>
  36. </tr>
  37. <tr>
  38. <th><strong>Average per minute</strong></th>
  39. <th :title="logs.minute.success">
  40. {{ round(logs.minute.success) }}
  41. </th>
  42. <th :title="logs.minute.error">
  43. {{ round(logs.minute.error) }}
  44. </th>
  45. <th :title="logs.minute.info">
  46. {{ round(logs.minute.info) }}
  47. </th>
  48. </tr>
  49. <tr>
  50. <th><strong>Average per hour</strong></th>
  51. <th :title="logs.hour.success">
  52. {{ round(logs.hour.success) }}
  53. </th>
  54. <th :title="logs.hour.error">
  55. {{ round(logs.hour.error) }}
  56. </th>
  57. <th :title="logs.hour.info">
  58. {{ round(logs.hour.info) }}
  59. </th>
  60. </tr>
  61. <tr>
  62. <th><strong>Average per day</strong></th>
  63. <th :title="logs.day.success">
  64. {{ round(logs.day.success) }}
  65. </th>
  66. <th :title="logs.day.error">
  67. {{ round(logs.day.error) }}
  68. </th>
  69. <th :title="logs.day.info">
  70. {{ round(logs.day.info) }}
  71. </th>
  72. </tr>
  73. </tbody>
  74. </table>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <br />
  80. <div class="columns">
  81. <div
  82. class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
  83. >
  84. <div class="card-content">
  85. <div class="content">
  86. <canvas id="minuteChart" height="400" />
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. <br />
  92. <div class="columns">
  93. <div
  94. class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
  95. >
  96. <div class="card-content">
  97. <div class="content">
  98. <canvas id="hourChart" height="400" />
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </template>
  105. <script>
  106. import { Line } from "chart.js";
  107. import "chartjs-adapter-date-fns";
  108. import io from "../../io";
  109. export default {
  110. components: {},
  111. data() {
  112. return {
  113. successUnitsPerMinute: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  114. errorUnitsPerMinute: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  115. infoUnitsPerMinute: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  116. successUnitsPerHour: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  117. errorUnitsPerHour: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  118. infoUnitsPerHour: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  119. minuteChart: null,
  120. hourChart: null,
  121. logs: {
  122. second: {
  123. success: 0,
  124. error: 0,
  125. info: 0
  126. },
  127. minute: {
  128. success: 0,
  129. error: 0,
  130. info: 0
  131. },
  132. hour: {
  133. success: 0,
  134. error: 0,
  135. info: 0
  136. },
  137. day: {
  138. success: 0,
  139. error: 0,
  140. info: 0
  141. }
  142. }
  143. };
  144. },
  145. mounted() {
  146. const minuteCtx = document.getElementById("minuteChart");
  147. const hourCtx = document.getElementById("hourChart");
  148. this.minuteChart = new Line(minuteCtx, {
  149. data: {
  150. labels: [
  151. "-10",
  152. "-9",
  153. "-8",
  154. "-7",
  155. "-6",
  156. "-5",
  157. "-4",
  158. "-3",
  159. "-2",
  160. "-1"
  161. ],
  162. datasets: [
  163. {
  164. label: "Success",
  165. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  166. backgroundColor: ["rgba(75, 192, 192, 0.2)"],
  167. borderColor: ["rgba(75, 192, 192, 1)"],
  168. borderWidth: 1
  169. },
  170. {
  171. label: "Error",
  172. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  173. backgroundColor: ["rgba(255, 99, 132, 0.2)"],
  174. borderColor: ["rgba(255,99,132,1)"],
  175. borderWidth: 1
  176. },
  177. {
  178. label: "Info",
  179. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  180. backgroundColor: ["rgba(54, 162, 235, 0.2)"],
  181. borderColor: ["rgba(54, 162, 235, 1)"],
  182. borderWidth: 1
  183. }
  184. ]
  185. },
  186. options: {
  187. title: {
  188. display: true,
  189. text: "Logs per minute"
  190. },
  191. scales: {
  192. yAxes: [
  193. {
  194. ticks: {
  195. beginAtZero: true,
  196. stepSize: 1
  197. }
  198. }
  199. ]
  200. },
  201. responsive: true,
  202. maintainAspectRatio: false
  203. }
  204. });
  205. this.hourChart = new Line(hourCtx, {
  206. data: {
  207. labels: [
  208. "-10",
  209. "-9",
  210. "-8",
  211. "-7",
  212. "-6",
  213. "-5",
  214. "-4",
  215. "-3",
  216. "-2",
  217. "-1"
  218. ],
  219. datasets: [
  220. {
  221. label: "Success",
  222. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  223. backgroundColor: ["rgba(75, 192, 192, 0.2)"],
  224. borderColor: ["rgba(75, 192, 192, 1)"],
  225. borderWidth: 1
  226. },
  227. {
  228. label: "Error",
  229. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  230. backgroundColor: ["rgba(255, 99, 132, 0.2)"],
  231. borderColor: ["rgba(255,99,132,1)"],
  232. borderWidth: 1
  233. },
  234. {
  235. label: "Info",
  236. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  237. backgroundColor: ["rgba(54, 162, 235, 0.2)"],
  238. borderColor: ["rgba(54, 162, 235, 1)"],
  239. borderWidth: 1
  240. }
  241. ]
  242. },
  243. options: {
  244. title: {
  245. display: true,
  246. text: "Logs per hour"
  247. },
  248. scales: {
  249. yAxes: [
  250. {
  251. ticks: {
  252. beginAtZero: true,
  253. stepSize: 1
  254. }
  255. }
  256. ]
  257. },
  258. responsive: true,
  259. maintainAspectRatio: false
  260. }
  261. });
  262. io.getSocket(socket => {
  263. this.socket = socket;
  264. if (this.socket.connected) this.init();
  265. io.onConnect(() => this.init());
  266. });
  267. },
  268. methods: {
  269. init() {
  270. this.socket.emit("apis.joinAdminRoom", "statistics", () => {});
  271. this.socket.on(
  272. "event:admin.statistics.success.units.minute",
  273. units => {
  274. this.successUnitsPerMinute = units;
  275. this.minuteChart.data.datasets[0].data = units;
  276. this.minuteChart.update();
  277. }
  278. );
  279. this.socket.on(
  280. "event:admin.statistics.error.units.minute",
  281. units => {
  282. this.errorUnitsPerMinute = units;
  283. this.minuteChart.data.datasets[1].data = units;
  284. this.minuteChart.update();
  285. }
  286. );
  287. this.socket.on(
  288. "event:admin.statistics.info.units.minute",
  289. units => {
  290. this.infoUnitsPerMinute = units;
  291. this.minuteChart.data.datasets[2].data = units;
  292. this.minuteChart.update();
  293. }
  294. );
  295. this.socket.on(
  296. "event:admin.statistics.success.units.hour",
  297. units => {
  298. this.successUnitsPerHour = units;
  299. this.hourChart.data.datasets[0].data = units;
  300. this.hourChart.update();
  301. }
  302. );
  303. this.socket.on("event:admin.statistics.error.units.hour", units => {
  304. this.errorUnitsPerHour = units;
  305. this.hourChart.data.datasets[1].data = units;
  306. this.hourChart.update();
  307. });
  308. this.socket.on("event:admin.statistics.info.units.hour", units => {
  309. this.infoUnitsPerHour = units;
  310. this.hourChart.data.datasets[2].data = units;
  311. this.hourChart.update();
  312. });
  313. this.socket.on("event:admin.statistics.logs", logs => {
  314. this.logs = logs;
  315. });
  316. },
  317. round(number) {
  318. return Math.round(number);
  319. }
  320. }
  321. };
  322. </script>
  323. <style lang="scss" scoped>
  324. @import "styles/global.scss";
  325. .night-mode {
  326. .table {
  327. color: #ddd;
  328. background-color: #222;
  329. thead tr {
  330. background: $night-mode-secondary;
  331. td {
  332. color: #fff;
  333. }
  334. }
  335. tbody tr:hover {
  336. background-color: #111 !important;
  337. }
  338. tbody tr:nth-child(even) {
  339. background-color: #444;
  340. }
  341. strong {
  342. color: #ddd;
  343. }
  344. }
  345. .card {
  346. background-color: $night-mode-secondary;
  347. p {
  348. color: #ddd;
  349. }
  350. }
  351. }
  352. body {
  353. font-family: "Roboto", sans-serif;
  354. }
  355. .user-avatar {
  356. display: block;
  357. max-width: 50px;
  358. margin: 0 auto;
  359. }
  360. td {
  361. vertical-align: middle;
  362. }
  363. .is-primary:focus {
  364. background-color: $primary-color !important;
  365. }
  366. </style>