Commit e72c3a00 authored by Lukas Burgey's avatar Lukas Burgey

Cleaned scripts in playerstats1

parent ab201126
function doughnutChart(context, labelList, dataSets) {
new Chart(context, {
type: 'doughnut',
data: {
labels: labelList,
datasets: dataSets
},
options: {
events: ["mousemove", "mouseenter"],
cutoutPercentage: 40,
animation: {
duration: 0
},
legend: {
display: false
},
}
});
}
function barChart(chartID, labelList, dataSets) {
new Chart($(chartID)[0].getContext("2d"), {
type: 'bar',
......@@ -28,6 +47,13 @@ function barChart(chartID, labelList, dataSets) {
};
function scatterChart(chartID, dataSets) {
var layout = {
xaxis: {
fixedrange: true
},
yaxis: {
fixedrange: true
},
autosize: true,
showlegend: false,
margin: {
l: 40,
......@@ -36,13 +62,41 @@ function scatterChart(chartID, dataSets) {
t: 10,
pad: 4,
autoexpand: false
}
},
hovermode: 'closest'
};
var options = {
displaylogo: false,
displaymodebar: true
displaymodebar: true,
modeBarButtonsToRemove: [
'sendDataToCloud',
'toImage',
'select2d',
'lasso2d',
'toggleSpikelines'
]
};
Plotly.plot(chartID, dataSets, layout, options);
/*
var traceVisibility = new Map();
$('#' + chartID)[0].on('plotly_click', function(data) {
var name = data.points[0].data.name,
traceID;
for (var i = 0; i < dataSetsGlicko2History.length; i++) {
if (dataSetsGlicko2History[i].name == name) {
traceID = i;
}
}
if (traceVisibility.has(name)) {
traceVisibility.delete(name);
Plotly.restyle('chart_glicko2_history', {visible: 'legendonly'}, traceID);
} else {
traceVisibility.set(name, true);
Plotly.restyle('chart_glicko2_history', {visible: true}, traceID);
}
});
*/
};
function toggleGlicko2ConfidenceIntervalCheckbox(element)
......
......@@ -138,9 +138,8 @@ var dataSetsPointHistory = [
x: [{% for point in player.stats.point_history %}{{ forloop.counter0 }},{% endfor %}],
y: [{% for point in player.stats.point_history %}{{ point }},{% endfor %}],
},{% endfor %}
];
var dataSetsEloHistory = [
],
dataSetsEloHistory = [
{% for player in player_list|dictsort:"stats.points" %}{
marker: {
color: "{{ player.color }}",
......@@ -155,9 +154,8 @@ var dataSetsEloHistory = [
x: [{% for point in player.stats.elo_history %}{{ forloop.counter0 }},{% endfor %}],
y: [{% for point in player.stats.elo_history %}{{ point }},{% endfor %}],
},{% endfor %}
];
var dataSetsGlicko2History = [
],
dataSetsGlicko2History = [
{% for player in player_list|dictsort:"stats.points" %}{
fill: "tozerox",
fillcolor: "{{ player.color }}33",
......@@ -192,68 +190,41 @@ var dataSetsGlicko2History = [
x: [{% for point in player.stats.glicko2_history %}{{ forloop.counter0 }},{% endfor %}],
y: [{% for point in player.stats.glicko2_history %}{{ point }},{% endfor %}],
},{% endfor %}
];
],
labelListCountPerType = [{% for row in game_count_per_type %}"{{ row.game_type }}",{% endfor %}],
labelListWinRatio = [{% for row in won_list %}label["{{ row.won }}"],{% endfor %}];
// draw all charts, when the page is loaded
$(window).on("load", function () {
scatterChart("chartpoint_history", dataSetsPointHistory);
scatterChart("chart_elo_history", dataSetsEloHistory);
scatterChart("chart_glicko2_history", dataSetsGlicko2History);
var contextCountPerType = $("#chart0")[0].getContext("2d");
var contextWinRatio = $("#chart1")[0].getContext("2d");
var pattern = {}
var ctx = $("#chart0")[0].getContext("2d");
pattern['Schelle'] = ctx.createPattern(schelleImg, 'repeat');
pattern['Herz'] = ctx.createPattern(herzImg, 'repeat');
pattern['Blatt'] = ctx.createPattern(blattImg, 'repeat');
pattern['Eichel'] = ctx.createPattern(eichelImg, 'repeat');
pattern['Grand'] = ctx.createPattern(grandImg, 'repeat');
pattern['Null'] = ctx.createPattern(nullImg, 'repeat');
pattern['Null Hand'] = ctx.createPattern(nullImg, 'repeat');
pattern['Null Ouvert'] = ctx.createPattern(nullImg, 'repeat');
pattern['Null Hand Ouvert'] = ctx.createPattern(nullImg, 'repeat');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: [
{% for row in game_count_per_type %}"{{ row.game_type }}",
{% endfor %}],
datasets: [
{
borderColor: "#000000",
borderWidth: 1,
hoverBorderWidth: 3,
backgroundColor: [
{% for row in game_count_per_type %}pattern['{{ row.game_type }}'],
{% endfor %}],
data: [
{% for row in game_count_per_type %}"{{ row.count }}",
{% endfor %}]
}
]
},
options: {
cutoutPercentage: 40,
events: ["mousemove", "mouseenter"],
animation: {
duration: 0
},
legend: {
display: false
},
}
});
var ctx1 = $("#chart1")[0].getContext("2d");
pattern['Schelle'] = contextCountPerType.createPattern(schelleImg, 'repeat');
pattern['Herz'] = contextCountPerType.createPattern(herzImg, 'repeat');
pattern['Blatt'] = contextCountPerType.createPattern(blattImg, 'repeat');
pattern['Eichel'] = contextCountPerType.createPattern(eichelImg, 'repeat');
pattern['Grand'] = contextCountPerType.createPattern(grandImg, 'repeat');
pattern['Null'] = contextCountPerType.createPattern(nullImg, 'repeat');
pattern['Null Hand'] = pattern['Null'];
pattern['Null Ouvert'] = pattern['Null'];
pattern['Null Hand Ouvert'] = pattern['Null'];
var winPattern = {}
winPattern["True"] = ctx1.createPattern(winImg, 'repeat');
winPattern["False"] = ctx1.createPattern(loseImg, 'repeat');
var typeChart = new Chart(ctx1, {
type: 'doughnut',
data: {
labels: [
{% for row in won_list %}label["{{ row.won }}"],
winPattern["True"] = contextWinRatio.createPattern(winImg, 'repeat');
winPattern["False"] = contextWinRatio.createPattern(loseImg, 'repeat');
var dataSetsCountPerType = [
{
borderColor: "#000000",
borderWidth: 1,
hoverBorderWidth: 3,
backgroundColor: [
{% for row in game_count_per_type %}pattern['{{ row.game_type }}'],
{% endfor %}],
datasets: [
data: [
{% for row in game_count_per_type %}"{{ row.count }}",
{% endfor %}]
}
];
var dataSetsWinRatio = [
{
borderColor: "#000000",
borderWidth: 1,
......@@ -266,18 +237,11 @@ $(window).on("load", function () {
{% endfor %}]
}
]
},
options: {
events: ["mousemove", "mouseenter"],
cutoutPercentage: 40,
animation: {
duration: 0
},
legend: {
display: false
},
}
});
scatterChart("chartpoint_history", dataSetsPointHistory);
scatterChart("chart_elo_history", dataSetsEloHistory);
scatterChart("chart_glicko2_history", dataSetsGlicko2History);
doughnutChart(contextWinRatio, labelListWinRatio, dataSetsWinRatio);
doughnutChart(contextCountPerType, labelListCountPerType, dataSetsCountPerType);
});
</script>
{% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment