1) Created a ftl for displaying Temporal vis Grants.
2) Made changes to util.js to reflect the state (grants or pubs)
This commit is contained in:
bkoniden
parent
ca4b049797
commit
51f108547a
5 changed files with 385 additions and 3 deletions
|
|
@ -736,7 +736,11 @@ function prepareTableForDataTablePagination(jsonData){
|
|||
entityLabelTH.html('Entity Label');
|
||||
|
||||
var publicationCountTH = $('<th>');
|
||||
if($("select.comparisonValues option:selected").text() === "by Publications"){
|
||||
publicationCountTH.html('Publication Count');
|
||||
}else{
|
||||
publicationCountTH.html('Grant Count');
|
||||
}
|
||||
|
||||
var entityTypeTH = $('<th>');
|
||||
entityTypeTH.html('Entity Type');
|
||||
|
|
|
|||
|
|
@ -11,5 +11,5 @@ var contextPath = "${urls.base}";
|
|||
</script>
|
||||
|
||||
<div id="body">
|
||||
<p>This Organization has neither Sub-Organizations nor People. Please visit this Organization's <a href="${organizationVivoProfileURL}">profile page.</a></p>
|
||||
<p>This Organization has neither Sub-Organizations nor People. Please visit the Organization's <a href="${organizationVivoProfileURL}">profile page.</a></p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,369 @@
|
|||
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
|
||||
|
||||
<#assign standardVisualizationURLRoot ="/visualization">
|
||||
<#assign ajaxVisualizationURLRoot ="/visualizationAjax">
|
||||
<#assign dataVisualizationURLRoot ="/visualizationData">
|
||||
|
||||
<#assign organizationURI ="${organizationURI?url}">
|
||||
<#assign jsonContent ="${jsonContent}">
|
||||
<#assign organizationLabel = "${organizationLabel}">
|
||||
<#assign organizationVivoProfileURL = "${urls.base}/individual?uri=${organizationURI}">
|
||||
<#assign subOrganizationTemporalGraphURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_grant_count">
|
||||
<#assign subOrganizationTemporalGraphPubURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_comparison">
|
||||
<#assign subOrganizationVivoProfileURL = "${urls.base}/individual?">
|
||||
|
||||
|
||||
|
||||
<#assign temporalGraphSmallIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'>
|
||||
|
||||
|
||||
<#assign TemporalGraphDownloadFile = '${urls.base}${dataVisualizationURLRoot}?vis=entity_grant_count&uri=${organizationURI}&labelField=label'>
|
||||
|
||||
|
||||
<#-- Javascript files -->
|
||||
|
||||
<#assign flot = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/jquery.flot.js'>
|
||||
<#assign excanvas = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/excanvas.js'>
|
||||
|
||||
|
||||
<!--[if IE]><script type="text/javascript" src="${excanvas}"></script><![endif]-->
|
||||
|
||||
<#assign fliptext = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'>
|
||||
|
||||
<#assign jqueryNotify = '${urls.base}/js/jquery_plugins/jquery.notify.min.js'>
|
||||
<#assign jqueryUI = '${urls.base}/js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'>
|
||||
|
||||
<#assign datatable = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/datatable/jquery.dataTables.js'>
|
||||
<#assign autoellipsis = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/jquery.AutoEllipsis.js'>
|
||||
|
||||
<#assign entityComparisonUtils = '${urls.base}/js/visualization/entitycomparison/util.js'>
|
||||
<#assign entityComparisonConstants = '${urls.base}/js/visualization/entitycomparison/constants.js'>
|
||||
|
||||
<script type="text/javascript" src="${flot}"></script>
|
||||
<script type="text/javascript" src="${fliptext}"></script>
|
||||
|
||||
<!--
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
|
||||
-->
|
||||
|
||||
<script type="text/javascript" src="${jqueryUI}"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript" src="${datatable}"></script>
|
||||
<script type="text/javascript" src="${autoellipsis}"></script>
|
||||
<script type="text/javascript" src="${entityComparisonUtils}"></script>
|
||||
<script type="text/javascript" src="${entityComparisonConstants}"></script>
|
||||
<script type="text/javascript" src="${jqueryNotify}"></script>
|
||||
|
||||
<#-- CSS files -->
|
||||
|
||||
|
||||
<#assign demoTable = "${urls.base}/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" />
|
||||
|
||||
<#assign jqueryUIStyle = "${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" />
|
||||
<#assign jqueryNotifyStyle = "${urls.base}/css/jquery_plugins/ui.notify.css" />
|
||||
|
||||
<#assign entityComparisonStyle = "${urls.base}/css/visualization/entitycomparison/layout.css" />
|
||||
<#assign entityComparisonStyleIEHack = "${urls.base}/css/visualization/entitycomparison/layout-ie.css" />
|
||||
|
||||
<#assign vizStyle = "${urls.base}/css/visualization/visualization.css" />
|
||||
|
||||
|
||||
|
||||
<link href="${jqueryUIStyle}" rel="stylesheet" type="text/css" />
|
||||
<link href="${demoTable}" rel="stylesheet" type="text/css" />
|
||||
<link href="${entityComparisonStyle}" rel="stylesheet" type="text/css" />
|
||||
<link href="${vizStyle}" rel="stylesheet" type="text/css" />
|
||||
<link href="${jqueryNotifyStyle}" rel="stylesheet" type="text/css" />
|
||||
<!--[if IE]><link href="${entityComparisonStyleIEHack}" rel="stylesheet" type="text/css" /><![endif]-->
|
||||
|
||||
|
||||
<#-- variables passed from server-side code -->
|
||||
<script language="JavaScript" type="text/javascript">
|
||||
|
||||
var contextPath = "${urls.base}";
|
||||
var temporalGraphDownloadFile = "${TemporalGraphDownloadFile}"
|
||||
var temporalGraphSmallIcon = "${temporalGraphSmallIcon}";
|
||||
var subOrganizationVivoProfileURL = "${subOrganizationVivoProfileURL}";
|
||||
var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
||||
var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}";
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
var jsonString = '${jsonContent}';
|
||||
var organizationLabel = '${organizationLabel}';
|
||||
|
||||
/* This is used to cache the current state whether the user is allowed to select more entities from
|
||||
the datatable or not. Once Max number of entity selection is reached the user can no longer select
|
||||
more & this variable will be set to false. */
|
||||
$("#datatable").data("isEntitySelectionAllowed", true);
|
||||
|
||||
$("#organizationLabel").text(organizationLabel).css("color", "#2485ae");
|
||||
$("#organizationMoniker").text(organizationLabel);
|
||||
$("#organizationMoniker").attr("href", "${organizationVivoProfileURL}");
|
||||
|
||||
$notificationContainer = $("#notification-container").notify();
|
||||
|
||||
var jsonObject = {
|
||||
prepare : function(arg1){
|
||||
loadData(arg1);
|
||||
}
|
||||
};
|
||||
|
||||
graphContainer = $("#graphContainer");
|
||||
tableDiv = $('#paginatedTable');
|
||||
|
||||
// initial display of the grid when the page loads
|
||||
init(graphContainer);
|
||||
|
||||
/*
|
||||
* When the intra-entity parameters are clicked,
|
||||
* update the status accordingly.
|
||||
*/
|
||||
$("select.comparisonValues").click(function(){
|
||||
var selectedValue = $("select.comparisonValues option:selected").val();
|
||||
$("#comparisonParameter").text("Total Number of " + selectedValue);
|
||||
$('#yaxislabel').html("Number of " + selectedValue).mbFlipText(false);
|
||||
$('#yaxislabel').css("color", "#595B5B");
|
||||
$('#comparisonHeader').html(selectedValue).css('font-weight', 'bold');
|
||||
});
|
||||
|
||||
//click event handler for clear button
|
||||
$("a#clear").click(function(){
|
||||
clearRenderedObjects();
|
||||
});
|
||||
|
||||
$("select.comparisonValues").change(function(){
|
||||
console.log($("select.comparisonValues option:selected").text());
|
||||
|
||||
if($("select.comparisonValues option:selected").text() === "by Publications"){
|
||||
window.location = subOrganizationTemporalGraphPubURL + "&uri=" + "${organizationURI}";
|
||||
}
|
||||
});
|
||||
|
||||
$("input[type=checkbox].easyDeselectCheckbox").live('click', function(){
|
||||
|
||||
var checkbox = $(this);
|
||||
var checkboxValue = $(this).attr("value");
|
||||
var linkedCheckbox = labelToCheckedEntities[checkboxValue];
|
||||
//console.log('checkbox value is '+ checkboxValue);
|
||||
var entityToBeRemoved = labelToEntityRecord[checkboxValue];
|
||||
|
||||
if(!checkbox.is(':checked')){
|
||||
//console.log("Easy deselect checkbox is unclicked!");
|
||||
updateRowHighlighter(linkedCheckbox);
|
||||
removeUsedColor(entityToBeRemoved);
|
||||
removeEntityUnChecked(renderedObjects, entityToBeRemoved);
|
||||
removeLegendRow(linkedCheckbox);
|
||||
removeCheckBoxFromGlobalSet(linkedCheckbox);
|
||||
$(linkedCheckbox).attr('checked', false);
|
||||
checkIfColorLimitIsReached();
|
||||
displayLineGraphs();
|
||||
updateCounter();
|
||||
}
|
||||
});
|
||||
|
||||
//parse the json object and pass it to loadData
|
||||
jsonObject.prepare(jQuery.parseJSON(jsonString));
|
||||
|
||||
function performEntityCheckboxUnselectedActions(entity, checkboxValue, checkbox) {
|
||||
|
||||
removeUsedColor(entity);
|
||||
removeEntityUnChecked(renderedObjects, entity);
|
||||
removeLegendRow(checkbox);
|
||||
removeCheckBoxFromGlobalSet(checkbox);
|
||||
|
||||
checkbox.closest("tr").removeClass('datatablerowhighlight');
|
||||
|
||||
}
|
||||
|
||||
function performEntityCheckboxSelectedActions(entity, checkboxValue, checkbox) {
|
||||
|
||||
getNextFreeColor(entity);
|
||||
|
||||
//Generate the bar, checkbox and label for the legend.
|
||||
createLegendRow(entity, $("#bottom"));
|
||||
|
||||
renderLineGraph(renderedObjects, entity);
|
||||
labelToCheckedEntities[checkboxValue] = checkbox;
|
||||
|
||||
/*
|
||||
* To highlight the rows belonging to selected entities.
|
||||
* */
|
||||
checkbox.closest("tr").addClass('datatablerowhighlight');
|
||||
|
||||
}
|
||||
|
||||
function performEntityCheckboxClickedRedrawActions() {
|
||||
|
||||
setTickSizeOfAxes();
|
||||
checkIfColorLimitIsReached();
|
||||
displayLineGraphs();
|
||||
updateCounter();
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* function to populate the labelToEntityRecord object with the
|
||||
* values from the json file and
|
||||
* dynamically generate checkboxes
|
||||
*/
|
||||
function loadData(jsonData) {
|
||||
|
||||
// var yearRange;
|
||||
$.each(jsonData, function (index, val) {
|
||||
setOfLabels.push(val.label);
|
||||
labelToEntityRecord[val.label] = val;
|
||||
});
|
||||
|
||||
getEntityVisMode(jsonData);
|
||||
prepareTableForDataTablePagination(jsonData);
|
||||
setEntityLevel();
|
||||
|
||||
/*
|
||||
calcMinandMaxYears(labelToEntityRecord, year);
|
||||
yearRange = (year.max - year.min);
|
||||
|
||||
setLineWidthAndTickSize(yearRange, FlotOptions);
|
||||
setTickSizeOfYAxis(calcMaxOfComparisonParameter(labelToEntityRecord), FlotOptions);
|
||||
*/
|
||||
|
||||
$(".disabled-checkbox-event-receiver").live("click", function () {
|
||||
|
||||
if ($(this).next().is(':disabled')) {
|
||||
|
||||
createNotification("error-notification", {
|
||||
title: 'Error',
|
||||
text: 'A Maximum 10 entities can be compared. Please remove some & try again.'
|
||||
}, {
|
||||
custom: true,
|
||||
expires: 3500
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
* When the elements in the paginated div
|
||||
* are clicked this event handler is called
|
||||
*/
|
||||
$("input.if_clicked_on_school").live('click', function () {
|
||||
|
||||
var checkbox = $(this);
|
||||
var checkboxValue = $(this).attr("value");
|
||||
var entity = labelToEntityRecord[checkboxValue];
|
||||
|
||||
if (checkbox.is(':checked')) {
|
||||
|
||||
performEntityCheckboxSelectedActions(entity, checkboxValue, checkbox);
|
||||
|
||||
} else {
|
||||
|
||||
performEntityCheckboxUnselectedActions(entity, checkboxValue, checkbox);
|
||||
|
||||
}
|
||||
|
||||
performEntityCheckboxClickedRedrawActions();
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
This will make sure that top 3 entites are selected by default when the page loads.
|
||||
|
||||
*/
|
||||
$.each($("input.if_clicked_on_school"), function(index, checkbox) {
|
||||
|
||||
if (index > 2) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$(this).attr('checked', true);
|
||||
|
||||
var checkboxValue = $(this).attr("value");
|
||||
var entity = labelToEntityRecord[checkboxValue];
|
||||
|
||||
performEntityCheckboxSelectedActions(entity, checkboxValue, $(this));
|
||||
|
||||
performEntityCheckboxClickedRedrawActions();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div id="body">
|
||||
|
||||
<h2><span id="header-entity-label"><a id="organizationMoniker" href="#"></a></span></h2>
|
||||
|
||||
<div id="leftblock">
|
||||
<div id="leftUpper">
|
||||
<h3>How do you want to compare?</h3>
|
||||
|
||||
<div style="text-align: left;">
|
||||
|
||||
<select class="comparisonValues" style="margin-bottom: 20px;">
|
||||
<option value="Grants" selected="selected">by Grants</option>
|
||||
<option value="Publications">by Publications</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="leftLower">
|
||||
<div id="notification-container" style="display:none">
|
||||
|
||||
<div id="error-notification" class="ui-state-error" style="padding:10px; -moz-box-shadow:0 0 6px #980000; -webkit-box-shadow:0 0 6px #980000; box-shadow:0 0 6px #980000;">
|
||||
<a class="ui-notify-close" href="#"><span class="ui-icon ui-icon-close" style="float:right"></span></a>
|
||||
<span style="float:left; margin:0 5px 0 0;" class="ui-icon ui-icon-alert"></span>
|
||||
<h1>#{title}</h1>
|
||||
<p>#{text}</p>
|
||||
<p style="text-align:center"><a class="ui-notify-close" href="#">Close Me</a></p>
|
||||
</div>
|
||||
|
||||
<div id="warning-notification">
|
||||
<a class="ui-notify-close ui-notify-cross" href="#">x</a>
|
||||
<h1>#{title}</h1>
|
||||
<p>#{text}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<h3>Who do you want to compare?</h3>
|
||||
<div id="paginatedTable"></div>
|
||||
<br />
|
||||
<a id="csv" href="${TemporalGraphDownloadFile}" class="temporalGraphLinks">Save as CSV</a>
|
||||
</div>
|
||||
<#--
|
||||
<div id = "stopwordsdiv">
|
||||
* The entity types core:Person, foaf:Organization have been excluded as they are too general.
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div id="rightblock">
|
||||
|
||||
<h4 id="headerText">Comparing <span id="comparisonHeader">Grants</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h4>
|
||||
|
||||
<div id="temporal-graph">
|
||||
<div id="yaxislabel"></div>
|
||||
<div id="graphContainer"></div>
|
||||
<div id="xaxislabel">Year</div>
|
||||
</div>
|
||||
|
||||
<div id="bottom" style="width: 450px; height: 350px;">
|
||||
<h4><span id="comparisonParameter"></span></h4>
|
||||
<p class="displayCounter">You have selected <span id="counter">0</span> of a maximum
|
||||
<span id="total">10</span> <span id="entityleveltext"> schools</span> to compare.
|
||||
<a id="clear" class="temporalGraphLinks">Clear</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
<#assign organizationLabel = "${organizationLabel}">
|
||||
<#assign organizationVivoProfileURL = "${urls.base}/individual?uri=${organizationURI}">
|
||||
<#assign subOrganizationTemporalGraphURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_comparison">
|
||||
<#assign subOrganizationTemporalGraphGrantURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_grant_count">
|
||||
<#assign subOrganizationVivoProfileURL = "${urls.base}/individual?">
|
||||
|
||||
|
||||
|
|
@ -87,6 +88,7 @@ var temporalGraphDownloadFile = "${TemporalGraphDownloadFile}"
|
|||
var temporalGraphSmallIcon = "${temporalGraphSmallIcon}";
|
||||
var subOrganizationVivoProfileURL = "${subOrganizationVivoProfileURL}";
|
||||
var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
||||
var subOrganizationTemporalGraphGrantURL = "${subOrganizationTemporalGraphGrantURL}";
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -137,6 +139,13 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
clearRenderedObjects();
|
||||
});
|
||||
|
||||
$("select.comparisonValues").change(function(){
|
||||
console.log($("select.comparisonValues option:selected").text());
|
||||
if($("select.comparisonValues option:selected").text() === "by Grants"){
|
||||
window.location = subOrganizationTemporalGraphGrantURL + "&uri=" + "${organizationURI}";
|
||||
}
|
||||
});
|
||||
|
||||
$("input[type=checkbox].easyDeselectCheckbox").live('click', function(){
|
||||
|
||||
var checkbox = $(this);
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ public class EntityGrantCountRequestHandler implements
|
|||
Entity entity, String entityURI, Map<String, Set<String>> subOrganizationTypesResult) {
|
||||
|
||||
Portal portal = vreq.getPortal();
|
||||
String standaloneTemplate = "entityComparisonStandaloneActivator.ftl";
|
||||
String standaloneTemplate = "entityComparisonGrantsStandaloneActivator.ftl";
|
||||
|
||||
String jsonContent = "";
|
||||
jsonContent = writeGrantsOverTimeJSON(vreq, entity.getSubEntities(), subOrganizationTypesResult);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue