CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

more refactoring ✨

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-13 21:10:40 +02:00
parent 93d0cdbdc4
commit f536a0527f
8 changed files with 158 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/DamageChart.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="player-dmg">
<div v-if="props.stats" class="player-dmg">
<h4 class="text-center mt-3 mb-3">Team 1</h4>
<div id="dmg-chart-1"></div>
<hr>
@@ -14,6 +14,7 @@ import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/componen
import {BarChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue";
import {checkStatEmpty, getPlayerArr} from "../utils";
export default {
name: "FlashChart",
@@ -24,68 +25,18 @@ export default {
}
},
setup(props) {
const checkStatEmpty = (stat) => {
if (stat)
return stat
}
const truncate = (str, len, ending) => {
if (len == null)
len = 100
if (ending == null)
ending = '..'
if (str.length > len)
return str.substring(0, len - ending.length) + ending
else
return str
}
const playerArr = (stats, team) => {
let arr = []
if (team === 1) {
for (let i = 0; i < 5; i++) {
arr.push({
value: truncate(stats[i].player.name, 10),
textStyle: {
color: 'white'
}
})
}
} else {
for (let i = 5; i < stats.length; i++) {
arr.push({
value: truncate(stats[i].player.name, 10),
textStyle: {
color: 'white'
}
})
}
}
arr.reverse()
return arr
}
const teamArr = (stats, team) => {
let arr = []
if (team === 1) {
for (let i = 0; i < 5; i++) {
for (let i = (team - 1) * 5; i < team * 5; i++) {
arr.push(-checkStatEmpty(stats[i].dmg.team))
}
} else {
for (let i = 5; i < stats.length; i++) {
arr.push(-checkStatEmpty(stats[i].dmg.team))
}
}
arr.reverse()
return arr
}
const enemyArr = (stats, team) => {
let arr = []
if (team === 1) {
for (let i = 0; i < 5; i++) {
for (let i = (team - 1) * 5; i < team * 5; i++) {
arr.push({
value: checkStatEmpty(stats[i].dmg.enemy),
itemStyle: {
@@ -93,16 +44,6 @@ export default {
}
})
}
} else {
for (let i = 5; i < stats.length; i++) {
arr.push({
value: checkStatEmpty(stats[i].dmg.enemy),
itemStyle: {
color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
}
})
}
}
arr.reverse()
return arr
}
@@ -116,10 +57,7 @@ export default {
}
},
legend: {
textStyle: {
color: 'white'
},
data: ['Enemy', 'Team']
show: false
},
grid: {
left: '3%',
@@ -138,7 +76,7 @@ export default {
axisTick: {
show: false
},
data: playerArr(stats, team)
data: getPlayerArr(stats, team)
}
],
series: [
@@ -173,6 +111,7 @@ export default {
}
onMounted(() => {
if (props.stats) {
echarts.use([
TooltipComponent,
GridComponent,
@@ -188,6 +127,7 @@ export default {
myChart1.setOption(option1);
myChart2.setOption(option2);
}
})
return {props}
@@ -199,34 +139,11 @@ export default {
.player-dmg {
flex-direction: column;
align-items: center;
.heading {
display: flex;
margin-top: 10px;
margin-bottom: -30px;
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 20px;
color: #ff4343;
}
h4 {
margin-top: 7px;
}
}
p {
padding-top: 40px;
margin-bottom: -20px;
}
}
@for $i from 0 through 9 {
#dmg-chart-#{$i} {
margin: 0;
margin: -50px 0 0 0;
}
}
</style>

252
src/components/FlashChart.vue
View File

@@ -1,188 +1,120 @@
<template>
<div :style="props.total.self || props.total.team || props.total.enemy ? 'display: flex' : 'display: none'"
class="player-flash">
<div class="heading">
<img :src="props.avatar" alt="Player avatar" class="avatar">
<h4>{{ props.name }}</h4>
<h4 class="text-center mt-3">Flash-Duration <small class="text-muted">(in s)</small></h4>
<div v-if="props.stats" class="player-dmg d-xxl-flex">
<div class="team-1 mx-5">
<h4 class="text-center mt-3 mb-3">Team 1</h4>
<div id="flash-chart-1"></div>
</div>
<div class="team-2 mx-5">
<h4 class="text-center mt-3 mb-3">Team 2</h4>
<div id="flash-chart-2"></div>
</div>
<div :id="'flash-chart-' + props.id"></div>
</div>
</template>
<script>
import * as echarts from 'echarts/core';
import {LegendComponent, TooltipComponent} from 'echarts/components';
import {PieChart} from 'echarts/charts';
import {LabelLayout} from 'echarts/features';
import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
import {BarChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue";
import {checkStatEmpty, getPlayerArr} from "../utils";
export default {
name: "FlashChart",
props: {
id: {
type: Number,
default: 0,
required: true
},
avatar: {
type: String,
default: '',
required: true
},
name: {
type: String,
default: '',
required: true
},
total: {
type: Object,
required: true
},
duration: {
stats: {
type: Object,
required: true
},
},
setup(props) {
onMounted(() => {
echarts.use([
TooltipComponent,
LegendComponent,
PieChart,
CanvasRenderer,
LabelLayout
]);
const durationArr = (stats, team, prop) => {
if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
let arr = []
for (let i = (team - 1) * 5; i < team * 5; i++) {
arr.push(checkStatEmpty(Function('return(function(stats, i){ return stats[i].flash.duration.' + prop + '})')()(stats, i)).toFixed(2))
}
arr.reverse()
let myChart = echarts.init(document.getElementById(`flash-chart-${props.id}`), {},{width: 600, height: 400});
let option
return arr
}
}
option = {
const setOptions = (id, color) => {
return {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
shadowBlur: 2,
shadowColor: 'rgba(255, 255, 255, .3)'
}
}
},
legend: {
data: [
{
name: 'Self',
textStyle: {
color: 'white',
color: 'white'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: getPlayerArr(props.stats, id)
},
color: color,
series: [
{
name: 'Enemy',
type: 'bar',
data: durationArr(props.stats, id, 'enemy'),
},
{
name: 'Team',
textStyle: {
color: 'white'
}
type: 'bar',
data: durationArr(props.stats, id, 'team'),
},
{
name: 'Enemy',
textStyle: {
color: 'white'
}
},
]
},
series: [
{
name: 'Flash-Count',
type: 'pie',
radius: [0, '40%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 10,
borderColor: '#000',
borderWidth: 3
},
label: {
position: 'inside',
fontsize: 36,
fontWeight: 'bold'
},
labelLine: {
show: false
},
data: [
{
value: props.total.self ? props.total.self : null,
name: 'Self',
selected: true
},
{
value: props.total.team ? props.total.team : null,
name: 'Team'
},
{
value: props.total.enemy ? props.total.enemy : null,
name: 'Enemy'
}
]
},
{
name: 'Flash-Duration (in s)',
type: 'pie',
radius: ['45%', '65%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 10,
borderColor: '#000',
borderWidth: 3
},
labelLine: {
length: 20
},
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
data: [
{
value: props.duration.self ? props.duration.self.toFixed(2) : null,
name: 'Self'
},
{
value: props.duration.team ? props.duration.team.toFixed(2) : null,
name: 'Team'
},
{
value: props.duration.enemy ? props.duration.enemy.toFixed(2) : null,
name: 'Enemy'
type: 'bar',
data: durationArr(props.stats, id, 'self'),
}
]
}
]
};
}
myChart.setOption(option);
let myChart1, myChart2, option1, option2
onMounted(() => {
if (props.stats) {
const color = ['indianred', '#69b13b', 'cornflowerblue']
echarts.use([
TooltipComponent,
GridComponent,
LegendComponent,
BarChart,
CanvasRenderer
]);
myChart1 = echarts.init(document.getElementById('flash-chart-1'), {}, {width: 600, height: 400});
myChart2 = echarts.init(document.getElementById('flash-chart-2'), {}, {width: 600, height: 400});
option1 = setOptions(1, color)
option2 = setOptions(2, color)
myChart1.setOption(option1);
myChart2.setOption(option2);
}
})
return {props}
@@ -195,27 +127,9 @@ export default {
flex-direction: column;
align-items: center;
.heading {
display: flex;
margin-top: 10px;
margin-bottom: -20px;
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 20px;
}
h4 {
margin-top: 7px;
}
}
}
@for $i from 0 through 9 {
#flash-chart-#{$i} {
margin: 40px 40px -40px 40px;
color: cornflowerblue;
}
}
</style>

5
src/components/MultiKillsChart.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="multi-kills-chart">
<div class="multi-kills-chart" v-if="props.stats">
<h4 class="text-center">Multi-Kills</h4>
<div id="multi-kills-chart"></div>
</div>
@@ -89,7 +89,7 @@ export default {
const optionGen = (player, data) => {
return {
tooltip: {
position: 'top'
position: 'top',
},
grid: {
height: '50%',
@@ -130,7 +130,6 @@ export default {
},
series: [
{
name: 'Mutlki-Kill',
type: 'heatmap',
data: data,
label: {

2
src/components/UtilityChartTotal.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="utility-chart-total">
<div class="utility-chart-total" v-if="props.stats">
<div class="heading">
<h4>Total Utility Damage</h4>
</div>

33
src/utils/Utils.js
View File

@@ -10,6 +10,39 @@ export const GetWinLoss = (matchResult, teamId) => {
}
}
export const truncate = (str, len, ending) => {
if (len == null)
len = 100
if (ending == null)
ending = '..'
if (str.length > len)
return str.substring(0, len - ending.length) + ending
else
return str
}
export const checkStatEmpty = (stat) => {
if (stat)
return stat
return 0
}
export const getPlayerArr = (stats, team) => {
let arr = []
for (let i = (team - 1) * 5; i < team * 5; i++) {
arr.push({
value: truncate(stats[i].player.name, 15),
textStyle: {
color: 'white'
}
})
}
arr.reverse()
return arr
}
export const TrackMe = async (id64, authcode, sharecode) => {
let statusError = ''
let status = 200

4
src/utils/index.js
View File

@@ -4,7 +4,7 @@ import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
import {GetHLTV_1} from "./HLTV";
import {DisplayRank, LoadImage} from "./Display";
import {GetUser} from "./ApiRequests";
import {GetWinLoss, TrackMe} from "./Utils";
import {GetWinLoss, TrackMe, truncate, checkStatEmpty, getPlayerArr} from "./Utils";
export {
FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
@@ -13,5 +13,5 @@ export {
GetHLTV_1,
DisplayRank, LoadImage,
GetUser,
GetWinLoss, TrackMe
GetWinLoss, TrackMe, truncate, checkStatEmpty, getPlayerArr
}

8
src/views/Match.vue
View File

@@ -70,13 +70,7 @@
</div>
<div id="flashes">
<FlashChart v-for="(player, id) in data.stats" :id="id"
:key="player.player.steamid64"
:avatar="player.player.avatar"
:duration="player.flash.duration"
:name="player.player.name"
:total="player.flash.total"
/>
<FlashChart :stats="data.stats" />
</div>
<div id="utility">

2
src/views/Player.vue
View File

@@ -201,7 +201,7 @@
</template>
<script>
import {onMounted, reactive, watch} from "vue";
import {onMounted, reactive} from "vue";
import router from "../router";
import {useStore} from "vuex";
import {