Метрика ValueMetric
предназначена для отображения значения. Например, сколько записей в таблице.
make(Closure|string $label)
make(Closure|string $label)
make(Closure|string $label)
make(Closure|string $label)
make(Closure|string $label)
use MoonShine\UI\Components\Metrics\Wrapped\ValueMetric;
ValueMetric::make('Completed orders')
->value(fn() => Order::completed()->count())
use MoonShine\UI\Components\Metrics\Wrapped\ValueMetric;
ValueMetric::make('Completed orders')
->value(fn() => Order::completed()->count())
use MoonShine\UI\Components\Metrics\Wrapped\ValueMetric;ValueMetric::make('Completed orders') ->value(fn() => Order::completed()->count())
use MoonShine\UI\Components\Metrics\Wrapped\ValueMetric;
ValueMetric::make('Completed orders')
->value(fn() => Order::completed()->count())
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"
/>
<x-moonshine::metrics.value
title="Completed orders"
icon="shopping-bag"
:value="$count"
:progress="false"
/>
<x-moonshine::metrics.value title="Completed orders" icon="shopping-bag" :value="$count" :progress="false"/>
<x-moonshine::metrics.value
title="Completed orders"
icon="shopping-bag"
:value="$count"
:progress="false"
/>
<x-moonshine::metrics.value title="Completed orders" icon="shopping-bag" :value="$count" :progress="false"/>
Метод 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)
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())
];
}
use MoonShine\UI\Components\Metrics\Wrapped\ValueMetric;
// ...
protected function components(): iterable
{
return [
ValueMetric::make('Completed orders')
->value(fn(): int => Order::completed()->count())
];
}
use MoonShine\UI\Components\Metrics\Wrapped\ValueMetric;
// ...
protected function components(): iterable
{
return [
ValueMetric::make('Completed orders')
->value(fn(): int => Order::completed()->count())
];
}
use MoonShine\UI\Components\Metrics\Wrapped\ValueMetric;
// ...
protected function components(): iterable
{
return [
ValueMetric::make('Completed orders')
->value(fn(): int => Order::completed()->count())
];
}
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)
progress(int|float|Closure $target)
progress(int|float|Closure $target)
progress(int|float|Closure $target)
progress(int|float|Closure $target)
ValueMetric::make('Open tasks')
->value(fn(): int => Task::opened()->count())
->progress(fn(): int => Task::count())
ValueMetric::make('Open tasks')
->value(fn(): int => Task::opened()->count())
->progress(fn(): int => Task::count())
ValueMetric::make('Open tasks')
->value(fn(): int => Task::opened()->count())
->progress(fn(): int => Task::count())
ValueMetric::make('Open tasks')
->value(fn(): int => Task::opened()->count())
->progress(fn(): int => Task::count())
ValueMetric::make('Open tasks')
->value(fn(): int => Task::opened()->count())
->progress(fn(): int => Task::count())
При использовании прогресс-бара в метод value()
необходимо передавать числовое значение или замыкание, которое вернет число.
Метод valueFormat()
позволяет отформатировать значение метрики и добавить префикс и суффикс.
valueFormat(string|Closure $value)
valueFormat(string|Closure $value)
valueFormat(string|Closure $value)
valueFormat(string|Closure $value)
valueFormat(string|Closure $value)
ValueMetric::make('Profit')
->value(fn(): int => Order::completed()->sum('price'))
->valueFormat(fn(int $value): string => \Illuminate\Support\Number::forHumans($value))
ValueMetric::make('Profit')
->value(fn(): int => Order::completed()->sum('price'))
->valueFormat(fn(int $value): string => \Illuminate\Support\Number::forHumans($value))
ValueMetric::make('Profit')
->value(fn(): int => Order::completed()->sum('price'))
->valueFormat(fn(int $value): string => \Illuminate\Support\Number::forHumans($value))
ValueMetric::make('Profit')
->value(fn(): int => Order::completed()->sum('price'))
->valueFormat(fn(int $value): string => \Illuminate\Support\Number::forHumans($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')
ValueMetric::make('Orders')
->value(fn(): int => Order::count())
->icon('shopping-bag')
ValueMetric::make('Orders')
->value(fn(): int => Order::count())
->icon('shopping-bag')
ValueMetric::make('Orders')
->value(fn(): int => Order::count())
->icon('shopping-bag')
ValueMetric::make('Orders')
->value(fn(): int => Order::count())
->icon('shopping-bag')
Для более подробной информации обратитесь к разделу Иконки.
Метод columnSpan()
позволяет установить ширину блока в сетке 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
- актуально для десктопной версии,
$adaptiveColumnSpan
- актуально для мобильной версии.
Пакет устанавливается отдельно, основан на библиотеке ApexCharts library.
composer require moonshine/apexcharts
composer require moonshine/apexcharts
composer require moonshine/apexcharts
composer require moonshine/apexcharts
composer require moonshine/apexcharts
Подробнее в официальном репозитории ApexCharts.