Gráficas con Laravel Livewire y ApexCharts

Laravel Livewire y ApexCharts nos permiten desarrollar gráficas impresionantes de una forma realmente sencilla. En esta entrada te voy a ofrecer un paso a paso para que consigas una gran herramienta para tus futuros proyectos.

Crear un Componente Reutilizable

Lo primero que vamos a hacer es crear un componente ApexCharts el cual podremos reutilizar en un futuro de forma rápida y sencilla.

php artisan make:component ApexCharts

Ahora abre el componente .php y actualiza el código por el siguiente.

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class ApexCharts extends Component
{
    public $chartId;
    public $seriesData;
    public $categories;

    public function __construct($chartId, $seriesData, $categories) {
        $this->chartId = $chartId;
        $this->seriesData = $seriesData;
        $this->categories = $categories;
    }

    public function render() {
        return view('components.apex-charts');
    }
}

Lo único que hacemos aquí es preparar los datos que podemos necesitar más adelante para nuestra gráfica.

Ahora abre la vista del componente ApexCharts y vamos a modificar el código por el siguiente:

<div id="{!! $chartId !!}"></div>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
    <script>
        (function () {
            const chart = new ApexCharts(document.getElementById(`{!! $chartId !!}`), window['{{ $chartId }}-options']);
            chart.render();
            document.addEventListener('livewire:load', () => {
                @this.on(`refreshChartData-{!! $chartId !!}`, (chartData) => {
                    chart.updateOptions({
                        xaxis: {
                            categories: chartData.categories,
                        }
                    });
                    chart.updateSeries(chartData.series);
                })
            });
        }());
    </script>
@endpush

Lo primero que hacemos es crear un div utilizando el identificador único de cada gráfica, debe ser así.

Más abajo, creamos la instancia de la gráfica pasándole las opciones como veremos más adelante y la renderizamos.

Con @this.on lo que hacemos es decirle a nuestra gráfica que cuando se emita ese evento, esté atenta y ejecute todo el código que se ubica dentro, todo esto gracias a Laravel Livewire. Componente Livewire para crear ApexCharts Ahora, crea un componente Livewire, en mi caso lo he llamado Report, añade el siguiente código y ajústalo a tu modelo y datos.

php artisan make:livewire Report

<?php
namespace Modules\TimeTracking\Http\Livewire\DailyTracking;

use Carbon\Carbon;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\DB;
use Livewire\Component;
use Modules\TimeTracking\Entities\DailyTracking;

class Report extends Component
{
    public $chartId;
    public $categories;
    public $total;
    public $series;
    public $range;

    protected function rangeFromTo(Collection $chartDays): Collection {
        $data = new Collection();
        for($i = 0; $i <= $this->toDate->diffInDays($this->fromDate); $i++) {
            $day = (clone $this->fromDate)->addDays($i)->format("d-m-Y");
            $row = $chartDays->where("formatted_day", $day)->first();

            $data->push([
                "formatted_day" => $day,
                "total" => $row ? (int) $row->total : 0,
            ]);
        }
        return $data;
    }

    protected function getDays(): Collection {
        $query = DailyTracking::select(
            DB::raw('DATE_FORMAT(day, "%d-%m-%Y") as formatted_day'),
            DB::raw('SUM(total_time) AS total'),
        );

        return $query
            ->groupBy('formatted_day')
            ->get();
    }

    public function render() {
        $this->chartId = "report";
        $chartDays = $this->getDays();
        $range = $this->range($chartDays);
      
        $this->categories = $range->pluck("formatted_day")->toArray();

        $this->series = new Collection;
      
        $this->series->push([
            "name" => __("Horas"),
            "data" => $range->pluck('total')
        ]);

        $this->emit("refreshChartData-{$this->chartId}", [
            'series' => $this->series,
            'categories' => $this->categories,
        ]);

        return view('timetracking::livewire.daily-tracking.report');
    }
}

Lo más importante es crear las series y las categorías, que son los datos que necesita ApexCharts para funcionar.

Una vez hecho abre el archivo de vista del componente Livewire y añade el siguiente código, con lo que todo quedará funcionando.

<div>
    <x-apex-charts :chart-id="$chartId" :series-data="$series" :categories="$categories" />
</div>

@push("apex-charts-options")
    <script>
        window['{{ $chartId }}-options'] = {
            chart: {
                id: `{!! $chartId !!}`,
                type: 'bar',
                height: '300px',
            },
            dataLabels: {
                enabled: false,
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded'
                },
            },
            legend: {
                show: true
            },
            xaxis: {
                categories: @json($categories),
                labels: {
                    rotate: -45
                },
            },
            yaxis: [
                {
                    axisTicks: {
                        show: true
                    },
                    axisBorder: {
                        show: true,
                    },
                    title: {
                        text: '{{ __("Horas") }}',
                    }
                }
            ],
            series: @json($series),
            fill: {
                opacity: 1
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
        }
    </script>
@endpush

¡Ya tienes un componente Livewire con ApexCharts listo para utilizar en tus proyectos!