giuliomoro@0: /*
giuliomoro@0: * Analysis script for WAET
giuliomoro@0: */
giuliomoro@0: 
giuliomoro@0: var chartContext;
giuliomoro@0: window.onload = function() {
giuliomoro@0:     // Load the Visualization API and the corechart package.
giuliomoro@0:       google.charts.load('current', {'packages':['corechart']});
giuliomoro@0:     chartContext = new Chart();
giuliomoro@0: }
giuliomoro@0: 
giuliomoro@0: function arrayMean(values) {
giuliomoro@0:     var mean = 0;
giuliomoro@0:     for (var value of values) {
giuliomoro@0:         mean += value;
giuliomoro@0:     }
giuliomoro@0:     mean /= values.length;
giuliomoro@0:     return mean;
giuliomoro@0: }
giuliomoro@0: 
giuliomoro@0: function percentile(values, n) {
giuliomoro@0:     values.sort( function(a,b) {return a - b;} );
giuliomoro@0:     // get ordinal rank
giuliomoro@0:     var rank = Math.min(Math.floor(values.length*n/100), values.length-1);
giuliomoro@0:     return values[rank];
giuliomoro@0: }
giuliomoro@0: 
giuliomoro@0: function arrayMin(array) {
giuliomoro@0:     // Return the minimum value of an array
giuliomoro@0:     var min = array[0];
giuliomoro@0:     for (var value of array) {
giuliomoro@0:         if (value < min) {
giuliomoro@0:             min = value;
giuliomoro@0:         }
giuliomoro@0:     }
giuliomoro@0:     return min;
giuliomoro@0: }
giuliomoro@0: 
giuliomoro@0: function arrayMax(array) {
giuliomoro@0:     // Return the minimum value of an array
giuliomoro@0:     var max = array[0];
giuliomoro@0:     for (var value of array) {
giuliomoro@0:         if (value > max) {
giuliomoro@0:             max = value;
giuliomoro@0:         }
giuliomoro@0:     }
giuliomoro@0:     return max;
giuliomoro@0: }
giuliomoro@0: 
giuliomoro@0: function arrayHistogram(values,steps,min,max) {
giuliomoro@0:     if (steps == undefined) {
giuliomoro@0:         steps = 0.25;
giuliomoro@0:         console.log("Warning: arrayHistogram called without steps size set, default to 0.25");
giuliomoro@0:     }
giuliomoro@0:     if (min == undefined) {min = arrayMin(values);}
giuliomoro@0:     if (max == undefined) {max = arrayMax(values);}
giuliomoro@0:     var histogram = [];
giuliomoro@0:     var index = min;
giuliomoro@0:     while(index < max) {
giuliomoro@0:         histogram.push({
giuliomoro@0:             marker: index,
giuliomoro@0:             lt: index,
giuliomoro@0:             rt: index+steps,
giuliomoro@0:             count: 0
giuliomoro@0:         });
giuliomoro@0:         index += steps;
giuliomoro@0:     }
giuliomoro@0:     for (var value of values) {
giuliomoro@0:         for (var entry of histogram) {
giuliomoro@0:             if (value >= entry.lt && value <= entry.rt) {
giuliomoro@0:                 entry.count++;
giuliomoro@0:                 break;
giuliomoro@0:             }
giuliomoro@0:         }
giuliomoro@0:     }
giuliomoro@0:     return histogram;
giuliomoro@0: }
giuliomoro@0: 
giuliomoro@0: function Chart() {
giuliomoro@0:     this.valueData = null;
giuliomoro@0:     this.commentData = null;
giuliomoro@0:     this.loadStatus = 0;
giuliomoro@0:     this.charts = [];
giuliomoro@0:     
giuliomoro@0:     var XMLHttp = new XMLHttpRequest();
giuliomoro@0:     XMLHttp.parent = this;
giuliomoro@0:     XMLHttp.open("GET","../scripts/score_parser.php?format=JSON",true);
giuliomoro@0:     XMLHttp.onload = function() {
giuliomoro@0:         // Now we have the JSON data, extract
giuliomoro@0:         this.parent.valueData = JSON.parse(this.responseText);
giuliomoro@0:         this.parent.loadStatus++;
giuliomoro@0:     }
giuliomoro@0:     XMLHttp.send();
giuliomoro@0:     var XMLHttp2 = new XMLHttpRequest();
giuliomoro@0:     XMLHttp2.parent = this;
giuliomoro@0:     XMLHttp2.open("GET","../scripts/comment_parser.php?format=JSON",true);
giuliomoro@0:     XMLHttp2.onload = function() {
giuliomoro@0:         // Now we have the JSON data, extract
giuliomoro@0:         this.parent.commentData = JSON.parse(this.responseText);
giuliomoro@0:         this.parent.loadStatus++;
giuliomoro@0:     }
giuliomoro@0:     XMLHttp2.send();
giuliomoro@0:     
giuliomoro@0:     this.chartObject = function(name) {
giuliomoro@0:         // Create the charting object
giuliomoro@0:         this.name = name;
giuliomoro@0:         this.root = document.createElement("div");
giuliomoro@0:         this.root.className = "chart-holder";
giuliomoro@0:         this.root.setAttribute("name",name);
giuliomoro@0:         this.chartDOM = document.createElement("div");
giuliomoro@0:         this.tableDOM = document.createElement("div");
giuliomoro@0:         this.latexDOM = document.createElement("div");
giuliomoro@0:         this.downloadDOM = document.createElement("div");
giuliomoro@0:         this.chart = undefined;
giuliomoro@0:         this.data = new google.visualization.DataTable();
giuliomoro@0:         this.options = {};
giuliomoro@0:         this.print = document.createElement("button");
giuliomoro@0:         this.sortDataButton = document.createElement("button");
giuliomoro@0:         this.sortDataButton.textContent = "Sort by Data";
giuliomoro@0:         this.sortDataButton.addEventListener("click",this);
giuliomoro@0:         this.sortDataButton.setAttribute("name","sort-data");
giuliomoro@0:         this.sortNameButton = document.createElement("button");
giuliomoro@0:         this.sortNameButton.textContent = "Sort by Name";
giuliomoro@0:         this.sortNameButton.addEventListener("click",this);
giuliomoro@0:         this.sortNameButton.setAttribute("name","sort-name");
giuliomoro@0:         this.draw = function() {
giuliomoro@0:             if (this.chart == undefined) {return;}
giuliomoro@0:             this.tableDOM.innerHTML = null;
giuliomoro@0:             this.latexDOM.innerHTML = null;
giuliomoro@0:             this.buildTable();
giuliomoro@0:             this.writeLatex();
giuliomoro@0:             this.chart.draw(this.data,this.options);
giuliomoro@0:         }
giuliomoro@0:         this.sortData = function() {
giuliomoro@0:             
giuliomoro@0:             var map = this.data.Jf.map(function(el,i){
giuliomoro@0:                 return {index: i, value: el.c[1].v};
giuliomoro@0:             });
giuliomoro@0:             
giuliomoro@0:             map.sort(function(a,b){
giuliomoro@0:                 if (a.value > b.value) {return -1;}
giuliomoro@0:                 if (a.value < b.value) {return 1;}
giuliomoro@0:                 return 0;
giuliomoro@0:             })
giuliomoro@0:             
giuliomoro@0:             var Jf = [];
giuliomoro@0:             var cc = [];
giuliomoro@0:             for (var i=0; i<map.length; i++) {
giuliomoro@0:                 Jf.push(this.data.Jf[map[i].index]);
giuliomoro@0:                 cc.push(this.data.cc[map[i].index]);
giuliomoro@0:             }
giuliomoro@0:             this.data.Jf = Jf;
giuliomoro@0:             this.data.cc = cc;
giuliomoro@0:         }
giuliomoro@0:         this.sortName = function() {
giuliomoro@0:             var map = this.data.Jf.map(function(el,i){
giuliomoro@0:                 return {index: i, value: el.c[0].v};
giuliomoro@0:             });
giuliomoro@0:             
giuliomoro@0:             map.sort(function(a,b){
giuliomoro@0:                 if (a.value < b.value) {return -1;}
giuliomoro@0:                 if (a.value > b.value) {return 1;}
giuliomoro@0:                 return 0;
giuliomoro@0:             })
giuliomoro@0:             
giuliomoro@0:             var Jf = [];
giuliomoro@0:             var cc = [];
giuliomoro@0:             for (var i=0; i<map.length; i++) {
giuliomoro@0:                 Jf.push(this.data.Jf[map[i].index]);
giuliomoro@0:                 cc.push(this.data.cc[map[i].index]);
giuliomoro@0:             }
giuliomoro@0:             this.data.Jf = Jf;
giuliomoro@0:             this.data.cc = cc;
giuliomoro@0:         }
giuliomoro@0:         this.handleEvent = function() {
giuliomoro@0:             // Only used to handle the chart.event.addListener(this,'ready') callback
giuliomoro@0:             switch(event.currentTarget.getAttribute("name"))
giuliomoro@0:             {
giuliomoro@0:                 case "download":
giuliomoro@0:                     window.open(this.chart.getImageURI());
giuliomoro@0:                     break;
giuliomoro@0:                 case "sort-data":
giuliomoro@0:                     this.sortData();
giuliomoro@0:                     this.draw();
giuliomoro@0:                     break;
giuliomoro@0:                 case "sort-name":
giuliomoro@0:                     this.sortName();
giuliomoro@0:                     this.draw();
giuliomoro@0:                     break;
giuliomoro@0:             }
giuliomoro@0:         }
giuliomoro@0:         
giuliomoro@0:         this.root.appendChild(this.chartDOM);
giuliomoro@0:         this.root.appendChild(this.tableDOM);
giuliomoro@0:         this.root.appendChild(this.latexDOM);
giuliomoro@0:         this.root.appendChild(this.sortDataButton);
giuliomoro@0:         this.root.appendChild(this.sortNameButton);
giuliomoro@0:         this.root.appendChild(this.print);
giuliomoro@0:         this.print.textContent = "Download";
giuliomoro@0:         this.print.setAttribute("name","download");
giuliomoro@0:         this.print.addEventListener("click",this);
giuliomoro@0:         this.root.appendChild(this.downloadDOM);
giuliomoro@0:         this.buildTable = function() {
giuliomoro@0:             var table = document.createElement("table");
giuliomoro@0:             table.border = "1";
giuliomoro@0:             for (var rowIndex=0; rowIndex<this.data.If.length; rowIndex++) {
giuliomoro@0:                 var row = document.createElement("tr");
giuliomoro@0:                 table.appendChild(row);
giuliomoro@0:                 var rowTitle = document.createElement("td");
giuliomoro@0:                 rowTitle.textContent = this.data.If[rowIndex].label;
giuliomoro@0:                 row.appendChild(rowTitle);
giuliomoro@0:                 for (var cIndex=0; cIndex<this.data.cc.length; cIndex++) {
giuliomoro@0:                     var column = document.createElement("td");
giuliomoro@0:                     column.textContent = this.data.cc[cIndex][rowIndex].tf;
giuliomoro@0:                     row.appendChild(column);
giuliomoro@0:                 }
giuliomoro@0:             }
giuliomoro@0:             this.tableDOM.appendChild(table);
giuliomoro@0:         };
giuliomoro@0:         this.writeLatex = function() {
giuliomoro@0:             var root = document.createElement("div");
giuliomoro@0:             root.className = "code";
giuliomoro@0:             var holder = document.createElement("pre");
giuliomoro@0:             // Table start
giuliomoro@0:             var start = document.createElement("p");
giuliomoro@0:             start.textContent = "\\" + "begin{tabular}{|l|";
giuliomoro@0:             holder.appendChild(start);
giuliomoro@0:             for (var i=0; i<this.data.cc.length; i++) {
giuliomoro@0:                 start.textContent = start.textContent+"c|";
giuliomoro@0:             }
giuliomoro@0:             start.textContent = start.textContent.concat("}");
giuliomoro@0:             // Now write the rows:
giuliomoro@0:             for (var rIndex=0; rIndex<this.data.If.length; rIndex++) {
giuliomoro@0:                 var row = document.createElement("p");
giuliomoro@0:                 row.textContent = this.data.If[rIndex].label.concat(" & ");
giuliomoro@0:                 for (var cIndex=0; cIndex<this.data.cc.length; cIndex++) {
giuliomoro@0:                     row.textContent = row.textContent.concat(this.data.cc[cIndex][rIndex].tf);
giuliomoro@0:                     if (cIndex < this.data.cc.length-1) {
giuliomoro@0:                         row.textContent = row.textContent.concat(" & ");
giuliomoro@0:                     }
giuliomoro@0:                 }
giuliomoro@0:                 holder.appendChild(row);
giuliomoro@0:             }
giuliomoro@0:             // Table end
giuliomoro@0:             var end = document.createElement("p");
giuliomoro@0:             end.textContent = "\\" + "end{tabular}";
giuliomoro@0:             holder.appendChild(end);
giuliomoro@0:             root.appendChild(holder);
giuliomoro@0:             this.latexDOM.appendChild(root);
giuliomoro@0:         }
giuliomoro@0:     }
giuliomoro@0:     
giuliomoro@0:     this.clear = function() {
giuliomoro@0:         var inject = document.getElementById("test-pages");
giuliomoro@0:         for (var chart of this.charts) {
giuliomoro@0:             inject.removeChild(chart.root);
giuliomoro@0:         }
giuliomoro@0:         this.charts = [];
giuliomoro@0:     }
giuliomoro@0:     
giuliomoro@0:     this.drawTestMean = function() {
giuliomoro@0:         // This draws one bargraph per axis with every test element on
giuliomoro@0:         if (this.valueData == null) {
giuliomoro@0:             console.log("Error - Data not loaded");
giuliomoro@0:             return;
giuliomoro@0:         }
giuliomoro@0:         var chartList = [];
giuliomoro@0:         
giuliomoro@0:         // Create the data table
giuliomoro@0:         for (var page of this.valueData.pages) {
giuliomoro@0:             for (var element of page.elements) {
giuliomoro@0:                 for (var axis of element.axis) {
giuliomoro@0:                     // Find the axis
giuliomoro@0:                     var axisChart = chartList.find(function(element,index,array){
giuliomoro@0:                         if (element.name == this) {return true;} else {return false;}
giuliomoro@0:                     },"mean-test-"+axis.id);
giuliomoro@0:                     if (axisChart == null) {
giuliomoro@0:                         axisChart = new this.chartObject("mean-test-"+axis.id);
giuliomoro@0:                         axisChart.options = {
giuliomoro@0:                             'title':'Mean of axis: '+axis.name,
giuliomoro@0:                             'width':window.innerWidth*0.9,
giuliomoro@0:                             'height':(window.innerWidth*0.9)/1.77
giuliomoro@0:                         }
giuliomoro@0:                         axisChart.data.addColumn('string','id');
giuliomoro@0:                         axisChart.data.addColumn('number',axis.name);
giuliomoro@0:                         chartList.push(axisChart);
giuliomoro@0:                         document.getElementById("test-pages").appendChild(axisChart.root);
giuliomoro@0:                     }
giuliomoro@0:                     var mean = arrayMean(axis.values);
giuliomoro@0:                     axisChart.data.addRow([element.id,mean]);
giuliomoro@0:                 }
giuliomoro@0:             }
giuliomoro@0:         }
giuliomoro@0:         
giuliomoro@0:         // Build and push charts
giuliomoro@0:         for (var chart of chartList) {
giuliomoro@0:             chart.chart = new google.visualization.ColumnChart(chart.chartDOM);
giuliomoro@0:             chart.chart.draw(chart.data,chart.options);
giuliomoro@0:             chart.buildTable();
giuliomoro@0:             chart.writeLatex();
giuliomoro@0:             this.charts.push(chart);
giuliomoro@0:         }
giuliomoro@0:     }
giuliomoro@0:     
giuliomoro@0:     this.drawPageMean = function() {
giuliomoro@0:         // First we must get the value data
giuliomoro@0:         if (this.valueData == null) {
giuliomoro@0:             console.log("Error - Data not loaded");
giuliomoro@0:             return;
giuliomoro@0:         }
giuliomoro@0:         // We create one plot per page
giuliomoro@0:         for (var page of this.valueData.pages) {
giuliomoro@0:             
giuliomoro@0:             // Create the chart resulting point
giuliomoro@0:             var chart = new this.chartObject("mean-page-"+page.id);
giuliomoro@0:             document.getElementById("test-pages").appendChild(chart.root);
giuliomoro@0:             
giuliomoro@0:             // Create the data table
giuliomoro@0:             chart.data.addColumn('string','id');
giuliomoro@0:             // Get axis labels
giuliomoro@0:             for (var axis of page.elements[0].axis) {
giuliomoro@0:                 chart.data.addColumn('number',axis.name);
giuliomoro@0:             }
giuliomoro@0:             var rows = []; // Rows is an array of tuples [col1, col2, col3 ... colN];
giuliomoro@0:             for (var element of page.elements) {
giuliomoro@0:                 var entry = [element.id];
giuliomoro@0:                 for (var i=0; i<page.elements[0].axis.length; i++) {
giuliomoro@0:                     var mean =0;
giuliomoro@0:                     if (i < element.axis.length) {
giuliomoro@0:                         var axis = element.axis[i];
giuliomoro@0:                         mean = arrayMean(axis.values);
giuliomoro@0:                     }
giuliomoro@0:                     entry.push(mean);
giuliomoro@0:                 }
giuliomoro@0:                 rows.push(entry);
giuliomoro@0:             }
giuliomoro@0:             chart.data.addRows(rows);
giuliomoro@0:             chart.options = {
giuliomoro@0:                 'title':'Mean of page: '+page.id,
giuliomoro@0:                 'width':800,
giuliomoro@0:                 'height':700
giuliomoro@0:             }
giuliomoro@0:             // Draw the chart
giuliomoro@0:             chart.chart = new google.visualization.ColumnChart(chart.chartDOM);
giuliomoro@0:             chart.chart.draw(chart.data,chart.options);
giuliomoro@0:             chart.buildTable();
giuliomoro@0:             chart.writeLatex();
giuliomoro@0:             this.charts.push(chart);
giuliomoro@0:         }
giuliomoro@0:     }
giuliomoro@0:     
giuliomoro@0:     this.drawElementHistogram = function() {
giuliomoro@0:         // First we must get the value data
giuliomoro@0:         if (this.valueData == null) {
giuliomoro@0:             console.log("Error - Data not loaded");
giuliomoro@0:             return;
giuliomoro@0:         }
giuliomoro@0:         // We create one plot per element, enjoy...
giuliomoro@0:         for (var page of this.valueData.pages) {
giuliomoro@0:             for (var element of page.elements) {
giuliomoro@0:                 // Build the chart object
giuliomoro@0:                 var chart = new this.chartObject("histogram-element-"+element.id);
giuliomoro@0:                 document.getElementById("test-pages").appendChild(chart.root);
giuliomoro@0:                 chart.data.addColumn('string','index');
giuliomoro@0:                 var histograms = [];
giuliomoro@0:                 for (var axis of element.axis) {
giuliomoro@0:                     chart.data.addColumn('number',axis.name);
giuliomoro@0:                     histograms.push(arrayHistogram(axis.values,0.125,0.0,1.0));
giuliomoro@0:                 }
giuliomoro@0:                 for (var axis of element.axis) {
giuliomoro@0:                     for (var i=0; i<histograms[0].length; i++)
giuliomoro@0:                     {
giuliomoro@0:                         var entry = [""+histograms[0][i].lt.toPrecision(2)+"-"+histograms[0][i].rt.toPrecision(3)]
giuliomoro@0:                         for (var histogram of histograms) {
giuliomoro@0:                             entry.push(histogram[i].count);
giuliomoro@0:                         }
giuliomoro@0:                         chart.data.addRow(entry);
giuliomoro@0:                     }
giuliomoro@0:                 }
giuliomoro@0:                 chart.options = {
giuliomoro@0:                     'title':'Histogram of element: '+element.id,
giuliomoro@0:                     'width':800,
giuliomoro@0:                     'height':700,
giuliomoro@0:                     'bar':{'groupWidth': '100%'}
giuliomoro@0:                 }
giuliomoro@0:                 // Draw the chart
giuliomoro@0:                 chart.chart = new google.visualization.ColumnChart(chart.chartDOM);
giuliomoro@0:                 chart.chart.draw(chart.data,chart.options);
giuliomoro@0:                 chart.buildTable();
giuliomoro@0:                 chart.writeLatex();
giuliomoro@0:                 this.charts.push(chart);
giuliomoro@0:             }
giuliomoro@0:         }
giuliomoro@0:     }
giuliomoro@0: }