From 141225c980e4904522ef2bb54a93b4dcf80f798e Mon Sep 17 00:00:00 2001 From: James Cole Date: Fri, 17 Nov 2017 19:31:48 +0100 Subject: [PATCH] Code for #914 --- app/Http/Controllers/HomeController.php | 5 +- public/js/ff/charts.js | 67 +++++++++++++++++++++++-- public/js/ff/index.js | 7 ++- resources/lang/en_US/firefly.php | 2 + resources/views/index.twig | 8 +++ 5 files changed, 82 insertions(+), 7 deletions(-) diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php index d24313062a..dec3344e4b 100644 --- a/app/Http/Controllers/HomeController.php +++ b/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') ); } diff --git a/public/js/ff/charts.js b/public/js/ff/charts.js index 9b59ab1db4..4595bb6a4a 100644 --- a/public/js/ff/charts.js +++ b/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 () { diff --git a/public/js/ff/index.js b/public/js/ff/index.js index 60b906cc0d..2dfb20fa92 100644 --- a/public/js/ff/index.js +++ b/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'); } diff --git a/resources/lang/en_US/firefly.php b/resources/lang/en_US/firefly.php index d387359f22..16a7b72be2 100644 --- a/resources/lang/en_US/firefly.php +++ b/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..', diff --git a/resources/views/index.twig b/resources/views/index.twig index 738230fb8a..89b03ae452 100644 --- a/resources/views/index.twig +++ b/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'|_ }}'; + + + {% if start.lte(today) and end.gte(today) %} + var today = {{ today.day }}; + {% else %} + var today = -1; + {% endif %}