1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<template>
<div class="plotly" ref="graph"></div>
</template>
<script>
import Vue from 'vue';
import Plotly from 'plotly.js/lib/core';
import ReportService from './ReportService';
import RouterParamMixin from './RouterParamMixin';
import * as maps from './maps/maps';
Plotly.register([
]);
export default Vue.component('win-pick-scatter', {
mixins: [ RouterParamMixin ],
mounted() {
this.refresh();
window.addEventListener('resize', this.resize);
},
watch: {
selectedMode() {
this.refresh();
},
filterLowPickrate() {
this.refresh();
},
},
methods: {
refresh() {
const data = ReportService.getReport(this.selectedMode)
.filter((entry) => !this.filterLowPickrate? !entry.SampleTooSmall : true);
const total = ReportService.getTotalPicks(this.selectedMode);
const dataWithRarity = (rarity) => data.filter((entry) => maps.getTalentRarity(entry.Talent) == rarity);
const traces = maps.RARITIES.map((rarity) => ({
x: dataWithRarity(rarity).map((entry) => entry.TotalWinner || entry.Winner),
y: dataWithRarity(rarity).map((entry) => maps.playersPerMatch(this.selectedMode) * (entry.TotalCount || entry.Count) / total),
text: dataWithRarity(rarity).map((entry) => maps.getHero(entry.Actor)),
name: rarity,
mode: 'markers',
type: 'scatter',
}));
this.plot = Plotly.newPlot(this.$refs.graph, traces, {
xaxis: {
title: 'Win Rate',
fixedrange: true,
tickformat: ',.0%',
},
yaxis: {
title: 'Pick Rate',
fixedrange: true,
tickformat: ',.0%',
},
margin: { t: 40, l: 40, b: 40, r: 40 },
staticPlot: true,
}, {
displayModeBar: false
});
},
resize() {
Plotly.Plots.resize(this.$refs.graph);
},
}
});
</script>
<style scoped>
.plotly {
height: 20em;
}
</style>
|
