PHPackages tmc1807/laravel-tree-chart - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. tmc1807/laravel-tree-chart ActiveLibrary[Templating & Views](/categories/templating) tmc1807/laravel-tree-chart ========================== Framework-agnostic tree structure chart for Laravel Blade. Pure Blade component, inline CSS/JS, no Bootstrap or Livewire required. v1.0.0(today)00MITBladePHP ^8.2CI failing Since Aug 1Pushed todayCompare [ Source](https://github.com/tmc1807/laravel-tree-chart)[ Packagist](https://packagist.org/packages/tmc1807/laravel-tree-chart)[ RSS](/packages/tmc1807-laravel-tree-chart/feed)WikiDiscussions main Synced today READMEChangelogDependencies (5)Versions (2)Used By (0) laravel-tree-chart ================== [](#laravel-tree-chart) [![PHP](https://camo.githubusercontent.com/e2066300afd7b94e924bbd75af345a22343c27ae4fbce6307a05bdf86b290b27/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322b2d3838393242463f6c6f676f3d706870266c6f676f436f6c6f723d666666)](https://www.php.net)[![Laravel](https://camo.githubusercontent.com/b59576bd291eaa6d66d59de64635c1fa7865fd1656a0cbf5024dafbc4d91c7da/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d313125323025374325323031322d7265643f6c6f676f3d6c61726176656c266c6f676f436f6c6f723d666666)](https://laravel.com)[![Tests](https://github.com/tmc1807/laravel-tree-chart/actions/workflows/tests.yml/badge.svg)](https://github.com/tmc1807/laravel-tree-chart/actions)[![Docs](https://camo.githubusercontent.com/cbd47fbaf467f58dee54ead7c02e8b7ea395d8e87d2e0b2f78ce87e08034ff9b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646f63732d67697468756225323070616765732d3442374245433f6c6f676f3d676974687562)](https://tmc1807.github.io/laravel-tree-chart)[![License: MIT](https://camo.githubusercontent.com/8bb50fd2278f18fc326bf71f6e88ca8f884f72f179d3e555e20ed30157190d0d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e2e737667)](LICENSE) 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) Dokumentasi lengkap tersedia di ****: - [Memulai](https://tmc1807.github.io/laravel-tree-chart/getting-started.html) - [Skema node](https://tmc1807.github.io/laravel-tree-chart/node-schema.html) - [Opsi](https://tmc1807.github.io/laravel-tree-chart/options.html) - [Lanjutan](https://tmc1807.github.io/laravel-tree-chart/advanced.html) - [Kontribusi](https://tmc1807.github.io/laravel-tree-chart/contributing.html) Fitur ----- [](#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 --------- [](#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 ----------- [](#mulai-cepat) ``` ``` 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 ---------- [](#skema-node) KeyTipeDeskripsi`id`stringId unik (dipakai untuk DOM id, collapse, sembunyikan/pulihkan).`header`stringTeks pada baris header berwarna (mis. `Misi 1`). Hapus untuk menyembunyikan baris header.`label`stringTeks utama pada badan kartu.`sub_label`stringTeks sekunder redup pada badan kartu.`photo`stringURL gambar opsional yang dirender sebagai avatar bulat. Jika kosong, opsi `photo_placeholder` yang ditampilkan.`position`stringPenempatan relatif terhadap parent: `down` (ke bawah, default) atau `side` (ke samping kartu parent).`color`stringWarna hex untuk border kartu, header, dan garis. Jatuh ke palet per level jika tidak ada.`width`intLebar kartu dalam px; default mengikuti opsi `card_width`.`children`arrayNode anak (bersarang).`side`string | HtmlableKonten panel samping, dirender apa adanya (`{!! !!}`). Bisa `view('name', [...])` atau HTML.`side_visible`boolApakah panel samping mulai terlihat (default `true`).`collapsed`boolMulai dengan anak terlipat (default `false`).`hideable`boolTampilkan tombol `×` untuk menyembunyikan cabang menjadi badge (default `false`).Key tambahan apa pun disimpan di `extra` dan diabaikan oleh renderer. ### Builder helper [](#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 ---- [](#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, 'card_gap' => 14, // jarak horizontal antar kartu (px) 'card_height' => null, // tinggi minimum kartu (px); null = mengikuti isi 'font_size' => 11, // ukuran font kartu (px); sub-label mengikuti secara proporsional '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 ---- [](#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 -------------------- [](#pengujian--gaya) ``` composer install composer test # Pest (testbench) composer pint # Laravel Pint ``` Lisensi ------- [](#lisensi) MIT ### Health Score 39 — LowBetter than 84% of packages Maintenance100 Actively maintained with recent releases Popularity0 Limited adoption so far Community6 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 0d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/a2cb2ee3c05bccb5f3c1d611a9ccd5a8c3c16637e5501cd0848058faccb3b91e?d=identicon)[tmc1807](/maintainers/tmc1807) --- Top Contributors [![tmc1807](https://avatars.githubusercontent.com/u/67147042?v=4)](https://github.com/tmc1807 "tmc1807 (54 commits)") --- Tags laravelbladetreechartorg chartpohon-kinerja ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/tmc1807-laravel-tree-chart/health.svg) ``` [![Health](https://phpackages.com/badges/tmc1807-laravel-tree-chart/health.svg)](https://phpackages.com/packages/tmc1807-laravel-tree-chart) ``` ### Alternatives [moonshine/moonshine Laravel administration panel 1.3k268.2k86](/packages/moonshine-moonshine)[psalm/plugin-laravel Psalm plugin for Laravel 3355.4M352](/packages/psalm-plugin-laravel)[blade-ui-kit/blade-icons A package to easily make use of icons in your Laravel Blade views. 2.5k46.0M447](/packages/blade-ui-kit-blade-icons)[hasinhayder/tyro-dashboard Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings 5495.1k](/packages/hasinhayder-tyro-dashboard)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 729176.2k16](/packages/tallstackui-tallstackui)[hasinhayder/tyro-login Tyro Login - Beautiful, customizable authentication views for Laravel 12 & 13 2488.1k7](/packages/hasinhayder-tyro-login) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)