ToneAPI/ToneAPI_webclient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

works for v2

Browse Source
This commit is contained in:
legonzaur
2023-04-23 14:09:20 +02:00
parent ec2de227dd
commit 363e0a3b08
11 changed files with 462 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+154 -35
View File
@@ -8,18 +8,21 @@
"name": "toneapi_webclient", "name": "toneapi_webclient",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"assert": "^2.0.0",
"chart.js": "^4.2.1", "chart.js": "^4.2.1",
"chartjs-plugin-annotation": "^2.2.1", "chartjs-plugin-annotation": "^2.2.1",
"chartjs-plugin-datalabels": "^2.2.0", "chartjs-plugin-datalabels": "^2.2.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"pinia": "^2.0.35",
"vue": "^3.2.13", "vue": "^3.2.13",
"vue-chartjs": "^5.2.0", "vue-chartjs": "^5.2.0",
"vue-class-component": "^8.0.0-0", "vue-class-component": "^8.0.0-0",
"vue-multiselect": "^3.0.0-beta.1", "vue-multiselect": "^3.0.0-beta.1",
"vue-router": "^4.0.3", "vue-router": "^4.0.3"
"vuex": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/assert": "^1.5.6",
"@types/node": "^18.16.0",
"@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0", "@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",
@@ -2107,6 +2110,12 @@
"node": ">=10.13.0" "node": ">=10.13.0"
} }
}, },
"node_modules/@types/assert": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@types/assert/-/assert-1.5.6.tgz",
"integrity": "sha512-Y7gDJiIqb9qKUHfBQYOWGngUpLORtirAVPuj/CWJrU2C6ZM4/y3XLwuwfGMF8s7QzW746LQZx23m0+1FSgjfug==",
"dev": true
},
"node_modules/@types/body-parser": { "node_modules/@types/body-parser": {
"version": "1.19.2", "version": "1.19.2",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -2234,9 +2243,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "18.15.3", "version": "18.16.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.3.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.0.tgz",
"integrity": "sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==", "integrity": "sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ==",
"dev": true "dev": true
}, },
"node_modules/@types/normalize-package-data": { "node_modules/@types/normalize-package-data": {
@@ -3898,6 +3907,17 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/assert": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz",
"integrity": "sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==",
"dependencies": {
"es6-object-assign": "^1.1.0",
"is-nan": "^1.2.1",
"object-is": "^1.0.1",
"util": "^0.12.0"
}
},
"node_modules/astral-regex": { "node_modules/astral-regex": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
@@ -3962,7 +3982,6 @@
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
"integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==", "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
"dev": true,
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
}, },
@@ -4277,7 +4296,6 @@
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
"dev": true,
"dependencies": { "dependencies": {
"function-bind": "^1.1.1", "function-bind": "^1.1.1",
"get-intrinsic": "^1.0.2" "get-intrinsic": "^1.0.2"
@@ -5393,7 +5411,6 @@
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
"integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==", "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
"dev": true,
"dependencies": { "dependencies": {
"has-property-descriptors": "^1.0.0", "has-property-descriptors": "^1.0.0",
"object-keys": "^1.1.1" "object-keys": "^1.1.1"
@@ -5776,6 +5793,11 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/es6-object-assign": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
"integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
},
"node_modules/escalade": { "node_modules/escalade": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -7020,7 +7042,6 @@
"version": "0.3.3", "version": "0.3.3",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
"integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==", "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
"dev": true,
"dependencies": { "dependencies": {
"is-callable": "^1.1.3" "is-callable": "^1.1.3"
} }
@@ -7260,8 +7281,7 @@
"node_modules/function-bind": { "node_modules/function-bind": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
"dev": true
}, },
"node_modules/function.prototype.name": { "node_modules/function.prototype.name": {
"version": "1.1.5", "version": "1.1.5",
@@ -7318,7 +7338,6 @@
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
"integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==", "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
"dev": true,
"dependencies": { "dependencies": {
"function-bind": "^1.1.1", "function-bind": "^1.1.1",
"has": "^1.0.3", "has": "^1.0.3",
@@ -7442,7 +7461,6 @@
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
"integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
"dev": true,
"dependencies": { "dependencies": {
"get-intrinsic": "^1.1.3" "get-intrinsic": "^1.1.3"
}, },
@@ -7487,7 +7505,6 @@
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
"dev": true,
"dependencies": { "dependencies": {
"function-bind": "^1.1.1" "function-bind": "^1.1.1"
}, },
@@ -7517,7 +7534,6 @@
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz", "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==", "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
"dev": true,
"dependencies": { "dependencies": {
"get-intrinsic": "^1.1.1" "get-intrinsic": "^1.1.1"
}, },
@@ -7541,7 +7557,6 @@
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
"dev": true,
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
}, },
@@ -7553,7 +7568,6 @@
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz", "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
"integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==", "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
"dev": true,
"dependencies": { "dependencies": {
"has-symbols": "^1.0.2" "has-symbols": "^1.0.2"
}, },
@@ -7892,8 +7906,7 @@
"node_modules/inherits": { "node_modules/inherits": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
"dev": true
}, },
"node_modules/internal-slot": { "node_modules/internal-slot": {
"version": "1.0.5", "version": "1.0.5",
@@ -7927,6 +7940,21 @@
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/is-arguments": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
"integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
"dependencies": {
"call-bind": "^1.0.2",
"has-tostringtag": "^1.0.0"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/is-array-buffer": { "node_modules/is-array-buffer": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
@@ -7991,7 +8019,6 @@
"version": "1.2.7", "version": "1.2.7",
"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
"integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==", "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
"dev": true,
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
}, },
@@ -8080,6 +8107,20 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/is-generator-function": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
"integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
"dependencies": {
"has-tostringtag": "^1.0.0"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/is-glob": { "node_modules/is-glob": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -8101,6 +8142,21 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/is-nan": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
"integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
"dependencies": {
"call-bind": "^1.0.0",
"define-properties": "^1.1.3"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/is-negative-zero": { "node_modules/is-negative-zero": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz", "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
@@ -8232,7 +8288,6 @@
"version": "1.1.10", "version": "1.1.10",
"resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz", "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
"integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==", "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
"dev": true,
"dependencies": { "dependencies": {
"available-typed-arrays": "^1.0.5", "available-typed-arrays": "^1.0.5",
"call-bind": "^1.0.2", "call-bind": "^1.0.2",
@@ -9341,11 +9396,25 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/object-is": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
"integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
"dependencies": {
"call-bind": "^1.0.2",
"define-properties": "^1.1.3"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/object-keys": { "node_modules/object-keys": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
"dev": true,
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
} }
@@ -9775,6 +9844,56 @@
"url": "https://github.com/sponsors/jonschlinkert" "url": "https://github.com/sponsors/jonschlinkert"
} }
}, },
"node_modules/pinia": {
"version": "2.0.35",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.35.tgz",
"integrity": "sha512-P1IKKQWhxGXiiZ3atOaNI75bYlFUbRxtJdhPLX059Z7+b9Z04rnTZdSY8Aph1LA+/4QEMAYHsTQ638Wfe+6K5g==",
"dependencies": {
"@vue/devtools-api": "^6.5.0",
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"@vue/composition-api": "^1.4.0",
"typescript": ">=4.4.4",
"vue": "^2.6.14 || ^3.2.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
},
"typescript": {
"optional": true
}
}
},
"node_modules/pinia/node_modules/vue-demi": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
"integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/pkg-dir": { "node_modules/pkg-dir": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -12090,7 +12209,7 @@
"version": "4.5.5", "version": "4.5.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
"integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
"dev": true, "devOptional": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"
@@ -12207,6 +12326,18 @@
"punycode": "^2.1.0" "punycode": "^2.1.0"
} }
}, },
"node_modules/util": {
"version": "0.12.5",
"resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
"integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
"dependencies": {
"inherits": "^2.0.3",
"is-arguments": "^1.0.4",
"is-generator-function": "^1.0.7",
"is-typed-array": "^1.1.3",
"which-typed-array": "^1.1.2"
}
},
"node_modules/util-deprecate": { "node_modules/util-deprecate": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -12544,17 +12675,6 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"node_modules/vuex": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
"integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
"dependencies": {
"@vue/devtools-api": "^6.0.0-beta.11"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/watchpack": { "node_modules/watchpack": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -13102,7 +13222,6 @@
"version": "1.1.9", "version": "1.1.9",
"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz", "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
"integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==", "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
"dev": true,
"dependencies": { "dependencies": {
"available-typed-arrays": "^1.0.5", "available-typed-arrays": "^1.0.5",
"call-bind": "^1.0.2", "call-bind": "^1.0.2",
package.json
+5 -2
View File
@@ -8,18 +8,21 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"assert": "^2.0.0",
"chart.js": "^4.2.1", "chart.js": "^4.2.1",
"chartjs-plugin-annotation": "^2.2.1", "chartjs-plugin-annotation": "^2.2.1",
"chartjs-plugin-datalabels": "^2.2.0", "chartjs-plugin-datalabels": "^2.2.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"pinia": "^2.0.35",
"vue": "^3.2.13", "vue": "^3.2.13",
"vue-chartjs": "^5.2.0", "vue-chartjs": "^5.2.0",
"vue-class-component": "^8.0.0-0", "vue-class-component": "^8.0.0-0",
"vue-multiselect": "^3.0.0-beta.1", "vue-multiselect": "^3.0.0-beta.1",
"vue-router": "^4.0.3", "vue-router": "^4.0.3"
"vuex": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/assert": "^1.5.6",
"@types/node": "^18.16.0",
"@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0", "@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",
src/App.vue
+14
View File
@@ -15,6 +15,20 @@
<router-view /> <router-view />
</template> </template>
<script lang="ts">
import { Player, Weapon, Server, useKillStore } from '@/stores/kill'
import { defineComponent } from 'vue'
export default defineComponent({
setup (props, ctx) {
const store = useKillStore()
store.fetchPlayers({})
store.fetchServers({})
store.fetchWeapons({})
}
})
</script>
<style> <style>
:root { :root {
--bg-color: #282a36; --bg-color: #282a36;
src/components/PlayerChart.vue
+66 -59
View File
@@ -1,5 +1,6 @@
<template> <template>
<div class="playerChart" ref="container"> <div class="playerChart" ref="container">
<!-- <Scatter :data="chart" :options="chartOptions" /> -->
<Scatter :data="chart" :options="chartOptions" /> <Scatter :data="chart" :options="chartOptions" />
</div> </div>
</template> </template>
@@ -11,24 +12,34 @@ import {
PointElement, PointElement,
LineElement, LineElement,
Tooltip, Tooltip,
Legend Legend,
CoreChartOptions,
PluginChartOptions,
ScaleChartOptions
} from 'chart.js' } from 'chart.js'
import annotationPlugin from 'chartjs-plugin-annotation' import annotationPlugin from 'chartjs-plugin-annotation'
import dataLabel from 'chartjs-plugin-datalabels' import dataLabel from 'chartjs-plugin-datalabels'
import { Store, useStore } from 'vuex' import { useKillStore, Player, Filters } from '@/stores/kill'
import { Player, Weapon } from '@/store/index'
import { Scatter } from 'vue-chartjs' import { Scatter } from 'vue-chartjs'
import { defineComponent } from 'vue' import { defineComponent, PropType } from 'vue'
import { ChartEvent } from 'chart.js/dist/core/core.plugins'
import { _DeepPartialObject } from 'chart.js/dist/types/utils'
ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend, annotationPlugin, dataLabel) ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend, annotationPlugin, dataLabel)
export default defineComponent({ export default defineComponent({
name: 'PlayerChart', name: 'PlayerChart',
props: { props: {
filters: Object, filters: Object as PropType<Filters>,
playerHighlighted: String playerHighlighted: String
}, },
data: () => {
return {
store: useKillStore(),
refreshColors: 0
}
},
emits: ['highlightPlayer'], emits: ['highlightPlayer'],
components: { components: {
Scatter Scatter
@@ -54,7 +65,7 @@ export default defineComponent({
return colors return colors
}, },
chart () { chart () {
const chartData = { return {
datasets: [ datasets: [
{ {
label: 'Players', label: 'Players',
@@ -62,29 +73,33 @@ export default defineComponent({
borderColor: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? this.colors.orange : this.colors.cyan, borderColor: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? this.colors.orange : this.colors.cyan,
backgroundColor: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? this.colors.orange : this.colors.cyan, backgroundColor: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? this.colors.orange : this.colors.cyan,
pointRadius: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? 20 : 1, pointRadius: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? 20 : 1,
pointStyle: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? 'crossRot' : 'dot', pointStyle: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? 'crossRot' : 'circle',
hoverRadius: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? 30 : 4, hoverRadius: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? 30 : 4,
data: [] as { x: number, y: number }[] data: this.playerIdList.map((id) => ({ y: this.players[id].kills, x: this.players[id].deaths }))
} }
] ]
} }
if (!this.players) {
return chartData
}
chartData.datasets[0].data = this.playerIdList.map(e => {
if (!this.players) {
return { x: 0, y: 0 }
}
return { x: this.players[e].deaths, y: this.players[e].kills }
})
return chartData
}, },
chartOptions () { chartOptions (): _DeepPartialObject<CoreChartOptions<'scatter'> & PluginChartOptions<'scatter'> & ScaleChartOptions<'scatter'>> {
// eslint-disable-next-line no-unused-expressions // eslint-disable-next-line no-unused-expressions
this.$props.playerHighlighted this.$props.playerHighlighted
const options = { let endX = 0
let endY = 0
if (this.players) {
const maxX = Math.max(...Object.values(this.players).map(e => e.deaths))
const maxY = Math.max(...Object.values(this.players).map(e => e.kills))
if (maxY > maxX) {
endX = maxX
endY = (maxX / maxY) * maxY
} else {
endY = maxY
endX = (maxY / maxX) * maxX
}
}
return {
responsive: true, responsive: true,
maintainAspectRatio: true, maintainAspectRatio: false,
animation: { duration: 500 }, animation: { duration: 500 },
layout: { autoPadding: false }, layout: { autoPadding: false },
scales: { scales: {
@@ -124,7 +139,20 @@ export default defineComponent({
} }
} }
}, },
annotation: {}, annotation: {
annotations: {
line: {
type: 'line',
yMin: 0,
xMin: 0,
yMax: endY,
xMax: endX,
borderWidth: 2,
borderColor: this.colors.orange,
borderDash: [1, 5]
}
}
},
legend: { display: false }, legend: { display: false },
datalabels: { datalabels: {
formatter: (value: any, context: any) => { formatter: (value: any, context: any) => {
@@ -135,13 +163,13 @@ export default defineComponent({
borderWidth: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.dataIndex]) ? 1 : 0, borderWidth: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.dataIndex]) ? 1 : 0,
borderRadius: 5, borderRadius: 5,
display: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.dataIndex]) ? 'true' : 'auto', display: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.dataIndex]) ? 'true' : 'auto',
align: '-45', align: -45,
anchor: 'end', anchor: 'end',
clamp: true, clamp: true,
color: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.dataIndex]) ? this.colors.bg : this.colors.fg color: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.dataIndex]) ? this.colors.bg : this.colors.fg
} }
}, },
onClick: (e: Event, element: any) => { onClick: (e: ChartEvent, element: any) => {
this.$emit('highlightPlayer', element.length > 0 ? this.playerIdList[element[0].index] : undefined) this.$emit('highlightPlayer', element.length > 0 ? this.playerIdList[element[0].index] : undefined)
}, },
onHover: (e: any, element: any) => { onHover: (e: any, element: any) => {
@@ -149,44 +177,23 @@ export default defineComponent({
(e.native.target as HTMLElement).style.cursor = element[0] ? 'pointer' : 'default' (e.native.target as HTMLElement).style.cursor = element[0] ? 'pointer' : 'default'
} }
} }
if (!this.players) {
return options
}
const maxX = Math.max(...Object.values(this.players).map(e => e.deaths))
const maxY = Math.max(...Object.values(this.players).map(e => e.kills))
let endX, endY
if (maxY > maxX) {
endX = maxX
endY = (maxX / maxY) * maxY
} else {
endY = maxY
endX = (maxY / maxX) * maxX
}
options.plugins.annotation = {
annotations: {
line: {
type: 'line',
yMin: 0,
xMin: 0,
yMax: endY,
xMax: endX,
borderWidth: 2,
borderColor: this.colors.orange,
borderDash: [1, 5]
}
}
}
return options
}, },
players (): { [key: string]: Player } { return this.store.getters.getPlayerList(this.filters) || {} }, players (): { [key: string]: Player } {
const data = this.store.getPlayerList(this.filters || {})?.data
if (!data) return {}
const cut = Object.entries(data).sort((a, b) => {
if (a[1].kills < b[1].kills) {
return 1
}
if (a[1].kills > b[1].kills) {
return -1
}
return 0
}).slice(0, 200)
return Object.fromEntries(cut)
},
playerIdList (): string[] { return Object.keys(this.players) } playerIdList (): string[] { return Object.keys(this.players) }
},
data () {
return {
store: useStore(),
refreshColors: 0
}
} }
}) })
</script> </script>
src/components/PlayerList.vue
+25 -18
View File
@@ -7,10 +7,10 @@
<span v-on:click="sortPlayerList('kills')" :class="sortingData.argument == 'kills' ? 'selected' : ''">K</span> <span v-on:click="sortPlayerList('kills')" :class="sortingData.argument == 'kills' ? 'selected' : ''">K</span>
<span v-on:click="sortPlayerList('deaths')" :class="sortingData.argument == 'deaths' ? 'selected' : ''">D</span> <span v-on:click="sortPlayerList('deaths')" :class="sortingData.argument == 'deaths' ? 'selected' : ''">D</span>
<span v-on:click="sortPlayerList('k/d')" :class="sortingData.argument == 'k/d' ? 'selected' : ''">K/D</span> <span v-on:click="sortPlayerList('k/d')" :class="sortingData.argument == 'k/d' ? 'selected' : ''">K/D</span>
<span v-on:click="sortPlayerList('max_kill_distance')" <span v-on:click="sortPlayerList('max_distance')"
:class="sortingData.argument == 'max_kill_distance' ? 'selected' : ''">max distance</span> :class="sortingData.argument == 'max_distance' ? 'selected' : ''">max distance</span>
<span v-on:click="sortPlayerList('avg_kill_distance')" <span v-on:click="sortPlayerList('avg_distance')"
:class="sortingData.argument == 'avg_kill_distance' ? 'selected' : ''">average distance</span> :class="sortingData.argument == 'avg_distance' ? 'selected' : ''">average distance</span>
</div> </div>
<div :class="'playerRow ' + (playerId === $props.playerHighlighted ? 'selected' : '')" <div :class="'playerRow ' + (playerId === $props.playerHighlighted ? 'selected' : '')"
v-for="(playerId, index) in playerIdList" v-bind:key="playerId" v-on:click="$emit('highlightPlayer', playerId)" v-for="(playerId, index) in playerIdList" v-bind:key="playerId" v-on:click="$emit('highlightPlayer', playerId)"
@@ -20,32 +20,34 @@
<div><span>{{ players[playerId].kills }}</span></div> <div><span>{{ players[playerId].kills }}</span></div>
<div><span>{{ players[playerId].deaths }}</span></div> <div><span>{{ players[playerId].deaths }}</span></div>
<div><span>{{ Math.round(players[playerId].kills / Math.max(1, players[playerId].deaths) * 100) / 100 }}</span></div> <div><span>{{ Math.round(players[playerId].kills / Math.max(1, players[playerId].deaths) * 100) / 100 }}</span></div>
<div><span>{{ players[playerId].max_kill_distance }}</span></div> <div><span>{{ players[playerId].max_distance }}</span></div>
<div><span>{{ Math.round(players[playerId].avg_kill_distance * 100) / 100 }}</span></div> <div><span>{{ Math.round(((players[playerId].total_distance / players[playerId].kills) || 0) * 100) / 100 }}</span></div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import { defineComponent, PropType } from 'vue'
import { Player } from '@/store/index' import { useKillStore, Player, Filters } from '@/stores/kill'
import { useStore } from 'vuex'
export default defineComponent({ export default defineComponent({
props: { props: {
filters: Object, filters: { type: Object as PropType<Filters>, default: () => ({}) },
playerHighlighted: String playerHighlighted: String
}, },
emits: ['highlightPlayer'], emits: ['highlightPlayer'],
data () { data () {
return { return {
sortingData: { direction: -1, argument: 'kills' as keyof Player | 'k/d' }, sortingData: { direction: -1, argument: 'kills' as keyof Player | 'k/d' | 'avg_distance' },
playerIdList: [] as string[], playerIdList: [] as string[],
store: useStore() store: useKillStore()
} }
}, },
computed: { computed: {
players (): { [key: string]: Player } { return this.store.getters.getPlayerList(this.filters) } players (): { [key: string]: Player } {
const { player: _, ...withoutPlayer } = this.filters
return this.store.getPlayerList(withoutPlayer)?.data || {}
}
}, },
watch: { watch: {
players: { players: {
@@ -55,12 +57,13 @@ export default defineComponent({
this.sortingData.direction *= -1 this.sortingData.direction *= -1
this.playerIdList = Object.keys(newval) this.playerIdList = Object.keys(newval)
this.sortPlayerList(this.sortingData.argument) this.sortPlayerList(this.sortingData.argument)
this.playerIdList = this.playerIdList.slice(0, 500)
}, },
immediate: true immediate: true
}, },
playerHighlighted (newval) { playerHighlighted (newval) {
const newElement = this.$refs['player:' + newval] as HTMLElement[] const newElement = this.$refs['player:' + newval] as HTMLElement[]
newElement[0].scrollIntoView({ behavior: 'smooth', block: 'center' }) if (newElement && newElement[0]) { newElement[0].scrollIntoView({ behavior: 'smooth', block: 'center' }) }
} }
}, },
updated () { updated () {
@@ -69,7 +72,7 @@ export default defineComponent({
element[0].scrollIntoView({ behavior: 'smooth', block: 'center' }) element[0].scrollIntoView({ behavior: 'smooth', block: 'center' })
}, },
methods: { methods: {
sortPlayerList (arg: ((keyof Player) | 'k/d')) { sortPlayerList (arg: ((keyof Player) | 'k/d' | 'avg_distance')) {
if (arg === this.sortingData.argument) { if (arg === this.sortingData.argument) {
this.sortingData.direction *= -1 this.sortingData.direction *= -1
} else { } else {
@@ -87,11 +90,14 @@ export default defineComponent({
if (arg === 'k/d') { if (arg === 'k/d') {
varA = this.players[a].kills / Math.max(1, this.players[a].deaths) varA = this.players[a].kills / Math.max(1, this.players[a].deaths)
varB = this.players[b].kills / Math.max(1, this.players[b].deaths) varB = this.players[b].kills / Math.max(1, this.players[b].deaths)
} else if (arg === 'avg_distance') {
varA = (this.players[a].total_distance / this.players[a].kills) || 0
varB = (this.players[b].total_distance / this.players[b].kills) || 0
} else { } else {
varA = this.players[a][arg] varA = this.players[a][arg]
varB = this.players[b][arg] varB = this.players[b][arg]
} }
if (varA === undefined || varB === undefined) return 0
if (varA < varB) { if (varA < varB) {
return -1 * this.sortingData.direction return -1 * this.sortingData.direction
} }
@@ -136,13 +142,14 @@ export default defineComponent({
margin-right: 1rem; margin-right: 1rem;
overflow: auto; overflow: auto;
height: 100%; height: 100%;
user-select: none;
} }
.playerRow, .playerRow,
.playerHeaders { .playerHeaders {
box-sizing: border-box; box-sizing: border-box;
display: grid; display: grid;
grid-template-columns: 4ch 20ch 6ch 6ch 6ch 10ch 1fr; grid-template-columns: 5ch 20ch 6ch 6ch 6ch 10ch 1fr;
background: var(--bg-color); background: var(--bg-color);
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
@@ -201,7 +208,7 @@ export default defineComponent({
.playerRow, .playerRow,
.playerHeaders { .playerHeaders {
grid-template-columns: 4ch 20ch 6ch 6ch 1fr; grid-template-columns: 5ch 20ch 6ch 6ch 1fr;
} }
} }
src/components/WeaponChart.vue
+38 -33
View File
@@ -5,28 +5,18 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
Chart as ChartJS,
ArcElement,
PointElement,
LineElement,
Tooltip,
Legend
} from 'chart.js'
import annotationPlugin from 'chartjs-plugin-annotation'
import dataLabel from 'chartjs-plugin-datalabels' import dataLabel from 'chartjs-plugin-datalabels'
import { Store, useStore } from 'vuex' import { Weapon, Filters, useKillStore } from '@/stores/kill'
import { Player, Weapon } from '@/store/index'
import { Doughnut } from 'vue-chartjs' import { Doughnut } from 'vue-chartjs'
import { defineComponent } from 'vue' import { defineComponent, PropType } from 'vue'
import { functionExpression } from '@babel/types'
ChartJS.register(ArcElement, Tooltip, Legend, dataLabel) ChartJS.register(ArcElement, Tooltip, Legend, dataLabel)
export default defineComponent({ export default defineComponent({
name: 'PlayerChart', name: 'PlayerChart',
props: { props: {
filters: Object, filters: Object as PropType<Filters>,
playerHighlighted: String playerHighlighted: String
}, },
emits: ['highlightPlayer'], emits: ['highlightPlayer'],
@@ -36,6 +26,12 @@ export default defineComponent({
mounted () { mounted () {
this.refreshColors++ this.refreshColors++
}, },
data: () => {
return {
store: useKillStore(),
refreshColors: 0
}
},
computed: { computed: {
colors () { colors () {
// eslint-disable-next-line no-unused-expressions // eslint-disable-next-line no-unused-expressions
@@ -59,14 +55,26 @@ export default defineComponent({
return colors return colors
}, },
chart () { chart () {
const colors = ['cyan', 'green', 'orange', 'pink', 'purple', 'red', 'yellow'] const colors = [
'cyan',
'green',
'orange',
'pink',
'purple',
'red',
'yellow'
]
const chartData = { const chartData = {
datasets: [ datasets: [
{ {
label: 'Weapons', label: 'Weapons',
labels: this.sortedWeaponList || [] as string[], labels: this.sortedWeaponList || ([] as string[]),
borderColor: (context: any) => this.colors.fg, borderColor: () => this.colors.fg,
backgroundColor: (context: any) => { return this.colors[colors[(context.dataIndex * 3) % colors.length]] }, backgroundColor: (context: any) => {
return this.colors[
colors[(context.dataIndex * 3) % colors.length]
]
},
data: [] as number[] data: [] as number[]
} }
] ]
@@ -74,7 +82,7 @@ export default defineComponent({
if (!this.sortedWeaponList) { if (!this.sortedWeaponList) {
return chartData return chartData
} }
chartData.datasets[0].data = this.sortedWeaponList.map(e => { chartData.datasets[0].data = this.sortedWeaponList.map((e) => {
if (!this.weapons) { if (!this.weapons) {
return 0 return 0
} }
@@ -103,10 +111,9 @@ export default defineComponent({
borderWidth: 2, borderWidth: 2,
color: this.colors.bg, color: this.colors.bg,
display: (context: any) => { display: (context: any) => {
return context.dataIndex === context.dataset.labels.length - 1 ? true : 'auto' return context.dataIndex === context.dataset.labels.length - 1
}, ? true
font: { : 'auto'
weight: 'bold'
}, },
padding: 6 padding: 6
}, },
@@ -124,13 +131,18 @@ export default defineComponent({
} }
} }
} }
} }
} }
return options return options
}, },
weapons (): { [key: string]: Weapon } { weapons (): { [key: string]: Weapon } {
return this.store.getters.getWeaponList(this.filters) const { weapon: _, ...withoutWeapon } = this.filters || {}
const data = this.store.getWeaponList(withoutWeapon)?.data
if (!data) {
this.store.fetchWeapons(withoutWeapon)
return {}
}
return data
}, },
sortedWeaponList (): string[] { sortedWeaponList (): string[] {
if (!this.weapons) return [] if (!this.weapons) return []
@@ -146,13 +158,6 @@ export default defineComponent({
}) })
return weapons return weapons
} }
},
data () {
return {
store: useStore(),
refreshColors: 0
}
} }
}) })
</script> </script>
@@ -165,7 +170,7 @@ export default defineComponent({
@media only screen and (max-width: 922px) { @media only screen and (max-width: 922px) {
canvas { canvas {
display: none !important display: none !important;
} }
} }
</style> </style>
src/main.ts
+3 -5
View File
@@ -1,10 +1,8 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import { createPinia } from 'pinia'
createApp(App).use(store).use(router).mount('#app') const pinia = createPinia()
store.dispatch('fetchServers', {}) createApp(App).use(pinia).use(router).mount('#app')
store.dispatch('fetchPlayers', {})
store.dispatch('fetchWeapons', {})
src/store/index.ts
-110
View File
@@ -1,110 +0,0 @@
// store.ts
import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'
export interface Player {
deaths: number;
username: string;
// eslint-disable-next-line camelcase
max_kill_distance: number;
// eslint-disable-next-line camelcase
avg_kill_distance: number;
kills: number;
}
export interface Weapon {
id?:string,
// eslint-disable-next-line camelcase
max_kill_distance: number;
// eslint-disable-next-line camelcase
avg_kill_distance: number;
kills: number;
}
export interface Server{
name:string;
id:number;
description:string
}
// define your typings for the store state
export interface State {
servers: Server[]
players: { [key: string]: { [key: string]: Player } };
weapons: { [key: string]:{ [key: string]: Weapon }};
}
// define injection key
// eslint-disable-next-line symbol-description
export const key: InjectionKey<Store<State>> = Symbol()
export default createStore<State>({
state: {
servers: [],
players: {},
weapons: {}
},
getters: {
getPlayerList: (state) => ({ server, weapon, minKills, minDeaths }: { server?: number, weapon?: string, minKills:number, minDeaths:number }) => {
let playerFilter: string[] = []
if (state.players['']) {
playerFilter = Object.entries(state.players['']).filter(([, value]:any) => { return (value.kills >= minKills) || (value.deaths >= minDeaths) }).map(e => e[0])
}
if (playerFilter.length > 0 && state.players[(server || '') + (weapon || '')]) {
return Object.fromEntries(Object.entries(state.players[(server || '') + (weapon || '')]).filter(([key]) => playerFilter.includes(key)))
}
return state.players[(server || '') + (weapon || '')]
},
getWeaponList: (state) => ({ server, player }: { server?: number, player?: string }) => {
return state.weapons[(server || '') + (player || '')]
}
},
mutations: {
setPlayers (state, data: { data: { [key: string]: Player }, filters: { weapon: string, server: number } }) {
state.players[(data.filters.server || '') + (data.filters.weapon || '')] = data.data
},
setWeapons (state, data:{data: {[key:string]:Weapon}, filters:{server:string, player:string}}) {
state.weapons[(data.filters.server || '') + (data.filters.player || '')] = data.data
},
setServers (state, data) {
state.servers = data
}
},
actions: {
async fetchPlayers (context, { weapon, server }) {
const searchParams: Record<string, string> = {}
if (weapon?.toString()) { searchParams.weapon = weapon }
if (server?.toString()) { searchParams.server = server }
const response = await fetch(
'https://tone.sleepycat.date/v1/client/players?' + new URLSearchParams(searchParams)
)
const data = await response.json()
Object.keys(data).forEach(e => {
data[e].kills = Number(data[e].kills)
data[e].deaths = Number(data[e].deaths)
data[e].max_kill_distance = Number(data[e].max_kill_distance)
data[e].avg_kill_distance = Number(data[e].avg_kill_distance)
})
context.commit('setPlayers', { data, filters: { weapon, server } })
},
async fetchWeapons (context, { player, server }) {
const searchParams: Record<string, string> = {}
if (player?.toString()) { searchParams.player = player }
if (server?.toString()) { searchParams.server = server }
const response = await fetch(
'https://tone.sleepycat.date/v1/client/weapons?' + new URLSearchParams(searchParams)
)
const data = await response.json()
context.commit('setWeapons', { data, filters: { player, server } })
},
async fetchServers (context) {
const response = await fetch(
'https://tone.sleepycat.date/v1/client/servers'
)
const data = await response.json()
context.commit('setServers', data)
}
},
modules: {}
})
src/stores/kill.ts
+113
View File
@@ -0,0 +1,113 @@
import { defineStore } from 'pinia'
import * as assert from 'assert'
function removeNullEntries (a:any) {
return Object.fromEntries(Object.entries(a).filter(e => e[1] !== undefined && e[1] !== null))
}
function objectEqual (a:any, b:any) {
try {
a = removeNullEntries(a)
b = removeNullEntries(b)
assert.deepStrictEqual(a, b)
return true
} catch {
return false
}
}
export interface Filters {
server?: string;
player?: string;
weapon?: string;
host?: string;
map?: string;
gamemode?: string;
}
export interface Kill {
deaths: number;
kills: number;
// eslint-disable-next-line camelcase
max_distance: number;
// eslint-disable-next-line camelcase
total_distance: number;
}
export interface KillData<T extends Kill> {
filter: Filters;
data: { [key: string]: T };
}
export interface Player extends Kill {
username: string;
// eslint-disable-next-line camelcase
deaths_while_equipped?: number;
}
export interface Weapon extends Kill {
// eslint-disable-next-line camelcase
deaths_while_equipped: number;
}
export interface Server extends Kill {
host: number;
}
// define your typings for the store state
export interface State {
servers: KillData<Server>[];
players: KillData<Player>[];
weapons: KillData<Weapon>[];
maps: KillData<Kill>[];
gamemodes: KillData<Kill>[];
hosts: { [key: number]: string };
}
export const useKillStore = defineStore('kill', {
state: (): State => ({
servers: [],
players: [],
weapons: [],
maps: [],
gamemodes: [],
hosts: {}
}),
getters: {
getPlayerList: (state) => (filters: Filters) => state.players.find((e) => objectEqual(e.filter, filters)),
getWeaponList: (state) => (filters: Filters) => state.weapons.find((e) => objectEqual(e.filter, filters)),
getServerList: (state) => (filters: Filters) => state.servers.find((e) => objectEqual(e.filter, filters))
},
actions: {
async fetchPlayers (filter: Filters) {
filter = removeNullEntries(filter)
const response = await fetch(
'https://tone.sleepycat.date/v2_test/client/players?' +
new URLSearchParams(filter as Record<keyof Filters, string>)
)
const data = await response.json()
const entry = this.players.find((e) => objectEqual(e.filter, filter))
if (!entry) return this.players.push({ filter, data })
entry.data = data
},
async fetchWeapons (filter: Filters) {
filter = removeNullEntries(filter)
const response = await fetch(
'https://tone.sleepycat.date/v2_test/client/weapons?' +
new URLSearchParams(filter as Record<keyof Filters, string>)
)
const data = await response.json()
const entry = this.weapons.find((e) => objectEqual(e.filter, filter))
if (!entry) return this.weapons.push({ filter, data })
entry.data = data
},
async fetchServers (filter: Filters) {
filter = removeNullEntries(filter)
const response = await fetch(
'https://tone.sleepycat.date/v2_test/client/servers?' +
new URLSearchParams(filter as Record<keyof Filters, string>)
)
const data = await response.json()
const entry = this.servers.find((e) => objectEqual(e.filter, filter))
if (!entry) return this.servers.push({ filter, data })
entry.data = data
}
}
})
src/views/PlayerView.vue
+44 -42
View File
@@ -12,16 +12,16 @@
<option v-for="weaponId in sortedWeaponList" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option> <option v-for="weaponId in sortedWeaponList" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option>
</select> --> </select> -->
<VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select server" v-model="models.server" <VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select server" v-model="filters.server"
:options="servers" :allow-empty="true" :custom-label="((e) => e.name)" @select="changeFilter({ server: $event.id })" :options="sortedServerList" :allow-empty="true" :custom-label="((e:Server) => e)"
@remove="changeFilter({ server: '' })"></VueMultiselect> ></VueMultiselect>
<VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select weapon" v-model="models.weapon" <VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select weapon" v-model="filters.weapon"
:options="sortedWeaponList" :allow-empty="true" @select="changeFilter({ weapon: $event })" :options="sortedWeaponList" :allow-empty="true"
@remove="changeFilter({ weapon: '' })"></VueMultiselect> ></VueMultiselect>
<VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Search player" v-model="playerHighlighted" <VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Search player" v-model="playerHighlighted"
:options="sortedPlayerList" :allow-empty="true" :custom-label="((e) => players[e]?.username)"></VueMultiselect> :options="sortedPlayerList" :allow-empty="true" :custom-label="((e:string) => players[e]?.username)"></VueMultiselect>
</div> </div>
<div id="playerView"> <div id="playerView">
@@ -34,8 +34,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Store, useStore } from 'vuex' import { Player, Weapon, Server, useKillStore, Filters } from '@/stores/kill'
import { Player, Weapon, Server } from '@/store/index'
import PlayerList from '@/components/PlayerList.vue' import PlayerList from '@/components/PlayerList.vue'
import PlayerChart from '@/components/PlayerChart.vue' import PlayerChart from '@/components/PlayerChart.vue'
import WeaponChart from '@/components/WeaponChart.vue' import WeaponChart from '@/components/WeaponChart.vue'
@@ -46,26 +45,54 @@ import 'vue-multiselect/dist/vue-multiselect.css'
export default defineComponent({ export default defineComponent({
name: 'PlayerView', name: 'PlayerView',
components: { components: {
PlayerList, PlayerChart, VueMultiselect, WeaponChart VueMultiselect, PlayerList, PlayerChart, WeaponChart
}, },
data () { data () {
return { return {
models: {}, filters: {} as Filters,
filters: { minKills: 100, minDeaths: 100 }, store: useKillStore(),
store: useStore(),
playerHighlighted: undefined playerHighlighted: undefined
} as { filters: { weapon?: string, server?: string }, store: Store<any>, playerHighlighted?: string } }
}, },
computed: { computed: {
servers (): Server[] { return this.store.state.servers }, servers (): { [key: string]: Server } {
weapons (): { [key: string]: Weapon } { return this.store.getters.getWeaponList(this.filters) }, const { server: _, player: _1, ...withoutServer } = this.filters
const data = this.store.getServerList(withoutServer)?.data
if (!data) {
this.store.fetchServers(withoutServer)
return {}
}
return data
},
weapons (): { [key: string]: Weapon } {
const { weapon: _, player: _1, ...withoutWeapons } = this.filters
const data = this.store.getWeaponList(withoutWeapons)?.data
if (!data) {
this.store.fetchWeapons(withoutWeapons)
return {}
}
return data
},
players (): { [key: string]: Player } {
const { player: _, ...withoutPlayers } = this.filters
const data = this.store.getPlayerList(withoutPlayers)?.data
if (!data) {
this.store.fetchPlayers(withoutPlayers)
return {}
}
return data
},
sortedWeaponList (): string[] { sortedWeaponList (): string[] {
if (!this.weapons) return [] if (!this.weapons) return []
const weapons = Object.keys(this.weapons) const weapons = Object.keys(this.weapons)
return weapons.sort() return weapons.sort()
}, },
players (): { [key: string]: Player } { return this.store.getters.getPlayerList(this.filters) }, sortedServerList ():string[] {
if (!this.servers) return []
const servers = Object.keys(this.servers)
return servers.sort()
},
sortedPlayerList (): string[] { sortedPlayerList (): string[] {
if (!this.players) return [] if (!this.players) return []
const players = Object.keys(this.players) const players = Object.keys(this.players)
@@ -73,7 +100,6 @@ export default defineComponent({
if (!this.players) { if (!this.players) {
return 0 return 0
} }
if (this.players[a].username < this.players[b].username) { if (this.players[a].username < this.players[b].username) {
return -1 return -1
} }
@@ -83,30 +109,6 @@ export default defineComponent({
return 0 return 0
}) })
} }
},
watch: {
playerHighlighted: function (newval:string) {
this.fetchPlayerData({ player: newval, ...this.filters })
}
},
methods: {
async fetchPlayerData ({ player, server }: { player?: string, server?:string }) {
if (!this.store.getters.getWeaponList({ player, server })) return await this.store.dispatch('fetchWeapons', { player, server })
},
async changeFilter ({ weapon, server }: { weapon?: string, server?: string }) {
const filters = JSON.parse(JSON.stringify(this.filters))
if (weapon !== undefined) filters.weapon = weapon
if (server !== undefined) filters.server = server
if (weapon === '') delete filters.weapon
if (server === '') delete filters.server
const promises = []
if (!this.store.getters.getPlayerList(filters)) promises.push(this.store.dispatch('fetchPlayers', filters))
if (!this.store.getters.getWeaponList(filters)) promises.push(this.store.dispatch('fetchWeapons', filters))
promises.push(this.fetchPlayerData({ player: this.playerHighlighted, ...filters }))
await Promise.all(promises)
// Delay the update of filters propery after we fetch the data to the API as changing it will cause subcomponents to reload before data is fetched
this.filters = filters
}
} }
}) })
</script> </script>
tsconfig.json
-3
View File
@@ -34,8 +34,5 @@
"src/**/*.vue", "src/**/*.vue",
"tests/**/*.ts", "tests/**/*.ts",
"tests/**/*.tsx" "tests/**/*.tsx"
],
"exclude": [
"node_modules"
] ]
} }