Work on new chart for year report.

app/Helpers/Report/BudgetReportHelper.php

@@ -18,6 +18,7 @@ use FireflyIII\Helpers\Collection\BudgetLine;
 use FireflyIII\Models\Budget;
 use FireflyIII\Models\LimitRepetition;
 use FireflyIII\Repositories\Budget\BudgetRepositoryInterface;
+use FireflyIII\Support\CacheProperties;
 use Illuminate\Support\Collection;
 
 /**
@@ -40,6 +41,73 @@ class BudgetReportHelper implements BudgetReportHelperInterface
         $this->repository = $repository;
     }
 
+    /**
+     * @param Carbon     $start
+     * @param Carbon     $end
+     * @param Collection $accounts
+     *
+     * @return Collection
+     */
+    public function budgetYearOverview(Carbon $start, Carbon $end, Collection $accounts): Collection
+    {
+        // chart properties for cache:
+        $cache = new CacheProperties;
+        $cache->addProperty($start);
+        $cache->addProperty($end);
+        $cache->addProperty('budget-year');
+        $cache->addProperty($accounts->pluck('id')->toArray());
+        if ($cache->has()) {
+            return $cache->get();
+        }
+        
+        $headers = [];
+        $current = clone $start;
+        $return  = new Collection;
+        $set     = $this->repository->getBudgets();
+        $budgets = [];
+        $spent   = [];
+        while ($current < $end) {
+            $short           = $current->format('m-Y');
+            $headers[$short] = $current->formatLocalized((string)trans('config.month'));
+            $current->addMonth();
+        }
+
+
+        /** @var Budget $budget */
+        foreach ($set as $budget) {
+            $id           = $budget->id;
+            $budgets[$id] = $budget->name;
+            $spent[$id]   = [];
+            $current      = clone $start;
+            $sum          = '0';
+
+
+            while ($current < $end) {
+                $currentEnd = clone $current;
+                $currentEnd->endOfMonth();
+                $format              = $current->format('m-Y');
+                $budgetSpent         = $this->repository->spentInPeriod(new Collection([$budget]), $accounts, $current, $currentEnd);
+                $spent[$id][$format] = $budgetSpent;
+                $sum                 = bcadd($sum, $budgetSpent);
+                $current->addMonth();
+            }
+
+            if (bccomp('0', $sum) === 0) {
+                // not spent anything.
+                unset($spent[$id]);
+                unset($budgets[$id]);
+            }
+        }
+
+        $return->put('headers', $headers);
+        $return->put('budgets', $budgets);
+        $return->put('spent', $spent);
+
+        $cache->store($return);
+
+        return $return;
+    }
+
     /**
      * @param Carbon     $start
      * @param Carbon     $end

app/Helpers/Report/BudgetReportHelperInterface.php

@@ -23,6 +23,15 @@ use Illuminate\Support\Collection;
  */
 interface BudgetReportHelperInterface
 {
+    /**
+     * @param Carbon     $start
+     * @param Carbon     $end
+     * @param Collection $accounts
+     *
+     * @return Collection
+     */
+    public function budgetYearOverview(Carbon $start, Carbon $end, Collection $accounts): Collection;
+
     /**
      * @param Carbon     $start
      * @param Carbon     $end

public/js/ff/reports/default/year.js

@@ -19,16 +19,19 @@ function drawChart() {
     columnChart('chart/report/in-out/' + reportType + '/' + startDate + '/' + endDate + '/' + accountIds, 'income-expenses-chart');
     columnChart('chart/report/in-out-sum/' + reportType + '/' + startDate + '/' + endDate + '/' + accountIds, 'income-expenses-sum-chart');
 
-    // in a loop
+    $('.budget-chart-activate').on('click', clickBudgetChart);
-    $.each($('.budget_year_chart'), function (i, v) {
-        var holder = $(v);
-        var id = holder.attr('id');
-        var budgetId = holder.data('budget');
-        columnChart('chart/budget/period/' + budgetId + '/' + reportType + '/' + startDate + '/' + endDate + '/' + accountIds, id);
-
-    });
 }
 
+function clickBudgetChart(e) {
+    "use strict";
+    var link = $(e.target);
+    var budgetId = link.data('budget');
+    console.log('Budget id is ' + budgetId);
+    $('#budget_chart').empty();
+    columnChart('chart/budget/period/' + budgetId + '/' + reportType + '/' + startDate + '/' + endDate + '/' + accountIds, 'budget_chart');
+
+    return false;
+}
 
 function showIncomes() {
     "use strict";

resources/views/reports/default/year.twig

@@ -61,21 +61,55 @@
         </div>
     </div>
 
-    {% for budget in budgets %}
     <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12">
-                <div class="box" id="year-budget-{{ budget.id }}">
+            <div class="box">
                 <div class="box-header with-border">
-                        <h3 class="box-title">{{ 'budget'|_ }} {{ budget.name }}</h3>
+                    <h3 class="box-title">{{ 'budgets'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                        <canvas height="400" id="budgets_{{ budget.id }}" class="budget_year_chart" data-budget="{{ budget.id }}"
+                    <table class="table table-condensed table-hover">
-                                style="width:100%;height:400px;"></canvas>
+                        <thead>
-                    </div>
+                            <tr>
-                </div>
+                                <th>&nbsp;</th>
-            </div>
+                                {% for date, header in budgets.get('headers') %}
-        </div>
+                                    <th>{{ header }}</th>
                                 {% endfor %}
+                            </tr>
+                        </thead>
+                        <tbody>
+                        {% set spentData = budgets.get('spent') %}
+                        {% for budgetId, budgetName in budgets.get('budgets') %}
+                        <tr>
+                            <th>
+                                <a title="{{ budgetName }}" href="#" data-budget="{{ budgetId }}" class="budget-chart-activate">{{ budgetName }}</a>
+                            </th>
+                            {% for date, header in budgets.get('headers') %}
+                                <td>{{ spentData[budgetId][date]|formatAmount }}</td>
+                            {% endfor %}
+
+                        </tr>
+                        {% endfor %}
+                        </tbody>
+
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 col-md-12 col-sm-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'chart'|_ }}</h3>
+                </div>
+                <div class="box-body">
+                    <canvas height="400" id="budget_chart" style="width:100%;height:400px;"></canvas>
+
+                </div>
+            </div>
+        </div>
+    </div>
 
 {% endblock %}
 {% block scripts %}