1. Did a refactor of the javascript code for temporal graph vis.
2. Implemented the ellipsis feature for the legend row (containing the bar & label for selected entities). If the label is too long it will try to fit in the provided space & append "..." at the end.
This commit is contained in:
parent
b2d569b110
commit
84f5b029fa
3 changed files with 139 additions and 109 deletions
|
@ -94,6 +94,8 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
|
||||
$(document).ready(function() {
|
||||
|
||||
//$(".ellipsis").ellipsis();
|
||||
|
||||
var jsonString = '${jsonContent}';
|
||||
var organizationLabel = '${organizationLabel}';
|
||||
|
||||
|
@ -150,7 +152,7 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
updateRowHighlighter(linkedCheckbox);
|
||||
removeUsedColor(entityToBeRemoved);
|
||||
removeEntityUnChecked(renderedObjects, entityToBeRemoved);
|
||||
removeGraphic(linkedCheckbox);
|
||||
removeLegendRow(linkedCheckbox);
|
||||
removeCheckBoxFromGlobalSet(linkedCheckbox);
|
||||
$(linkedCheckbox).attr('checked', false);
|
||||
checkIfColorLimitIsReached();
|
||||
|
@ -211,20 +213,13 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
var checkboxValue = $(this).attr("value");
|
||||
var entity = labelToEntityRecord[checkboxValue];
|
||||
|
||||
//Dynamically generate the bar, checkbox and label.
|
||||
|
||||
var bottomDiv = $("#bottom");
|
||||
var hiddenLabel = createGraphic(entity, bottomDiv);
|
||||
|
||||
|
||||
var divBar = hiddenLabel.next();
|
||||
var divLabel = hiddenLabel.prev();
|
||||
var spanElement = divBar.next('span');
|
||||
|
||||
if (checkbox.is(':checked')) {
|
||||
|
||||
getNextFreeColor(entity);
|
||||
generateBarAndLabel(entity, divBar, divLabel,checkbox, spanElement) ;
|
||||
|
||||
//Dynamically generate the bar, checkbox and label.
|
||||
createLegendRow(entity, $("#bottom"));
|
||||
|
||||
renderLineGraph(renderedObjects, entity);
|
||||
labelToCheckedEntities[checkboxValue] = checkbox;
|
||||
|
||||
|
@ -232,7 +227,7 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
|
||||
removeUsedColor(entity);
|
||||
removeEntityUnChecked(renderedObjects, entity);
|
||||
removeGraphic(checkbox);
|
||||
removeLegendRow(checkbox);
|
||||
removeCheckBoxFromGlobalSet(checkbox);
|
||||
|
||||
}
|
||||
|
@ -251,6 +246,25 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.entity-label-url {
|
||||
width: 125px;
|
||||
margin-right: 10px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.ellipsis.multiline {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="body">
|
||||
|
||||
<h2 style="width: 36%; padding-left:45px;"><a href="" id = "organizationMoniker"></a></h2>
|
||||
|
@ -324,4 +338,7 @@ var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue