Metric Line Chart

# Make

Метрика LineChartMetric предназначена для отображения линейных графиков.

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

make(Closure|string $label)

Метод line() позволяет добавить линию значений в метрику. В ValueMetric можно добавить несколько линий. 

line(
    array|Closure $line,
    string|array|Closure $color = '#7843E9'
)

$line - значения для построения графика,
$color - цвет линии. 

use MoonShine\Metrics\LineChartMetric; 
 
//...
 
public function components(): array
{
    return [
        LineChartMetric::make('Orders') 
            ->line([
                'Profit' => Order::query()
                    ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                    ->groupBy('date')
                    ->pluck('sum','date')
                    ->toArray()
            ])
            ->line([
                'Avg' => Order::query()
                    ->selectRaw('AVG(price) as avg, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                    ->groupBy('date')
                    ->pluck('avg','date')
                    ->toArray()
            ], '#EC4176') 
    ];
}
 
//...

Можно задать несколько линий через один метод line. 

use MoonShine\Metrics\LineChartMetric; 
 
//...
 
public function components(): array
{
    return [
        LineChartMetric::make('Orders') 
            ->line([
                'Profit' => Order::query()
                    ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                    ->groupBy('date')
                    ->pluck('sum','date')
                    ->toArray(),
                'Avg' => Order::query()
                    ->selectRaw('AVG(price) as avg, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                    ->groupBy('date')
                    ->pluck('avg','date')
                    ->toArray()
            ],[
                'red', 'blue'
            ]) 
    ];
}
 
//...

# Сортировка ключей

По умолчанию у графика LineChart ключи сортируются по возрастанию. Эту особенность можно отключить, используя метод withoutSortKeys(). 

LineChartMetric::make('Orders')
    ->line([
        'Profit' => Order::query()
            ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
            ->groupBy('date')
            ->pluck('sum','date')
            ->toArray()
    ])
    ->withoutSortKeys(),

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

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

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

$columnSpan - значение для десктопной версии,
$adaptiveColumnSpan - значение для мобильной версии. 

use App\Models\Article;
use MoonShine\Decorations\Grid;
use MoonShine\Metrics\LineChartMetric;
 
//...
 
public function components(): array
{
    return [
        Grid::make([ 
            LineChartMetric::make('Articles')
                ->line([
                    'Count' => [
                        now()->subDays()->format('Y-m-d') =>
                            Article::whereDate(
                                'created_at',
                                now()->subDays()->format('Y-m-d')
                            )->count(),
                        now()->format('Y-m-d') =>
                            Article::whereDate(
                                'created_at',
                                now()->subDays()->format('Y-m-d')
                            )->count()
                    ]
                ])
                ->columnSpan(6), 
            LineChartMetric::make('Comments')
                ->line([
                    'Count' => [
                        now()->subDays()->format('Y-m-d') =>
                            Comment::whereDate(
                                'created_at',
                                now()->subDays()->format('Y-m-d')
                            )->count(),
                        now()->format('Y-m-d') =>
                            Comment::whereDate(
                                'created_at',
                                now()->subDays()->format('Y-m-d')
                            )->count()
                    ]
                ])
                ->columnSpan(6) 
        ]) 
    ];
}
 
//...

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

Компоненты
Donut Chart
Компоненты
Value