laravel-tree-chart

Diagram struktur pohon untuk Laravel Blade yang framework-agnostic.

Komponen Blade tunggal dan mandiri yang merender pohon bersarang apa pun sebagai diagram interaktif — dengan kartu berwarna per level, garis penghubung beranimasi, node yang bisa dilipat (collapse), panel samping, dan kemampuan menyembunyikan node. Tanpa Bootstrap, tanpa Livewire, tanpa JS/CSS eksternal: semua style dan script disuntikkan inline, hanya sekali per halaman.

Awalnya diekstrak dari modul RPJMD pohon kinerja — cocok untuk bagan organisasi, kaskade tujuan, pohon keluarga, peta situs, dan lainnya.

Dokumentasi

Dokumentasi lengkap tersedia di https://tmc1807.github.io/laravel-tree-chart:

• Memulai
• Skema node
• Opsi
• Lanjutan
• Kontribusi

Fitur

• Data-driven — terima array/collection/object bersarang apa pun; tidak ada syarat skema selain id + label.
• Tanpa dependensi UI — CSS minimal + vanilla JS sendiri, dengan prefiks tc- agar tidak bertabrakan.
• Aset inline — style/script hanya dikeluarkan sekali per halaman (@once), tidak ada yang perlu di-publish atau di-build.
• Node dapat dilipat — tampil/sembunyi anak dengan animasi.
• Panel samping — panel opsional (HTML/Blade apa pun) di sebelah kanan kartu, bisa di-toggle lewat switch.
• Node dapat disembunyikan — tombol × menyembunyikan cabang dan menyisakan badge yang bisa diklik di dekat root.
• Ramah Livewire — menginisialisasi pohon yang ditambahkan setelah halaman dimuat secara otomatis (mutation observer), tanpa dependensi Livewire.
• Banyak instance — beberapa pohon dalam satu halaman berbagi satu blok CSS/JS.
• Dapat dikonfigurasi — warna per level, lebar kartu/panel samping, animasi, gaya konektor.

Instalasi

composer require tmc1807/laravel-tree-chart

Untuk pengembangan lokal lewat path repository:

{
    "repositories": [
        { "type": "path", "url": "../laravel-tree-chart" }
    ]
}

Laravel meng-auto-discovery service provider. Jika aplikasi Anda menonaktifkan package discovery, daftarkan secara manual di bootstrap/providers.php:

Tmc\LaravelTreeChart\TreeChartServiceProvider::class,

Mulai cepat

<x-tree-chart :nodes="$nodes" :options="$options" />

Bangun node sebagai array bersarang:

$nodes = [
    [
        'id'        => 'visi',
        'header'    => 'Visi',
        'label'     => 'Terwujudnya Masyarakat Sejahtera',
        'sub_label' => 'Periode 2025 - 2030',
        'photo'     => 'https://example.test/foto/kepala-daerah.jpg',
        'color'     => '#4e73df',
        'children'  => [
            [
                'id'        => 'm-1',
                'header'    => 'Misi 1',
                'label'     => 'Meningkatkan kualitas SDM',
                'sub_label' => 'Sasaran pembangunan manusia',
                'hideable'  => true,
                'children'  => [
                    [
                        'id'       => 't-1',
                        'header'   => 'Tujuan 1',
                        'label'    => 'Meningkatkan kualitas pendidikan',
                        'position' => 'side',
                        'side'     => view('partials.indicator', ['rows' => $indikatorRows]),
                        'children' => [
                            [
                                'id'    => 's-1',
                                'label' => 'Meningkatnya mutu layanan pendidikan',
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Skema node

Key tambahan apa pun disimpan di extra dan diabaikan oleh renderer.

Builder helper

Alih-alih array, Anda bisa memakai builder fluent Node:

use Tmc\LaravelTreeChart\Data\Node;

$nodes = [
    Node::make('visi', 'Terwujudnya Masyarakat Sejahtera')
        ->header('Visi')
        ->color('#4e73df')
        ->photo('https://example.test/foto/visi.jpg')
        ->child(
            Node::make('m-1', 'Meningkatkan kualitas SDM')
                ->header('Misi 1')
                ->hideable()
        ),
];

Opsi

Semua opsi bersifat opsional; default ada di config/tree-chart.php (publish dengan php artisan vendor:publish --tag=tree-chart-config).

$options = [
    'title'       => 'Cascading Bagan Kinerja RPJMD 2025 - 2030',
    'subtitle'    => 'Akhir periode',
    'colors'      => ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#6f42c1'], // per level (depth 0 = root)
    'card_width'  => 260,
    'photo'       => true, // saklar utama: false menyembunyikan avatar bahkan jika node punya photo
    'photo_placeholder' => 'data:image/svg+xml,...', // fallback jika node tanpa photo; null menyembunyikan avatar
    'side_width'  => 500,
    'animate'     => true,
    'connector'   => 'dashed', // 'dashed' | 'solid'
    'collapsible' => true,
    'expand_level' => 'all', // 'all' (semua tampil) | 'click' (klik baru muncul) | 3 (auto sampai level 3)
    'side_toggle' => true,
    'scrollable'  => true,
];

Demo

Halaman contoh disertakan. Aktifkan hanya saat pengembangan:

# .env
TREECHART_DEMO=true

// config/tree-chart.php (yang sudah dipublish) atau secara dinamis
'tree-chart.demo' => env('TREECHART_DEMO', false),

Lalu kunjungi /tree-chart/demo. Saat dinonaktifkan (default), route tidak didaftarkan.

Pengujian & gaya

composer install
composer test   # Pest (testbench)
composer pint   # Laravel Pint

Lisensi

MIT