NIHVIVO-556: Changed color for line separators in top header nav
This commit is contained in:
mb863
parent
0989181973
commit
704136c6f2
2 changed files with 168 additions and 209 deletions
|
|
@ -2,239 +2,198 @@
|
||||||
<#assign visContainerID = '${sparklineVO.visContainerDivID}'>
|
<#assign visContainerID = '${sparklineVO.visContainerDivID}'>
|
||||||
|
|
||||||
<#if sparklineVO.shortVisMode>
|
<#if sparklineVO.shortVisMode>
|
||||||
<#assign sparklineContainerID = 'pub_count_short_sparkline_vis'>
|
<#assign sparklineContainerID = 'pub_count_short_sparkline_vis'>
|
||||||
<#else>
|
<#else>
|
||||||
<#assign sparklineContainerID = 'pub_count_full_sparkline_vis'>
|
<#assign sparklineContainerID = 'pub_count_full_sparkline_vis'>
|
||||||
</#if>
|
</#if>
|
||||||
|
|
||||||
<#-- This is used to prevent collision between sparkline & visualization conatiner div ids. -->
|
<#-- This is used to prevent collision between sparkline & visualization conatiner div ids. -->
|
||||||
<#if visContainerID?upper_case == sparklineContainerID?upper_case>
|
<#if visContainerID?upper_case == sparklineContainerID?upper_case>
|
||||||
<#assign sparklineContainerID = visContainerID + "_spark">
|
<#assign sparklineContainerID = visContainerID + "_spark">
|
||||||
</#if>
|
</#if>
|
||||||
|
|
||||||
<div class="staticPageBackground">
|
<div class="staticPageBackground">
|
||||||
|
<div id="${visContainerID}">
|
||||||
<div id="${visContainerID}">
|
<script type="text/javascript">
|
||||||
|
|
||||||
<style type='text/css'>
|
function drawPubCountVisualization(providedSparklineImgTD) {
|
||||||
.sparkline_style table {
|
|
||||||
margin: 0;
|
var data = new google.visualization.DataTable();
|
||||||
padding: 0;
|
data.addColumn('string', 'Year');
|
||||||
width: auto;
|
data.addColumn('number', 'Publications');
|
||||||
border-collapse: collapse;
|
data.addRows(${sparklineVO.numOfYearsToBeRendered});
|
||||||
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>
|
<#list sparklineVO.yearToPublicationCountDataTable as yearToPublicationCountDataElement>
|
||||||
data.setValue(${yearToPublicationCountDataElement.publicationCounter}, 0, '${yearToPublicationCountDataElement.publishedYear}');
|
data.setValue(${yearToPublicationCountDataElement.publicationCounter}, 0, '${yearToPublicationCountDataElement.publishedYear}');
|
||||||
data.setValue(${yearToPublicationCountDataElement.publicationCounter}, 1, ${yearToPublicationCountDataElement.currentPublications});
|
data.setValue(${yearToPublicationCountDataElement.publicationCounter}, 1, ${yearToPublicationCountDataElement.currentPublications});
|
||||||
</#list>
|
</#list>
|
||||||
|
|
||||||
<#-- Create a view of the data containing only the column pertaining to publication count. -->
|
<#-- Create a view of the data containing only the column pertaining to publication count. -->
|
||||||
var sparklineDataView = new google.visualization.DataView(data);
|
var sparklineDataView = new google.visualization.DataView(data);
|
||||||
sparklineDataView.setColumns([1]);
|
sparklineDataView.setColumns([1]);
|
||||||
|
|
||||||
<#if sparklineVO.shortVisMode>
|
<#if sparklineVO.shortVisMode>
|
||||||
|
|
||||||
<#-- For the short view we only want the last 10 year's view of publication count, hence we filter
|
<#-- 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. -->
|
the data we actually want to use for render. -->
|
||||||
|
|
||||||
sparklineDataView.setRows(data.getFilteredRows([{
|
sparklineDataView.setRows(data.getFilteredRows([{
|
||||||
column: 0,
|
column: 0,
|
||||||
minValue: '${sparklineVO.earliestRenderedPublicationYear?c}',
|
minValue: '${sparklineVO.earliestRenderedPublicationYear?c}',
|
||||||
maxValue: '${sparklineVO.latestRenderedPublicationYear?c}'
|
maxValue: '${sparklineVO.latestRenderedPublicationYear?c}'
|
||||||
/*minValue: '2001',
|
/*minValue: '2001',
|
||||||
maxValue: '2011'*/
|
maxValue: '2011'*/
|
||||||
}]));
|
}]));
|
||||||
|
|
||||||
|
|
||||||
<#else>
|
<#else>
|
||||||
|
|
||||||
</#if>
|
</#if>
|
||||||
|
|
||||||
|
|
||||||
<#-- Create the vis object and draw it in the div pertaining to sparkline. -->
|
<#-- Create the vis object and draw it in the div pertaining to sparkline. -->
|
||||||
var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]);
|
var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]);
|
||||||
sparkline.draw(sparklineDataView, {
|
sparkline.draw(sparklineDataView, {
|
||||||
width: 65,
|
width: 65,
|
||||||
height: 30,
|
height: 30,
|
||||||
showAxisLines: false,
|
showAxisLines: false,
|
||||||
showValueLabels: false,
|
showValueLabels: false,
|
||||||
labelPosition: 'none'
|
labelPosition: 'none'
|
||||||
});
|
});
|
||||||
|
|
||||||
<#if sparklineVO.shortVisMode>
|
<#if sparklineVO.shortVisMode>
|
||||||
|
|
||||||
<#-- We want to display how many publication counts were considered, so this is used to calculate this. -->
|
<#-- We want to display how many publication counts were considered, so this is used to calculate this. -->
|
||||||
|
|
||||||
var shortSparkRows = sparklineDataView.getViewRows();
|
var shortSparkRows = sparklineDataView.getViewRows();
|
||||||
var renderedShortSparks = 0;
|
var renderedShortSparks = 0;
|
||||||
$.each(shortSparkRows, function(index, value) {
|
$.each(shortSparkRows, function(index, value) {
|
||||||
renderedShortSparks += data.getValue(value, 1);
|
renderedShortSparks += data.getValue(value, 1);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#${sparklineContainerID} td.sparkline_number').text(parseInt(renderedShortSparks) + parseInt(${sparklineVO.unknownYearPublications}));
|
$('#${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);
|
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>';
|
||||||
|
|
||||||
var sparklineNumberTD = $('<td>');
|
<#else>
|
||||||
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}');
|
|
||||||
|
|
||||||
}
|
/*
|
||||||
|
* 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}));
|
||||||
|
|
||||||
drawPubCountVisualization(sparklineImgTD);
|
var sparksText = ' publication(s) from <span class="sparkline_range">${sparklineVO.earliestYearConsidered?c}'
|
||||||
});
|
+ ' to ${sparklineVO.latestRenderedPublicationYear?c}</span> '
|
||||||
</script>
|
+ ' <a href="${sparklineVO.downloadDataLink}" class="inline_href">(.CSV File)</a> ';
|
||||||
|
</#if>
|
||||||
</div>
|
|
||||||
|
$('#${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.
|
||||||
|
* */
|
||||||
|
|
||||||
<#if sparklineVO.shortVisMode>
|
$(document).ready(function() {
|
||||||
|
var sparklineImgTD;
|
||||||
<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>
|
* This is a nuclear option (creating the container in which everything goes)
|
||||||
<td>
|
* the only reason this will be ever used is the API user never submitted a
|
||||||
${year}
|
* container ID in which everything goes. The alternative was to let the
|
||||||
</td>
|
* vis not appear in the calling page at all. So now atleast vis appears but
|
||||||
<td>
|
* appended at the bottom of the body.
|
||||||
${sparklineVO.yearToActivityCount[year]}
|
* */
|
||||||
</td>
|
|
||||||
</tr>
|
if ($('#${visContainerID}').length === 0) {
|
||||||
</#list>
|
$('<div/>', {
|
||||||
|
'id': '${visContainerID}'
|
||||||
|
}).appendTo('body');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($('#${sparklineContainerID}').length === 0) {
|
||||||
|
|
||||||
|
$('<div/>', {
|
||||||
|
'id': '${sparklineContainerID}',
|
||||||
|
'class': 'sparkline_style'
|
||||||
|
}).prependTo('#${visContainerID}');
|
||||||
|
|
||||||
</tbody>
|
var table = $('<table>');
|
||||||
</table>
|
table.attr('class', 'sparkline_wrapper_table');
|
||||||
Download data as <a href="${sparklineVO.downloadDataLink}">.csv</a> file.
|
var row = $('<tr>');
|
||||||
<br />
|
sparklineImgTD = $('<td>');
|
||||||
</p>
|
sparklineImgTD.attr('id', '${sparklineContainerID}_img');
|
||||||
|
sparklineImgTD.attr('width', '65');
|
||||||
</#if>
|
sparklineImgTD.attr('align', 'right');
|
||||||
|
sparklineImgTD.attr('class', 'sparkline_style');
|
||||||
|
|
||||||
|
row.append(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}');
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
drawPubCountVisualization(sparklineImgTD);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</div><!-- Sparkline Viz -->
|
||||||
|
|
||||||
|
<#if sparklineVO.shortVisMode>
|
||||||
|
<#--<span class="vis_link">-->
|
||||||
|
<p><a class="all-vivo-publications" href="${sparklineVO.fullTimelineNetworkLink}">View all VIVO publications and corresponding co-author network.</a></p>
|
||||||
|
<#--</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>
|
</div>
|
||||||
|
|
@ -97,7 +97,7 @@ ul#header-nav li {
|
||||||
display: block;
|
display: block;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
border-right: 1px solid #fff;
|
border-right: 1px solid #7c7d7f;
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue