Components

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)

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

values(array|Closure $values)
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)
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)
    ];
}
 
//...

Block width

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

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

See the Decoration Layout section for more details.

donut_chart_metric_column_span donut_chart_metric_column_span_dark