1. Created folder structure for the theme components (css, images, js) so that visualizations can become theme agnostic.
2. Modified FreeMarkerized (FM) sparklines on the profile page to actually make calls to freemarker version of person publication count sparkline. (TODO: currently the code to replace "/visualization" with "/visualizationfm" is hard coded. Thsi will be resolved once change is made in IndividualController to call FM personPubCount controller.) 3. Added new templates for FM version of visualizations. 4. Added a new bean which recognized FM versions of visualizations. 5. Created FM branch of the visualization architecture & Person publication count visualization. 6. For Person pub count abstracted out the html/javascript code creator to be on the front end itself. (TODO: refactor SparklineData VO to remove attributes that save the html/js code.)
This commit is contained in:
cdtank
parent
72e24bb661
commit
7e9bcdaab2
38 changed files with 4302 additions and 1 deletions
|
|
@ -0,0 +1,100 @@
|
|||
${headScripts.add("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js")}
|
||||
${headScripts.add("http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22areachart%22%2C%22imagesparkline%22%5D%7D%5D%7D")}
|
||||
|
||||
This is Dummy Vis Client. For Real!
|
||||
Really Re!
|
||||
|
||||
${urls.base}
|
||||
|
||||
<c:url var="loadingImageLink" value="/${themeDir}site_icons/visualization/ajax-loader.gif"></c:url>
|
||||
|
||||
<#assign loadingImageLink = '/${themeDir}site_icons/visualization/ajax-loader.gif'>
|
||||
|
||||
<#assign uri="http://vivo-trunk.indiana.edu/individual/n6079">
|
||||
<#assign testURL = '${urls.base}/visualization?vis=person_pub_count&container=ajax_recipient&render_mode=dynamic&vis_mode=wth&uri=${uri?url}'>
|
||||
|
||||
<style type="text/css">
|
||||
.get_vis {
|
||||
background-color:Yellow;
|
||||
color:blue;
|
||||
cursor:pointer;
|
||||
height:36px;
|
||||
width:225px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
function renderVisualization(visualizationURL) {
|
||||
|
||||
$("#ajax_recipient").empty().html('<img src="${loadingImageLink?url}" />');
|
||||
|
||||
$.ajax({
|
||||
url: visualizationURL,
|
||||
dataType: "html",
|
||||
success:function(data){
|
||||
$("#ajax_recipient").html(data);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$("#ajax_activator").click(function() {
|
||||
$.ajax({
|
||||
url: '${testURL}',
|
||||
dataType: "html",
|
||||
success:function(data){
|
||||
|
||||
|
||||
$("#ajax_recipient").html(data);
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
//-->
|
||||
</script>
|
||||
|
||||
<div class="staticPageBackground">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
#test-bed {
|
||||
background-color:red;
|
||||
color:white;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<h1 id="test-bed">Visualization Testbed (Not to be seen by eventual end users)</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2 id="ajax_activator">Hello World!</h2>
|
||||
|
||||
<c:url var="staticHref" value="/visualization">
|
||||
<c:param name="vis" value="person_pub_count"/>
|
||||
<c:param name="render_mode" value="standalone"/>
|
||||
<c:param name="vis_mode" value="wth"/>
|
||||
<c:param name="uri" value="http://vivo.library.cornell.edu/ns/0.1#individual5156"/>
|
||||
</c:url>
|
||||
|
||||
<a href="${testURL}">vis query for person -> "Crane, Brian"</a>
|
||||
|
||||
|
||||
<div id="ajax_recipient">iioio</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
|
||||
|
||||
<#assign googleJSAPI = 'http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22areachart%22%2C%22imagesparkline%22%5D%7D%5D%7D'>
|
||||
|
||||
${headScripts.add(googleJSAPI)}
|
||||
|
||||
<#include "/visualization/publicationSparklineContent.ftl">
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
<#assign visContainerID = '${sparklineVO.visContainerDivID}'>
|
||||
|
||||
<#if sparklineVO.shortVisMode>
|
||||
<#assign sparklineContainerID = 'pub_count_short_sparkline_vis'>
|
||||
<#else>
|
||||
<#assign sparklineContainerID = 'pub_count_full_sparkline_vis'>
|
||||
</#if>
|
||||
|
||||
<#-- This is used to prevent collision between sparkline & visualization conatiner div ids. -->
|
||||
<#if visContainerID?upper_case == sparklineContainerID?upper_case>
|
||||
<#assign sparklineContainerID = visContainerID + "_spark">
|
||||
</#if>
|
||||
|
||||
<div class="staticPageBackground">
|
||||
|
||||
<div id="${visContainerID}">
|
||||
|
||||
<style type='text/css'>
|
||||
.sparkline_style table {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
table.sparkline_wrapper_table
|
||||
td,th {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.vis_link a {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
td.sparkline_number {
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
td.sparkline_text {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.incomplete-data-holder {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function drawPubCountVisualization(providedSparklineImgTD) {
|
||||
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('string', 'Year');
|
||||
data.addColumn('number', 'Publications');
|
||||
data.addRows(${sparklineVO.numOfYearsToBeRendered});
|
||||
|
||||
<#list sparklineVO.yearToPublicationCountDataTable as yearToPublicationCountDataElement>
|
||||
data.setValue(${yearToPublicationCountDataElement.publicationCounter}, 0, '${yearToPublicationCountDataElement.publishedYear}');
|
||||
data.setValue(${yearToPublicationCountDataElement.publicationCounter}, 1, ${yearToPublicationCountDataElement.currentPublications});
|
||||
</#list>
|
||||
|
||||
<#-- Create a view of the data containing only the column pertaining to publication count. -->
|
||||
var sparklineDataView = new google.visualization.DataView(data);
|
||||
sparklineDataView.setColumns([1]);
|
||||
|
||||
<#if sparklineVO.shortVisMode>
|
||||
|
||||
console.log("Yay! Short Vis Mode!");
|
||||
|
||||
<#-- For the short view we only want the last 10 year's view of publication count, hence we filter
|
||||
the data we actually want to use for render. -->
|
||||
|
||||
sparklineDataView.setRows(data.getFilteredRows([{
|
||||
column: 0,
|
||||
minValue: '${sparklineVO.earliestRenderedPublicationYear?c}',
|
||||
maxValue: '${sparklineVO.latestRenderedPublicationYear?c}'
|
||||
/*minValue: '2001',
|
||||
maxValue: '2011'*/
|
||||
}]));
|
||||
|
||||
|
||||
<#else>
|
||||
|
||||
console.log("Yay! Full Vis Mode!");
|
||||
|
||||
</#if>
|
||||
|
||||
|
||||
<#-- Create the vis object and draw it in the div pertaining to sparkline. -->
|
||||
var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]);
|
||||
sparkline.draw(sparklineDataView, {
|
||||
width: 65,
|
||||
height: 30,
|
||||
showAxisLines: false,
|
||||
showValueLabels: false,
|
||||
labelPosition: 'none'
|
||||
});
|
||||
|
||||
<#if sparklineVO.shortVisMode>
|
||||
|
||||
<#-- We want to display how many publication counts were considered, so this is used to calculate this. -->
|
||||
|
||||
var shortSparkRows = sparklineDataView.getViewRows();
|
||||
var renderedShortSparks = 0;
|
||||
$.each(shortSparkRows, function(index, value) {
|
||||
renderedShortSparks += data.getValue(value, 1);
|
||||
});
|
||||
|
||||
$('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedShortSparks) + parseInt(${sparklineVO.unknownYearPublications}));
|
||||
|
||||
var sparksText = ' publication(s) within the last 10 years <span class="incomplete-data-holder" title="This information'
|
||||
+ ' is based solely on publications which have been loaded into the VIVO system. This may only be a small'
|
||||
+ ' sample of the person\'s total work.">incomplete list</span>';
|
||||
|
||||
<#else>
|
||||
|
||||
/*
|
||||
* Sparks that will be rendered will always be the one's which has
|
||||
* any year associated with it. Hence.
|
||||
* */
|
||||
var renderedSparks = ${sparklineVO.renderedSparks};
|
||||
$('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedSparks) + parseInt(${sparklineVO.unknownYearPublications}));
|
||||
|
||||
var sparksText = ' publication(s) from <span class="sparkline_range">${sparklineVO.earliestYearConsidered?c}'
|
||||
+ ' to ${sparklineVO.latestRenderedPublicationYear?c}</span> '
|
||||
+ ' <a href="${sparklineVO.downloadDataLink}" class="inline_href">(.CSV File)</a> ';
|
||||
</#if>
|
||||
|
||||
$('#${sparklineContainerID} td.sparkline_text').html(sparksText);
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* This will activate the visualization. It takes care of creating
|
||||
* div elements to hold the actual sparkline image and then calling the
|
||||
* drawPubCountVisualization function.
|
||||
* */
|
||||
|
||||
$(document).ready(function() {
|
||||
var sparklineImgTD;
|
||||
|
||||
/*
|
||||
* This is a nuclear option (creating the container in which everything goes)
|
||||
* the only reason this will be ever used is the API user never submitted a
|
||||
* container ID in which everything goes. The alternative was to let the
|
||||
* vis not appear in the calling page at all. So now atleast vis appears but
|
||||
* appended at the bottom of the body.
|
||||
* */
|
||||
|
||||
if ($('#${visContainerID}').length === 0) {
|
||||
$('<div/>', {
|
||||
'id': '${visContainerID}'
|
||||
}).appendTo('body');
|
||||
}
|
||||
|
||||
if ($('#${sparklineContainerID}').length === 0) {
|
||||
|
||||
$('<div/>', {
|
||||
'id': '${sparklineContainerID}',
|
||||
'class': 'sparkline_style'
|
||||
}).prependTo('#${visContainerID}');
|
||||
|
||||
var table = $('<table>');
|
||||
table.attr('class', 'sparkline_wrapper_table');
|
||||
var row = $('<tr>');
|
||||
sparklineImgTD = $('<td>');
|
||||
sparklineImgTD.attr('id', '${sparklineContainerID}_img');
|
||||
sparklineImgTD.attr('width', '65');
|
||||
sparklineImgTD.attr('align', 'right');
|
||||
sparklineImgTD.attr('class', 'sparkline_style');
|
||||
|
||||
row.append(sparklineImgTD);
|
||||
|
||||
console.log(sparklineImgTD);
|
||||
|
||||
var sparklineNumberTD = $('<td>');
|
||||
sparklineNumberTD.attr('width', '30');
|
||||
sparklineNumberTD.attr('align', 'right');
|
||||
sparklineNumberTD.attr('class', 'sparkline_number');
|
||||
row.append(sparklineNumberTD);
|
||||
var sparklineTextTD = $('<td>');
|
||||
sparklineTextTD.attr('width', '450');
|
||||
sparklineTextTD.attr('class', 'sparkline_text');
|
||||
row.append(sparklineTextTD);
|
||||
table.append(row);
|
||||
table.prependTo('#${sparklineContainerID}');
|
||||
|
||||
}
|
||||
|
||||
console.log(sparklineImgTD);
|
||||
|
||||
drawPubCountVisualization(sparklineImgTD);
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<#if sparklineVO.shortVisMode>
|
||||
|
||||
<span class="vis_link">
|
||||
<a href="${sparklineVO.fullTimelineNetworkLink}">View all VIVO publications and corresponding co-author network.</a>
|
||||
|
||||
</span>
|
||||
|
||||
<#else>
|
||||
|
||||
<!-- For Full Sparkline - Print the Table of Publication Counts per Year -->
|
||||
<p>
|
||||
<table id='sparkline_data_table'>
|
||||
<caption>
|
||||
Publications per year <a href="${sparklineVO.downloadDataLink}">(.CSV File)</a>
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Year
|
||||
</th>
|
||||
<th>
|
||||
Publications
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<#list sparklineVO.yearToActivityCount?keys as year>
|
||||
<tr>
|
||||
<td>
|
||||
${year}
|
||||
</td>
|
||||
<td>
|
||||
${sparklineVO.yearToActivityCount[year]}
|
||||
</td>
|
||||
</tr>
|
||||
</#list>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
Download data as <a href="${sparklineVO.downloadDataLink}">.csv</a> file.
|
||||
<br />
|
||||
</p>
|
||||
|
||||
</#if>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
|
||||
|
||||
<#if shouldVIVOrenderVis>
|
||||
<#include "/visualization/publicationSparklineContent.ftl">
|
||||
</#if>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<%-- $This file is distributed under the terms of the license in /doc/license.txt$ --%>
|
||||
|
||||
<div class="staticPageBackground">
|
||||
|
||||
${error}
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue