My Course — Membangun Website Food Store Dengan Laravel Filament, Livewire dan Payment Gateway

Membuat Widget Chart Data Transaction

Toko online tidak sempurna jika belum ada sebuah grafik atau chart yang menunjukan sales atau pendapatan dari product yang telah dijual. Di dalam Laravel Filemant kita akan dimudahkan untuk permasalahan seperti ini, karena di Filament ada fitur yang namanya Widget, dengan menggunakan fitur ini, kita bisa membuat apapun sesuai dengan keinginan kita.

Dan pada praktek kali ini, kita akan mencoba menampilkan semua grafik atau chart penjualan selama 30 hari terakhir, sehingga nanti pemilik dari toko online ini akan terbantu dengan adanya report seperti ini.

Langkah 1 - Installasi Library Laravel Trend

Pertama, kita akan menginstal library eksternal, yaitu Laravel Trend. Library ini akan digunakan untuk mempermudah proses query yang bersifat laporan (report).

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.


        
bash

        

            
        

     
composer require flowframe/laravel-trend:0.3.0

Silahkan tunggu proses installasinya sampai selesai.

Langkah 2 - Membuat Widget Chart Transaction

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.


        
go

        

            
        

     
php artisan make:filament-widget TransactionChart --chart

Jika keluar output seperti ini, silahkan ENTER saja.


        
vbnet

        

            
        

     
┌ What is the resource you would like to create this in? ──────┐
│ [Optional] BlogPostResource                                  │
└──────────────────────────────────────────────────────────────┘

Kemudian akan muncul lagi seperti berikut ini.


        
css

        

            
        

     
┌ Where would you like to create this? ────────────────────────┐
│ › ● The [admin] panel                                        │
│   ○ [App\Livewire] alongside other Livewire components       │
└──────────────────────────────────────────────────────────────┘

Silahkan pilih The [admin] panel dan ENTER.

Kemudian akan muncul pertanyaam lagi, yaitu jenis chart yang akan digunakan.


        
lua

        

            
        

     
┌ Which type of chart would you like to create? ───────────────┐
│   ○ Bar chart                                              ┃ │
│   ○ Bubble chart                                           │ │
│   ○ Doughnut chart                                         │ │
│ › ● Line chart                                             │ │
│  	○ Pie chart                                              │ │
└──────────────────────────────────────────────────────────────┘

Silahkan pilih Line chart dan ENTER.

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file baru yang berada di dalam folder app/Filament/Widget/TransactionChart.php.

Silahkan teman-teman buka file tersebut, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
php

        

            
        

     
<?php

namespace App\Filament\Widgets;

use Flowframe\Trend\Trend;
use App\Models\Transaction;
use Flowframe\Trend\TrendValue;
use Filament\Widgets\ChartWidget;

class TransactionChart extends ChartWidget
{
    protected static ?string $heading = 'Transactions (30 Days)';
    protected int | string | array $columnSpan = 'full';

    protected function getData(): array
    {
        // Ambil data transaksi per bulan untuk tahun ini
        $data = Trend::query(Transaction::where('status', 'success'))
            ->between(
                start: now()->startOfMonth(),
                end: now()->endOfMonth()
            )
            ->perDay() // Hitung data per bulan
            ->sum('total'); // Hitung total transaksi per bulan berdasarkan 'total'

        // Return data untuk chart
        return [
            'datasets' => [
                [
                    'label' => 'Total Transactions',
                    'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
                    'fill' => true,
                ],
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date), // Format tanggal untuk label bulan
        ];
    }

    protected function getType(): string
    {
        return 'line';
    }
}

Dari perubahan kode di atas, pertama kita import library Trend.


        
perl

        

            
        

     
use Flowframe\Trend\Trend;
use Flowframe\Trend\TrendValue;

Kemudian kita juga import Model Transaction.


        
perl

        

            
        

     
use App\Models\Transaction;

Setelah itu, di dalam properti $heading kita ubah kalimatnya menjadi Transactions (30 Days).


        
php

        

            
        

     
protected static ?string $heading = 'Transactions (30 Days)';

Dan kita juga menambahkan properti baru, yaitu $columnSpan dan berisi string full. Artinya widgetnya akan memiliki panjang 100%.


        
php

        

            
        

     
protected int | string | array $columnSpan = 'full';

Di dalam method getData, kita memanggil library Trend untuk melakukan query ke dalam Model Transaction dengan status success dan antara awal bulan dan akhir bulan.


        
php

        

            
        

     
// Ambil data transaksi per bulan untuk tahun ini
$data = Trend::query(Transaction::where('status', 'success'))
    ->between(
        start: now()->startOfMonth(),
        end: now()->endOfMonth()
    )
    ->perDay() // Hitung data per bulan
    ->sum('total'); // Hitung total transaksi per bulan berdasarkan 'total'

Dan kita return agar digenerate menjadi sebuah chart dalam bentuk line.


        
php

        

            
        

     
// Return data untuk chart
return [
    'datasets' => [
        [
            'label' => 'Total Transactions',
            'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
            'fill' => true,
        ],
    ],
    'labels' => $data->map(fn (TrendValue $value) => $value->date), // Format tanggal untuk label bulan
];

Sekarang, silahkan buka halaman dashboard, jika berhasil maka kurang lebih hasilnya seperti berikut ini.

Di atas, kita telah berhasil menampilkan grafik atau chart penjualan / transaksi dalam 30 hari terakhir atau satu bulan.

SELESAI & LANJUTKAN