Laravel Visitor Counter - data visualization

dashboard.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <x-graph :data="$chart_data" />
                    <x-table :columns="['Date', 'Visitors']">
                        @forelse ($visitors as $day)
                        <x-table-row :row="[date('d.m.Y', strtotime($day->date)), $day->total]" />
                        @empty
                        <x-table-row :row="['-', 'No data available']" />
                        @endforelse
                    </x-table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

DashboardController.php

// app/Http/Controllers/DashboardController.php
<?php

namespace App\Http\Controllers;

use App\Models\Visitor;
use Illuminate\Support\Facades\DB;

class DashboardController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $visitors = Visitor::select('date', DB::raw('count(*) as total'))->where('date', '>', today()->subMonth())->groupBy('date')->get();
        $chart_data = array();
        foreach ($visitors as $data)
        {
            array_push($chart_data, array($data->date->format('d.m.Y'), $data->total));
        }

        return view('dashboard', compact(['visitors', 'chart_data']));
    }
}

graph.blade.php

@props(['data'])

<canvas id="chartContainer"></canvas>

<script>

var jsonData = <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>;
var dates = [];
var visitors = [];

for (var i = 0; i < jsonData.length; i++) {
	dates.push(jsonData[i][0]);
	visitors.push(jsonData[i][1]);
}

var ctx = document.getElementById('chartContainer').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
		labels: dates,
        datasets: [{
            label: 'Visits per day',
			data: visitors,
            backgroundColor: '#EAB543',
			hoverBackgroundColor: '#F8EFBA',
            borderColor: '#25CCF7',
            borderWidth: 2,
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
					beginAtZero: false,
					fontFamily: 'Nunito',
					fontStyle: 'bold',
				},
				gridLines: {
					display: false,
				},
			}],
			xAxes: [{
				gridLines: {
					display: false,
				},
				ticks: {
					fontFamily: 'Nunito',
				},
			}],
        },
    }
});

</script>

table-row.blade.php

@props(['row', 'actions'])

<tr class="border-b border-gray-200 hover:bg-gray-100">
    @foreach ($row as $var)
        <td class="py-3 px-6 whitespace-nowrap text-center">{!!$var!!}</td>
    @endforeach
    @if (!empty($actions))
        <td class="py-3 px-6 whitespace-nowrap text-center">
        @foreach($actions as $action)
            @if ($action == 'delete')
                <a href="{{'/' . request()->path() . '/' . $row[0]}}" onclick="event.preventDefault(); document.getElementById('form-{{$row[0]}}').submit();"><i class="ri-delete-bin-2-line text-red-500"></i></a>
                <form method="POST" action="{{'/' . request()->path() . '/' . $row[0]}}" style="display: none" id="form-{{$row[0]}}">
                    @csrf
                    @method('delete')
                </form>
            @elseif ($action == 'edit')
                <a href="{{'/' . request()->path() . '/' . $row[0] . '/edit'}}"><i class="ri-edit-2-line text-blue-500"></i></a>
            @endif
        @endforeach
        </td>
    @endif
    {{$slot}}
</tr>

table.blade.php

@props(['columns'])

<table class="min-w-max w-full table-auto">
    <thead>
        <tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
            @foreach ($columns as $name)
                <th class="py-3 px-6 text-center">
                    {{$name}}
                </th>
            @endforeach
        </tr>
    </thead>
    <tbody class="text-gray-600 text-sm font-light">
        {{$slot}}
    </tbody>
</table>

Visitor.php

// app/Models/Visitor.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Visitor extends Model
{
    use HasFactory;

    public $timestamps = FALSE;

    protected $fillable = [
        'date',
        'ip'
    ];

    /**
     * The attributes that should be cast.
     *
     * @var array
     */

    protected $casts = [
        'date' => 'datetime:Y-m-d',
    ];

}