column header percentages fixed

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
 

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{

index.html

@@ -6,7 +6,7 @@
 	<meta property="og:title" content="Retention Graph (Cohort Analysis)">
 	<meta property="og:description" content="Cohort Analysis Visualizer with Retention data with simple table">
 	<meta property="og:image" content="http://i.imgur.com/uJQTG1Q.png">
-    <title>Retention Graph using Bootstrap</title>
+    <title>Retention Graph</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
     <link href="css/retention-graph.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

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",

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 = $('<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 = $('<thead />').appendTo(table);
         var tHeadRow = $('<tr />', {
@@ -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 = $('<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 = $('<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;