Компоненты

Метрики

Значение

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

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"
/>

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

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() позволяет отобразить индикатор прогресса достижения цели в метрике.

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

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

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

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

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() позволяет добавить иконку к метрике.

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

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

Ширина блока

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

columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)
  • $columnSpan - актуально для десктопной версии,
  • $adaptiveColumnSpan - актуально для мобильной версии.

Line/Donut

Пакет устанавливается отдельно, основан на библиотеке ApexCharts library.

composer require moonshine/apexcharts

Подробнее в официальном репозитории ApexCharts.