معرفتش ترسم المخططات البيانية (Charts) مع إنرشيا جي إس (Inertia.js) ولاقيت نفسك تايه بين الفرت إند والباك إند؟ يا هلا بيك يا سيدي، كلنا مرينا بالموقف ده! بتبقى شغال على مشروع لارافيل (Laravel) وزي الفل، وفجأة العميل بيطلب "Dashboard" أو لوحة تحكم فيها جرافات ومخططات تفاعلية بتتحرك قدام عينه وتجيب البيانات ديناميكياً (Dynamic Data).

تيجي تربط مكتبة زي تشارت جى إس (Chart.js) أو أبيكس تشارتس (ApexCharts) مع Vue أو React جوه إنرشيا، تلاقي الدنيا ضربت معاك والبيانات مش عايزة تيجي صح، أو المخطط بيرسم مرة واحدة ومش عايز يحدث نفسه. في المقال ده، هقعد معاك قعدة رجالة وصنايعية، وهعرفك خطوة بخطوة إزاي تدمج مكتبات المخططات التفاعلية (Interactive Charts) مع بيئة إنرشيا بسلاسة وبدون أي headache.

ليه دمج المخططات مع إنرشيا بيعمل صداع للمبرمجين؟

المشكلة باختصار إن إنرشيا جي إس (Inertia.js) بتعتمد على فكرة SPA (Single Page Application) بس من غير تعقيدات الـ APIs التقليدية. الباك إند (Laravel) هو اللي بيبعت الداتا للصفحة (Props). المبرمج ساعات بيتلخبط: هل أجيب الداتا دي عبر أجاكس (AJAX) جوه الـ Component، ولا آخدها جاهزة من لارافيل كـ Prop وأسلمها للمخطط؟

الصح والحل السليم إننا نستغل قوة لارافيل في تجهيز الداتا وإرسالها مع الـ Page Props، والمكتبة في الفرت إند تستیلم الداتا دي وترسمها فوراً. ده بيوفر وقت، وبيبقي الكود نظيف وسهل الصيانة، وبيخلي الأداء (Performance) صاروخ.

الخطوة الأولى: تجهيز الباك إند في لارافيل (Laravel Backend)

أول حاجة هنعملها هي إحنا محتاجين نجهز الداتا اللي هتترسم في الجراف. نفترض مثلاً إننا عايزين نعرض مبيعات الشهور اللي فاتت. هندخل على الكونترولر (Controller) بتاعنا ونجمع الداتا من الداتا بيز (Database).

namespace App\Http\Controllers;

use App\Models\Order;
use Inertia\Inertia;

class DashboardController extends Controller
{
    public function index()
    {
        // تجهيز بيانات المبيعات ديناميكياً
        $salesData = Order::selectRaw('MONTH(created_at) as month, SUM(total) as total')
            ->groupBy('month')
            ->pluck('total', 'month');

        return Inertia::render('Dashboard', [
            'salesData' => $salesData
        ]);
    }
}

بالشكل ده، لارافيل جهز الشغل التثقيل وطلع لينا مصفوفة بيانات جاهزة ومظبوطة، وهيبعتها لصفحة الفرت إند اللي اسمها Dashboard.

الخطوة الثانية: استقبال الداتا وربطها بـ ApexCharts أو Chart.js

دلوقتي هنروح على ملف الفرت إند، وليكن مثلاً باستخدام ڤيوز (Vue.js 3)، وهناك هنستقبل الـ Prop اللي جايلنا من لارافيل. هنستخدم مكتبة أبيكس تشارتس (ApexCharts) عشان شكلها شيك وبتدعم التفاعل بسلاسة.

<script setup>
import { ref } from 'vue';

// استلام البيانات القادمة من لارافيل عبر إنرشيا
const props = defineProps({
    salesData: Object
});

// إعدادات المخطط البياني (Chart Options)
const chartOptions = ref({
    chart: {
        type: 'line',
        height: 350
    },
    xaxis: {
        categories: ['يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو']
    }
});

// تجهيز السيريز أو البيانات بناءً على اللي جالك من الباك إند
const chartSeries = ref([
    {
        name: 'المبيعات',
        data: Object.values(props.salesData)
    }
]);
</script>

<template>
    <div class="p-6 bg-white rounded-lg shadow-md">
        <h2 class="text-xl font-bold mb-4">مؤشرات المبيعات الشهرية</h2>
        <apexchart type="line" :options="chartOptions" :series="chartSeries" />
    </div>
</template>

الخطوة الثالثة: التعامل مع التحديثات الديناميكية (Reactivity)

الجميل في إنرشيا ومعاها ڤيوز أو ريأكت، إن لو الداتا اتحدثت في الباك إند أو المستخدم عمل فلتر (Filter) مثلاً بالوقت، الصفحة مش هتحدث بالكامل، لكن الـ Props هتتغير والمخطط البياني هيحدث نفسه تلقائياً (Reactivity) بدون ما تحس بأي تقطيع.

لو حبيت تعمل فلتر بيغير الداتا دي بدون ما تعمل Reload للصفحة، ممكن تستخدم طريقة router.get أو router.reload من مكتبة إنرشيا عشان تسحب الداتا الجديدة وتحدث الـ Props بكل سهولة.

خاتمة ونصيحة من أخوك

دمج المخططات البيانية (Charts) مع إنرشيا جي إس (Inertia.js) مش معقد خالص زي ما ناس كتير متخيلة؛ السر كله في إنك تفصل المسؤوليات: سيب لارافيل يجمع الحسبة ويظبط الداتا، وسيب الفرت إند (Vue/React) يركز بس في العرض والرسومات التفاعلية. ما تصعبش الامور على نفسك بكتابة أكواد أجاكس (AJAX) مالهاش لازمة طالما إنرشيا مغطية الموضوع ده ببراعة.

طور نفسك دايماً واقرأ الوثائق الرسمية (Documentation) بتاعت المكتبات دي، وكل ما تقابلbug اعتبرها فرصة تتعلم منها حاجة جديدة. بالتوفيق يا بطل!