Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fidum/laravel-dashboard-chart-tile
Create all the charts you want for your laravel dashboard
https://github.com/fidum/laravel-dashboard-chart-tile
chart dashboard laravel laravel-framework spatie tile
Last synced: 27 days ago
JSON representation
Create all the charts you want for your laravel dashboard
- Host: GitHub
- URL: https://github.com/fidum/laravel-dashboard-chart-tile
- Owner: fidum
- License: mit
- Created: 2020-05-14T09:50:39.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-13T13:08:48.000Z (8 months ago)
- Last Synced: 2024-05-01T18:45:01.528Z (6 months ago)
- Topics: chart, dashboard, laravel, laravel-framework, spatie, tile
- Language: PHP
- Homepage: https://github.com/spatie/laravel-dashboard
- Size: 491 KB
- Stars: 159
- Watchers: 5
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Laravel Dashboard Charting Tile
[](https://packagist.org/packages/fidum/laravel-dashboard-chart-tile)
[](https://github.com/fidum/laravel-dashboard-chart-tile/actions?query=workflow%3Arun-tests+branch%3Amaster)
[](https://codecov.io/gh/fidum/laravel-dashboard-chart-tile)
[](https://twitter.com/danmasonmp)
Show off your charting skills with this easy to use tile. Supports line, bar, pie, doughnut and many more!
## Installation
You can install the package via composer:
```bash
composer require fidum/laravel-dashboard-chart-tile
```
## Usage
In the `dashboard` config file, you can optionally add this configuration in the `tiles` key.
```php
// 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:
- [Laravel Charts Documentation](https://charts.erik.cat/)
- [Chart.js Documentation](https://www.chartjs.org/docs/latest/charts/)
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:
```php
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.
```blade
```
### Optional properties:
- `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.
```blade
@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)
## Examples
We have provided some chart factory examples to help get you started [here](examples).
You can use the below dashboard layout to have an instant showcase of these examples:
```blade
```
## Testing
```bash
composer test
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
## Security
If you discover any security related issues, please email :author_email instead of using the issue tracker.
## Credits
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.