PHP code example of koassi / filament-highcharts

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

koassi / filament-highcharts example snippets

use Koassi\FilamentHighcharts\FilamentHighchartsPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentHighchartsPlugin::make(),
        ]);
}

use Koassi\FilamentHighcharts\Widgets\HighchartsWidget;

class BlogPostsChart extends HighchartsWidget
{
    protected static ?string $chartId = 'blogPostsChart';

    protected static ?string $heading = 'Blog Posts';

    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'line',
                'styledMode' => true,
            ],
            'title' => [
                'text' => 'Blog Posts per Quarter',
            ],
            'xAxis' => [
                'categories' => ['Q1', 'Q2', 'Q3', 'Q4'],
            ],
            'series' => [
                [
                    'name' => '2025',
                    'data' => [49.9, 71.5, 106.4, 129.2],
                ],
            ],
        ];
    }
}

protected static ?string $heading = 'Blog Posts Chart';

protected static ?string $subheading = 'This is a subheading';

protected static ?string $chartId = 'blogPostsChart';

protected static bool $isCollapsible = true;

protected function isCollapsible(): bool
{
    return true;
}

protected static int $contentHeight = 400; //px

protected function getContentHeight(): ?int
{
    return 400;
}

protected static ?string $footer = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';

use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Contracts\View\View;

protected function getFooter(): null|string|Htmlable|View
{
    return view('custom-footer', ['text' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.']);
}

use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Contracts\View\View;
use Illuminate\Support\HtmlString;

protected function getFooter(): null|string|Htmlable|View
{
    return new HtmlString('<p class="text-danger-500">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>');
}

use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;
use Filament\Widgets\ChartWidget\Concerns\HasFiltersSchema;
use Koassi\FilamentHighcharts\Widgets\HighchartsWidget;

class BlogPostsChart extends HighchartsWidget
{
    use HasFiltersSchema;

    public function filtersSchema(Schema $schema): Schema
    {
        return $schema->components([
            TextInput::make('title')
                ->default('Blog Posts Chart'),

            DatePicker::make('date_start')
                ->default('2025-07-01'),

            DatePicker::make('date_end')
                ->default('2025-07-31'),
        ]);
    }

    /**
     * Use this method to update the chart options when the filter form is submitted.
     */
    public function updatedInteractsWithSchemas(string $statePath): void
    {
        $this->updateOptions();
    }
}

protected function getOptions(): array
{
    $title = $this->filters['title'];
    $dateStart = $this->filters['date_start'];
    $dateEnd = $this->filters['date_end'];

    return [
        //chart options
    ];
}

public ?string $filter = 'today';

protected function getFilters(): ?array
{
    return [
        'today' => 'Today',
        'week' => 'Last week',
        'month' => 'Last month',
        'year' => 'This year',
    ];
}

protected function getOptions(): array
{
    $activeFilter = $this->filter;

    return [
        //chart options
    ];
}

protected ?string $pollingInterval = '10s';

protected ?string $pollingInterval = null;

protected static bool $deferLoading = true;

protected function getOptions(): array
{
    //showing a loading indicator immediately after the page load
    if (! $this->readyToLoad) {
        return [];
    }

    //slow query
    sleep(2);

    return [
        //chart options
    ];
}

protected static ?string $loadingIndicator = 'Loading...';

use Illuminate\Contracts\View\View;

protected function getLoadingIndicator(): null|string|View
{
    return view('custom-loading-indicator');
}

'chart' => [
    'styledMode' => true,
],

use Filament\Support\RawJs;

protected function extraJsOptions(): ?RawJs
{
    return RawJs::make(<<<'JS'
        {
            xAxis: {
                labels: {
                    formatter: function() {
                        const label = this.axis.defaultLabelFormatter.call(this);
                        // Use thousands separator for four-digit numbers too
                        if (/^[0-9]{4}$/.test(label)) {
                            return Highcharts.numberFormat(this.value, 0);
                        }
                        return label;
                    }
                }
            }
        }
    JS);
}

'highcharts_version' => '12.6.0',

bash
php artisan make:filament-highcharts BlogPostsChart

html
<!--resources/views/custom-footer.blade.php-->
<div>
    <p class="text-danger-500">{{ $text }}</p>
</div>

bash
php artisan vendor:publish --tag="filament-highcharts-config"

bash
php artisan vendor:publish --tag="filament-highcharts-views"

bash
php artisan vendor:publish --tag="filament-highcharts-translations"

bash
php artisan vendor:publish --tag="filament-highcharts-stubs"