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)
make(Closure|string $label)
make(Closure|string $label)
make(Closure|string $label)
make(Closure|string $label)
The value()
method allows you to specify a value for a metric.
value(int|string|float|Closure $value)
value(int|string|float|Closure $value)
value(int|string|float|Closure $value)
value(int|string|float|Closure $value)
value(int|string|float|Closure $value)
use MoonShine\Metrics\ValueMetric;
public function components(): array
{
return [
ValueMetric::make('Completed orders')
->value(Order::completed()->count())
];
}
use MoonShine\Metrics\ValueMetric;
//...
public function components(): array
{
return [
ValueMetric::make('Completed orders')
->value(Order::completed()->count())
];
}
//...
use MoonShine\Metrics\ValueMetric;
//...
public function components(): array
{
return [
ValueMetric::make('Completed orders')
->value(Order::completed()->count())
];
}
//...
use MoonShine\Metrics\ValueMetric;
//...
public function components(): array
{
return [
ValueMetric::make('Completed orders')
->value(Order::completed()->count())
];
}
//...
use MoonShine\Metrics\ValueMetric;
//...
public function components(): array
{
return [
ValueMetric::make('Completed orders')
->value(Order::completed()->count())
];
}
//...

The progress()
method allows you to display a progress indicator for achieving a goal in a metric.
progress(int|float|Closure $target)
progress(int|float|Closure $target)
progress(int|float|Closure $target)
progress(int|float|Closure $target)
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())
];
}
use MoonShine\Metrics\ValueMetric;
//...
public function components(): array
{
return [
ValueMetric::make('Open tasks')
->value(Task::opened()->count())
->progress(Task::count())
];
}
//...
use MoonShine\Metrics\ValueMetric;
//...
public function components(): array
{
return [
ValueMetric::make('Open tasks')
->value(Task::opened()->count())
->progress(Task::count())
];
}
//...
use MoonShine\Metrics\ValueMetric;
//...
public function components(): array
{
return [
ValueMetric::make('Open tasks')
->value(Task::opened()->count())
->progress(Task::count())
];
}
//...
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.

The valueFormat()
method allows you to format the metric value and add a prefix and suffix.
valueFormat(string|Closure $value)
valueFormat(string|Closure $value)
valueFormat(string|Closure $value)
valueFormat(string|Closure $value)
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))
];
}
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))
];
}
//...
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))
];
}
//...
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))
];
}
//...
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))
];
}
//...

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')
];
}
use MoonShine\Metrics\ValueMetric;
//...
public function components(): array
{
return [
ValueMetric::make('Orders')
->value(Order::count())
->icon('heroicons.shopping-bag')
];
}
//...
use MoonShine\Metrics\ValueMetric;
//...
public function components(): array
{
return [
ValueMetric::make('Orders')
->value(Order::count())
->icon('heroicons.shopping-bag')
];
}
//...
use MoonShine\Metrics\ValueMetric;
//...
public function components(): array
{
return [
ValueMetric::make('Orders')
->value(Order::count())
->icon('heroicons.shopping-bag')
];
}
//...
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.

Method columnSpan()
allows you to set the block width in the Grid grid.
columnSpan(
int $columnSpan,
int $adaptiveColumnSpan = 12
)
columnSpan(
int $columnSpan,
int $adaptiveColumnSpan = 12
)
columnSpan(
int $columnSpan,
int $adaptiveColumnSpan = 12
)
columnSpan(
int $columnSpan,
int $adaptiveColumnSpan = 12
)
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)
])
];
}
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)
])
];
}
//...
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)
])
];
}
//...
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)
])
];
}
//...
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)
])
];
}
//...
