Re-divide dashboard to show monthly statistics and breakdowns instead of a mixture of daily/monthly/overall
MODIFY
app/Http/Controllers/DashboardController.php
app/Http/Controllers/DashboardController.php
@@ -11,12 +11,7 @@ class DashboardController extends Controller {
public function __invoke() {
$user = Auth::user();
- $spendingsToday = $user
- ->spendings()
- ->whereRaw('DATE(happened_on) = ?', [date('Y-m-d')])
- ->sum('amount');
-
- $spendingsMonth = $user
+ $totalSpendings = $user
->spendings()
->whereRaw('MONTH(happened_on) = ?', [date('m')])
->sum('amount');
@@ -30,6 +25,7 @@ class DashboardController extends Controller {
spendings ON tags.id = spendings.tag_id
WHERE
tags.user_id = ?
+ AND MONTH(happened_on) = ?
GROUP BY
tags.id
HAVING
@@ -37,7 +33,7 @@ class DashboardController extends Controller {
ORDER BY
SUM(spendings.amount) DESC
LIMIT 1;
- ', [$user->id]);
+ ', [$user->id, date('m')]);
$mostExpensiveWeekday = DB::select('
SELECT
@@ -46,12 +42,13 @@ class DashboardController extends Controller {
spendings
WHERE
spendings.user_id = ?
+ AND MONTH(happened_on) = ?
GROUP BY
WEEKDAY(spendings.happened_on)
ORDER BY
SUM(spendings.amount) DESC
LIMIT 1;
- ', [$user->id]);
+ ', [$user->id, date('m')]);
$tagsBreakdown = DB::select('
SELECT
@@ -63,20 +60,20 @@ class DashboardController extends Controller {
spendings ON tags.id = spendings.tag_id
WHERE
tags.user_id = ?
+ AND MONTH(happened_on) = ?
GROUP BY
tags.id
HAVING
SUM(spendings.amount) > 0;
- ', [$user->id]);
+ ', [$user->id, date('m')]);
return view('dashboard', [
'currency' => $user->currency,
- 'spendingsToday' => $spendingsToday,
- 'spendingsMonth' => $spendingsMonth,
+ 'month' => date('n'),
+ 'totalSpendings' => $totalSpendings,
'mostExpensiveTag' => $mostExpensiveTag,
'mostExpensiveWeekday' => $mostExpensiveWeekday,
-
'tagsBreakdown' => $tagsBreakdown,
'earningsCount' => $user->earnings->count(),

MODIFY
resources/views/dashboard.blade.php
resources/views/dashboard.blade.php
@section('body')
<div class="wrapper spacing-top-large spacing-bottom-large">
- <div class="row row--gutter mb-4">
- <div class="row__column">
- <div class="box">
- <div class="box__section">
- <h2>{{ $currency->symbol }} {{ number_format($spendingsToday / 100, 2) }}</h2>
- <div class="mt-1">Spent today</div>
- </div>
- </div>
- </div>
- <div class="row__column">
- <div class="box">
- <div class="box__section">
- <h2>{{ $currency->symbol }} {{ number_format($spendingsMonth / 100, 2) }}</h2>
- <div class="mt-1">Spent this month</div>
- </div>
- </div>
- </div>
- <div class="row__column">
- <div class="box">
- <div class="box__section">
+ <div style="color: black; margin-bottom: 20px;">{{ __('months.' . $month) }}</div>
+ <div class="box mb-4">
+ <div class="box__section row">
+ <div class="row__column text-center">
+ <div class="mb-1" style="margin-bottom: 10px; color: #A7AEBB;">Total Spent</div>
+ <h2>{{ $currency->symbol }} {{ number_format($totalSpendings / 100, 2) }}</h2>
+ </div>
+ <div class="row__column text-center">
+ <div class="mb-1" style="margin-bottom: 10px; color: #A7AEBB;">Most Expensive Tag</div>
<h2>{{ count($mostExpensiveTag) ? $mostExpensiveTag[0]->name : '-' }}</h2>
- <div class="mt-1">Most expensive tag</div>
- </div>
</div>
- </div>
- <div class="row__column">
- <div class="box">
- <div class="box__section">
+ <div class="row__column text-center">
+ <div class="mb-1" style="margin-bottom: 10px; color: #A7AEBB;">Most Expensive Day</div>
<h2>{{ count($mostExpensiveWeekday) ? __('weekdays.' . $mostExpensiveWeekday[0]->weekday) : '-' }}</h2>
- <div class="mt-1">Most expensive weekday</div>
- </div>
</div>
</div>
- </div>
- @if (count($tagsBreakdown))
- <div class="box spacing-bottom-large">
<div class="box__section">
- <div class="ct-chart ct-major-eleventh"></div>
+ <div class="ct-chart ct-perfect-fifth" style="max-width: 500px; margin-left: auto; margin-right: auto;"></div>
</div>
</div>
- @endif
<div class="row gutter spacing-bottom-large">
<div class="column">
<div class="box">
var sum = function(a, b) { return a + b };
new Chartist.Pie('.ct-chart', data, {
+ donut: true,
+ donutWidth: 10,
+ donutSolid: true,
+ startAngle: 270,
+ showLabel: true,
+
labelInterpolationFnc: function (value, x) {
return labels[x] + ' (' + Math.round(value / data.series.reduce(sum) * 100) + '%)';
}

MODIFY
resources/views/layout.blade.php
resources/views/layout.blade.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" />
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
+ <style>
+ .ct-series-a .ct-slice-donut-solid {
+ fill: #3474EE;
+ }
+
+ .ct-series-b .ct-slice-donut-solid {
+ fill: #E73428;
+ }
+
+ .ct-series-c .ct-slice-donut-solid {
+ fill: #F5AE29;
+ }
+
+ .ct-series-d .ct-slice-donut-solid {
+ fill: #299944;
+ }
+ </style>
</head>
<body>
<div id="app">

Re-divide dashboard to show monthly statistics and breakdowns instead of a mixture of daily/monthly/overall