Show 3 most expensive tags on dashboard with separate charts instead of a combined chart for all
MODIFY
app/Http/Controllers/DashboardController.php
app/Http/Controllers/DashboardController.php
@@ -22,7 +22,7 @@ class DashboardController extends Controller {
->limit(3)
->get();
- $tagsBreakdown = DB::select('
+ $mostExpensiveTags = DB::select('
SELECT
tags.name AS name,
SUM(spendings.amount) AS amount
@@ -36,7 +36,10 @@ class DashboardController extends Controller {
GROUP BY
tags.id
HAVING
- SUM(spendings.amount) > 0;
+ SUM(spendings.amount) > 0
+ ORDER BY
+ SUM(spendings.amount) DESC
+ LIMIT 3;
', [$user->id, date('m')]);
return view('dashboard', [
@@ -47,7 +50,7 @@ class DashboardController extends Controller {
'totalSpendings' => $totalSpendings,
'recentSpendings' => $recentSpendings,
- 'tagsBreakdown' => $tagsBreakdown,
+ 'mostExpensiveTags' => $mostExpensiveTags,
'earningsCount' => $user->earnings->count(),
'spendingsCount' => $user->spendings->count()

MODIFY
resources/views/dashboard.blade.php
resources/views/dashboard.blade.php
</div>
<div class="row__column">
<div class="box">
- <div class="box__section box__section--header">{{ __('general.analysis') }}</div>
- <div class="box__section">
- @if (count($tagsBreakdown))
- <div class="ct-chart ct-perfect-fifth" style="max-width: 500px; margin-left: auto; margin-right: auto;"></div>
- @else
- Not enough data
- @endif
+ <div class="box__section box__section--header">Most Expensive {{ __('general.tags') }}</div>
+ @if (count($mostExpensiveTags))
+ @foreach ($mostExpensiveTags as $index => $tag)
+ <div class="box__section row row--seperate">
+ <div class="row__column row__column--compact mr-2" style="width: 50px;">
+ <div class="ct-chart-{{ $index }} ct-square"></div>
</div>
+ <div class="row__column row__column--middle">
+ <div class="color-dark">{{ $tag->name }}</div>
+ <div class="mt-1" style="font-size: 14px; font-weight: 600;">{!! $currency->symbol !!} {{ number_format($tag->amount / 100, 2) }}</div>
+ </div>
+ </div>
+ @endforeach
+ @endif
</div>
</div>
</div>
@section('scripts')
<script>
- var labels = [{!! implode(',', array_map(function ($entry) { return '\'' . $entry->name . '\''; }, $tagsBreakdown)) !!}];
-
+ @foreach ($mostExpensiveTags as $index => $tag)
var data = {
- series: [{!! implode(',', array_map(function ($entry) { return $entry->amount; }, $tagsBreakdown)) !!}]
+ series: [{{ $tag->amount }}, {{ $totalSpendings - $tag->amount }}]
};
- var sum = function(a, b) { return a + b };
-
- new Chartist.Pie('.ct-chart', data, {
+ new Chartist.Pie('.ct-chart-{{ $index }}', data, {
donut: true,
- donutWidth: 10,
+ donutWidth: 2,
donutSolid: true,
- startAngle: 270,
- showLabel: true,
-
- labelInterpolationFnc: function (value, x) {
- return labels[x] + ' (' + Math.round(value / data.series.reduce(sum) * 100) + '%)';
- }
+ showLabel: false
});
+ @endforeach
</script>
@endsection

MODIFY
resources/views/layout.blade.php
resources/views/layout.blade.php
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<style>
.ct-series-a .ct-slice-donut-solid {
- fill: #3474EE;
+ fill: #179BD1;
}
.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;
+ fill: #E4E8EB;
}
</style>
</head>

Show 3 most expensive tags on dashboard with separate charts instead of a combined chart for all