Metric Donut Chart

# Make

The DonutChartMetric metric is designed for creating Donut charts.

You can create DonutChartMetric using the static make() method.

make(Closure|string $label)

make(Closure|string $label)

Method values() allows you to specify the relevance for a metric.

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

The colors() method allows you to specify colors for the metric.

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'])
    ];
}

//...

# Decimal places

The decimals() method allows you to specify the maximum number of decimal places for the total value.

By default, up to three decimal places are displayed.

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)
    ];
}

//...

# Block width

Method columnSpan() allows you to set the block width in the Grid grid.

columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)

columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)

$columnSpan - relevant for desktop,
$adaptiveColumnSpan - relevant for mobile version.

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)
        ])
    ];
}

//...

See the Decoration Layout section for more details.