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: [ datasets: [
{ {
label: 'Players', label: 'Players',
labels: [] as string[], labels: this.playerIdList || [] as string[],
borderColor: [this.colors.fg], borderColor: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? this.colors.orange : this.colors.cyan,
backgroundColor: [this.colors.fg], backgroundColor: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? this.colors.orange : this.colors.cyan,
pointRadius: [1], pointRadius: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? 20 : 1,
pointStyle: ['dot'], pointStyle: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? 'crossRot' : 'dot',
hoverRadius: [4], hoverRadius: (context: any) => (this.$props.playerHighlighted && this.$props.playerHighlighted === this.playerIdList[context.index]) ? 30 : 4,
data: [] as { x: number, y: number }[] data: [] as { x: number, y: number }[]
} }
] ]
@@ -71,30 +71,17 @@ export default defineComponent({
if (!this.players) { if (!this.players) {
return chartData return chartData
} }
chartData.datasets[0].labels = this.playerIdList
chartData.datasets[0].data = this.playerIdList.map(e => { chartData.datasets[0].data = this.playerIdList.map(e => {
if (!this.players) { if (!this.players) {
return { x: 0, y: 0 } return { x: 0, y: 0 }
} }
return { x: this.players[e].deaths, y: this.players[e].kills } 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 return chartData
}, },
chartOptions () { chartOptions () {
// eslint-disable-next-line no-unused-expressions
this.$props.playerHighlighted
const options = { const options = {
responsive: true, responsive: true,
maintainAspectRatio: true, maintainAspectRatio: true,
@@ -143,15 +130,15 @@ export default defineComponent({
formatter: (value: any, context: any) => { formatter: (value: any, context: any) => {
return this.players[this.playerIdList[context.dataIndex]].username 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, 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, 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', align: '-45',
anchor: 'end', anchor: 'end',
clamp: true, 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) => { 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 return options
}, },
players (): { [key: string]: Player } { return this.store.getters.getPlayerList(this.filters) || {} }, players (): { [key: string]: Player } { return this.store.getters.getPlayerList(this.filters) || {} },
@@ -216,6 +195,7 @@ export default defineComponent({
canvas { canvas {
background: var(--accent); background: var(--accent);
} }
@media only screen and (max-width: 922px) { @media only screen and (max-width: 922px) {
canvas { canvas {
display: none !important display: none !important