README

🛠️ 加入旅程

嗨，我是Eighty Nine。我创建了页面警报插件来解决我作为开发者遇到的真实问题。您的赞助将使我能够投入更多时间来增强这些工具并帮助更多人。成为赞助商并与我一起为开发者社区做出积极贡献。

简介

此包为您的Filament应用程序提供了一套高级小部件。这些小部件设计为高度可定制，并提供了多种功能来增强您的应用程序的用户体验。无论您是在寻找简单的图表小部件还是复杂的数据表小部件，您都可以在这里找到完美的解决方案。

安装

您可以通过composer安装此包

composer require eightynine/filament-advanced-widgets

使用方法

高级统计数据概览小部件

此包包含一个“高级统计数据概览”。它与统计数据概览小部件相同，但有一些额外的功能。

首先使用以下命令创建小部件：

php artisan make:filament-advanced-widget AdvancedStatsOverviewWidget --advanced-stats-overview

此命令将创建一个新的StatsOverview.php文件。打开它，并从getStats()方法返回Stat实例。以下是一个示例小部件

use EightyNine\FilamentAdvancedWidget\AdvancedStatsOverviewWidget as BaseWidget;
use EightyNine\FilamentAdvancedWidget\AdvancedStatsOverviewWidget\Stat;

class GeneralStatsOverviewWidget extends BaseWidget
{
    protected static ?string $pollingInterval = null;

    protected function getStats(): array
    {
        return [
            Stat::make('Total Users', "124k")->icon('heroicon-o-user')
                ->backgroundColor('info')
                ->progress(69)
                ->progressBarColor('success')
                ->iconBackgroundColor('success')
                ->chartColor('success')
                ->iconPosition('start')
                ->description('The users in this period')
                ->descriptionIcon('heroicon-o-chevron-up', 'before')
                ->descriptionColor('success')
                ->iconColor('success'),
            Stat::make('Total Posts', "1.2k")->icon('heroicon-o-newspaper')
                ->description('The posts in this period')
                ->descriptionIcon('heroicon-o-chevron-up', 'before')               
                ->descriptionColor('primary')
                ->iconColor('warning'),
            Stat::make('Total Comments', "23.4k")->icon('heroicon-o-chat-bubble-left-ellipsis')
                ->description("The comments in this period")
                ->descriptionIcon('heroicon-o-chevron-down', 'before')
                ->descriptionColor('danger')
                ->iconColor('danger')
        ];
    }
}

定制

统计数据概览小部件高度可定制。您可以自定义每个统计数据的颜色、图标和描述。您还可以自定义进度条的背景颜色和图标位置。此包提供了一套预定义的颜色和图标，您可以使用。您还可以创建自己的颜色和图标。

use EightyNine\FilamentAdvancedWidget\AdvancedStatsOverviewWidget\Stat;

Stat::make('Total Users', "124k")
    ->icon('heroicon-o-user')                             // The icon to display on stat
    ->backgroundColor('info')                             // The background color of the stat
    ->progress(69)                                        // Shows progress bar below the stat(0-100)
    ->progressBarColor('success')                         // The color of the progress bar    
    ->iconBackgroundColor('success')                      // The background color of the icon
    ->labelColor('success')                               // The color of the label
    ->textColor('success', 'success', 'info')             // The color of the text(label, value, description)
    ->valueColor('success')                               // The color of the value
    ->chartColor('success')                               // The color of the chart
    ->iconPosition('start')                               // The position of the icon (start, end)
    ->description('The users in this period')             // The description of the stat
    ->descriptionIcon('heroicon-o-chevron-up', 'before')  // The icon to display next with the description (before, after)
    ->descriptionColor('success')                         // The color of the description
    ->iconColor('success')                                // The color of the icon
    ->chart([12,34,22,11])                                // The data for the chart on the stat
    ...                                                   // YOu can use the default filament customizations

高级图表小部件

此包包含一个“高级图表”。它与图表小部件相同，但有一些额外的功能。

首先使用以下命令创建小部件：

php artisan make:filament-advanced-widget AdvancedChartWidget --advanced-chart

此命令将创建一个新的AdvancedChartWidget.php文件。以下是一个示例小部件

use EightyNine\FilamentAdvancedWidget\AdvancedChartWidget;

class MonthlyUsersChart extends AdvancedChartWidget
{

    protected static ?string $heading = '187.2k';
    protected static string $color = 'info';
    protected static ?string $icon = 'heroicon-o-chart-bar';
    protected static ?string $iconColor = 'info';
    protected static ?string $iconBackgroundColor = 'info';
    protected static ?string $label = 'Monthly users chart';

    protected static ?string $badge = 'new';
    protected static ?string $badgeColor = 'success';
    protected static ?string $badgeIcon = 'heroicon-o-check-circle';
    protected static ?string $badgeIconPosition = 'after';
    protected static ?string $badgeSize = 'xs';


    public ?string $filter = 'today';

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

    protected function getData(): array
    {
        return [
            'datasets' => [
                [
                    'label' => 'Blog posts created',
                    'data' => [0, 10, 5, 2, 21, 32, 45, 74, 65, 45, 77, 89],
                ],
            ],
            'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        ];
    }

    protected function getType(): string
    {
        return 'line';
    }
}

定制

图表小部件高度可定制。以下是一些可用的自定义选项

protected static ?string $heading = '187.2k';                       // The heading of the chart
protected static string $color = 'info';                            // The color of the chart
protected static ?string $icon = 'heroicon-o-chart-bar';            // The icon to display on the chart
protected static ?string $iconColor = 'info';                       // The color of the icon
protected static ?string $iconBackgroundColor = 'info';             // The background color of the icon
protected static ?string $label = 'Monthly users chart';            // The label of the chart
protected static ?string $badge = 'new';                            // The badge to display on the chart
protected static ?string $badgeColor = 'success';                   // The color of the badge
protected static ?string $badgeIcon = 'heroicon-o-check-circle';    // The icon to display on the badge
protected static ?string $badgeIconPosition = 'after';              // The position of the icon on the badge (before, after)
protected static ?string $badgeSize = 'xs';                         // The size of the badge

高级数据表小部件

目前，数据表小部件尚未完全可定制。这是一个正在进行中的工作。

变更日志

请参阅变更日志了解最近有哪些变化。

贡献

请参阅贡献指南了解详细信息。

安全漏洞

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

鸣谢

许可

MIT 许可证 (MIT)。请参阅许可文件了解更多信息。

eightynine / filament-advanced-widgets

维护者

详细信息