Commit 4d6943ab authored by Marc Duez's avatar Marc Duez

report.js : reads statistics with piecharts [WIP]

parent ec794adf
......@@ -14,8 +14,8 @@ Report.prototype = {
this.w.onload = function(){
self.addGraph(list)
.readsStat()
.addScatterplot()
}
},
......@@ -109,7 +109,7 @@ Report.prototype = {
$('<hr/>').appendTo(this.w.document.body);
$('<h3/>', {
text: system + ' system for timepoint ' + m.getStrTime(m.t)
text: system + ' System for timepoint ' + m.getStrTime(m.t)
}).appendTo(this.w.document.body);
//resize 791px ~> 21cm
......@@ -140,6 +140,91 @@ Report.prototype = {
w_sp.html(svg_sp.innerHTML)
sp.resize();
},
readsStat: function() {
$('<hr/>').appendTo(this.w.document.body);
$('<h3/>', {
text: ' Reads statistics '
}).appendTo(this.w.document.body);
var container = $('<div/>', {
class: 'container reads_stats'
}).appendTo(this.w.document.body);
var head = $('<div/>', {class: 'float-left'}).appendTo(container);
$('<div/>', {class: 'case', text : ' '}).appendTo(head);
$('<div/>', {class: 'case', text : 'total'}).appendTo(head);
$('<div/>', {class: 'case', text : 'segmented'}).appendTo(head);
for (var i=0; i<m.system_selected.length; i++){
var system = m.system_selected[i]
var system_label = $('<div/>', {class: 'case', text : system}).appendTo(head);
}
for (var i=0; i<m.samples.order.length; i++){
var time = m.samples.order[i]
var box = $('<div/>', {class: 'float-left'})
$('<div/>', {class: 'case centered', text : m.getStrTime(time)}).appendTo(box);
$('<div/>', {class: 'case centered', text : m.reads.total[time]}).appendTo(box);
$('<div/>', {class: 'case centered', text : m.reads.segmented[time]}).appendTo(box);
var pie = $('<div/>').appendTo(box);
var pie_label = $('<div/>', {class: 'left'}).appendTo(pie);
for (var j=0; j<m.system_selected.length; j++){
var system = m.system_selected[j]
var value = ((m.reads.germline[system][time]/m.reads.segmented[time])*100).toFixed(0) + " %"
$('<div/>', {class: 'case', text : value}).appendTo(pie_label);
}
var pie_chart = $('<div/>', {class: 'left'}).appendTo(pie)
var p = this.systemPie(time)
p.setAttribute('style','margin:5px')
pie_chart.append(p)
box.appendTo(container);
}
return this;
},
systemPie: function(time) {
if (typeof time == "undefined") time = m.t
var radius = 40
var pie = document.createElementNS("http://www.w3.org/2000/svg", "svg");
pie.setAttribute("viewbox","0 0 100 100");
pie.setAttribute("width",(radius*2)+"px");
pie.setAttribute("height",(radius*2)+"px");
var start = 0
for (var i=0; i<m.system_selected.length; i++){
var system = m.system_selected[i]
var angle = Math.PI*2*(m.reads.germline[system][time]/m.reads.segmented[time])
var stop = start+angle
var slice = document.createElementNS("http://www.w3.org/2000/svg", "path");
var x1 = radius * Math.sin(start);
var y1 = -radius * Math.cos(start);
var x2 = radius * Math.sin(stop);
var y2 = -radius * Math.cos(stop);
var longArc = (stop-start <= Math.PI) ? 0 : 1;
//d is a string that describes the path of the slice.
var d = "M" + radius + "," + radius + " L" + (radius + x1) + "," + (radius + y1) +
", A" + radius + "," + radius + " 0 "+longArc+",1" + (radius + x2) + "," + (radius + y2) +
" z";
slice.setAttribute('d', d);
slice.setAttribute('fill', m.germlineList.getColor(system));
pie.appendChild(slice)
var start = stop;
}
return pie
}
}
......
......@@ -95,6 +95,24 @@
font-family: monospace;
background: #CCC;
}
.reads_stats{
width: 100%;
display: flex;
font-size: 80%;
}
.case {
height: 1.5em;
}
.float-left {
margin: 0 auto 0 0;
float: left;
}
.left {
float: left;
}
.centered {
text-align: center;
}
</style>
<!-- graph style-->
......
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