From 2432d80e6f1e734d9ca3e05f568d7f0ae0858b9a Mon Sep 17 00:00:00 2001 From: Jyothi Babu Araja Date: Mon, 28 Nov 2016 19:33:01 +0530 Subject: [PATCH] column header percentages fixed --- README.md | 6 +++++- css/retention-graph.css | 4 ++-- index.html | 2 +- js/options.js | 19 +++++++++++-------- js/retention-graph.js | 41 +++++++++++++++++++++++++++++------------ 5 files changed, 48 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index a872a62..8d75807 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # Retention graph (Cohort analysis) -Retention graph (Cohort Analysis) using Bootstrap ```(v0.1.5)``` +Retention graph (Cohort Analysis) using Bootstrap ```(v0.1.7)``` ###Demo: @@ -71,6 +71,10 @@ $(selector).retention(options); You can figure out :) ``` +###Release Notes +**v0.1.7:** + - Most of the issues fixed, Especially column header percentages. + ###License It is available under the [MIT license](http://www.opensource.org/licenses/mit-license.php) as Bootstrap, Moment.js, DateRangePicker.js is included in this repository diff --git a/css/retention-graph.css b/css/retention-graph.css index 1bd4020..34e1e08 100644 --- a/css/retention-graph.css +++ b/css/retention-graph.css @@ -9,8 +9,8 @@ } .retention-box-body{ - max-height:300px; - overflow:auto + max-height:500px; + overflow:auto; } .retention-box-body:before,.retention-box-footer:before,.retention-box-header:after,.retention-box-body:after,.retention-box-footer:after{ diff --git a/index.html b/index.html index 462cf69..dce7325 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - Retention Graph using Bootstrap + Retention Graph diff --git a/js/options.js b/js/options.js index 366f207..1566d45 100644 --- a/js/options.js +++ b/js/options.js @@ -5,20 +5,23 @@ var options = { data : { days : { "22-05-2016": [200, 10, 20, 30, 40, 10, 20, 20], - "23-05-2016": [300, 200, 150, 50, 20, 20, 90, 100], - "24-05-2016": [200, 110, 150, 50, 10, 20, 30, 40], - "25-05-2016": [100, 10, 10, 50, 20, 20, 60, 0] + "23-05-2016": [300, 200, 150, 50, 20, 20, 90], + "24-05-2016": [200, 110, 150, 50, 10, 20], + "25-05-2016": [100, 10, 10, 50, 20], + "26-05-2016": [300, 200, 150], + "27-05-2016": [200, 110], + "28-05-2016": [100] }, weeks : { "week1": [200, 10, 20, 30, 40, 10, 20, 20], - "week2": [300, 200, 150, 50, 20, 20, 90, 100], - "week3": [200, 110, 150, 50, 10, 20, 30, 40] + "week2": [300, 200, 150, 50, 20, 20, 90], + "week3": [200, 110, 150, 50, 10, 20] }, months : { "month1": [200, 10, 20, 30, 40, 10, 20, 20], - "month2": [300, 200, 150, 50, 20, 20, 90, 100], - "month3": [200, 110, 150, 50, 10, 20, 30, 40], - "month4": [100, 10, 10, 50, 20, 20, 60, 0] + "month2": [300, 200, 150, 50, 20, 20, 90], + "month3": [200, 110, 150, 50, 10, 20], + "month4": [100, 10, 10, 50, 20] } }, //startDate : "22-05-2016", diff --git a/js/retention-graph.js b/js/retention-graph.js index 233c30b..19bcf21 100644 --- a/js/retention-graph.js +++ b/js/retention-graph.js @@ -73,6 +73,8 @@ _this.headerValues = []; + _this.initialValues = []; + //some dom Events $(document).ready(function() { $(document).on('click', 'td.clickable', function () { @@ -198,22 +200,21 @@ }; Retention.prototype.start = function (body) { + var _this = this; $(body).html(''); var table = this.getTable(); table.appendTo(body); - //var tableHeader = this.generateTableHeader(table); - //tableHeader.appendTo(table); var tbody = $('').appendTo(table); var rowsData = this.getRows(); this.headerValues = new Array(this.options[this.currentSelected] + 2).join('0').split('').map(parseFloat); - console.log(this.headerValues); - for(var row in rowsData){ - this.generateRow(rowsData[row]).appendTo(tbody); - console.log(this.headerValues); - } + this.initialValues = new Array(rowsData.length).join('0').split('').map(parseFloat); //initialising to 0 + rowsData.forEach(function(data){ + _this.generateRow(data).appendTo(tbody); + _this.initialValues.push(data[1]); //pushes initial values before calculating retention. In fact calculating retention for these values + }); var tableHeader = this.generateTableHeader(table); tableHeader.appendTo(table); }; @@ -328,6 +329,23 @@ return table; }; + /** + * Gives overall percentage of column + * @param value + * @param index, index of retention + */ + Retention.prototype.getTotalPercentage = function (value, index) { + var total = 0; + var threshold = this.initialValues.length - index; + console.log(this.initialValues); + this.initialValues.forEach(function (data, i) { + if(i < threshold) + total += data; + }); + console.log(total); + return this.getPercentage(total, value); + }; + Retention.prototype.generateTableHeader = function (table) { var tHead = $('').appendTo(table); var tHeadRow = $('', { @@ -337,25 +355,24 @@ var headerData = this.getHeaderData(); var length = headerData.length; var _this = this; - var total = _this.headerValues[0]; //day0 count var td = "", span = ""; - for(var key in headerData){ + headerData.forEach(function(data, key){ //FIXME: no need to use headerData here td = $('', { class : function(){ return key > 0 ? "retention-cell head-clickable" : "retention-cell key-cell"; }, day : key-1, - text : headerData[key] + " " + text : data + " " }).appendTo(tHeadRow); if(key > 0) { span = $('', { class: 'retention-badge badge-info', text: function () { - return _this.showValue? _this.headerValues[key-1] : _this.getPercentage(total, _this.headerValues[key-1]) + "%"; + return _this.showValue? _this.headerValues[key-1] : _this.getTotalPercentage(_this.headerValues[key-1], key-2) + "%"; } }).appendTo(td); } - } + }); $('.head-clickable .retention-cell').css('width', (85 / (length+1)) + '%'); $('.retention-cell.key-cell').css('width', '15%'); return tHead;