giuliomoro@15: /*
giuliomoro@15: * Analysis script for WAET
giuliomoro@15: */
giuliomoro@15: 
giuliomoro@15: // Firefox does not have an XMLDocument.prototype.getElementsByName
giuliomoro@15: // and there is no searchAll style command, this custom function will
giuliomoro@15: // search all children recusrively for the name. Used for XSD where all
giuliomoro@15: // element nodes must have a name and therefore can pull the schema node
giuliomoro@15: XMLDocument.prototype.getAllElementsByName = function(name)
giuliomoro@15: {
giuliomoro@15:     name = String(name);
giuliomoro@15:     var selected = this.documentElement.getAllElementsByName(name);
giuliomoro@15:     return selected;
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: Element.prototype.getAllElementsByName = function(name)
giuliomoro@15: {
giuliomoro@15:     name = String(name);
giuliomoro@15:     var selected = [];
giuliomoro@15:     var node = this.firstElementChild;
giuliomoro@15:     while(node != null)
giuliomoro@15:     {
giuliomoro@15:         if (node.getAttribute('name') == name)
giuliomoro@15:         {
giuliomoro@15:             selected.push(node);
giuliomoro@15:         }
giuliomoro@15:         if (node.childElementCount > 0)
giuliomoro@15:         {
giuliomoro@15:             selected = selected.concat(node.getAllElementsByName(name));
giuliomoro@15:         }
giuliomoro@15:         node = node.nextElementSibling;
giuliomoro@15:     }
giuliomoro@15:     return selected;
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: XMLDocument.prototype.getAllElementsByTagName = function(name)
giuliomoro@15: {
giuliomoro@15:     name = String(name);
giuliomoro@15:     var selected = this.documentElement.getAllElementsByTagName(name);
giuliomoro@15:     return selected;
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: Element.prototype.getAllElementsByTagName = function(name)
giuliomoro@15: {
giuliomoro@15:     name = String(name);
giuliomoro@15:     var selected = [];
giuliomoro@15:     var node = this.firstElementChild;
giuliomoro@15:     while(node != null)
giuliomoro@15:     {
giuliomoro@15:         if (node.nodeName == name)
giuliomoro@15:         {
giuliomoro@15:             selected.push(node);
giuliomoro@15:         }
giuliomoro@15:         if (node.childElementCount > 0)
giuliomoro@15:         {
giuliomoro@15:             selected = selected.concat(node.getAllElementsByTagName(name));
giuliomoro@15:         }
giuliomoro@15:         node = node.nextElementSibling;
giuliomoro@15:     }
giuliomoro@15:     return selected;
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: // Firefox does not have an XMLDocument.prototype.getElementsByName
giuliomoro@15: if (typeof XMLDocument.prototype.getElementsByName != "function") {
giuliomoro@15:     XMLDocument.prototype.getElementsByName = function(name)
giuliomoro@15:     {
giuliomoro@15:         name = String(name);
giuliomoro@15:         var node = this.documentElement.firstElementChild;
giuliomoro@15:         var selected = [];
giuliomoro@15:         while(node != null)
giuliomoro@15:         {
giuliomoro@15:             if (node.getAttribute('name') == name)
giuliomoro@15:             {
giuliomoro@15:                 selected.push(node);
giuliomoro@15:             }
giuliomoro@15:             node = node.nextElementSibling;
giuliomoro@15:         }
giuliomoro@15:         return selected;
giuliomoro@15:     }
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: var chartContext, testData;
giuliomoro@15: window.onload = function() {
giuliomoro@15:     // Load the Visualization API and the corechart package.
giuliomoro@15:     google.charts.load('current', {'packages':['corechart']});
giuliomoro@15:     chartContext = new Chart();
giuliomoro@15:     testData = new Data();
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: function get(url) {
giuliomoro@15:   // Return a new promise.
giuliomoro@15:   return new Promise(function(resolve, reject) {
giuliomoro@15:     // Do the usual XHR stuff
giuliomoro@15:     var req = new XMLHttpRequest();
giuliomoro@15:     req.open('GET', url);
giuliomoro@15:     req.onload = function() {
giuliomoro@15:       // This is called even on 404 etc
giuliomoro@15:       // so check the status
giuliomoro@15:       if (req.status == 200) {
giuliomoro@15:         // Resolve the promise with the response text
giuliomoro@15:         resolve(req.response);
giuliomoro@15:       }
giuliomoro@15:       else {
giuliomoro@15:         // Otherwise reject with the status text
giuliomoro@15:         // which will hopefully be a meaningful error
giuliomoro@15:         reject(Error(req.statusText));
giuliomoro@15:       }
giuliomoro@15:     };
giuliomoro@15: 
giuliomoro@15:     // Handle network errors
giuliomoro@15:     req.onerror = function() {
giuliomoro@15:       reject(Error("Network Error"));
giuliomoro@15:     };
giuliomoro@15: 
giuliomoro@15:     // Make the request
giuliomoro@15:     req.send();
giuliomoro@15:   });
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: function arrayMean(values) {
giuliomoro@15:     var mean = 0;
giuliomoro@15:     for (var value of values) {
giuliomoro@15:         mean += value;
giuliomoro@15:     }
giuliomoro@15:     mean /= values.length;
giuliomoro@15:     return mean;
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: function percentile(values, p) {
giuliomoro@15:     //http://web.stanford.edu/class/archive/anthsci/anthsci192/anthsci192.1064/handouts/calculating%20percentiles.pdf
giuliomoro@15:     values.sort( function(a,b) {return a - b;} );
giuliomoro@15:     // get ordinal rank
giuliomoro@15:     var index = values.length*p/100;
giuliomoro@15:     var k = Math.floor(index);
giuliomoro@15:     if (k == index) {
giuliomoro@15:         return values[k];
giuliomoro@15:     } else {
giuliomoro@15:         var f = index-k;
giuliomoro@15:         var x_int = (1-f)*values[k]+f*values[k+1];
giuliomoro@15:         return x_int;
giuliomoro@15:     }
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: function arrayMin(array) {
giuliomoro@15:     // Return the minimum value of an array
giuliomoro@15:     var min = array[0];
giuliomoro@15:     for (var value of array) {
giuliomoro@15:         if (value < min) {
giuliomoro@15:             min = value;
giuliomoro@15:         }
giuliomoro@15:     }
giuliomoro@15:     return min;
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: function arrayMax(array) {
giuliomoro@15:     // Return the minimum value of an array
giuliomoro@15:     var max = array[0];
giuliomoro@15:     for (var value of array) {
giuliomoro@15:         if (value > max) {
giuliomoro@15:             max = value;
giuliomoro@15:         }
giuliomoro@15:     }
giuliomoro@15:     return max;
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: function boxplotRow(array) {
giuliomoro@15:     // Take an array of element values and return array of computed intervals
giuliomoro@15:     var result = {
giuliomoro@15:         median : percentile(array,50),
giuliomoro@15:         pct25 : percentile(array,25),
giuliomoro@15:         pct75 : percentile(array,75),
giuliomoro@15:         IQR : null,
giuliomoro@15:         min: null,
giuliomoro@15:         max: null,
giuliomoro@15:         outliers: new Array()
giuliomoro@15:     }
giuliomoro@15:     result.IQR = result.pct75-result.pct25;
giuliomoro@15:     var rest = [];
giuliomoro@15:     var pct75_IQR = result.pct75+1.5*result.IQR;
giuliomoro@15:     var pct25_IQR = result.pct25-1.5*result.IQR;
giuliomoro@15:     for (var i=0; i<array.length; i++) {
giuliomoro@15:         //outliers, ranger above pct75+1.5*IQR or below pct25-1.5*IQR
giuliomoro@15:         var point = array[i];
giuliomoro@15:         if (point > pct75_IQR || point < pct25_IQR) {
giuliomoro@15:             result.outliers.push(point);
giuliomoro@15:         } else {
giuliomoro@15:             rest.push(point);
giuliomoro@15:         }
giuliomoro@15:     }
giuliomoro@15:     result.max = arrayMax(rest);
giuliomoro@15:     result.min = arrayMin(rest);
giuliomoro@15:     return result;
giuliomoro@15:     
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: function arrayHistogram(values,steps,min,max) {
giuliomoro@15:     if (steps == undefined) {
giuliomoro@15:         steps = 0.25;
giuliomoro@15:         console.log("Warning: arrayHistogram called without steps size set, default to 0.25");
giuliomoro@15:     }
giuliomoro@15:     if (min == undefined) {min = arrayMin(values);}
giuliomoro@15:     if (max == undefined) {max = arrayMax(values);}
giuliomoro@15:     var histogram = [];
giuliomoro@15:     var index = min;
giuliomoro@15:     while(index < max) {
giuliomoro@15:         histogram.push({
giuliomoro@15:             marker: index,
giuliomoro@15:             lt: index,
giuliomoro@15:             rt: index+steps,
giuliomoro@15:             count: 0
giuliomoro@15:         });
giuliomoro@15:         index += steps;
giuliomoro@15:     }
giuliomoro@15:     for (var value of values) {
giuliomoro@15:         for (var entry of histogram) {
giuliomoro@15:             if (value >= entry.lt && value <= entry.rt) {
giuliomoro@15:                 entry.count++;
giuliomoro@15:                 break;
giuliomoro@15:             }
giuliomoro@15:         }
giuliomoro@15:     }
giuliomoro@15:     return histogram;
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: function Chart() {
giuliomoro@15:     this.valueData;
giuliomoro@15:     this.charts = [];
giuliomoro@15:     
giuliomoro@15:     this.chartObject = function(name) {
giuliomoro@15:         // Create the charting object
giuliomoro@15:         this.name = name;
giuliomoro@15:         this.root = document.createElement("div");
giuliomoro@15:         this.root.className = "chart-holder";
giuliomoro@15:         this.root.setAttribute("name",name);
giuliomoro@15:         this.chartDOM = document.createElement("div");
giuliomoro@15:         this.tableDOM = document.createElement("div");
giuliomoro@15:         this.latexDOM = document.createElement("div");
giuliomoro@15:         this.downloadDOM = document.createElement("div");
giuliomoro@15:         this.chart = undefined;
giuliomoro@15:         this.data = new google.visualization.DataTable();
giuliomoro@15:         this.options = {};
giuliomoro@15:         this.print = document.createElement("button");
giuliomoro@15:         this.sortDataButton = document.createElement("button");
giuliomoro@15:         this.sortDataButton.textContent = "Sort by Data";
giuliomoro@15:         this.sortDataButton.addEventListener("click",this);
giuliomoro@15:         this.sortDataButton.setAttribute("name","sort-data");
giuliomoro@15:         this.sortNameButton = document.createElement("button");
giuliomoro@15:         this.sortNameButton.textContent = "Sort by Name";
giuliomoro@15:         this.sortNameButton.addEventListener("click",this);
giuliomoro@15:         this.sortNameButton.setAttribute("name","sort-name");
giuliomoro@15:         this.draw = function() {
giuliomoro@15:             if (this.chart == undefined) {return;}
giuliomoro@15:             this.tableDOM.innerHTML = null;
giuliomoro@15:             this.latexDOM.innerHTML = null;
giuliomoro@15:             this.buildTable();
giuliomoro@15:             this.writeLatex();
giuliomoro@15:             this.chart.draw(this.data,this.options);
giuliomoro@15:         }
giuliomoro@15:         this.sortData = function() {
giuliomoro@15:             this.data.sort(1);
giuliomoro@15:         }
giuliomoro@15:         this.sortName = function() {
giuliomoro@15:             this.data.sort(0);
giuliomoro@15:         }
giuliomoro@15:         this.handleEvent = function() {
giuliomoro@15:             // Only used to handle the chart.event.addListener(this,'ready') callback
giuliomoro@15:             switch(event.currentTarget.getAttribute("name"))
giuliomoro@15:             {
giuliomoro@15:                 case "download":
giuliomoro@15:                     window.open(this.chart.getImageURI());
giuliomoro@15:                     break;
giuliomoro@15:                 case "sort-data":
giuliomoro@15:                     this.sortData();
giuliomoro@15:                     this.draw();
giuliomoro@15:                     break;
giuliomoro@15:                 case "sort-name":
giuliomoro@15:                     this.sortName();
giuliomoro@15:                     this.draw();
giuliomoro@15:                     break;
giuliomoro@15:             }
giuliomoro@15:         }
giuliomoro@15:         
giuliomoro@15:         this.root.appendChild(this.chartDOM);
giuliomoro@15:         this.root.appendChild(this.tableDOM);
giuliomoro@15:         this.root.appendChild(this.latexDOM);
giuliomoro@15:         this.root.appendChild(this.sortDataButton);
giuliomoro@15:         this.root.appendChild(this.sortNameButton);
giuliomoro@15:         this.root.appendChild(this.print);
giuliomoro@15:         this.print.textContent = "Download";
giuliomoro@15:         this.print.setAttribute("name","download");
giuliomoro@15:         this.print.addEventListener("click",this);
giuliomoro@15:         this.root.appendChild(this.downloadDOM);
giuliomoro@15:         this.buildTable = function() {
giuliomoro@15:             var table = document.createElement("table");
giuliomoro@15:             table.border = "1";
giuliomoro@15:             var numRows = this.data.getNumberOfRows();
giuliomoro@15:             var numColumns = this.data.getNumberOfColumns();
giuliomoro@15:             for (var columnIndex=0; columnIndex<numColumns; columnIndex++)
giuliomoro@15:             {
giuliomoro@15:                 var tableTitle = this.data.getColumnLabel(columnIndex);
giuliomoro@15:                 if (tableTitle != "") {
giuliomoro@15:                     var table_row = document.createElement('tr');
giuliomoro@15:                     table.appendChild(table_row);
giuliomoro@15:                     var row_title = document.createElement('td');
giuliomoro@15:                     table_row.appendChild(row_title);
giuliomoro@15:                     row_title.textContent = tableTitle;
giuliomoro@15:                     for (var rowIndex=0; rowIndex<numRows; rowIndex++)
giuliomoro@15:                     {
giuliomoro@15:                         var row_entry = document.createElement('td');
giuliomoro@15:                         table_row.appendChild(row_entry);
giuliomoro@15:                         var entry = this.data.getValue(rowIndex,columnIndex);
giuliomoro@15:                         if (isFinite(Number(entry)))
giuliomoro@15:                         {
giuliomoro@15:                             entry = String(Number(entry).toFixed(4));
giuliomoro@15:                         }
giuliomoro@15:                         row_entry.textContent = entry;
giuliomoro@15:                     }
giuliomoro@15:                 }
giuliomoro@15:             }
giuliomoro@15:             this.tableDOM.appendChild(table);
giuliomoro@15:         };
giuliomoro@15:         this.writeLatex = function() {
giuliomoro@15:             var numRows = this.data.getNumberOfRows();
giuliomoro@15:             var numColumns = this.data.getNumberOfColumns();
giuliomoro@15:             var root = document.createElement("div");
giuliomoro@15:             root.className = "code";
giuliomoro@15:             var holder = document.createElement("pre");
giuliomoro@15:             // Table start
giuliomoro@15:             var start = document.createElement("p");
giuliomoro@15:             start.textContent = "\\" + "begin{tabular}{|l|";
giuliomoro@15:             holder.appendChild(start);
giuliomoro@15:             for (var i=0; i<numRows; i++) {
giuliomoro@15:                 start.textContent = start.textContent+"c|";
giuliomoro@15:             }
giuliomoro@15:             start.textContent = start.textContent.concat("}");
giuliomoro@15:             // Now write the rows:
giuliomoro@15:             for (var rIndex=0; rIndex<numColumns; rIndex++) {
giuliomoro@15:                 var tableTitle = this.data.getColumnLabel(rIndex);
giuliomoro@15:                 if(tableTitle != "")
giuliomoro@15:                 {
giuliomoro@15:                     var row = document.createElement("p");
giuliomoro@15:                     row.textContent = tableTitle.concat(" & ");
giuliomoro@15:                     for (var cIndex=0; cIndex<numRows; cIndex++) {
giuliomoro@15:                         var entry = this.data.getValue(cIndex,rIndex);
giuliomoro@15:                         if (isFinite(Number(entry)))
giuliomoro@15:                         {
giuliomoro@15:                             entry = String(Number(entry).toFixed(4));
giuliomoro@15:                         }
giuliomoro@15:                         row.textContent = row.textContent.concat(entry);
giuliomoro@15:                         if (cIndex < numRows-1) {
giuliomoro@15:                             row.textContent = row.textContent.concat(" & ");
giuliomoro@15:                         } else {
giuliomoro@15:                             row.textContent = row.textContent.concat(" \\\\ \\hline");
giuliomoro@15:                         }
giuliomoro@15:                     }
giuliomoro@15:                     holder.appendChild(row);
giuliomoro@15:                 }
giuliomoro@15:             }
giuliomoro@15:             // Table end
giuliomoro@15:             var end = document.createElement("p");
giuliomoro@15:             end.textContent = "\\" + "end{tabular}";
giuliomoro@15:             holder.appendChild(end);
giuliomoro@15:             root.appendChild(holder);
giuliomoro@15:             this.latexDOM.appendChild(root);
giuliomoro@15:         }
giuliomoro@15:     }
giuliomoro@15:     
giuliomoro@15:     this.clear = function() {
giuliomoro@15:         var inject = document.getElementById("test-pages");
giuliomoro@15:         for (var chart of this.charts) {
giuliomoro@15:             inject.removeChild(chart.root);
giuliomoro@15:         }
giuliomoro@15:         this.charts = [];
giuliomoro@15:     }
giuliomoro@15:     
giuliomoro@15:     this.drawTestMean = function() {
giuliomoro@15:         // This draws one bargraph per axis with every test element on
giuliomoro@15:         if (this.valueData == null) {
giuliomoro@15:             console.log("Error - Data not loaded");
giuliomoro@15:             return;
giuliomoro@15:         }
giuliomoro@15:         var chartList = [];
giuliomoro@15:         
giuliomoro@15:         // Create the data table
giuliomoro@15:         for (var page of this.valueData.pages) {
giuliomoro@15:             for (var element of page.elements) {
giuliomoro@15:                 for (var axis of element.axis) {
giuliomoro@15:                     // Find the axis
giuliomoro@15:                     var axisChart = chartList.find(function(element,index,array){
giuliomoro@15:                         if (element.name == this) {return true;} else {return false;}
giuliomoro@15:                     },"mean-test-"+axis.name);
giuliomoro@15:                     if (axisChart == null) {
giuliomoro@15:                         axisChart = new this.chartObject("mean-test-"+axis.name);
giuliomoro@15:                         axisChart.options = {
giuliomoro@15:                             'title':'Mean of axis: '+axis.name,
giuliomoro@15:                             'width':window.innerWidth*0.9,
giuliomoro@15:                             'height':(window.innerWidth*0.9)/1.77
giuliomoro@15:                         }
giuliomoro@15:                         axisChart.data.addColumn('string','id');
giuliomoro@15:                         axisChart.data.addColumn('number',axis.name);
giuliomoro@15:                         chartList.push(axisChart);
giuliomoro@15:                         document.getElementById("test-pages").appendChild(axisChart.root);
giuliomoro@15:                     }
giuliomoro@15:                     var mean = arrayMean(axis.values);
giuliomoro@15:                     axisChart.data.addRow([element.id,mean]);
giuliomoro@15:                 }
giuliomoro@15:             }
giuliomoro@15:         }
giuliomoro@15:         
giuliomoro@15:         // Build and push charts
giuliomoro@15:         for (var chart of chartList) {
giuliomoro@15:             chart.chart = new google.visualization.ColumnChart(chart.chartDOM);
giuliomoro@15:             chart.chart.draw(chart.data,chart.options);
giuliomoro@15:             chart.buildTable();
giuliomoro@15:             chart.writeLatex();
giuliomoro@15:             this.charts.push(chart);
giuliomoro@15:         }
giuliomoro@15:     }
giuliomoro@15:     
giuliomoro@15:     this.drawTestBoxplot = function() {
giuliomoro@15:         if (this.valueData == null) {
giuliomoro@15:             console.log("Error - Data not loaded");
giuliomoro@15:             return;
giuliomoro@15:         }
giuliomoro@15:         var chartList = [];
giuliomoro@15:         
giuliomoro@15:         // Creates one chart per axis
giuliomoro@15:         
giuliomoro@15:         // Create the data table
giuliomoro@15:         for (var page of this.valueData.pages) {
giuliomoro@15:             for (var element of page.elements) {
giuliomoro@15:                 for (var axis of element.axis) {
giuliomoro@15:                     // Find the axis
giuliomoro@15:                     var axisChart = chartList.find(function(element,index,array){
giuliomoro@15:                         if (element.name == this) {return true;} else {return false;}
giuliomoro@15:                     },"boxplot-test-"+axis.name);
giuliomoro@15:                     if (axisChart == null) {
giuliomoro@15:                         // Axis chart doesn't exist
giuliomoro@15:                         axisChart = new this.chartObject("boxplot-test-"+axis.name);
giuliomoro@15:                         axisChart.options = {
giuliomoro@15:                             'title':'Boxplot of axis '+axis.name,
giuliomoro@15:                             'width':window.innerWidth*0.9,
giuliomoro@15:                             'height':(window.innerWidth*0.9)/1.77,
giuliomoro@15:                             legend: {position: 'none'},
giuliomoro@15:                             lineWidth: 0,
giuliomoro@15:                             series: [{'color': '#D3362D'}],
giuliomoro@15:                             intervals: {
giuliomoro@15:                                 barWidth: 1,
giuliomoro@15:                                 boxWidth: 1,
giuliomoro@15:                                 lineWidth: 2,
giuliomoro@15:                                 style: 'boxes'
giuliomoro@15:                             },
giuliomoro@15:                             interval: {
giuliomoro@15:                                 max: {
giuliomoro@15:                                     style: 'bars',
giuliomoro@15:                                     fillOpacity: 1,
giuliomoro@15:                                     color: '#777'
giuliomoro@15:                                 },
giuliomoro@15:                                 min: {
giuliomoro@15:                                     style: 'bars',
giuliomoro@15:                                     fillOpacity: 1,
giuliomoro@15:                                     color: '#777'
giuliomoro@15:                                 }
giuliomoro@15:                             }
giuliomoro@15:                         };
giuliomoro@15:                         axisChart.data.addColumn('string','id');
giuliomoro@15:                         axisChart.data.addColumn('number','median');
giuliomoro@15:                         axisChart.data.addColumn({id:'max',type:'number',role:'interval'});
giuliomoro@15:                         axisChart.data.addColumn({id:'min',type:'number',role:'interval'});
giuliomoro@15:                         axisChart.data.addColumn({id:'firstQuartile',type:'number',role:'interval'});
giuliomoro@15:                         axisChart.data.addColumn({id:'median',type:'number',role:'interval'});
giuliomoro@15:                         axisChart.data.addColumn({id:'thirdQuartile',type:'number',role:'interval'});
giuliomoro@15:                         chartList.push(axisChart);
giuliomoro@15:                         document.getElementById("test-pages").appendChild(axisChart.root);
giuliomoro@15:                     }
giuliomoro@15:                     var result = boxplotRow(axis.values);
giuliomoro@15:                     axisChart.data.addRow([element.id,result.median,result.max,result.min,result.pct25,result.median,result.pct75]);
giuliomoro@15:                 }
giuliomoro@15:             }
giuliomoro@15:         }
giuliomoro@15:         // Build and push charts
giuliomoro@15:         for (var chart of chartList) {
giuliomoro@15:             chart.chart = new google.visualization.LineChart(chart.chartDOM);
giuliomoro@15:             chart.chart.draw(chart.data,chart.options);
giuliomoro@15:             chart.buildTable();
giuliomoro@15:             chart.writeLatex();
giuliomoro@15:             this.charts.push(chart);
giuliomoro@15:         }
giuliomoro@15:     }
giuliomoro@15:     
giuliomoro@15:     this.drawPageMean = function() {
giuliomoro@15:         // First we must get the value data
giuliomoro@15:         if (this.valueData == null) {
giuliomoro@15:             console.log("Error - Data not loaded");
giuliomoro@15:             return;
giuliomoro@15:         }
giuliomoro@15:         // We create one plot per page
giuliomoro@15:         for (var page of this.valueData.pages) {
giuliomoro@15:             
giuliomoro@15:             // Create the chart resulting point
giuliomoro@15:             var chart = new this.chartObject("mean-page-"+page.id);
giuliomoro@15:             document.getElementById("test-pages").appendChild(chart.root);
giuliomoro@15:             
giuliomoro@15:             // Create the data table
giuliomoro@15:             chart.data.addColumn('string','id');
giuliomoro@15:             // Get axis labels
giuliomoro@15:             for (var axis of page.elements[0].axis) {
giuliomoro@15:                 chart.data.addColumn('number',axis.name);
giuliomoro@15:             }
giuliomoro@15:             var rows = []; // Rows is an array of tuples [col1, col2, col3 ... colN];
giuliomoro@15:             for (var element of page.elements) {
giuliomoro@15:                 var entry = [element.id];
giuliomoro@15:                 for (var i=0; i<page.elements[0].axis.length; i++) {
giuliomoro@15:                     var mean =0;
giuliomoro@15:                     if (i < element.axis.length) {
giuliomoro@15:                         var axis = element.axis[i];
giuliomoro@15:                         mean = arrayMean(axis.values);
giuliomoro@15:                     }
giuliomoro@15:                     entry.push(mean);
giuliomoro@15:                 }
giuliomoro@15:                 rows.push(entry);
giuliomoro@15:             }
giuliomoro@15:             chart.data.addRows(rows);
giuliomoro@15:             chart.options = {
giuliomoro@15:                 'title':'Mean of page: '+page.id,
giuliomoro@15:                 'width':800,
giuliomoro@15:                 'height':700
giuliomoro@15:             }
giuliomoro@15:             // Draw the chart
giuliomoro@15:             chart.chart = new google.visualization.ColumnChart(chart.chartDOM);
giuliomoro@15:             chart.chart.draw(chart.data,chart.options);
giuliomoro@15:             chart.buildTable();
giuliomoro@15:             chart.writeLatex();
giuliomoro@15:             this.charts.push(chart);
giuliomoro@15:         }
giuliomoro@15:     }
giuliomoro@15:     
giuliomoro@15:     this.drawElementHistogram = function() {
giuliomoro@15:         // First we must get the value data
giuliomoro@15:         if (this.valueData == null) {
giuliomoro@15:             console.log("Error - Data not loaded");
giuliomoro@15:             return;
giuliomoro@15:         }
giuliomoro@15:         // We create one plot per element, enjoy...
giuliomoro@15:         for (var page of this.valueData.pages) {
giuliomoro@15:             for (var element of page.elements) {
giuliomoro@15:                 // Build the chart object
giuliomoro@15:                 var chart = new this.chartObject("histogram-element-"+element.id);
giuliomoro@15:                 document.getElementById("test-pages").appendChild(chart.root);
giuliomoro@15:                 chart.data.addColumn('string','index');
giuliomoro@15:                 var histograms = [];
giuliomoro@15:                 for (var axis of element.axis) {
giuliomoro@15:                     chart.data.addColumn('number',axis.name);
giuliomoro@15:                     histograms.push(arrayHistogram(axis.values,0.125,0.0,1.0));
giuliomoro@15:                 }
giuliomoro@15:                 for (var axis of element.axis) {
giuliomoro@15:                     for (var i=0; i<histograms[0].length; i++)
giuliomoro@15:                     {
giuliomoro@15:                         var entry = [""+histograms[0][i].lt.toPrecision(2)+"-"+histograms[0][i].rt.toPrecision(3)]
giuliomoro@15:                         for (var histogram of histograms) {
giuliomoro@15:                             entry.push(histogram[i].count);
giuliomoro@15:                         }
giuliomoro@15:                         chart.data.addRow(entry);
giuliomoro@15:                     }
giuliomoro@15:                 }
giuliomoro@15:                 chart.options = {
giuliomoro@15:                     'title':'Histogram of element: '+element.id,
giuliomoro@15:                     'width':800,
giuliomoro@15:                     'height':700,
giuliomoro@15:                     'bar':{'groupWidth': '100%'}
giuliomoro@15:                 }
giuliomoro@15:                 // Draw the chart
giuliomoro@15:                 chart.chart = new google.visualization.ColumnChart(chart.chartDOM);
giuliomoro@15:                 chart.chart.draw(chart.data,chart.options);
giuliomoro@15:                 chart.buildTable();
giuliomoro@15:                 chart.writeLatex();
giuliomoro@15:                 this.charts.push(chart);
giuliomoro@15:             }
giuliomoro@15:         }
giuliomoro@15:     }
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: function Data() {
giuliomoro@15:     // This holds the link between the server side calculations and the client side visualisation of the data
giuliomoro@15:     
giuliomoro@15:     // Dynamically generate the test filtering / page filterting tools
giuliomoro@15:     var self = this;
giuliomoro@15:     // Collect the test types and counts
giuliomoro@15:     this.testSavedDiv = document.getElementById("test-saved");
giuliomoro@15:     this.testSaves = null;
giuliomoro@15:     this.selectURL = null;
giuliomoro@15:     
giuliomoro@15:     this.specification = new Specification();
giuliomoro@15:     get("../xml/test-schema.xsd").then(function(response){
giuliomoro@15:         var parse = new DOMParser();
giuliomoro@15:         self.specification.schema = parse.parseFromString(response,'text/xml');
giuliomoro@15:     },function(error){
giuliomoro@15:         console.log("ERROR: Could not get Test Schema");
giuliomoro@15:     });
giuliomoro@15:     this.update = function(url) {
giuliomoro@15:         var self = this;
giuliomoro@15:     }
giuliomoro@15:     
giuliomoro@15:     this.updateData = function(req_str) {
giuliomoro@15:         // Now go get that data
giuliomoro@15:         get(req_str).then(function(response){
giuliomoro@15:             // Returns the data
giuliomoro@15:             chartContext.valueData = JSON.parse(response);
giuliomoro@15:         },function(error){console.error(error);});
giuliomoro@15:     }
giuliomoro@15: }
giuliomoro@15: 
giuliomoro@15: var interfaceContext = new function() {
giuliomoro@15:     // This creates the interface for the user to connect with the dynamic back-end to retrieve data
giuliomoro@15:     this.rootDOM = document.createElement("div");
giuliomoro@15:     this.getDataButton = {
giuliomoro@15:         button: document.createElement("button"),
giuliomoro@15:         parent: this,
giuliomoro@15:         handleEvent: function(event) {
giuliomoro@15:             // Get the list of files:
giuliomoro@15:             var req_str = "../php/get_filtered_score.php"+this.parent.getFilterString();
giuliomoro@15:             testData.updateData(req_str);
giuliomoro@15:         }
giuliomoro@15:     }
giuliomoro@15:     this.getDataButton.button.textContent = "Get Filtered Data";
giuliomoro@15:     this.getDataButton.button.addEventListener("click",this.getDataButton);
giuliomoro@15:     
giuliomoro@15:     this.getRawScoreData = {
giuliomoro@15:         root: document.createElement("div"),
giuliomoro@15:         csvDOM: document.createElement("button"),
giuliomoro@15:         jsonDOM: document.createElement("button"),
giuliomoro@15:         xmlDOM: document.createElement("button"),
giuliomoro@15:         presentDOM: document.createElement("div"),
giuliomoro@15:         parent: this,
giuliomoro@15:         XHR: new XMLHttpRequest(),
giuliomoro@15:         handleEvent: function(event) {
giuliomoro@15:             this.presentDOM.innerHTML = null;
giuliomoro@15:             var url = "../php/get_filtered_score.php"+this.parent.getFilterString();
giuliomoro@15:             this.XHR.open("GET",url+"&format="+event.currentTarget.textContent,true);
giuliomoro@15:             switch(event.currentTarget.textContent) {
giuliomoro@15:                 case "CSV":
giuliomoro@15:                     this.XHR.onload = function() {
giuliomoro@15:                         var file = [this.response];
giuliomoro@15:                         var bb = new Blob(file,{type: 'text/csv'});
giuliomoro@15:                         this.parent.presentDOM.appendChild( this.parent.generateLink(bb,"scores.csv") );
giuliomoro@15:                     }
giuliomoro@15:                     break;
giuliomoro@15:                 case "JSON":
giuliomoro@15:                     this.XHR.onload = function() {
giuliomoro@15:                         var file = [this.response];
giuliomoro@15:                         var bb = new Blob(file,{type: 'application/json'});
giuliomoro@15:                         this.parent.presentDOM.appendChild( this.parent.generateLink(bb,"scores.json") );
giuliomoro@15:                     }
giuliomoro@15:                     break;
giuliomoro@15:                 case "XML":
giuliomoro@15:                     this.XHR.onload = function() {
giuliomoro@15:                         var file = [this.response];
giuliomoro@15:                         var bb = new Blob(file,{type: 'text/xml'});
giuliomoro@15:                         this.parent.presentDOM.appendChild( this.parent.generateLink(bb,"scores.xml") );
giuliomoro@15:                     }
giuliomoro@15:                     break;
giuliomoro@15:             }
giuliomoro@15:             this.XHR.send();
giuliomoro@15:         },
giuliomoro@15:         generateLink: function(blob,filename) {
giuliomoro@15:             var dnlk = window.URL.createObjectURL(blob);
giuliomoro@15:             var a = document.createElement("a");
giuliomoro@15:             a.hidden = '';
giuliomoro@15:             a.href = dnlk;
giuliomoro@15:             a.download = filename;
giuliomoro@15:             a.textContent = "Save File";
giuliomoro@15:             return a;
giuliomoro@15:         }
giuliomoro@15:     }
giuliomoro@15:     
giuliomoro@15:     this.getRawScoreData.root.appendChild(this.getRawScoreData.csvDOM);
giuliomoro@15:     this.getRawScoreData.root.appendChild(this.getRawScoreData.jsonDOM);
giuliomoro@15:     this.getRawScoreData.root.appendChild(this.getRawScoreData.xmlDOM);
giuliomoro@15:     this.getRawScoreData.root.appendChild(this.getRawScoreData.presentDOM);
giuliomoro@15:     this.getRawScoreData.XHR.parent = this.getRawScoreData;
giuliomoro@15:     this.getRawScoreData.csvDOM.textContent = 'CSV';
giuliomoro@15:     this.getRawScoreData.csvDOM.addEventListener('click',this.getRawScoreData);
giuliomoro@15:     this.getRawScoreData.jsonDOM.textContent = 'JSON';
giuliomoro@15:     this.getRawScoreData.jsonDOM.addEventListener('click',this.getRawScoreData);
giuliomoro@15:     this.getRawScoreData.xmlDOM.textContent = 'XML';
giuliomoro@15:     this.getRawScoreData.xmlDOM.addEventListener('click',this.getRawScoreData);
giuliomoro@15:     
giuliomoro@15:     this.testSaves = {
giuliomoro@15:         json: null,
giuliomoro@15:         selectedURL: null,
giuliomoro@15:         inputs: [],
giuliomoro@15:         parent: this
giuliomoro@15:     };
giuliomoro@15:     this.init = function() {
giuliomoro@15:         var self = this;
giuliomoro@15:         get('../php/get_tests.php?format=JSON').then(function(response){
giuliomoro@15:             document.getElementById("test-saved").innerHTML = null;
giuliomoro@15:             var table = document.createElement("table");
giuliomoro@15:             table.innerHTML = "<tr><td>Test Filename</td><td>Count</td><td>Include</td></tr>";
giuliomoro@15:             self.testSaves.json = JSON.parse(response);
giuliomoro@15:             for (var test of self.testSaves.json.tests) {
giuliomoro@15:                 var tableRow = document.createElement("tr");
giuliomoro@15:                 var tableRowFilename = document.createElement("td");
giuliomoro@15:                 tableRowFilename.textContent = test.testName;
giuliomoro@15:                 var tableRowCount = document.createElement("td");
giuliomoro@15:                 tableRowCount.textContent = test.files.length;
giuliomoro@15:                 tableRow.appendChild(tableRowFilename);
giuliomoro@15:                 tableRow.appendChild(tableRowCount);
giuliomoro@15:                 var tableRowInclude = document.createElement("td");
giuliomoro@15:                 var obj = {
giuliomoro@15:                     root: document.createElement("input"),
giuliomoro@15:                     parent: self.testSaves,
giuliomoro@15:                     handleEvent: function(event) {
giuliomoro@15:                         this.parent.selectedURL = event.currentTarget.getAttribute("source");
giuliomoro@15:                         var self = this;
giuliomoro@15:                         get(this.parent.selectedURL).then(function(response){
giuliomoro@15:                             var parse = new DOMParser();
giuliomoro@15:                             testData.specification.decode(parse.parseFromString(response,'text/xml'));
giuliomoro@15:                             self.parent.parent.generateFilters(testData.specification);
giuliomoro@15:                             self.parent.parent.getFileCount();
giuliomoro@15:                             return true;
giuliomoro@15:                         },function(error){
giuliomoro@15:                             console.log("ERROR: Could not get"+url);
giuliomoro@15:                             return false;
giuliomoro@15:                         });
giuliomoro@15:                     }
giuliomoro@15:                 }
giuliomoro@15:                 obj.root.type = "radio";
giuliomoro@15:                 obj.root.name = "test-include";
giuliomoro@15:                 obj.root.setAttribute("source",test.testName);
giuliomoro@15:                 obj.root.addEventListener("change",obj);
giuliomoro@15:                 tableRowInclude.appendChild(obj.root);
giuliomoro@15:                 tableRow.appendChild(tableRowInclude);
giuliomoro@15:                 table.appendChild(tableRow);
giuliomoro@15:                 self.testSaves.inputs.push(obj);
giuliomoro@15:             }
giuliomoro@15:             document.getElementById("test-saved").appendChild(table);
giuliomoro@15:         },function(error){console.error(error);});
giuliomoro@15:     }
giuliomoro@15:     
giuliomoro@15:     this.filterDOM = document.createElement("div");
giuliomoro@15:     this.filterDOM.innerHTML = "<p>PreTest Filters</p><div id='filter-count'></div>";
giuliomoro@15:     this.filterObjects = [];
giuliomoro@15:     this.generateFilters = function(specification) {
giuliomoro@15:         // Filters are based on the pre and post global surverys
giuliomoro@15:         var FilterObject = function(parent,specification) {
giuliomoro@15:             this.parent = parent;
giuliomoro@15:             this.specification = specification;
giuliomoro@15:             this.rootDOM = document.createElement("div");
giuliomoro@15:             this.rootDOM.innerHTML = "<span>ID: "+specification.id+", Type: "+specification.type+"</span>";
giuliomoro@15:             this.rootDOM.className = "filter-entry";
giuliomoro@15:             this.handleEvent = function(event) {
giuliomoro@15:                 switch(this.specification.type) {
giuliomoro@15:                     case "number":
giuliomoro@15:                         var name = event.currentTarget.name;
giuliomoro@15:                         eval("this."+name+" = event.currentTarget.value");
giuliomoro@15:                         break;
giuliomoro@15:                     case "checkbox":
giuliomoro@15:                         break;
giuliomoro@15:                     case "radio":
giuliomoro@15:                         break;
giuliomoro@15:                 }
giuliomoro@15:                 this.parent.getFileCount();
giuliomoro@15:             }
giuliomoro@15:             this.getFilterPairs = function() {
giuliomoro@15:                 var pairs = [];
giuliomoro@15:                 switch(this.specification.type) {
giuliomoro@15:                     case "number":
giuliomoro@15:                         if (this.min != "") {
giuliomoro@15:                             pairs.push([specification.id+"-min",this.min]);
giuliomoro@15:                         }
giuliomoro@15:                         if (this.max != "") {
giuliomoro@15:                             pairs.push([specification.id+"-max",this.max]);
giuliomoro@15:                         }
giuliomoro@15:                         break;
giuliomoro@15:                     case "radio":
giuliomoro@15:                     case "checkbox":
giuliomoro@15:                         for (var i=0; i<this.options.length; i++) {
giuliomoro@15:                             if (!this.options[i].checked) {
giuliomoro@15:                                 pairs.push([specification.id+"-exclude-"+i,specification.options[i].name]);
giuliomoro@15:                             }
giuliomoro@15:                         }
giuliomoro@15:                         break;
giuliomoro@15:                 }
giuliomoro@15:                 return pairs;
giuliomoro@15:             }
giuliomoro@15:             switch(specification.type) {
giuliomoro@15:                 case "number":
giuliomoro@15:                     // Number can be ranged by min/max levels
giuliomoro@15:                     this.min = "";
giuliomoro@15:                     this.max = "";
giuliomoro@15:                     this.minDOM = document.createElement("input");
giuliomoro@15:                     this.minDOM.type = "number";
giuliomoro@15:                     this.minDOM.name = "min";
giuliomoro@15:                     this.minDOM.addEventListener("change",this);
giuliomoro@15:                     this.minDOMText = document.createElement("span");
giuliomoro@15:                     this.minDOMText.textContent = "Minimum: ";
giuliomoro@15:                     var pairHolder = document.createElement("div");
giuliomoro@15:                     pairHolder.appendChild(this.minDOMText);
giuliomoro@15:                     pairHolder.appendChild(this.minDOM);
giuliomoro@15:                     this.rootDOM.appendChild(pairHolder);
giuliomoro@15:                     
giuliomoro@15:                     this.maxDOM = document.createElement("input");
giuliomoro@15:                     this.maxDOM.type = "number";
giuliomoro@15:                     this.maxDOM.name = "max";
giuliomoro@15:                     this.maxDOM.addEventListener("change",this);
giuliomoro@15:                     this.maxDOMText = document.createElement("span");
giuliomoro@15:                     this.maxDOMText.textContent = "Maximum: ";
giuliomoro@15:                     var pairHolder = document.createElement("div");
giuliomoro@15:                     pairHolder.appendChild(this.maxDOMText);
giuliomoro@15:                     pairHolder.appendChild(this.maxDOM);
giuliomoro@15:                     this.rootDOM.appendChild(pairHolder);
giuliomoro@15:                     break;
giuliomoro@15:                 case "radio":
giuliomoro@15:                 case "checkbox":
giuliomoro@15:                     this.options = [];
giuliomoro@15:                     for (var i=0; i<specification.options.length; i++) {
giuliomoro@15:                         var option = specification.options[i];
giuliomoro@15:                         var pairHolder = document.createElement("div");
giuliomoro@15:                         var text = document.createElement("span");
giuliomoro@15:                         text.textContent = option.text;
giuliomoro@15:                         var check = document.createElement("input");
giuliomoro@15:                         check.type = "checkbox";
giuliomoro@15:                         check.setAttribute("option-index",i);
giuliomoro@15:                         check.checked = true;
giuliomoro@15:                         check.addEventListener("click",this);
giuliomoro@15:                         this.options.push(check);
giuliomoro@15:                         pairHolder.appendChild(text);
giuliomoro@15:                         pairHolder.appendChild(check);
giuliomoro@15:                         this.rootDOM.appendChild(pairHolder);
giuliomoro@15:                     }
giuliomoro@15:                     break;
giuliomoro@15:                 default:
giuliomoro@15:                     break;
giuliomoro@15:             }
giuliomoro@15:         }
giuliomoro@15:         var options = [];
giuliomoro@15:         if(specification.preTest) {
giuliomoro@15:             options = options.concat(specification.preTest.options);
giuliomoro@15:         }
giuliomoro@15:         if (specification.postTest) {
giuliomoro@15:             options = options.concat(specification.postTest.options);
giuliomoro@15:         }
giuliomoro@15:         for (var survey_entry of options) {
giuliomoro@15:             switch(survey_entry.type) {
giuliomoro@15:                 case "number":
giuliomoro@15:                 case "radio":
giuliomoro@15:                 case "checkbox":
giuliomoro@15:                     var node = new FilterObject(this,survey_entry);
giuliomoro@15:                     this.filterObjects.push(node);
giuliomoro@15:                     this.filterDOM.appendChild(node.rootDOM);
giuliomoro@15:                     break;
giuliomoro@15:                 default:
giuliomoro@15:                     break;
giuliomoro@15:             }
giuliomoro@15:         }
giuliomoro@15:         document.getElementById("test-saved").appendChild(this.filterDOM);
giuliomoro@15:         document.getElementById("test-saved").appendChild(this.getDataButton.button);
giuliomoro@15:         document.getElementById("test-saved").appendChild(this.getRawScoreData.root);
giuliomoro@15:     }
giuliomoro@15:     this.getFilterString = function() {
giuliomoro@15:         var pairs = [];
giuliomoro@15:         for (var obj of this.filterObjects) {
giuliomoro@15:             pairs = pairs.concat(obj.getFilterPairs());
giuliomoro@15:         }
giuliomoro@15:         var req_str = "?url="+this.testSaves.selectedURL;
giuliomoro@15:         var index = 0;
giuliomoro@15:         while(pairs[index] != undefined) {
giuliomoro@15:             req_str += '&';
giuliomoro@15:             req_str += pairs[index][0]+"="+pairs[index][1];
giuliomoro@15:             index++;
giuliomoro@15:         }
giuliomoro@15:         return req_str;
giuliomoro@15:     }
giuliomoro@15:     this.getFilteredUrlArray = function() {
giuliomoro@15:         var req_str = "../php/get_filtered_count.php"+this.getFilterString();
giuliomoro@15:         return get(req_str).then(function(response){
giuliomoro@15:             var urls = JSON.parse(response);
giuliomoro@15:             return urls.urls;
giuliomoro@15:         },function(error){
giuliomoro@15:             console.error(error);
giuliomoro@15:         });
giuliomoro@15:     }
giuliomoro@15:     this.getFileCount = function() {
giuliomoro@15:         // First we must get the filter pairs
giuliomoro@15:         this.getFilteredUrlArray().then(function(response){
giuliomoro@15:             var str = "Filtered to "+response.length+" file";
giuliomoro@15:             if (response.length != 1) {
giuliomoro@15:                 str += "s.";
giuliomoro@15:             } else {
giuliomoro@15:                 str += ".";
giuliomoro@15:             }
giuliomoro@15:             document.getElementById("filter-count").textContent = str;
giuliomoro@15:         },function(error){});
giuliomoro@15:     }
giuliomoro@15:     
giuliomoro@15:     this.init();
giuliomoro@15: }