diff options
Diffstat (limited to 'app/static')
| -rw-r--r-- | app/static/js/buttons.js | 75 | ||||
| -rw-r--r-- | app/static/js/makeChart.js | 129 | ||||
| -rw-r--r-- | app/static/js/updateTable.js | 62 |
3 files changed, 266 insertions, 0 deletions
diff --git a/app/static/js/buttons.js b/app/static/js/buttons.js new file mode 100644 index 0000000..d26a15d --- /dev/null +++ b/app/static/js/buttons.js @@ -0,0 +1,75 @@ +function resetOnClick() { + var changepoints = d3.selectAll(".changepoint"); + changepoints.each(function(d, i) { + var elem = d3.select(this); + elem.classed("changepoint", false); + elem.style("fill", "blue"); + }); + updateTable(); +} + +function noCPOnClick(task_id) { + var changepoints = document.getElementsByClassName("changepoint"); + // validation + if (changepoints.length > 0) { + $('#NoCPYesCPModal').modal(); + return; + } + + var obj = { + task: task_id, + changepoints: null + }; + + var xhr = new XMLHttpRequest(); + xhr.open("POST", ""); + xhr.withCredentials = true; + xhr.setRequestHeader("Content-Type", "application/json"); + xhr.send(JSON.stringify(obj)); + xhr.onreadystatechange = function() { + if (xhr.readyState == XMLHttpRequest.DONE) { + if (xhr.status === 200) + window.location.href = xhr.responseText; + } else { + console.log("Error: " + xhr.status); + } + }; +} + +function submitOnClick(task_id) { + var changepoints = document.getElementsByClassName("changepoint"); + // validation + if (changepoints.length === 0) { + $('#submitNoCPModal').modal(); + return; + } + + var obj = {}; + obj["task"] = task_id; + obj["changepoints"] = []; + var i, cp; + for (i=0; i<changepoints.length; i++) { + cp = changepoints[i]; + elem = { + id: i, + x: cp.getAttribute("data_X"), + y: cp.getAttribute("data_Y") + }; + obj["changepoints"].push(elem); + } + + var xhr = new XMLHttpRequest(); + xhr.open("POST", ""); + xhr.withCredentials = true; + xhr.setRequestHeader("Content-Type", "application/json"); + xhr.send(JSON.stringify(obj)); + xhr.onreadystatechange = function() { + if (xhr.readyState == XMLHttpRequest.DONE) { + if (xhr.status === 200) + window.location.href = xhr.responseText; + } else { + console.log("Error: " + xhr.status); + } + }; +} + diff --git a/app/static/js/makeChart.js b/app/static/js/makeChart.js new file mode 100644 index 0000000..35069b6 --- /dev/null +++ b/app/static/js/makeChart.js @@ -0,0 +1,129 @@ +function makeChart(data) { + var n = 0; + data.forEach(function(d) { + d.X = n++; + d.Y = d.value; + }); + + var divWidth = 1000; + var divHeight = 480; + + var svg = d3.select("#graph") + .on("touchstart", nozoom) + .on("touchmove", nozoom) + .append("svg") + .attr("width", divWidth) + .attr("height", divHeight); + + var margin = {top: 20, right: 20, bottom: 50, left: 50}; + var width = +svg.attr("width") - margin.left - margin.right; + var height = +svg.attr("height") - margin.top - margin.bottom; + + var zoom = d3.zoom() + .scaleExtent([1, 50]) + .translateExtent([[0, 0], [width, height]]) + .extent([[0, 0], [width, height]]) + .on("zoom", zoomed); + + var x = d3.scaleLinear().range([0, width]); + var x2 = d3.scaleLinear().range([0, width]); + var y = d3.scaleLinear().range([height, 0]); + + var xAxis = d3.axisBottom(x); + var yAxis = d3.axisLeft(y); + + var xExtent = d3.extent(data, function(d) { return d.X; }); + var xRange = xExtent[1] - xExtent[0]; + var xDomainMin = xExtent[0] - xRange * 0.02; + var xDomainMax = xExtent[1] + xRange * 0.02; + + var yExtent = d3.extent(data, function(d) { return d.Y; }); + var yRange = yExtent[1] - yExtent[0]; + var yDomainMin = yExtent[0] - yRange * 0.05; + var yDomainMax = yExtent[1] + yRange * 0.05; + + x.domain([xDomainMin, xDomainMax]); + y.domain([yDomainMin, yDomainMax]); + x2.domain(x.domain()); + + svg.append("defs").append("clipPath") + .attr("id", "clip") + .append("rect") + .attr("width", width - 30) + .attr("height", height) + .attr("transform", "translate(" + 30 + ",0)"); + + svg.append("g") + .attr("class", "axis axis--y") + .attr("transform", "translate(" + 30 + ",0)") + .call(yAxis); + + svg.append("g") + .attr("class", "axis axis--x") + .attr("transform", "translate(0," + height + ")") + .call(xAxis); + + svg.append("text") + .attr("text-anchor", "middle") + .attr("class", "axis-label") + .attr("transform", "translate(" + (width - 20) + "," + (height + 50) + ")") + .text("Time"); + + var line = d3.line() + .x(function(d) { return x(d.X); }) + .y(function(d) { return y(d.Y); }); + + var g = svg.append("g") + .call(zoom); + + g.append("rect") + .attr("width", width) + .attr("height", height); + + var view = g.append("g") + .attr("class", "view"); + + view.append("path") + .datum(data) + .attr("class", "line") + .attr("d", line); + + var points = view.selectAll("circle") + .data(data) + .enter().append("circle") + .attr("cx", function(d) { return x(d.X); }) + .attr("cy", function(d) { return y(d.Y); }) + .attr("data_X", function(d) { return d.X; }) + .attr("data_Y", function(d) { return d.Y; }) + .attr("r", 5) + .on("click", clicked); + + function zoomed() { + t = d3.event.transform; + x.domain(t.rescaleX(x2).domain()); + svg.select(".line").attr("d", line); + points.data(data) + .attr("cx", function(d) { return x(d.X); }) + .attr("cy", function(d) { return y(d.Y); }); + svg.select(".axis--x").call(xAxis); + } + + function clicked(d, i) { + if (d3.event.defaultPrevented) return; // zoomed + + // this function handles changepoint marking + var elem = d3.select(this); + if (elem.classed("changepoint")) { + elem.style("fill", "blue"); + elem.classed("changepoint", false); + } else { + elem.style("fill", "red"); + elem.classed("changepoint", true); + } + updateTable(); + } + + function nozoom() { + d3.event.preventDefault(); + } +} diff --git a/app/static/js/updateTable.js b/app/static/js/updateTable.js new file mode 100644 index 0000000..7d68aad --- /dev/null +++ b/app/static/js/updateTable.js @@ -0,0 +1,62 @@ +function updateTable() { + var changepoints = document.getElementsByClassName("changepoint"); + + var myTableDiv = document.getElementById("changepoint-table"); + + var old_table = document.getElementById("cp-table"); + old_table.remove(); + + var table = document.createElement('TABLE') + table.id = "cp-table"; + table.className = "table table-striped"; + + if (changepoints.length == 0) { + myTableDiv.appendChild(table); + return; + } + + var heading = new Array(); + heading[0] = "#"; + heading[1] = "X"; + heading[2] = "Y"; + + // TABLE COLUMNS + var thead = document.createElement('THEAD'); + thead.className = "thead-dark"; + table.appendChild(thead); + for (i = 0; i < heading.length; i++) { + var th = document.createElement('TH') + th.appendChild(document.createTextNode(heading[i])); + th.setAttribute("scope", "col"); + thead.appendChild(th); + } + var body = document.createElement("TBODY"); + + //TABLE ROWS + for (i = 0; i < changepoints.length; i++) { + cp = changepoints[i]; + + var tr = document.createElement('TR'); + + var th = document.createElement('TH'); + th.setAttribute("scope", "row"); + th.appendChild(document.createTextNode(i+1)); + tr.appendChild(th); + + var td = document.createElement('TD'); + td.appendChild(document.createTextNode( + d3.select(cp).data()[0].X + )); + tr.appendChild(td); + + var td = document.createElement('TD'); + td.appendChild(document.createTextNode( + d3.select(cp).data()[0].Y + )); + tr.appendChild(td); + + body.appendChild(tr); + } + table.appendChild(body); + myTableDiv.appendChild(table); +} |