Convert available funds / contributions/expenditures from area to step charts

camp_fin/models.py

@@ -945,18 +945,18 @@ def trends(self, since="2010"):
         # Balances and debts
         summed_filings = """
             SELECT
-              SUM(COALESCE(f.total_unpaid_debts, 0)) AS total_unpaid_debts,
-              SUM(f.closing_balance) AS closing_balance,
-              f.filed_date
+              COALESCE(f.total_unpaid_debts, 0) AS total_unpaid_debts,
+              f.closing_balance AS closing_balance,
+              fp.end_date,
+              fp.description
             FROM camp_fin_filing AS f
             JOIN camp_fin_filingperiod AS fp
               ON f.filing_period_id = fp.id
             WHERE f.entity_id = %s
               AND fp.exclude_from_cascading = FALSE
               AND fp.regular_filing_period_id IS NULL
               AND f.filed_date >= '{year}-01-01'
-            GROUP BY f.filed_date
-            ORDER BY f.filed_date
+            ORDER BY fp.end_date
         """.format(
             year=since
         )
@@ -967,54 +967,57 @@ def trends(self, since="2010"):
 
         balance_trend, debt_trend = [], []
 
-        for (
-            total_unpaid_debts,
-            closing_balance,
-            filed_date,
-        ) in cursor:
-            filing_date = (filed_date.year, filed_date.month, filed_date.day)
-            balance_trend.append([closing_balance, *filing_date])
-            debt_trend.append([total_unpaid_debts * -1, *filing_date])
+        for total_unpaid_debts, closing_balance, end_date, description in cursor:
+            period_end = {
+                "description": description,
+                "year": end_date.year,
+                "month": end_date.month,
+                "day": end_date.day,
+            }
+            balance_trend.append(
+                {
+                    "amount": closing_balance,
+                    **period_end,
+                }
+            )
+            debt_trend.append(
+                {
+                    "amount": total_unpaid_debts * -1,
+                    **period_end,
+                }
+            )
 
         output_trends = {"balance_trend": balance_trend, "debt_trend": debt_trend}
 
         # Donations and expenditures
         monthly_query = """
             SELECT
-              months.year,
-              months.month,
-              COALESCE({table}.amount, 0) AS amount
-            FROM (
-              SELECT
-                DISTINCT DATE_PART('year', month) AS year,
-                GENERATE_SERIES(1, 12) AS month
-              FROM {table}_by_month
-              ORDER BY year, month
-            ) months
-            JOIN (
-              SELECT
-                {table}.amount AS amount,
-                DATE_PART('month', {table}.month) AS month,
-                DATE_PART('year', {table}.month) AS year
-              FROM {table}_by_month AS {table}
-              WHERE {table}.entity_id = %s
-                AND {table}.month >= '{year}-01-01'::date
-            ) {table}
-            USING (year, month)
+              DATE_PART('year', {table}.month) AS year,
+              DATE_PART('month', {table}.month) AS month,
+              {table}.amount AS amount
+            FROM {table}_by_month AS {table}
+            WHERE {table}.entity_id = %s
+              AND {table}.month >= '{year}-01-01'::date
             ORDER BY year, month
         """
 
         contributions_query = monthly_query.format(table="contributions", year=since)
 
         cursor.execute(contributions_query, [self.id])
 
-        donation_trend = [[amount, year, month, 1] for year, month, amount in cursor]
+        donation_trend = [
+            {"amount": amount, "year": year, "month": month}
+            for year, month, amount in cursor
+        ]
 
         expenditures_query = monthly_query.format(table="expenditures", year=since)
 
         cursor.execute(expenditures_query, [self.id])
 
-        expend_trend = [[amount * -1, year, month, 1] for year, month, amount in cursor]
+        expend_trend = [
+            {"amount": amount * -1, "year": year, "month": month}
+            for year, month, amount in cursor
+        ]
 
         output_trends["donation_trend"] = donation_trend
         output_trends["expend_trend"] = expend_trend

camp_fin/static/css/custom.css

@@ -210,8 +210,6 @@ a.collapsed .show-less {
   background-color: #5b0007;
 }
 
-/*#net-funds-chart { height: 200px; }*/
-
 #date-search .form-control { width: 48%; }
 
 #date-search { margin-top: 21px; }

camp_fin/static/js/chart_helper.js

@@ -114,7 +114,7 @@ ChartHelper.netfunds = function(el, title, sourceTxt, yaxisLabel, data, startYea
   return new Highcharts.Chart({
       chart: {
           renderTo: el,
-          type: "line",
+          type: "area",
       },
       legend: {
         backgroundColor: "#ffffff",
@@ -127,13 +127,13 @@ ChartHelper.netfunds = function(el, title, sourceTxt, yaxisLabel, data, startYea
       },
       title: null,
       xAxis: {
-          dateTimeLabelFormats: { year: "%Y" },
+          dateTimeLabelFormats: { year: "%b '%y" },
           type: "datetime",
           title: {
             enabled: true,
-            text: "Filing date"
+            text: "Filing period end date"
           },
-          tickPixelInterval: 50,
+          tickPixelInterval: 75,
           min: Date.UTC(startYear, 1, 1),
           max: Date.UTC(endYear+1, 1, 1),
           startOnTick: true,
@@ -168,9 +168,16 @@ ChartHelper.netfunds = function(el, title, sourceTxt, yaxisLabel, data, startYea
       },
       tooltip: {
           crosshairs: true,
+          useHTML: true,
           formatter: function() {
-            var s = "<strong>" + ChartHelper.toolTipDateFormat("day", this.x) + "</strong>";
+            let s = ""
             $.each(this.points, function(i, point) {
+              if (i === 0) {
+                s += `
+                  <strong>${point.point.description}</strong><br />
+                  <strong>Period ending ${ChartHelper.toolTipDateFormat("day", this.x)}</strong>
+                `
+              }
               s += "<br /><span style='color: " + point.series.color + "'>" + point.series.name + ":</span> $" + Highcharts.numberFormat(point.y, 0, '.', ',');
             });
             return s;
@@ -199,7 +206,7 @@ ChartHelper.donation_expenditure = function(el, title, sourceTxt, yaxisLabel, da
   return new Highcharts.Chart({
       chart: {
           renderTo: el,
-          type: "line",
+          type: "area",
       },
       legend: {
         backgroundColor: "#ffffff",
@@ -218,7 +225,7 @@ ChartHelper.donation_expenditure = function(el, title, sourceTxt, yaxisLabel, da
             enabled: true,
             text: "Month",
           },
-          tickPixelInterval: 50,
+          tickPixelInterval: 75,
           min: Date.UTC(startYear, 1, 1),
           max: Date.UTC(endYear+1, 1, 1),
           startOnTick: true,
@@ -250,6 +257,7 @@ ChartHelper.donation_expenditure = function(el, title, sourceTxt, yaxisLabel, da
       },
       tooltip: {
           crosshairs: true,
+          useHTML: true,
           formatter: function() {
             var s = "<strong>" + ChartHelper.toolTipDateFormat("month", this.x) + "</strong>";
             $.each(this.points, function(i, point) {

camp_fin/templates/base-detail.html

@@ -245,42 +245,62 @@ <h1><i class='fa fa-spin fa-circle-o-notch'></i></h1>
     }
 
     //render net balance chart
-    var balance_trend = {{balance_trend}};
+    var balance_trend = {{balance_trend|safe}};
     var balance_trend_f = [];
-    var debt_trend = {{debt_trend}};
+
+    var debt_trend = {{debt_trend|safe}};
     var debt_trend_f = [];
 
-    // format balances
-    for (i = 0; i < balance_trend.length; i++) {
-      balance_trend_f.push([Date.UTC(balance_trend[i][1],balance_trend[i][2]-1,balance_trend[i][3]), balance_trend[i][0]]);
-    }
+    var expend_trend = {{expend_trend|safe}};
+    var expend_trend_f = [];
 
-    // format debt
-    for (i = 0; i < debt_trend.length; i++) {
-      debt_trend_f.push([Date.UTC(debt_trend[i][1],debt_trend[i][2]-1,debt_trend[i][3]), debt_trend[i][0]]);
-    }
+    var donation_trend = {{donation_trend|safe}};
+    var donation_trend_f = [];
 
-    ChartHelper.netfunds('net-funds-chart', 'Funds available and debts by filing date', '', 'Funds available / Debts', [balance_trend_f, debt_trend_f], balance_trend[0][1], balance_trend[balance_trend.length - 1][1]);
+    balance_trend.forEach(function(bal) {
+      balance_trend_f.push({
+        y: bal.amount,
+        x: Date.UTC(bal.year, bal.month-1, bal.day),
+        description: bal.description,
+      })
+    })
 
+    debt_trend.forEach(function(debt) {
+      debt_trend_f.push({
+        y: debt.amount,
+        x: Date.UTC(debt.year, debt.month-1, debt.day),
+        description: debt.description,
+      })
+    })
 
-    //render donation/expenditure chart
-    var expend_trend = {{expend_trend}};
-    var expend_trend_f = [];
+    expend_trend.forEach(function(exp) {
+      expend_trend_f.push({
+        y: exp.amount,
+        x: Date.UTC(exp.year, exp.month-1),
+      })
+    })
 
-    var donation_trend = {{donation_trend}};
-    var donation_trend_f = [];
+    donation_trend.forEach(function(don) {
+      donation_trend_f.push({
+        y: don.amount,
+        x: Date.UTC(don.year, don.month-1),
+        description: don.description,
+      })
+    })
 
-    // format donations
-    for (i = 0; i < donation_trend.length; i++) {
-      donation_trend_f.push([Date.UTC(donation_trend[i][1],donation_trend[i][2]-1,donation_trend[i][3]), donation_trend[i][0]]);
-    }
+    const chartValues = Array.prototype.concat(balance_trend, debt_trend, expend_trend, donation_trend)
 
-    // format expenditures
-    for (i = 0; i < expend_trend.length; i++) {
-      expend_trend_f.push([Date.UTC(expend_trend[i][1],expend_trend[i][2]-1,expend_trend[i][3]), expend_trend[i][0]]);
-    }
+    const startYear = chartValues.reduce(function(prev, current) {
+      return (prev && prev.year > current.year) ? current : prev
+    }).year
+
+    const endYear = chartValues.reduce(function(prev, current) {
+      return (prev && prev.year > current.year) ? prev : current
+    }).year
+
+    ChartHelper.netfunds('net-funds-chart', 'Funds available and debts by filing period', '', 'Funds available / Debts', [balance_trend_f, debt_trend_f], startYear, endYear);
 
-    ChartHelper.donation_expenditure('expend-chart', 'Contributions and expenditures by month', '', 'Contributions / Expenditures', [donation_trend_f, expend_trend_f], donation_trend[0][1], donation_trend[donation_trend.length - 1][1]);
+    ChartHelper.donation_expenditure('expend-chart', 'Contributions and expenditures by month', '', 'Contributions / Expenditures', [donation_trend_f, expend_trend_f], startYear, endYear);
   </script>
   <script type="text/javascript">
     function getPersonName(object){

camp_fin/templates/camp_fin/candidate-detail.html

@@ -83,7 +83,7 @@ <h4>
 {% endblock %}
 
 {% block charts %}
-  <h3><i class="fa fa-fw fa-area-chart"></i> Funds available and debts by filing date</h3>
+  <h3><i class="fa fa-fw fa-area-chart"></i> Funds available and debts by filing period</h3>
   <div id='net-funds-chart'></div>
 
   <h3><i class="fa fa-fw fa-bar-chart"></i> Contributions and expenditures by month</h3>

camp_fin/templates/camp_fin/committee-detail.html

@@ -36,10 +36,10 @@ <h1>
   </div>
 {% endblock %}
 {% block charts %}
-  <h3>Net funds over time</h3>
+  <h3><i class="fa fa-fw fa-area-chart"></i> Funds available and debts by filing period</h3>
   <div id='net-funds-chart'></div>
 
-  <h3>Donations and expenditures over time</h3>
+  <h3><i class="fa fa-fw fa-bar-chart"></i> Contributions and expenditures by month</h3>
   <div id='expend-chart'></div>
 {% endblock %}