PHPackages                             ilbronza/timeline - 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. [Utility & Helpers](/categories/utility)
4. /
5. ilbronza/timeline

ActiveLibrary[Utility & Helpers](/categories/utility)

ilbronza/timeline
=================

Gantt / timeline visualization components (vis-timeline) for Laravel and IlBronza packages

09JavaScript

Since Jul 14Pushed 1w agoCompare

[ Source](https://github.com/ilBronza/Timeline)[ Packagist](https://packagist.org/packages/ilbronza/timeline)[ RSS](/packages/ilbronza-timeline/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependenciesVersions (1)Used By (0)

IlBronza Timeline
=================

[](#ilbronza-timeline)

Gantt / timeline visualization package (based on [vis-timeline](https://visjs.github.io/vis-timeline/docs/timeline/)) for Laravel projects using the IlBronza package suite.

Extracted from `ilbronza/crud` to keep the timeline engine decoupled from domain packages.

Installation
------------

[](#installation)

```
composer require ilbronza/timeline
```

The service provider is auto-discovered.

### Frontend assets (host project)

[](#frontend-assets-host-project)

Timeline JS/CSS are **not** inlined in Blade anymore. The package ships static assets under `resources/assets/` and loads them on timeline pages only.

1. Install vis-timeline in the host project:

```
npm install vis-timeline --save
```

2. Publish starter Mix entry files (optional):

```
php artisan vendor:publish --tag=timeline.assets
```

3. Add dedicated webpack entries (keep **out** of `app.js`):

```
// webpack.mix.js
mix.js('resources/js/timeline.js', 'public/js/timeline.js')
    .less('resources/less/timeline.less', 'public/css/timeline.css');
```

`resources/js/timeline.js` and `resources/less/timeline.less` are provided as stubs in the package (`resources/stubs/project/`).

4. Build:

```
npm run dev
# or
npm run production
```

5. Remove any CDN/unpkg `vis-timeline` tags from project layouts (e.g. `layouts/_projectScripts.blade.php`) — vis-timeline is now bundled in `public/js/timeline.js`.

Timeline pages include `timeline::_timelineAssets`, which emits `timeline.css`, `timeline.js`, and a small JSON config block (`#timeline-config`). Override paths in config if needed:

```
'assets' => [
    'js' => 'js/timeline.js',
    'css' => 'css/timeline.css',
],
```

Project-specific timeline styles (group labels, etc.) belong in the host `timeline.less`, after the package import.

### Extending timeline JS

[](#extending-timeline-js)

`timeline.js` is loaded with `defer`. Any host script that wraps or replaces globals such as `window.openTimelineCreateRowPopup` must also use `defer` and be included **after** `timeline::_timeline`, so it runs once the package script has defined those functions. Alternatively, listen for the `timeline:ready` event fired after the initial data load.

Configuration
-------------

[](#configuration)

```
php artisan vendor:publish --tag=timeline.config
```

```
// config/timeline.php
return [
    // days visible at initial zoom
    'zoom' => 60,

    // model class used to build the drag&drop update route.
    // must use IsTimelineItemTrait (or expose getTimelineUpdateUrl())
    'updatableItemClass' => \IlBronza\Products\Models\Orders\Orderrow::class,

    'assets' => [
        'js' => 'js/timeline.js',
        'css' => 'css/timeline.css',
    ],
];
```

If `updatableItemClass` is null, the Gantt is read-only (drag updates disabled).

Usage
-----

[](#usage)

### Models

[](#models)

A model rendered as a **bar** on the timeline:

```
use IlBronza\Timeline\Interfaces\TimelineItemInterface;
use IlBronza\Timeline\Traits\IsTimelineItemTrait;

class Orderrow extends Model implements TimelineItemInterface
{
    use IsTimelineItemTrait;

    // requires getStartsAt() / getEndsAt() returning ?Carbon
}
```

A model used as a **group** (row container) on the timeline:

```
use IlBronza\Timeline\Interfaces\TimelineGroupInterface;
use IlBronza\Timeline\Interfaces\GanttTimelineInterface;
use IlBronza\Timeline\Traits\IsTimelineGroupTrait;
use IlBronza\Timeline\Traits\GanttTimelineTrait;

class Order extends Model implements TimelineGroupInterface, GanttTimelineInterface
{
    use IsTimelineGroupTrait;
    use GanttTimelineTrait; // provides getGanttUrl() / getGanttButton()
}
```

### Controllers

[](#controllers)

```
use IlBronza\Timeline\Http\Controllers\BaseTimelineController;

class OrderTimelineController extends BaseTimelineController
{
    public function getEndpoint() : string
    {
        return route('orders.timeline', $this->getModel());
    }

    public function getMainTimelineData($order)
    {
        $order = $this->findModel($order);

        $this->createGroupsByCollection($groups);
        $this->createItemsByCollectionAndGetter($order->rows, 'getSellable');

        return $this->sendResponse();
    }
}
```

Two routes per Gantt: `container` renders the page, `timeline` returns JSON data:

```
Route::get('timeline-container/{order}/{option?}', [OrderTimelineController::class, 'container'])->name('orders.timelineContainer');
Route::get('timeline/{order}/{option?}', [OrderTimelineController::class, 'timeline'])->name('orders.timeline');
```

For project-wide timelines (no specific model) use the `GlobalTimelineTrait`.

Migrating from ilbronza/crud
----------------------------

[](#migrating-from-ilbronzacrud)

Replace the old imports:

Old (`IlBronza\CRUD`)New (`IlBronza\Timeline`)`CRUD\Http\Controllers\Timeline\BaseTimelineController``Timeline\Http\Controllers\BaseTimelineController``CRUD\Traits\Timeline\GanttTimelineTrait``Timeline\Traits\GanttTimelineTrait``CRUD\Traits\Timeline\GlobalTimelineTrait``Timeline\Traits\GlobalTimelineTrait``CRUD\Traits\Timeline\IsTimelineItemTrait``Timeline\Traits\IsTimelineItemTrait``CRUD\Traits\Timeline\IsTimelineGroupTrait``Timeline\Traits\IsTimelineGroupTrait``CRUD\Interfaces\GanttTimelineInterface``Timeline\Interfaces\GanttTimelineInterface``CRUD\Interfaces\TimelineInterfaces\TimelineItemInterface``Timeline\Interfaces\TimelineItemInterface``CRUD\Interfaces\TimelineInterfaces\TimelineGroupInterface``Timeline\Interfaces\TimelineGroupInterface``CRUD\Helpers\TimelineHelpers\TimelineItem``Timeline\Helpers\TimelineItem``CRUD\Helpers\TimelineHelpers\TimelineGroup``Timeline\Helpers\TimelineGroup``CRUD\Helpers\TimelineHelpers\TimelineItemCreatorHelper``Timeline\Helpers\TimelineItemCreatorHelper``CRUD\Helpers\TimelineHelpers\TimelineGroupCreatorHelper``Timeline\Helpers\TimelineGroupCreatorHelper`Config changes:

- `crud.timelineZoom` → `timeline.zoom`
- set `timeline.updatableItemClass` (was hardcoded to `Orderrow` in CRUD)

View changes:

- `crud::timeline.timeline` → `timeline::timeline`
- inline `_timelineScripts` / `_timelineStyle` → `public/js/timeline.js` + `public/css/timeline.css` (see Installation)

After migrating, the `Timeline` folders in `ilbronza/crud` (`src/Traits/Timeline`, `src/Http/Controllers/Timeline`, `src/Helpers/TimelineHelpers`, `src/Interfaces/TimelineInterfaces`, `src/Interfaces/GanttTimelineInterface.php`, `resources/views/timeline`) can be removed.

License
-------

[](#license)

MIT

###  Health Score

22

—

LowBetter than 21% of packages

Maintenance64

Regular maintenance activity

Popularity6

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity11

Early-stage or recently created project

 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/33c65523e8a1cdfe8ed5f5fb8d90101b28eceb8c2ef7acb50a24cf6c42b8e639?d=identicon)[ilBronza](/maintainers/ilBronza)

---

Top Contributors

[![bronza](https://avatars.githubusercontent.com/u/3426331?v=4)](https://github.com/bronza "bronza (16 commits)")

### Embed Badge

![Health badge](/badges/ilbronza-timeline/health.svg)

```
[![Health](https://phpackages.com/badges/ilbronza-timeline/health.svg)](https://phpackages.com/packages/ilbronza-timeline)
```

###  Alternatives

[robicch/jquery-gantt

Twproject Gantt editor is a free online tool for creating and sharing Gantts

2.2k169.0k](/packages/robicch-jquery-gantt)[spatie/lighthouse-php

Run Google Lighthouse using PHP

26861.5k2](/packages/spatie-lighthouse-php)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)