Components

Metric Value

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) 
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)
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())
    ];
}
 
//...

value_metric value_metric_dark

Progress

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)
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.

value_metric_progress value_metric_progress_dark

Value Format

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)
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))
    ];
}
 
//...

value_metric_format value_metric_format_dark

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') ]; } 
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.

value_metric_icon value_metric_icon_dark

Block width

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 - 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)
        ])
    ];
}
 
//...

See the Decoration Layout section for more details.

value_metric_column_span value_metric_column_span_dark