Components

Metrics

Value

The ValueMetric is designed to display a value. For example, how many records are in a table.

You can create a ValueMetric using the static method make().

make(Closure|string $label)
use MoonShine\UI\Components\Metrics\Wrapped\ValueMetric;
 
ValueMetric::make('Completed orders')->value(fn() => Order::completed()->count())
<x-moonshine::metrics.value
    title="Completed orders"
    icon="shopping-bag"
    :value="$count"
    :progress="false"
/>

The value() method allows you to specify the value for the metric.

value(int|string|float|Closure $value)
use MoonShine\UI\Components\Metrics\Wrapped\ValueMetric;
 
//...
 
protected function components(): iterable
{
    return [
        ValueMetric::make('Completed orders')->value(fn(): int => Order::completed()->count())
    ];
}
 
//...

Progress

The progress() method allows you to display a progress indicator for goal achievement in the metric.

progress(int|float|Closure $target)
ValueMetric::make('Open tasks')
    ->value(fn(): int => Task::opened()->count())
    ->progress(fn(): int => Task::count())

When using the progress bar, the value() method must receive a numeric value or a closure that returns a number.

Value Format

The valueFormat() method allows you to format the metric value and add a prefix and suffix.

valueFormat(string|Closure $value)
ValueMetric::make('Profit')
    ->value(fn(): int => Order::completed()->sum('price'))
    ->valueFormat(fn(int $value): string => \Illuminate\Support\Number::forHumans($value))

Icon

The icon() method allows you to add an icon to the metric.

ValueMetric::make('Orders')
    ->value(fn(): int => Order::count())
    ->icon('shopping-bag')

For more detailed information, refer to the Icons section.

Block Width

The columnSpan() method allows you to set the width of the block in the Grid layout.

columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)
  • $columnSpan - relevant for the desktop version,
  • $adaptiveColumnSpan - relevant for the mobile version.

Line/Donut

The package is installed separately and is based on the ApexCharts library

composer require moonshine/apexcharts

For more details, refer to the official ApexCharts repository.