Metric Line Chart

# Make

The LineChartMetric metric is designed to display line charts.

You can create a LineChartMetric using the static make() method. 

make(Closure|string $label)

The line() method allows you to add a value line to the metric. You can add multiple lines to ValueMetric. 

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

$line - values for charting,
$color - 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') 
    ];
}
 
//...

You can define multiple lines through one line method. 

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

# Sorting keys

By default, the LineChart chart has its keys sorted in ascending order. This feature can be disabled using the withoutSortKeys() method. 

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(),

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

See the Decoration Layout section for more details.

Components
Donut Chart
Components
Value