Moved JS to separate file, removed bar chart

ihatemoney/models.py

@@ -129,7 +129,7 @@ class Project(db.Model):
         """
         return [
             {
-                "member": member,
+                "member": member._to_serialize,
                 "paid": sum(
                     [
                         bill.converted_amount

ihatemoney/static/js/charts.js

@@ -0,0 +1,178 @@
+function populateCharts(member_stats, months_in, monthly_stats) {
+
+    var members = [];
+    var total_per_member = ['CurrentBalance'];
+    var total_exp_per_member = {};
+    member_stats.forEach(function(stat) {
+        var member_name = stat.member.name;
+        members.push(member_name)
+        var val = stat.balance;
+        total_per_member.push(val);
+        total_exp_per_member[member_name] = 0;
+    });
+
+        
+    //Start of chart for total expenditure per month
+    var month_to_int = {
+        "Jan": 1,
+        "Feb": 2,
+        "Mar": 3,
+        "Apr": 4,
+        "May": 5,
+        "Jun": 6,
+        "Jul": 7,
+        "Aug": 8,
+        "Sep": 9,
+        "Oct": 10,
+        "Nov": 11,
+        "Dec": 12,
+    };
+
+    var months =[];
+    var exp_per_month = [];
+    //date_time is of form Sun, 11 Apr 2021 12:50:23 GMT
+
+    months_in.forEach(function(date_time) {
+        var month_year = monthYearStr(date_time);
+        //  month_year is of form Apr 2021
+        var year = parseInt(month_year.slice(4, 8));
+        var month = month_year.slice(0,3);
+        months.push(month_year);
+        exp_per_month.push(monthly_stats[year][month_to_int[month]]);
+    });
+        
+    months.reverse();
+    exp_per_month.reverse()
+    exp_per_month.splice(0,0,"Combined Monthly Expenditure");
+    
+
+    var exp_per_month_chart = bb.generate({
+        title: {
+            text: "Combined Monthly Expenditure"
+        },
+        data: {
+            columns: [
+                exp_per_month
+            ],
+            type: "line",
+        },
+        axis: {
+            x: {
+                type: "category",
+                categories: months
+            },
+            y: {
+                label: "Expenditure"
+            }
+        },
+        bindto: "#combinedPerMonth"
+    }); 
+
+    // End of total expenditure per month chart
+
+    // Start of expenditure per member per month chart
+    var members_exp_by_month = [];
+    member_stats.forEach(function(stat) {
+        var month_dict = [];
+        var month_amount = {};
+        stat.monthly_exp.forEach(function(data) {
+            // data is a tuple with a datetime object (Mon Year) at index 0 and amount at idx 1.
+            month_dict.push({
+                date: monthYearStr(data[0]),
+                amount: data[1],
+            });
+            var date = monthYearStr(data[0]);
+            month_amount[date] = data[1] ;
+            total_exp_per_member[stat.member.name] += data[1];
+        });
+        month_dict.reverse();
+        
+        members_exp_by_month.push({
+            name: stat.member.name,
+            exp_by_month: month_dict,
+            member_months: month_amount,
+        });
+    });
+
+
+    var member_exp_dict = {};
+
+    members_exp_by_month.forEach(function(member) {  
+        // inserting the name of the member as the first element of the array, as per bb docs
+        member_exp_dict[member.name] = [member.name];
+    });
+
+    var chart_columns = [];
+    months.forEach(function(month) {
+        members_exp_by_month.forEach(function(member) {  
+            // If current member had expenditure on current month
+            if (month in member.member_months) {
+                member_exp_dict[member.name].push(member.member_months[month]);
+            } else {
+                member_exp_dict[member.name].push(0);
+            }
+        });
+    });
+    // Pushing each individual member's expenditure per month array into the chart array
+    // chart array is what is given to bb.generate
+    members_exp_by_month.forEach(function(member) {
+        chart_columns.push(member_exp_dict[member.name]);
+    });
+    var members_exp_month_chart = bb.generate({
+        title: {
+            text: "Monthly Expenditure Per Member"
+        },
+        data: {
+            columns: chart_columns,
+            type: "line"
+        },
+        axis: {
+            x: {
+                type: "category",
+                categories: months,
+            },
+            y: {
+                label: "Expenditure"
+            }
+        },
+        bindto: "#memberPerMonth"
+    });
+    
+    //end of expenditure per month per member
+
+    // Start of Expenditure Pie Chart
+    pie_cols = [];
+    members_exp_by_month.forEach(function(member) {
+        var particpant = member.name;
+        var spent = total_exp_per_member[member.name];
+        var exp_arr = [particpant, spent];
+        pie_cols.push(exp_arr);
+    });
+
+    var pie = bb.generate({
+        data: {
+            columns: pie_cols,
+            type: "pie",
+        },
+        bindto: "#expPie"
+    });
+
+    // End of Expenditure Pie Chart
+}
+
+
+function monthYearStr(date_time) {
+    //date_time is of form Sun, 11 Apr 2021 12:50:23 GMT
+    var start_date_idx = date_time.indexOf(',') + 2;
+    var end_date_idx = date_time.indexOf(':') - 3;
+    var date = date_time.slice(start_date_idx, end_date_idx);
+    // date in the form 11 Apr 2021
+    // date in the form 11 Apr 2021
+    var month_start_idx = date.indexOf(' ') + 1;
+    var month = date.slice(month_start_idx, month_start_idx + 3);
+    var year_start_idx = date.lastIndexOf(' ') + 1;
+    var year = parseInt(date.slice(year_start_idx, year_start_idx + 4));
+    var month_year = month + ' ' + year.toString();
+    // returns date in form Apr 2021
+    return month_year;
+}

ihatemoney/templates/layout.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel=stylesheet type=text/css href="{{ url_for("static", filename='css/main.css') }}">
     <!-- Load d3.js -->
-    <script src="https://d3js.org/d3.v6.min.js" charset="utf-8"></script>
+    <script src="{{ url_for("static", filename='js/d3.v6.min.js') }}" charset="utf-8"></script>
     <!-- Load billboard.js with base style -->
     <link rel="stylesheet" href="{{url_for("static", filename='css/billboard.min.css')}}">
     <script src="{{ url_for("static", filename='js/billboard.min.js')}}"></script>
@@ -18,6 +18,7 @@
     <script src="{{ url_for("static", filename="js/popper.min.js") }}"></script>
     <script src="{{ url_for("static", filename="js/tagsinput.js") }}"></script>
     <script src="{{ url_for("static", filename="js/bootstrap.min.js") }}"></script>
+    <script src="{{ url_for("static", filename="js/charts.js") }}"></script>
     {%- if request.path == "/dashboard" %}
     <link rel=stylesheet type=text/css href="{{ url_for("static", filename='css/datatables.min.css') }}">
     <script src="{{ url_for("static", filename="js/datatables.min.js") }}"></script>

ihatemoney/templates/statistics.html

@@ -6,7 +6,6 @@
     </div>
 {% endblock %}
 
-
 {% block content %}
     <div class="d-flex flex-column">
         <table id="bill_table" class="split_bills table table-striped ml-md-n3">
@@ -36,15 +35,6 @@
         <h2> {{ _("Visualization") }}</h2>
         
         
-        <!-- Required for some style in charts, feel free to move from here -->
-        <style>
-        #balanceBar .bb-ygrid-line line {stroke: red;}
-
-        #balanceBar .fill_green { fill: green; }
-        #balanceBar .fill_red { fill: red; }
-        </style>
-        <br>
-        <div id="balanceBar"></div>
         <br>
         <div id="memberPerMonth"></div>
         <br>
@@ -53,222 +43,9 @@
         <div id="expPie"></div>
         
 
-
+        <!-- Onload does not work with divs, so in this case func call must go here-->
-        
-        
-
-        
-
         <script> 
-        var members = [];
+        populateCharts({{ members_stats|tojson }}, {{ months|tojson }}, {{ monthly_stats|tojson }});
-        var total_per_member = ['CurrentBalance'];
-        var total_exp_per_member = {};
-        var balance_min_value = Number.POSITIVE_INFINITY;
-        var balance_max_value = Number.NEGATIVE_INFINITY;
-        {% for stat in members_stats %}
-            var member_name = "{{ stat.member.name }}"
-            members.push(member_name)
-            var val = {{ stat.balance }};
-            total_per_member.push(val);
-            total_exp_per_member[member_name] = 0;
-            if (val > balance_max_value) {
-                balance_max_value = val;
-            }
-            if (val < balance_min_value) {
-                balance_min_value = val;
-            }
-        {% endfor %}
-        //TODO: Remove this, its for debugging.
-        members.forEach(function(entry) {
-            console.log(entry);
-        });
-        //TODO: Remove this, its for debugging.
-        total_per_member.forEach(function(entry) {
-            console.log(entry);
-        });
-
-        // Start of current balance per month chart
-        var balance_bar = bb.generate({
-            title: {
-                text: "Current Balance per Member"
-            },
-            data: {
-                columns: [
-                    total_per_member
-                ],
-                type: "bar",
-                colors: {
-                    CurrentBalance: "#999C9F",
-                }
-            },
-            axis: {
-                x: {
-                    type: "category",
-                    categories: members
-                },
-                y: {
-                    label: "Expenditure"
-                }
-            },
-            grid: {
-                y: {
-                    lines: [
-                        {
-                            value: 0
-                        }
-                    ]
-                }
-            },
-            regions: [
-                {
-                    axis:"y",
-                    start: 0,
-                    end: balance_max_value,
-                    class: "fill_green"
-                },
-                {
-                    axis:"y",
-                    start: balance_min_value,
-                    end: 0,
-                    class: "fill_red"
-                }
-            ],
-            bar: {
-                width: {
-                    ratio: 0.5
-                }
-            },
-            bindto: "#balanceBar"
-        });
-        // End of current balance per month chart
-
-       
-
-        // Start of chart for total expenditure per month
-        var months =[];
-        var exp_per_month = [];
-        {% for month in months %}
-            var month_year = "{{ _(month.strftime("%B")) }} {{ month.year }}";
-            months.push(month_year);
-            exp_per_month.push({{ monthly_stats[month.year][month.month] }});
-        {% endfor %}
-        months.reverse();
-        exp_per_month.reverse()
-        exp_per_month.splice(0,0,"Combined Monthly Expenditure");
-        //TODO: Remove this, its for debugging.
-        months.forEach(function(entry) {
-            console.log(entry);
-        });
-
-        var exp_per_month_chart = bb.generate({
-            title: {
-                text: "Combined Monthly Expenditure"
-            },
-            data: {
-                columns: [
-                    exp_per_month
-                ],
-                type: "line",
-            },
-            axis: {
-                x: {
-                    type: "category",
-                    categories: months
-                },
-                y: {
-                    label: "Expenditure"
-                }
-            },
-            bindto: "#combinedPerMonth"
-        });
-        // End of total expenditure per month chart
-
-        // Start of expenditure per member per month chart
-        var members_exp_by_month = [];
-        {% for stat in members_stats|sort(attribute='member.name') %}
-            var month_dict = [];
-            var month_amount = {};
-            {% for data in stat.monthly_exp %} 
-                // data is a tuple with a datetime object (Mon Year) at index 0 and amount at idx 1.
-                month_dict.push({
-                    date: "{{ _(data[0].strftime("%B")) }} {{ data[0].year }}",
-                    amount: {{ data[1] }}
-                });
-                var date = "{{ _(data[0].strftime("%B")) }} {{ data[0].year }}";
-                month_amount[date] = {{ data[1] }};
-                total_exp_per_member["{{ stat.member.name }}"] += {{ data[1] }};
-            {% endfor %}
-            month_dict.reverse();
-            
-            members_exp_by_month.push({
-                name: "{{stat.member.name}}",
-                exp_by_month: month_dict,
-                member_months: month_amount,
-            });
-        {% endfor %}
-        var member_exp_dict = {};
-
-        members_exp_by_month.forEach(function(member) {  
-            // inserting the name of the member as the first element of the array, as per bb docs
-            member_exp_dict[member.name] = [member.name];
-        });
-        var chart_columns = [];
-        months.forEach(function(month) {
-            members_exp_by_month.forEach(function(member) {  
-                // If current member had expenditure on current month
-                if (month in member.member_months) {
-                    member_exp_dict[member.name].push(member.member_months[month]);
-                } else {
-                    member_exp_dict[member.name].push(0);
-                }
-            });
-        });
-        console.log(member_exp_dict);
-        // Pushing each individual member's expenditure per month array into the chart array
-        // chart array is what is given to bb.generate
-        members_exp_by_month.forEach(function(member) {
-            chart_columns.push(member_exp_dict[member.name]);
-        });
-        var members_exp_month_chart = bb.generate({
-            title: {
-                text: "Monthly Expenditure Per Member"
-            },
-            data: {
-                columns: chart_columns,
-                type: "line"
-            },
-            axis: {
-                x: {
-                    type: "category",
-                    categories: months,
-                },
-                y: {
-                    label: "Expenditure"
-                }
-            },
-            bindto: "#memberPerMonth"
-        });
-        
-        //end of expenditure per month per member
-
-        // Start of Expenditure Pie Chart
-        pie_cols = [];
-        members_exp_by_month.forEach(function(member) {
-            var particpant = member.name;
-            var spent = total_exp_per_member[member.name];
-            var exp_arr = [particpant, spent];
-            pie_cols.push(exp_arr);
-        })
-        console.log(pie_cols);
-        var pie = bb.generate({
-            data: {
-                columns: pie_cols,
-                type: "pie",
-            },
-            bindto: "#expPie"
-        });
-
-        // End of Expenditure Pie Chart
         </script>
     </div>