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

fix colors for chart and list

Browse Source
This commit is contained in:
legonzaur
2023-03-28 19:10:55 +02:00
parent 0316761c10
commit 8ade9d79a1
4 changed files with 71 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+4
View File
@@ -75,6 +75,10 @@ nav a.router-link-exact-active {
padding: 24px 32px;
}
.navbar-element:hover{
background: var(--current-line)
}
.spacer {
width: 100%;
}
src/components/PlayerChart.vue
+47 -10
View File
@@ -1,5 +1,5 @@
<template>
<div class="playerChart">
<div class="playerChart" ref="container">
<Scatter :data="chart" :options="chartOptions" />
</div>
</template>
@@ -33,15 +33,32 @@ export default defineComponent({
components: {
Scatter
},
mounted () {
this.refreshColors++
},
computed: {
colors () {
// eslint-disable-next-line no-unused-expressions
this.refreshColors
const colors = {} as {[key:string]:string}
if (this.$refs.container) {
const style = getComputedStyle(this.$refs.container as Element)
colors.fg = style.getPropertyValue('--foreground')
colors.orange = style.getPropertyValue('--orange')
colors.currentLine = style.getPropertyValue('--current-line')
} else {
colors.fg = '#ffffff'
}
return colors
},
chart () {
const chartData = {
datasets: [
{
label: 'Players',
labels: [] as string[],
borderColor: ['#f87979'],
backgroundColor: '#f87979',
borderColor: [this.colors.fg],
backgroundColor: [this.colors.fg],
pointRadius: [1],
pointStyle: ['dot'],
hoverRadius: [4],
@@ -61,13 +78,16 @@ export default defineComponent({
})
chartData.datasets[0].pointRadius = Array(chartData.datasets[0].labels.length).fill(1)
chartData.datasets[0].pointStyle = Array(chartData.datasets[0].labels.length).fill('dot')
chartData.datasets[0].borderColor = Array(chartData.datasets[0].labels.length).fill('darkblue')
chartData.datasets[0].borderColor = Array(chartData.datasets[0].labels.length).fill(this.colors.fg)
chartData.datasets[0].backgroundColor = chartData.datasets[0].borderColor
chartData.datasets[0].hoverRadius = Array(chartData.datasets[0].labels.length).fill(4)
if (this.$props.playerHighlighted) {
const index = this.playerIdList.indexOf(this.$props.playerHighlighted)
chartData.datasets[0].pointRadius[index] = 20
chartData.datasets[0].pointStyle[index] = 'crossRot'
chartData.datasets[0].borderColor[index] = 'red'
chartData.datasets[0].borderColor[index] = this.colors.orange
// No need to do that since arrays are already the same (reference)
// chartData.datasets[0].backgroundColor[index] = chartData.datasets[0].borderColor[index]
chartData.datasets[0].hoverRadius[index] = 30
}
return chartData
@@ -77,6 +97,21 @@ export default defineComponent({
responsive: true,
maintainAspectRatio: true,
animation: { duration: 500 },
layout: { autoPadding: false },
scales: {
y: {
title: {
text: 'Kills',
display: true
}
},
x: {
title: {
text: 'Deaths',
display: true
}
}
},
plugins: {
tooltip: {
callbacks: {
@@ -98,7 +133,7 @@ export default defineComponent({
return this.players[this.playerIdList[context.dataIndex]].username
},
backgroundColor: Array(this.playerIdList.length).fill(null),
borderColor: 'black',
borderColor: this.colors.fg,
borderWidth: Array(this.playerIdList.length).fill(0),
borderRadius: 5,
display: Array(this.playerIdList.length).fill('auto'),
@@ -137,7 +172,7 @@ export default defineComponent({
yMax: endY,
xMax: endX,
borderWidth: 2,
borderColor: 'black',
borderColor: this.colors.orange,
borderDash: [1, 5]
}
}
@@ -146,7 +181,7 @@ export default defineComponent({
if (this.$props.playerHighlighted) {
const index = this.playerIdList.indexOf(this.$props.playerHighlighted)
options.plugins.datalabels.display[index] = true
options.plugins.datalabels.backgroundColor[index] = 'red'
options.plugins.datalabels.backgroundColor[index] = this.colors.orange
options.plugins.datalabels.borderWidth[index] = 1
}
return options
@@ -157,13 +192,15 @@ export default defineComponent({
},
data () {
return {
store: useStore()
store: useStore(),
refreshColors: 0
}
}
})
</script>
<style scoped>
.playerChart {
canvas {
background: var(--accent);
}
</style>
src/components/PlayerList.vue
+14 -9
View File
@@ -1,13 +1,13 @@
<template>
<div class="playerTable" v-on:keydown="selectNextPlayer" tabindex="0">
<div class="playerHeaders">
<span>Index</span>
<span v-on:click="sortPlayerList('username')">username</span>
<span v-on:click="sortPlayerList('kills')">kills</span>
<span v-on:click="sortPlayerList('deaths')">deaths</span>
<span v-on:click="sortPlayerList('k/d')">k/d</span>
<span v-on:click="sortPlayerList('max_kill_distance')">max kill distance</span>
<span v-on:click="sortPlayerList('avg_kill_distance')">average kill distance</span>
<span></span>
<span v-on:click="sortPlayerList('username')" :class="sortingData.argument == 'username' ? 'selected' : ''">username</span>
<span v-on:click="sortPlayerList('kills')" :class="sortingData.argument == 'kills' ? 'selected' : ''">kills</span>
<span v-on:click="sortPlayerList('deaths')" :class="sortingData.argument == 'deaths' ? 'selected' : ''">deaths</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')" :class="sortingData.argument == 'max_kill_distance' ? 'selected' : ''">max kill distance</span>
<span v-on:click="sortPlayerList('avg_kill_distance')" :class="sortingData.argument == 'avg_kill_distance' ? 'selected' : ''">average kill distance</span>
</div>
<div class="playerRow" v-for="(playerId, index) in playerIdList" v-bind:key="playerId"
v-on:click="$emit('highlightPlayer', playerId)" :ref="`player:` + playerId">
@@ -36,7 +36,7 @@ export default defineComponent({
emits: ['highlightPlayer'],
data () {
return {
sortingData: { direction: -1, argument: '' as keyof Player | 'k/d' },
sortingData: { direction: -1, argument: 'kills' as keyof Player | 'k/d' },
playerIdList: [] as string[],
store: useStore(),
selected: undefined as string | undefined
@@ -142,6 +142,7 @@ export default defineComponent({
}
.playerTable {
margin-right: 1rem;
overflow: auto;
height: 100%;
}
@@ -154,7 +155,7 @@ export default defineComponent({
.playerRow,
.playerHeaders {
display: grid;
grid-template-columns: 50px 20ch 6ch 6ch 6ch 10ch 10ch;
grid-template-columns: 4ch 2fr 6ch 6ch 6ch 10ch 1fr;
background: var(--bg-color);
text-align: left;
cursor: pointer;
@@ -182,6 +183,10 @@ export default defineComponent({
border-right: solid var(--bg-color) 2px;
}
.playerHeaders>span:last-child {
width:100%;
}
span {
text-overflow: ellipsis;
overflow: hidden;
src/views/PlayerView.vue
+6 -2
View File
@@ -9,7 +9,7 @@
</select>
<select v-on:change="changeFilter({ weapon: ($event.target as HTMLInputElement).value })">
<option></option>
<option v-for="(weaponData, weaponId) in weapons" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option>
<option v-for="weaponId in sortedWeaponList" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option>
</select>
</div>
@@ -43,7 +43,11 @@ export default defineComponent({
},
computed: {
servers (): Server[] { return this.store.state.servers },
weapons (): { [key: string]: Weapon } { return this.store.getters.getWeaponList(this.filters) }
weapons (): { [key: string]: Weapon } { return this.store.getters.getWeaponList(this.filters) },
sortedWeaponList (): string[] {
const weapons = Object.keys(this.weapons)
return weapons.sort()
}
},
methods: {
async changeFilter ({ weapon, server }: { weapon?: string, server?: string }) {