README

安装

您可以通过 composer 安装此包

composer require leandrocfe/filament-apex-charts:"^3.1"

为要使用的 Filament 面板注册插件

use Leandrocfe\FilamentApexCharts\FilamentApexChartsPlugin;
public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentApexChartsPlugin::make()
        ]);
}

Filament V2 - 如果您使用 Filament v2.x，请使用此部分

使用方法

首先使用命令创建一个小部件

php artisan make:filament-apex-charts BlogPostsChart

可用的图表样本

您可以选择

区域图
柱状图
箱线图
气泡图
蜡烛图
柱形图
饼图
热力图
折线图
混合折线柱形图
饼图
极坐标图
雷达图
径向条形图
范围区域图
散点图
时间范围条形图
树形图
漏斗图

您还可以通过选择空选项创建一个 空图表。

此命令将在 app\Filament\Widgets 中创建 BlogPostsChart.php 文件。例如：

namespace App\Filament\Widgets;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class BlogPostsChart extends ApexChartWidget
{
    /**
     * Chart Id
     *
     * @var string
     */
    protected static ?string $chartId = 'blogPostsChart';

    /**
     * Widget Title
     *
     * @var string|null
     */
    protected static ?string $heading = 'BlogPostsChart';

    /**
     * Chart options (series, labels, types, size, animations...)
     * https://apexcharts.com/docs/options
     *
     * @return array
     */
    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
            ],
            'series' => [
                [
                    'name' => 'BlogPostsChart',
                    'data' => [7, 4, 6, 10, 14, 7, 5, 9, 10, 15, 13, 18],
                ],
            ],
            'xaxis' => [
                'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                        'fontWeight' => 600,
                    ],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'colors' => ['#f59e0b'],
        ];
    }
}

现在，检查您的仪表板中的新小部件。

可用的选项

使用 getOptions() 方法返回基于 Apex Charts 选项的选项数组。此结构与 Apex Chart 库 相同，这是 Filament Apex Charts 用来渲染图表的库。您可以使用 Apex Chart 文档完全理解从 getOptions() 返回的可能性。

示例

Filament 与 ApexCharts 的示例

设置小部件标题

您可以为小部件设置标题

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

可选地，您可以使用 getHeading() 方法。

隐藏头部内容

您可以通过 不提供 这些内容来隐藏头部内容

$heading
getHeading()
getFormSchema()
getOptions()

设置图表 id

您可以为图表设置 id

protected static string $chartId = 'blogPostsChart';

设置小部件高度

您可以为小部件设置高度

protected static ?int $contentHeight = 300; //px

可选地，您可以使用 getContentHeight() 方法。

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

设置小部件页脚

您可以为小部件设置页脚

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

您也可以使用 getFooter() 方法

自定义视图

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

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

HTML 字符串

use Illuminate\Support\HtmlString;
protected function getFooter(): string|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;

protected function getFormSchema(): array
{
    return [

        TextInput::make('title')
            ->default('My Chart'),

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

        DatePicker::make('date_end')
            ->default('2023-12-31')

    ];
}

自定义过滤表单的数据在 $this->filterFormData 数组中可用。您可以在 getOptions() 方法中使用活动的过滤表单值

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

    return [
        //chart options
    ];
}

此外，如果您想当过滤器的值发生变化时更新图表数据，您必须结合使用 reactive() 和 afterStateUpdated()

use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\TextInput;

protected function getFormSchema(): array
{
    return [
        TextInput::make('title')
            ->default('My Chart')
            ->live()
            ->afterStateUpdated(function () {
                $this->updateChartOptions();
            }),
        ...
    ];
}

单选

要设置默认的过滤器值，设置 $filter 属性

public ?string $filter = 'today';

然后，定义 getFilters() 方法以返回过滤器的值和标签数组

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

您可以在 getOptions() 方法中使用活动的过滤器值

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

    return [
        //chart options
    ];
}

实时更新（轮询）

默认情况下，图表小部件每 5 秒刷新一次数据。

要自定义此功能，您可以覆盖类上的 $pollingInterval 属性为新间隔

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...';

您也可以使用 getLoadingIndicator() 方法

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

<!--resources/views/custom-loading-indicator.blade.php-->
<div>
    <p class="text-danger-500">Loading...</p>
</div>

暗黑模式

现在默认支持并启用暗黑模式。

可选地，您可以禁用它

protected static bool $darkMode = false;

您还可以在 getOptions 方法中设置主题

protected function getOptions(): array
{
    return [
        'theme' => [
            'mode' => 'light' //dark
        ],
        'chart' => [
            'type' => 'bar',
            ...
        ],
        ...
    ];
}

额外选项和格式化器

您可以使用 extraJsOptions 方法向图表添加额外选项

protected function extraJsOptions(): ?RawJs
{
    return RawJs::make(<<<'JS'
    {
        xaxis: {
            labels: {
                formatter: function (val, timestamp, opts) {
                    return val + '/24'
                }
            }
        },
        yaxis: {
            labels: {
                formatter: function (val, index) {
                    return '$' + val
                }
            }
        },
        tooltip: {
            x: {
                formatter: function (val) {
                    return val + '/24'
                }
            }
        },
        dataLabels: {
            enabled: true,
            formatter: function (val, opt) {
                return opt.w.globals.labels[opt.dataPointIndex] + ': $' + val
            },
            dropShadow: {
                enabled: true
            },
        }
    }
    JS);
}

发布视图

可选地，您可以使用以下方式发布视图

php artisan vendor:publish --tag="filament-apex-charts-views"

测试

composer test

变更日志

有关最近更改的更多信息，请参阅变更日志

贡献

有关详细信息，请参阅贡献指南

安全漏洞

如果您在此软件包中发现安全漏洞，请发送电子邮件至 leandrocfe@gmail.com。

鸣谢

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅许可证文件

happones / filament-apex-charts

维护者

详细信息