PHP code example of elemind / filament-echarts

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

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

    

elemind / filament-echarts example snippets

use Elemind\FilamentECharts\FilamentEChartsPlugin;
public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentEChartsPlugin::make()
        ]);
}

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;
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 Elemind\FilamentECharts\Widgets\EChartWidget;

class BlogPostsChart extends EChartWidget 
{
    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 static ?string $pollingInterval = '10s';

protected static ?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');
}

use Filament\Support\RawJs;

protected function extraJsOptions(): ?RawJs
{
    return RawJs::make(<<<'JS'
        {
            yAxis: {
                axisLabel: {
                    formatter: function(value, index, extra) {
                        return value + ' votes';
                    }
                }
            }
        }
    JS);
}

bash
php artisan make:filament-echarts BlogPostsChart

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

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

bash
php artisan vendor:publish --tag=filament-echarts-translations