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

simplyfy chart options declaration

Browse Source
This commit is contained in:
legonzaur
2023-03-29 14:54:04 +02:00
parent c383ea08ab
commit 6cd6972dd9
1 changed files with 27 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlayerChart.vue
+13 -33
View File
@@ -58,12 +58,12 @@ export default defineComponent({
datasets: [
{
label: 'Players',
labels: [] as string[],
borderColor: [this.colors.fg],
backgroundColor: [this.colors.fg],
pointRadius: [1],
pointStyle: ['dot'],
hoverRadius: [4],
labels: this.playerIdList || [] as string[],
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,
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',
hoverRadius: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? 30 : 4,
data: [] as { x: number, y: number }[]
}
]
@@ -71,30 +71,17 @@ export default defineComponent({
if (!this.players) {
return chartData
}
chartData.datasets[0].labels = this.playerIdList
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 }
})
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(this.colors.cyan)
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] = 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
},
chartOptions () {
// eslint-disable-next-line no-unused-expressions
this.$props.playerHighlighted
const options = {
responsive: true,
maintainAspectRatio: true,
@@ -143,15 +130,15 @@ export default defineComponent({
formatter: (value: any, context: any) => {
return this.players[this.playerIdList[context.dataIndex]].username
},
backgroundColor: Array(this.playerIdList.length).fill(null),
backgroundColor: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.dataIndex]) ? this.colors.orange : null,
borderColor: this.colors.fg,
borderWidth: Array(this.playerIdList.length).fill(0),
borderWidth: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.dataIndex]) ? 1 : 0,
borderRadius: 5,
display: Array(this.playerIdList.length).fill('auto'),
display: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.dataIndex]) ? 'true' : 'auto',
align: '-45',
anchor: 'end',
clamp: true,
color: Array(this.playerIdList.length).fill(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) => {
@@ -189,14 +176,6 @@ 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] = this.colors.orange
options.plugins.datalabels.borderWidth[index] = 1
options.plugins.datalabels.color[index] = this.colors.bg
}
return options
},
players (): { [key: string]: Player } { return this.store.getters.getPlayerList(this.filters) || {} },
@@ -216,6 +195,7 @@ export default defineComponent({
canvas {
background: var(--accent);
}
@media only screen and (max-width: 922px) {
canvas {
display: none !important