From 6af3fee6b1418603586245df51f1c6ca1eae8c8d Mon Sep 17 00:00:00 2001 From: cdtank Date: Wed, 19 Jan 2011 23:47:52 +0000 Subject: [PATCH] 1. Changed layout per Katy's suggestion for Temporal Graph Vis. 2. Refactored javascript code for Temporal graph vis. 3. Fixed couple of bugs including the one in which an entity had only one publication the line graph showed weird behavior. 4. Modified the behavior of the temporal linear graph to always try to display last 10 years at least on the line graph. --- .../visualization/entitycomparison/layout.css | 28 ++++-- .../entitycomparison/constants.js | 16 ++-- .../jquery_plugins/datatable/demo_table.css | 23 ++++- .../js/visualization/entitycomparison/util.js | 96 ++++++++++++++----- .../entityComparisonStandaloneActivator.ftl | 12 ++- 5 files changed, 127 insertions(+), 48 deletions(-) diff --git a/productMods/css/visualization/entitycomparison/layout.css b/productMods/css/visualization/entitycomparison/layout.css index 56955d43..a48a85cb 100644 --- a/productMods/css/visualization/entitycomparison/layout.css +++ b/productMods/css/visualization/entitycomparison/layout.css @@ -13,17 +13,25 @@ } a.temporalGraphLinks { - margin-top: 10px; /*float:right;*/ - height: 20px; - text-decoration: none; - width: 30%; - /*margin: 0 1% 0 1%;*/ - background-color: #EAEAEA; - text-align: center; - padding: 3px; - padding-top: 4px; + background-color: #2485AE; + color: white; cursor: pointer; + font-weight: bold; + height: 20px; + margin-top: 10px; + padding: 4px 3px 3px; + text-align: center; + text-decoration: none; +} + +#paginated-table-footer { + margin-top: 10px; + text-align: right; +} + +#legend-row-header a { + background-color: #878787; } #reset-search { @@ -98,6 +106,8 @@ a.temporalGraphLinks { .small-arrows { font-size: 0.9em; padding: 0 !important; + text-decoration: none; + vertical-align: top; } #header-entity-label { diff --git a/productMods/js/visualization/entitycomparison/constants.js b/productMods/js/visualization/entitycomparison/constants.js index ccfe9cda..9c77d1d5 100644 --- a/productMods/js/visualization/entitycomparison/constants.js +++ b/productMods/js/visualization/entitycomparison/constants.js @@ -10,6 +10,7 @@ var LIGHT_RED = "#FB8072"; var DARK_RED = "#520000"; var SKY_BLUE = "#80B1D3"; var DARK_BLUE = "#80B1D3"; +var NAVY_BLUE = "#003366"; var LIGHT_BLUE = "#3399FF"; var ORANGE = "#FDB462"; var DARK_ORANGE = "#FF9900"; @@ -21,21 +22,22 @@ var LIGHT_GREY = "#D9D9D9"; var PURPLE = "#BC80BD"; var DARK_PURPLE = "#6600CC"; var PINK_PURPLE = "#CC00CC"; +var HOT_PINK = "#FF00B4"; +var MEHENDI_GREEN = "#7A7900"; -var colorConstantQueue = [ DARK_BLUE, DARK_TURQUOISE, - LIGHT_BLUE, DARK_GREEN, - VIBRANT_GREEN, DARK_PURPLE, - PINK_PURPLE, DARK_ORANGE, - DARK_RED, RED ]; +var colorConstantQueue = [ LIGHT_BLUE, DARK_ORANGE, VIBRANT_GREEN, + NAVY_BLUE, RED, PINK_PURPLE, + DARK_TURQUOISE, MEHENDI_GREEN, HOT_PINK, + DARK_RED ]; var freeColors = colorConstantQueue.slice(); var globalDateObject = new Date(); var year = { - min: globalDateObject.getFullYear() - 10, + min: globalDateObject.getFullYear() - 9, max: globalDateObject.getFullYear(), - globalMin: globalDateObject.getFullYear() - 10, + globalMin: globalDateObject.getFullYear() - 9, globalMax: globalDateObject.getFullYear() }; diff --git a/productMods/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css b/productMods/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css index fea3c9e8..17fd8289 100644 --- a/productMods/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css +++ b/productMods/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css @@ -1,25 +1,36 @@ @CHARSET "UTF-8"; .filterInfo { - /*font-size: 0.9em;*/ - display: inline-block; + float:left; + margin-top: 15px; +} + +.filterInfo div { + font-weight: bold; } .paginate_button { - text-decoration: underline; + /*text-decoration: underline;*/ } .paginatedtabs { /* border-top: 1px #3D454E solid; text-align: center;*/ margin-bottom: 10px; - padding-top: 10px; font-size: 0.9em; + /*display: inline-block;*/ + float:right; + margin-top: 15px; } .paginatedtabs span { padding-right: 5px; cursor: pointer; + color: #2485AE; +} + +.paginate-nav-text { + text-decoration: underline; } .datatablewrapper td, th { @@ -41,6 +52,10 @@ text-align: left; } +.table-separator { + clear: both; +} + .datatablewrapper th { border-top: 1px #3D454E solid; background:#F1F2ee; diff --git a/productMods/js/visualization/entitycomparison/util.js b/productMods/js/visualization/entitycomparison/util.js index 1093e7f8..286b2e31 100644 --- a/productMods/js/visualization/entitycomparison/util.js +++ b/productMods/js/visualization/entitycomparison/util.js @@ -7,9 +7,9 @@ $.fn.dataTableExt.oPagination.gmail_style = { "fnInit": function ( oSettings, nPaging, fnCallbackDraw ) { + //var nInfo = document.createElement( 'div' ); var nFirst = document.createElement( 'span' ); var nPrevious = document.createElement( 'span' ); - var nInfo = document.createElement( 'div' ); var nNext = document.createElement( 'span' ); var nLast = document.createElement( 'span' ); @@ -20,10 +20,10 @@ $.fn.dataTableExt.oPagination.gmail_style = { nLast.innerHTML = oSettings.oLanguage.oPaginate.sLast; */ - nFirst.innerHTML = "<< First"; - nPrevious.innerHTML = "< Prev"; - nNext.innerHTML = "Next >"; - nLast.innerHTML = "Last >>"; + nFirst.innerHTML = "« First"; + nPrevious.innerHTML = "‹ Prev"; + nNext.innerHTML = "Next›"; + nLast.innerHTML = "Last»"; var oClasses = oSettings.oClasses; nFirst.className = oClasses.sPageButton+" "+oClasses.sPageFirst; @@ -31,9 +31,9 @@ $.fn.dataTableExt.oPagination.gmail_style = { nNext.className= oClasses.sPageButton+" "+oClasses.sPageNext; nLast.className = oClasses.sPageButton+" "+oClasses.sPageLast; + //nPaging.appendChild( nInfo ); nPaging.appendChild( nFirst ); nPaging.appendChild( nPrevious ); - nPaging.appendChild( nInfo ); nPaging.appendChild( nNext ); nPaging.appendChild( nLast ); @@ -76,7 +76,7 @@ $.fn.dataTableExt.oPagination.gmail_style = { nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' ); nFirst.setAttribute( 'id', oSettings.sTableId+'_first' ); nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' ); - nInfo.setAttribute( 'id', 'infoContainer' ); + //nInfo.setAttribute( 'id', 'infoContainer' ); nNext.setAttribute( 'id', oSettings.sTableId+'_next' ); nLast.setAttribute( 'id', oSettings.sTableId+'_last' ); } @@ -239,8 +239,8 @@ function init(graphContainer) { var defaultFlotOptions = { xaxis : { - min : 1996, - max : 2008, + min : globalDateObject.getFullYear() - 9, + max : globalDateObject.getFullYear(), tickDecimals : 0, tickSize : 2 }, @@ -283,12 +283,14 @@ function unStuffZerosFromLineGraphs(jsonObject, year) { calcZeroLessMinAndMax(jsonObject, year); var currentMinYear = year.globalMin, currentMaxYear = year.globalMax; + + var normalizedYearRange = getNormalizedYearRange(); $.each(jsonObject, function(key, val) { var i = 0; for (i = 0; i < val.data.length; i++) { - if (((val.data[i][0] < currentMinYear) || (val.data[i][0] > currentMaxYear)) + if (((val.data[i][0] < normalizedYearRange.normalizedMinYear) || (val.data[i][0] > normalizedYearRange.normalizedMaxYear)) && val.data[i][1] == 0) { val.data.splice(i, 1); @@ -318,6 +320,43 @@ function unStuffZerosFromLineGraph(jsonObject) { } } + +/** + * This is used to normalize the year range for the currently selected entities to always + * display the last 10 years worth of data points. + * + */ +function getNormalizedYearRange() { + + /* + * This is done to make sure that at least last 10 years worth of data points + * can be displayed. + * */ + if (globalDateObject.getFullYear() < year.globalMax) { + + inferredMaxYear = year.globalMax; + + } else { + + inferredMaxYear = globalDateObject.getFullYear(); + } + + if (globalDateObject.getFullYear() - 9 > year.globalMin) { + + inferredMinYear = year.globalMin; + + } else { + + inferredMinYear = globalDateObject.getFullYear() - 9; + } + + return { + normalizedMinYear: inferredMinYear, + normalizedMaxYear: inferredMaxYear, + normalizedRange: inferredMaxYear - inferredMinYear + }; +} + /** * stuffZerosIntoLineGraphs is used to fill discontinuities in data points. For * example, if a linegraph has the following data points [1990, @@ -336,22 +375,22 @@ function stuffZerosIntoLineGraphs(jsonObject, year) { calcZeroLessMinAndMax(jsonObject, year); - var arrayOfMinAndMaxYears = [ year.globalMin, year.globalMax ]; - + var normalizedYearRange = getNormalizedYearRange(); + $.each(jsonObject, function(key, val) { - var position = arrayOfMinAndMaxYears[0], i = 0; + var position = normalizedYearRange.normalizedMinYear, i = 0; //console.log(key, val, position, (arrayOfMinAndMaxYears[1] - arrayOfMinAndMaxYears[0]) + 1); - for (i = 0; i < (arrayOfMinAndMaxYears[1] - arrayOfMinAndMaxYears[0]) + 1; i++) { + for (i = 0; i < normalizedYearRange.normalizedRange + 1; i++) { //console.log("val.data[i]", val.data[i]); if (val.data[i]) { if (val.data[i][0] != position - && position <= arrayOfMinAndMaxYears[1]) { + && position <= normalizedYearRange.normalizedMaxYear) { val.data.splice(i, 0, [ position, 0 ]); } } @@ -525,6 +564,9 @@ function setLineWidthAndTickSize(yearRange, flotOptions) { } else if (yearRange > 15 && yearRange < 70) { flotOptions.series.lines.lineWidth = 2; flotOptions.xaxis.tickSize = 5; + } else if (yearRange == 0 ) { + flotOptions.series.lines.lineWidth = 3; + flotOptions.xaxis.tickSize = 1; } else { flotOptions.series.lines.lineWidth = 1; flotOptions.xaxis.tickSize = 10; @@ -800,12 +842,13 @@ function removeEntityUnChecked(renderedObjects, entity){ //remove the entity that is unchecked var ii = 0; while (ii < renderedObjects.length) { + if (renderedObjects[ii].label == entity.label) { unStuffZerosFromLineGraph(renderedObjects[ii]); renderedObjects.splice(ii, 1); } else { ii++; - } + } } unStuffZerosFromLineGraphs(renderedObjects, year); @@ -868,16 +911,23 @@ function updateCounter(){ } function displayLineGraphs(){ + //plot all we got if (renderedObjects.length == 0) { + init(graphContainer); + } else { + removeUnknowns(renderedObjects); $.plot(graphContainer, renderedObjects, FlotOptions); insertBackUnknowns(renderedObjects); + } } + + function removeCheckBoxFromGlobalSet(checkbox){ //remove checkbox object from the globals var value = $(checkbox).attr("value"); @@ -966,7 +1016,7 @@ function prepareTableForDataTablePagination(jsonData){ var searchBarParentContainerDIVClass = "searchbar"; var entityListTable = $('#datatable').dataTable({ - "sDom": '<"' + searchBarParentContainerDIVClass + '"f><"filterInfo"i><"paginatedtabs"p><"datatablewrapper"t>', + "sDom": '<"' + searchBarParentContainerDIVClass + '"f><"filterInfo"i><"paginatedtabs"p><"table-separator"><"datatablewrapper"t>', "aaSorting": [ [2, "desc"] ], @@ -974,7 +1024,7 @@ function prepareTableForDataTablePagination(jsonData){ "iDisplayLength": 10, "bInfo": true, "oLanguage": { - "sInfo": "_START_ - _END_ of _TOTAL_", + "sInfo": "Records _START_ - _END_ of _TOTAL_", "sInfoEmpty": "No matching entities found", "sInfoFiltered": "", }, @@ -999,8 +1049,10 @@ function prepareTableForDataTablePagination(jsonData){ entityListTable.fnFilter(""); }); + /* var filterInfo = $(".filterInfo").detach(); $("#infoContainer").append(filterInfo); + */ } @@ -1108,8 +1160,6 @@ function enableUncheckedEntities(){ function checkIfColorLimitIsReached(){ -// console.log(getSize(labelToCheckedEntities)); - if (getSize(labelToCheckedEntities) >= 10) { disableUncheckedEntities(); } else { @@ -1126,10 +1176,8 @@ function setTickSizeOfAxes(){ checkedLabelToEntityRecord[index] = labelToEntityRecord[index]; }); - //calcMinandMaxYears(checkedLabelToEntityRecord, year); - //yearRange = (year.max - year.min); - yearRange = (year.globalMax - year.globalMin); + var normalizedYearRange = getNormalizedYearRange(); - setLineWidthAndTickSize(yearRange, FlotOptions); + setLineWidthAndTickSize(normalizedYearRange.normalizedRange, FlotOptions); setTickSizeOfYAxis(calcMaxWithinComparisonParameter(checkedLabelToEntityRecord), FlotOptions); } \ No newline at end of file diff --git a/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl b/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl index 92582527..1110b92e 100644 --- a/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl +++ b/productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl @@ -248,7 +248,7 @@ var organizationLabel = '${organizationLabel}'; */ $.each($("input.if_clicked_on_school"), function(index, checkbox) { - if (index > 0) { + if (index > 2) { return false; } @@ -306,8 +306,9 @@ var organizationLabel = '${organizationLabel}';

Who do you want to compare?

-
+ <#--
@@ -329,8 +330,11 @@ var organizationLabel = '${organizationLabel}';

You have selected 0 of a maximum - 10 schools to compare. - Clear

+ 10 schools to compare. + + Clear + +