Aktifkan Date Filter untuk Dashboard Interaktif

Introduction

Hola Rekan-Rekan semua, pada kesempatan kali ini Kita akan mencoba eksplorasi kembali bagaimana membuat halaman dashboard lebih Interaktif sehingga dapat membantu pengguna dalam melakukan monitoring dari data yang telah tersimpan di database.

Studi kasus yang akan kita gunakan yaitu dari artikel sebelumnya yaitu pembuatan sistem informasi pelanggan sederhana yang dapat diakses melalui link berikut : Membuat Website dengan Laravel dan Filament. So, agar lebih efektif dalam mengikuti eksplorasi pada artikel kali alangkah lebih baik telah mencoba praktik dari panduan artikel tersebut terlebih dahulu, agar tidak bingung saat mengikuti tutorial pada kesempatan kali ini. Selamat bereksplorasi :)

Langkah-langkah

Langkah pertama : Kita aktifkan terlebih dahulu xampp untuk modul apache dan juga mysql, lalu buka terlebih dahulu proyek pembuatan sistem informasi sederhana yang telah kita buat sebelumnya menggunakan vs code, selanjutnya Kita aktifkan terminal bawaan dari vs code dengan menekan tombol ctrl + ` .

Gambar 1 Mengaktifkan modul apache dan mysql di localhost xampp

Gambar 2 Membuka proyek laravel dan mengaktifkan terminal vs code

Langkah kedua : Langkah selanjutnya yaitu Kita perlu menjalankan perintah CLI untuk membuat halaman dashboard.php (untuk menimpa /override dari halaman dashboard bawaan) sebelum mengaktifkan fitur Filtering Widget Data dari dokumentasi resmi yang dapat diakses melalui tautan berikut : Dashboard - Panels - Filament yaitu berupa php artisan make:filament-page Dashboard lalu klik enter saat muncul konfirmasi berupa Which resource would you like to create this in?

Gambar 3 Proses membuat halaman dashboard.php

Langkah ketiga : Selanjutnya buka file yang berada pada folder app/Filament/Pages/Dashboard.php lalu Kita tuliskan sintax berikut ini.

<?php

namespace App\Filament\Pages;

use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\Section;
use Filament\Forms\Form;
use Filament\Forms\Get;
use Filament\Pages\Dashboard as BaseDashboard;
use Filament\Pages\Dashboard\Concerns\HasFiltersForm;
use Filament\Pages\Page;

class Dashboard extends BaseDashboard
{
    use HasFiltersForm;

    public function filtersForm(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()
                    ->schema([
                        DatePicker::make('startDate')
                            ->maxDate(fn(Get $get) => $get('endDate')),
                        DatePicker::make('endDate')
                            ->minDate(fn(Get $get) => $get('endDate'))
                            ->maxDate(now()),
                        // ...
                    ])
                    ->columns(2),
            ]);
    }
}

Keterangan :

Trait berupa use HasFiltersForm digunakan untuk memberikan perintah kepada Laravel agar dapat membaca form filter yang dibuat.
Sintax formFilters() dibuat dengan susunan berupa 2 input field yaitu filter untuk tanggal awal berupa startDate dan tanggal akhir berupa endDate.
Sintax →columns(2) bermaksud untuk membuat susunan tata letak dari formFilters() dibuat 2 kolom dalam satu baris.

Langkah keempat : Kemudian kita perbarui sintax pada susunan element widgets yang ada di halaman dashboard dimulai dari widgets StatsOverview.php yang dapat diakses pada file yang berada di folder app/Filament/Widgets/StatsOverview.php.

<?php

namespace App\Filament\Widgets;

use App\Models\Customer;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;
use Illuminate\Database\Eloquent\Builder;

class StatsOverview extends BaseWidget
{
    # aktifkan trait untuk dapat membaca value dari parameter filter tanggal
    use InteractsWithPageFilters;

    protected function getStats(): array
    {
        # mendefinisikan parameter filter tanggal
        $startDate = $this->filters['startDate'] ?? null;
        $endDate = $this->filters['endDate'] ?? null;

        return [
            # Sintax Awal untuk menampilkan total payment dalam Rp
            // Stat::make('Total Payments', 'Rp ' . number_format(Customer::sum('total_payments'), 0, ',', '.')),
            # Sintax terbaru dengan mengaktifkan filter tanggal untuk menampilkan total payment dalam Rp
            Stat::make(
                label: 'Total Payments',
                value: 'Rp ' . number_format(Customer::query()
                    ->when($startDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $startDate))
                    ->when($endDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $endDate))
                    ->sum('total_payments'), 0, ',', '.')
            ),

            # Sintax Awal untuk menampilkan jumlah transaksi 
            // Stat::make('Total Transaction', Customer::count('total_payments') . ' Transaction'),
            # Sintax terbaru dengan mengaktifkan filter tanggal untuk menampilkan jumlah transaksi
            Stat::make(
                label: 'Total Transaction',
                value: Customer::query()
                    ->when($startDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $startDate))
                    ->when($endDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $endDate))
                    ->count('total_payments') . ' Transaction'
            ),


            # Sintax Awal untuk menampilkan total point tertinggi
            // Stat::make('Higher Point', Customer::max('total_points') . ' Points'),
            # Sintax terbaru dengan mengaktifkan filter tanggal untuk menampilkan total point tertinggi
            Stat::make(
                label: 'Higher Point',
                value: Customer::query()
                    ->when($startDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $startDate))
                    ->when($endDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $endDate))
                    ->max('total_points') ?? 0 . ' Points'
            ),

        ];
    }
}

Langkah kelima : Lalu kita perbarui sintax pada susunan element widgets yang ada di halaman dashboard untuk widgets IsMember.php yang dapat diakses pada file yang berada di folder app/Filament/Widgets/IsMember.php.

<?php

namespace App\Filament\Widgets;

use App\Models\Customer;

use Filament\Widgets\ChartWidget;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use Illuminate\Database\Eloquent\Builder;

class IsMemberChart extends ChartWidget
{
    # aktifkan trait untuk dapat membaca value dari parameter filter tanggal
    use InteractsWithPageFilters;

    protected static ?string $heading = 'Is Member Status Chart';
    protected static ?int $sort = 4;
    protected static ?string $maxHeight = '210px';


    protected function getData(): array
    {
        # mendefinisikan parameter filter tanggal
        $startDate = $this->filters['startDate'] ?? null;
        $endDate = $this->filters['endDate'] ?? null;


        # Sintax awal untuk menghitung jumlah member yang aktif
        // $activeCount = Customer::where('is_member', true)->count() / Customer::count() * 100;
        # Sintax terbaru dengan mengaktifkan filter tanggal untuk menghitung jumlah member yang aktif
        $activeCount = Customer::query()
            ->when($startDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $startDate))
            ->when($endDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $endDate))
            ->where('is_member', true)->count();

        # Sintax awal untuk menghitung jumlah member yang tidak aktif
        // $inactiveCount = Customer::where('is_member', false)->count() / Customer::count() * 100;
        # Sintax terbaru dengan mengaktifkan filter tanggal untuk menghitung jumlah member yang aktif
        $inactiveCount = Customer::query()
            ->when($startDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $startDate))
            ->when($endDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $endDate))
            ->where('is_member', false)->count();

        # Menghitung total member
        $totalCount = Customer::query()
            ->when($startDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $startDate))
            ->when($endDate, fn(Builder $query) => $query->whereDate('created_at', '>=', $endDate))
            ->count();

        #Menghitung prosentase berstatus member aktif dan tidak aktif
        $activeCountPct = ($totalCount > 0) ? ($activeCount / $totalCount * 100) : 0;
        $inactiveCountPct = ($totalCount > 0) ? ($inactiveCount / $totalCount * 100) : 0;

        return [
            'labels' => ['Active Members in %', 'Inactive Members in %'],
            'datasets' => [
                [
                    # Sintax awal untuk menampilkan value dari hasil query data activeCount dan inactiveCount sebelum ada filter tanggal
                    // 'data' => [$activeCount, $inactiveCount],
                    # Sintax terbaru untuk menampilkan value setelah ada filter tanggal dari hasil query berupa data activeCountPct dan inactiveCountPct.
                    'data' => [$activeCountPct, $inactiveCountPct],

                    'backgroundColor' => ['#36A2EB', '#FF6384'], // Warna untuk masing-masing bagian
                ],
            ],
        ];
    }

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

    protected function getOptions(): array
    {
        return [
            'responsive' => true,
            'plugins' => [
                'legend' => [
                    'display' => true,
                ],
                'tooltip' => [
                    'enabled' => true,
                ],
            ],
            'scales' => [
                'x' => [
                    'display' => false, // Menyembunyikan sumbu X
                ],
                'y' => [
                    'display' => false, // Menyembunyikan sumbu Y
                ],
            ],
        ];
    }
}

Langkah keenam : Selanjutnya kita perbarui sintax pada susunan element widgets yang ada di halaman dashboard untuk widgets TotalPointChart.php yang dapat diakses pada file yang berada di folder app/Filament/Widgets/TotalPointChart.php.

<?php

namespace App\Filament\Widgets;

use App\Models\Customer;
use Filament\Widgets\ChartWidget;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Facades\DB;

class TotalPointChart extends ChartWidget
{
    # aktifkan trait untuk dapat membaca value dari parameter filter tanggal
    use InteractsWithPageFilters;

    protected static ?string $heading = 'Top 5 Total Points by District';
    protected static ?int $sort = 5;

    protected function getData(): array
    {
        # mendefinisikan parameter filter tanggal
        $startDate = $this->filters['startDate'] ?? null;
        $endDate = $this->filters['endDate'] ?? null;

        # Sintax awal untuk menghitung 5 point tertinggi yang dicapai oleh pelanggan berdasarkan kecamatan
        // $data = Customer::with('district')
        //     ->select('district_id', DB::raw('AVG(total_points) as items'))
        //     ->groupBy('district_id')
        //     ->orderByDesc('items')
        //     ->take(5)
        //     ->get();

        # Sintax terbaru dengan mengaktifkan filter tanggal untuk menghitung 5 point tertinggi yang dicapai oleh pelanggan berdasarkan kecamatan
        $data = Customer::query()
            ->when($startDate, fn(Builder $query) => $query->whereDate('created-at', '>=', $startDate))
            ->when($endDate, fn(Builder $query) => $query->whereDate('created-at', '>=', $endDate))
            ->with('district')
            ->select('district_id', DB::raw('AVG(total_points) as items'))
            ->groupBy('district_id')
            ->orderByDesc('items')
            ->take(5)
            ->get();

        $labels = $data->map(function ($customer) {
            return $customer->district->name; // Mengambil nama kecamatan
        });

        return [
            'labels' => $labels,
            'datasets' => [
                [
                    'label' => 'Total Points',
                    'data' => $data->pluck('items')->toArray(),
                    'backgroundColor' => 'rgba(75, 192, 192, 0.2)',
                    'borderColor' => 'rgba(75, 192, 192, 1)',
                    'borderWidth' => 1,
                ],
            ],
        ];
    }

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

Langkah keenam : Lalu Kita jalankan perintah CLI berupa php artisan optimize untuk melakukan refresh cache pada proyek Laravel Filament Kita.

Gambar 4 Menjalankan perintah refresh cache pada proyek Laravel Filament

Langkah ketujuh : Nonaktifkan sintax Pages\Dashboard::class dengan menambahkan double slice // diawal sintax pada file DashboardPanelProvider.php yang berada di folder app/Filament/Providers/DashboardPanelProvider.php

->pages([
  // Pages\Dashboard::class,
])

Gambar 5 Nonaktifkan sintax Page\Dashboard::class

Langkah kedelapan : Jalankan proyek Laravel Filament Kita di Browser dengan menjalankan perintah CLI berupa php artisan serve

Gambar 6 Menjalankan proyek Laravel Filament dengan CLI

Maka akan terdapat perbedaan tampilan halaman dashboard seperti gambar 7 dan gambar 8.

Gambar 7 tampilan awal halaman dashboard sebelum ada formFilters()

Gambar 8 Tampilan akhir setelah ada formFilters()

Lalu dapat Kita testing dengan mengisi formFilters() dengan value tanggal awal dan tanggal akhir, apabila data widgets berubah seperti pada gambar 9, maka proses menambahkan filter berdasarkan tanggal berhasil dilakukan.

Gambar 9 Tampilan halaman dashboard setelah dilakukan testing

Demikian proses eksplorasi mengaktifkan fitur filter berdasarkan tanggal pada halaman dashboard dari website yang dibuat menggunakan Laravel dan Filament PHP studi kasus sistem informasi pelanggan sederhana. Semoga dapat memberikan gambaran bagaimana memanfaatkan Laravel dan filament PHP dalam pembuatan website sesuai dengan kebutuhan.

Mohon maaf apabila ada banyak kekurangan. Terima Kasih atas perhatian yang telah diberikan.

Salam Hormat,
Muhammad Arief Ardyansyah

Mengaktifkan Fitur Date Filter Agar Halaman Dashboard Lebih Interaktif

Table of contents

Introduction

Langkah-langkah

Subscribe to my newsletter

Muhammad Arief Ardyansyah

Muhammad Arief Ardyansyah