README

Filament 的 Apex 图表集成，具有额外电池和类似 Filament 的 API

雇佣我

我可以在 Filament、Laravel、Livewire、AlpineJS、TailwindCSS 等技术栈上提供合同工作。可以通过 电子邮件 或 Discord 联系我

概述

此插件将 Apex Charts 集成到 Filament 中，为您的数据提供美观且交互式的可视化。此软件包提供以下功能：

• 基于类的选项和数据设置器，带有 IDE 自动补全和文档。

• 能够使用流畅的方法生成图表数据模型。（通过 flowframe/laravel-trend 实现）

• 能够设置可自定义的过滤器。

• 能够为用户/团队启用/禁用图表。（通过 laravel/penant 实现）

安装

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

composer require hasnayeen/glow-chart:^3.0

用法

使用以下命令创建一个新的图表小部件：

php artisan make:glow-chart BlogPostsChart

上述命令将创建以下类

<?php

namespace App\Filament\Widgets;

use Hasnayeen\GlowChart\Glowchart;
use Hasnayeen\GlowChart\Chart;
use Hasnayeen\GlowChart\Enums\ChartType;
use Hasnayeen\GlowChart\Options;
use Hasnayeen\GlowChart\Series;

class BlogPostsChart extends GlowChart
{
    protected static string $id = 'BlogPostsChart';

    protected static ?string $heading = 'Chart';

    protected function options(Options $options): Options
    {
        return $options
            ->chart(
                Chart::make(ChartType::{{ type }})
            );
    }

    protected function series(Series $series): Series
    {
        return $series
            ->data();
    }
}

变量 protected static ?string $id 用于引用插入 Apex 图表的元素。您可以重写它，但应与其他页面上的图表唯一。

变量 protected static ?string $heading 用于设置描述图表的标题。

方法 options 用于设置 Apex Charts 选项。该方法应返回一个 Hasnayeen\GlowChart\Options 对象。您可以通过在 Options 对象上使用流畅的方法来设置 Apex 图表的所有可用选项。

首先，您必须通过 chart 方法设置图表选项

    protected function options(Options $options): Options
    {
        return $options
            ->chart(
                Chart::make(ChartType::Area)
                    ->height(300)
                    ->toolbar(
                        Toolbar::make()
                            ->show(false)
                    )
            );
    }

将一个 Hasnayeen\GlowChart\Chart 对象传递给 chart 方法，并使用 Hasnayeen\GlowChart\Enums\ChartType 枚举设置图表类型。您可以通过链式调用其他方法来设置其他选项。

接下来，您必须通过 series 方法提供您的数据

    protected function series(Series $series): Series
    {
        return $series
            ->data([120, 90, 86, 71, 65, 23, 54, 87, 60, 234, 92, 120]);
    }

设置图表数据

您可以通过多种方式将数据传递给图表。您已经看到了如何传递数组，您还可以通过传递一个 Illuminate\Support\Collection 对象来传递 data 方法。

您还可以从 Eloquent 模型（内部使用 flowframe/laravel-trend）生成图表数据。如果您为资源创建了图表，则已经有一个 resource 属性，如果没有，则可以像下面那样添加一个：

    protected static ?string $resource = BlogPostResource::class;

现在，您可以通过链式调用来自 flowframe/laravel-trend 的所有方法来从模型生成图表数据

    protected function series(Series $series): Series
    {
        return $series
            ->trend()
            ->between(now()->subMonths(11), now())
            ->perMonth()
            ->count();
    }

您还可以通过向 trend 方法提供一个闭包来传递额外的查询方法

    protected function series(Series $series): Series
    {
        return $series
            ->trend(fn (Builder $query) => $query->where('status', 'published'))
            ->between(now()->subMonths(11), now())
            ->perMonth()
            ->count();
    }

可用于自定义查询的方法

您可以使用以下间隔

• perMinute()
• perHour()
• perDay()
• perMonth()
• perYear()

以及以下聚合

• sum('column')
• average('column')
• max('column')
• min('column')
• count('*')

测试

composer test

变更日志

有关最近更改的更多信息，请参阅 CHANGELOG。

贡献

请参阅贡献指南获取详细信息。

安全漏洞

请查阅我们的安全策略了解如何报告安全漏洞。

致谢

• Hasnayeen
• 所有贡献者

许可

MIT许可（MIT）。请参阅许可文件获取更多信息。