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

@ -25,11 +25,17 @@
float: right;
}
.current-year-bar,
.known-bar {
display: inline-block;
cursor: help;
}
.current-year-bar {
opacity: 0.5;
filter:alpha(opacity=50);
}
.unknown-inner-bar {
opacity: 0.5;
filter:alpha(opacity=50);
@ -56,11 +62,16 @@ img.bar-count-icon {
cursor:default;
}
.current-year-legend-bar {
display: inline-block;
}
.unknown-legend-bar {
background: url("../../../images/visualization/legend-unknown-bar-dark.png") repeat #B7B7B7;
}
#legend-current-year-bar-text,
#legend-known-bar-text,
#legend-unknown-bar-text {
font-size: 0.75em;

View file

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

View file

@ -97,7 +97,8 @@
</div>
<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 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: #A8A8A8; width: 25px;" class="known-bar legend-bar">&nbsp;</span> <span id="legend-known-bar-text">${currentParameterObject.name} with known year</span><br />
<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>