README

使用 Google Charts 创建图表小部件。

安装

您可以通过 composer 将此包安装到使用 Filament 的 Laravel 应用中：

composer require arbermustafa/filament-google-charts-widgets

Filament V2 - 如果您正在使用 Filament v2.x，您可以使用本节

您可以使用以下命令发布配置文件：

php artisan vendor:publish --tag=filament-google-charts-widgets-config

配置文件包含默认的全局定制选项，以便在浅色/深色主题中更好地渲染图表，基于 Weekdone 的出色工作

可选地，您可以使用以下命令发布视图：

php artisan vendor:publish --tag=filament-google-charts-widgets-views

用法

饼图

use ArberMustafa\FilamentGoogleCharts\Widgets\PieChartWidget;

class DemoPieChart extends PieChartWidget
{
    protected static ?int $sort = 1;

    protected static ?array $options = [
        'legend' => [
            'position' => 'top',
            'alignment' => 'center',
        ],
        'height' => 400,
        'is3D' => false,
    ];

    protected function getHeading(): string
    {
        return 'Pie chart';
    }

    protected function getData(): array
    {
        return [
            ['Label', 'Aggregate'],
            ['Col1', 7.2],
            ['Col2', 23.7],
            ['Col3', 11.1],
        ];
    }
}

环形图

use ArberMustafa\FilamentGoogleCharts\Widgets\DonutChartWidget;

class DemoDonutChart extends DonutChartWidget
{
    protected static ?string $heading = 'Donut chart';

    protected static ?int $sort = 2;

    protected static ?float $pieHole = 0.5;

    protected static ?array $options = [
        'legend' => [
            'position' => 'top',
        ],
        'height' => 400,
    ];

    protected function getData(): array
    {
        return [
            ['Label', 'Aggregate'],
            ['Col1', 17.2],
            ['Col2', 23.7],
            ['Col3', 11.1],
        ];
    }
}

可用的图表类型

以下是一个可用的图表小部件类列表，您可以扩展这些类，以及它们对应的 Google Charts 文档页面，以获取灵感，了解从 getData() 返回的内容

ArberMustafa\FilamentGoogleCharts\Widgets\AreaChartWidget - Google Charts 文档
ArberMustafa\FilamentGoogleCharts\Widgets\BarChartWidget - Google Charts 文档
ArberMustafa\FilamentGoogleCharts\Widgets\ColumnChartWidget - Google Charts 文档
ArberMustafa\FilamentGoogleCharts\Widgets\DonutChartWidget - Google Charts 文档
ArberMustafa\FilamentGoogleCharts\Widgets\LineChartWidget - Google Charts 文档
ArberMustafa\FilamentGoogleCharts\Widgets\PieChartWidget - Google Charts 文档

实时更新（轮询）

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

要自定义此设置，您可以在类上覆盖 $pollingInterval 属性为新间隔

protected static ?string $pollingInterval = '10s';

或者，您可以选择完全禁用轮询

protected static ?string $pollingInterval = null;

图表配置选项

您可以在图表类上指定一个 $options 变量来控制 Google Charts 库提供的许多配置选项。例如，您可以为 PieChartWidget 类更改图例的位置并设置自定义高度

protected static ?array $options = [
        'legend' => [
            'position' => 'bottom',
        ],
        'height' => 300,
    ];

变更日志

请参阅 CHANGELOG 了解最近的变化。

贡献

如果您想为此包做出贡献，您可能想在真实的 Filament 项目中对其进行测试

将此存储库叉到您的 Github 账户。
在本地创建一个 Filament 应用。
在 Filament 应用根目录中克隆您的叉子。
在 /filament-google-charts-widgets 目录下，为您的修复/改进创建一个分支，例如 fix/pie-chart。

在您的应用的 composer.json 中安装这些包。

"require": {
    "arbermustafa/filament-google-charts-widgets": "dev-fix/pie-chart as dev-main",
},
"repositories": [
    {
        "type": "path",
        "url": "./filament-google-charts-widgets"
    }
]

现在运行 composer update。

有关详细信息，请参阅 CONTRIBUTING。

安全漏洞

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

鸣谢

许可证

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

arbermustafa / filament-google-charts-widgets

维护者

详细信息