datavec/datavec-api/src/main/resources/templates/sequenceplot.ftl
<html>
<head>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
.bgcolor {
background-color: #FFFFFF;
}
.hd {
background-color: #000000;
font-size: 18px;
color: #FFFFFF;
}
.sectionheader {
background-color: #888888;
width:100%;
font-size: 16px;
font-style: bold;
color: #FFFFFF;
/*padding-left: 40px;*/
/*padding-right: 8px;*/
/*padding-top: 2px;*/
/*padding-bottom: 2px;*/
}
.subsectiontop {
background-color: #F5F5FF;
height: 300px;
}
.subsectionbottom {
background-color: #F5F5FF;
height: 540px;
}
h1 {
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 28px;
font-style: bold;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
h3 {
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
div.outerelements {
padding-bottom: 30px;
}
/** Line charts */
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.tick line {
opacity: 0.2;
shape-rendering: crispEdges;
}
/** Bar charts */
.bar {
fill: steelblue;
}
rect {
fill: steelblue;
}
.legend rect {
fill:white;
stroke:black;
opacity:0.8;
}
</style>
<title>Data Analysis</title>
</head>
<body style="padding: 0px; margin: 0px" onload="generateContent()">
<#--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function generateContent(){
var mainDiv = $('#maindiv');
var div2 = $('#tablesource');
var div2html = div2.html();
createTable(jQuery.parseJSON(div2html)["RenderableComponentTable"], "Summary Table", $('#tablediv'));
var chartdiv = $("#chartdiv");
<#list divnames as chartid>
var div_${chartid} = $('#${chartid}');
var html_${chartid} = div_${chartid}.html();
createLineChart(jQuery.parseJSON(html_${chartid})["RenderableComponentLineChart"], chartdiv, 1000, 450);
</#list>
}
function createTable(tableObj, tableId, appendTo) {
//Expect RenderableComponentTable
var header = tableObj['header'];
var values = tableObj['table'];
var title = tableObj['title'];
var border = tableObj['border'];
var padLeft = tableObj['padLeftPx'];
var padRight = tableObj['padRightPx'];
var padTop = tableObj['padTopPx'];
var padBottom = tableObj['padBottomPx'];
var colWidths = tableObj['colWidthsPercent'];
var nRows = (values ? values.length : 0);
var backgroundColor = tableObj['backgroundColor'];
var headerColor = tableObj['headerColor'];
var tbl = document.createElement('table');
tbl.style.width = '100%';
// tbl.style.height = '100%';
tbl.setAttribute('border', border);
if(backgroundColor) tbl.style.backgroundColor = backgroundColor;
if (colWidths) {
for (var i = 0; i < colWidths.length; i++) {
var col = document.createElement('col');
col.setAttribute('width', colWidths[i] + '%');
tbl.appendChild(col);
}
}
if (header) {
var theader = document.createElement('thead');
var headerRow = document.createElement('tr');
if(headerColor) headerRow.style.backgroundColor = headerColor;
for (var i = 0; i < header.length; i++) {
var headerd = document.createElement('th');
headerd.style.padding = padTop + 'px ' + padRight + 'px ' + padBottom + 'px ' + padLeft + 'px';
headerd.appendChild(document.createTextNode(header[i]));
headerRow.appendChild(headerd);
}
tbl.appendChild(headerRow);
}
//Add content:
if (values) {
var tbdy = document.createElement('tbody');
for (var i = 0; i < values.length; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < values[i].length; j++) {
var td = document.createElement('td');
td.style.padding = padTop + 'px ' + padRight + 'px ' + padBottom + 'px ' + padLeft + 'px';
td.appendChild(document.createTextNode(values[i][j]));
tr.appendChild(td);
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
}
appendTo.append(tbl);
}
/** Create + add line chart with multiple lines, (optional) title, (optional) series names.
* appendTo: jquery selector of object to append to. MUST HAVE ID
* */
function createLineChart(chartObj, appendTo, chartWidth, chartHeight) {
//Expect: RenderableComponentLineChart
var title = chartObj['title'];
var xData = chartObj['x'];
var yData = chartObj['y'];
var mTop = chartObj['marginTop'];
var mBottom = chartObj['marginBottom'];
var mLeft = chartObj['marginLeft'];
var mRight = chartObj['marginRight'];
var removeAxisHorizontal = chartObj['removeAxisHorizontal'];
var seriesNames = chartObj['seriesNames'];
var withLegend = chartObj['legend'];
var nSeries = (!xData ? 0 : xData.length);
// Set the dimensions of the canvas / graph
var margin = {top: mTop, right: mRight, bottom: mBottom, left: mLeft},
width = chartWidth - margin.left - margin.right,
height = chartHeight - margin.top - margin.bottom;
// Set the ranges
var xScale = d3.scale.linear().range([0, width]);
var yScale = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(xScale)
.innerTickSize(-height) //used as grid line
.orient("bottom").ticks(5);
if(removeAxisHorizontal == true){
xAxis.tickValues([]);
}
var yAxis = d3.svg.axis().scale(yScale)
.innerTickSize(-width) //used as grid line
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function (d) {
return xScale(d.xPos);
})
.y(function (d) {
return yScale(d.yPos);
});
// Adds the svg canvas
var svg = d3.select("#" + appendTo.attr("id"))
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("padding", "20px")
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Scale the range of the chart
var xMin = Number.MAX_VALUE;
var xMax = -Number.MAX_VALUE;
var yMax = -Number.MAX_VALUE;
var yMin = Number.MAX_VALUE;
for (var i = 0; i < nSeries; i++) {
var xV = xData[i];
var yV = yData[i];
var thisMin = d3.min(xV);
var thisMax = d3.max(xV);
var thisMaxY = d3.max(yV);
var thisMinY = d3.min(yV);
if (thisMin < xMin) xMin = thisMin;
if (thisMax > xMax) xMax = thisMax;
if (thisMaxY > yMax) yMax = thisMaxY;
if (thisMinY < yMin) yMin = thisMinY;
}
if (yMin > 0) yMin = 0;
xScale.domain([xMin, xMax]);
yScale.domain([yMin, yMax]);
// Add the valueline path.
var color = d3.scale.category10();
for (var i = 0; i < nSeries; i++) {
var xVals = xData[i];
var yVals = yData[i];
var data = xVals.map(function (d, i) {
return {'xPos': xVals[i], 'yPos': yVals[i]};
});
svg.append("path")
.attr("class", "line")
.style("stroke", color(i))
.attr("d", valueline(data));
}
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
//Add legend (if present)
if (seriesNames && withLegend == true) {
var legendSpace = width / i;
for (var i = 0; i < nSeries; i++) {
var values = xData[i];
var yValues = yData[i];
var lastX = values[values.length - 1];
var lastY = yValues[yValues.length - 1];
var toDisplay;
if (!lastX || !lastY) toDisplay = seriesNames[i] + " (no data)";
else toDisplay = seriesNames[i] + " (" + lastX.toPrecision(5) + "," + lastY.toPrecision(5) + ")";
svg.append("text")
.attr("x", (legendSpace / 2) + i * legendSpace) // spacing
.attr("y", height + (margin.bottom / 2) + 5)
.attr("class", "legend") // style the legend
.style("fill", color(i))
.text(toDisplay);
}
}
//Add title (if present)
if (title) {
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - ((margin.top - 30) / 2))
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("text-decoration", "underline")
.text(title);
}
}
</script>
<table style="width: 100%; padding: 5px" class="hd">
<tbody>
<tr>
<td style="width:15px; height:35px; padding: 4px 15px;">
<td>Sequence Plots - ${pagetitle}</td>
<td style="text-align:right">${datetime}</td>
<td style="width:15px; height:35px; padding: 4px 15px;">
</tr>
</tbody>
</table>
<div style="width:1200px; margin:0 auto; border:0px" id="outerdiv">
<div style="width:100%; padding-top:20px" id="maindiv">
<div style="width:100%; height:20px"></div>
<div style="width:100%;" class="sectionheader">
<div style="padding-left:40px; padding-top:3px; padding-bottom:3px">
Schema
</div>
</div>
<div style="width:100%; height:auto" align="center" id="tablediv">
</div>
<div style="width:100%; height:20px"></div>
<div style="width:100%;" class="sectionheader">
<div style="padding-left:40px; padding-top:3px; padding-bottom:3px">
Line Charts - Numerical and Categorical Columns
</div>
</div>
<div style="width:100%; height:auto" align="center" id="chartdiv">
</div>
</div>
</div>
<#list divs as div>
<div id="${div.id}" style="display:none">
${div.content}
</div>
</#list>
</body>
</html>