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 + +