Компоненты

Метрика Donut Chart

Создание

Метрика DonutChartMetric предназначена для создания круговых диаграмм (Donut charts).

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

make(Closure|string $label)

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

values(array|Closure $values)
use MoonShine\Metrics\DonutChartMetric;
 
//...
 
public function components(): array
{
    return [
        DonutChartMetric::make('Подписчики')
            ->values(['CutCode' => 10000, 'Apple' => 9999])
    ];
}
 
//...

Цвета

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

colors(array|Closure $values)
use MoonShine\Metrics\DonutChartMetric;
 
//...
 
public function components(): array
{
    return [
        DonutChartMetric::make('Подписчики')
            ->values(['CutCode' => 10000, 'Apple' => 9999])
            ->colors(['#ffcc00', '#00bb00'])
    ];
}
 
//...

Десятичные знаки

Метод decimals() позволяет указать максимальное количество десятичных знаков для общего значения.

По умолчанию отображается до трех десятичных знаков.

use MoonShine\Metrics\DonutChartMetric;
 
//...
 
public function components(): array
{
    return [
        DonutChartMetric::make('Подписчики')
            ->values(['CutCode' => 10000.12, 'Apple' => 9999.32])
            ->decimals(0)
    ];
}
 
//...

Ширина блока

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

columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)
  • $columnSpan - актуально для десктопной версии,
  • $adaptiveColumnSpan - актуально для мобильной версии.
use App\Models\Article;
use MoonShine\Decorations\Grid;
use MoonShine\Metrics\DonutChartMetric;
 
//...
 
public function components(): array
{
    return [
        Grid::make([
            DonutChartMetric::make('Подписчики')
                ->values(['CutCode' => 10000, 'Apple' => 9999])
                ->columnSpan(6),
            DonutChartMetric::make('Задачи')
                ->values(['Новые' => 234, 'Выполненные' => 421])
                ->columnSpan(6)
        ])
    ];
}
 
//...

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