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 .