Cleaned up the budget charts.

app/assets/javascripts/budgets-default.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear in whatever order it 
+// gets included (e.g. say you have require_tree . then the code will appear after all the directories 
+// but before any files alphabetically greater than 'application.js' 
+//
+// The available directives right now are require, require_directory, and require_tree
+//
+//= require_tree highcharts
+//= require firefly/budgets/default

app/assets/javascripts/budgets-limit.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear in whatever order it 
+// gets included (e.g. say you have require_tree . then the code will appear after all the directories 
+// but before any files alphabetically greater than 'application.js' 
+//
+// The available directives right now are require, require_directory, and require_tree
+//
+//= require_tree highcharts
+//= require firefly/budgets/limit

app/assets/javascripts/budgets-nolimit.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear in whatever order it 
+// gets included (e.g. say you have require_tree . then the code will appear after all the directories 
+// but before any files alphabetically greater than 'application.js' 
+//
+// The available directives right now are require, require_directory, and require_tree
+//
+//= require_tree highcharts
+//= require firefly/budgets/nolimit

app/assets/javascripts/budgets-session.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear in whatever order it 
+// gets included (e.g. say you have require_tree . then the code will appear after all the directories 
+// but before any files alphabetically greater than 'application.js' 
+//
+// The available directives right now are require, require_directory, and require_tree
+//
+//= require_tree highcharts
+//= require firefly/budgets/session

app/assets/javascripts/firefly/budgets/default.js

@@ -0,0 +1,109 @@
+$(function () {
+    if ($('#chart').length == 1) {
+        var budgetId = $('#instr').data('budget');
+        var URL = 'chart/budget/' + budgetId + '/default';
+
+        // go do something with this URL.
+        $.getJSON(URL).success(function (data) {
+            var options = {
+                chart: {
+                    renderTo: 'chart',
+                },
+
+                series: data.series,
+                title: {
+                    text: data.chart_title
+                },
+                tooltip: {
+                    shared: true,
+                    crosshairs: false,
+                    formatter: function () {
+                        var str = '<span style="font-size:80%;">' + this.points[0].key + '</span><br />';
+                        for (x in this.points) {
+                            var point = this.points[x];
+                            var colour = point.point.pointAttr[''].fill;
+                            if (x == 0) {
+                                str += '<span style="color:' + colour + '">' + point.series.name + '</span>: € ' + Highcharts.numberFormat(point.y, 2) + '<br />';
+                            }
+                            if (x == 1) {
+                                str += '<span style="color:' + colour + '">' + point.series.name + '</span>: ' + Highcharts.numberFormat(point.y, 1) + '%<br />';
+                            }
+                        }
+                        return str;
+                    }
+                },
+
+
+                yAxis: [
+                    { // Primary yAxis
+                        title: {
+                            'text': 'Amount (EUR)',
+                            style: {
+                                color: Highcharts.getOptions().colors[0]
+                            }
+                        },
+                        labels: {
+                            format: '€ {value}',
+                            style: {
+                                color: Highcharts.getOptions().colors[0]
+                            }
+                        }
+                    },
+                    { // Secondary yAxis
+                        title: {
+                            'text': 'Percentage',
+                            style: {
+                                color: Highcharts.getOptions().colors[1]
+                            }
+                        },
+                        labels: {
+                            format: '{value}%',
+                            style: {
+                                color: Highcharts.getOptions().colors[1]
+                            }
+                        },
+                        opposite: true
+                    }
+                ],
+                subtitle: {
+                    text: data.subtitle,
+                    useHTML: true
+                },
+
+                xAxis: {
+                    type: 'category',
+                    labels: {
+                        rotation: -45,
+                        style: {
+                            fontSize: '12px',
+                            fontFamily: 'Verdana, sans-serif'
+                        }
+                    }
+                },
+                plotOptions: {
+                    line: {
+                        shadow: true
+                    },
+                    series: {
+                        cursor: 'pointer',
+                        negativeColor: '#FF0000',
+                        threshold: 0,
+                        lineWidth: 1,
+                        marker: {
+                            radius: 2
+                        },
+                    }
+                },
+                credits: {
+                    enabled: false
+                }
+            };
+            $('#chart').highcharts(options);
+
+
+        });
+
+    }
+
+
+});

app/assets/javascripts/firefly/budgets/limit.js

@@ -0,0 +1,103 @@
+$(function () {
+    if ($('#chart').length == 1) {
+        var envelopeId = $('#instr').data('envelope');
+        var URL = 'chart/budget/envelope/' + envelopeId;
+        // go do something with this URL.
+        $.getJSON(URL).success(function (data) {
+            var options = {
+                chart: {
+                    renderTo: 'chart',
+                },
+
+                series: data.series,
+                title: {
+                    text: data.chart_title
+                },
+                yAxis: [
+                    { // Primary yAxis
+                        title: {
+                            text: 'Expense (€)',
+                            style: {
+                                color: Highcharts.getOptions().colors[0]
+                            }
+                        },
+                        labels: {
+                            format: '€ {value}',
+                            style: {
+                                color: Highcharts.getOptions().colors[0]
+                            }
+                        }
+                    },
+                    { // Secondary yAxis
+                        title: {
+                            text: 'Left (€)',
+                            style: {
+                                color: Highcharts.getOptions().colors[1]
+                            }
+                        },
+                        labels: {
+                            format: '€ {value}',
+                            style: {
+                                color: Highcharts.getOptions().colors[1]
+                            }
+                        },
+                        opposite: true
+                    }
+                ],
+                subtitle: {
+                    text: data.subtitle,
+                    useHTML: true
+                },
+
+                tooltip: {
+                    shared: true,
+                    crosshairs: false,
+                    formatter: function () {
+                        var str = '<span style="font-size:80%;">' + Highcharts.dateFormat("%A, %e %B", this.x) + '</span><br />';
+                        for (x in this.points) {
+                            var point = this.points[x];
+                            var colour = point.point.pointAttr[''].fill;
+                            str += '<span style="color:' + colour + '">' + point.series.name + '</span>: € ' + Highcharts.numberFormat(point.y, 2) + '<br />';
+                        }
+                        return str;
+                    }
+                },
+
+                xAxis: {
+                    floor: 0,
+                    type: 'datetime',
+                    dateTimeLabelFormats: {
+                        day: '%e %b',
+                        year: '%b'
+                    },
+                    title: {
+                        text: 'Date'
+                    }
+                },
+                plotOptions: {
+                    line: {
+                        shadow: true
+                    },
+                    series: {
+                        cursor: 'pointer',
+                        negativeColor: '#FF0000',
+                        threshold: 0,
+                        lineWidth: 1,
+                        marker: {
+                            radius: 2
+                        },
+                    }
+                },
+                credits: {
+                    enabled: false
+                }
+            };
+            $('#chart').highcharts(options);
+
+
+        });
+
+    }
+
+
+});

app/assets/javascripts/firefly/budgets/nolimit.js

@@ -3,7 +3,6 @@ $(function () {
         chartType = $('#instr').data('type');
 
 
-
         if (chartType == 'envelope') {
             var envelopeId = $('#instr').data('envelope');
             var URL = 'chart/budget/envelope/' + envelopeId;
@@ -32,25 +31,31 @@ $(function () {
                 title: {
                     text: data.chart_title
                 },
-                yAxis: [{ // Primary yAxis
+                yAxis: { // Primary yAxis
+                    title: {
+                        text: 'Amount (€)',
+                        style: {
+                            color: Highcharts.getOptions().colors[1]
+                        }
+                    },
                     labels: {
                         format: '€ {value}',
                         style: {
                             color: Highcharts.getOptions().colors[1]
                         }
                     }
-                }, { // Secondary yAxis
-                    title: {
-                        style: {
-                            color: Highcharts.getOptions().colors[0]
-                        }
                 },
-                    opposite: true
-                }],
                 subtitle: {
                     text: data.subtitle,
                     useHTML: true
                 },
+                tooltip: {
+                    crosshairs: false,
+                    formatter: function () {
+                        var str = Highcharts.dateFormat("%A, %e %B", this.x) + ': € ' + Highcharts.numberFormat(this.y, 2);
+                        return str;
+                    }
+                },
 
                 xAxis: {
                     floor: 0,
@@ -84,7 +89,6 @@ $(function () {
             $('#chart').highcharts(options);
 
 
-
         });
 
     }

app/assets/javascripts/firefly/budgets/session.js

@@ -0,0 +1,93 @@
+$(function () {
+    if ($('#chart').length == 1) {
+        var budgetId = $('#instr').data('budget');
+        var URL = 'chart/budget/' + budgetId + '/session';
+
+        // go do something with this URL.
+        $.getJSON(URL).success(function (data) {
+            var options = {
+                chart: {
+                    renderTo: 'chart',
+                },
+
+                series: data.series,
+                title: {
+                    text: data.chart_title
+                },
+                yAxis: [
+                    { // Primary yAxis
+                        title: {
+                          text: 'Spent (€)',
+                            style: {
+                                color: Highcharts.getOptions().colors[0]
+                            }
+                        },
+                        labels: {
+                            format: '€ {value}',
+                            style: {
+                                color: Highcharts.getOptions().colors[0]
+                            }
+                        }
+                    },
+                    { // Secondary yAxis
+                        title: {
+                            text: 'Left in envelope (€)',
+                            style: {
+                                color: Highcharts.getOptions().colors[1]
+                            }
+                        },
+                        labels: {
+                            format: '€ {value}',
+                            style: {
+                                color: Highcharts.getOptions().colors[1]
+                            }
+                        },
+                        opposite: true
+                    }
+                ],
+                tooltip: {
+                    valuePrefix: '€ '
+                },
+                subtitle: {
+                    text: data.subtitle,
+                    useHTML: true
+                },
+
+                xAxis: {
+                    floor: 0,
+                    type: 'datetime',
+                    dateTimeLabelFormats: {
+                        day: '%e %b',
+                        year: '%b'
+                    },
+                    title: {
+                        text: 'Date'
+                    }
+                },
+                plotOptions: {
+                    line: {
+                        shadow: true
+                    },
+                    series: {
+                        cursor: 'pointer',
+                        negativeColor: '#FF0000',
+                        threshold: 0,
+                        lineWidth: 1,
+                        marker: {
+                            radius: 2
+                        },
+                    }
+                },
+                credits: {
+                    enabled: false
+                }
+            };
+            $('#chart').highcharts(options);
+
+
+        });
+
+    }
+
+
+});

app/controllers/ChartController.php

@@ -53,14 +53,15 @@ class ChartController extends BaseController
 
 
                 $pct = round(($spentInRep / $limit->amount) * 100, 2);
-                $expense[] = [$rep->startdate->timestamp * 1000, floatval($spentInRep)];
+                $name = $rep->periodShow();
-                $left[] = [$rep->startdate->timestamp * 1000, $pct];
+                $expense[] = [$name, floatval($spentInRep)];
+                $left[] = [$name, $pct];
             }
         }
 
         $return = [
             'chart_title' => 'Overview for budget ' . $budget->name,
-            'subtitle'    => 'Between something something',
+            'subtitle'    => 'All envelopes',
             'series'      => [
                 [
                     'type' => 'column',
@@ -70,12 +71,13 @@ class ChartController extends BaseController
                 [
                     'type'  => 'line',
                     'yAxis' => 1,
-                    'name'  => 'Spent pct for envelope',
+                    'name'  => 'Spent percentage for envelope',
                     'data'  => $left
                 ]
 
             ]
         ];
+
         return Response::json($return);
     }
 
@@ -108,7 +110,8 @@ class ChartController extends BaseController
 
         $return = [
             'chart_title' => 'Overview for budget ' . $budget->name,
-            'subtitle'    => 'Between ' . $rep->startdate->format('d M Y') . ' and ' . $rep->startdate->format('d M Y'),
+            'subtitle'    =>
+                'Between ' . $rep->startdate->format('M jS, Y') . ' and ' . $rep->enddate->format('M jS, Y'),
             'series'      => [
                 [
                     'type'  => 'column',
@@ -224,7 +227,7 @@ class ChartController extends BaseController
         $start = clone Session::get('start');
         $repetitionSeries[] = [
             'type' => 'column',
-            'name' => 'Something something expenses',
+            'name' => 'Expenses per day',
             'data' => $expense
         ];
 
@@ -259,8 +262,7 @@ class ChartController extends BaseController
                     'type'  => 'spline',
                     'id'    => 'rep-' . $repetition->id,
                     'yAxis' => 1,
-                    'name'  => 'Serie ' . $repetition->startdate->format('Y-m-d') . ' to ' .
+                    'name'  => 'Envelope in ' . $repetition->periodShow(),
-                        $repetition->enddate->format('Y-m-d') . '.',
                     'data'  => []
                 ];
                 $current = clone $repetition->startdate;
@@ -299,7 +301,10 @@ class ChartController extends BaseController
 
         $return = [
             'chart_title' => 'Overview for budget ' . $budget->name,
-            'subtitle'    => 'Between Bla bla bla',
+            'subtitle'    =>
+                'Between ' . Session::get('start')->format('M jS, Y') . ' and ' . Session::get('end')->format(
+                    'M jS, Y'
+                ),
             'series'      => $repetitionSeries
         ];
 

app/lib/Firefly/Storage/Budget/EloquentBudgetRepository.php

@@ -42,7 +42,7 @@ class EloquentBudgetRepository implements BudgetRepositoryInterface
     {
         $set = \Auth::user()->budgets()->with(
             ['limits'                        => function ($q) {
-                    $q->orderBy('limits.startdate', 'ASC');
+                    $q->orderBy('limits.startdate', 'DESC');
                 }, 'limits.limitrepetitions' => function ($q) {
                     $q->orderBy('limit_repetitions.startdate', 'ASC');
                 }]

app/views/budgets/show.blade.php

@@ -45,25 +45,15 @@
 
 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12">
-        <div id="chart" style="height:300px;"></div>
+        <div id="chart"></div>
         @if(isset($filters[0]) && is_object($filters[0]) && get_class($filters[0]) == 'Limit')
         <div id="instr" data-type="envelope" data-envelope="{{$repetitions[0]['limitrepetition']->id}}"></div>
         @elseif(isset($filters[0]) && $filters[0] == 'no_envelope')
         <div id="instr" data-type="no_envelope" data-budget="{{$budget->id}}"></div>
-        <p class="small text-center">
-        A chart showing the date-range of all the not-enveloped stuff, and their amount.
-        </p>
         @elseif($useSessionDates == true)
         <div id="instr" data-type="session" data-budget="{{$budget->id}}"></div>
-        <p class="small text-center">
-        Date range of session, show chart with all expenses in bars
-        find all limit repetitions, add them as individual lines and make them go down.
-        same as the first but bigger range (potentially).
-        </p>
         @else
         <div id="instr" data-type="default" data-budget="{{$budget->id}}"></div>
-        <p class="small text-center">(For each visible repetition, a sum of the expense as a bar. A line shows
-            the percentage spent for each rep.)</p>
         @endif
 
 
@@ -110,5 +100,14 @@
 
 @stop
 @section('scripts')
-<?php echo javascript_include_tag('budgets'); ?>
+@if(isset($filters[0]) && is_object($filters[0]) && get_class($filters[0]) == 'Limit')
+<?php echo javascript_include_tag('budgets-limit'); ?>
+@elseif(isset($filters[0]) && $filters[0] == 'no_envelope')
+<?php echo javascript_include_tag('budgets-nolimit'); ?>
+@elseif($useSessionDates == true)
+<?php echo javascript_include_tag('budgets-session'); ?>
+@else
+<?php echo javascript_include_tag('budgets-default'); ?>
+@endif
+
 @stop