deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

extract rating history and rating distribution charts

pull/1956/merge
Thibault Duplessis 2016-06-02 14:34:06 +02:00
parent d2ebf21577
commit 3a19886e2a
8 changed files with 419 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/views/stat/ratingDistribution.scala.html
View File

@ -1,12 +1,12 @@
@(perfType: lila.rating.PerfType, data: List[Int])(implicit ctx: Context)
@moreJs = {
@jsTagCompiled("chart2.js")
@jsTag("chart/ratingDistribution.js")
@embedJs {
var lichess_rating_distribution = {data:@data.mkString("[", ",", "]")};
@ctx.me.map(_.perfs(perfType).intRating).map { rating =>
lichess_rating_distribution.my_rating = @rating;
}
lichess.ratingDistributionChart({
freq: @data.mkString("[", ",", "]"),
myRating: @ctx.me.map(_.perfs(perfType).intRating)
});
}
}

4
app/views/user/show.scala.html
View File

@ -6,9 +6,9 @@
@jsTag("search.js")
@jsTag("vendor/jquery.infinitescroll.min.js")
}
@jsTagCompiled("chart2.js")
@info.ratingChart.map { ratingChart =>
@embedJs(s"var lichess_rating_series = $ratingChart;")
@jsTag("chart/ratingHistory.js")
@embedJs(s"lichess.ratingHistoryChart($ratingChart);")
}
}
}

2
public/javascripts/advChart.js 100644
View File

@ -0,0 +1,2 @@
lichess.advantageChart = function() {
};

201
public/javascripts/chart/common.js 100644
View File

@ -0,0 +1,201 @@
lichess.chartCommon = function(type) {
var file = type === 'highstock' ? 'highstock.js' : 'highcharts.js';
return lichess.loadScript('/assets/vendor/highcharts4/' + file, true).done(function() {
Highcharts.makeFont = function(size) {
return size + "px 'Noto Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif";
};
Highcharts.theme = (function() {
var light = $('body').hasClass('light');
var text = {
weak: light ? '#a0a0a0' : '#707070',
strong: light ? '#707070' : '#a0a0a0'
};
var line = {
weak: light ? '#ccc' : '#404040',
strong: light ? '#a0a0a0' : '#606060',
fat: '#d85000' // light ? '#a0a0a0' : '#707070'
};
var area = {
white: light ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0.5)',
black: light ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,1)'
};
return {
light: light,
lichess: {
text: text,
line: line,
area: area
},
colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"
],
chart: {
backgroundColor: null,
borderWidth: 0,
borderRadius: 0,
plotBackgroundColor: null,
plotShadow: false,
plotBorderWidth: 0
},
title: {
style: {
font: Highcharts.makeFont(13),
color: text.strong
}
},
xAxis: {
gridLineWidth: 0,
gridLineColor: line.weak,
lineColor: line.strong,
tickColor: line.strong,
labels: {
style: {
color: text.weak,
fontWeight: 'bold'
}
},
title: {
style: {
color: text.weak,
font: Highcharts.makeFont(12)
}
}
},
yAxis: {
alternateGridColor: null,
minorTickInterval: null,
gridLineColor: line.weak,
minorGridLineColor: null,
lineWidth: 0,
tickWidth: 0,
labels: {
style: {
color: text.weak,
fontSize: '10px'
}
},
title: {
style: {
color: text.weak,
font: Highcharts.makeFont(12)
}
}
},
legend: {
itemStyle: {
color: text.strong
},
itemHiddenStyle: {
color: text.weak
}
},
labels: {
style: {
color: text.strong
}
},
tooltip: {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: light ? [
[0, 'rgba(200, 200, 200, .8)'],
[1, 'rgba(250, 250, 250, .8)']
] : [
[0, 'rgba(56, 56, 56, .8)'],
[1, 'rgba(16, 16, 16, .8)']
]
},
borderWidth: 0,
style: {
fontWeight: 'bold',
color: text.strong
}
},
plotOptions: {
series: {
shadow: false,
nullColor: '#444444'
},
line: {
dataLabels: {
color: text.strong
},
marker: {
lineColor: text.weak
}
},
spline: {
marker: {
lineColor: text.weak
}
},
scatter: {
marker: {
lineColor: text.weak
}
},
candlestick: {
lineColor: text.strong
}
},
// highstock
rangeSelector: light ? {} : {
buttonTheme: {
fill: '#505053',
stroke: '#000000',
style: {
color: '#CCC'
},
states: {
hover: {
fill: '#707073',
stroke: '#000000',
style: {
color: 'white'
}
},
select: {
fill: '#000003',
stroke: '#000000',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: '#505053',
inputStyle: {
backgroundColor: '#333',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
navigator: light ? {} : {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
},
xAxis: {
gridLineColor: '#505053'
}
}
};
})();
Highcharts.setOptions(Highcharts.theme);
});
};

129
public/javascripts/chart/ratingDistribution.js 100644
View File

@ -0,0 +1,129 @@
lichess.ratingDistributionChart = function(data) {
lichess.loadScript('/assets/javascripts/chart/common.js').done(function() {
lichess.chartCommon('highchart').done(function() {
var disabled = {
enabled: false
};
var noText = {
text: null
};
$('#rating_distribution_chart').each(function() {
var colors = Highcharts.getOptions().colors;
var ratingAt = function(i) {
return 800 + i * 25;
};
var arraySum = function(arr) {
return arr.reduce(function(a, b) {
return a + b;
}, 0);
};
var sum = arraySum(data.freq);
var cumul = [];
for (var i = 0; i < data.freq.length; i++)
cumul.push(Math.round(arraySum(data.freq.slice(0, i)) / sum * 100));
$(this).highcharts({
yAxis: {
title: noText
},
credits: disabled,
legend: disabled,
series: [{
name: 'Frequency',
type: 'area',
data: data.freq.map(function(nb, i) {
return [ratingAt(i), nb];
}),
color: colors[1],
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1.1
},
stops: [
[0, colors[1]],
[1, Highcharts.Color(colors[1]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 5
},
lineWidth: 4,
tooltip: {
valueSuffix: ' players'
}
}, {
name: 'Cumulative',
type: 'line',
yAxis: 1,
data: cumul.map(function(p, i) {
return [ratingAt(i), p];
}),
color: Highcharts.Color(colors[11]).setOpacity(0.8).get('rgba'),
marker: {
radius: 1
},
shadow: true,
tooltip: {
valueSuffix: '%'
}
}],
chart: {
zoomType: 'xy',
alignTicks: false
},
plotOptions: {},
title: noText,
xAxis: {
type: 'category',
title: {
text: 'Glicko2 Rating'
},
labels: {
rotation: -45
},
gridLineWidth: 1,
tickInterval: 100,
plotLines: (function(v) {
var right = v > 1800;
return v ? [{
label: {
text: 'Your rating',
verticalAlign: 'top',
align: right ? 'right' : 'left',
y: 13,
x: right ? -5 : 5,
style: {
color: colors[2]
},
rotation: -0
},
dashStyle: 'dash',
color: colors[2],
width: 3,
value: v
}] : [];
})(data.myRating)
},
yAxis: [{ // frequency
title: {
text: 'Players'
}
}, { // cumulative
min: 0,
max: 100,
gridLineWidth: 0,
title: {
text: 'Cumulative'
},
labels: {
format: '{value}%'
},
opposite: true
}]
});
});
});
});
};

71
public/javascripts/chart/ratingHistory.js 100644
View File

@ -0,0 +1,71 @@
lichess.ratingHistoryChart = function(data) {
lichess.loadScript('/assets/javascripts/chart/common.js').done(function() {
lichess.chartCommon('highstock').done(function() {
var disabled = {
enabled: false
};
var noText = {
text: null
};
$('div.rating_history').each(function() {
var dashStyles = [
// standard gametypes
'Solid',
'Solid',
'Solid',
'Solid',
// exotic
'ShortDash',
'ShortDash',
'ShortDash',
// extreme
'ShortDot',
'ShortDot',
'ShortDot',
// training
'Dash',
'Dash'
];
$(this).highcharts('StockChart', {
yAxis: {
title: noText
},
credits: disabled,
legend: disabled,
colors: ["#56B4E9", "#0072B2", "#009E73", "#459F3B", "#F0E442", "#E69F00", "#D55E00",
"#CC79A7", "#DF5353", "#66558C", "#99E699", "#FFAEAA"
],
rangeSelector: {
enabled: true,
selected: 1,
inputEnabled: false,
labelStyle: {
display: 'none'
}
},
xAxis: {
title: noText,
labels: disabled,
lineWidth: 0,
tickWidth: 0
},
scrollbar: disabled,
series: data.map(function(serie, i) {
return {
name: serie.name,
type: 'line',
dashStyle: dashStyles[i % dashStyles.length],
marker: {
enabled: true,
radius: 2
},
data: serie.points.map(function(r) {
return [Date.UTC(r[0], r[1], r[2]), r[3]];
})
};
})
});
});
});
});
};

70
public/javascripts/chart2.js
View File

@ -219,72 +219,17 @@ $(function() {
var noAnimation = {
animation: disabled
};
var defaults = {
yAxis: {
title: noText
},
credits: disabled,
legend: disabled
};
function mergeDefaults(config) {
return $.extend(true, {}, defaults, config);
return $.extend(true, {}, {
yAxis: {
title: noText
},
credits: disabled,
legend: disabled
}, config);
}
$('div.rating_history').each(function() {
var dashStyles = [
// standard gametypes
'Solid',
'Solid',
'Solid',
'Solid',
// exotic
'ShortDash',
'ShortDash',
'ShortDash',
// extreme
'ShortDot',
'ShortDot',
'ShortDot',
// training
'Dash',
'Dash'
];
$(this).highcharts('StockChart', mergeDefaults({
colors: ["#56B4E9", "#0072B2", "#009E73", "#459F3B", "#F0E442", "#E69F00", "#D55E00",
"#CC79A7", "#DF5353", "#66558C", "#99E699", "#FFAEAA"
],
rangeSelector: {
enabled: true,
selected: 1,
inputEnabled: false,
labelStyle: {
display: 'none'
}
},
xAxis: {
title: noText,
labels: disabled,
lineWidth: 0,
tickWidth: 0
},
scrollbar: disabled,
series: lichess_rating_series.map(function(serie, i) {
return {
name: serie.name,
type: 'line',
dashStyle: dashStyles[i % dashStyles.length],
marker: {
enabled: true,
radius: 2
},
data: serie.points.map(function(r) {
return [Date.UTC(r[0], r[1], r[2]), r[3]];
})
};
})
}));
});
var divisionLines = function($this) {
var mid = parseInt($this.data('division-mid'));
@ -340,6 +285,7 @@ $(function() {
$('#adv_chart').each(function() {
var $this = $(this);
var cpMax = parseInt($this.data('max'), 10) / 100;
console.log($this.data('rows'));
$this.highcharts(mergeDefaults({
series: [{

1
public/javascripts/main.js
View File

@ -1966,6 +1966,7 @@ lichess.notifyApp = (function() {
function startAnalyse(element, cfg) {
var data = cfg.data;
console.log(cfg);
if (data.chat) $('#chat').chat({
messages: data.chat,
initialNote: data.note,