Stars: 149
Forks: 7
Pull Requests: 13
Issues: 12
Watchers: 5
Last Updated: 2023-02-08 02:47:07
Create all the charts you want for your laravel dashboard
License: MIT License
Languages: PHP, Blade
Show off your charting skills with this easy to use tile. Supports line, bar, pie, doughnut and many more!
You can install the package via composer:
composer require fidum/laravel-dashboard-chart-tile
In the dashboard
config file, you can optionally add this configuration in the tiles
key.
// in config/dashboard.php
return [
// ...
'tiles' => [
'charts' => [
'refresh_interval_in_seconds' => 300, // Default: 300 seconds (5 minutes)
],
],
];
This tile uses chart.js
to render the charts with the help of Laravel Charts
package see links to
documentation for both below:
So that you can easily add your datasets and configure your charts exactly how you want them you need to create
a chart class that implements the Fidum\ChartTile\Contracts\ChartFactory
interface.
See chart example below:
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;
}
}
In your dashboard view you can use the below component as many times as needed. Pass your chart class reference to the component and that will be used to generate the chart.
<x-dashboard>
<livewire:chart-tile chartFactory="{{App\Charts\DailyUsersChart::class}}" position="a1:a3" />
</x-dashboard>
chartFilters
optional key value array of settings that is passed to your chart static::make
method.
Only use this for passing simple values strings
, integers
, arrays
etc.
To use this you will have to use @livewire
syntax over the component syntax in order set the array value.@livewire('chart-tile', [
'chartFactory' => App\Charts\DailyUsersChart::class,
'chartFilters' => ['type' => 'customer'],
])
height
sets the height of the chart, depending on your dashboard layout you may need to adjust this (defaults to 100%
).
refreshIntervalInSeconds
use this to override the refresh rate of an individual tile (defaults to 300
seconds)
We have provided some chart factory examples to help get you started here. You can use the below dashboard layout to have an instant showcase of these 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
Please see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
If you discover any security related issues, please email :author_email instead of using the issue tracker.
The MIT License (MIT). Please see License File for more information.