1. Making temporal graph vis template for grants to be similar to the publications version.

This commit is contained in:
cdtank 2011-01-14 22:34:03 +00:00
parent 60dfa67110
commit 72a5e9414e
2 changed files with 36 additions and 61 deletions

View file

@ -16,67 +16,42 @@
<#assign temporalGraphSmallIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'> <#assign temporalGraphSmallIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'>
<#assign TemporalGraphDownloadFile = '${urls.base}${dataVisualizationURLRoot}?vis=entity_grant_count&uri=${organizationURI}&labelField=label'> <#assign TemporalGraphDownloadFile = '${urls.base}${dataVisualizationURLRoot}?vis=entity_grant_count&uri=${organizationURI}&labelField=label'>
<#-- Javascript files --> <#-- 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'> <#assign excanvas = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/excanvas.js'>
<#assign flot = 'js/visualization/entitycomparison/jquery_plugins/flot/jquery.flot.js'>
<#assign fliptext = 'js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'>
<#assign jqueryNotify = 'js/jquery_plugins/jquery.notify.min.js'>
<#assign jqueryUI = 'js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'>
<#assign datatable = 'js/jquery_plugins/jquery.dataTables.min.js'>
<#assign entityComparisonUtils = 'js/visualization/entitycomparison/util.js'>
<#assign entityComparisonConstants = 'js/visualization/entitycomparison/constants.js'>
<!--[if IE]><script type="text/javascript" src="${excanvas}"></script><![endif]--> <!--[if IE]><script type="text/javascript" src="${excanvas}"></script><![endif]-->
${scripts.add(flot)}
<#assign fliptext = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'> ${scripts.add(fliptext)}
${scripts.add(jqueryUI)}
<#assign jqueryNotify = '${urls.base}/js/jquery_plugins/jquery.notify.min.js'> ${scripts.add(datatable)}
<#assign jqueryUI = '${urls.base}/js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'> ${scripts.add(entityComparisonUtils)}
${scripts.add(entityComparisonConstants)}
<#assign datatable = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/datatable/jquery.dataTables.js'> ${scripts.add(jqueryNotify)}
<#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 --> <#-- CSS files -->
<#assign demoTable = "js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" />
<#assign demoTable = "${urls.base}/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" /> <#assign jqueryUIStyle = "js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" />
<#assign jqueryNotifyStyle = "css/jquery_plugins/ui.notify.css" />
<#assign jqueryUIStyle = "${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" /> <#assign entityComparisonStyle = "css/visualization/entitycomparison/layout.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 entityComparisonStyleIEHack = "${urls.base}/css/visualization/entitycomparison/layout-ie.css" />
<#assign vizStyle = "css/visualization/visualization.css" />
<#assign vizStyle = "${urls.base}/css/visualization/visualization.css" /> ${stylesheets.add(jqueryUIStyle)}
${stylesheets.add(demoTable)}
${stylesheets.add(entityComparisonStyle)}
${stylesheets.add(vizStyle)}
<link href="${jqueryUIStyle}" rel="stylesheet" type="text/css" /> ${stylesheets.add(jqueryNotifyStyle)}
<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]--> <!--[if IE]><link href="${entityComparisonStyleIEHack}" rel="stylesheet" type="text/css" /><![endif]-->
@ -90,14 +65,14 @@ var subOrganizationVivoProfileURL = "${subOrganizationVivoProfileURL}";
var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}"; var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}"; var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}";
var jsonString = '${jsonContent}';
var organizationLabel = '${organizationLabel}';
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(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 /* 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 the datatable or not. Once Max number of entity selection is reached the user can no longer select
@ -135,7 +110,7 @@ var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}"
$("select.comparisonValues").change(function(){ $("select.comparisonValues").change(function(){
if($("select.comparisonValues option:selected").text() === "by Publications"){ if ($("select.comparisonValues option:selected").text() === "by Publications") {
window.location = subOrganizationTemporalGraphPubURL + "&uri=" + "${organizationURI}"; window.location = subOrganizationTemporalGraphPubURL + "&uri=" + "${organizationURI}";
} }
@ -237,12 +212,12 @@ var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}"
if ($(this).next().is(':disabled')) { if ($(this).next().is(':disabled')) {
createNotification("error-notification", { createNotification("warning-notification", {
title: 'Error', title: 'Error',
text: 'A Maximum 10 entities can be compared. Please remove some & try again.' text: 'A Maximum 10 entities can be compared. Please remove some & try again.'
}, { }, {
custom: true, custom: true,
expires: 3500 expires: false
}); });
} }
@ -328,8 +303,9 @@ var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}"
<p style="text-align:center"><a class="ui-notify-close" href="#">Close Me</a></p> <p style="text-align:center"><a class="ui-notify-close" href="#">Close Me</a></p>
</div> </div>
<div id="warning-notification"> <div id="warning-notification" class="ui-state-highlight ui-corner-all" >
<a class="ui-notify-close ui-notify-cross" href="#">x</a> <a class="ui-notify-close ui-notify-cross" href="#">x</a>
<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
<h1>&#035;{title}</h1> <h1>&#035;{title}</h1>
<p>&#035;{text}</p> <p>&#035;{text}</p>
</div> </div>
@ -349,7 +325,7 @@ var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}"
<div id="rightblock"> <div id="rightblock">
<h4 id="headerText">Comparing <span id="comparisonHeader">Grants</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h4> <h3 id="headerText">Comparing <span id="comparisonHeader">Grants</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h3>
<div id="temporal-graph"> <div id="temporal-graph">
<div id="yaxislabel"></div> <div id="yaxislabel"></div>
@ -357,8 +333,8 @@ var subOrganizationTemporalGraphPubURL = "${subOrganizationTemporalGraphPubURL}"
<div id="xaxislabel">Year</div> <div id="xaxislabel">Year</div>
</div> </div>
<div id="bottom" style="width: 450px; height: 350px;"> <div id="bottom">
<h4><span id="comparisonParameter"></span></h4> <h3><span id="comparisonParameter"></span></h3>
<p class="displayCounter">You have selected <span id="counter">0</span> of a maximum <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. <span id="total">10</span> <span id="entityleveltext"> schools</span> to compare.
<a id="clear" class="temporalGraphLinks">Clear</a></p> <a id="clear" class="temporalGraphLinks">Clear</a></p>

View file

@ -108,7 +108,7 @@ var organizationLabel = '${organizationLabel}';
$("select.comparisonValues").change(function(){ $("select.comparisonValues").change(function(){
if($("select.comparisonValues option:selected").text() === "by Grants"){ if ($("select.comparisonValues option:selected").text() === "by Grants") {
window.location = subOrganizationTemporalGraphGrantURL + "&uri=" + "${organizationURI}"; window.location = subOrganizationTemporalGraphGrantURL + "&uri=" + "${organizationURI}";
} }
@ -125,7 +125,6 @@ var organizationLabel = '${organizationLabel}';
var checkbox = $(this); var checkbox = $(this);
var checkboxValue = $(this).attr("value"); var checkboxValue = $(this).attr("value");
var linkedCheckbox = labelToCheckedEntities[checkboxValue]; var linkedCheckbox = labelToCheckedEntities[checkboxValue];
//console.log('checkbox value is '+ checkboxValue);
var entityToBeRemoved = labelToEntityRecord[checkboxValue]; var entityToBeRemoved = labelToEntityRecord[checkboxValue];
if(!checkbox.is(':checked')){ if(!checkbox.is(':checked')){