Cleanup and prep-work for new charts (will be a new feature).

app/controllers/AccountController.php

@@ -111,7 +111,8 @@ class AccountController extends BaseController
         return Response::jsoN($return);
     }
 
-    public function transactions(Account $account) {
+    public function transactions(Account $account)
+    {
         /*
          * TODO get the JSON helper to get transactions or something.
          */
@@ -123,7 +124,7 @@ class AccountController extends BaseController
      *
      * @return \Illuminate\View\View
      */
-    public function sankey($account)
+    public function sankeyOut($account)
     {
 
         /*
@@ -162,7 +163,7 @@ class AccountController extends BaseController
                     $from     = $to;
                     $category = $entry->categories()->first();
                     if ($category) {
-                        $to = $category->name . ' (cat)';
+                        $to = ' ' . $category->name;
                     } else {
                         $to = '(no category)';
                     }
@@ -211,16 +212,18 @@ class AccountController extends BaseController
             }
 
         }
-        ksort($filtered);
-
         /*
-         * Collect amounts to give the labels the proper
+         * Take out the keys:
          */
+        foreach ($filtered as $key => $entry) {
+            $result[] = [$entry['from'],$entry['to'],$entry['amount']];
+        }
+
 
         /*
          * Loop it again to add the amounts.
          */
-        return View::make('accounts.sankey', compact('filtered'));
+        return Response::json($result);
     }
 
 

app/routes.php

@@ -142,7 +142,7 @@ Route::group(['before' => 'auth'], function () {
         Route::get('/accounts/edit/{account}',['uses' => 'AccountController@edit','as' => 'accounts.edit']);
         Route::get('/accounts/delete/{account}',['uses' => 'AccountController@delete','as' => 'accounts.delete']);
         Route::get('/accounts/show/{account}',['uses' => 'AccountController@show','as' => 'accounts.show']);
-        Route::get('/accounts/sankey/{account}',['uses' => 'AccountController@sankey','as' => 'accounts.sankey']);
+        Route::get('/accounts/sankey/{account}/out',['uses' => 'AccountController@sankeyOut','as' => 'accounts.sankey.out']);
 
         // budget controller:
         Route::get('/budgets/date',['uses' => 'BudgetController@indexByDate','as' => 'budgets.index.date']);

app/views/accounts/sankey.blade.php

@@ -29,12 +29,10 @@ google.setOnLoadCallback(drawChart);
 
     // Set chart options
     var options = {
-        width: 600,
-
         sankey: {
                 link: { color: { fill: '#9fa8da', fillOpacity: 0.8 } },
-                node: { color: { fill: '#a61d4c' },
+                node: { color: { fill: '#000' },
-                        label: { color: '#871b47' } }
+                        label: { color: '#000' } }
               }
     };
 

app/views/accounts/show.blade.php

@@ -7,7 +7,7 @@
                 <i class="fa fa-fw {{$subTitleIcon}} fa-fw"></i> {{{$account->name}}}
             </div>
             <div class="panel-body">
-                <div id="accountTransactionsTable"></div>
+                <div id="overviewChart"></div>
             </div>
         </div>
     </div>
@@ -61,11 +61,36 @@
                 </div>
     </div>
 </div>
+
+
+<div class="row">
+    <div class="col-lg-6 col-md-12 col-sm-12">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                Out
+            </div>
+            <div class="panel-body">
+                <div id="accountOutSankey"></div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-6 col-md-12 col-sm-12">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                In
+            </div>
+            <div class="panel-body">
+
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12">
         <div class="panel panel-default">
             <div class="panel-heading">
-                <i class="fa fa-repeat fa-fw"></i> Transaction
+                <i class="fa fa-repeat fa-fw"></i> Transactions
             </div>
             <div class="panel-body">
 
@@ -122,18 +147,7 @@
     </div>
 </div>
 
-<div class="row">
-<div class="col-lg-12 col-md-12 col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <i class="fa fa-repeat fa-fw"></i> Transaction
-            </div>
-            <div class="panel-body">
 
-            </div>
-        </div>
-    </div>
-</div>
 
 {{--
 <div class="row">
@@ -153,12 +167,9 @@
 @section('scripts')
 <script type="text/javascript">
     var accountID = {{{$account->id}}};
-    var URL = 'bla bla bla';
-    var container = 'transactionByAccountTable';
 </script>
 {{HTML::script('assets/javascript/datatables/jquery.dataTables.min.js')}}
 {{HTML::script('assets/javascript/datatables/dataTables.bootstrap.js')}}
-{{HTML::script('assets/javascript/datatables/transactions.js')}}
 {{HTML::script('assets/javascript/highcharts/highcharts.js')}}
 {{HTML::script('assets/javascript/firefly/accounts.js')}}
 @stop

public/assets/javascript/firefly/accounts.js

@@ -2,12 +2,10 @@ $(function () {
     if ($('#accountTable').length == 1) {
         drawDatatable();
     }
-    //if ($('#accountTransactionsTable').length == 1) {
+    if ($('#overviewChart').length == 1) {
-    //    drawTransactionsForAccount();
+        drawOverviewChart();
-    //}
-    if ($('#transactionByAccountTable').length == 1) {
-        renderTransactionsFromURL(URL, container);
     }
+
 });
 
 function drawDatatable() {
@@ -62,11 +60,11 @@ function drawDatatable() {
 }
 
 
-function drawTransactionsForAccount() {
+function drawOverviewChart() {
     $.getJSON('chart/home/account/' + accountID).success(function (data) {
         var options = {
             chart: {
-                renderTo: 'accountTransactionsTable',
+                renderTo: 'overviewChart',
                 type: 'spline'
             },
 
@@ -128,84 +126,6 @@ function drawTransactionsForAccount() {
                 enabled: false
             }
         };
-        $('#accountTransactionsTable').highcharts(options);
+        $('#overviewChart').highcharts(options);
     });
 }
-
-//$(function () {
-//if($('#chart').length == 1) {
-//    /**
-//     * get data from controller for home charts:
-//     */
-//    $.getJSON('chart/home/account/' + accountID).success(function (data) {
-//        var options = {
-//            chart: {
-//                renderTo: 'chart',
-//                type: 'spline'
-//            },
-//
-//            series: data.series,
-//            title: {
-//                text: null
-//            },
-//            yAxis: {
-//                allowDecimals: false,
-//                labels: {
-//                    formatter: function () {
-//                        if(this.value >= 1000 || this.value <= -1000) {
-//                            return '\u20AC ' + (this.value / 1000) + 'k';
-//                        }
-//                        return '\u20AC ' + this.value;
-//
-//                    }
-//                },
-//                title: {text: null}
-//            },
-//            xAxis: {
-//                type: 'datetime',
-//                dateTimeLabelFormats: {
-//                    day: '%e %b',
-//                    week: '%e %b'
-//                },
-//                title: {
-//                    text: null
-//                }
-//            },
-//            legend: {enabled:false},
-//            tooltip: {
-//                formatter: function () {
-//                    return this.series.name + ': \u20AC ' + Highcharts.numberFormat(this.y,2);
-//                }
-//            },
-//            plotOptions: {
-//                line: {
-//                    shadow: true
-//                },
-//                series: {
-//                    cursor: 'pointer',
-//                    negativeColor: '#FF0000',
-//                    threshold: 0,
-//                    lineWidth: 1,
-//                    marker: {
-//                        radius: 0
-//                    },
-//                    point: {
-//                        events: {
-//                            click: function (e) {
-//                                alert('click!');
-//                            }
-//                        }
-//                    }
-//                }
-//            },
-//            credits: {
-//                enabled: false
-//            }
-//        };
-//        $('#chart').highcharts(options);
-//    });
-//}
-//
-//
-//
-//});