fidum/laravel-dashboard-chart-tile

Laravel仪表板的通用图表组件

6.1.0 2024-03-13 13:00 UTC

This package is auto-updated.

Last update: 2024-09-13 14:13:10 UTC


README

Latest Version on Packagist GitHub Workflow Status (with branch) Codecov Twitter Follow

使用这个易于使用的组件展示您的图表技能。支持线形、柱形、饼形、环形等多种图表!

Preview

安装

您可以通过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.jsLaravel 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 秒)

示例

我们提供了一些图表工厂示例来帮助您开始,您可以在此处找到这些示例:[链接](https://github.com/fidum/laravel-dashboard-chart-tile/blob/HEAD/examples)。您可以使用以下仪表板布局来立即展示这些示例。

<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

变更日志

请参阅变更日志以获取有关最近更改的更多信息。

贡献

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

安全性

如果您发现任何安全相关的问题,请通过 :author_email 发送电子邮件,而不是使用问题跟踪器。

鸣谢

许可协议

MIT许可协议(MIT)。有关更多信息,请参阅许可文件