Stacked Bar Chart basic implementation

app/assets/javascripts/admin/dashboard_active_loans_stack_chart_view.coffee

@@ -1,25 +1,32 @@
 class MS.Views.DashboardLoansActiveStackChart extends Backbone.View
 
   initialize: (params) ->
+    @element = params.el
     @loansData = params.loans_data
     @defaultChartOptions = {
-      height: 200,
-      width: '100%',
-      chartArea: {
-        left: 0,
-        top: 10,
-        width: '100%',
-        height: '90%'
+      height: 300,
+      backgroundColor: 'none',
+      isStacked: true,
+      hAxis: {
+        minValue: 0
       },
-      backgroundColor: 'none'
+      series: {
+        0: { color: '#b6d7a8' },
+        1: { color: '#f1c232' },
+        2: { color: '#646464' },
+      },
+      legend: {
+        position: 'top',
+        maxLines: 3
+      }
     }
 
     # When the window is resized, resize the charts
     window.addEventListener('resize', @loadGoogleCharts.bind @);
     window.addEventListener('dashboard.load', @loadGoogleCharts.bind @);
 
   loadGoogleCharts: ->
-    console.log("Loading Google Charts with data:", @loansData)
+    console.log("Loading Stacked Bar Google Chart with data:", @loansData)
     google.charts.load 'current',
       packages: ['corechart']
       callback: @loadCharts.bind @
@@ -28,44 +35,32 @@ class MS.Views.DashboardLoansActiveStackChart extends Backbone.View
     google.charts.setOnLoadCallback @loanActiveStackChart.bind @
 
   loanActiveStackChart: ->
-    data = new google.visualization.arrayToDataTable()
-
-    /*
-    	Esto es lo que habria que armar a partir de los 
-        // Agregar columnas
-        data.addColumn('string', 'Status'); 
-        data.addColumn('number', 'Allocated');
-        data.addColumn('number', 'Repaymnet');
-        data.addColumn('number', 'Other/Crime');
-
-        // Agregar filas de datos
-        data.addRows([
-            [loan.id, allocated/balance %, repayment % , other %]
-        ]);
+    data = [
+      ['ID', 'Balance', 'Repayment', 'Other']
+    ]
 
-        var options_fullStacked = {
-            isStacked: 'percent',
-            height: 300,
-            legend: {position: 'top', maxLines: 3},
-            hAxis: {
-                minValue: 0,
-                ticks: [0, .3, .6, .9, 1]
-            },
-            colors: ['GREEN', 'YELLOW', 'GREY']
-		};
+    for key,loan of @loansData
+      balance_pct = (loan.balance * 100) / loan.alloc
+      repayment_pct = (loan.repayments * -100) / loan.alloc
+      other_pct = 100 - balance_pct - repayment_pct
+      data.push([
+        String(loan.id)
+        balance_pct,
+        repayment_pct,
+        other_pct
+      ])
+
+    if data.length == 1
+      data.push([
+        '', 0, 0, 0
+      ])
 
-    */
+    table = new google.visualization.arrayToDataTable(data)
 
-    // ESTO DEBERIA SER LO DE ARRIBA
-    for key,loan of @loansData
-      name = loan.name
-      total = loan.amount
-      data.addRow [name, total]
-      // DESDE ACA NO TOQUE NADA MAS
-    @drawPieChartIntoElement('.dashboard-loans-chart', data)
+    @drawPieChartIntoElement(@element, table)
 
-  drawPieChartIntoElement: (elementSelector, chartTable) ->
-    chart = new google.visualization.PieChart($(elementSelector)[0])
+  drawPieChartIntoElement: (element, chartTable) ->
+    chart = new google.visualization.BarChart(element)
     @formatNumbers(chartTable)
     chart.draw(chartTable, @defaultChartOptions)
 

app/assets/javascripts/admin/dashboard_loans_chart_view.coffee

@@ -2,10 +2,11 @@ class MS.Views.DashboardLoansChart extends Backbone.View
 
   initialize: (params) ->
     @loansDataData = params.loans_data
+    @element = params.el
     #@loansDataData = [{'name': 'status1', 'amount':10},{'name': 'status2', 'amount':20},{'name': 'status3', 'amount':30},{'name': 'status4', 'amount':40},{'name': 'status5', 'amount':50},{'name': 'status6', 'amount':60}]
     @locale = params.locale
     @defaultChartOptions = {
-      height: 200,
+      height: 300,
       width: '100%',
       chartArea: {
         left: 0,
@@ -23,7 +24,7 @@ class MS.Views.DashboardLoansChart extends Backbone.View
     window.addEventListener('dashboard.load', @loadGoogleCharts.bind @);
 
   loadGoogleCharts: ->
-    console.log("Loading Google Charts with data:", @loansDataData)
+    console.log("Loading Pie Google Chart with data:", @loansDataData)
     google.charts.load 'current',
       packages: ['corechart']
       callback: @loadCharts.bind @
@@ -43,10 +44,10 @@ class MS.Views.DashboardLoansChart extends Backbone.View
       total = loan.amount
       data.addRow [name, total]
 
-    @drawPieChartIntoElement('.dashboard-loans-chart', data)
+    @drawPieChartIntoElement(@element, data)
 
-  drawPieChartIntoElement: (elementSelector, chartTable) ->
-    chart = new google.visualization.PieChart($(elementSelector)[0])
+  drawPieChartIntoElement: (element, chartTable) ->
+    chart = new google.visualization.PieChart(element)
     @formatNumbers(chartTable)
     chart.draw(chartTable, @defaultChartOptions)
 

app/controllers/admin/dashboard_beta_controller.rb

@@ -50,18 +50,17 @@ def initialize_wice_grid(projects, person_id)
   end
 
   def prep_projects_stack_graph
-    stack_loans = Loan.where(division_id: @division.id, status_value: 'active').order(signing_date: :desc).limit(7);
-
-    @satck_data = stack_loans.each do |loan|
-      loan_alloc = loan.amount
-      loan_repayments = loan.sum_of_repayments(loan.signing_date, Time.now.strftime('%Y-%m-%d'))
-      loan_balance = loan.final_principal_balance(loan.signing_date, Time.now.strftime('%Y-%m-%d'))
-      loan_repayments_pts = loan_repayments/loan_alloc
-      loan_balance_pts =  loan_balance/loan_alloc
-      loan_other_pts = 1-loan_repayments_pts-loan_balance_pts
-      loan_other = loan_alloc * loan_other_pts
-
-      { name: loan.name, loan_alloc: loan_alloc, loan_repayments: loan_repayments, loan_repayments_pts: loan_repayments, loan_balance: loan_balance, loan_balance_pts: loan_balance_pts, loan_other: loan_other, loan_other_pts: loan_other_pts, loan_id: loan.id} 
+    stack_loans = Loan.where(division_id: @division.self_and_descendants.pluck(:id), status_value: 'active').order(signing_date: :desc).select { |t| t.txns_count > 0 }.take(20)
+
+    @stack_data = stack_loans.map do |loan|
+      start_date = loan.signing_date || loan.created_at.to_date
+      end_date = loan.actual_end_date || Date.today
+
+      alloc = loan.sum_of_disbursements(start_date: start_date, end_date: end_date).to_f
+      balance = loan.final_principal_balance(start_date: start_date, end_date: end_date).to_f
+      repayments = loan.repayments_of_principal(start_date: start_date, end_date: end_date).to_f
+
+      { name: loan.name, alloc: alloc, repayments: repayments, balance: balance, id: loan.id, start_date: start_date, end_date: end_date, transactions: loan.txns_count } 
     end
 
   end

app/models/loan.rb

@@ -233,6 +233,10 @@ def txns_read_only?
     txn_handling_mode == TXN_MODE_READ_ONLY
   end
 
+  def txns_count
+    transactions.length
+  end
+
   def num_sync_issues_by_level(level)
     return nil if transactions.empty?
     Accounting::SyncIssue.where(project_id: id, level: level).size

app/views/admin/dashboard_beta/dashboard.html.slim

@@ -5,8 +5,6 @@
 .block
   div
     section.section.peer-data
-      h2 = @division.name
-      p = t("dashboard.loan_chart_description")
       .loans-chart
         .chart
           .dashboard-loans-chart
@@ -38,18 +36,16 @@
     $(function() {
       new MS.Views.ShowEditView({el: '.quick-notes'});
 
-      $el = $(".section.peer-data.loans-chart");
       new MS.Views.DashboardLoansChart({
-        el: $el,
+        el: $("section.peer-data .loans-chart")[0],
         loans_data: #{json @status_counts},
         id: #{@division.id},
         locale: "#{I18n.locale}"
       });
 
-      $el = $(".section..active-loans.loans-chart");
       new MS.Views.DashboardLoansActiveStackChart({
-        el: $el,
-        loans_data: #{json @satck_data},
+        el: $("section.active-loans .loans-chart")[0],
+        loans_data: #{json @stack_data},
       });
     });