Make
The ValueMetric
metric is designed to display a value. For example, how many records are in the table.
You can create a ValueMetric
using the static make()
method.
make(Closure|string $label)
The value()
method allows you to specify a value for a metric.
value(int|string|float|Closure $value)
use MoonShine\Metrics\ValueMetric; //... public function components(): array{ return [ ValueMetric::make('Completed orders') ->value(Order::completed()->count()) ];} //...
Progress
The progress()
method allows you to display a progress indicator for achieving a goal in a metric.
progress(int|float|Closure $target)
use MoonShine\Metrics\ValueMetric; //... public function components(): array{ return [ ValueMetric::make('Open tasks') ->value(Task::opened()->count()) ->progress(Task::count()) ];} //...
When using a progress bar, the value()
method must be passed a numeric value or a closure that will return a number.
Value Format
The valueFormat()
method allows you to format the metric value and add a prefix and suffix.
valueFormat(string|Closure $value)
use MoonShine\Metrics\ValueMetric; //... public function components(): array{ return [ ValueMetric::make('Profit') ->value(Order::completed()->sum('price')) ->valueFormat(fn($value) => \Illuminate\Support\Number::forHumans($value)) ];} //...
Icon
The icon()
method allows you to add an icon to the metric.
use MoonShine\Metrics\ValueMetric; //... public function components(): array{ return [ ValueMetric::make('Orders') ->value(Order::count()) ->icon('heroicons.shopping-bag') ];} //...
For more detailed information, please refer to the section Icons.
Block width
Method columnSpan()
allows you to set the block width in the Grid grid.
columnSpan( int $columnSpan, int $adaptiveColumnSpan = 12)
-
$columnSpan
- relevant for desktop -
$adaptiveColumnSpan
- relevant for mobile version.
use App\Models\Article;use MoonShine\Decorations\Grid;use MoonShine\Metrics\ValueMetric; //... public function components(): array{ return [ Grid::make([ ValueMetric::make('Articles') ->value(Article::count()) ->columnSpan(6), ValueMetric::make('Comments') ->value(Comment::count()) ->columnSpan(6) ]) ];} //...
See the Decoration Layout section for more details.