fix advantage chart values floating point
This commit is contained in:
parent
e34c731e76
commit
1cee253a69
|
@ -7,7 +7,7 @@ import play.api.templates.Html
|
|||
|
||||
trait AssetHelper {
|
||||
|
||||
val assetVersion = 5
|
||||
val assetVersion = 6
|
||||
|
||||
def cssTag(name: String) = css("stylesheets/" + name)
|
||||
|
||||
|
|
|
@ -22,7 +22,7 @@ private[analyse] final class AdvantageChart(advices: InfoAdvices) {
|
|||
advices sliding 2 collect {
|
||||
case (info, advice) :: (next, _) :: Nil ⇒
|
||||
(next.score, next.mate) match {
|
||||
case (Some(score), _) ⇒ Json.arr(move(info, advice), scale(score.pawns))
|
||||
case (Some(score), _) ⇒ Json.arr(move(info, advice), scale(score.pawns).toString)
|
||||
case (_, Some(mate)) ⇒ Json.arr(move(info, advice), {
|
||||
val mateDelta = math.abs(mate.toFloat / 100)
|
||||
val whiteWins = info.color.fold(mate < 0, mate > 0)
|
||||
|
@ -31,5 +31,5 @@ private[analyse] final class AdvantageChart(advices: InfoAdvices) {
|
|||
case _ ⇒ Json.arr(move(info, none), scale(0))
|
||||
}
|
||||
} toList
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,130 +1,193 @@
|
|||
function drawCharts() {
|
||||
|
||||
var light = $('body').hasClass('light');
|
||||
var bg = "transparent";
|
||||
var textcolor = {color: light ? '#848484' : '#a0a0a0'};
|
||||
var bg = "transparent";
|
||||
var textcolor = {
|
||||
color: light ? '#848484' : '#a0a0a0'
|
||||
};
|
||||
var weak = light ? '#ccc' : '#404040';
|
||||
var strong = light ? '#a0a0a0' : '#606060';
|
||||
var lineColor = {color: weak};
|
||||
var lineColor = {
|
||||
color: weak
|
||||
};
|
||||
|
||||
function elemToData(elem) {
|
||||
var data = new google.visualization.DataTable();
|
||||
$.each($(elem).data('columns'), function() {
|
||||
data.addColumn(this[0], this[1]);
|
||||
});
|
||||
data.addRows($(elem).data('rows'));
|
||||
data.addRows(_.map($(elem).data('rows'), function(e) {
|
||||
return [e[0], parseFloat(e[1])];
|
||||
}));
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
$('div.elo_history').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.ComboChart(this);
|
||||
chart.draw(data, {
|
||||
series: [{
|
||||
color: "blue",
|
||||
type: "area",
|
||||
lineWidth: 2
|
||||
}, {
|
||||
color: "grey",
|
||||
type: "line",
|
||||
lineWidth: 1
|
||||
}, {
|
||||
color: "red",
|
||||
type: "line",
|
||||
lineWidth: 2
|
||||
}
|
||||
],
|
||||
width: 500,
|
||||
height: 340,
|
||||
axisTitlePosition: 'none',
|
||||
chartArea: {
|
||||
left: "10%",
|
||||
top: "2%",
|
||||
width: "90%",
|
||||
height: "96%"
|
||||
},
|
||||
titlePosition: 'none',
|
||||
hAxis: {
|
||||
textPosition: "none"
|
||||
},
|
||||
vAxis: {
|
||||
textStyle: textcolor,
|
||||
gridlines: lineColor,
|
||||
baselineColor: weak
|
||||
},
|
||||
backgroundColor: bg
|
||||
});
|
||||
});
|
||||
|
||||
$('div.elo_distribution').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.ScatterChart(this);
|
||||
chart.draw(data, {
|
||||
width: 747,
|
||||
height: 500,
|
||||
//axisTitlePosition: 'none',
|
||||
chartArea: {
|
||||
left: "5%",
|
||||
top: "3%",
|
||||
width: "78%",
|
||||
height: "92%"
|
||||
},
|
||||
title: $(this).attr('title'),
|
||||
titlePosition: 'in',
|
||||
pointSize: 3,
|
||||
backgroundColor: bg
|
||||
});
|
||||
});
|
||||
|
||||
$('div.end_distribution').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.PieChart(this);
|
||||
chart.draw(data, {
|
||||
width: 747,
|
||||
height: 500,
|
||||
chartArea: {
|
||||
left: "0%",
|
||||
top: "5%",
|
||||
width: "100%",
|
||||
height: "95%"
|
||||
},
|
||||
is3D: true,
|
||||
title: $(this).attr('title'),
|
||||
backgroundColor: bg
|
||||
});
|
||||
});
|
||||
|
||||
$('div.move-time').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.AreaChart(this);
|
||||
chart.draw(data, {
|
||||
width: 747,
|
||||
height: 400,
|
||||
title: $(this).data('title'),
|
||||
titleTextStyle: textcolor,
|
||||
chartArea: {
|
||||
left: "5%",
|
||||
top: "5%",
|
||||
width: "78%",
|
||||
height: "90%"
|
||||
},
|
||||
backgroundColor: bg,
|
||||
vAxis: {
|
||||
textStyle: textcolor,
|
||||
gridlines: lineColor
|
||||
},
|
||||
legend: {
|
||||
textStyle: textcolor
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('div.move-times').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.PieChart(this);
|
||||
chart.draw(data, {
|
||||
width: 366,
|
||||
height: 300,
|
||||
title: $(this).data('title'),
|
||||
legend: {
|
||||
textStyle: textcolor
|
||||
},
|
||||
titleTextStyle: textcolor,
|
||||
chartArea: {
|
||||
left: "0%",
|
||||
width: "100%",
|
||||
height: "80%"
|
||||
},
|
||||
is3D: true,
|
||||
backgroundColor: bg
|
||||
});
|
||||
});
|
||||
|
||||
$('div.adv_chart').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.AreaChart(this);
|
||||
chart.draw(data, {
|
||||
width: 512,
|
||||
height: 150,
|
||||
title: $(this).data('title'),
|
||||
titleTextStyle: textcolor,
|
||||
titlePosition: "in",
|
||||
chartArea: {
|
||||
left: "0%",
|
||||
top: "0%",
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
},
|
||||
backgroundColor: bg,
|
||||
vAxis: {
|
||||
maxValue: $(this).data('max'),
|
||||
minValue: -$(this).data('max'),
|
||||
baselineColor: strong,
|
||||
gridlines: {
|
||||
color: bg
|
||||
},
|
||||
minorGridlines: {
|
||||
color: bg
|
||||
},
|
||||
viewWindowMode: "maximized"
|
||||
},
|
||||
legend: {
|
||||
position: "none"
|
||||
},
|
||||
axisTitlesPosition: "none"
|
||||
});
|
||||
google.visualization.events.addListener(chart, 'select', function() {
|
||||
var sel = chart.getSelection()[0];
|
||||
GoToMove(sel.row + 1);
|
||||
});
|
||||
$(this).data("chart", chart);
|
||||
});
|
||||
}
|
||||
|
||||
$('div.elo_history').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.ComboChart(this);
|
||||
chart.draw(data, {
|
||||
series: [
|
||||
{ color: "blue", type: "area", lineWidth: 2 },
|
||||
{ color: "grey", type: "line", lineWidth: 1 },
|
||||
{ color: "red", type: "line", lineWidth: 2 }
|
||||
],
|
||||
width: 500,
|
||||
height: 340,
|
||||
axisTitlePosition: 'none',
|
||||
chartArea:{left:"10%",top:"2%",width:"90%",height:"96%"},
|
||||
titlePosition: 'none',
|
||||
hAxis: {textPosition: "none"},
|
||||
vAxis: {textStyle: textcolor, gridlines: lineColor, baselineColor: weak},
|
||||
backgroundColor: bg
|
||||
});
|
||||
$(function() {
|
||||
$.getScript('https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart"],"callback":"drawCharts"}]}');
|
||||
});
|
||||
|
||||
$('div.elo_distribution').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.ScatterChart(this);
|
||||
chart.draw(data, {
|
||||
width: 747,
|
||||
height: 500,
|
||||
//axisTitlePosition: 'none',
|
||||
chartArea:{left:"5%",top:"3%",width:"78%",height:"92%"},
|
||||
title: $(this).attr('title'),
|
||||
titlePosition: 'in',
|
||||
pointSize: 3,
|
||||
backgroundColor: bg
|
||||
});
|
||||
});
|
||||
|
||||
$('div.end_distribution').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.PieChart(this);
|
||||
chart.draw(data, {
|
||||
width: 747,
|
||||
height: 500,
|
||||
chartArea:{left:"0%",top:"5%",width:"100%",height:"95%"},
|
||||
is3D: true,
|
||||
title: $(this).attr('title'),
|
||||
backgroundColor: bg
|
||||
});
|
||||
});
|
||||
|
||||
$('div.move-time').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.AreaChart(this);
|
||||
chart.draw(data, {
|
||||
width: 747,
|
||||
height: 400,
|
||||
title: $(this).data('title'),
|
||||
titleTextStyle: textcolor,
|
||||
chartArea:{left:"5%",top:"5%",width:"78%",height:"90%"},
|
||||
backgroundColor: bg,
|
||||
vAxis: {textStyle: textcolor, gridlines: lineColor},
|
||||
legend: {textStyle: textcolor}
|
||||
});
|
||||
});
|
||||
|
||||
$('div.move-times').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.PieChart(this);
|
||||
chart.draw(data, {
|
||||
width: 366,
|
||||
height: 300,
|
||||
title: $(this).data('title'),
|
||||
legend: {textStyle: textcolor},
|
||||
titleTextStyle: textcolor,
|
||||
chartArea:{left:"0%",width:"100%",height:"80%"},
|
||||
is3D: true,
|
||||
backgroundColor: bg
|
||||
});
|
||||
});
|
||||
|
||||
$('div.adv_chart').each(function() {
|
||||
var data = elemToData(this);
|
||||
var chart = new google.visualization.AreaChart(this);
|
||||
chart.draw(data, {
|
||||
width: 512,
|
||||
height: 150,
|
||||
title: $(this).data('title'),
|
||||
titleTextStyle: textcolor,
|
||||
titlePosition: "in",
|
||||
chartArea:{left:"0%",top:"0%",width:"100%",height:"100%"},
|
||||
backgroundColor: bg,
|
||||
vAxis: {
|
||||
maxValue: $(this).data('max'),
|
||||
minValue: -$(this).data('max'),
|
||||
baselineColor: strong,
|
||||
gridlines: {color: bg},
|
||||
minorGridlines: {color: bg},
|
||||
viewWindowMode: "maximized"
|
||||
},
|
||||
legend: {position: "none"},
|
||||
axisTitlesPosition: "none"
|
||||
});
|
||||
google.visualization.events.addListener(chart, 'select', function() {
|
||||
var sel = chart.getSelection()[0];
|
||||
GoToMove(sel.row + 1);
|
||||
});
|
||||
$(this).data("chart", chart);
|
||||
});
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$.getScript('https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart"],"callback":"drawCharts"}]}');
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue