1. Introduced a new legend category for publication/grant from the current year, since we are not mapping them in the graph above.

This commit is contained in:
cdtank 2011-04-13 18:25:42 +00:00
parent 3aa9d2879f
commit c8a8f27937
3 changed files with 57 additions and 29 deletions

View file

@ -14,7 +14,7 @@
} }
#subject-parent-entity { #subject-parent-entity {
display: none; display: none;
} }
#error-container { #error-container {
@ -25,15 +25,21 @@
float: right; float: right;
} }
.current-year-bar,
.known-bar { .known-bar {
display: inline-block; display: inline-block;
cursor: help; cursor: help;
}
.current-year-bar {
opacity: 0.5;
filter:alpha(opacity=50);
} }
.unknown-inner-bar { .unknown-inner-bar {
opacity: 0.5; opacity: 0.5;
filter:alpha(opacity=50); filter:alpha(opacity=50);
display: inline-block; display: inline-block;
} }
.bar-count-text { .bar-count-text {
@ -42,36 +48,41 @@
} }
img.bar-count-icon { img.bar-count-icon {
vertical-align: super; vertical-align: super;
cursor: help; cursor: help;
} }
.unknown-bar { .unknown-bar {
background: url("../../../images/visualization/diagonal.png") repeat scroll 50% 50% #666666; background: url("../../../images/visualization/diagonal.png") repeat scroll 50% 50% #666666;
cursor: help; cursor: help;
} }
.legend-bar { .legend-bar {
margin-bottom: 3px; margin-bottom: 3px;
cursor:default; cursor:default;
}
.current-year-legend-bar {
display: inline-block;
} }
.unknown-legend-bar { .unknown-legend-bar {
background: url("../../../images/visualization/legend-unknown-bar-dark.png") repeat #B7B7B7; background: url("../../../images/visualization/legend-unknown-bar-dark.png") repeat #B7B7B7;
} }
#legend-current-year-bar-text,
#legend-known-bar-text, #legend-known-bar-text,
#legend-unknown-bar-text { #legend-unknown-bar-text {
font-size: 0.75em; font-size: 0.75em;
} }
span#copy-vis-viewlink { span#copy-vis-viewlink {
display: none; display: none;
} }
img#copy-vis-viewlink-icon { img#copy-vis-viewlink-icon {
cursor: pointer; cursor: pointer;
} }
a.temporalGraphLinks { a.temporalGraphLinks {

View file

@ -224,8 +224,9 @@ function init(graphContainer) {
$("#comparisonParameter").text("Total Number of " + optionSelected); $("#comparisonParameter").text("Total Number of " + optionSelected);
$('#yaxislabel').html("Number of " + optionSelected).mbFlipText(false); $('#yaxislabel').html("Number of " + optionSelected).mbFlipText(false);
$('#comparisonHeader').html(optionSelected).css('font-weight', 'bold'); $('#comparisonHeader').html(optionSelected).css('font-weight', 'bold');
$('#legend-known-bar-text').text("Known " + COMPARISON_PARAMETERS_INFO[currentParameter].name + " year"); $('#legend-known-bar-text').text(COMPARISON_PARAMETERS_INFO[currentParameter].name + " with known year");
$('#legend-unknown-bar-text').text("Unknown " + COMPARISON_PARAMETERS_INFO[currentParameter].name + " year"); $('#legend-current-year-bar-text').text(COMPARISON_PARAMETERS_INFO[currentParameter].name + " from current incomplete year");
$('#legend-unknown-bar-text').text(COMPARISON_PARAMETERS_INFO[currentParameter].name + "with unknown year");
var defaultFlotOptions = { var defaultFlotOptions = {
@ -512,6 +513,7 @@ function calcSumOfComparisonParameter(entity) {
var known = 0; var known = 0;
var unknown = 0; var unknown = 0;
var currentYear = 0;
$.each(entity.data, function(index, data){ $.each(entity.data, function(index, data){
@ -519,15 +521,18 @@ function calcSumOfComparisonParameter(entity) {
unknown += this[1]; unknown += this[1];
} else { } else {
known += this[1]; known += this[1];
if (this[0] === globalDateObject.getFullYear()) {
currentYear += this[1];
}
} }
}); });
sum = { sum = {
knownYearCount: known, knownYearCount: known,
unknownYearCount: unknown unknownYearCount: unknown,
currentYearCount: currentYear
}; };
return sum; return sum;
@ -660,6 +665,9 @@ function createLegendRow(entity, bottomDiv) {
var knownBar = $('<span>'); var knownBar = $('<span>');
knownBar.attr('class', 'known-bar'); knownBar.attr('class', 'known-bar');
var currentYearBar = $('<span>');
currentYearBar.attr('class', 'current-year-bar');
var unknownBar = $('<span>'); var unknownBar = $('<span>');
unknownBar.attr('class', 'unknown-bar'); unknownBar.attr('class', 'unknown-bar');
@ -671,6 +679,7 @@ function createLegendRow(entity, bottomDiv) {
unknownBar.append(unknownBarInnerSpan); unknownBar.append(unknownBarInnerSpan);
barDiv.append(knownBar); barDiv.append(knownBar);
barDiv.append(currentYearBar);
barDiv.append(unknownBar); barDiv.append(unknownBar);
var numAttributeText = $('<span>'); var numAttributeText = $('<span>');
@ -705,7 +714,7 @@ function renderBarAndLabel(entity, divBar, divLabel, spanElement) {
var sum = combinedCount.knownYearCount + combinedCount.unknownYearCount; var sum = combinedCount.knownYearCount + combinedCount.unknownYearCount;
var normalizedWidth = getNormalizedWidth(entity, sum); var normalizedWidth = getNormalizedWidth(entity, sum);
var knownNormalizedWidth = getNormalizedWidth(entity, combinedCount.knownYearCount); var knownNormalizedWidth = getNormalizedWidth(entity, combinedCount.knownYearCount - combinedCount.currentYearCount);
if (combinedCount.unknownYearCount) { if (combinedCount.unknownYearCount) {
var unknownNormalizedWidth = getNormalizedWidth(entity, combinedCount.unknownYearCount); var unknownNormalizedWidth = getNormalizedWidth(entity, combinedCount.unknownYearCount);
@ -713,8 +722,15 @@ function renderBarAndLabel(entity, divBar, divLabel, spanElement) {
var unknownNormalizedWidth = 0; var unknownNormalizedWidth = 0;
} }
if (combinedCount.currentYearCount) {
var currentNormalizedWidth = getNormalizedWidth(entity, combinedCount.currentYearCount);
} else {
var currentNormalizedWidth = 0;
}
divBar.css("width", normalizedWidth + 5); divBar.css("width", normalizedWidth + 5);
divBar.children(".known-bar").html("&nbsp;").css("background-color", colorToAssign).css("width", knownNormalizedWidth); divBar.children(".known-bar").html("&nbsp;").css("background-color", colorToAssign).css("width", knownNormalizedWidth);
divBar.children(".current-year-bar").html("&nbsp;").css("background-color", colorToAssign).css("width", currentNormalizedWidth);
divBar.children(".unknown-bar").children(".unknown-inner-bar").html("&nbsp;").css("background-color", colorToAssign).css("width", unknownNormalizedWidth); divBar.children(".unknown-bar").children(".unknown-inner-bar").html("&nbsp;").css("background-color", colorToAssign).css("width", unknownNormalizedWidth);
var entityLabelForLegend = divLabel.find(".entity-label-url"); var entityLabelForLegend = divLabel.find(".entity-label-url");

View file

@ -2,11 +2,11 @@
<div id="body"> <div id="body">
<div id="subject-parent-entity"> <div id="subject-parent-entity">
<a id="subject-parent-entity-profile-url" href="#"></a>&nbsp; <a id="subject-parent-entity-profile-url" href="#"></a>&nbsp;
<a id="subject-parent-entity-temporal-url" href="#"><img src="${temporalGraphSmallIcon}" width="15px" height="15px"/></a> <a id="subject-parent-entity-temporal-url" href="#"><img src="${temporalGraphSmallIcon}" width="15px" height="15px"/></a>
</div> </div>
<h2 id="header-entity-label"><span><a id="organizationMoniker" href="${organizationVivoProfileURL}">${organizationLabel}</a>&nbsp; <h2 id="header-entity-label"><span><a id="organizationMoniker" href="${organizationVivoProfileURL}">${organizationLabel}</a>&nbsp;
<img id="incomplete-data-disclaimer" class="infoIcon" src="${urls.images}/iconInfo.png" alt="information icon" title="This information is based solely on ${currentParameterObject.value} which have been loaded into the VIVO system" /></span></h2> <img id="incomplete-data-disclaimer" class="infoIcon" src="${urls.images}/iconInfo.png" alt="information icon" title="This information is based solely on ${currentParameterObject.value} which have been loaded into the VIVO system" /></span></h2>
@ -97,7 +97,8 @@
</div> </div>
<p class="displayCounter">Legend</p> <p class="displayCounter">Legend</p>
<span style="background-color: #B7B7B7; width: 25px;" class="known-bar legend-bar">&nbsp;</span> <span id="legend-known-bar-text">Known ${currentParameterObject.name} year</span><br /> <span style="background-color: #A8A8A8; width: 25px;" class="known-bar legend-bar">&nbsp;</span> <span id="legend-known-bar-text">${currentParameterObject.name} with known year</span><br />
<span class="legend-bar unknown-legend-bar"><span style="width: 25px;" class="unknown-inner-bar">&nbsp;</span></span> <span id="legend-unknown-bar-text">Unknown ${currentParameterObject.name} year</span> <span style="background-color: #CDCDCD; width: 25px;" class="current-year-legend-bar legend-bar">&nbsp;</span> <span id="legend-current-year-bar-text">${currentParameterObject.name} from current incomplete year</span><br />
<span class="legend-bar unknown-legend-bar"><span style="width: 25px;" class="unknown-inner-bar">&nbsp;</span></span> <span id="legend-unknown-bar-text">${currentParameterObject.name} with unknown year</span>
</div> </div>
</div> </div>