استخدام مكتبة Morris.js لإنشاء مخططات بيانية في Laravel

يُعتبر تحليل البيانات وعرضها بصريًا جزءًا أساسيًا في بناء تطبيقات الويب الحديثة، خصوصًا في أنظمة إدارة المحتوى ولوحات التحكم (Dashboards) التي تعتمد على تمثيل المعلومات بشكل مرئي لتحسين تجربة المستخدم وفهم البيانات بطريقة سريعة ودقيقة. ومن ضمن أدوات الرسم البياني المفتوحة المصدر التي تميزت بالبساطة والمرونة نجد مكتبة Morris.js، والتي يمكن دمجها بسهولة مع إطار العمل الشهير Laravel.

يهدف هذا المقال إلى توضيح كيفية استخدام مكتبة Morris.js لإنشاء مخططات بيانية تفاعلية داخل مشاريع Laravel بطريقة منظمة واحترافية، بداية من المفاهيم النظرية وانتهاءً بتنفيذ عملي متكامل يتضمن أمثلة قابلة للتطبيق في مختلف السياقات البرمجية.

لمحة عامة عن Morris.js

Morris.js هي مكتبة جافاسكريبت مفتوحة المصدر مبنية على مكتبة Raphaël.js وتستخدم SVG (الرسوميات الشعاعية) لإنشاء مخططات بيانية بسيطة وسهلة التخصيص. من مزاياها الأساسية:

• دعم لمجموعة متنوعة من أنواع الرسوم البيانية (line, bar, area, donut).

• تفاعل مرن مع البيانات القادمة من الخلفية عبر JSON.

• تصميم نظيف واحترافي يتناسب مع واجهات المستخدم الحديثة.

• تكامل سهل مع مكتبات مثل jQuery وBootstrap.

لماذا Laravel مع Morris.js؟

إطار العمل Laravel هو أحد أقوى وأشهر أطر العمل في لغة PHP، ويُستخدم على نطاق واسع لتطوير تطبيقات الويب المعقدة. بفضل بنية Laravel القائمة على MVC (Model-View-Controller)، يمكن فصل منطق المعالجة عن الواجهات مما يجعل دمج أدوات العرض المرئي مثل Morris.js أكثر سهولة وتنظيمًا. تكمن أهمية استخدام Morris.js مع Laravel في:

• تحويل البيانات القادمة من قواعد البيانات إلى JSON لاستهلاكها من طرف واجهات Morris.js.

• بناء لوحات تحكم Admin Dashboards تعتمد على بيانات ديناميكية.

• عرض إحصائيات وتوجهات الأداء والأنشطة بطريقة تفاعلية تساعد في اتخاذ القرار.

المتطلبات الأساسية

قبل البدء في العمل يجب التأكد من توفر الآتي:

• بيئة تطوير Laravel مثبتة (Laravel 8 أو أعلى).

• خادم HTTP محلي مثل XAMPP أو Valet أو Homestead.

• قاعدة بيانات مفعلة ومربوطة بمشروع Laravel.

• معرفة أساسية بـ JavaScript وBlade Templates.

خطوات تركيب مكتبة Morris.js في Laravel

1. تثبيت مكتبة Morris.js

لا تتوفر Morris.js مباشرة عبر NPM أو Composer، لذلك يجب تحميلها يدويًا أو استدعاؤها عبر CDN. نوصي باستخدام CDN لسهولة الدمج وسرعة التنفيذ. يمكنك تضمين الملفات التالية في ملف Blade الرئيسي مثل layouts/app.blade.php أو في welcome.blade.php:

html
CopyEdit

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js">script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js">script>

2. إعداد قاعدة البيانات ونموذج البيانات

لنفترض أننا نريد إنشاء رسم بياني لعدد المستخدمين المسجلين شهريًا. سنحتاج إلى جدول users يحتوي على تاريخ التسجيل.

إنشاء نموذج User:

bash
CopyEdit
php artisan make:model User -m

في ملف الهجرة create_users_table.php:

php
CopyEdit
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->timestamp('created_at')->nullable();
        $table->timestamps();
    });
}

ثم تنفيذ الهجرة:

bash
CopyEdit
php artisan migrate

3. إنشاء دالة لجلب البيانات

نقوم بإنشاء Controller مخصص للوحة التحكم.

bash
CopyEdit
php artisan make:controller DashboardController

في داخله نضيف دالة تقوم بجمع عدد المستخدمين حسب الأشهر:

php
CopyEdit
use App\Models\User;
use Illuminate\Support\Facades\DB;

public function index()
{
    $users = User::select(
        DB::raw("DATE_FORMAT(created_at, '%Y-%m') as month"),
        DB::raw("COUNT(*) as count")
    )
    ->groupBy('month')
    ->orderBy('month', 'ASC')
    ->get();

    return view('dashboard', compact('users'));
}

4. إعداد واجهة Blade لعرض الرسم البياني

في resources/views/dashboard.blade.php:

blade
CopyEdit
@extends('layouts.app')

@section('content')

    
عدد المستخدمين حسب الأشهر
    




@endsection

استخدام أنواع مختلفة من المخططات في Morris.js

1. المخطط الخطي (Line Chart)

مثالي لتتبع القيم المتغيرة بمرور الوقت.

javascript
CopyEdit
new Morris.Line({
  element: 'line-chart',
  data: [ /* نفس تنسيق البيانات */ ],
  xkey: 'month',
  ykeys: ['value'],
  labels: ['عدد المستخدمين']
});

2. مخطط المساحة (Area Chart)

مناسب لتوضيح الكميات التراكمية.

javascript
CopyEdit
new Morris.Area({
  element: 'area-chart',
  data: [ /* البيانات */ ],
  xkey: 'month',
  ykeys: ['value'],
  labels: ['عدد المستخدمين']
});

3. المخطط الدائري (Donut Chart)

يُستخدم لتقسيم القيمة الإجمالية إلى أجزاء.

javascript
CopyEdit
new Morris.Donut({
  element: 'donut-chart',
  data: [
    {label: "نشط", value: 70},
    {label: "غير نشط", value: 30}
  ]
});

إنشاء واجهة Dashboard متكاملة

لتحقيق الاستفادة القصوى من Morris.js في Laravel، يمكن تصميم لوحة تحكم كاملة تحتوي على أكثر من نوع من الرسوم البيانية لعرض:

• عدد المستخدمين شهريًا (Bar Chart).

• التوزيع الجغرافي للمستخدمين (Donut Chart).

• تطور عدد المنشورات أو المنتجات (Line Chart).

مثال لواجهة تحتوي على أكثر من رسم:

blade
CopyEdit

  

    
عدد المستخدمين شهريًا
    

  
  

    
توزيع المستخدمين
    

  

مع تضمين الجافاسكريبت اللازم أسفل الصفحة.

مقارنة Morris.js مع مكتبات أخرى

ملاحظات مهمة وتحسينات ممكنة

• التخزين المؤقت (Caching): استخدام Cache لتحسين الأداء عند تحميل البيانات.

• التحقق من صحة البيانات: خصوصًا في حالات وجود قيم مفقودة أو تواريخ غير مكتملة.

• تعدد اللغات: تعريب التسميات في الرسوم البيانية لتتناسب مع جمهور عربي.

• تحديث البيانات آليًا: باستخدام تقنيات مثل AJAX أو WebSockets لعرض البيانات في الوقت الحقيقي.

• إمكانية التخصيص: مثل ألوان الأعمدة والخطوط والعناوين لتناسب تصميم الموقع.

مصادر ومراجع

• Morris.js Official Documentation: https://morrisjs.github.io/morris.js/

• Laravel Official Documentation: https://laravel.com/docs