leandrocfe/filament-apex-charts

Filament PHP 的 Apex Charts 集成

维护者

详细信息

github.com/leandrocfe/filament-apex-charts

主页

源代码

问题

安装: 299,871

依赖: 4

建议者: 0

安全: 0

星标: 313

关注者: 3

分支: 38

开放问题: 11

3.1.4 2024-09-14 13:57 UTC

Requires

Requires (Dev)

MIT e7cfd3f4966a555f30db6f5fcb2f3b3102bc1e99

  • Leandro Costa Ferreira <leandrocfe.woop@gmail.com>

laravelapexchartsleandrocfefilament-apex-charts

This package is auto-updated.

Last update: 2024-09-14 13:59:34 UTC

README

Apex Charts 针对 Filament

dashboard image demo

Filament 与 ApexCharts 的演示

安装

您可以通过 composer 安装此软件包

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

注册您想要使用的 Filament Panels 插件

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() 返回的可能性。

示例

设置小部件标题

您可以设置小部件标题

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)。有关更多信息，请参阅许可证文件