Laravel and Livewire · phiz

phiz’s Laravel service provider is discovered automatically. It registers the <x-phiz> Blade component and the @phizScripts directive. Without Laravel, the same classes are never loaded.

The component’s tests run on Laravel 12 through Orchestra Testbench 10. The Livewire behavior below is not covered by the test suite, and phiz does not depend on Livewire.

Blade

<x-phiz :plot="$plot" class="h-80" />

The component accepts a Plot, a Compose, a specification array, or specification JSON. :options passes vega-embed options, merged over config('phiz.embed_options'). Other attributes go to the container element.

The first <x-phiz> on a page adds the script tags. To place them yourself, put @phizScripts in the layout.

Livewire

The component re-renders inside Livewire without extra code. The specification is an attribute of the container, which Livewire’s morphing updates on each render. The drawn chart sits in a child element marked wire:ignore, and the phiz loader embeds the new specification when the attribute changes. When a component renders several charts, give each a wire:key.

class RentChart extends Component
{
    public int $bedrooms = 2;

    public function render()
    {
        $plot = Plot::of(Rental::where('bedrooms', $this->bedrooms)->get())
            ->aes(x: 'area_m2', y: 'rent', color: 'neighborhood')
            ->point(alpha: 0.6)
            ->smooth(method: 'lm', se: false);

        return view('livewire.rent-chart', ['plot' => $plot]);
    }
}

<div>
    <select wire:model.live="bedrooms">...</select>
    <x-phiz :plot="$plot" wire:key="rents" :options="['theme' => 'auto']" />
</div>

'theme' => 'auto' follows the reader’s light or dark mode preference. Dashboards with Livewire builds a complete example with several linked charts.

Configuration

Publish the configuration with php artisan vendor:publish --tag=phiz-config.

Key	Default	Meaning
`assets`	`cdn`	`cdn`, a URL prefix serving the three library files, or `none`; the `PHIZ_ASSETS` environment variable sets it
`inject_scripts`	`true`	whether `<x-phiz>` adds the script tags once per page
`embed_options`	`['actions' => false]`	default vega-embed options
`server_rows`	`10_000`	inline rows above which `bin2d()` and `histogram()` bin in PHP (Large data)
`warn_rows`	`20_000`	embedded rows above which phiz raises a warning, or `null` for none

If your Vite bundle already imports vega-embed, set assets to none and assign it to window.vegaEmbed in your bundle. The phiz loader uses it.