Apexcharts Parte 2

1VisitorsPerMonth.php

<?php

namespace App\Livewire;

use App\Models\Visitor;
use Flowframe\Trend\Trend;
use Flowframe\Trend\TrendValue;
use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Contracts\View\View;
use Illuminate\Support\HtmlString;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class VisitorsPerMonth extends ApexChartWidget
{
    protected static ?string $chartId = 'visitorsPerMonth';

    protected function getHeading(): null|string|Htmlable|View
    {
        return new HtmlString(<<<'HTML'
            <h2 class="text-2xl font-bold bg-gradient-to-r from-lime-400 via-emerald-300-400 to-pink-400  text-transparent bg-clip-text">
                Visitors Per Month
            </h2>
        HTML);
    }

    protected function getSubheading(): null|string|Htmlable|View
    {
        return new HtmlString(<<<'HTML'
            <p class="text-sm text-gray-200">
                The source of this data is from the visitors table.
            </p>
        HTML);
    }

    protected function getOptions(): array
    {
        $visitorsPerMonth = Trend::model(Visitor::class)
            ->between(now()->subYear(), now())
            ->perMonth()
            ->count();

        $avg = round($visitorsPerMonth->avg('aggregate'), 0);

        return [
            'chart' => [
                'type' => 'line',
                'height' => 300,
                'toolbar' => [
                    'show' => false,
                ],
            ],
            'series' => [
                [
                    'name' => 'Visitors',
                    'data' => $visitorsPerMonth->map(fn (TrendValue $value) => $value->aggregate),
                ],
            ],
            'xaxis' => [
                'categories' => $visitorsPerMonth->map(fn (TrendValue $value) => $value->date),
                'axisBorder' => [
                    'show' => false,
                ],
                'axisTicks' => [
                    'show' => false,
                ],
                'labels' => [
                    'style' => [
                        'fontWeight' => 400,
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'fontWeight' => 400,
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'colors' => ['#bef264'],
            'plotOptions' => [
                'bar' => [
                    'borderRadius' => 18,
                ],
            ],
            'dataLabels' => [
                'enabled' => false,
            ],
            'grid' => [
                'show' => true,
                'strokeDashArray' => 4,
                'borderColor' => '#374151',
                'xaxis' => [
                    'lines' => [
                        'show' => true,
                    ],
                ],
                'yaxis' => [
                    'lines' => [
                        'show' => true,
                    ],
                ],
            ],
            'markers' => [
                'size' => 6,
                'colors' => ['#ec4899'],
                'strokeColors' => '#fff',
                'strokeWidth' => 4,
                'hover' => [
                    'size' => 10,
                ],
            ],
            'tooltip' => [
                'enabled' => true,
            ],
            'stroke' => [
                'curve' => 'smooth',
            ],
            'annotations' => [
                'yaxis' => [
                    [
                        'y' => $avg,
                        'borderColor' => '#ec4899',
                        'borderWidth' => 2,
                        'label' => [
                            'borderColor' => '#ec4899',
                            'style' => [
                                'color' => '#fffbeb',
                                'background' => '#ec4899',
                            ],
                            'text' => 'Average: '.$avg,
                        ],
                    ],
                ],
            ],
        ];
    }
}

2VisitorsPerCountry.php

<?php

namespace App\Livewire;

use App\Models\Visitor;
use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Contracts\View\View;
use Illuminate\Support\HtmlString;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class VisitorsPerCountry extends ApexChartWidget
{
    protected static ?string $chartId = 'visitorsPerCountry';

    protected function getHeading(): null|string|Htmlable|View
    {
        return new HtmlString(<<<'HTML'
            <h2 class="text-2xl font-bold bg-gradient-to-r from-lime-400 via-emerald-300-400 to-pink-400 text-transparent bg-clip-text">
                Visitors Per Country
            </h2>
        HTML);
    }

    protected function getSubheading(): null|string|Htmlable|View
    {
        return new HtmlString(<<<'HTML'
            <p class="text-sm text-gray-200">
                The source of this data is from the visitors table.
            </p>
        HTML);
    }

    protected function getFooter(): null|string|Htmlable|View
    {
        return new HtmlString(<<<'HTML'
            <p class="text-sm text-gray-200 italic">
                <span class="font-bold">Note</span>: This chart is based on the country of the visitor.
            </p>
        HTML);
    }

    protected function getOptions(): array
    {
        $visitorsPerCountry = Visitor::selectRaw('country, COUNT(*) as total')
            ->groupBy('country')
            ->orderBy('total', 'desc')
            ->get();

        return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
                'toolbar' => [
                    'show' => false,
                ],
            ],
            'series' => [
                [
                    'name' => 'Visitors',
                    'data' => $visitorsPerCountry->pluck('total'),
                ],
            ],
            'xaxis' => [
                'categories' => $visitorsPerCountry->pluck('country'),
                'axisBorder' => [
                    'show' => false,
                ],
                'axisTicks' => [
                    'show' => false,
                ],
                'labels' => [
                    'style' => [
                        'fontWeight' => 400,
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'fontWeight' => 400,
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'colors' => ['#65a30d'],
            'fill' => [
                'type' => 'gradient',
                'gradient' => [
                    'shade' => 'dark',
                    'type' => 'vertical',
                    'shadeIntensity' => 0.5,
                    'gradientToColors' => ['#d9f99d'],
                    'inverseColors' => true,
                    'opacityFrom' => 1,
                    'opacityTo' => 1,
                    'stops' => [0, 100],
                ],
            ],
            'plotOptions' => [
                'bar' => [
                    'borderRadius' => 10,
                    'borderColor' => '#d946ef',
                ],
            ],
            'dataLabels' => [
                'enabled' => false,
            ],
            'grid' => [
                'show' => false,
            ],
            'tooltip' => [
                'enabled' => true,
            ],
        ];
    }
}

3VisitorsPerDevice.php

<?php

namespace App\Livewire;

use App\Models\Visitor;
use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Contracts\View\View;
use Illuminate\Support\HtmlString;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class VisitorsPerDevice extends ApexChartWidget
{
    protected static ?string $chartId = 'visitorsPerDevice';

    protected static ?int $contentHeight = 335;

    protected function getHeading(): null|string|Htmlable|View
    {
        return new HtmlString(<<<'HTML'
            <h2 class="text-2xl font-bold bg-gradient-to-r from-lime-400 via-emerald-300-400 to-pink-400 text-transparent bg-clip-text">
                Visitors Per Device
            </h2>
        HTML);
    }

    protected function getSubheading(): null|string|Htmlable|View
    {
        return new HtmlString(<<<'HTML'
            <p class="text-sm text-gray-200">
                The source of this data is from the visitors table.
            </p>
        HTML);
    }

    protected function getOptions(): array
    {
        $visitorsPerDevice = Visitor::selectRaw('device, COUNT(*) as total')
            ->groupBy('device')
            ->orderBy('total', 'desc')
            ->get();

        return [
            'chart' => [
                'type' => 'donut',
                'height' => 300,
            ],
            'series' => $visitorsPerDevice->pluck('total'),
            'labels' => $visitorsPerDevice->pluck('device'),
            'legend' => [
                'show' => true,
                'labels' => [
                    'fontFamily' => 'inherit',
                ],
                'position' => 'bottom',
            ],
            'colors' => ['#ec4899', '#38bdf8', '#a3e635'],
            'stroke' => [
                'show' => false,
            ],
        ];
    }
}

4ShowVisitors.blade.php

<div class="max-w-5xl mx-auto dark:bg-black">

    <h1 class="dark:text-white text-4xl font-bold py-8">
        Site Visitors
    </h1>

    <div class="w-full py-5">
        @livewire(App\Livewire\VisitorsPerMonth::class)
    </div>

    <div class="flex justify-between items-center gap-5">
        <div class="w-full">
            @livewire(App\Livewire\VisitorsPerCountry::class)
        </div>
        <div class="w-full">
            @livewire(App\Livewire\VisitorsPerDevice::class)
        </div>
    </div>
    
</div>