Компоненты

Метрика Line Chart

Создание

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

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

make(Closure|string $label)
make(Closure|string $label)

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

line(
    array|Closure $line,
    string|array|Closure $color = '#7843E9'
)
line(
    array|Closure $line,
    string|array|Closure $color = '#7843E9'
)
  • $line - значения для построения графика,
  • $color - цвет линии.
use MoonShine\Metrics\LineChartMetric;
 
//...
 
public function components(): array
{
    return [
        LineChartMetric::make('Заказы')
            ->line([
                'Прибыль' => Order::query()
                    ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                    ->groupBy('date')
                    ->pluck('sum','date')
                    ->toArray()
            ])
            ->line([
                'Среднее' => Order::query()
                    ->selectRaw('AVG(price) as avg, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                    ->groupBy('date')
                    ->pluck('avg','date')
                    ->toArray()
            ], '#EC4176')
    ];
}
 
//...
use MoonShine\Metrics\LineChartMetric;
 
//...
 
public function components(): array
{
    return [
        LineChartMetric::make('Заказы')
            ->line([
                'Прибыль' => Order::query()
                    ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                    ->groupBy('date')
                    ->pluck('sum','date')
                    ->toArray()
            ])
            ->line([
                'Среднее' => 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('Заказы')
            ->line([
                'Прибыль' => Order::query()
                    ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                    ->groupBy('date')
                    ->pluck('sum','date')
                    ->toArray(),
                'Среднее' => Order::query()
                    ->selectRaw('AVG(price) as avg, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                    ->groupBy('date')
                    ->pluck('avg','date')
                    ->toArray()
            ],[
                'red', 'blue'
            ])
    ];
}
 
//...
use MoonShine\Metrics\LineChartMetric;
 
//...
 
public function components(): array
{
    return [
        LineChartMetric::make('Заказы')
            ->line([
                'Прибыль' => Order::query()
                    ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                    ->groupBy('date')
                    ->pluck('sum','date')
                    ->toArray(),
                'Среднее' => 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('Заказы')
    ->line([
        'Прибыль' => Order::query()
            ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
            ->groupBy('date')
            ->pluck('sum','date')
            ->toArray()
    ])
    ->withoutSortKeys(),
LineChartMetric::make('Заказы')
    ->line([
        'Прибыль' => 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(
    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('Статьи')
                ->line([
                    'Количество' => [
                        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('Комментарии')
                ->line([
                    'Количество' => [
                        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)
        ])
    ];
}
 
//...
use App\Models\Article;
use MoonShine\Decorations\Grid;
use MoonShine\Metrics\LineChartMetric;
 
//...
 
public function components(): array
{
    return [
        Grid::make([
            LineChartMetric::make('Статьи')
                ->line([
                    'Количество' => [
                        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('Комментарии')
                ->line([
                    'Количество' => [
                        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)
        ])
    ];
}
 
//...

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