Added some more charts

app/Generator/Chart/Budget/ChartJsBudgetChartGenerator.php

@@ -5,6 +5,11 @@ namespace FireflyIII\Generator\Chart\Budget;
 
 use Illuminate\Support\Collection;
 
+/**
+ * Class ChartJsBudgetChartGenerator
+ *
+ * @package FireflyIII\Generator\Chart\Budget
+ */
 class ChartJsBudgetChartGenerator implements BudgetChartGenerator
 {
 
@@ -33,6 +38,45 @@ class ChartJsBudgetChartGenerator implements BudgetChartGenerator
      */
     public function frontpage(Collection $entries)
     {
+        $data = [
+            'count'    => 2,
+            'labels'   => [],
+            'datasets' => [],
+        ];
+        foreach ($entries as $entry) {
+            if ($entry[1] != 0 || $entry[2] != 0 || $entry[3] != 0) {
+                $data['labels'][] = $entry[0];
+            }
+        }
+        // dataset: left
+        // dataset: spent
+        // dataset: overspent
+        $left      = [];
+        $spent     = [];
+        $overspent = [];
+        $amount    = [];
+        $expenses = [];
+        foreach ($entries as $entry) {
+            if ($entry[1] != 0 || $entry[2] != 0 || $entry[3] != 0) {
+                $left[]      = round($entry[1], 2);
+                $spent[]     = round($entry[2], 2);
+                $overspent[] = round($entry[3], 2);
+                $amount[]    = round($entry[4], 2);
+                $expenses[]    = round($entry[5], 2);
+                //$data['count']++;
+            }
+        }
+
+        $data['datasets'][] = [
+            'label' => 'Amount',
+            'data'  => $amount,
+        ];
+        $data['datasets'][] = [
+            'label' => 'Spent',
+            'data'  => $expenses,
+        ];
+
+        return $data;
     }
 
     /**

app/Http/Controllers/Chart/BudgetController.php

@@ -149,7 +149,7 @@ class BudgetController extends Controller
         $cache->addProperty('budget');
         $cache->addProperty('all');
         if ($cache->has()) {
-            return Response::json($cache->get()); // @codeCoverageIgnore
+            //return Response::json($cache->get()); // @codeCoverageIgnore
         }
 
         bcscale(2);
@@ -159,7 +159,7 @@ class BudgetController extends Controller
             $repetitions = $repository->getBudgetLimitRepetitions($budget, $start, $end);
             if ($repetitions->count() == 0) {
                 $expenses = $repository->spentInPeriodCorrected($budget, $start, $end, true);
-                $allEntries->push([$budget->name, 0, 0, $expenses]);
+                $allEntries->push([$budget->name, 0, 0, $expenses, 0, 0]);
                 continue;
             }
             /** @var LimitRepetition $repetition */
@@ -171,18 +171,19 @@ class BudgetController extends Controller
                 $left      = max(bcsub($repetition->amount, $expenses), 0); // limited at zero.
                 $overspent = max(bcsub($expenses, $repetition->amount), 0); // limited at zero.
                 $date      = $repetition->startdate->formatLocalized($this->monthAndDayFormat);
-                $name      = $budget->name . ' (' . $date . ')';
+                //$name      = $budget->name . ' (' . $date . ')';
+                $name = $budget->name;
 
                 // $spent is maxed to the repetition amount:
                 $spent = $expenses > $repetition->amount ? $repetition->amount : $expenses;
 
 
-                $allEntries->push([$name, $left, $spent, $overspent]);
+                $allEntries->push([$name, $left, $spent, $overspent, $repetition->amount, $expenses]);
             }
         }
 
         $noBudgetExpenses = $repository->getWithoutBudgetSum($start, $end) * -1;
-        $allEntries->push([trans('firefly.noBudget'), 0, 0, $noBudgetExpenses]);
+        $allEntries->push([trans('firefly.noBudget'), 0, 0, $noBudgetExpenses, 0, 0]);
 
         $data = $this->generator->frontpage($allEntries);
         $cache->store($data);

app/Providers/FireflyServiceProvider.php

@@ -92,12 +92,23 @@ class FireflyServiceProvider extends ServiceProvider
         $this->app->bind('FireflyIII\Support\Search\SearchInterface', 'FireflyIII\Support\Search\Search');
 
         // make Google charts:
-        $this->app->bind('FireflyIII\Generator\Chart\Account\AccountChartGenerator', 'FireflyIII\Generator\Chart\Account\GoogleAccountChartGenerator');
+        //$this->app->bind('FireflyIII\Generator\Chart\Account\AccountChartGenerator', 'FireflyIII\Generator\Chart\Account\GoogleAccountChartGenerator');
+        $this->app->bind('FireflyIII\Generator\Chart\Account\AccountChartGenerator', 'FireflyIII\Generator\Chart\Account\ChartJsAccountChartGenerator');
+
         $this->app->bind('FireflyIII\Generator\Chart\Bill\BillChartGenerator', 'FireflyIII\Generator\Chart\Bill\GoogleBillChartGenerator');
-        $this->app->bind('FireflyIII\Generator\Chart\Budget\BudgetChartGenerator', 'FireflyIII\Generator\Chart\Budget\GoogleBudgetChartGenerator');
+        //$this->app->bind('FireflyIII\Generator\Chart\Bill\BillChartGenerator', 'FireflyIII\Generator\Chart\Bill\GoogleBillChartGenerator');
+
+        //$this->app->bind('FireflyIII\Generator\Chart\Budget\BudgetChartGenerator', 'FireflyIII\Generator\Chart\Budget\GoogleBudgetChartGenerator');
+        $this->app->bind('FireflyIII\Generator\Chart\Budget\BudgetChartGenerator', 'FireflyIII\Generator\Chart\Budget\ChartJsBudgetChartGenerator');
+
         $this->app->bind('FireflyIII\Generator\Chart\Category\CategoryChartGenerator', 'FireflyIII\Generator\Chart\Category\GoogleCategoryChartGenerator');
+        //$this->app->bind('FireflyIII\Generator\Chart\Category\CategoryChartGenerator', 'FireflyIII\Generator\Chart\Category\GoogleCategoryChartGenerator');
+
         $this->app->bind('FireflyIII\Generator\Chart\PiggyBank\PiggyBankChartGenerator', 'FireflyIII\Generator\Chart\PiggyBank\GooglePiggyBankChartGenerator');
+        //$this->app->bind('FireflyIII\Generator\Chart\PiggyBank\PiggyBankChartGenerator', 'FireflyIII\Generator\Chart\PiggyBank\GooglePiggyBankChartGenerator');
+
         $this->app->bind('FireflyIII\Generator\Chart\Report\ReportChartGenerator', 'FireflyIII\Generator\Chart\Report\GoogleReportChartGenerator');
+        //$this->app->bind('FireflyIII\Generator\Chart\Report\ReportChartGenerator', 'FireflyIII\Generator\Chart\Report\GoogleReportChartGenerator');
 
 
         $this->app->bind('FireflyIII\Helpers\Help\HelpInterface', 'FireflyIII\Helpers\Help\Help');

public/js/charts.js

@@ -3,6 +3,18 @@
 /*
  Make some colours:
  */
+/*
+#555299
+#4285f4
+#db4437
+#f4b400
+#0f9d58
+#ab47bc
+#00acc1
+#ff7043
+#9e9d24
+#5c6bc0", "#f06292", "#00796b", "#c2185b"],
+ */
 var colourSet = [
     [53, 124, 165],
     [0, 141, 76],
@@ -35,8 +47,23 @@ var defaultAreaOptions = {
     multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>"
 };
 
-var defaultLineOptions = defaultAreaOptions;
+var defaultLineOptions = {
-defaultLineOptions.datasetFill = false;
+    scaleShowGridLines: false,
+    pointDotRadius: 2,
+    datasetStrokeWidth: 1,
+    pointHitDetectionRadius: 5,
+    datasetFill: false,
+    scaleFontSize: 10,
+    responsive: true,
+    scaleLabel:           "<%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>",
+    tooltipFillColor: "rgba(0,0,0,0.5)",
+    multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>"
+};
+
+var defaultColumnOptions = {
+    multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>"
+
+};
 
 /**
  * Function to draw a line chart:
@@ -116,8 +143,9 @@ function areaChart(URL, container, options) {
  */
 function columnChart(URL, container, options) {
     "use strict";
-
+    options = options || defaultColumnOptions;
     $.getJSON(URL).success(function (data) {
+
         var ctx = document.getElementById(container).getContext("2d");
         var newData = {};
         newData.datasets = [];
@@ -133,7 +161,8 @@ function columnChart(URL, container, options) {
             dataset.pointHighlightStroke = strokePointHighColors[i];
             newData.datasets.push(dataset);
         }
-        new Chart(ctx).Column(newData, options);
+        console.log(newData);
+        new Chart(ctx).Bar(newData, options);
 
     }).fail(function () {
         $('#' + container).addClass('google-chart-error');

resources/twig/index.twig

@@ -45,7 +45,7 @@
                         <div id="budgets-chart"></div>
                     {% endif %}
                     {% if Config.get('firefly.chart') == 'chartjs' %}
-                        <canvas id="accounts-chart" style="width:100%;height:400px;"></canvas>
+                        <canvas id="budgets-chart" style="width:100%;height:400px;"></canvas>
                     {% endif %}
                 </div>
             </div>
@@ -59,7 +59,12 @@
                     </div>
                 </div>
                 <div class="box-body">
+                    {% if Config.get('firefly.chart') == 'google' %}
                         <div id="categories-chart"></div>
+                    {% endif %}
+                    {% if Config.get('firefly.chart') == 'chartjs' %}
+                        <canvas id="categories-chart" style="width:100%;height:400px;"></canvas>
+                    {% endif %}
                 </div>
             </div>