This commit is contained in:
Dan Harrin
2023-01-07 13:38:25 +06:00
parent ff84b7ca39
commit 93eba6e4a1
21 changed files with 105 additions and 74 deletions
+2 -2
View File
@@ -635,13 +635,13 @@ public function table(Table $table): Table
## Introducing widgets
Filament has "widgets" - which are components that you can use to display information, especially statistics. Widgets typically get added to the Dashboard of the app, but you can add them to any page you wish, including resource pages. Filament includes built-in widgets, like the [stats widget](../dashboard/stats) to render important statistics in a simple card, [chart widget](../dashboard/charts) which can render an interactive chart, and [table widget](../dashboard/tables) which allows you to easily embed the table builder.
Filament has "widgets" - which are components that you can use to display information, especially statistics. Widgets typically get added to the Dashboard of the app, but you can add them to any page you wish, including resource pages. Filament includes built-in widgets, like the [stats widget](../widgets/stats) to render important statistics in a simple card, [chart widget](../dashboard/charts) which can render an interactive chart, and [table widget](../app/dashboard#table-widgets) which allows you to easily embed the table builder.
In our system, we could add statistics for the type of patient, as well as treatments that are administered over time.
### Creating a stats widget
Let's create a [stats widget](../dashboard/stats) to render patient types:
Let's create a [stats widget](../widgets/stats) to render patient types:
```bash
php artisan make:filament-widget PatientTypeOverview --stats-overview
+1 -1
View File
@@ -128,7 +128,7 @@ protected function getHeaderWidgetsColumns(): int | array
}
```
This pairs well with [responsive widget widths](dashboard/getting-started#responsive-widget-widths).
This pairs well with [responsive widget widths](dashboard#responsive-widget-widths).
## Customization
@@ -4,19 +4,11 @@ title: Getting started
Filament allows you to build dynamic dashboards, comprised of "widget" cards, very easily.
Widgets are pure [Livewire](https://laravel-livewire.com) components, so may use any features of that package.
To learn how to use widgets, you should visit the [widgets documentation](../widgets/overview). There, you will find a list of [available widgets](../widgets/overview#available-widgets) that you can add to your app, and details on how to build custom widgets.
Widgets may also be used on [resource pages](../resources/widgets) or other [custom pages](../pages#widgets).
You may also [create your own custom widgets](#custom-widgets) which can then have a consistent design with Filament's pre-built widgets.
## Available widgets
Filament ships with a few pre-built widgets, as well as the ability to create [custom widgets](#custom-widgets):
- [Stats](stats) widgets display any data, often numeric data, within cards in a row.
- [Chart](charts) widgets display numeric data in a visual chart.
- [Table](tables) widgets render data in a table, which supports sorting, searching, filtering, actions, and everything else included within the [table builder](../../tables).
You may also [create your own custom widgets](#custom-widgets).
The following document will explain how to use these widgets to assemble a dashboard using the app framework.
## Sorting widgets
@@ -89,17 +81,16 @@ public static function canView(): bool
}
```
## Disabling the default widgets
## Table widgets
By default, two widgets are displayed on the dashboard. These widgets can be disabled by updating the `widgets.register` property of the [configuration](installation#publishing-configuration) file:
You may easily add tables to your dashboard. Start by creating a widget with the command:
```php
'widgets' => [
// ...
'register' => [],
],
```bash
php artisan make:filament-widget LatestOrders --table
```
You may now [customize the table](../tables/getting-started) by editing the widget file.
## Custom widgets
To get started building a `BlogPostsOverview` widget:
@@ -110,6 +101,17 @@ php artisan make:filament-widget BlogPostsOverview
This command will create two files - a widget class in the `/Widgets` directory of the Filament directory, and a view in the `/widgets` directory of the Filament views directory.
## Disabling the default widgets
By default, two widgets are displayed on the dashboard. These widgets can be disabled by updating the `widgets.register` property of the [configuration](installation#publishing-configuration) file:
```php
'widgets' => [
// ...
'register' => [],
],
```
## Customizing the dashboard page
If you want to customize the dashboard class, for example to [change the number of widget columns](#customizing-widget-width), create a new file at `app/Filament/Pages/Dashboard.php`:
@@ -135,3 +137,13 @@ Finally, remove the original `Dashboard` class from the [configuration file](ins
'register' => [],
],
```
### Creating more than one dashboard
If you want to create more than one dashboard, you can do so by repeating the process described above. Creating new pages that extend the `Dashboard` class will allow you to create as many dashboards as you need.
You may change the title of the dashboard by overriding the `$title` property:
```php
protected static ?string $title = 'Finance dashboard';
```
@@ -1,46 +0,0 @@
---
title: Tables
---
Filament comes with a "table" widget template, which you can use to display a table of data without needing to write a custom view.
Start by creating a widget with the command:
```bash
php artisan make:filament-widget LatestOrders --table
```
Then update the `getTableQuery()` and `getTableColumns()` methods to return the data query and columns you want to display:
```php
<?php
namespace App\Filament\Widgets;
use App\Models\Order;
use Closure;
use Filament\Tables;
use Filament\Widgets\TableWidget as BaseWidget;
use Illuminate\Database\Eloquent\Builder;
class LatestOrders extends BaseWidget
{
protected function getTableQuery(): Builder
{
return Order::query()->latest();
}
protected function getTableColumns(): array
{
return [
Tables\Columns\TextColumn::make('id'),
Tables\Columns\TextColumn::make('customer.name')
->label('Customer'),
];
}
}
```
Now, check out your widget in the dashboard.
Table widgets support all features of the [Table Builder](../../tables), including [filters](../../tables/filters) and [actions](../../tables/actions).
@@ -4,11 +4,13 @@ namespace Filament\Resources\Pages;
use Filament\Actions\Action;
use Filament\Actions\ActionGroup;
use Filament\Actions\Contracts\HasActions;
use Filament\Actions\DeleteAction;
use Filament\Actions\ForceDeleteAction;
use Filament\Actions\ReplicateAction;
use Filament\Actions\RestoreAction;
use Filament\Actions\ViewAction;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Filament\Notifications\Notification;
use Filament\Pages\Concerns\InteractsWithFormActions;
+1 -1
View File
@@ -2,7 +2,7 @@
title: Getting started
---
Filament's table package allows you to [add an interactive datatable to any Livewire component](adding-a-table-to-a-livewire-component). It's also used within other Filament packages, such as the [app framework](../app) for displaying [app resources](../app/resources) and [relation managers](../app/resources/relation-managers), as well as for the [table widget](../widgets/table). Learning the feature's of the table builder will be incredibly time-saving when both building your own custom Livewire tables and using Filament's other packages.
Filament's table package allows you to [add an interactive datatable to any Livewire component](adding-a-table-to-a-livewire-component). It's also used within other Filament packages, such as the [app framework](../app) for displaying [app resources](../app/resources) and [relation managers](../app/resources/relation-managers), as well as for the [table widget](../app/dashboard#table-widgets). Learning the feature's of the table builder will be incredibly time-saving when both building your own custom Livewire tables and using Filament's other packages.
This guide will walk you through the basics of building tables with Filament's table package. If you're planning to add a new table to your own Livewire component, you should [do that first](adding-a-table-to-a-livewire-component) and then come back. If you're adding a table to an [app resource](../app/resources), or another Filament package, you're ready to go!
+12
View File
@@ -0,0 +1,12 @@
---
title: Overview
---
Widgets are pre-built [Laravel Livewire](https://laravel-livewire.com) components that allow you to quickly assemble interactive dashboards for your application.
## Available widgets
Filament ships with these widgets:
- [Stats overview](stats-overview) widgets display any data, often numeric data, within cards in a row.
- [Chart](charts) widgets display numeric data in a visual chart.
@@ -1,5 +1,5 @@
---
title: Stats
title: Stats overview widgets
---
## Getting started
@@ -1,5 +1,5 @@
---
title: Charts
title: Chart widgets
---
## Getting started
@@ -0,0 +1,11 @@
---
title: Adding a widget to a Blade view
---
Since widgets are Livewire components, you can easily render a widget in any Blade view using the `@livewire` directive:
```blade
<div>
@livewire(\App\Http\Livewire\Dashboard\PostsChart::class)
</div>
```
+3
View File
@@ -2,6 +2,9 @@
namespace Filament\Widgets;
/**
* @deprecated Extend `ChartWidget` instead and define the `getType()` method.
*/
class BarChartWidget extends ChartWidget
{
protected function getType(): string
@@ -2,6 +2,9 @@
namespace Filament\Widgets;
/**
* @deprecated Extend `ChartWidget` instead and define the `getType()` method.
*/
class BubbleChartWidget extends ChartWidget
{
protected function getType(): string
+3 -1
View File
@@ -2,7 +2,7 @@
namespace Filament\Widgets;
class ChartWidget extends Widget
abstract class ChartWidget extends Widget
{
use Concerns\CanPoll;
@@ -34,6 +34,8 @@ class ChartWidget extends Widget
$this->dataChecksum = $this->generateDataChecksum();
}
abstract protected function getType(): string;
protected function generateDataChecksum(): string
{
return md5(json_encode($this->getCachedData()));
@@ -133,7 +133,16 @@ class MakeWidgetCommand extends Command
$this->copyStubToApp('ChartWidget', $path, [
'class' => $widgetClass,
'namespace' => filled($resource) ? "{$resourceNamespace}\\{$resource}\\Widgets" . ($widgetNamespace !== '' ? "\\{$widgetNamespace}" : '') : $namespace . ($widgetNamespace !== '' ? "\\{$widgetNamespace}" : ''),
'chart' => Str::studly($chart),
'type' => match ($chart) {
'Bar chart' => 'bar',
'Bubble chart' => 'bubble',
'Doughnut chart' => 'doughnut',
'Line chart' => 'line',
'Pie chart' => 'pie',
'Polar area chart' => 'polarArea',
'Radar chart' => 'radar',
'Scatter chart' => 'scatter',
},
]);
} elseif ($this->option('table')) {
$this->copyStubToApp('TableWidget', $path, [
@@ -2,6 +2,9 @@
namespace Filament\Widgets;
/**
* @deprecated Extend `ChartWidget` instead and define the `getType()` method.
*/
class DoughnutChartWidget extends ChartWidget
{
protected function getType(): string
+3
View File
@@ -2,6 +2,9 @@
namespace Filament\Widgets;
/**
* @deprecated Extend `ChartWidget` instead and define the `getType()` method.
*/
class LineChartWidget extends ChartWidget
{
protected function getType(): string
+3
View File
@@ -2,6 +2,9 @@
namespace Filament\Widgets;
/**
* @deprecated Extend `ChartWidget` instead and define the `getType()` method.
*/
class PieChartWidget extends ChartWidget
{
protected function getType(): string
@@ -2,6 +2,9 @@
namespace Filament\Widgets;
/**
* @deprecated Extend `ChartWidget` instead and define the `getType()` method.
*/
class PolarAreaChartWidget extends ChartWidget
{
protected function getType(): string
@@ -2,6 +2,9 @@
namespace Filament\Widgets;
/**
* @deprecated Extend `ChartWidget` instead and define the `getType()` method.
*/
class RadarChartWidget extends ChartWidget
{
protected function getType(): string
@@ -2,6 +2,9 @@
namespace Filament\Widgets;
/**
* @deprecated Extend `ChartWidget` instead and define the `getType()` method.
*/
class ScatterChartWidget extends ChartWidget
{
protected function getType(): string
+7 -2
View File
@@ -2,9 +2,9 @@
namespace {{ namespace }};
use Filament\Widgets\{{ chart }}Widget;
use Filament\Widgets\ChartWidget;
class {{ class }} extends {{ chart }}Widget
class {{ class }} extends ChartWidget
{
protected static ?string $heading = 'Chart';
@@ -14,4 +14,9 @@ class {{ class }} extends {{ chart }}Widget
//
];
}
protected function getType(): string
{
return '{{ type }}';
}
}