nggiahao / laravel-dashboard-chart-tile
适用于laravel仪表板的通用图表瓷砖
dev-main
2023-11-21 02:56 UTC
Requires
- php: ^7.4|^8.0
- consoletvs/charts: ^6.6.0
- spatie/laravel-dashboard: ^3.0.2
Requires (Dev)
- mockery/mockery: ^1.4
- nunomaduro/laravel-mojito: ^0.2.6
- orchestra/testbench: ^6.0|^7.0|^8.0
- phpunit/phpunit: ^9.3
- vimeo/psalm: ^4.3
This package is auto-updated.
Last update: 2024-09-21 04:52:13 UTC
README
使用这个易于使用的瓷砖展示您的图表技能。支持折线图、柱状图、饼图、环形图等更多图表!
安装
您可以通过composer安装此包
composer require fidum/laravel-dashboard-chart-tile
使用方法
在 dashboard
配置文件中,您可以选择在 tiles
键中添加此配置。
// in config/dashboard.php return [ // ... 'tiles' => [ 'charts' => [ 'refresh_interval_in_seconds' => 300, // Default: 300 seconds (5 minutes) ], ], ];
此瓷砖使用 chart.js
与 Laravel Charts
包一起渲染图表,请参阅以下链接以获取有关两者的文档。
为了您能轻松添加数据集并配置图表,您需要创建一个实现 Fidum\ChartTile\Contracts\ChartFactory
接口的图表类。
以下是一个图表示例
namespace App\Charts; use Carbon\Carbon; use Fidum\ChartTile\Charts\Chart; use Fidum\ChartTile\Contracts\ChartFactory; class ExampleBarChart implements ChartFactory { public static function make(array $settings): ChartFactory { return new static; } public function chart(): Chart { $date = Carbon::now()->subMonth()->startOfDay(); $data = collect(range(0, 12))->map(function ($days) use ($date) { return [ 'x' => $date->clone()->addDays($days)->toDateString(), 'y' => rand(100, 500), ]; }); $chart = (new Chart) ->labels($data->pluck('x')->toArray()) ->options([ 'responsive' => true, 'maintainAspectRatio' => false, // etc... ], true); $chart->dataset('Example Data', 'bar', $data->toArray()) ->backgroundColor('#848584'); return $chart; } }
在您的仪表板视图中,您可以使用以下组件,根据需要多次使用。将图表类引用传递给组件,它将用于生成图表。
<x-dashboard> <livewire:chart-tile chartFactory="{{App\Charts\DailyUsersChart::class}}" position="a1:a3" /> </x-dashboard>
可选属性
chartFilters
是一个可选的键值数组,包含传递给您的图表static::make
方法的设置。 仅用于传递简单的值字符串
、整数
、数组
等。 要使用此功能,您必须使用@livewire
语法而不是组件语法来设置数组值。
@livewire('chart-tile', [ 'chartFactory' => App\Charts\DailyUsersChart::class, 'chartFilters' => ['type' => 'customer'], ])
-
height
设置图表的高度,根据您的仪表板布局,您可能需要调整此值(默认为100%
)。 -
refreshIntervalInSeconds
用于覆盖单个瓷砖的刷新速率(默认为300
秒)
示例
我们提供了一些图表工厂示例,以帮助您入门 在此。您可以使用以下仪表板布局立即展示这些示例
<x-dashboard> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExamplePieChart::class}}" position="a1:a2" height="140%"/> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleDoughnutChart::class}}" position="b1:b2" height="140%"/> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExamplePieChart::class}}" position="c1:c2" height="140%" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleDoughnutChart::class}}" position="d1:d2" height="140%" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleBarChart::class}}" position="a3:b4" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleLineChart::class}}" position="c3:d4" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleLineChart::class}}" position="a5:b6" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleBarChart::class}}" position="c5:d6" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleBarChart::class}}" position="a7:b8" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleLineChart::class}}" position="c7:d8" /> </x-dashboard>
测试
composer test
变更日志
请参阅 CHANGELOG 获取有关最近更改的更多信息。
贡献
请参阅 CONTRIBUTING 获取详细信息。
安全
如果您发现任何安全相关的问题,请通过 :author_email 发送电子邮件,而不是使用问题跟踪器。
致谢
许可证
MIT许可证(MIT)。请参阅 许可证文件 获取更多信息。