Optimise some charts [skip ci]

app/Generator/Chart/Budget/ChartJsBudgetChartGenerator.php

@@ -80,27 +80,28 @@ class ChartJsBudgetChartGenerator implements BudgetChartGenerator
         $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',
+            'label' => trans('firefly.left'),
-            'data'  => $amount,
+            'data'  => $left,
         ];
         $data['datasets'][] = [
-            'label' => 'Spent',
+            'label' => trans('firefly.spent'),
-            'data'  => $expenses,
+            'data'  => $spent,
         ];
+        $data['datasets'][] = [
+            'label' => trans('firefly.overspent'),
+            'data'  => $overspent,
+        ];
+
+        $data['count'] = count($data['datasets']);
 
         return $data;
     }
@@ -140,23 +141,5 @@ class ChartJsBudgetChartGenerator implements BudgetChartGenerator
         }
 
         return $data;
-
-
-        $chart = new GChart;
-        // add columns:
-        $chart->addColumn(trans('firefly.month'), 'date');
-        foreach ($budgets as $budget) {
-            $chart->addColumn($budget->name, 'number');
-        }
-
-        /** @var array $entry */
-        foreach ($entries as $entry) {
-
-            $chart->addRowArray($entry);
-        }
-
-        $chart->generate();
-
-        return $chart->getData();
     }
 }

app/Generator/Chart/Category/ChartJsCategoryChartGenerator.php

@@ -31,7 +31,7 @@ class ChartJsCategoryChartGenerator implements CategoryChartGenerator
             'labels'   => [],
             'datasets' => [
                 [
-                    'label' => 'Spent',
+                    'label' => trans('firefly.spent'),
                     'data'  => []
                 ]
             ],
@@ -57,7 +57,7 @@ class ChartJsCategoryChartGenerator implements CategoryChartGenerator
             'labels'   => [],
             'datasets' => [
                 [
-                    'label' => 'Spent',
+                    'label' => trans('firefly.spent'),
                     'data'  => []
                 ]
             ],

public/js/charts.js

@@ -56,11 +56,26 @@ var defaultAreaOptions = {
     datasetFill: true,
     scaleFontSize: 10,
     responsive: true,
-    scaleLabel:           "<%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>",
+    scaleLabel:           "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
-    multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>"
+    multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>"
 };
 
+
+var defaultPieOptions = {
+    scaleShowGridLines: false,
+    pointDotRadius: 2,
+    datasetStrokeWidth: 1,
+    pointHitDetectionRadius: 5,
+    datasetFill: false,
+    scaleFontSize: 10,
+    responsive: true,
+    tooltipFillColor: "rgba(0,0,0,0.5)",
+    tooltipTemplate: "<%if (label){%><%=label%>: <%}%>" + currencySymbol + " <%= value %>",
+
+};
+
+
 var defaultLineOptions = {
     scaleShowGridLines: false,
     pointDotRadius: 2,
@@ -69,13 +84,35 @@ var defaultLineOptions = {
     datasetFill: false,
     scaleFontSize: 10,
     responsive: true,
-    scaleLabel:           "<%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>",
+    scaleLabel:           "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
-    multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>"
+    multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>"
 };
 
 var defaultColumnOptions = {
-    multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>"
+    scaleShowGridLines: false,
+    pointDotRadius: 2,
+    barStrokeWidth: 1,
+    pointHitDetectionRadius: 5,
+    datasetFill: false,
+    scaleFontSize: 10,
+    responsive: true,
+    scaleLabel:      "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
+    tooltipFillColor: "rgba(0,0,0,0.5)",
+    tooltipTemplate: "<%if (label){%><%=label%>: <%}%>" + currencySymbol + " <%= value %>",
+};
+
+var defaultStackedColumnOptions = {
+    scaleShowGridLines: false,
+    pointDotRadius: 2,
+    barStrokeWidth: 1,
+    pointHitDetectionRadius: 5,
+    datasetFill: false,
+    scaleFontSize: 10,
+    responsive: true,
+    scaleLabel:           "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
+    tooltipFillColor: "rgba(0,0,0,0.5)",
+    multiTooltipTemplate: currencySymbol + " <%= Number(value).toFixed(2).replace('.', ',') %>"
 
 };
 
@@ -105,7 +142,7 @@ function lineChart(URL, container, options) {
             dataset.pointHighlightStroke = strokePointHighColors[i];
             newData.datasets.push(dataset);
         }
-        var myAreaChart = new Chart(ctx).Line(newData, options);
+        new Chart(ctx).Line(newData, options);
 
     }).fail(function () {
         $('#' + container).addClass('google-chart-error');
@@ -158,6 +195,7 @@ 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");
@@ -167,7 +205,6 @@ function columnChart(URL, container, options) {
         for (var i = 0; i < data.count; i++) {
             newData.labels = data.labels;
             var dataset = data.datasets[i];
-            console.log('Now at index ' + i + ' (count is ' + fillColors.length + ')');
             dataset.fillColor = fillColors[i];
             dataset.strokeColor = strokePointHighColors[i];
             dataset.pointColor = strokePointHighColors[i];
@@ -176,7 +213,6 @@ function columnChart(URL, container, options) {
             dataset.pointHighlightStroke = strokePointHighColors[i];
             newData.datasets.push(dataset);
         }
-        console.log(newData);
         new Chart(ctx).Bar(newData, options);
 
     }).fail(function () {
@@ -193,21 +229,17 @@ function columnChart(URL, container, options) {
  */
 function stackedColumnChart(URL, container, options) {
     "use strict";
+    options = options || defaultStackedColumnOptions;
+
     $.getJSON(URL).success(function (data) {
 
         var ctx = document.getElementById(container).getContext("2d");
         var newData = {};
         newData.datasets = [];
-        console.log('----');
-        console.log('URL: ' + URL);
-        console.log('Total datasets: ' + data.datasets.length);
-        console.log('data.count: ' + data.count);
-        console.log('----');
 
         for (var i = 0; i < data.count; i++) {
             newData.labels = data.labels;
             var dataset = data.datasets[i];
-            console.log('Now at index ' + i + ' (count is ' + fillColors.length + ')');
             dataset.fillColor = fillColors[i];
             dataset.strokeColor = strokePointHighColors[i];
             dataset.pointColor = strokePointHighColors[i];
@@ -216,13 +248,12 @@ function stackedColumnChart(URL, container, options) {
             dataset.pointHighlightStroke = strokePointHighColors[i];
             newData.datasets.push(dataset);
         }
-        console.log(newData);
         new Chart(ctx).StackedBar(newData, options);
 
     }).fail(function () {
         $('#' + container).addClass('google-chart-error');
     });
-    console.log('URL for column chart : ' + URL);
+    console.log('URL for stacked column chart : ' + URL);
 }
 
 /**
@@ -245,7 +276,7 @@ function comboChart(URL, container, options) {
 function pieChart(URL, container, options) {
     "use strict";
 
-    options = options || defaultColumnOptions;
+    options = options || defaultPieOptions;
     $.getJSON(URL).success(function (data) {
 
         var ctx = document.getElementById(container).getContext("2d");
@@ -256,5 +287,6 @@ function pieChart(URL, container, options) {
     });
 
 
-    console.log('no impl for pieChart');
+    console.log('URL for pie chart : ' + URL);
+
 }

resources/twig/index.twig

@@ -248,6 +248,7 @@
     {% endif %}
     {% if Config.get('firefly.chart') == 'chartjs' %}
         <script type="text/javascript" src="js/Chart.min.js"></script>
+        <script type="text/javascript" src="js/Chart.StackedBar.js"></script>
         <script type="text/javascript" src="js/charts.js"></script>
     {% endif %}
     <script type="text/javascript" src="js/index.js"></script>

resources/twig/layout/default.twig

@@ -156,6 +156,7 @@
 
     var nextMonthName = "{{ nextMonthName }}";
     var currencyCode = '{{getCurrencyCode() }}';
+    var currencySymbol = '{{getCurrencySymbol()|raw }}';
     $('#daterange').text(titleString);
 </script>