ApexCharts for MoonShine Laravel admin panel

Note

The package is based on the ApexCharts library.

---

Compatibility

MoonShine	Moonshine ApexCharts	Currently supported
>= v3.0	>= v1.0.0	yes

Installation

composer require moonshine/apexcharts

Metric Donut Chart

The DonutChartMetric metric is designed for creating Donut charts.

Make

You can create DonutChartMetric using the static make() method.

make(Closure|string $label)

Method values() allows you to specify the relevance for a metric.

values(array|Closure $values)

use MoonShine\Apexcharts\Components\DonutChartMetric;

DonutChartMetric::make('Subscribers') 
    ->values(['CutCode' => 10000, 'Apple' => 9999]) 

Colors

The colors() method allows you to specify colors for the metric.

colors(array|Closure $values)

DonutChartMetric::make('Subscribers')
    ->values(['CutCode' => 10000, 'Apple' => 9999])
    ->colors(['#ffcc00', '#00bb00'])

Decimal places

The decimals() method allows you to specify the maximum number of decimal places for the total value.

Note

By default, up to three decimal places are displayed.

DonutChartMetric::make('Subscribers')
    ->values(['CutCode' => 10000.12, 'Apple' => 9999.32])
    ->decimals(0) 

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 MoonShine\Apexcharts\Components\DonutChartMetric;
use MoonShine\UI\Components\Layout\Grid;

Grid::make([ 
    DonutChartMetric::make('Subscribers')
        ->values(['CutCode' => 10000, 'Apple' => 9999])
        ->columnSpan(6), 
    DonutChartMetric::make('Tasks')
        ->values(['New' => 234, 'Done' => 421])
        ->columnSpan(6) 
]) 

Note

See the Decoration Layout section for more details.

Metric Line Chart

The LineChartMetric metric is designed to display line charts.

Make

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\Apexcharts\Components\LineChartMetric;

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.

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 MoonShine\Apexcharts\Components\LineChartMetric;
use MoonShine\UI\Components\Layout\Grid;

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) 
])

Note

See the Decoration Layout section for more details.