Code for #914

app/Http/Controllers/HomeController.php

@@ -86,7 +86,9 @@ class HomeController extends Controller
     }
 
     /**
+     * @param Request $request
      *
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
      */
     public function displayDebug(Request $request)
     {
@@ -193,6 +195,7 @@ class HomeController extends Controller
         $end      = session('end', Carbon::now()->endOfMonth());
         $accounts = $repository->getAccountsById($frontPage->data);
         $showDeps = Preferences::get('showDepositsFrontpage', false)->data;
+        $today    = new Carbon;
 
         // zero bills? Hide some elements from view.
         /** @var BillRepositoryInterface $billRepository */
@@ -208,7 +211,7 @@ class HomeController extends Controller
 
         return view(
             'index',
-            compact('count', 'subTitle', 'transactions', 'showDeps', 'billCount')
+            compact('count', 'subTitle', 'transactions', 'showDeps', 'billCount','start','end','today')
         );
     }
 

public/js/ff/charts.js

@@ -20,6 +20,9 @@
 /** global: Chart, defaultChartOptions, accounting, defaultPieOptions, noDataForChart */
 var allCharts = {};
 
+
+
+
 /*
  Make some colours:
  */
@@ -58,6 +61,43 @@ Chart.defaults.global.responsive = true;
 Chart.defaults.global.maintainAspectRatio = false;
 
 
+
+
+/**
+ * Chart line thing
+ */
+const verticalLinePlugin = {
+    getLinePosition: function (chart, pointIndex) {
+        const meta = chart.getDatasetMeta(0); // first dataset is used to discover X coordinate of a point
+        const data = meta.data;
+        return data[pointIndex]._model.x;
+    },
+    renderVerticalLine: function (chartInstance, pointIndex) {
+        const lineLeftOffset = this.getLinePosition(chartInstance, pointIndex);
+        const scale = chartInstance.scales['y-axis-0'];
+        const context = chartInstance.chart.ctx;
+
+        // render vertical line
+        context.beginPath();
+        context.strokeStyle = fillColors[3];
+        context.moveTo(lineLeftOffset, scale.top);
+        context.lineTo(lineLeftOffset, scale.bottom);
+        context.stroke();
+
+        // write label
+        context.fillStyle = "#444444";
+        context.textAlign = 'left';
+        context.fillText(todayText, lineLeftOffset, scale.top * 3); // (scale.bottom - scale.top) / 2 + scale.top
+    },
+
+    afterDatasetsDraw: function (chart, easing) {
+        if (chart.config.lineAtIndex) {
+            chart.config.lineAtIndex.forEach(pointIndex => this.renderVerticalLine(chart, pointIndex));
+        }
+    }
+};
+
+Chart.plugins.register(verticalLinePlugin);
 /**
  *
  * @param data
@@ -89,7 +129,17 @@ function lineChart(URI, container) {
     var options = $.extend(true, {}, defaultChartOptions);
     var chartType = 'line';
 
-    drawAChart(URI, container, chartType, options, colorData);
+    drawAChart(URI, container, chartType, options, colorData, -1);
+}
+
+function lineChartWithDay(URI, container, today) {
+    "use strict";
+    console.log('in lineChartWithDay');
+    var colorData = true;
+    var options = $.extend(true, {}, defaultChartOptions);
+    var chartType = 'line';
+
+    drawAChart(URI, container, chartType, options, colorData, today);
 }
 
 /**
@@ -248,8 +298,9 @@ function pieChart(URI, container) {
  * @param chartType
  * @param options
  * @param colorData
+ * @param today
  */
-function drawAChart(URI, container, chartType, options, colorData) {
+function drawAChart(URI, container, chartType, options, colorData, today) {
     var containerObj = $('#' + container);
     if (containerObj.length === 0) {
         return;
@@ -286,11 +337,17 @@ function drawAChart(URI, container, chartType, options, colorData) {
         } else {
             // new chart!
             var ctx = document.getElementById(container).getContext("2d");
-            allCharts[container] = new Chart(ctx, {
+            var chartOpts = {
                 type: chartType,
                 data: data,
-                options: options
+                options: options,
-            });
+                lineAtIndex: []
+            };
+            if(today >= 0) {
+                chartOpts.lineAtIndex.push(today-1);
+                console.log('push opt');
+            }
+            allCharts[container] = new Chart(ctx, chartOpts);
         }
 
     }).fail(function () {

public/js/ff/index.js

@@ -29,7 +29,12 @@ $(function () {
 
 function drawChart() {
     "use strict";
-    lineChart(accountFrontpageUri, 'accounts-chart');
+    if(today >= 0) {
+        lineChartWithDay(accountFrontpageUri, 'accounts-chart', today);
+    } else {
+        lineChart(accountFrontpageUri, 'accounts-chart');
+    }
+
     if (billCount > 0) {
         pieChart('chart/bill/frontpage', 'bills-chart');
     }

resources/lang/en_US/firefly.php

@@ -13,12 +13,14 @@ declare(strict_types=1);
 
 return [
     // general stuff:
+    'language_incomplete'                        => 'Incomplete translation',
     'close'                                      => 'Close',
     'actions'                                    => 'Actions',
     'edit'                                       => 'Edit',
     'delete'                                     => 'Delete',
     'welcomeBack'                                => 'What\'s playing?',
     'everything'                                 => 'Everything',
+    'today'                                      => 'today',
     'customRange'                                => 'Custom range',
     'apply'                                      => 'Apply',
     'select_date'                                => 'Select date..',

resources/views/index.twig

@@ -142,6 +142,14 @@
         var accountRevenueUri = '{{ route('chart.account.revenue') }}';
         var accountExpenseUri = '{{ route('chart.account.expense') }}';
         var piggyInfoUri = '{{ route('json.fp.piggy-banks') }}';
+        var todayText = ' {{ 'today'|_ }}';
+
+        <!-- render vertical line with text "today"  -->
+        {% if start.lte(today) and end.gte(today) %}
+            var today = {{ today.day }};
+        {% else %}
+            var today = -1;
+        {% endif %}
     </script>
 
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}"></script>