Компоненты

Метрика Value

Создание

Метрика ValueMetric предназначена для отображения значения. Например, сколько записей в таблице.

Вы можете создать ValueMetric, используя статический метод make().

make(Closure|string $label)
make(Closure|string $label)

Метод value() позволяет указать значение для метрики.

value(int|string|float|Closure $value)
value(int|string|float|Closure $value)
use MoonShine\Metrics\ValueMetric;
 
//...
 
public function components(): array
{
    return [
        ValueMetric::make('Выполненные заказы')
            ->value(Order::completed()->count())
    ];
}
 
//...
use MoonShine\Metrics\ValueMetric;
 
//...
 
public function components(): array
{
    return [
        ValueMetric::make('Выполненные заказы')
            ->value(Order::completed()->count())
    ];
}
 
//...

Прогресс

Метод progress() позволяет отобразить индикатор прогресса достижения цели в метрике.

progress(int|float|Closure $target)
progress(int|float|Closure $target)
use MoonShine\Metrics\ValueMetric;
 
//...
 
public function components(): array
{
    return [
        ValueMetric::make('Открытые задачи')
            ->value(Task::opened()->count())
            ->progress(Task::count())
    ];
}
 
//...
use MoonShine\Metrics\ValueMetric;
 
//...
 
public function components(): array
{
    return [
        ValueMetric::make('Открытые задачи')
            ->value(Task::opened()->count())
            ->progress(Task::count())
    ];
}
 
//...

При использовании прогресс-бара в метод value() необходимо передавать числовое значение или замыкание, которое вернет число.

Формат значения

Метод valueFormat() позволяет отформатировать значение метрики и добавить префикс и суффикс.

valueFormat(string|Closure $value)
valueFormat(string|Closure $value)
use MoonShine\Metrics\ValueMetric;
 
//...
 
public function components(): array
{
    return [
        ValueMetric::make('Прибыль')
            ->value(Order::completed()->sum('price'))
            ->valueFormat(fn($value) => \Illuminate\Support\Number::forHumans($value))
    ];
}
 
//...
use MoonShine\Metrics\ValueMetric;
 
//...
 
public function components(): array
{
    return [
        ValueMetric::make('Прибыль')
            ->value(Order::completed()->sum('price'))
            ->valueFormat(fn($value) => \Illuminate\Support\Number::forHumans($value))
    ];
}
 
//...

Иконка

Метод icon() позволяет добавить иконку к метрике.

use MoonShine\Metrics\ValueMetric;
 
//...
 
public function components(): array
{
    return [
        ValueMetric::make('Заказы')
            ->value(Order::count())
            ->icon('heroicons.shopping-bag')
    ];
}
 
//...
use MoonShine\Metrics\ValueMetric;
 
//...
 
public function components(): array
{
    return [
        ValueMetric::make('Заказы')
            ->value(Order::count())
            ->icon('heroicons.shopping-bag')
    ];
}
 
//...

Для более подробной информации обратитесь к разделу Иконки.

Ширина блока

Метод columnSpan() позволяет установить ширину блока в сетке Grid.

columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)
columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)
  • $columnSpan - актуально для десктопной версии,
  • $adaptiveColumnSpan - актуально для мобильной версии.
use App\Models\Article;
use MoonShine\Decorations\Grid;
use MoonShine\Metrics\ValueMetric;
 
//...
 
public function components(): array
{
    return [
        Grid::make([
            ValueMetric::make('Статьи')
                ->value(Article::count())
                ->columnSpan(6),
            ValueMetric::make('Комментарии')
                ->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('Статьи')
                ->value(Article::count())
                ->columnSpan(6),
            ValueMetric::make('Комментарии')
                ->value(Comment::count())
                ->columnSpan(6)
        ])
    ];
}
 
//...

Подробнее смотрите в разделе Decoration Layout.