Components

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.

line_chart_metric_column_span line_chart_metric_column_span_dark