Metric Donut Chart

# Make

Метрика DonutChartMetric предназначена для создания Donut графиков.

Создать DonutChartMetric можно воспользовавшись статическим методом make().

make(Closure|string $label)

make(Closure|string $label)

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

values(array|Closure $values)

values(array|Closure $values)

use MoonShine\Metrics\DonutChartMetric; 
 
//...
 
public function components(): array
{
    return [
        DonutChartMetric::make('Subscribers') 
            ->values(['CutCode' => 10000, 'Apple' => 9999]) 
    ];
}
 
//...

use MoonShine\Metrics\DonutChartMetric;

//...

public function components(): array
{
    return [
        DonutChartMetric::make('Subscribers')
            ->values(['CutCode' => 10000, 'Apple' => 9999])
    ];
}

//...

# Цвета

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

colors(array|Closure $values)

colors(array|Closure $values)

use MoonShine\Metrics\DonutChartMetric;
 
//...
 
public function components(): array
{
    return [
        DonutChartMetric::make('Subscribers')
            ->values(['CutCode' => 10000, 'Apple' => 9999])
            ->colors(['#ffcc00', '#00bb00']) 
    ];
}
 
//...

use MoonShine\Metrics\DonutChartMetric;

//...

public function components(): array
{
    return [
        DonutChartMetric::make('Subscribers')
            ->values(['CutCode' => 10000, 'Apple' => 9999])
            ->colors(['#ffcc00', '#00bb00'])
    ];
}

//...

# Дробная часть

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

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

use MoonShine\Metrics\DonutChartMetric;
 
//...
 
public function components(): array
{
    return [
        DonutChartMetric::make('Subscribers')
            ->values(['CutCode' => 10000.12, 'Apple' => 9999.32])
            ->decimals(0) 
    ];
}
 
//...

use MoonShine\Metrics\DonutChartMetric;

//...

public function components(): array
{
    return [
        DonutChartMetric::make('Subscribers')
            ->values(['CutCode' => 10000.12, 'Apple' => 9999.32])
            ->decimals(0)
    ];
}

//...

# Ширина блока

Метод 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\DonutChartMetric;
 
//...
 
public function components(): array
{
    return [
        Grid::make([ 
            DonutChartMetric::make('Subscribers')
                ->values(['CutCode' => 10000, 'Apple' => 9999])
                ->columnSpan(6), 
            DonutChartMetric::make('Tasks')
                ->values(['New' => 234, 'Done' => 421])
                ->columnSpan(6) 
        ]) 
    ];
}
 
//...

use App\Models\Article;
use MoonShine\Decorations\Grid;
use MoonShine\Metrics\DonutChartMetric;

//...

public function components(): array
{
    return [
        Grid::make([
            DonutChartMetric::make('Subscribers')
                ->values(['CutCode' => 10000, 'Apple' => 9999])
                ->columnSpan(6),
            DonutChartMetric::make('Tasks')
                ->values(['New' => 234, 'Done' => 421])
                ->columnSpan(6)
        ])
    ];
}

//...

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